UI JS optimisations/code reduction.
This commit is contained in:
parent
6e9a69be5c
commit
bd0f84605f
@ -60,7 +60,7 @@ var cpick = new iro.ColorPicker("#picker", {
|
|||||||
]
|
]
|
||||||
});
|
});
|
||||||
|
|
||||||
function handleVisibilityChange() {if (!d.hidden && new Date () - lastUpdate > 3000) requestJson({'v':true},false);}
|
function handleVisibilityChange() {if (!d.hidden && new Date () - lastUpdate > 3000) requestJson();}
|
||||||
function sCol(na, col) {d.documentElement.style.setProperty(na, col);}
|
function sCol(na, col) {d.documentElement.style.setProperty(na, col);}
|
||||||
function gId(c) {return d.getElementById(c);}
|
function gId(c) {return d.getElementById(c);}
|
||||||
function gEBCN(c) {return d.getElementsByClassName(c);}
|
function gEBCN(c) {return d.getElementsByClassName(c);}
|
||||||
@ -156,6 +156,7 @@ function loadBg(iUrl)
|
|||||||
let bg = document.getElementById('bg');
|
let bg = document.getElementById('bg');
|
||||||
let img = document.createElement("img");
|
let img = document.createElement("img");
|
||||||
img.src = iUrl;
|
img.src = iUrl;
|
||||||
|
/*
|
||||||
if (iUrl == "" || iUrl === "https://picsum.photos/1920/1080") {
|
if (iUrl == "" || iUrl === "https://picsum.photos/1920/1080") {
|
||||||
var today = new Date();
|
var today = new Date();
|
||||||
for (var i=0; i<hol.length; i++) {
|
for (var i=0; i<hol.length; i++) {
|
||||||
@ -166,6 +167,7 @@ function loadBg(iUrl)
|
|||||||
if (today>=hs && today<he) img.src = hol[i][4];
|
if (today>=hs && today<he) img.src = hol[i][4];
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
*/
|
||||||
img.addEventListener('load', (event) => {
|
img.addEventListener('load', (event) => {
|
||||||
var a = parseFloat(cfg.theme.alpha.bg);
|
var a = parseFloat(cfg.theme.alpha.bg);
|
||||||
if (isNaN(a)) a = 0.6;
|
if (isNaN(a)) a = 0.6;
|
||||||
@ -208,6 +210,7 @@ function onLoad()
|
|||||||
|
|
||||||
applyCfg();
|
applyCfg();
|
||||||
if (cfg.theme.bg.url=="" || cfg.theme.bg.url === "https://picsum.photos/1920/1080") {
|
if (cfg.theme.bg.url=="" || cfg.theme.bg.url === "https://picsum.photos/1920/1080") {
|
||||||
|
var iUrl = cfg.theme.bg.url;
|
||||||
fetch((loc?`http://${locip}`:'.') + "/holidays.json", {
|
fetch((loc?`http://${locip}`:'.') + "/holidays.json", {
|
||||||
method: 'get'
|
method: 'get'
|
||||||
})
|
})
|
||||||
@ -221,8 +224,16 @@ function onLoad()
|
|||||||
.catch(function(error){
|
.catch(function(error){
|
||||||
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(function(){
|
.finally(()=>{
|
||||||
loadBg(cfg.theme.bg.url);
|
var today = new Date();
|
||||||
|
for (var i=0; i<hol.length; i++) {
|
||||||
|
var yr = hol[i][0]==0 ? today.getFullYear() : hol[i][0];
|
||||||
|
var hs = new Date(yr,hol[i][1],hol[i][2]);
|
||||||
|
var he = new Date(hs);
|
||||||
|
he.setDate(he.getDate() + hol[i][3]);
|
||||||
|
if (today>=hs && today<he) iUrl = hol[i][4];
|
||||||
|
}
|
||||||
|
if (iUrl !== "") loadBg(iUrl);
|
||||||
});
|
});
|
||||||
} else
|
} else
|
||||||
loadBg(cfg.theme.bg.url);
|
loadBg(cfg.theme.bg.url);
|
||||||
@ -238,14 +249,11 @@ function onLoad()
|
|||||||
pmtLS = localStorage.getItem('wledPmt');
|
pmtLS = localStorage.getItem('wledPmt');
|
||||||
|
|
||||||
// Load initial data
|
// Load initial data
|
||||||
loadPalettes(function() {
|
loadPalettes(()=>{
|
||||||
loadPalettesData();
|
loadPalettesData();
|
||||||
loadFX(function() {
|
loadFX(()=>{
|
||||||
loadPresets(function() {
|
loadPresets(()=>{
|
||||||
makeWS();
|
loadInfo(requestJson);
|
||||||
// loadInfo(function() {
|
|
||||||
// requestJson({'v':true});
|
|
||||||
// });
|
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
@ -262,11 +270,6 @@ function onLoad()
|
|||||||
sl.addEventListener('touchstart', toggleBubble);
|
sl.addEventListener('touchstart', toggleBubble);
|
||||||
sl.addEventListener('touchend', toggleBubble);
|
sl.addEventListener('touchend', toggleBubble);
|
||||||
}
|
}
|
||||||
|
|
||||||
// Check for UI update WS handler
|
|
||||||
if (!ws || ws.readyState !== WebSocket.OPEN) {
|
|
||||||
setTimeout(function(){loadInfo(function(){requestJson({'v':true});})},250)
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
function updateTablinks(tabI)
|
function updateTablinks(tabI)
|
||||||
@ -301,9 +304,10 @@ function showToast(text, error = false)
|
|||||||
function showErrorToast()
|
function showErrorToast()
|
||||||
{
|
{
|
||||||
if (ws && ws.readyState === WebSocket.OPEN) {
|
if (ws && ws.readyState === WebSocket.OPEN) {
|
||||||
|
// if we received a timeout force WS reconnect
|
||||||
ws.close();
|
ws.close();
|
||||||
ws = null;
|
ws = null;
|
||||||
setTimeout(makeWS,500);
|
if (lastinfo.ws > -1) setTimeout(makeWS,500);
|
||||||
}
|
}
|
||||||
showToast('Connection to light failed!', true);
|
showToast('Connection to light failed!', true);
|
||||||
}
|
}
|
||||||
@ -442,16 +446,13 @@ function loadPresets(callback = null)
|
|||||||
clearErrorToast();
|
clearErrorToast();
|
||||||
pJson = json;
|
pJson = json;
|
||||||
populatePresets();
|
populatePresets();
|
||||||
reconnectWS();
|
|
||||||
// if (callback) callback();
|
|
||||||
})
|
})
|
||||||
.catch(function (error) {
|
.catch(function (error) {
|
||||||
showToast(error, true);
|
showToast(error, true);
|
||||||
console.log(error);
|
console.log(error);
|
||||||
presetError(false);
|
presetError(false);
|
||||||
//if (callback) callback();
|
|
||||||
})
|
})
|
||||||
.finally(() => {
|
.finally(()=>{
|
||||||
if (callback) setTimeout(callback,99);
|
if (callback) setTimeout(callback,99);
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
@ -471,12 +472,12 @@ function loadPalettes(callback = null)
|
|||||||
clearErrorToast();
|
clearErrorToast();
|
||||||
lJson = Object.entries(json);
|
lJson = Object.entries(json);
|
||||||
populatePalettes();
|
populatePalettes();
|
||||||
reconnectWS();
|
|
||||||
if (callback) callback();
|
|
||||||
})
|
})
|
||||||
.catch(function (error) {
|
.catch(function (error) {
|
||||||
showToast(error, true);
|
showToast(error, true);
|
||||||
presetError(false);
|
presetError(false);
|
||||||
|
})
|
||||||
|
.finally(()=>{
|
||||||
if (callback) callback();
|
if (callback) callback();
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
@ -496,11 +497,12 @@ function loadFX(callback = null)
|
|||||||
clearErrorToast();
|
clearErrorToast();
|
||||||
eJson = Object.entries(json);
|
eJson = Object.entries(json);
|
||||||
populateEffects();
|
populateEffects();
|
||||||
if (callback) callback();
|
|
||||||
})
|
})
|
||||||
.catch(function (error) {
|
.catch(function (error) {
|
||||||
showToast(error, true);
|
showToast(error, true);
|
||||||
presetError(false);
|
presetError(false);
|
||||||
|
})
|
||||||
|
.finally(()=>{
|
||||||
if (callback) callback();
|
if (callback) callback();
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
@ -597,14 +599,15 @@ function loadInfo(callback=null)
|
|||||||
maxSeg = json.leds.maxseg;
|
maxSeg = json.leds.maxseg;
|
||||||
pmt = json.fs.pmt;
|
pmt = json.fs.pmt;
|
||||||
showNodes();
|
showNodes();
|
||||||
populateInfo(json);
|
if (isInfo) populateInfo(json);
|
||||||
reconnectWS();
|
|
||||||
reqsLegal = true;
|
reqsLegal = true;
|
||||||
if (callback) callback();
|
if (!ws && lastinfo.ws > -1) setTimeout(makeWS,500);
|
||||||
})
|
})
|
||||||
.catch(function (error) {
|
.catch(function (error) {
|
||||||
showToast(error, true);
|
showToast(error, true);
|
||||||
console.log(error);
|
console.log(error);
|
||||||
|
})
|
||||||
|
.finally(()=>{
|
||||||
if (callback) callback();
|
if (callback) callback();
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
@ -793,7 +796,6 @@ function loadNodes()
|
|||||||
.then(json => {
|
.then(json => {
|
||||||
clearErrorToast();
|
clearErrorToast();
|
||||||
populateNodes(lastinfo, json);
|
populateNodes(lastinfo, json);
|
||||||
reconnectWS();
|
|
||||||
})
|
})
|
||||||
.catch(function (error) {
|
.catch(function (error) {
|
||||||
showToast(error, true);
|
showToast(error, true);
|
||||||
@ -1025,8 +1027,6 @@ function updatePA(scrollto=false)
|
|||||||
|
|
||||||
function updateUI(scrollto=false)
|
function updateUI(scrollto=false)
|
||||||
{
|
{
|
||||||
// noWS = (!ws || ws.readyState === WebSocket.CLOSED);
|
|
||||||
|
|
||||||
gId('buttonPower').className = (isOn) ? "active":"";
|
gId('buttonPower').className = (isOn) ? "active":"";
|
||||||
gId('buttonNl').className = (nlA) ? "active":"";
|
gId('buttonNl').className = (nlA) ? "active":"";
|
||||||
gId('buttonSync').className = (syncSend) ? "active":"";
|
gId('buttonSync').className = (syncSend) ? "active":"";
|
||||||
@ -1113,9 +1113,7 @@ function makeWS() {
|
|||||||
maxSeg = info.leds.maxseg;
|
maxSeg = info.leds.maxseg;
|
||||||
pmt = info.fs.pmt;
|
pmt = info.fs.pmt;
|
||||||
showNodes();
|
showNodes();
|
||||||
if (isInfo) {
|
if (isInfo) populateInfo(info);
|
||||||
populateInfo(info);
|
|
||||||
}
|
|
||||||
} else
|
} else
|
||||||
info = lastinfo;
|
info = lastinfo;
|
||||||
var s = json.state ? json.state : json;
|
var s = json.state ? json.state : json;
|
||||||
@ -1133,10 +1131,6 @@ function makeWS() {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
function reconnectWS() {// Create UI update WS handler
|
|
||||||
if (!ws && lastinfo.ws > -1) setTimeout(makeWS,500);
|
|
||||||
}
|
|
||||||
|
|
||||||
function readState(s,command=false)
|
function readState(s,command=false)
|
||||||
{
|
{
|
||||||
if (!s) return false;
|
if (!s) return false;
|
||||||
@ -1221,7 +1215,7 @@ function readState(s,command=false)
|
|||||||
var jsonTimeout;
|
var jsonTimeout;
|
||||||
var reqsLegal = false;
|
var reqsLegal = false;
|
||||||
|
|
||||||
function requestJson(command)
|
function requestJson(command=null)
|
||||||
{
|
{
|
||||||
gId('connind').style.backgroundColor = "#a90";
|
gId('connind').style.backgroundColor = "#a90";
|
||||||
if (command && !reqsLegal) return; //stop post requests from chrome onchange event on page restore
|
if (command && !reqsLegal) return; //stop post requests from chrome onchange event on page restore
|
||||||
@ -1231,8 +1225,7 @@ function requestJson(command)
|
|||||||
var url = (loc?`http://${locip}`:'') + '/json/state';
|
var url = (loc?`http://${locip}`:'') + '/json/state';
|
||||||
var useWs = (ws && ws.readyState === WebSocket.OPEN);
|
var useWs = (ws && ws.readyState === WebSocket.OPEN);
|
||||||
var type = command ? 'post':'get';
|
var type = command ? 'post':'get';
|
||||||
// if (command)
|
|
||||||
// {
|
|
||||||
command.v = true; // force complete /json/si API response
|
command.v = true; // force complete /json/si API response
|
||||||
command.time = Math.floor(Date.now() / 1000);
|
command.time = Math.floor(Date.now() / 1000);
|
||||||
var t = d.getElementById('tt');
|
var t = d.getElementById('tt');
|
||||||
@ -1242,10 +1235,8 @@ function requestJson(command)
|
|||||||
}
|
}
|
||||||
req = JSON.stringify(command);
|
req = JSON.stringify(command);
|
||||||
if (req.length > 1000) useWs = false; //do not send very long requests over websocket
|
if (req.length > 1000) useWs = false; //do not send very long requests over websocket
|
||||||
// }
|
|
||||||
|
|
||||||
if (useWs) {
|
if (useWs) {
|
||||||
|
|
||||||
ws.send(req?req:'{"v":true}');
|
ws.send(req?req:'{"v":true}');
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
@ -1272,7 +1263,6 @@ function requestJson(command)
|
|||||||
var s = json.state ? json.state : json;
|
var s = json.state ? json.state : json;
|
||||||
readState(s);
|
readState(s);
|
||||||
reqsLegal = true;
|
reqsLegal = true;
|
||||||
reconnectWS();
|
|
||||||
})
|
})
|
||||||
.catch(function (error) {
|
.catch(function (error) {
|
||||||
showToast(error, true);
|
showToast(error, true);
|
||||||
|
1652
wled00/html_ui.h
1652
wled00/html_ui.h
File diff suppressed because it is too large
Load Diff
@ -8,7 +8,7 @@
|
|||||||
*/
|
*/
|
||||||
|
|
||||||
// version code in format yymmddb (b = daily build)
|
// version code in format yymmddb (b = daily build)
|
||||||
#define VERSION 2107281
|
#define VERSION 2107291
|
||||||
|
|
||||||
//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
|
||||||
|
Loading…
Reference in New Issue
Block a user