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

UI bugfix.

Browse Source
This commit is contained in:
Blaz Kristan 2022-01-08 12:45:32 +01:00
parent ec37085e39
commit 7a4ed5a337
5 changed files with 2738 additions and 2733 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

59
wled00/data/index.js
View File

@ -198,15 +198,15 @@ function onLoad()
fetch((loc?`http://${locip}`:'.') + "/holidays.json", { // may be loaded from external source fetch((loc?`http://${locip}`:'.') + "/holidays.json", { // may be loaded from external source
method: 'get' method: 'get'
}) })
.then(res => { .then((res)=>{
//if (!res.ok) showErrorToast(); //if (!res.ok) showErrorToast();
return res.json(); return res.json();
}) })
.then(json => { .then((json)=>{
if (Array.isArray(json)) hol = json; if (Array.isArray(json)) hol = json;
//TODO: do some parsing first //TODO: do some parsing first
}) })
.catch(function (error) { .catch((e)=>{
console.log("holidays.json does not contain array of holidays. Defaults loaded."); console.log("holidays.json does not contain array of holidays. Defaults loaded.");
}) })
.finally(()=>{ .finally(()=>{
@ -421,9 +421,8 @@ function loadPresets(callback = null)
pJson = json; pJson = json;
populatePresets(); populatePresets();
}) })
.catch(function (error) { .catch((e)=>{
showToast(error, true); showToast(e, true);
console.log(error);
presetError(false); presetError(false);
}) })
.finally(()=>{ .finally(()=>{
@ -438,17 +437,17 @@ function loadPalettes(callback = null)
fetch(url, { fetch(url, {
method: 'get' method: 'get'
}) })
.then(res => { .then((res)=>{
if (!res.ok) showErrorToast(); if (!res.ok) showErrorToast();
return res.json(); return res.json();
}) })
.then(json => { .then((json)=>{
clearErrorToast(); clearErrorToast();
lJson = Object.entries(json); lJson = Object.entries(json);
populatePalettes(); populatePalettes();
}) })
.catch(function (error) { .catch((e)=>{
showToast(error, true); showToast(e, true);
presetError(false); presetError(false);
}) })
.finally(()=>{ .finally(()=>{
@ -464,17 +463,17 @@ function loadFX(callback = null)
fetch(url, { fetch(url, {
method: 'get' method: 'get'
}) })
.then(res => { .then((res)=>{
if (!res.ok) showErrorToast(); if (!res.ok) showErrorToast();
return res.json(); return res.json();
}) })
.then(json => { .then((json)=>{
clearErrorToast(); clearErrorToast();
eJson = Object.entries(json); eJson = Object.entries(json);
populateEffects(); populateEffects();
}) })
.catch(function (error) { .catch((e)=>{
showToast(error, true); showToast(e, true);
presetError(false); presetError(false);
}) })
.finally(()=>{ .finally(()=>{
@ -490,20 +489,20 @@ function loadFXData(callback = null)
fetch(url, { fetch(url, {
method: 'get' method: 'get'
}) })
.then(res => { .then((res)=>{
if (!res.ok) showErrorToast(); if (!res.ok) showErrorToast();
return res.json(); return res.json();
}) })
.then(json => { .then((json)=>{
clearErrorToast(); clearErrorToast();
fxdata = json||[]; fxdata = json||[];
// add default value for Solid // add default value for Solid
fxdata.shift() fxdata.shift()
fxdata.unshift("@;!;"); fxdata.unshift("@;!;");
}) })
.catch(function (error) { .catch((e)=>{
fxdata = []; fxdata = [];
showToast(error, true); showToast(e, true);
}) })
.finally(()=>{ .finally(()=>{
if (callback) callback(); if (callback) callback();
@ -910,17 +909,16 @@ function loadNodes()
fetch(url, { fetch(url, {
method: 'get' method: 'get'
}) })
.then(res => { .then((res)=>{
if (!res.ok) showToast('Could not load Node list!', true); if (!res.ok) showToast('Could not load Node list!', true);
return res.json(); return res.json();
}) })
.then(json => { .then((json)=>{
clearErrorToast(); clearErrorToast();
populateNodes(lastinfo, json); populateNodes(lastinfo, json);
}) })
.catch(function (error) { .catch((e)=>{
showToast(error, true); showToast(e, true);
console.log(error);
}); });
} }
@ -1074,8 +1072,8 @@ function cmpP(a, b)
function makeWS() { function makeWS() {
if (ws) return; if (ws) return;
ws = new WebSocket('ws://'+(loc?locip:window.location.hostname)+'/ws'); ws = new WebSocket('ws://'+(loc?locip:window.location.hostname)+'/ws');
ws.onmessage = function(event) { ws.onmessage = (e)=>{
var json = JSON.parse(event.data); var json = JSON.parse(e.data);
if (json.leds) return; //liveview packet if (json.leds) return; //liveview packet
clearTimeout(jsonTimeout); clearTimeout(jsonTimeout);
jsonTimeout = null; jsonTimeout = null;
@ -1095,11 +1093,12 @@ function makeWS() {
displayRover(i, s); displayRover(i, s);
readState(s); readState(s);
}; };
ws.onclose = function(event) { ws.onclose = (e)=>{
gId('connind').style.backgroundColor = "var(--c-r)"; gId('connind').style.backgroundColor = "var(--c-r)";
ws = null; ws = null;
if (lastinfo.ws > -1) setTimeout(makeWS,500); //retry WS connection
} }
ws.onopen = function(event) { ws.onopen = (e)=>{
ws.send("{'v':true}"); ws.send("{'v':true}");
reqsLegal = true; reqsLegal = true;
clearErrorToast(); clearErrorToast();
@ -1389,9 +1388,9 @@ function requestJson(command=null)
readState(s); readState(s);
reqsLegal = true; reqsLegal = true;
}) })
.catch(function (error) { .catch((e)=>{
showToast(error, true); showToast(e, true);
console.log(error); console.log(e);
}); });
} }

72
wled00/data/simple.js
View File

@ -176,14 +176,14 @@ async function onLoad()
fetch((loc?`http://${locip}`:'.') + "/holidays.json", { fetch((loc?`http://${locip}`:'.') + "/holidays.json", {
method: 'get' method: 'get'
}) })
.then(res => { .then((res)=>{
return res.json(); return res.json();
}) })
.then(json => { .then((json)=>{
if (Array.isArray(json)) hol = json; if (Array.isArray(json)) hol = json;
//TODO: do some parsing first //TODO: do some parsing first
}) })
.catch(function(error){ .catch((e)=>{
console.log("holidays.json does not contain array of holidays. Defaults loaded."); console.log("holidays.json does not contain array of holidays. Defaults loaded.");
}) })
.finally(()=>{ .finally(()=>{
@ -204,7 +204,7 @@ async function onLoad()
var cd = gId('csl').children; var cd = gId('csl').children;
for (var i = 0; i < cd.length; i++) cd[i].style.backgroundColor = "rgb(0, 0, 0)"; for (var i = 0; i < cd.length; i++) cd[i].style.backgroundColor = "rgb(0, 0, 0)";
selectSlot(0); selectSlot(0);
cpick.on("input:end", function() { cpick.on("input:end", ()=>{
setColor(1); setColor(1);
}); });
pmtLS = localStorage.getItem('wledPmt'); pmtLS = localStorage.getItem('wledPmt');
@ -239,7 +239,8 @@ function showToast(text, error = false)
x.className = error ? "error":"show"; x.className = error ? "error":"show";
clearTimeout(timeout); clearTimeout(timeout);
x.style.animation = 'none'; x.style.animation = 'none';
timeout = setTimeout(function(){ x.classList.remove("show"); }, 2900); timeout = setTimeout(()=>{ x.classList.remove("show"); }, 2900);
if (error) console.log(text);
} }
function showErrorToast() function showErrorToast()
@ -547,12 +548,14 @@ function populateSegments(s)
<input type="checkbox" id="seg${i}sel" onchange="selSeg(${i})" ${inst.sel ? "checked":""}> <input type="checkbox" id="seg${i}sel" onchange="selSeg(${i})" ${inst.sel ? "checked":""}>
<span class="checkmark schk"></span> <span class="checkmark schk"></span>
</label> </label>
<i class="icons slider-icon pwr ${powered[i] ? "act":""}" id="seg${i}pwr" onclick="setSegPwr(${i})" title="${inst.n}">&#xe08f;</i> <div class="il">
<div id="sliderSeg${i}Bri" class="sliderwrap il"> <i class="icons slider-icon pwr ${powered[i] ? "act":""}" id="seg${i}pwr" onclick="setSegPwr(${i})" title="${inst.n}">&#xe08f;</i>
<input id="seg${i}bri" class="noslide" onchange="setSegBri(${i})" oninput="updateTrail(this)" max="255" min="1" type="range" value="${inst.bri}" /> <div id="sliderSeg${i}Bri" class="sliderwrap il">
<div class="sliderdisplay"></div> <input id="seg${i}bri" class="noslide" onchange="setSegBri(${i})" oninput="updateTrail(this)" max="255" min="1" type="range" value="${inst.bri}" />
<div class="sliderdisplay"></div>
</div>
<output class="sliderbubble"></output>
</div> </div>
<output class="sliderbubble"></output>
</div>`; </div>`;
} }
//if (gId('buttonBri').className !== 'active') tglBri(true); //if (gId('buttonBri').className !== 'active') tglBri(true);
@ -769,6 +772,7 @@ function generateListItemHtml(listName, id, name, clickAction, extraHtml = '', e
</div>`; </div>`;
} }
//update the 'sliderdisplay' background div of a slider for a visual indication of slider position
function updateTrail(e) function updateTrail(e)
{ {
if (e==null) return; if (e==null) return;
@ -776,15 +780,17 @@ function updateTrail(e)
var perc = e.value * 100 / max; var perc = e.value * 100 / max;
perc = parseInt(perc); perc = parseInt(perc);
if (perc < 50) perc += 2; if (perc < 50) perc += 2;
e.parentNode.getElementsByClassName('sliderdisplay')[0].style.background = `linear-gradient(90deg, var(--c-f) ${perc}%, var(--c-4) ${perc}%)`; var val = `linear-gradient(90deg, var(--c-f) ${perc}%, var(--c-4) ${perc}%)`;
var bubble = e.parentNode.parentNode.getElementsByTagName('output')[0]; e.parentNode.getElementsByClassName('sliderdisplay')[0].style.background = val;
if (bubble) bubble.innerHTML = e.value; var b = e.parentNode.parentNode.getElementsByTagName('output')[0];
if (b) b.innerHTML = e.value;
} }
//rangetouch slider function
function toggleBubble(e) function toggleBubble(e)
{ {
var bubble = e.target.parentNode.parentNode.getElementsByTagName('output')[0]; var b = e.target.parentNode.parentNode.getElementsByTagName('output')[0];
bubble.classList.toggle('sliderbubbleshow'); b.classList.toggle('sliderbubbleshow');
} }
function updatePA() function updatePA()
@ -850,8 +856,8 @@ function cmpP(a, b)
function makeWS() { function makeWS() {
if (ws) return; if (ws) return;
ws = new WebSocket('ws://'+(loc?locip:window.location.hostname)+'/ws'); ws = new WebSocket('ws://'+(loc?locip:window.location.hostname)+'/ws');
ws.onmessage = function(event) { ws.onmessage = (e)=>{
var json = JSON.parse(event.data); var json = JSON.parse(e.data);
if (json.leds) return; //liveview packet if (json.leds) return; //liveview packet
clearTimeout(jsonTimeout); clearTimeout(jsonTimeout);
jsonTimeout = null; jsonTimeout = null;
@ -869,11 +875,12 @@ function makeWS() {
var s = json.state ? json.state : json; var s = json.state ? json.state : json;
readState(s); readState(s);
}; };
ws.onclose = function(event) { ws.onclose = (e)=>{
gId('connind').style.backgroundColor = "var(--c-r)"; gId('connind').style.backgroundColor = "var(--c-r)";
ws = null; ws = null;
if (lastinfo.ws > -1) setTimeout(makeWS,500);
} }
ws.onopen = function(event) { ws.onopen = (e)=>{
ws.send("{'v':true}"); ws.send("{'v':true}");
reqsLegal = true; reqsLegal = true;
clearErrorToast(); clearErrorToast();
@ -1042,15 +1049,15 @@ function toggleNodes()
gId('nodes').style.transform = (isNodes) ? "translateY(0px)":"translateY(100%)"; gId('nodes').style.transform = (isNodes) ? "translateY(0px)":"translateY(100%)";
gId('buttonNodes').className = (isNodes) ? "active":""; gId('buttonNodes').className = (isNodes) ? "active":"";
} }
/*
function tglBri(b=null) function tglBri(b=null)
{/* {
if (b===null) b = gId(`briwrap`).style.display === "block"; if (b===null) b = gId(`briwrap`).style.display === "block";
gId('briwrap').style.display = !b ? "block":"none"; gId('briwrap').style.display = !b ? "block":"none";
gId('buttonBri').className = !b ? "active":""; gId('buttonBri').className = !b ? "active":"";
size(); size();
*/} }
*/
function tglCP() function tglCP()
{ {
var p = gId('buttonCP').className === "active"; var p = gId('buttonCP').className === "active";
@ -1058,8 +1065,8 @@ function tglCP()
gId('picker').style.display = !p ? "block":"none"; gId('picker').style.display = !p ? "block":"none";
gId('vwrap').style.display = !p ? "block":"none"; gId('vwrap').style.display = !p ? "block":"none";
gId('rgbwrap').style.display = !p ? "block":"none"; gId('rgbwrap').style.display = !p ? "block":"none";
var csl = gId(`csl`).style.display === "block"; var csl = gId('Slots').style.display === "block";
gId('csl').style.display = !csl ? "block":"none"; gId('Slots').style.display = !csl ? "block":"none";
//var ps = gId(`Presets`).style.display === "block"; //var ps = gId(`Presets`).style.display === "block";
//gId('Presets').style.display = !ps ? "block":"none"; //gId('Presets').style.display = !ps ? "block":"none";
} }
@ -1262,7 +1269,7 @@ function setBalance(b)
} }
var hc = 0; var hc = 0;
setInterval(function(){if (!isInfo) return; hc+=18; if (hc>300) hc=0; if (hc>200)hc=306; if (hc==144) hc+=36; if (hc==108) hc+=18; setInterval(()=>{if (!isInfo) return; hc+=18; if (hc>300) hc=0; if (hc>200)hc=306; if (hc==144) hc+=36; if (hc==108) hc+=18;
gId('heart').style.color = `hsl(${hc}, 100%, 50%)`;}, 910); gId('heart').style.color = `hsl(${hc}, 100%, 50%)`;}, 910);
function openGH() { window.open("https://github.com/Aircoookie/WLED/wiki"); } function openGH() { window.open("https://github.com/Aircoookie/WLED/wiki"); }
@ -1296,7 +1303,7 @@ function loadPalettesData(callback = null)
} }
palettesData = {}; palettesData = {};
getPalettesData(0, function() { getPalettesData(0, ()=>{
localStorage.setItem(lsKey, JSON.stringify({ localStorage.setItem(lsKey, JSON.stringify({
p: palettesData, p: palettesData,
vid: lastinfo.vid vid: lastinfo.vid
@ -1315,18 +1322,17 @@ function getPalettesData(page, callback)
"Content-type": "application/json; charset=UTF-8" "Content-type": "application/json; charset=UTF-8"
} }
}) })
.then(res => { .then((res)=>{
if (!res.ok) showErrorToast(); if (!res.ok) showErrorToast();
return res.json(); return res.json();
}) })
.then(json => { .then((json)=>{
palettesData = Object.assign({}, palettesData, json.p); palettesData = Object.assign({}, palettesData, json.p);
if (page < json.m) setTimeout(function() { getPalettesData(page + 1, callback); }, 50); if (page < json.m) setTimeout(()=>{ getPalettesData(page + 1, callback); }, 50);
else callback(); else callback();
}) })
.catch(function(error) { .catch((e)=>{
showToast(error, true); showToast(e, true);
console.log(error);
}); });
} }

2231
wled00/html_simple.h
View File

File diff suppressed because it is too large Load Diff

3107
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 2201071 #define VERSION 2201081
//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