lba.gitea/WLED
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Add 2D liveview (Peek 2D) - Beta version

Browse Source
This commit is contained in:
ewowi 2022-07-24 17:10:29 +02:00
parent 2fe4edb6df
commit e3499e5a70
8 changed files with 2053 additions and 1812 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
tools/cdata.js
View File

@ -393,6 +393,12 @@ const char PAGE_dmxmap[] PROGMEM = R"=====()=====";
method: "gzip", method: "gzip",
filter: "html-minify", filter: "html-minify",
}, },
{
file: "liveviewws2D.htm",
name: "PAGE_liveviewws2D",
method: "gzip",
filter: "html-minify",
},
{ {
file: "404.htm", file: "404.htm",
name: "PAGE_404", name: "PAGE_404",

8
wled00/data/index.css
View File

@ -233,6 +233,14 @@ button {
border: 0px; border: 0px;
} }
#liveview2D {
height: 320px;
display: none;
width: 100%;
border: 0px;
margin: auto;
}
.tab { .tab {
background-color: transparent; background-color: transparent;
color: var(--c-d); color: var(--c-d);

4
wled00/data/index.htm
View File

@ -329,6 +329,10 @@
</div> </div>
</div> </div>
<div id="mliveview2D" class="modal">
<div id="kliveview2D">Loading...</div><br>
</div>
<div id="rover" class="modal"> <div id="rover" class="modal">
<i class="icons huge">&#xe410;</i><br> <i class="icons huge">&#xe410;</i><br>
<div id="lv">?</div><br><br> <div id="lv">?</div><br><br>

28
wled00/data/index.js
View File

@ -1551,10 +1551,30 @@ function toggleSync()
function toggleLiveview() function toggleLiveview()
{ {
if (isInfo) toggleInfo();
if (isNodes) toggleNodes();
isLv = !isLv; isLv = !isLv;
gId('liveview').style.display = (isLv) ? "block":"none";
var url = (loc?`http://${locip}`:'') + "/liveview"; var lvID = "liveview";
gId('liveview').src = (isLv) ? url:"about:blank"; if (isM) {
lvID = "liveview2D"
if (isLv) {
var cn = '<iframe id="liveview2D" src="about:blank"></iframe>';
d.getElementById('kliveview2D').innerHTML = cn;
}
gId('mliveview2D').style.transform = (isLv) ? "translateY(0px)":"translateY(100%)";
gId('buttonSr').lastChild.innerHTML = "Peek2D"; //lastchild is <p>Peek</p>
}
else
{
gId('buttonSr').lastChild.innerHTML = "Peek"; //lastchild is <p>Peek</p>
}
gId(lvID).style.display = (isLv) ? "block":"none";
var url = (loc?`http://${locip}`:'') + "/" + lvID;
gId(lvID).src = (isLv) ? url:"about:blank";
gId('buttonSr').className = (isLv) ? "active":""; gId('buttonSr').className = (isLv) ? "active":"";
if (!isLv && ws && ws.readyState === WebSocket.OPEN) ws.send('{"lv":false}'); if (!isLv && ws && ws.readyState === WebSocket.OPEN) ws.send('{"lv":false}');
size(); size();
@ -1563,6 +1583,7 @@ function toggleLiveview()
function toggleInfo() function toggleInfo()
{ {
if (isNodes) toggleNodes(); if (isNodes) toggleNodes();
if (isLv) toggleLiveview();
isInfo = !isInfo; isInfo = !isInfo;
if (isInfo) requestJson(); if (isInfo) requestJson();
gId('info').style.transform = (isInfo) ? "translateY(0px)":"translateY(100%)"; gId('info').style.transform = (isInfo) ? "translateY(0px)":"translateY(100%)";
@ -1572,6 +1593,7 @@ function toggleInfo()
function toggleNodes() function toggleNodes()
{ {
if (isInfo) toggleInfo(); if (isInfo) toggleInfo();
if (isLv) toggleLiveview();
isNodes = !isNodes; isNodes = !isNodes;
if (isNodes) loadNodes(); if (isNodes) loadNodes();
gId('nodes').style.transform = (isNodes) ? "translateY(0px)":"translateY(100%)"; gId('nodes').style.transform = (isNodes) ? "translateY(0px)":"translateY(100%)";

119
wled00/data/liveviewws2D.htm Normal file
View File

@ -0,0 +1,119 @@
<!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>

66
wled00/html_other.h
View File

@ -281,6 +281,72 @@ const uint8_t PAGE_liveviewws[] PROGMEM = {
}; };
// Autogenerated from wled00/data/liveviewws2D.htm, do not edit!!
const uint16_t PAGE_liveviewws2D_length = 960;
const uint8_t PAGE_liveviewws2D[] PROGMEM = {
0x1f, 0x8b, 0x08, 0x00, 0x00, 0x00, 0x00, 0x00, 0x02, 0x13, 0x7d, 0x55, 0x61, 0x6f, 0xdb, 0x36,
0x10, 0xfd, 0xee, 0x5f, 0xa1, 0x32, 0x4d, 0x4b, 0xd5, 0x8a, 0x24, 0x3b, 0xc8, 0x5a, 0xc8, 0x92,
0x8b, 0x35, 0xf5, 0x87, 0x0e, 0xd9, 0x6a, 0x20, 0xdd, 0x82, 0x21, 0x08, 0x50, 0x4a, 0x3a, 0x5b,
0x5c, 0x24, 0x52, 0x23, 0x29, 0x2b, 0x86, 0xa1, 0xff, 0xbe, 0xa3, 0xe4, 0x38, 0x4e, 0xba, 0xcd,
0x1f, 0x24, 0x51, 0x77, 0x7a, 0xef, 0xdd, 0x3b, 0xf2, 0x1c, 0xbf, 0xfa, 0xfc, 0xf5, 0xf2, 0xdb,
0x9f, 0xcb, 0x85, 0x53, 0x98, 0xaa, 0x9c, 0xc7, 0xfb, 0x2b, 0xb0, 0x7c, 0x1e, 0x57, 0x60, 0x98,
0x23, 0x58, 0x05, 0x09, 0xd9, 0x70, 0x68, 0x6b, 0xa9, 0x0c, 0x71, 0x46, 0x99, 0x14, 0x06, 0x84,
0x49, 0x48, 0xcb, 0x73, 0x53, 0x24, 0x39, 0x6c, 0x78, 0x06, 0x67, 0xfd, 0xc2, 0xe3, 0x82, 0x1b,
0xce, 0xca, 0x33, 0x9d, 0xb1, 0x12, 0x92, 0x89, 0x57, 0xe1, 0x8b, 0xaa, 0xa9, 0x1e, 0xd7, 0x64,
0x8f, 0x39, 0xca, 0x0a, 0xa6, 0x34, 0x20, 0x46, 0x63, 0x56, 0x67, 0x1f, 0xc8, 0x33, 0x2a, 0x53,
0x40, 0x05, 0x67, 0x99, 0x2c, 0xa5, 0x22, 0xce, 0x81, 0xec, 0x64, 0xda, 0xff, 0x30, 0xd5, 0x70,
0x53, 0xc2, 0x7c, 0x74, 0x73, 0xb5, 0xf8, 0xec, 0x5c, 0xf1, 0x0d, 0x38, 0x4b, 0x05, 0x56, 0x5e,
0x1c, 0x0c, 0x91, 0x58, 0x9b, 0xad, 0x4d, 0x48, 0x65, 0xbe, 0xdd, 0x55, 0x4c, 0xad, 0xb9, 0x88,
0xc2, 0xee, 0x24, 0x63, 0x62, 0x33, 0xf1, 0xfa, 0xdb, 0x74, 0x97, 0xb2, 0xec, 0x7e, 0xad, 0x64,
0x23, 0xf2, 0xe8, 0x24, 0x0c, 0xc3, 0xd9, 0x8a, 0x97, 0x06, 0x54, 0x94, 0x2a, 0xbe, 0x2e, 0x8c,
0x00, 0xad, 0xe9, 0xe4, 0xfd, 0xc5, 0xa9, 0x3b, 0xeb, 0xab, 0x8a, 0x26, 0x61, 0x78, 0x3a, 0x2b,
0xc0, 0xc6, 0x86, 0xe7, 0x5a, 0x6a, 0xac, 0x53, 0x8a, 0x88, 0xa5, 0x5a, 0x96, 0x8d, 0x81, 0x6e,
0x14, 0x07, 0x03, 0x6d, 0x1c, 0x0c, 0xde, 0x59, 0xf6, 0x79, 0x9c, 0xf3, 0x8d, 0xd3, 0xbf, 0x4f,
0xc8, 0x5e, 0x09, 0x6b, 0x8c, 0xc4, 0x22, 0xac, 0x0c, 0xa6, 0x1d, 0x9e, 0x27, 0xa4, 0xc4, 0x1a,
0xac, 0xfe, 0xcb, 0xfe, 0x15, 0x1a, 0x3c, 0xf8, 0x4a, 0xce, 0xa7, 0x21, 0x71, 0x3c, 0x67, 0xe0,
0xdd, 0x2f, 0xf7, 0x58, 0xa9, 0x54, 0x39, 0xca, 0x9d, 0xd4, 0x0f, 0x0e, 0xf2, 0xf3, 0xdc, 0xb1,
0x45, 0x90, 0xb9, 0x75, 0xe3, 0x8f, 0xde, 0x89, 0x01, 0x1e, 0xc5, 0xa0, 0x80, 0xf9, 0x28, 0xd6,
0x99, 0xe2, 0xb5, 0x99, 0x8f, 0x36, 0x4c, 0x39, 0xad, 0xf6, 0x86, 0x68, 0x92, 0xcb, 0xac, 0xa9,
0xd0, 0x5c, 0x7f, 0x0d, 0x66, 0x51, 0x82, 0x7d, 0xfc, 0xb4, 0xfd, 0x92, 0xd3, 0x97, 0x8a, 0x5c,
0xaf, 0x84, 0x5c, 0x27, 0x84, 0x78, 0x15, 0x33, 0x8a, 0x3f, 0xdc, 0xf4, 0xfa, 0x42, 0xaf, 0xe6,
0x0f, 0x50, 0xea, 0x25, 0xa8, 0x2b, 0xc8, 0x93, 0x70, 0xc6, 0x57, 0x74, 0x00, 0xb6, 0x78, 0x97,
0xb6, 0x6f, 0x0f, 0xc6, 0xdd, 0x59, 0xca, 0xcc, 0x3c, 0x24, 0x3f, 0x84, 0x28, 0x99, 0xe6, 0xc4,
0x9d, 0xad, 0x1a, 0x91, 0x59, 0x2b, 0x9d, 0x5c, 0xb1, 0x16, 0x81, 0x2e, 0xb9, 0xca, 0x4a, 0xd0,
0x14, 0x3c, 0xe3, 0x71, 0x4f, 0x78, 0xda, 0x53, 0xee, 0x0e, 0x01, 0x7c, 0x6c, 0x51, 0x79, 0xdd,
0x97, 0xff, 0x5d, 0xad, 0x53, 0xfa, 0x7a, 0xc7, 0x3b, 0xef, 0xf5, 0x4e, 0xd8, 0x8b, 0xee, 0xdc,
0xef, 0x9e, 0xcd, 0x49, 0x01, 0x2d, 0x5e, 0x32, 0x53, 0x50, 0xb7, 0x5f, 0x33, 0x95, 0x51, 0x78,
0x77, 0xac, 0x73, 0x7c, 0xbc, 0x08, 0xa6, 0x9e, 0xf9, 0xdf, 0xe8, 0x8b, 0x65, 0xe8, 0x4d, 0xdf,
0xfd, 0x8a, 0xe8, 0xfe, 0xf2, 0xcb, 0x80, 0x6f, 0x35, 0x51, 0xb7, 0x3b, 0xd4, 0x50, 0x33, 0x2e,
0x0c, 0xe6, 0x6a, 0xea, 0xee, 0x56, 0x52, 0x51, 0x9e, 0x4c, 0x67, 0x3c, 0xb6, 0xee, 0xf9, 0x25,
0x88, 0xb5, 0x29, 0x66, 0x7c, 0x9c, 0x9c, 0xbb, 0xbb, 0x12, 0x8c, 0x03, 0x09, 0xe5, 0x67, 0x53,
0x37, 0x38, 0x9f, 0xbd, 0xac, 0xfc, 0xf4, 0xc8, 0x66, 0xaf, 0xe7, 0x5b, 0x95, 0x12, 0xd1, 0x20,
0x38, 0x0a, 0x0c, 0x4d, 0xb9, 0xe5, 0x77, 0xfb, 0xfb, 0x78, 0x72, 0x78, 0x9a, 0xde, 0x79, 0xd3,
0x8b, 0x0b, 0xb7, 0xeb, 0x9e, 0x84, 0x35, 0x75, 0xce, 0x0c, 0xec, 0x0f, 0x0a, 0x05, 0xab, 0x00,
0x3b, 0x0a, 0xcf, 0x1a, 0xda, 0x33, 0xe9, 0xbf, 0x95, 0xa1, 0xf4, 0x48, 0x71, 0x2f, 0xd1, 0x7d,
0xde, 0xeb, 0x7d, 0x2f, 0xfb, 0x7d, 0x7a, 0xac, 0xc9, 0x3b, 0xaa, 0xff, 0x89, 0x1b, 0x5b, 0x6e,
0x37, 0xe6, 0x2f, 0x5a, 0x0a, 0xcb, 0x6c, 0xd4, 0x76, 0x87, 0x5b, 0x85, 0xdc, 0xca, 0xf4, 0x2f,
0xc8, 0x8c, 0xf3, 0xb3, 0x52, 0x6c, 0xfb, 0xa9, 0x59, 0xad, 0x40, 0xdd, 0x91, 0x24, 0x49, 0x8c,
0xbc, 0x46, 0x40, 0xb1, 0xf6, 0x71, 0x64, 0x94, 0x14, 0x7c, 0x14, 0xce, 0xdc, 0x47, 0xcb, 0x04,
0xb4, 0xce, 0xef, 0xc8, 0xf1, 0xa1, 0xff, 0x8a, 0xc2, 0xc6, 0x6e, 0xdf, 0x3e, 0xc3, 0x6e, 0xbf,
0xf7, 0x3f, 0xbd, 0x4a, 0xe0, 0x36, 0xbc, 0x73, 0x15, 0x98, 0x46, 0x89, 0xd9, 0xcb, 0xaa, 0xbb,
0x2e, 0x63, 0x26, 0x2b, 0xac, 0x0a, 0x9c, 0x2b, 0x78, 0x72, 0xc0, 0x07, 0xa5, 0xd0, 0x59, 0xb2,
0x04, 0xb8, 0x77, 0x6e, 0xae, 0x9d, 0x7e, 0x19, 0x11, 0xcf, 0xe6, 0x5a, 0xa1, 0xad, 0x46, 0x3d,
0x35, 0x56, 0x2a, 0x72, 0xd9, 0xfa, 0xad, 0x7e, 0x02, 0xe8, 0x5a, 0xfd, 0xe6, 0x4d, 0xab, 0x7d,
0x85, 0xa7, 0x7d, 0x7b, 0x6d, 0x90, 0x07, 0xb5, 0xdf, 0x40, 0x7a, 0x2d, 0xb3, 0x7b, 0x30, 0xfe,
0xd7, 0xe5, 0xe2, 0xb7, 0x8f, 0xf4, 0x91, 0x85, 0x8b, 0x95, 0xdc, 0x93, 0x34, 0x1a, 0xb4, 0x83,
0x98, 0xc8, 0x86, 0x07, 0x0b, 0x01, 0x34, 0x08, 0x3c, 0x72, 0xbb, 0xb7, 0xe5, 0xe6, 0x6d, 0x64,
0x54, 0x03, 0x1d, 0x71, 0xdd, 0xe8, 0xdf, 0xbe, 0x44, 0x79, 0xb2, 0x06, 0x81, 0xd6, 0xe0, 0x87,
0x14, 0x95, 0x59, 0x33, 0x0e, 0x8c, 0x94, 0x92, 0xc2, 0x98, 0x5a, 0x47, 0xe8, 0xe1, 0x5e, 0x6e,
0x29, 0x51, 0x2d, 0x76, 0xc0, 0xaf, 0x95, 0x34, 0x12, 0x07, 0xea, 0x47, 0xd2, 0x6a, 0x4d, 0x22,
0xbc, 0x12, 0x77, 0x4c, 0xa2, 0x20, 0x20, 0xe3, 0xc3, 0x0c, 0x38, 0x24, 0x17, 0x52, 0x9b, 0x31,
0x09, 0x6c, 0x8e, 0xeb, 0x4b, 0x61, 0x29, 0x93, 0xc7, 0x5e, 0xd2, 0x27, 0xe3, 0x7e, 0x14, 0xf6,
0x9f, 0xe5, 0x74, 0x7d, 0x20, 0xe5, 0x82, 0xa9, 0xed, 0xb7, 0x6d, 0x8d, 0xf3, 0x8b, 0xd9, 0xee,
0xa5, 0x7d, 0xcf, 0x89, 0x8d, 0xb1, 0x3c, 0x5f, 0xd8, 0x56, 0x5e, 0x71, 0x8d, 0xd3, 0x1e, 0xb0,
0x21, 0x15, 0xce, 0x60, 0xb6, 0x06, 0xe2, 0x1d, 0xed, 0x1e, 0xd7, 0x0e, 0xd9, 0x61, 0x92, 0xc5,
0xc1, 0x30, 0x5f, 0x83, 0xfe, 0xef, 0xea, 0x1f, 0xaa, 0x8c, 0x74, 0x8d, 0xc4, 0x06, 0x00, 0x00
};
// Autogenerated from wled00/data/404.htm, do not edit!! // Autogenerated from wled00/data/404.htm, do not edit!!
const uint16_t PAGE_404_length = 868; const uint16_t PAGE_404_length = 868;
const uint8_t PAGE_404[] PROGMEM = { const uint8_t PAGE_404[] PROGMEM = {

3626
wled00/html_ui.h
View File

File diff suppressed because it is too large Load Diff

8
wled00/wled_server.cpp
View File

@ -103,6 +103,14 @@ void initServer()
request->send(response); request->send(response);
//request->send_P(200, "text/html", PAGE_liveviewws); //request->send_P(200, "text/html", PAGE_liveviewws);
}); });
server.on("/liveview2D", HTTP_GET, [](AsyncWebServerRequest *request){
if (handleIfNoneMatchCacheHeader(request)) return;
AsyncWebServerResponse *response = request->beginResponse_P(200, "text/html", PAGE_liveviewws2D, PAGE_liveviewws2D_length);
response->addHeader(FPSTR(s_content_enc),"gzip");
setStaticContentCacheHeaders(response);
request->send(response);
//request->send_P(200, "text/html", PAGE_liveviewws);
});
#else #else
server.on("/liveview", HTTP_GET, [](AsyncWebServerRequest *request){ server.on("/liveview", HTTP_GET, [](AsyncWebServerRequest *request){
if (handleIfNoneMatchCacheHeader(request)) return; if (handleIfNoneMatchCacheHeader(request)) return;