245 lines
6.8 KiB
HTML
245 lines
6.8 KiB
HTML
|
<!DOCTYPE html>
|
||
|
|
<html lang=de">
|
||
|
|
<head>
|
||
|
|
<meta charset="utf-8" />
|
||
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||
|
|
<title>LED Board</title>
|
||
|
|
<style>
|
||
|
|
body {background-color: #ccc; margin: 0; padding: 0; text-align: center;}
|
||
|
|
input {background-color: #ccc; border-radius: 2px;}
|
||
|
|
.menu { background-color: rgb(4, 0, 59); color: #ccc; padding: 1.2em; width: 100%; box-sizing: border-box;}
|
||
|
|
.panelRow{
|
||
|
|
display: inline-block;
|
||
|
|
font-size: 0;
|
||
|
|
margin-top: 0px;}
|
||
|
|
.pixel{
|
||
|
|
float: left;
|
||
|
|
width: 20px;
|
||
|
|
height: 20px;
|
||
|
|
margin-right:0px;
|
||
|
|
background-color: #000;
|
||
|
|
}
|
||
|
|
</style>
|
||
|
|
</head>
|
||
|
|
<body>
|
||
|
|
<div class="menu">
|
||
|
|
IP: <input type="text" id="ip" value="10.23.42.24">
|
||
|
|
<div style="width: 2em; display: inline-block;" ></div>
|
||
|
|
Port: <input type="text" id="port" value="81">
|
||
|
|
<div style="width: 2em; display: inline-block;" ></div>
|
||
|
|
Panel width: <input type="text" id="width" value="32" style="width: 2.5em;" onchange="creatGUI()">
|
||
|
|
height: <input type="text" id="height" value="40" style="width: 2.5em;" onchange="creatGUI()">
|
||
|
|
<div style="width: 1em; display: inline-block;" ></div>
|
||
|
|
Connection state: <div id="connectionState" onclick="toggleConnection()" style="background-color: red; display: inline-block; width: 1em; height: 1em; border-radius: 0.5em;"></div>
|
||
|
|
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<input type="button" value="clear" onclick="clearCanvas()"><br />
|
||
|
|
<canvas id="can" style="background-color:#000; margin: 1em;"></canvas>
|
||
|
|
|
||
|
|
<script type="text/javascript">
|
||
|
|
var socket;
|
||
|
|
document.onload = openWebSocket();
|
||
|
|
var isTouch = (('ontouchstart' in window) || (navigator.msMaxTouchPoints > 0));
|
||
|
|
|
||
|
|
var canvas, ctx = false,
|
||
|
|
prevX = 0,
|
||
|
|
currX = 0,
|
||
|
|
prevY = 0,
|
||
|
|
currY = 0,
|
||
|
|
dragMode = false;
|
||
|
|
|
||
|
|
var onColor = "#fd0";
|
||
|
|
var offColor = "#310";
|
||
|
|
|
||
|
|
var pixelBuffer = new Array(0);
|
||
|
|
var scaling;
|
||
|
|
var xMax, yMax;
|
||
|
|
var changeFlag = false;
|
||
|
|
var frameRate = 3; //frames per second
|
||
|
|
|
||
|
|
creatGUI();
|
||
|
|
setTimeout(frameRefresh, 1000 / frameRate);
|
||
|
|
|
||
|
|
|
||
|
|
function openWebSocket()
|
||
|
|
{
|
||
|
|
ip = document.getElementById('ip').value;
|
||
|
|
port = document.getElementById('port').value;
|
||
|
|
panelWidthElement = document.getElementById('width');
|
||
|
|
panelHeightElement = document.getElementById('height');
|
||
|
|
|
||
|
|
displayView = document.getElementById("can");
|
||
|
|
console.log("connect to " + ip + ":" + port);
|
||
|
|
|
||
|
|
socket = new WebSocket('ws://' + ip + ':'+port+'', ['arduino']);
|
||
|
|
socket.onopen = function ()
|
||
|
|
{
|
||
|
|
console.log('connected');
|
||
|
|
document.getElementById('connectionState').style.backgroundColor = "#3d3";
|
||
|
|
};
|
||
|
|
|
||
|
|
socket.onerror = function (error)
|
||
|
|
{
|
||
|
|
console.log('WebSocket Error ', error);
|
||
|
|
document.getElementById('connectionState').style.backgroundColor = "#dd3";
|
||
|
|
};
|
||
|
|
|
||
|
|
socket.onclose = function ()
|
||
|
|
{
|
||
|
|
console.log('WebSocket connection closed');
|
||
|
|
document.getElementById('connectionState').style.backgroundColor = "#d33";
|
||
|
|
};
|
||
|
|
}
|
||
|
|
|
||
|
|
function frameRefresh()
|
||
|
|
{
|
||
|
|
if(changeFlag==true && socket.readyState === WebSocket.OPEN)
|
||
|
|
{
|
||
|
|
changeFlag = false;
|
||
|
|
sendPixelBuffer();
|
||
|
|
console.log("refreshed");
|
||
|
|
}
|
||
|
|
|
||
|
|
setTimeout(frameRefresh, 1000 / frameRate);
|
||
|
|
}
|
||
|
|
|
||
|
|
function toggleConnection()
|
||
|
|
{
|
||
|
|
if(socket.readyState === WebSocket.CLOSED)
|
||
|
|
{
|
||
|
|
openWebSocket();
|
||
|
|
}
|
||
|
|
else
|
||
|
|
{
|
||
|
|
socket.close();
|
||
|
|
}
|
||
|
|
|
||
|
|
}
|
||
|
|
|
||
|
|
function sendPixelBuffer()
|
||
|
|
{
|
||
|
|
header = new Uint8Array(6);
|
||
|
|
header[0] = Math.floor(xMax / 255);
|
||
|
|
header[1] = xMax % 255;
|
||
|
|
header[2] = Math.floor(yMax / 255);
|
||
|
|
header[3] = yMax % 255;
|
||
|
|
header[4] = 0;
|
||
|
|
header[5] = 0;
|
||
|
|
|
||
|
|
socket.send(header);
|
||
|
|
socket.send(pixelBuffer);
|
||
|
|
}
|
||
|
|
|
||
|
|
function creatGUI()
|
||
|
|
{
|
||
|
|
scaling = 10;//(document.width / 2) / panelWidthElement.value;
|
||
|
|
|
||
|
|
xMax = panelWidthElement.value;
|
||
|
|
yMax = panelHeightElement.value;
|
||
|
|
displayView.width = panelWidthElement.value*scaling;// + "px";
|
||
|
|
displayView.height = panelHeightElement.value*scaling;// + "px";
|
||
|
|
|
||
|
|
pixelBuffer = new Uint8Array(xMax*yMax);
|
||
|
|
|
||
|
|
initCanvas();
|
||
|
|
}
|
||
|
|
|
||
|
|
function clearCanvas()
|
||
|
|
{
|
||
|
|
ctx = canvas.getContext("2d");
|
||
|
|
ctx.clearRect(0, 0, displayView.width, displayView.height);
|
||
|
|
|
||
|
|
for(x = 0; x < xMax; x++)
|
||
|
|
{
|
||
|
|
|
||
|
|
for(y = 0; y < yMax; y++)
|
||
|
|
{
|
||
|
|
pixelBuffer[x, xMax*y] = 0;
|
||
|
|
drawDot(x*scaling+1, y*scaling +1, true);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
function initCanvas() {
|
||
|
|
canvas = document.getElementById('can');
|
||
|
|
ctx = canvas.getContext("2d");
|
||
|
|
w = canvas.width;
|
||
|
|
h = canvas.height;
|
||
|
|
|
||
|
|
canvas.addEventListener("mousemove", function (e) {
|
||
|
|
findxy('move', e)
|
||
|
|
}, false);
|
||
|
|
canvas.addEventListener("mousedown", function (e) {
|
||
|
|
findxy('down', e)
|
||
|
|
}, false);
|
||
|
|
canvas.addEventListener("mouseup", function (e) {
|
||
|
|
findxy('up', e)
|
||
|
|
}, false);
|
||
|
|
canvas.addEventListener("mouseout", function (e) {
|
||
|
|
findxy('out', e)
|
||
|
|
}, false);
|
||
|
|
|
||
|
|
clearCanvas();
|
||
|
|
}
|
||
|
|
|
||
|
|
function findxy(res, e) {
|
||
|
|
if (res == 'down') {
|
||
|
|
prevX = currX;
|
||
|
|
prevY = currY;
|
||
|
|
currX = e.clientX - canvas.offsetLeft;
|
||
|
|
currY = e.clientY - canvas.offsetTop;
|
||
|
|
|
||
|
|
drawDot(currX, currY);
|
||
|
|
dragMode = true;
|
||
|
|
}
|
||
|
|
if (res == 'up' || res == "out") {
|
||
|
|
dragMode = false;
|
||
|
|
}
|
||
|
|
if (res == 'move') {
|
||
|
|
if (dragMode) {
|
||
|
|
prevX = currX;
|
||
|
|
prevY = currY;
|
||
|
|
currX = e.clientX - canvas.offsetLeft;
|
||
|
|
currY = e.clientY - canvas.offsetTop;
|
||
|
|
drawDot(currX, currY);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
function drawDot(x, y, forceOff=false)
|
||
|
|
{
|
||
|
|
x = Math.floor(x / scaling);
|
||
|
|
y = Math.floor(y / scaling);
|
||
|
|
|
||
|
|
if((pixelBuffer[x+xMax*y] == 0 || dragMode==true) && forceOff==false)
|
||
|
|
{
|
||
|
|
ctx.fillStyle = onColor;
|
||
|
|
if(pixelBuffer[x+xMax*y] != 1)
|
||
|
|
{
|
||
|
|
changeFlag = true;
|
||
|
|
}
|
||
|
|
pixelBuffer[x+xMax*y] = 1;
|
||
|
|
}
|
||
|
|
else
|
||
|
|
{
|
||
|
|
ctx.fillStyle = offColor;
|
||
|
|
|
||
|
|
if(pixelBuffer[x+xMax*y] != 0)
|
||
|
|
{
|
||
|
|
changeFlag = true;
|
||
|
|
}
|
||
|
|
pixelBuffer[x+xMax*y] = 0;
|
||
|
|
}
|
||
|
|
|
||
|
|
ctx.beginPath();
|
||
|
|
ctx.arc(x * scaling + scaling/2, y * scaling + scaling/2, scaling/2, 0, 2 * Math.PI);
|
||
|
|
|
||
|
|
ctx.fill();
|
||
|
|
ctx.stroke();
|
||
|
|
}
|
||
|
|
|
||
|
|
</script>
|
||
|
|
</body>
|
||
|
|
</html>
|