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

Minor UI tweaks.

Browse Source 
Added WS reconnects.
This commit is contained in:
Blaz Kristan 2021-07-04 12:09:19 +02:00
parent 3066a142b8
commit de8a244500
4 changed files with 2254 additions and 2246 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
wled00/data/index.css
View File

@ -330,7 +330,7 @@ button {
} }
.first { .first {
margin-top: 18px !important; margin-top: 10px;
} }
#toast { #toast {
@ -603,6 +603,9 @@ input[type=range]::-moz-range-thumb {
width: 42px; width: 42px;
height: 42px; height: 42px;
} }
.btn-xs {
margin: 2px 0 0 0;
}
.btn-pl-del, .btn-pl-add { .btn-pl-del, .btn-pl-add {
margin: 0; margin: 0;
white-space: nowrap; white-space: nowrap;
@ -642,6 +645,7 @@ input[type=range]::-moz-range-thumb {
} }
.sel-pl { .sel-pl {
width: 165px; width: 165px;
background-position: 141px 16px;
} }
.sel-ple { .sel-ple {
width: 100%; width: 100%;
@ -693,10 +697,6 @@ input[type=text] {
margin: 6px !important; margin: 6px !important;
} }
.plentry {
position: relative;
}
.stxt { .stxt {
width: 50px !important; width: 50px !important;
} }
@ -1089,13 +1089,9 @@ input[type="text"].fnd:not(:placeholder-shown) {
.hrz { .hrz {
width: auto; width: auto;
height: 2px; height: 2px;
background-color: var(--c-e); background-color: var(--c-b);
margin: 3px 0; margin: 3px 0;
} }
.hrz-pl {
margin: 20px 0;
position: relative;
}
::-webkit-scrollbar { ::-webkit-scrollbar {
width: 6px; width: 6px;

58
wled00/data/index.js
View File

@ -405,8 +405,11 @@ function loadPresets(callback = null)
return res.json(); return res.json();
}) })
.then(json => { .then(json => {
clearErrorToast();
pJson = json; pJson = json;
populatePresets(); populatePresets();
// Create UI update WS handler
if (!ws && lastinfo.ws > -1) setTimeout(makeWS,1000);
if (callback) callback(); if (callback) callback();
}) })
.catch(function (error) { .catch(function (error) {
@ -429,9 +432,11 @@ function loadPalettes(callback = null)
return res.json(); return res.json();
}) })
.then(json => { .then(json => {
clearErrorToast();
lJson = Object.entries(json); lJson = Object.entries(json);
populatePalettes(); populatePalettes();
// updateUI(); // Create UI update WS handler
if (!ws && lastinfo.ws > -1) setTimeout(makeWS,1000);
if (callback) callback(); if (callback) callback();
}) })
.catch(function (error) { .catch(function (error) {
@ -655,7 +660,7 @@ function populateSegments(s)
<tr> <tr>
<td><input class="noslide segn" id="seg${i}s" type="number" min="0" max="${ledCount-1}" value="${inst.start}" oninput="updateLen(${i})"></td> <td><input class="noslide segn" id="seg${i}s" type="number" min="0" max="${ledCount-1}" value="${inst.start}" oninput="updateLen(${i})"></td>
<td><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> <td><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>
<td><input class="noslide segn" id="seg${i}of" type="number" min="0" max="${ledCount-1}" value="${inst.of}" oninput="updateLen(${i})"></td> <td><input class="noslide segn" id="seg${i}of" type="number" value="${inst.of}" oninput="updateLen(${i})"></td>
</tr> </tr>
</table> </table>
<table class="infot segt"> <table class="infot segt">
@ -737,9 +742,9 @@ function populateNodes(i,n)
} }
if (i.ndc < 0) cn += `Instance List is disabled.`; if (i.ndc < 0) cn += `Instance List is disabled.`;
else if (nnodes == 0) cn += `No other instances found.`; else if (nnodes == 0) cn += `No other instances found.`;
cn += `<table class="infot"> cn += `<table class="infot">
${urows} ${urows}
${inforow("Current instance:",i.name)} ${inforow("Current instance:",i.name)}
</table>`; </table>`;
gId('kn').innerHTML = cn; gId('kn').innerHTML = cn;
} }
@ -755,7 +760,10 @@ function loadNodes()
return res.json(); return res.json();
}) })
.then(json => { .then(json => {
clearErrorToast();
populateNodes(lastinfo, json); populateNodes(lastinfo, json);
// Create UI update WS handler
if (!ws && lastinfo.ws > -1) setTimeout(makeWS,1000);
}) })
.catch(function (error) { .catch(function (error) {
showToast(error, true); showToast(error, true);
@ -1201,6 +1209,8 @@ function requestJson(command, rinfo = true, verbose = true, callback = null)
var s = json.state ? json.state : json; var s = json.state ? json.state : json;
readState(s); readState(s);
reqsLegal = true; reqsLegal = true;
// Create UI update WS handler
if (!ws && lastinfo.ws > -1) setTimeout(makeWS,1000);
if (callback) callback(); if (callback) callback();
}) })
.catch(function (error) { .catch(function (error) {
@ -1325,7 +1335,7 @@ function makePlSel(arr) {
function refreshPlE(p) { function refreshPlE(p) {
var plEDiv = gId(`ple${p}`); var plEDiv = gId(`ple${p}`);
if (!plEDiv) return; if (!plEDiv) return;
var content = "<div class=\"c\">Playlist entries</div>"; var content = "<div class=\"first c\">Playlist entries</div>";
for (var i = 0; i < plJson[p].ps.length; i++) { for (var i = 0; i < plJson[p].ps.length; i++) {
content += makePlEntry(p,i); content += makePlEntry(p,i);
} }
@ -1458,24 +1468,24 @@ function makePlEntry(p,i) {
return `<div class="plentry"> return `<div class="plentry">
<div class="hrz"></div> <div class="hrz"></div>
<table class="segt"> <table class="segt">
<tr> <tr>
<td width="80%" colspan=2> <td width="80%" colspan=2>
<select class="sel sel-pl" onchange="plePs(${p},${i},this)" data-val="${plJson[p].ps[i]}" data-index="${i}"> <select class="sel sel-pl" onchange="plePs(${p},${i},this)" data-val="${plJson[p].ps[i]}" data-index="${i}">
${plSelContent} ${plSelContent}
</select> </select>
</td> </td>
<td><button class="btn btn-i btn-pl-add" onclick="addPl(${p},${i})"><i class="icons btn-icon">&#xe18a;</i></button></td> <td><button class="btn btn-i btn-pl-add" onclick="addPl(${p},${i})"><i class="icons btn-icon">&#xe18a;</i></button></td>
</tr> </tr>
<tr> <tr>
<td class="h">Duration</td> <td class="h">Duration</td>
<td class="h">Transition</td> <td class="h">Transition</td>
<td class="h">#${i+1}</td> <td class="h">#${i+1}</td>
</tr> </tr>
<tr> <tr>
<td width="40%"><input class="noslide segn" type="number" placeholder="Duration" max=6553.0 min=0.2 step=0.1 oninput="pleDur(${p},${i},this)" value="${plJson[p].dur[i]/10.0}">s</td> <td width="40%"><input class="noslide segn" type="number" placeholder="Duration" max=6553.0 min=0.2 step=0.1 oninput="pleDur(${p},${i},this)" value="${plJson[p].dur[i]/10.0}">s</td>
<td width="40%"><input class="noslide segn" type="number" placeholder="Transition" max=65.0 min=0.0 step=0.1 oninput="pleTr(${p},${i},this)" value="${plJson[p].transition[i]/10.0}">s</td> <td width="40%"><input class="noslide segn" type="number" placeholder="Transition" max=65.0 min=0.0 step=0.1 oninput="pleTr(${p},${i},this)" value="${plJson[p].transition[i]/10.0}">s</td>
<td><button class="btn btn-i btn-pl-del" onclick="delPl(${p},${i})"><i class="icons btn-icon">&#xe037;</i></button></div></td> <td><button class="btn btn-i btn-pl-del" onclick="delPl(${p},${i})"><i class="icons btn-icon">&#xe037;</i></button></div></td>
</tr> </tr>
</table> </table>
</div>`; </div>`;
} }

4424
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 2107031 #define VERSION 2107041
//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