119 lines
3.7 KiB
HTML
119 lines
3.7 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1">
|
|
<meta charset="utf-8">
|
|
<meta name="theme-color" content="#222222">
|
|
<title>WLED Live Preview</title>
|
|
<style>
|
|
body {
|
|
margin: 0;
|
|
}
|
|
#canv1, #canv2 {
|
|
background: black;
|
|
filter: brightness(175%);
|
|
width: 100%;
|
|
height: 100%;
|
|
position: absolute;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div style="margin:auto">
|
|
<canvas id="liveviewCanvas" width="320", height="320" style="border:1px solid #000">
|
|
LiveView
|
|
</canvas>
|
|
</div>
|
|
<script>
|
|
var canvas = document.getElementById('liveviewCanvas');
|
|
var leds = "";
|
|
var matrixWidth = 0;
|
|
var pixelsPerLed = 0;
|
|
// Check for canvas support
|
|
if (canvas.getContext) {
|
|
// Access the rendering context
|
|
var ctx = canvas.getContext('2d');
|
|
|
|
//In case of pixels
|
|
|
|
// // ImageData object
|
|
// var imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
|
|
// // One-dimensional array containing the data in the RGBA order
|
|
// var data = imageData.data;
|
|
|
|
// function drawLedPixels(x, y, r, g, b, a) { //old
|
|
// // console.log(x, y, r, g, b, a);
|
|
// for (right = 0; right < pixelsPerLed; right++) {
|
|
// for (down = 0; down < pixelsPerLed; down++) {
|
|
// ff = (x * pixelsPerLed + right + (y * pixelsPerLed + down) * matrixWidth * pixelsPerLed) * 4;
|
|
// // if (x==15 && y==15)
|
|
// // console.log("ff=" + x + " * " + pixelsPerLed + " +" + right + " + (" + y + " * " + pixelsPerLed + " +" + down + ") * " + matrixWidth + ") * 4 = " + ff, data.length); //(5*10+1 + (12*10+1) * 16) * 4 = (51 + 121*16) * 4
|
|
// data[ff + 0] = r;
|
|
// data[ff + 1] = g;
|
|
// data[ff + 2] = b;
|
|
// data[ff + 3] = a;
|
|
// }
|
|
// }
|
|
// }
|
|
|
|
function drawLedCircles(x, y, r, g, b, a) {
|
|
ctx.fillStyle = `rgb(${r},${g},${b})`;
|
|
ctx.beginPath();
|
|
ctx.arc(x*pixelsPerLed+pixelsPerLed/2, y*pixelsPerLed+pixelsPerLed/2, pixelsPerLed/2, 0, 2 * Math.PI);
|
|
ctx.fill();
|
|
}
|
|
|
|
function paintLeds() {
|
|
// data represents the Uint8ClampedArray containing the data
|
|
// in the RGBA order [r0, g0, b0, a0, r1, g1, b1, a1, ..., rn, gn, bn, an]
|
|
|
|
for (i = 2; i < leds.length; i+=3) {
|
|
let ff = (i-2)/3;
|
|
drawLedCircles(ff%matrixWidth, Math.floor(ff/matrixWidth), leds[i], leds[i+1], leds[i+2], 255)
|
|
}
|
|
|
|
// ctx.putImageData(imageData, 0, 0); //in case of drawLedPixels
|
|
}
|
|
}
|
|
|
|
function updatePreview(ledsp) {
|
|
leds = ledsp;
|
|
matrixWidth = Math.sqrt((leds.length - 2)/3);
|
|
pixelsPerLed = canvas.width / matrixWidth;
|
|
// console.log(Math.sqrt((leds.length - 2)/3), pixelsPerLed, leds);
|
|
paintLeds();
|
|
}
|
|
|
|
function getLiveJson(e) {
|
|
try {
|
|
if (toString.call(e.data) === '[object ArrayBuffer]') {
|
|
let leds = new Uint8Array(event.data);
|
|
if (leds[0] != 76) return; //'L'
|
|
updatePreview(leds);
|
|
}
|
|
}
|
|
catch (err) {
|
|
console.error("Peek WS error:",err);
|
|
}
|
|
}
|
|
|
|
var ws;
|
|
try {
|
|
ws = top.window.ws;
|
|
} catch (e) {}
|
|
if (ws && ws.readyState === WebSocket.OPEN) {
|
|
console.info("Peek uses top WS");
|
|
ws.send("{'lv':true}");
|
|
} else {
|
|
console.info("Peek WS opening");
|
|
ws = new WebSocket((window.location.protocol == "https:"?"wss":"ws")+"://"+document.location.host+"/ws");
|
|
ws.onopen = function () {
|
|
console.info("Peek WS open");
|
|
ws.send("{'lv':true}");
|
|
}
|
|
}
|
|
ws.binaryType = "arraybuffer";
|
|
ws.addEventListener('message',getLiveJson);
|
|
</script>
|
|
</body>
|
|
</html> |