laclefyoshi/sketch.html

## sketch.html
<!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>
	<!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>