Web Sketch (HTML5 Canvas)

Data from 2 rotary switches are sent to a webpage. It draws lines using HTML5 canvas with PHPoC Shield for Arduino like the Etch A Sketch.

BeginnerFull instructions provided5 hours5,999

Things used in this project

Hardware components

PHPoC Shield for Arduino

Arduino UNO

Rotary angle sensor

Story

Project

Do you know a game called "Etch A Sketch"?

You can draw lines with each knob on the bottom corner: the left knob for horizontal lines and the right knob for vertical lines.

I made this toy by using PHPoC Arduino Shield (P4S-347/P4S-348).

How it Works

Data from 2 rotary switches is sent to web page, and it draws lines using HTML5 canvas like the Etch A Sketch.

ADC reads voltage from rotary switches and converts it to a number between 0 and 1023 (5V). You can only try easy drawings, because the values are only available from 0 to 1023.

When you use a mobile device, you can erase drawings by shaking the device which is shown in the video.

Code

#include "SPI.h"
#include "Phpoc.h"

PhpocServer server(80);

void setup() {
  Serial.begin(9600);
  while(!Serial)
    ;

  Phpoc.begin(PF_LOG_SPI | PF_LOG_NET);
  //Phpoc.begin();

  server.beginWebSocket("rotary_canvas");

  Serial.print("WebSocket server address : ");
  Serial.println(Phpoc.localIP());  
}

void loop() {
      
  int x = 0, y = 0;
  
  for (int i = 0; i < 10; i++) 
  {
    x = x + analogRead(A0);
    y = y + analogRead(A1);
  }
  
  String rotary = String(x/10) + "/" + String(y/10);
  
  char rotaryBuf[10];
  rotary.toCharArray(rotaryBuf, 10);
  
  server.write(rotaryBuf);
  Serial.println(rotaryBuf);
  
  delay(50);
}

<!DOCTYPE html>
<html>
<head>
<title>PHPoC Shield - Sketch</title>
<meta name="viewport" content="width=device-width, initial-scale=0.55, maximum-scale=0.55">
<style>
body { font-family: verdana, Helvetica, Arial, sans-serif, gulim; font-weight: bold; text-align: center; }
h1 { font-size: 25pt; }
h2 { font-size: 15pt; }
#remote { background-color: lightgrey; border: 50px solid #E00000; border-radius: 5%;}
</style>
<script type="text/javascript">

var ws;
var canvas;
var ctx;
var WIDTH = 500;
var HEIGHT = 350;
var startPointX;
var startPointY;

function init()
{    
    if(ws == null)
    {
        ws = new WebSocket("ws://<?echo _SERVER("HTTP_HOST")?>/rotary_canvas", "text.phpoc");
        document.getElementById("ws_state").innerHTML = "CONNECTING";
        
        ws.onopen = ws_onopen;
        ws.onclose = ws_onclose;
        ws.onmessage = ws_onmessage; 
    }
    else
        ws.close();
}
function connect_onclick()
{
    if(ws == null)
    {
        var ws_host_addr = "<?echo _SERVER("HTTP_HOST")?>";
        //var debug = document.getElementById("debug");

        if((navigator.platform.indexOf("Win") != -1) && (ws_host_addr.charAt(0) == "["))
        {
            // network resource identifier to UNC path name conversion
            ws_host_addr = ws_host_addr.replace(/[\[\]]/g, '');
            ws_host_addr = ws_host_addr.replace(/:/g, "-");
            ws_host_addr += ".ipv6-literal.net";
        }

        //debug.innerHTML = "<br>" + navigator.platform + " " + ws_host_addr;
        ws = new WebSocket("ws://" + ws_host_addr + "/rotary_canvas", "text.phpoc");

        document.getElementById("ws_state").innerHTML = "CONNECTING";

        ws.onopen = ws_onopen;
        ws.onclose = ws_onclose;
        ws.onmessage = ws_onmessage;
    }
    else
        ws.close();
}
function ws_onopen()
{
    document.getElementById("ws_state").innerHTML = "<font color='blue'>CONNECTED</font>";
    document.getElementById("bt_connect").innerHTML = "Disconnect";
}
function ws_onclose()
{
    document.getElementById("ws_state").innerHTML = "<font color='gray'>CLOSED</font>";
    document.getElementById("bt_connect").innerHTML = "Connect";

    ws.onopen = null;
    ws.onclose = null;
    ws.onmessage = null;
    ws = null;
}
function ws_onmessage(e_msg)
{
    e_msg = e_msg || window.event; // MessageEvent

    var debug = document.getElementById("debug");
    //debug.innerHTML = e_msg.data;    
    
    canvas  = document.getElementById("remote");
    ctx = canvas.getContext("2d");
    
    var position = e_msg.data.split("/");;
    var x = Math.round(position[0] * WIDTH / 1023);
    var y = Math.round(position[1] * HEIGHT / 1023);
        
    draw(x, y);
}

function draw(pointX, pointY)
{    
    ctx.lineWidth = 2;  
    ctx.strokeStyle = "#404040";
    ctx.lineJoin = "round";
    ctx.lineCap = "round";
    ctx.beginPath(); 
    
    ctx.moveTo(startPointX, HEIGHT - startPointY);
    ctx.lineTo(pointX, HEIGHT - pointY);
    
    ctx.stroke();
    
    startPointX = pointX;
    startPointY = pointY;
    
}

function canvas_clear()
{    
    ctx.clearRect(0, 0, WIDTH, HEIGHT);
}

if (window.DeviceMotionEvent) 
{
    window.addEventListener('devicemotion', detectShake, true);
}
 
var detect_count = 0; 
function detectShake(event)
{    
    var accl = event.acceleration;
    if (accl.x > 1.5 || accl.y > 1.5 || accl.z > 1.5)
        detect_count++;
    
    if (detect_count > 50)
    {
        canvas_clear();
        detect_count = 0;
    }
}

window.onload = init;
</script>
</head>

<body>
<h1>PHPoC Sketch</h1>
<br />
<h2>WebSocket <font id="ws_state" color="gray">CLOSED</font></h2>
<button id="bt_connect" type="button" onclick="connect_onclick();">Connect</button> <button id="bt_clear" type="button" onclick="canvas_clear();">Clear</button>
<span id="debug"></span>
<br /><br /><br />
<canvas id="remote" width="500" height="350">
<br /><br /><br />
</body>
</html>

Web Sketch (HTML5 Canvas)