jeans/WLED
jeans/WLED
1
0
Fork 0
mirror of https://github.com/wled/WLED.git synced 2025-07-27 20:56:40 +00:00
Code Issues Packages Projects Releases Wiki Activity

Use canvas instead of CSS gradient for liveview

Browse Source 
Allows for "pixel perfect" liveview instead of diffused view, to better match what's shown at https://kno.wled.ge/features/effects/. This will make it easier to see what the LEDs are doing, although it may not be as accurate a representation for installations with diffused LEDs. Includes fallback to CSS gradient method for browsers that don't support canvas.
This commit is contained in:
zanhecht 2023-12-27 13:20:22 -05:00 committed by GitHub
parent 08d9f7d967
commit 901d56f898
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 43 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

58
wled00/data/liveview.htm
View File

@ -16,10 +16,21 @@
height: 100%; height: 100%;
position: absolute; position: absolute;
} }
#canvas {
width: 100%;
height: 100%;
position: absolute;
}
</style> </style>
<script> <script>
var ws; var ws;
var c = document.getElementById('canvas');
var ctx = c.getContext('2d');
var tmout = null; var tmout = null;
function setCanvas() {
c.width = document.documentElement.clientWidth;
}
setCanvas();
function update() // via HTTP (/json/live) function update() // via HTTP (/json/live)
{ {
if (document.hidden) { if (document.hidden) {
@ -36,20 +47,28 @@
return res.json(); return res.json();
}) })
.then(json => { .then(json => {
var leddata = (data) => "#" + ((data.length > 6) ? data.substring(2) : data);
var str = "linear-gradient(90deg,"; var str = "linear-gradient(90deg,";
var len = json.leds.length; var len = json.leds.length;
for (i = 0; i < len; i++) { if (typeof ctx === "object") { //canvas support
var leddata = json.leds[i]; setCanvas();
if (leddata.length > 6) leddata = leddata.substring(2); ctx.clearRect(0, 0, c.width, c.height);
str += "#" + leddata; for (i = 0; i < len; i++) {
if (i < len -1) str += "," ctx.fillStyle = leddata(json.leds[i]);
ctx.fillRect ( i * c.width / len, 0, c.width, c.height);
}
} else { //fallback to gradient method
for (i = 0; i < len; i++) {
str += leddata(json.leds[i]) + ((i < len -1) ? "," : "");
}
str += ")";
document.getElementById("canv").style.background = str;
} }
str += ")";
document.getElementById("canv").style.background = str;
clearTimeout(tmout); clearTimeout(tmout);
tmout = setTimeout(update, 40); tmout = setTimeout(update, 40);
}) })
.catch(function (error) { .catch(function (error) {
console.error("Peek HTTP error:",error);
clearTimeout(tmout); clearTimeout(tmout);
tmout = setTimeout(update, 2500); tmout = setTimeout(update, 2500);
}) })
@ -86,15 +105,24 @@
if (toString.call(e.data) === '[object ArrayBuffer]') { if (toString.call(e.data) === '[object ArrayBuffer]') {
let leds = new Uint8Array(event.data); let leds = new Uint8Array(event.data);
if (leds[0] != 76) return; //'L' if (leds[0] != 76) return; //'L'
let str = "linear-gradient(90deg,";
let len = leds.length; let len = leds.length;
let start = leds[1]==2 ? 4 : 2; // 1 = 1D, 2 = 1D/2D (leds[2]=w, leds[3]=h) let start = leds[1]==2 ? 4 : 2; // 1 = 1D, 2 = 1D/2D (leds[2]=w, leds[3]=h)
for (i = start; i < len; i+=3) { let rgb = (i) => `rgb(${leds[i]},${leds[i+1]},${leds[i+2]})`;
str += `rgb(${leds[i]},${leds[i+1]},${leds[i+2]})`; if (typeof ctx === "object") { //canvas support
if (i < len -3) str += "," setCanvas();
ctx.clearRect(0, 0, c.width, c.height);
for (i = start; i < len; i+=3) {
ctx.fillStyle = rgb(i);
ctx.fillRect ( (i - start) * c.width / (len - start), 0, c.width, c.height);
}
} else { //fallback to gradient method
let str = "linear-gradient(90deg,";
for (i = start; i < len; i+=3) {
str += rgb(i) + ((i < len -3) ? "," : "");
}
str += ")";
document.getElementById("canv").style.background = str;
} }
str += ")";
document.getElementById("canv").style.background = str;
} }
} catch (err) { } catch (err) {
console.error("Peek WS error:",err); console.error("Peek WS error:",err);
@ -104,6 +132,6 @@
</script> </script>
</head> </head>
<body onload="S()"> <body onload="S()">
<div id="canv"></div> <div id="canv"><canvas id="canvas"></canvas></div>
</body> </body>
</html> </html>