From 6316c5ef6bd62476cbe854a4654976bfaf9ab074 Mon Sep 17 00:00:00 2001 From: Ewoud Date: Tue, 28 Mar 2023 16:02:29 +0200 Subject: [PATCH] Optimize liveview2D --- wled00/data/index.js | 22 +- wled00/data/peek.js | 23 +- wled00/html_other.h | 74 +- wled00/html_ui.h | 4388 +++++++++++++++++++++--------------------- wled00/wled.h | 2 +- 5 files changed, 2248 insertions(+), 2261 deletions(-) diff --git a/wled00/data/index.js b/wled00/data/index.js index 7661e222..caab2916 100644 --- a/wled00/data/index.js +++ b/wled00/data/index.js @@ -1937,40 +1937,30 @@ function toggleSync() function toggleLiveview() { if (isM) { + //WLEDMM adding liveview2D support on main ui isLv = !isLv; gId("colorGFX").style.display = isLv? "inline":"none"; gId("effectGFX").style.display = isLv? "inline":"none"; gId("segGFX").style.display = isLv? "inline":"none"; canvasPeek = gId("canvasPeek"); - peek(canvasPeek, !isLv); //set off if !isLv - - gId('buttonSr').className = (isLv) ? "active":""; - + if (isLv) peek(canvasPeek); //W } else { - //WLEDMM adding liveview2D support + //WLEDMM remove liveview2D support here if (isInfo && isM) toggleInfo(); if (isNodes && isM) toggleNodes(); isLv = !isLv; var lvID = "liveview"; - // if (isM) { - // lvID = "liveview2D" - // if (isLv) { - // var cn = ''; - // d.getElementById('kliveview2D').innerHTML = cn; - // } - - // gId('mliveview2D').style.transform = (isLv) ? "translateY(0px)":"translateY(100%)"; - // } 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":""; - if (!isLv && ws && ws.readyState === WebSocket.OPEN) ws.send('{"lv":false}'); size(); } + + gId('buttonSr').className = (isLv) ? "active":""; + if (ws && ws.readyState === WebSocket.OPEN) ws.send(`{"lv":${isLv}}`); } function toggleInfo() diff --git a/wled00/data/peek.js b/wled00/data/peek.js index 6b418bb7..5192cfec 100644 --- a/wled00/data/peek.js +++ b/wled00/data/peek.js @@ -1,4 +1,4 @@ -function peek(c, setOff=false) { +function peek(c) { // Check for canvas support var ctx = c.getContext('2d'); if (ctx) { // Access the rendering context @@ -16,8 +16,8 @@ function peek(c, setOff=false) { } } ws.binaryType = "arraybuffer"; - - function processWSData(e) { + ws.addEventListener('message',(e)=>{ + // function processWSData(e) { try { if (toString.call(e.data) === '[object ArrayBuffer]') { let leds = new Uint8Array(e.data); @@ -33,21 +33,18 @@ function peek(c, setOff=false) { return 25+225*color/255; } //WLEDMM in range 55 - 205 for (y=0.5;y