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

Option to use segment length instead of stop.

Browse Source
This commit is contained in:
Blaz Kristan 2021-04-01 17:12:45 +02:00
parent 40780ccec7
commit a7c99cbbd2
5 changed files with 746 additions and 740 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

26
wled00/data/index.js
View File

@ -24,7 +24,7 @@ var pmt = 1, pmtLS = 0, pmtLast = 0;
var lastinfo = {}; var lastinfo = {};
var cfg = { var cfg = {
theme:{base:"dark", bg:{url:""}, alpha:{bg:0.6,tab:0.8}, color:{bg:""}}, 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} comp :{colors:{picker: true, rgb: false, quick: true, hex: false}, labels:true, pcmbot:false, pid:true, seglen:false}
}; };
var myWS, noWS = false; var myWS, noWS = false;
@ -520,7 +520,7 @@ function loadInfo(callback=null)
syncTglRecv = json.str; syncTglRecv = json.str;
maxSeg = json.leds.maxseg; maxSeg = json.leds.maxseg;
pmt = json.fs.pmt; pmt = json.fs.pmt;
// d.getElementById('buttonNodes').style.display = (json.ndc > 0 && window.innerWidth > 770) ? "block":"none"; d.getElementById('buttonNodes').style.display = (json.ndc > 0 && window.innerWidth > 770) ? "block":"none";
populateInfo(json); populateInfo(json);
if (callback) callback(); if (callback) callback();
}) })
@ -597,11 +597,11 @@ function populateSegments(s)
<table class="segt"> <table class="segt">
<tr> <tr>
<td class="segtd">Start LED</td> <td class="segtd">Start LED</td>
<td class="segtd">Stop LED</td> <td class="segtd">${cfg.comp.seglen?"LED count":"Stop LED"}</td>
</tr> </tr>
<tr> <tr>
<td class="segtd"><input class="noslide segn" id="seg${i}s" type="number" min="0" max="${ledCount-1}" value="${inst.start}" oninput="updateLen(${i})"></td> <td class="segtd"><input class="noslide segn" id="seg${i}s" type="number" min="0" max="${ledCount-1}" value="${inst.start}" oninput="updateLen(${i})"></td>
<td class="segtd"><input class="noslide segn" id="seg${i}e" type="number" min="0" max="${ledCount}" value="${inst.stop}" oninput="updateLen(${i})"></td> <td class="segtd"><input class="noslide segn" id="seg${i}e" type="number" min="0" max="${ledCount-(cfg.comp.seglen?inst.start:0)}" value="${inst.stop-(cfg.comp.seglen?inst.start:0)}" oninput="updateLen(${i})"></td>
</tr> </tr>
</table> </table>
<table class="segt"> <table class="segt">
@ -886,8 +886,8 @@ function updateLen(s)
{ {
if (!d.getElementById(`seg${s}s`)) return; if (!d.getElementById(`seg${s}s`)) return;
var start = parseInt(d.getElementById(`seg${s}s`).value); var start = parseInt(d.getElementById(`seg${s}s`).value);
var stop = parseInt(d.getElementById(`seg${s}e`).value); var stop = parseInt(d.getElementById(`seg${s}e`).value);
var len = stop - start; var len = stop - (cfg.comp.seglen?0:start);
var out = "(delete)"; var out = "(delete)";
if (len > 1) { if (len > 1) {
out = `${len} LEDs`; out = `${len} LEDs`;
@ -1234,7 +1234,7 @@ function makeSeg()
{ {
var ns = 0; var ns = 0;
if (lowestUnused > 0) { if (lowestUnused > 0) {
var pend = d.getElementById(`seg${lowestUnused -1}e`).value; var pend = parseInt(d.getElementById(`seg${lowestUnused -1}e`).value,10) + (cfg.comp.seglen?parseInt(d.getElementById(`seg${lowestUnused -1}s`).value,10):0);
if (pend < ledCount) ns = pend; if (pend < ledCount) ns = pend;
} }
var cn = `<div class="seg"> var cn = `<div class="seg">
@ -1245,16 +1245,16 @@ function makeSeg()
<table class="segt"> <table class="segt">
<tr> <tr>
<td class="segtd">Start LED</td> <td class="segtd">Start LED</td>
<td class="segtd">Stop LED</td> <td class="segtd">${cfg.comp.seglen?"LED count":"Stop LED"}</td>
</tr> </tr>
<tr> <tr>
<td class="segtd"><input class="noslide segn" id="seg${lowestUnused}s" type="number" min="0" max="${ledCount-1}" value="${ns}" oninput="updateLen(${lowestUnused})"></td> <td class="segtd"><input class="noslide segn" id="seg${lowestUnused}s" type="number" min="0" max="${ledCount-1}" value="${ns}" oninput="updateLen(${lowestUnused})"></td>
<td class="segtd"><input class="noslide segn" id="seg${lowestUnused}e" type="number" min="0" max="${ledCount}" value="${ledCount}" oninput="updateLen(${lowestUnused})"></td> <td class="segtd"><input class="noslide segn" id="seg${lowestUnused}e" type="number" min="0" max="${ledCount-(cfg.comp.seglen?ns:0)}" value="${ledCount-(cfg.comp.seglen?ns:0)}" oninput="updateLen(${lowestUnused})"></td>
</tr> </tr>
</table> </table>
<div class="h" id="seg${lowestUnused}len">${ledCount - ns} LEDs</div> <div class="h" id="seg${lowestUnused}len">${ledCount - ns} LEDs</div>
<i class="icons e-icon cnf cnf-s half" id="segc${lowestUnused}" onclick="setSeg(${lowestUnused}); resetUtil();">&#xe390;</i> <i class="icons e-icon cnf cnf-s half" id="segc${lowestUnused}" onclick="setSeg(${lowestUnused}); resetUtil();">&#xe390;</i>
<div class="c"><button class="btn btn-p" onclick="resetUtil()">Cancel</button></div> <div class="c"><button class="btn" onclick="resetUtil()">Cancel</button></div>
</div> </div>
</div>`; </div>`;
d.getElementById('segutil').innerHTML = cn; d.getElementById('segutil').innerHTML = cn;
@ -1342,9 +1342,9 @@ function selSeg(s)
function setSeg(s) function setSeg(s)
{ {
var start = parseInt(d.getElementById(`seg${s}s`).value); var start = parseInt(d.getElementById(`seg${s}s`).value);
var stop = parseInt(d.getElementById(`seg${s}e`).value); var stop = parseInt(d.getElementById(`seg${s}e`).value);
if (stop <= start) {delSeg(s); return;} if (stop == 0) {delSeg(s); return;}
var obj = {"seg": {"id": s, "start": start, "stop": stop}}; var obj = {"seg": {"id": s, "start": start, "stop": (cfg.comp.seglen?start:0)+stop}};
if (d.getElementById(`seg${s}grp`)) if (d.getElementById(`seg${s}grp`))
{ {
var grp = parseInt(d.getElementById(`seg${s}grp`).value); var grp = parseInt(d.getElementById(`seg${s}grp`).value);

32
wled00/data/settings_ui.htm
View File

@ -1,7 +1,7 @@
<!DOCTYPE html> <!DOCTYPE html>
<html> <html>
<head lang="en"> <head lang="en">
<meta charset="utf-8"> <meta charset="utf-8">
<meta name="viewport" content="width=500"> <meta name="viewport" content="width=500">
<title>UI Settings</title> <title>UI Settings</title>
<script> <script>
@ -10,16 +10,17 @@
var sett = null; var sett = null;
var l = { var l = {
"comp":{ "comp":{
"labels":"Show button labels", "labels":"Show button labels",
"colors":{ "colors":{
"LABEL":"Color selection methods", "LABEL":"Color selection methods",
"picker": "Color Wheel", "picker": "Color Wheel",
"rgb": "RGB sliders", "rgb": "RGB sliders",
"quick": "Quick color selectors", "quick": "Quick color selectors",
"hex": "HEX color input" "hex": "HEX color input"
}, },
"pcmbot": "Show bottom tab bar in PC mode", "pcmbot": "Show bottom tab bar in PC mode",
"pid": "Show preset IDs" "pid": "Show preset IDs",
"seglen": "Use LED Count instead of Stop LED on segments"
}, },
"theme":{ "theme":{
"alpha": { "alpha": {
@ -34,7 +35,6 @@
"bg":"BG HEX color" "bg":"BG HEX color"
} }
} }
}; };
function gId(s) function gId(s)
{ {
@ -52,7 +52,6 @@
if( !tar[elem] ) tar[elem] = {} if( !tar[elem] ) tar[elem] = {}
tar = tar[elem]; tar = tar[elem];
} }
tar[pList[len-1]] = val; tar[pList[len-1]] = val;
} }
@ -200,7 +199,7 @@
</div> </div>
<h2>Web Setup</h2> <h2>Web Setup</h2>
Server description: <input name="DS" maxlength="32"><br> Server description: <input name="DS" maxlength="32"><br>
Sync button toggles both send and receive: <input type="checkbox" name="ST"><br> Sync button toggles both send and receive: <input type="checkbox" name="ST"><br>
<i>The following UI customization settings are unique both to the WLED device and this browser.<br> <i>The following UI customization settings are unique both to the WLED device and this browser.<br>
You will need to set them again if using a different browser, device or WLED IP address.<br> You will need to set them again if using a different browser, device or WLED IP address.<br>
Refresh the main UI to apply changes.</i><br> Refresh the main UI to apply changes.</i><br>
@ -209,8 +208,9 @@
<h3>UI Appearance</h3> <h3>UI Appearance</h3>
<span class="l"></span>: <input type="checkbox" id="comp_labels" class="agi cb"><br> <span class="l"></span>: <input type="checkbox" id="comp_labels" class="agi cb"><br>
<span class="l"></span>: <input type="checkbox" id="comp_pcmbot" class="agi cb"><br> <span class="l"></span>: <input type="checkbox" id="comp_pcmbot" class="agi cb"><br>
<span class="l"></span>: <input type="checkbox" id="comp_pid" class="agi cb"><br> <span class="l"></span>: <input type="checkbox" id="comp_pid" class="agi cb"><br>
<span class="l"></span>: <input type="checkbox" id="comp_seglen" class="agi cb"><br>
I hate dark mode: <input type="checkbox" id="dm" onchange="UI()"><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 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> <span class="l"></span>: <input type="number" min=0.0 max=1.0 step=0.01 id="theme_alpha_tab" class="agi"><br>

5
wled00/html_settings.h
View File

@ -180,7 +180,7 @@ const char PAGE_settings_dmx[] PROGMEM = R"=====()=====";
// Autogenerated from wled00/data/settings_ui.htm, do not edit!! // Autogenerated from wled00/data/settings_ui.htm, do not edit!!
const char PAGE_settings_ui[] PROGMEM = R"=====(<!DOCTYPE html><html><head lang="en"><meta charset="utf-8"><meta const char PAGE_settings_ui[] PROGMEM = R"=====(<!DOCTYPE html><html><head lang="en"><meta charset="utf-8"><meta
name="viewport" content="width=500"><title>UI Settings</title><script> name="viewport" content="width=500"><title>UI Settings</title><script>
var initial_ds,initial_st,d=document,sett=null,l={comp:{labels:"Show button labels",colors:{LABEL:"Color selection methods",picker:"Color Wheel",rgb:"RGB sliders",quick:"Quick color selectors",hex:"HEX color input"},pcmbot:"Show bottom tab bar in PC mode",pid:"Show preset IDs"},theme:{alpha:{bg:"Background opacity",tab:"Button opacity"},bg:{url:"BG image URL",random:"Random BG image"},color:{bg:"BG HEX color"}}};function gId(e){return d.getElementById(e)}function isObject(e){return e&&"object"==typeof e&&!Array.isArray(e)}function set(e,t,i){for(var n=t,l=e.split("_"),o=l.length,s=0;s<o-1;s++){var d=l[s];n[d]||(n[d]={}),n=n[d]}n[l[o-1]]=i}function addRec(e,t="",n=null){var l="";for(i in e){var o=t+(t?"_":"")+i;if(isObject(e[i]))n&&n[i]&&n[i].LABEL&&(l+=`<h3>${n[i].LABEL}</h3>`),l+=addRec(e[i],o,n?n[i]:null);else{var s=o;if(n&&n[i]?s=n[i]:e[i+"LABEL"]&&(s=e[i+"LABEL"]),i.indexOf("LABEL")>0)continue;var d=typeof e[i];gId(o)?("boolean"===d?gId(o).checked=e[i]:gId(o).value=e[i],gId(o).previousElementSibling.matches(".l")&&(gId(o).previousElementSibling.innerHTML=s)):"boolean"===d?l+=`${s}: <input class="agi cb" type="checkbox" id=${o} ${e[i]?"checked":""}><br>`:"number"===d?l+=`${s}: <input class="agi" type="number" id=${o} value=${e[i]}><br>`:"string"===d&&(l+=`${s}:<br><input class="agi" id=${o} value=${e[i]}><br>`)}}return l}function genForm(e){var t;t=addRec(e,"",l),gId("gen").innerHTML=t}function GetLS(){(sett=localStorage.getItem("wledUiCfg"))||(gId("lserr").style.display="inline");try{sett=JSON.parse(sett)}catch(e){sett={},gId("lserr").style.display="inline",gId("lserr").innerHTML="&#9888; Settings JSON parsing failed. ("+e+")"}genForm(sett),gId("dm").checked="light"===gId("theme_base").value}function SetLS(){for(var e=d.querySelectorAll(".agi"),t=0;t<e.length;t++){var i=e[t],n=i.classList.contains("cb")?i.checked:i.value;set(i.id,sett,n),console.log(`${i.id} set to ${n}`)}try{localStorage.setItem("wledUiCfg",JSON.stringify(sett)),gId("lssuc").style.display="inline"}catch(i){gId("lssuc").style.display="none",gId("lserr").style.display="inline",gId("lserr").innerHTML="&#9888; Settings JSON saving failed. ("+i+")"}}function Save(){SetLS(),d.Sf.DS.value==initial_ds&&d.Sf.ST.checked==initial_st||d.Sf.submit()}function S(){GetV(),initial_ds=d.Sf.DS.value,initial_st=d.Sf.ST.checked,GetLS()}function H(){window.open("https://github.com/Aircoookie/WLED/wiki/Settings#user-interface-settings")}function B(){window.open("/settings","_self")}function UI(){gId("idonthateyou").style.display=gId("dm").checked?"inline":"none";var e=gId("theme_base");e&&(e.value=gId("dm").checked?"light":"dark")}function setRandomBg(){gId("theme_bg_random").checked?gId("theme_bg_url").value="https://picsum.photos/1920/1080":gId("theme_bg_url").value=""}function checkRandomBg(){"https://picsum.photos/1920/1080"===gId("theme_bg_url").value?gId("theme_bg_random").checked=!0:gId("theme_bg_random").checked=!1}function GetV() {var d=document; var initial_ds,initial_st,d=document,sett=null,l={comp:{labels:"Show button labels",colors:{LABEL:"Color selection methods",picker:"Color Wheel",rgb:"RGB sliders",quick:"Quick color selectors",hex:"HEX color input"},pcmbot:"Show bottom tab bar in PC mode",pid:"Show preset IDs",seglen:"Use LED Count instead of Stop LED on segments"},theme:{alpha:{bg:"Background opacity",tab:"Button opacity"},bg:{url:"BG image URL",random:"Random BG image"},color:{bg:"BG HEX color"}}};function gId(e){return d.getElementById(e)}function isObject(e){return e&&"object"==typeof e&&!Array.isArray(e)}function set(e,t,i){for(var n=t,l=e.split("_"),o=l.length,s=0;s<o-1;s++){var d=l[s];n[d]||(n[d]={}),n=n[d]}n[l[o-1]]=i}function addRec(e,t="",n=null){var l="";for(i in e){var o=t+(t?"_":"")+i;if(isObject(e[i]))n&&n[i]&&n[i].LABEL&&(l+=`<h3>${n[i].LABEL}</h3>`),l+=addRec(e[i],o,n?n[i]:null);else{var s=o;if(n&&n[i]?s=n[i]:e[i+"LABEL"]&&(s=e[i+"LABEL"]),i.indexOf("LABEL")>0)continue;var d=typeof e[i];gId(o)?("boolean"===d?gId(o).checked=e[i]:gId(o).value=e[i],gId(o).previousElementSibling.matches(".l")&&(gId(o).previousElementSibling.innerHTML=s)):"boolean"===d?l+=`${s}: <input class="agi cb" type="checkbox" id=${o} ${e[i]?"checked":""}><br>`:"number"===d?l+=`${s}: <input class="agi" type="number" id=${o} value=${e[i]}><br>`:"string"===d&&(l+=`${s}:<br><input class="agi" id=${o} value=${e[i]}><br>`)}}return l}function genForm(e){var t;t=addRec(e,"",l),gId("gen").innerHTML=t}function GetLS(){(sett=localStorage.getItem("wledUiCfg"))||(gId("lserr").style.display="inline");try{sett=JSON.parse(sett)}catch(e){sett={},gId("lserr").style.display="inline",gId("lserr").innerHTML="&#9888; Settings JSON parsing failed. ("+e+")"}genForm(sett),gId("dm").checked="light"===gId("theme_base").value}function SetLS(){for(var e=d.querySelectorAll(".agi"),t=0;t<e.length;t++){var i=e[t],n=i.classList.contains("cb")?i.checked:i.value;set(i.id,sett,n),console.log(`${i.id} set to ${n}`)}try{localStorage.setItem("wledUiCfg",JSON.stringify(sett)),gId("lssuc").style.display="inline"}catch(i){gId("lssuc").style.display="none",gId("lserr").style.display="inline",gId("lserr").innerHTML="&#9888; Settings JSON saving failed. ("+i+")"}}function Save(){SetLS(),d.Sf.DS.value==initial_ds&&d.Sf.ST.checked==initial_st||d.Sf.submit()}function S(){GetV(),initial_ds=d.Sf.DS.value,initial_st=d.Sf.ST.checked,GetLS()}function H(){window.open("https://github.com/Aircoookie/WLED/wiki/Settings#user-interface-settings")}function B(){window.open("/settings","_self")}function UI(){gId("idonthateyou").style.display=gId("dm").checked?"inline":"none";var e=gId("theme_base");e&&(e.value=gId("dm").checked?"light":"dark")}function setRandomBg(){gId("theme_bg_random").checked?gId("theme_bg_url").value="https://picsum.photos/1920/1080":gId("theme_bg_url").value=""}function checkRandomBg(){"https://picsum.photos/1920/1080"===gId("theme_bg_url").value?gId("theme_bg_random").checked=!0:gId("theme_bg_random").checked=!1}function GetV() {var d=document;
%CSS%%SCSS%</head><body onload="S()"><form %CSS%%SCSS%</head><body onload="S()"><form
id="form_s" name="Sf" method="post"><div class="toprow"><div class="helpB"> id="form_s" name="Sf" method="post"><div class="toprow"><div class="helpB">
<button type="button" onclick="H()">?</button></div><button type="button" <button type="button" onclick="H()">?</button></div><button type="button"
@ -199,7 +199,8 @@ You will need to set them again if using a different browser, device or WLED IP
Loading settings...</div><h3>UI Appearance</h3><span class="l"></span>: <input Loading settings...</div><h3>UI Appearance</h3><span class="l"></span>: <input
type="checkbox" id="comp_labels" class="agi cb"><br><span class="l"></span>: type="checkbox" id="comp_labels" class="agi cb"><br><span class="l"></span>:
<input type="checkbox" id="comp_pcmbot" class="agi cb"><br><span class="l"> <input type="checkbox" id="comp_pcmbot" class="agi cb"><br><span class="l">
</span>: <input type="checkbox" id="comp_pid" class="agi cb"><br> </span>: <input type="checkbox" id="comp_pid" class="agi cb"><br><span
class="l"></span>: <input type="checkbox" id="comp_seglen" class="agi cb"><br>
I hate dark mode: <input type="checkbox" id="dm" onchange="UI()"><br><span 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> 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" </span><span class="l"></span>: <input type="number" min="0.0" max="1.0"

1421
wled00/html_ui.h
View File

File diff suppressed because it is too large Load Diff

2
wled00/wled.h
View File

@ -8,7 +8,7 @@
*/ */
// version code in format yymmddb (b = daily build) // version code in format yymmddb (b = daily build)
#define VERSION 2104011 #define VERSION 2104012
//uncomment this if you have a "my_config.h" file you'd like to use //uncomment this if you have a "my_config.h" file you'd like to use
//#define WLED_USE_MY_CONFIG //#define WLED_USE_MY_CONFIG