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

Minor UI tweaks.

Browse Source
This commit is contained in:
Blaz Kristan 2021-02-26 22:43:57 +01:00
parent d76103eb76
commit c11acb6308
4 changed files with 1645 additions and 1656 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
wled00/data/index.css
View File

@ -296,8 +296,7 @@ button {
} }
#staytop, #staytop1 { #staytop, #staytop1 {
background: var(--c-1); background: var(--c-2);
/* margin-top: 1px;*/
width: 310px; width: 310px;
margin: auto; margin: auto;
border-radius: 15px; border-radius: 15px;
@ -947,17 +946,8 @@ input[type="text"].fnd {
margin: 5px auto; margin: 5px auto;
text-align: left; text-align: left;
border-radius: 0; border-radius: 0;
background: var(--c-2);
border-bottom: 1px solid var(--c-3); border-bottom: 1px solid var(--c-3);
position: relative;
}
input[type="text"].fnd::before {
opacity: 0.33;
background: var(--c-1);
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
} }
input[type="text"].fnd:focus { input[type="text"].fnd:focus {

2
wled00/data/settings_ui.htm
View File

@ -192,7 +192,7 @@
</head> </head>
<body onload="S()"> <body onload="S()">
<form id="form_s" name="Sf" method="post"> <form id="form_s" name="Sf" method="post">
<div style="position:sticky;top:0;background-color:#222;"> <div style="position:sticky;top:0;background-color:#222;z-index:1;">
<div class="helpB"><button type="button" onclick="H()">?</button></div> <div class="helpB"><button type="button" onclick="H()">?</button></div>
<button type="button" onclick="B()">Back</button><button type="button" onclick="Save()">Save</button><br> <button type="button" onclick="B()">Back</button><button type="button" onclick="Save()">Save</button><br>
<span id="lssuc" style="color:green; display:none">&#10004; Local UI settings saved!</span> <span id="lssuc" style="color:green; display:none">&#10004; Local UI settings saved!</span>

11
wled00/html_settings.h
View File

@ -182,11 +182,12 @@ 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"},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 id="form_s" name="Sf" method="post"><div
style="position:sticky;top:0;background-color:#222"><div class="helpB"><button style="position:sticky;top:0;background-color:#222;z-index:1"><div
type="button" onclick="H()">?</button></div><button type="button" onclick="B()"> class="helpB"><button type="button" onclick="H()">?</button></div><button
Back</button><button type="button" onclick="Save()">Save</button><br><span type="button" onclick="B()">Back</button><button type="button" onclick="Save()">
id="lssuc" style="color:green;display:none">&#10004; Local UI settings saved! Save</button><br><span id="lssuc" style="color:green;display:none">
</span> <span id="lserr" style="color:red;display:none"> &#10004; Local UI settings saved!</span> <span id="lserr"
style="color:red;display:none">
&#9888; Could not access local storage. Make sure it is enabled in your browser. &#9888; Could not access local storage. Make sure it is enabled in your browser.
</span><hr></div><h2>Web Setup</h2>Server description: <input name="DS" </span><hr></div><h2>Web Setup</h2>Server description: <input name="DS"
maxlength="32"><br>Sync button toggles both send and receive: <input maxlength="32"><br>Sync button toggles both send and receive: <input

3274
wled00/html_ui.h
View File

File diff suppressed because it is too large Load Diff