Jan/WLED_MM_Infinity
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Peek in segment tab

Browse Source 
Move peek 2D functionality to peek.js

FX_fcn.cpp: always erase customMappingTable if non existent ledmap

wled_server.cpp: add peek.js

index.js:
- add canvasPeek
- change resize of canvas
This commit is contained in:
Ewoud
2023-02-15 12:41:15 +01:00
parent 515c872770
commit 6e187dd5aa
12 changed files with 2447 additions and 2377 deletions
Download Patch File Download Diff File Expand all files Collapse all files

56
wled00/data/liveviewws2D.htm
View File

@@ -5,6 +5,7 @@
<meta charset="utf-8">
<meta name="theme-color" content="#222222">
<title>WLED Live Preview</title>
<script src="peek.js"></script> <!--WLEDMM-->
<style>
body {
margin: 0;
@@ -12,65 +13,16 @@
</style>
</head>
<body>
<canvas id="canv"></canvas>
<canvas id="canvasPeek"></canvas>
<script>
var c = document.getElementById('canv');
var leds = "";
var c = document.getElementById('canvasPeek');
var throttled = false;
function setCanvas() {
c.width = window.innerWidth * 0.98; //remove scroll bars
c.height = window.innerHeight * 0.98; //remove scroll bars
}
setCanvas();
// Check for canvas support
var ctx = c.getContext('2d');
if (ctx) { // Access the rendering context
// use parent WS or open new
var ws;
try {
ws = top.window.ws;
} catch (e) {}
if (ws && ws.readyState === WebSocket.OPEN) {
ws.send("{'lv':true}");
} else {
ws = new WebSocket((window.location.protocol == "https:"?"wss":"ws")+"://"+document.location.host+"/ws");
ws.onopen = ()=>{
ws.send("{'lv':true}");
}
}
ws.binaryType = "arraybuffer";
ws.addEventListener('message',(e)=>{
try {
if (toString.call(e.data) === '[object ArrayBuffer]') {
let leds = new Uint8Array(event.data);
if (leds[0] != 76 || leds[1] != 2 || !ctx) return; //'L', set in ws.cpp
let mW = leds[2]; // matrix width
let mH = leds[3]; // matrix height
let pPL = Math.min(c.width / mW, (c.height-10) / mH); // pixels per LED (width of circle) WLEDMM -10 for prompts
let lOf = Math.floor((c.width - pPL*mW)/2); //left offeset (to center matrix)
var i = 6;
ctx.clearRect(0, 0, c.width, c.height); //WLEDMM
function colorAmp(color) {
if (color == 0) return 0;
return 25+225*color/255;
} //WLEDMM in range 55 - 205
for (y=0.5;y<mH;y++) for (x=0.5; x<mW; x++) {
ctx.fillStyle = `rgb(${colorAmp(leds[i])},${colorAmp(leds[i+1])},${colorAmp(leds[i+2])})`;
ctx.beginPath();
ctx.arc(x*pPL+lOf, y*pPL, pPL*0.4, 0, 2 * Math.PI);
ctx.fill();
i+=3;
}
//WLEDMM show preset and playlist id
ctx.fillStyle = `rgb(255,255,255)`;
if (leds[4] != 0) ctx.fillText("preset " + leds[4].toString(), lOf, mH*pPL+10);
if (leds[5] != 255) ctx.fillText("playlist " + leds[5].toString(), lOf + 70, mH*pPL+10);
}
} catch (err) {
console.error("Peek WS error:",err);
}
});
}
peek(c);
// window.resize event listener
window.addEventListener('resize', (e)=>{
if (!throttled) { // only run if we're not throttled