Now with Websockets and Web (HMTL) based GUI
This commit is contained in:
enny
244
WebGUI.html
Normal file
244
WebGUI.html
Normal file
@@ -0,0 +1,244 @@
|
||||
<!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>
|
||||
Reference in New Issue
Block a user