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

Merge branch 'mdev' into DMX-Input-esp_dmx

Browse Source
This commit is contained in:
Will Tatam
2023-03-30 15:26:05 +01:00
parent 63c31f1adf fd658fcc32
commit db812439ff
26 changed files with 3495 additions and 3413 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
wled00/data/index.css
View File

@@ -738,10 +738,10 @@ input[type=range]::-moz-range-thumb {
margin: 4px 0 0;
}
#Colors {
/* #Colors {
padding-top: 18px;
}
*/
/* Dynamically hide brightness slider label */
.hd {
display: var(--bhd);
@@ -1517,7 +1517,7 @@ TD .checkmark, TD .radiomark {
}
}
@media all and (max-width: 1249px) {
@media all and (max-width: 1024px) {
#buttonPcm {
display: none;
}

186
wled00/data/index.htm
View File

@@ -66,7 +66,7 @@
<button id="buttonPower" onclick="togglePower()" class="tgl"><i class="icons">&#xe08f;</i><p class="tab-label">Power</p></button>
<button id="buttonNl" onclick="toggleNl()"><i class="icons">&#xe2a2;</i><p class="tab-label">Timer</p></button>
<button id="buttonSync" onclick="toggleSync()"><i class="icons">&#xe116;</i><p class="tab-label">Sync</p></button>
<button id="buttonSr" onclick="toggleLiveview()"><i class="icons">&#xe410;</i><p class="tab-label">Peek</p></button>
<button id="buttonSr" onclick="toggleLiveview()"><i class="icons">&#xe410;</i><p class="tab-label">GFX ☾</p></button>
<button id="buttonI" onclick="toggleInfo()"><i class="icons">&#xe066;</i><p class="tab-label">Info</p></button>
<button id="buttonNodes" onclick="toggleNodes()"><i class="icons">&#xe22d;</i><p class="tab-label">Nodes</p></button>
<button onclick="window.location.href='/settings';"><i class="icons">&#xe0a2;</i><p class="tab-label">Config</p></button>
@@ -89,99 +89,102 @@
<div class ="container">
<div id="Colors" class="tabcontent">
<div id="picker" class="noslide"></div>
<div id="hwrap" class="slider">
<div class="sliderwrap il">
<input id="sliderH" class="noslide" oninput="fromH()" onchange="setColor(0)" max="359" min="0" type="range" value="0" step="any">
<div class="sliderdisplay" style="background: linear-gradient(90deg, #f00 2%, #ff0 19%, #0f0 35%, #0ff 52%, #00f 68%, #f0f 85%, #f00)"></div>
</div>
<span class="tooltiptext">Hue</span>
</div>
<div id="swrap" class="slider">
<div class="sliderwrap il">
<input id="sliderS" class="noslide" oninput="fromS()" onchange="setColor(0)" max="100" min="0" type="range" value="100" step="any">
<div class="sliderdisplay" style="background: linear-gradient(90deg, #aaa 0%, #f00)"></div>
</div>
<span class="tooltiptext">Saturation</span>
</div>
<div id="vwrap" class="slider">
<div class="sliderwrap il">
<input id="sliderV" class="noslide" oninput="fromV()" onchange="setColor(0)" max="100" min="0" type="range" value="100" step="any" />
<div class="sliderdisplay"></div>
</div>
<span class="tooltiptext">Value/Brightness</span>
</div>
<div id="kwrap" class="slider">
<div class="sliderwrap il">
<input id="sliderK" class="noslide" oninput="fromK()" onchange="setColor(0)" max="10091" min="1900" type="range" value="6550" />
<div class="sliderdisplay"></div>
</div>
<span class="tooltiptext">Kelvin/Temperature</span>
</div>
<div id="rgbwrap">
<!--p class="labels hd">RGB color</p-->
<div id="rwrap" class="slider">
<div id="colorGFX"> <!--WLEDMM-->
<br> <!--WLEDMM: instead of padding-top:18 in css-->
<div id="picker" class="noslide"></div>
<div id="hwrap" class="slider">
<div class="sliderwrap il">
<input id="sliderR" class="noslide" oninput="fromRgb()" onchange="setColor(0)" max="255" min="0" type="range" value="128" />
<input id="sliderH" class="noslide" oninput="fromH()" onchange="setColor(0)" max="359" min="0" type="range" value="0" step="any">
<div class="sliderdisplay" style="background: linear-gradient(90deg, #f00 2%, #ff0 19%, #0f0 35%, #0ff 52%, #00f 68%, #f0f 85%, #f00)"></div>
</div>
<span class="tooltiptext">Hue</span>
</div>
<div id="swrap" class="slider">
<div class="sliderwrap il">
<input id="sliderS" class="noslide" oninput="fromS()" onchange="setColor(0)" max="100" min="0" type="range" value="100" step="any">
<div class="sliderdisplay" style="background: linear-gradient(90deg, #aaa 0%, #f00)"></div>
</div>
<span class="tooltiptext">Saturation</span>
</div>
<div id="vwrap" class="slider">
<div class="sliderwrap il">
<input id="sliderV" class="noslide" oninput="fromV()" onchange="setColor(0)" max="100" min="0" type="range" value="100" step="any" />
<div class="sliderdisplay"></div>
</div>
<span class="tooltiptext">Red channel</span>
<span class="tooltiptext">Value/Brightness</span>
</div>
<div id="gwrap" class="slider">
<div id="kwrap" class="slider">
<div class="sliderwrap il">
<input id="sliderG" class="noslide" oninput="fromRgb()" onchange="setColor(0)" max="255" min="0" type="range" value="128" />
<input id="sliderK" class="noslide" oninput="fromK()" onchange="setColor(0)" max="10091" min="1900" type="range" value="6550" />
<div class="sliderdisplay"></div>
</div>
<span class="tooltiptext">Green channel</span>
<span class="tooltiptext">Kelvin/Temperature</span>
</div>
<div id="bwrap" class="slider">
<div class="sliderwrap il">
<input id="sliderB" class="noslide" oninput="fromRgb()" onchange="setColor(0)" max="255" min="0" type="range" value="128" />
<div id="rgbwrap">
<!--p class="labels hd">RGB color</p-->
<div id="rwrap" class="slider">
<div class="sliderwrap il">
<input id="sliderR" class="noslide" oninput="fromRgb()" onchange="setColor(0)" max="255" min="0" type="range" value="128" />
<div class="sliderdisplay"></div>
</div>
<span class="tooltiptext">Red channel</span>
</div>
<div id="gwrap" class="slider">
<div class="sliderwrap il">
<input id="sliderG" class="noslide" oninput="fromRgb()" onchange="setColor(0)" max="255" min="0" type="range" value="128" />
<div class="sliderdisplay"></div>
</div>
<span class="tooltiptext">Green channel</span>
</div>
<div id="bwrap" class="slider">
<div class="sliderwrap il">
<input id="sliderB" class="noslide" oninput="fromRgb()" onchange="setColor(0)" max="255" min="0" type="range" value="128" />
<div class="sliderdisplay"></div>
</div>
<span class="tooltiptext">Blue channel</span>
</div>
</div>
<div id="wwrap" class="slider">
<!--p class="labels hd">White channel</p-->
<div id="whibri" class="sliderwrap il">
<input id="sliderW" class="noslide" oninput="fromW()" onchange="setColor(0)" max="255" min="0" type="range" value="128" />
<div class="sliderdisplay"></div>
</div>
<span class="tooltiptext">Blue channel</span>
<span class="tooltiptext">White channel</span>
</div>
</div>
<div id="wwrap" class="slider">
<!--p class="labels hd">White channel</p-->
<div id="whibri" class="sliderwrap il">
<input id="sliderW" class="noslide" oninput="fromW()" onchange="setColor(0)" max="255" min="0" type="range" value="128" />
<div class="sliderdisplay"></div>
<div id="wbal" class="slider">
<!--p class="labels hd">White balance</p-->
<div class="sliderwrap il">
<input id="sliderA" class="noslide" onchange="setBalance(this.value)" max="255" min="0" type="range" value="128" />
<div class="sliderdisplay"></div>
</div>
<span class="tooltiptext">White balance</span>
</div>
<span class="tooltiptext">White channel</span>
</div>
<div id="wbal" class="slider">
<!--p class="labels hd">White balance</p-->
<div class="sliderwrap il">
<input id="sliderA" class="noslide" onchange="setBalance(this.value)" max="255" min="0" type="range" value="128" />
<div class="sliderdisplay"></div>
<div id="qcs-w">
<div class="qcs" onclick="pC('#ff0000');" title="Red" style="background-color:#ff0000;"></div>
<div class="qcs" onclick="pC('#ffa000');" title="Orange" style="background-color:#ffa000;"></div>
<div class="qcs" onclick="pC('#ffc800');" title="Yellow" style="background-color:#ffc800;"></div>
<div class="qcs" onclick="pC('#ffe0a0');" title="Warm White" style="background-color:#ffe0a0;"></div>
<div class="qcs" onclick="pC('#ffffff');" title="White" style="background-color:#ffffff;"></div>
<div class="qcs qcsb" onclick="pC('#000000');" title="Black" style="background-color:#000000;"></div><br>
<div class="qcs" onclick="pC('#ff00ff');" title="Pink" style="background-color:#ff00ff;"></div>
<div class="qcs" onclick="pC('#0000ff');" title="Blue" style="background-color:#0000ff;"></div>
<div class="qcs" onclick="pC('#00ffc8');" title="Cyan" style="background-color:#00ffc8;"></div>
<div class="qcs" onclick="pC('#08ff00');" title="Green" style="background-color:#08ff00;"></div>
<div class="qcs" onclick="pC('rnd');" title="Random" style="background:linear-gradient(to right, red, orange, yellow, green, blue, purple);transform: translateY(-11px);">R</div>
</div>
<span class="tooltiptext">White balance</span>
</div>
<div id="qcs-w">
<div class="qcs" onclick="pC('#ff0000');" title="Red" style="background-color:#ff0000;"></div>
<div class="qcs" onclick="pC('#ffa000');" title="Orange" style="background-color:#ffa000;"></div>
<div class="qcs" onclick="pC('#ffc800');" title="Yellow" style="background-color:#ffc800;"></div>
<div class="qcs" onclick="pC('#ffe0a0');" title="Warm White" style="background-color:#ffe0a0;"></div>
<div class="qcs" onclick="pC('#ffffff');" title="White" style="background-color:#ffffff;"></div>
<div class="qcs qcsb" onclick="pC('#000000');" title="Black" style="background-color:#000000;"></div><br>
<div class="qcs" onclick="pC('#ff00ff');" title="Pink" style="background-color:#ff00ff;"></div>
<div class="qcs" onclick="pC('#0000ff');" title="Blue" style="background-color:#0000ff;"></div>
<div class="qcs" onclick="pC('#00ffc8');" title="Cyan" style="background-color:#00ffc8;"></div>
<div class="qcs" onclick="pC('#08ff00');" title="Green" style="background-color:#08ff00;"></div>
<div class="qcs" onclick="pC('rnd');" title="Random" style="background:linear-gradient(to right, red, orange, yellow, green, blue, purple);transform: translateY(-11px);">R</div>
</div>
<div id="csl">
<button id="csl0" class="btn xxs cl" onclick="selectSlot(0);" data-r="0" data-g="0" data-b="0" data-w="0">1</button>
<button id="csl1" class="btn xxs cl" onclick="selectSlot(1);" data-r="0" data-g="0" data-b="0" data-w="0">2</button>
<button id="csl2" class="btn xxs cl" onclick="selectSlot(2);" data-r="0" data-g="0" data-b="0" data-w="0">3</button>
</div>
<p class="labels h" id="cslLabel"></p>
<div id="hexw">
<i class="icons sel-icon" onclick="tglRgb()">&#xe22d;</i>
<input id="hexc" type="text" class="noslide" onkeydown="hexEnter()" autocomplete="off" maxlength="8" />
<button id="hexcnf" class="btn btn-xs" onclick="fromHex();"><i class="icons btn-icon">&#xe390;</i></button>
</div>
<div id="csl">
<button id="csl0" class="btn xxs cl" onclick="selectSlot(0);" data-r="0" data-g="0" data-b="0" data-w="0">1</button>
<button id="csl1" class="btn xxs cl" onclick="selectSlot(1);" data-r="0" data-g="0" data-b="0" data-w="0">2</button>
<button id="csl2" class="btn xxs cl" onclick="selectSlot(2);" data-r="0" data-g="0" data-b="0" data-w="0">3</button>
</div>
<p class="labels h" id="cslLabel"></p>
<div id="hexw">
<i class="icons sel-icon" onclick="tglRgb()">&#xe22d;</i>
<input id="hexc" type="text" class="noslide" onkeydown="hexEnter()" autocomplete="off" maxlength="8" />
<button id="hexcnf" class="btn btn-xs" onclick="fromHex();"><i class="icons btn-icon">&#xe390;</i></button>
</div>
</div> <!--colorGFX-->
<p class="labels" id="pall"><i class="icons sel-icon" onclick="tglHex()">&#xe2b3;</i> Color palette</p>
<div id="palw" class="il">
<div class="staytop fnd">
@@ -204,6 +207,12 @@
</div>
<div id="Effects" class="tabcontent">
<div id="effectGFX"> <!--WLEDMM-->
<!-- <p class="labels hd">Peek ☾ <button class="btn infobtn btn-xs" onclick="eandp(this,gId('canvasPeek'));">v</button></p> -->
<br>
<canvas id="canvasPeek"></canvas><br>
<br>
</div>
<div id="fx">
<p class="labels hd" id="modeLabel">Effect mode</p>
<div class="staytop fnd" id="fxFind">
@@ -309,19 +318,16 @@
</div>
<div id="Segments" class="tabcontent">
<!--WLEDMM Views-->
<div id="segviews">
<p class="labels hd">Peek ☾ <button class="btn infobtn btn-xs" onclick="eandp(this,gId('canvasPeek'));">v</button></p>
<canvas id="canvasPeek"></canvas><br>
<p class="labels hd">Segment view ☾ <button class="btn infobtn btn-xs" onclick="expandV(this,gId('segvis'));">v</button></p>
<div id="segvis">
<canvas id="canvasSegments"></canvas><br>
<div class="labels hd" id="MD"></div> <!-- Matrix dimensions -->
</div>
<div id="segGFX"> <!--WLEDMM-->
<br>
<canvas id="canvasSegments"></canvas><br>
<br>
</div>
<p class="labels" id="modeLabel">Segments</p>
<div id="segcont">
Loading...
</div>
<div class="labels hd" id="MD"></div> <!-- WLEDMM Matrix dimensions -->
<div id="segutil" class="staybot">
</div>
<div id="segutil2">

117
wled00/data/index.js
View File

@@ -26,7 +26,7 @@ var ws, cpick, ranges;
var cfg = {
theme:{base:"dark", bg:{url:""}, alpha:{bg:0.6,tab:0.8}, color:{bg:""}},
comp :{colors:{picker: true, rgb: false, quick: true, hex: false},
labels:true, pcmbot:false, pid:true, seglen:false, segpwr:false, segexp:true, peekexp:true, segvexp: true, css:true, hdays:false} //WLEDMM segexp true as default, add peekexp and segvexp
labels:true, pcmbot:false, pid:true, seglen:false, segpwr:false, segexp:true, css:true, hdays:false} //WLEDMM segexp true as default
};
var hol = [
[0,11,24,4,"https://aircoookie.github.io/xmas.png"], // christmas
@@ -557,7 +557,6 @@ function populatePresets(fromls)
delete pJson["0"];
var cn = "";
var arr = Object.entries(pJson);
console.log(arr);
arr.sort(cmpP);
pQL = [];
var is = [];
@@ -612,7 +611,9 @@ function parseInfo(i) {
mw = i.leds.matrix ? i.leds.matrix.w : 0;
mh = i.leds.matrix ? i.leds.matrix.h : 0;
isM = mw>0 && mh>0;
if (!isM) {
if (isM) {
gId('buttonSr').className = "active"; isLv = true; //WLEDMM: on after load
} else {
gId("filter1D").classList.add('hide');
//gId("filter2D").classList.add('hide');
hideModes("2D");
@@ -667,12 +668,16 @@ function populateInfo(i)
if (i.cn) vcn = i.cn;
//WLEDMM: add total heap and total PSRAM, and build number, add bin name
if (i.ver.includes("0.14.1.")) vcn = "Sitting Ducks"; // easter egg
if (i.ver.includes("0.14.0.")) vcn = "Lupo"; // check for MM versioning scheme
if (i.ver.includes("0.14.1")) vcn = "Sitting Ducks"; // easter egg
if (i.ver.includes("0.14.0")) vcn = "Lupo"; // check for MM versioning scheme
if (i.ver.includes("0.14.0-b2.2")) vcn = "Sitting Ducks"; // early easter egg
if (i.ver.includes("0.14.0-b2.20")) vcn = "Lupo";
cn += `v${i.ver} &nbsp;<i>"${vcn}"</i><p>(WLEDMM_${i.ver} ${i.rel}.bin)</p><p><em>build ${i.vid}</em></p><table>
${urows}
${urows===""?'':'<tr><td colspan=2><hr style="height:1px;border-width:0;color:SeaGreen;background-color:Seagreen"></td></tr>'}
${i.opt&0x100?inforow("Net Serial ☾","<button class=\"btn btn-xs\" onclick=\"requestJson({'netDebug':"+(i.opt&0x0080?"false":"true")+"});\"><i class=\"icons "+(i.opt&0x0080?"on":"off")+"\">&#xe08f;</i></button>"):''}
${i.opt&0x100?inforow("Net Print ☾","<button class=\"btn btn-xs\" onclick=\"requestJson({'netDebug':"+(i.opt&0x0080?"false":"true")+"});\"><i class=\"icons "+(i.opt&0x0080?"on":"off")+"\">&#xe08f;</i></button>"):''}
${i.serialOnline?inforow(i.serialOnline,"TX="+i.sTX,"; RX="+i.sRX):""}
${i.opt&0x100?'<tr><td colspan=2><hr style="height:1px;border-width:0;color:GoldenRod;background-color:GoldenRod"></td></tr>':''}
${inforow("Build",i.vid)}
${inforow("Estimated current",pwru)}
${inforow("Average FPS",i.leds.fps)}
@@ -1161,21 +1166,8 @@ function updateLen(s, draw=true) //WLEDMM conditonally draw segment view
gId(`seg${s}len`).innerHTML = out;
if (draw && isM) drawSegmentView(); //WLEDMM draw new segmentview if something changes in a segment
gId("segviews").style.display = isM? "inline":"none";
}
//WLEDMM
function eandp(o,i)
{
expandV(o,i);
peek(i, i.style.display =="none");
}
//WLEDMM
function expandV(o,i)
{
i.style.display = i.style.display!=="none" ? "none" : "";
o.style.rotate = i.style.display==="none" ? "-90deg" : "none";
gId("effectGFX").style.display = isM? "inline":"none";
gId("segGFX").style.display = isM? "inline":"none";
}
//WLEDMM
@@ -1214,9 +1206,10 @@ function drawSegmentView() {
peek(canvasPeek);
}
let segments = gId("Segments");
let windowWidth = Math.min(window.innerWidth*0.98, maxWidth*30);
let windowWidthFactor = maxWidth > maxHeight?1:maxWidth/maxHeight;
ctx.canvas.width = (ctx.canvas.parentElement.offsetWidth > 800?windowWidth:300) * windowWidthFactor; //Mobile and non pc mode gets 300, pc 800
ctx.canvas.width = (segments.offsetWidth > 800?windowWidth:300) * windowWidthFactor; //Mobile and non pc mode gets 300, pc 800
ctx.canvas.height = ctx.canvas.width / maxWidth * maxHeight;
canvasPeek.width = ctx.canvas.width;
canvasPeek.height = ctx.canvas.height;
@@ -1225,10 +1218,6 @@ function drawSegmentView() {
var ppL = ctx.canvas.width / maxWidth; //pixels per led
// console.log("dim", ctx.canvas.width , maxWidth, ctx.canvas.height , maxHeight, ppL);
ctx.lineWidth = 1;
ctx.strokeStyle="yellow";
ctx.strokeRect(0, 0, ctx.canvas.width, ctx.canvas.height);
var colorArray = [[255,0,0], [0,255,0], [0,0,255], [255,0,255], [255,165,0], [255,255,0]];
// ["red", "green", "blue", "magenta", "orange", "yellow"];
@@ -1237,9 +1226,11 @@ function drawSegmentView() {
if (!initSegmentVars(p)) break;
ctx.lineWidth = 3;
ctx.strokeStyle="white";
ctx.strokeRect(topLeftX, topLeftY, pw*ppL, ph*ppL);
if (gId("segcont").children.length > 1) { //Estetic: Don't draw surrounding box if only one segment
ctx.lineWidth = 3;
ctx.strokeStyle="white";
ctx.strokeRect(topLeftX, topLeftY, pw*ppL, ph*ppL);
}
var fx = parseInt(gId("seg"+p+"fx").value);
@@ -1315,23 +1306,26 @@ function drawSegmentView() {
} // for each segment
gId("MD").innerHTML = "W*H=LC: " + maxWidth + " x " + maxHeight + " = " + maxWidth * maxHeight;
if (gId("segcont").children.length > 1) { //Only show this if more then one segment
gId("MD").innerHTML = "total W*H=LC: " + maxWidth + " x " + maxHeight + " = " + maxWidth * maxHeight;
}
gId("MD").style.display = gId("segcont").children.length > 1?"inline":"none"
function post() {
for (let p=0; p<gId("segcont").children.length; p++) {
if (!initSegmentVars(p)) break;
if (gId("segcont").children.length>1) { //only show number if more than one segment
if (gId("segcont").children.length>1) { //only show number and name if more than one segment
ctx.font = '40px Arial';
ctx.fillStyle = "orange";
ctx.fillText(p, topLeftX + pw/2*ppL - 10, topLeftY + ph/2*ppL + 10);
//show name of fx
ctx.font = '20px Arial';
ctx.fillStyle = "white";
var name = eJson.find((o)=>{return o.id==fx}).name;
ctx.fillText(name, topLeftX+10, topLeftY + ph*ppL - 10);
}
//show name of fx
ctx.font = '20px Arial';
ctx.fillStyle = "white";
var name = eJson.find((o)=>{return o.id==fx}).name;
ctx.fillText(name, topLeftX + ppL, topLeftY + ph*ppL - 10);
}
}
@@ -1942,34 +1936,37 @@ function toggleSync()
function toggleLiveview()
{
//WLEDMM adding liveview2D support
if (isInfo && isM) toggleInfo();
if (isNodes && isM) toggleNodes();
isLv = !isLv;
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";
var lvID = "liveview";
if (isM) {
lvID = "liveview2D"
if (isLv) {
var cn = '<iframe id="liveview2D" src="about:blank"></iframe>';
d.getElementById('kliveview2D').innerHTML = cn;
}
canvasPeek = gId("canvasPeek");
if (isLv) peek(canvasPeek); //W
} else {
//WLEDMM remove liveview2D support here
if (isInfo && isM) toggleInfo();
if (isNodes && isM) toggleNodes();
isLv = !isLv;
gId('mliveview2D').style.transform = (isLv) ? "translateY(0px)":"translateY(100%)";
var lvID = "liveview";
gId(lvID).style.display = (isLv) ? "block":"none";
var url = (loc?`http://${locip}`:'') + "/" + lvID;
gId(lvID).src = (isLv) ? url:"about:blank";
size();
}
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();
if (ws && ws.readyState === WebSocket.OPEN) ws.send(`{"lv":${isLv}}`);
}
function toggleInfo()
{
if (isNodes) toggleNodes();
if (isLv && isM) toggleLiveview();
// if (isLv && isM) toggleLiveview(); //WLEDMM: not for GFX
isInfo = !isInfo;
if (isInfo) requestJson();
gId('info').style.transform = (isInfo) ? "translateY(0px)":"translateY(100%)";
@@ -1979,7 +1976,7 @@ function toggleInfo()
function toggleNodes()
{
if (isInfo) toggleInfo();
if (isLv && isM) toggleLiveview();
// if (isLv && isM) toggleLiveview(); //WLEDMM: not for GFX
isNodes = !isNodes;
if (isNodes) loadNodes();
gId('nodes').style.transform = (isNodes) ? "translateY(0px)":"translateY(100%)";
@@ -3228,7 +3225,7 @@ function size()
var h = gId('top').clientHeight;
sCol('--th', h + "px");
sCol('--bh', gId('bot').clientHeight + "px");
if (isLv) h -= 4;
if (isLv && !isM) h -= 4; //WLEDMM: no for matrices
sCol('--tp', h + "px");
togglePcMode();
}
@@ -3240,10 +3237,10 @@ function togglePcMode(fromB = false)
localStorage.setItem('pcm', pcModeA);
pcMode = pcModeA;
}
if (wW < 1250 && !pcMode) return;
if (!fromB && ((wW < 1250 && lastw < 1250) || (wW >= 1250 && lastw >= 1250))) return;
if (wW <= 1024 && !pcMode) return;
if (!fromB && ((wW <= 1024 && lastw <= 1024) || (wW > 1024 && lastw > 1024))) return;
openTab(0, true);
if (wW < 1250) {pcMode = false;}
if (wW <= 1024) {pcMode = false;}
else if (pcModeA && !fromB) pcMode = pcModeA;
updateTablinks(0);
gId('buttonPcm').className = (pcMode) ? "active":"";

31
wled00/data/peek.js
View File

@@ -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,42 +16,35 @@ 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);
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 pPL = Math.min(c.width / mW, c.height / mH); // pixels per LED (width of circle)
let lOf = Math.floor((c.width - pPL*mW)/2); //left offeset (to center matrix)
var i = 6;
var i = 4; //same offset as in ws.cpp
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();
if (leds[i]!= 0 || leds[i+1]!= 0 || leds[i+2]!= 0) { //WLEDMM: do not show blacks
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);
}
}
if (!setOff)
ws.addEventListener('message', processWSData);
else
ws.removeEventListener('message', processWSData);
});
}
}

3
wled00/data/settings_leds.htm
View File

@@ -654,7 +654,8 @@ Length: <input type="number" name="XC${i}" id="xc${i}" class="l" min="1" max="65
<h3>Transitions</h3>
Crossfade: <input type="checkbox" name="TF"><br>
Transition Time: <input name="TD" type="number" class="xl" min="0" max="65500"> ms<br>
Enable Palette transitions: <input type="checkbox" name="PF">
Enable Palette transitions: <input type="checkbox" name="PF"><br>
<i>Random Cycle</i> Palette Time: <input name="TP" type="number" class="m" min="1" max="255"> s<br>
<h3>Timed light</h3>
Default Duration: <input name="TL" type="number" class="m" min="1" max="255" required> min<br>
Default Target brightness: <input name="TB" type="number" class="m" min="0" max="255" required><br>

4
wled00/data/settings_sync.htm
View File

@@ -257,9 +257,9 @@ Hue status: <span class="sip"> Disabled in this build </span>
<option value=15000>1500000</option>
</select><br>
<i>Keep at 115200 to use Improv. Some boards may not support high rates.</i>
<h3>Net Serial ☾</h3>
<h3>Net Print ☾</h3>
<div id="NoNetDebug" class="hide">
<em style="color:#fa0;">This firmware build does not include Net Serial support.<br></em> <!--WLEDMM we call it Net Serial-->
<em style="color:#fa0;">This firmware build does not include Net Print support.<br></em> <!--WLEDMM we call it Net Print-->
</div>
<div id="NetDebug"> <!--WLEDMM-->
Netcat host IP:<br>

4
wled00/data/settings_ui.htm
View File

@@ -25,8 +25,6 @@
"seglen": "Set segment length instead of stop LED",
"segpwr": "Hide segment power &amp; brightness",
"segexp" : "Always expand first segment",
"peekexp" : "Expand peek ☾",
"segvexp" : "Expand segment visualization ☾",
"css": "Enable custom CSS",
"hdays": "Enable custom Holidays list"
},
@@ -267,8 +265,6 @@
<span class="l"></span>: <input type="checkbox" id="comp_seglen" class="agi cb"><br>
<span class="l"></span>: <input type="checkbox" id="comp_segpwr" class="agi cb"><br>
<span class="l"></span>: <input type="checkbox" id="comp_segexp" class="agi cb"><br>
<span class="l"></span>: <input type="checkbox" id="comp_peekexp" class="agi cb"><br>
<span class="l"></span>: <input type="checkbox" id="comp_segvexp" class="agi cb"><br>
I hate dark mode: <input type="checkbox" id="dm" onchange="UI()"><br>
<span id="idonthateyou" style="display:none"><i>Why would you? </i>&#x1F97A;<br></span>
<span class="l"></span>: <input type="number" min=0.0 max=1.0 step=0.01 id="theme_alpha_tab" class="agi"><br>

2
wled00/data/settings_um.htm
View File

@@ -120,7 +120,7 @@
// WLEDMM make a dropdown for pin variables
if (f.includes("pin")) {
var n = this.name.replace("[]","").substr(-3);
urows += `<select name="${k}:${f}${a?"[]":""}">`;
urows += `<select name="${k}:${f}${a?"[]":""}" style="width:200px;max-width:90%;">`; //WLEDMM width capped. to be moved to css one day
for (var j=-1; j<=50; j++) { // all possible pins WLEDMM: hardcoded to 50 as d.max_gpio is not calculated yet here (done in appendGPIOinfo)
let foundPin = -1;
for (var i=0; i<pins.length; i++) { // check if pin is reserved