Add File System in settings and disable peek if not expandeed

index.htm and index.js and peek.js:
- add expand and peek function for peek expand to removeEventListener if not expanded

- add peekexp and segvexp in settings to save status (wip)

- add File System in settings
This commit is contained in:
Ewoud
2023-03-17 23:53:27 +01:00
parent 5ac9ffa073
commit aa6b1735d3
9 changed files with 2460 additions and 2429 deletions

View File

@@ -306,9 +306,9 @@
<div id="Segments" class="tabcontent">
<!--WLEDMM Views-->
<div id="segviews">
<p class="labels hd">Peek <button class="btn infobtn btn-xs" onclick="expandV(this,gId('canvasPeek'));">v</button></p>
<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>
<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 -->

View File

@@ -25,7 +25,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, css:true, hdays:false} //WLEDMM segexp true as default
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
};
var hol = [
[0,11,24,4,"https://aircoookie.github.io/xmas.png"], // christmas
@@ -1157,6 +1157,13 @@ function updateLen(s, draw=true) //WLEDMM conditonally draw segment view
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)
{
@@ -1301,7 +1308,7 @@ function drawSegmentView() {
} // for each segment
gId("MD").innerHTML = "W*H=LC: " + maxWidth + " x " + maxHeight + " = " + maxWidth * maxHeight;
gId("MD").innerHTML = "W*H=LC: " + maxWidth + " x " + maxHeight + " = " + maxWidth * maxHeight;
function post() {
for (let p=0; p<gId("segcont").children.length; p++) {

View File

@@ -1,4 +1,5 @@
function peek(c) {
function peek(c, setOff=false) {
console.log("peek",c, setOff);
// Check for canvas support
var ctx = c.getContext('2d');
if (ctx) { // Access the rendering context
@@ -16,7 +17,8 @@ function peek(c) {
}
}
ws.binaryType = "arraybuffer";
ws.addEventListener('message',(e)=>{
function myFunction(e) {
try {
if (toString.call(e.data) === '[object ArrayBuffer]') {
let leds = new Uint8Array(e.data);
@@ -46,6 +48,11 @@ function peek(c) {
} catch (err) {
console.error("Peek WS error:",err);
}
});
}
if (!setOff)
ws.addEventListener('message', myFunction);
else
ws.removeEventListener('message', myFunction);
}
}

View File

@@ -42,7 +42,7 @@
urows="";
if (isO(umCfg)) {
for (const [k,o] of Object.entries(umCfg)) {
urows += `<button type="submit" onclick="window.location=\'./settings/um?um=${k}\'">${k} (UM)</button>`;
urows += `<button type="submit" onclick="window.location=\'./settings/um?um=${k}\'">${k} (UM)</button>`;
}
}
gId("configMenu").innerHTML = urows;
@@ -104,5 +104,6 @@
<button type="submit" onclick="window.location='./settings/sync'">Sync Interfaces</button>
<button type="submit" onclick="window.location='./settings/time'">Time & Macros</button>
<button type="submit" onclick="window.location='./settings/sec'">Security & Updates</button>
<button type="submit" onclick="window.location='./edit'">File System ☾</button> <!--WLEDMMalways expa-->
</body>
</html>

View File

@@ -25,6 +25,8 @@
"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"
},
@@ -265,6 +267,8 @@
<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>