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

Move node discovery in separate page.

Browse Source
This commit is contained in:
Blaz Kristan 2021-02-28 18:16:24 +01:00
parent a899ea8b4d
commit 847178b7be
5 changed files with 2257 additions and 2207 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
wled00/data/index.css
View File

@ -221,6 +221,10 @@ button {
width:25%; width:25%;
} }
#btnNodes {
display: none;
}
.tab button:hover { .tab button:hover {
background-color: var(--c-tbh); background-color: var(--c-tbh);
color: var(--c-e); color: var(--c-e);
@ -365,7 +369,7 @@ button {
z-index: 3; z-index: 3;
} }
#rover { #rover, #nodes {
z-index: 2; z-index: 2;
} }
@ -393,7 +397,7 @@ button {
display: inline-block; display: inline-block;
} }
#kv { #kv, #kn {
max-width: 490px; max-width: 490px;
display: inline-block; display: inline-block;
} }
@ -1033,7 +1037,7 @@ input[type="text"].fnd:not(:placeholder-shown) {
} }
@media all and (max-width: 1249px) { @media all and (max-width: 1249px) {
#buttonPcm { #buttonPcm, #buttonNo {
display: none; display: none;
} }
} }

24
wled00/data/index.htm
View File

@ -23,9 +23,10 @@
<button id="buttonNl" onclick="toggleNl()"><i class="icons">&#xe2a2;</i><p class="tab-label">Timer</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="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">Peek</p></button>
<button id="buttonI" onclick="toggleInfo()"><i class="icons">&#xe34b;</i><p class="tab-label">Info</p></button> <button id="buttonI" onclick="toggleInfo()"><i class="icons">&#xe34b;</i><p class="tab-label">Info</p></button>
<button onclick="window.location.href = '/settings';"><i class="icons">&#xe0a2;</i><p class="tab-label">Config</p></button> <button onclick="window.location.href = '/settings';"><i class="icons">&#xe0a2;</i><p class="tab-label">Config</p></button>
<button id="buttonPcm" onclick="togglePcMode(true)"><i class="icons">&#xe23d;</i><p class="tab-label">PC Mode</p></button> <button id="buttonPcm" onclick="togglePcMode(true)"><i class="icons">&#xe23d;</i><p class="tab-label">PC Mode</p></button>
<button id="buttonNo" onclick="toggleNodes()"><i class="icons">&#xe22d;</i><p class="tab-label">Nodes</p></button>
</div> </div>
<div id="briwrap"> <div id="briwrap">
<p class="hd">Brightness</p> <p class="hd">Brightness</p>
@ -202,6 +203,7 @@
<button class="tablinks" onclick="openTab(1)"><i class="icons">&#xe23d;</i><p class="tab-label">Effects</p></button> <button class="tablinks" onclick="openTab(1)"><i class="icons">&#xe23d;</i><p class="tab-label">Effects</p></button>
<button class="tablinks" onclick="openTab(2)"><i class="icons">&#xe34b;</i><p class="tab-label">Segments</p></button> <button class="tablinks" onclick="openTab(2)"><i class="icons">&#xe34b;</i><p class="tab-label">Segments</p></button>
<button class="tablinks" onclick="openTab(3)"><i class="icons">&#xe04c;</i><p class="tab-label">Favorites</p></button> <button class="tablinks" onclick="openTab(3)"><i class="icons">&#xe04c;</i><p class="tab-label">Favorites</p></button>
<button id="btnNodes" class="tablinks" onclick="toggleNodes()"><i class="icons">&#xe22d;</i><p class="tab-label">Nodes</p></button>
</div> </div>
<div id="connind"></div> <div id="connind"></div>
@ -211,14 +213,18 @@
<div id="imgw"> <div id="imgw">
<img alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAggAAACMCAYAAAAZQlGEAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAKLSURBVHhe7dgxjtwwEADBpf//5zUDwklnpzFAnKoSTigNFTT0AQAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAGDcOieX+G5nvNLaznil6f1Nv+/tz3c7+3tmen/Tpu/jbe877c85AQD+EQgAQAgEACAEAgAQAgEACIEAAIRAAABCIAAAIRAAgBAIAEAIBAAgBAIAEAIBAAiBAACEQAAAQiAAACEQAIAQCABACAQAINY5+aHvdsYRazvjK9jfM7fvz/0+Y3+/2+336w8CABACAQAIgQAAhEAAAEIgAAAhEACAEAgAQAgEACAEAgAQAgEACIEAAIRAAABCIAAAIRAAgBAIAEAIBAAgBAIAEAIBAAiBAADEOudrfLczXmltZ3yF6fuwv2em9+d+n5ne3zT3cZfp+/AHAQAIgQAAhEAAAEIgAAAhEACAEAgAQAgEACAEAgAQAgEACIEAAIRAAABCIAAAIRAAgBAIAEAIBAAgBAIAEAIBAAiBAACEQAAAYp3zNb7bGUes7Yz8wO334fmeuf35bmd/z9y+v9ufzx8EACAEAgAQAgEACIEAAIRAAABCIAAAIRAAgBAIAEAIBAAgBAIAEAIBAAiBAACEQAAAQiAAACEQAIAQCABACAQAIAQCABACAQCIdc4x3+2MV1rbGfmFpr+/6e/l9ue73fT+pt1+H2/bn+/lGX8QAIAQCABACAQAIAQCABACAQAIgQAAhEAAAEIgAAAhEACAEAgAQAgEACAEAgAQAgEACIEAAIRAAABCIAAAIRAAgBAIAEAIBAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAgP/u8/kLYCqAxINTyZkAAAAASUVORK5CYII="> <img alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAggAAACMCAYAAAAZQlGEAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAKLSURBVHhe7dgxjtwwEADBpf//5zUDwklnpzFAnKoSTigNFTT0AQAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAGDcOieX+G5nvNLaznil6f1Nv+/tz3c7+3tmen/Tpu/jbe877c85AQD+EQgAQAgEACAEAgAQAgEACIEAAIRAAABCIAAAIRAAgBAIAEAIBAAgBAIAEAIBAAiBAACEQAAAQiAAACEQAIAQCABACAQAINY5+aHvdsYRazvjK9jfM7fvz/0+Y3+/2+336w8CABACAQAIgQAAhEAAAEIgAAAhEACAEAgAQAgEACAEAgAQAgEACIEAAIRAAABCIAAAIRAAgBAIAEAIBAAgBAIAEAIBAAiBAADEOudrfLczXmltZ3yF6fuwv2em9+d+n5ne3zT3cZfp+/AHAQAIgQAAhEAAAEIgAAAhEACAEAgAQAgEACAEAgAQAgEACIEAAIRAAABCIAAAIRAAgBAIAEAIBAAgBAIAEAIBAAiBAACEQAAAYp3zNb7bGUes7Yz8wO334fmeuf35bmd/z9y+v9ufzx8EACAEAgAQAgEACIEAAIRAAABCIAAAIRAAgBAIAEAIBAAgBAIAEAIBAAiBAACEQAAAQiAAACEQAIAQCABACAQAIAQCABACAQCIdc4x3+2MV1rbGfmFpr+/6e/l9ue73fT+pt1+H2/bn+/lGX8QAIAQCABACAQAIAQCABACAQAIgQAAhEAAAEIgAAAhEACAEAgAQAgEACAEAgAQAgEACIEAAIRAAABCIAAAIRAAgBAIAEAIBAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAgP/u8/kLYCqAxINTyZkAAAAASUVORK5CYII=">
</div><br> </div><br>
<div id="kv">Loading...</div><br> <div id="kv">Loading...</div><br>
<button class="btn infobtn" onclick="requestJson(null)">Refresh</button> <button class="btn infobtn" onclick="requestJson(null)">Refresh</button>
<button class="btn infobtn" onclick="toggleInfo()">Close Info</button><br> <button class="btn infobtn" onclick="toggleInfo()">Close Info</button><br>
<button class="btn infobtn" onclick="openGH()">WLED Wiki</button> <button class="btn infobtn" onclick="openGH()">WLED Wiki</button>
<button class="btn infobtn" id="resetbtn" onclick="cnfReset()">Reboot WLED</button><br> <button class="btn infobtn" id="resetbtn" onclick="cnfReset()">Reboot WLED</button><br>
<span class="h">Made with <span id="heart">&#10084;&#xFE0E;</span> by Aircoookie and the WLED community</span> <span class="h">Made with <span id="heart">&#10084;&#xFE0E;</span> by Aircoookie and the WLED community</span>
</div>
<div id="nodes" class="modal">
<div id="kn">Loading...</div><br>
<button class="btn infobtn" onclick="requestJson(null)">Refresh</button>
<button class="btn infobtn" onclick="toggleNodes()">Close</button><br>
</div> </div>
<div id="rover" class="modal"> <div id="rover" class="modal">
<i class="icons huge">&#xe410;</i><br> <i class="icons huge">&#xe410;</i><br>
<div id="lv">?</div><br><br> <div id="lv">?</div><br><br>

106
wled00/data/index.js
View File

@ -2,7 +2,7 @@
const lsPalKey = "wledPalx"; const lsPalKey = "wledPalx";
var loc = false, locip; var loc = false, locip;
var noNewSegs = false; var noNewSegs = false;
var isOn = false, nlA = false, isLv = false, isInfo = false, syncSend = false, syncTglRecv = true, isRgbw = false; var isOn = false, nlA = false, isLv = false, isInfo = false, isNodes = false, syncSend = false, syncTglRecv = true, isRgbw = false;
var whites = [0,0,0]; var whites = [0,0,0];
var selColors; var selColors;
var expanded = [false]; var expanded = [false];
@ -533,6 +533,35 @@ function populatePresets(fromls)
populateQL(); populateQL();
} }
function populateNodes(i)
{
var cn="";
var urows="";
if (i.nodes) {
i.nodes.sort((a,b) => (a.name).localeCompare(b.name));
for (var x=0;x<i.nodes.length;x++) {
var o = i.nodes[x];
if (o.name) {
var url = `<button class="btn btna-icon tab" onclick="location.assign('http://${o.ip}');">${o.name}</button>`;
urows += inforow(url,o.type);
}
}
if (i.nodes.length>0) {
var botButtons = d.querySelectorAll('.bot button');
for (btn of botButtons) {
btn.style.width = '20%';
}
d.getElementById('btnNodes').style.display = "inline";
} else
d.getElementById('btnNodes').style.display = "none";
}
cn += `<table class="infot">
${urows}
${inforow("Current node:",i.name)}
</table>`;
d.getElementById('kn').innerHTML = cn;
}
function populateInfo(i) function populateInfo(i)
{ {
var cn=""; var cn="";
@ -543,17 +572,6 @@ function populateInfo(i)
if (pwr > 1000) {pwr /= 1000; pwr = pwr.toFixed((pwr > 10) ? 0 : 1); pwru = pwr + " A";} if (pwr > 1000) {pwr /= 1000; pwr = pwr.toFixed((pwr > 10) ? 0 : 1); pwru = pwr + " A";}
else if (pwr > 0) {pwr = 50 * Math.round(pwr/50); pwru = pwr + " mA";} else if (pwr > 0) {pwr = 50 * Math.round(pwr/50); pwru = pwr + " mA";}
var urows=""; var urows="";
if (i.nodes) {
i.nodes.sort((a,b) => (a.name).localeCompare(b.name));
for (var x=0;x<i.nodes.length;x++)
{
var o = i.nodes[x];
if (o.name) {
var url = `<button class="btn btna-icon tab" onclick="location.assign('http://${o.ip}');">${o.name}</button>`;
urows += inforow(url,o.type);
}
}
}
if (i.u) { if (i.u) {
for (const [k, val] of Object.entries(i.u)) for (const [k, val] of Object.entries(i.u))
{ {
@ -569,16 +587,16 @@ function populateInfo(i)
if (i.cn) vcn = i.cn; if (i.cn) vcn = i.cn;
cn += `v${i.ver} "${vcn}"<br><br><table class="infot"> cn += `v${i.ver} "${vcn}"<br><br><table class="infot">
${urows} ${urows}
${inforow("Build",i.vid)} ${inforow("Build",i.vid)}
${inforow("Signal strength",i.wifi.signal +"% ("+ i.wifi.rssi, " dBm)")} ${inforow("Signal strength",i.wifi.signal +"% ("+ i.wifi.rssi, " dBm)")}
${inforow("Uptime",getRuntimeStr(i.uptime))} ${inforow("Uptime",getRuntimeStr(i.uptime))}
${inforow("Free heap",heap," kB")} ${inforow("Free heap",heap," kB")}
${inforow("Estimated current",pwru)} ${inforow("Estimated current",pwru)}
${inforow("MAC address",i.mac)} ${inforow("MAC address",i.mac)}
${inforow("Filesystem",i.fs.u + "/" + i.fs.t + " kB (" +Math.round(i.fs.u*100/i.fs.t) + "%)")} ${inforow("Filesystem",i.fs.u + "/" + i.fs.t + " kB (" +Math.round(i.fs.u*100/i.fs.t) + "%)")}
${inforow("Environment",i.arch + " " + i.core + " (" + i.lwip + ")")} ${inforow("Environment",i.arch + " " + i.core + " (" + i.lwip + ")")}
</table>`; </table>`;
d.getElementById('kv').innerHTML = cn; d.getElementById('kv').innerHTML = cn;
} }
@ -884,15 +902,9 @@ function updateUI(scrollto=false)
d.getElementById('buttonNl').className = (nlA) ? "active":""; d.getElementById('buttonNl').className = (nlA) ? "active":"";
d.getElementById('buttonSync').className = (syncSend) ? "active":""; d.getElementById('buttonSync').className = (syncSend) ? "active":"";
updateSelectedPalette(); updateSelectedPalette(scrollto);
updateSelectedFx(scrollto); updateSelectedFx(scrollto);
// d.getElementById('fxb' + selectedFx).style.backgroundColor = "var(--c-6)";
//if (d.getElementById('fxb' + selectedFx))
//{
// d.getElementById('fxb' + selectedFx).style.backgroundColor = "var(--c-6)";
// if (scrollto) d.getElementById('Effects').scrollTop = d.getElementById('fxb' + selectedFx).offsetTop - d.getElementById('Effects').clientHeight/1.8;
//}
updateTrail(d.getElementById('sliderBri')); updateTrail(d.getElementById('sliderBri'));
updateTrail(d.getElementById('sliderSpeed')); updateTrail(d.getElementById('sliderSpeed'));
updateTrail(d.getElementById('sliderIntensity')); updateTrail(d.getElementById('sliderIntensity'));
@ -904,7 +916,7 @@ function updateUI(scrollto=false)
updateRgb(); updateRgb();
} }
function updateSelectedPalette() function updateSelectedPalette(scrollto=false)
{ {
var parent = d.getElementById('selectPalette'); var parent = d.getElementById('selectPalette');
var selectedPalette = parent.querySelector(`input[name="palette"][value="${selectedPal}"]`); var selectedPalette = parent.querySelector(`input[name="palette"][value="${selectedPal}"]`);
@ -919,6 +931,14 @@ function updateSelectedPalette()
if (selectedPalette) { if (selectedPalette) {
parent.querySelector(`.lstI[data-id="${selectedPal}"]`).classList.add('selected'); parent.querySelector(`.lstI[data-id="${selectedPal}"]`).classList.add('selected');
} }
/*
if (scrollto && selectedPalette) {
selectedPalette.scrollIntoView({
behavior: 'smooth',
block: 'center',
});
}
*/
} }
function updateSelectedFx(scrollto=false) function updateSelectedFx(scrollto=false)
@ -1010,7 +1030,6 @@ function requestJson(command, rinfo = true, verbose = true, callback = null) {
return; return;
} }
var s = json; var s = json;
if (!command || rinfo) { if (!command || rinfo) {
if (!rinfo) { if (!rinfo) {
pmt = json.info.fs.pmt; pmt = json.info.fs.pmt;
@ -1041,11 +1060,10 @@ function requestJson(command, rinfo = true, verbose = true, callback = null) {
} }
pmtLast = pmt; pmtLast = pmt;
lastinfo = info; lastinfo = info;
if (isInfo) { if (isInfo) populateInfo(info);
populateInfo(info); populateNodes(info);
} s = json.state;
s = json.state; displayRover(info, s);
displayRover(info, s);
} }
isOn = s.on; isOn = s.on;
@ -1174,6 +1192,13 @@ function toggleInfo() {
d.getElementById('buttonI').className = (isInfo) ? "active":""; d.getElementById('buttonI').className = (isInfo) ? "active":"";
} }
function toggleNodes() {
isNodes = !isNodes;
if (isNodes) populateNodes(lastinfo);
d.getElementById('nodes').style.transform = (isNodes) ? "translateY(0px)":"translateY(100%)";
d.getElementById('buttonNo').className = (isNodes) ? "active":"";
}
function makeSeg() { function makeSeg() {
var ns = 0; var ns = 0;
if (lowestUnused > 0) { if (lowestUnused > 0) {
@ -1779,9 +1804,9 @@ function size() {
function togglePcMode(fromB = false) function togglePcMode(fromB = false)
{ {
if (fromB) { if (fromB) {
pcModeA = !pcModeA; pcModeA = !pcModeA;
localStorage.setItem('pcm', pcModeA); localStorage.setItem('pcm', pcModeA);
pcMode = pcModeA; pcMode = pcModeA;
} }
if (w < 1250 && !pcMode) return; if (w < 1250 && !pcMode) return;
if (!fromB && ((w < 1250 && lastw < 1250) || (w >= 1250 && lastw >= 1250))) return; if (!fromB && ((w < 1250 && lastw < 1250) || (w >= 1250 && lastw >= 1250))) return;
@ -1792,7 +1817,8 @@ function togglePcMode(fromB = false)
d.getElementById('buttonPcm').className = (pcMode) ? "active":""; d.getElementById('buttonPcm').className = (pcMode) ? "active":"";
d.getElementById('bot').style.height = (pcMode && !cfg.comp.pcmbot) ? "0":"auto"; d.getElementById('bot').style.height = (pcMode && !cfg.comp.pcmbot) ? "0":"auto";
sCol('--bh', d.getElementById('bot').clientHeight + "px"); sCol('--bh', d.getElementById('bot').clientHeight + "px");
_C.style.width = (pcMode)?'100%':'400%'; d.getElementById('buttonNo').style.display = (pcMode) ? "":"none";
_C.style.width = (pcMode)?'100%':'400%';
lastw = w; lastw = w;
} }

2
wled00/html_settings.h
View File

File diff suppressed because one or more lines are too long

4322
wled00/html_ui.h
View File

File diff suppressed because it is too large Load Diff