Untitled

<!DOCTYPE html>
<html lang="jp" xml:lang="jp">
  <head>
    <meta charset="utf-8">
    <title>Sketch</title>
    <style>
      body{
          margin: 0px; padding: 0px;
      }
      canvas {
          margin: 0px; padding: 0px;
          border-style: double;
          border-width: 5px;
          border-color: red;
      }
    </style>
    <meta name="viewport" content="width=device-width,user-scalable=no" />
  </head>
  <body>
    <!-- w = 128x2-10, h = 64x2-10 -->
    <canvas id="sketch_canvas" width="246" height="118"></canvas>
  <!-- <script type="text/javascript" src="sketch.js"></script> -->
  <script type="text/javascript">
/**
 * Sketch JS
 */

var ctx = document.getElementById("sketch_canvas").getContext("2d");

var pX = new Array();
var pY = new Array();
var isDrag = new Array();
var sequence = "";

function isIpodSafari() {
    var ua = navigator.userAgent.match(/iP/);
    return (ua == null) ? false : true;
}

function addPoint(x, y, dragging) {
    pX.push(x);
    pY.push(y);
    isDrag.push(dragging);
}

function redraw() {
    ctx.strokeStyle = "#00aaaa";
    ctx.lineJoin = "round";
    ctx.lineWidth = 5;
    var ppX, ppY;
    for(var i = 0; i < pX.length; i++) {
        ctx.beginPath();
        if(isDrag[i] && i > 0) {
            ppX = pX[i-1];
            ppY = pY[i-1];
        } else {
            ppX = pX[i] - 1;
            ppY = pY[i];
        }
        ctx.moveTo(ppX, ppY);
        ctx.lineTo(pX[i], pY[i]);
        if(ppX >= 0 && ppX <= 246 && ppY >= 0 && ppY <= 118) {
            sequence += Math.round(ppX/2) + "," + Math.round(ppY/2) + ":" +
                Math.round(pX[i]/2) + "," + Math.round(pY[i]/2) + ";";
        }
        ctx.closePath();
        ctx.stroke();
    }
    if(sendable) {
        ws.send(JSON.stringify({value:sequence + "."}));
        sequence = "";
        sendable = false;
    }
    pX = new Array();
    pY = new Array();
}

var sendable = false;
var ws = new WebSocket("ws://192.168.254.23:8888/glcd");
ws.onopen = function() {};
ws.onmessage = function (evt) {
    if(evt.data == "ok") {
        sendable = true;
    } else {
        sendable = false;
    }
};


var isPaint;

function pendown(e) {
    if(isIpodSafari()) {
        e.preventDefault();
        e = e.targetTouches[0];
    }
    isPaint = true;
    addPoint(e.pageX, e.pageY, false);
    redraw();
}
document.getElementById("sketch_canvas").addEventListener("mousedown", pendown, false);
document.getElementById("sketch_canvas").addEventListener("touchstart", pendown, false);

function penmove(e) {
    if(isIpodSafari()) {
        e.preventDefault();
        e = e.targetTouches[0];
    }
    if(isPaint){
        addPoint(e.pageX, e.pageY, true);
        redraw();
    }
}
document.getElementById("sketch_canvas").addEventListener("mousemove", penmove, false);
document.getElementById("sketch_canvas").addEventListener("touchmove", penmove, false);

function penup(e) {
    isPaint = false;
}
document.getElementById("sketch_canvas").addEventListener("mouseup", penup, false);
document.getElementById("sketch_canvas").addEventListener("touchend", penup, false);

  </script>
  </body>
</html>