Optimised requestJson()

CSS fix.
This commit is contained in:
Blaz Kristan 2021-07-19 19:00:21 +02:00
parent 31e34d6f19
commit 0511a62ca1
6 changed files with 1810 additions and 1814 deletions

View File

@ -1007,12 +1007,12 @@ input[type=number]::-webkit-outer-spin-button {
} }
#pallist .lstI.selected { #pallist .lstI.selected {
top: 27px; top: 80px;
bottom: -11px; bottom: 0;
} }
#pallist .lstI.sticky { #pallist .lstI.sticky {
top: -11px; top: 40px;
} }
.lstI.sticky { .lstI.sticky {

View File

@ -243,7 +243,7 @@ function onLoad()
loadFX(function() { loadFX(function() {
loadPresets(function() { loadPresets(function() {
loadInfo(function() { loadInfo(function() {
requestJson({'v':true}, false); requestJson({'v':true});
}); });
}); });
}); });
@ -508,8 +508,6 @@ function populateQL()
} }
} }
if (it != 0) cn+= '<br>'; if (it != 0) cn+= '<br>';
cn += `<p class="labels">All presets</p>`;
} }
gId('pql').innerHTML = cn; gId('pql').innerHTML = cn;
} }
@ -519,7 +517,7 @@ function populatePresets(fromls)
if (fromls) pJson = JSON.parse(localStorage.getItem("wledP")); if (fromls) pJson = JSON.parse(localStorage.getItem("wledP"));
if (!pJson) {pJson={};return}; if (!pJson) {pJson={};return};
delete pJson["0"]; delete pJson["0"];
var cn = ""; var cn = `<p class="labels">All presets</p>`;
var arr = Object.entries(pJson); var arr = Object.entries(pJson);
arr.sort(cmpP); arr.sort(cmpP);
pQL = []; pQL = [];
@ -1105,7 +1103,7 @@ function makeWS() {
} }
function reconnectWS() {// Create UI update WS handler function reconnectWS() {// Create UI update WS handler
if (!ws && lastinfo.ws > -1) setTimeout(makeWS,1000); if (!ws && lastinfo.ws > -1) setTimeout(makeWS,500);
} }
function readState(s,command=false) function readState(s,command=false)
@ -1188,20 +1186,19 @@ function readState(s,command=false)
var jsonTimeout; var jsonTimeout;
var reqsLegal = false; var reqsLegal = false;
function requestJson(command, rinfo = true) function requestJson(command)
{ {
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
lastUpdate = new Date(); lastUpdate = new Date();
if (!jsonTimeout) jsonTimeout = setTimeout(showErrorToast, 3000); if (!jsonTimeout) jsonTimeout = setTimeout(showErrorToast, 3000);
if (!command) command = {'v':true};
var req = null; var req = null;
var url = (loc?`http://${locip}`:'') + (rinfo ? '/json/si': (command ? '/json/state':'/json/si')); var url = (loc?`http://${locip}`:'') + '/json/state';
var useWs = (ws && ws.readyState === WebSocket.OPEN);
var useWs = ((command || rinfo) && ws && ws.readyState === WebSocket.OPEN);
var type = command ? 'post':'get'; var type = command ? 'post':'get';
if (command) // 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');
@ -1211,7 +1208,7 @@ function requestJson(command, rinfo = true)
} }
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}');
@ -1251,7 +1248,7 @@ function togglePower()
{ {
isOn = !isOn; isOn = !isOn;
var obj = {"on": isOn}; var obj = {"on": isOn};
requestJson(obj, false); requestJson(obj);
} }
function toggleNl() function toggleNl()
@ -1264,7 +1261,7 @@ function toggleNl()
showToast('Timer deactivated.'); showToast('Timer deactivated.');
} }
var obj = {"nl": {"on": nlA}}; var obj = {"nl": {"on": nlA}};
requestJson(obj, false); requestJson(obj);
} }
function toggleSync() function toggleSync()
@ -1274,7 +1271,7 @@ function toggleSync()
else showToast('This light and other lights in the network will no longer sync.'); else showToast('This light and other lights in the network will no longer sync.');
var obj = {"udpn": {"send": syncSend}}; var obj = {"udpn": {"send": syncSend}};
if (syncTglRecv) obj.udpn.recv = syncSend; if (syncTglRecv) obj.udpn.recv = syncSend;
requestJson(obj, false); requestJson(obj);
} }
function toggleLiveview() function toggleLiveview()
@ -1545,14 +1542,14 @@ function selSegEx(s)
{ {
var obj = {"seg":[]}; var obj = {"seg":[]};
for (let i=0; i<=lSeg; i++) obj.seg.push({"sel":(i==s)?true:false}); for (let i=0; i<=lSeg; i++) obj.seg.push({"sel":(i==s)?true:false});
requestJson(obj, false); requestJson(obj);
} }
function selSeg(s) function selSeg(s)
{ {
var sel = gId(`seg${s}sel`).checked; var sel = gId(`seg${s}sel`).checked;
var obj = {"seg": {"id": s, "sel": sel}}; var obj = {"seg": {"id": s, "sel": sel}};
requestJson(obj, false); requestJson(obj);
} }
function setSeg(s) function setSeg(s)
@ -1571,7 +1568,7 @@ function setSeg(s)
obj.seg.spc = spc; obj.seg.spc = spc;
obj.seg.of = ofs; obj.seg.of = ofs;
} }
requestJson(obj, false); requestJson(obj);
} }
function delSeg(s) function delSeg(s)
@ -1583,33 +1580,33 @@ function delSeg(s)
expanded[s] = false; expanded[s] = false;
segCount--; segCount--;
var obj = {"seg": {"id": s, "stop": 0}}; var obj = {"seg": {"id": s, "stop": 0}};
requestJson(obj, false); requestJson(obj);
} }
function setRev(s) function setRev(s)
{ {
var rev = gId(`seg${s}rev`).checked; var rev = gId(`seg${s}rev`).checked;
var obj = {"seg": {"id": s, "rev": rev}}; var obj = {"seg": {"id": s, "rev": rev}};
requestJson(obj, false); requestJson(obj);
} }
function setMi(s) function setMi(s)
{ {
var mi = gId(`seg${s}mi`).checked; var mi = gId(`seg${s}mi`).checked;
var obj = {"seg": {"id": s, "mi": mi}}; var obj = {"seg": {"id": s, "mi": mi}};
requestJson(obj, false); requestJson(obj);
} }
function setSegPwr(s) function setSegPwr(s)
{ {
var obj = {"seg": {"id": s, "on": !powered[s]}}; var obj = {"seg": {"id": s, "on": !powered[s]}};
requestJson(obj, false); requestJson(obj);
} }
function setSegBri(s) function setSegBri(s)
{ {
var obj = {"seg": {"id": s, "bri": parseInt(gId(`seg${s}bri`).value)}}; var obj = {"seg": {"id": s, "bri": parseInt(gId(`seg${s}bri`).value)}};
requestJson(obj, false); requestJson(obj);
} }
function setX(ind = null) function setX(ind = null)
@ -1625,7 +1622,7 @@ function setX(ind = null)
d.querySelector(`#fxlist .lstI[data-id="${ind}"]`).classList.add('selected'); d.querySelector(`#fxlist .lstI[data-id="${ind}"]`).classList.add('selected');
var obj = {"seg": {"fx": parseInt(ind)}}; var obj = {"seg": {"fx": parseInt(ind)}};
requestJson(obj, false); requestJson(obj);
} }
function setPalette(paletteId = null) function setPalette(paletteId = null)
@ -1641,38 +1638,38 @@ function setPalette(paletteId = null)
} }
d.querySelector(`#pallist .lstI[data-id="${paletteId}"]`).classList.add('selected'); d.querySelector(`#pallist .lstI[data-id="${paletteId}"]`).classList.add('selected');
var obj = {"seg": {"pal": paletteId}}; var obj = {"seg": {"pal": paletteId}};
requestJson(obj, false); requestJson(obj);
} }
function setBri() function setBri()
{ {
var obj = {"bri": parseInt(gId('sliderBri').value)}; var obj = {"bri": parseInt(gId('sliderBri').value)};
requestJson(obj, false); requestJson(obj);
} }
function setSpeed() function setSpeed()
{ {
var obj = {"seg": {"sx": parseInt(gId('sliderSpeed').value)}}; var obj = {"seg": {"sx": parseInt(gId('sliderSpeed').value)}};
requestJson(obj, false); requestJson(obj);
} }
function setIntensity() function setIntensity()
{ {
var obj = {"seg": {"ix": parseInt(gId('sliderIntensity').value)}}; var obj = {"seg": {"ix": parseInt(gId('sliderIntensity').value)}};
requestJson(obj, false); requestJson(obj);
} }
function setLor(i) function setLor(i)
{ {
var obj = {"lor": i}; var obj = {"lor": i};
requestJson(obj, false); requestJson(obj);
} }
function setPreset(i) function setPreset(i)
{ {
var obj = {"ps": i}; var obj = {"ps": i};
showToast("Loading preset " + pName(i) +" (" + i + ")"); showToast("Loading preset " + pName(i) +" (" + i + ")");
requestJson(obj, false); requestJson(obj);
} }
function saveP(i,pl) function saveP(i,pl)
@ -1715,7 +1712,7 @@ function saveP(i,pl)
if (pQN.length > 0) obj.ql = pQN; if (pQN.length > 0) obj.ql = pQN;
showToast("Saving " + pN +" (" + pI + ")"); showToast("Saving " + pN +" (" + pI + ")");
requestJson(obj, false); requestJson(obj);
if (obj.o) { if (obj.o) {
pJson[pI] = obj; pJson[pI] = obj;
delete pJson[pI].psave; delete pJson[pI].psave;
@ -1742,18 +1739,18 @@ function testPl(i,bt) {
bt.innerHTML = "<i class='icons btn-icon'>&#xe38f;</i>Stop"; bt.innerHTML = "<i class='icons btn-icon'>&#xe38f;</i>Stop";
var obj = {}; var obj = {};
obj.playlist = plJson[i]; obj.playlist = plJson[i];
requestJson(obj, false); requestJson(obj);
} }
function stopPl() { function stopPl() {
requestJson({playlist:{}}, false) requestJson({playlist:{}})
} }
function delP(i) { function delP(i) {
var bt = gId(`p${i}del`); var bt = gId(`p${i}del`);
if (bt.dataset.cnf == 1) { if (bt.dataset.cnf == 1) {
var obj = {"pdel": i}; var obj = {"pdel": i};
requestJson(obj, false); requestJson(obj);
delete pJson[i]; delete pJson[i];
populatePresets(); populatePresets();
} else { } else {
@ -1862,7 +1859,7 @@ function setColor(sr)
} }
updateHex(); updateHex();
updateRgb(); updateRgb();
requestJson(obj, false); requestJson(obj);
} }
var hc = 0; var hc = 0;
@ -1897,7 +1894,7 @@ function rSegs()
bt.innerHTML = "Reset segments"; bt.innerHTML = "Reset segments";
var obj = {"seg":[{"start":0,"stop":ledCount,"sel":true}]}; var obj = {"seg":[{"start":0,"stop":ledCount,"sel":true}]};
for (let i=1; i<=lSeg; i++) obj.seg.push({"stop":0}); for (let i=1; i<=lSeg; i++) obj.seg.push({"stop":0});
requestJson(obj, false); requestJson(obj);
} }
function loadPalettesData(callback = null) function loadPalettesData(callback = null)
@ -2012,17 +2009,11 @@ function expand(i,a)
if (expanded[i]) gId(i<100?'segutil':'putil').classList.remove("staytop"); if (expanded[i]) gId(i<100?'segutil':'putil').classList.remove("staytop");
else gId(i<100?'segutil':'putil').classList.add("staytop"); else gId(i<100?'segutil':'putil').classList.add("staytop");
if (expanded[i]) seg.parentElement.scrollIntoView({ if (i >= 100) {
behavior: 'smooth',
block: 'start',
});
if (i < 100) return; //no preset, we are done
var p = i-100; var p = i-100;
gId(`p${p}o`).style.background = (expanded[i] || p != currentPreset)?"var(--c-2)":"var(--c-6)"; gId(`p${p}o`).style.background = (expanded[i] || p != currentPreset)?"var(--c-2)":"var(--c-6)";
if (seg.innerHTML !== "") return;
if (seg.innerHTML === "") {
if (isPlaylist(p)) { if (isPlaylist(p)) {
plJson[p] = pJson[p].playlist; plJson[p] = pJson[p].playlist;
//make sure all keys are present in plJson[p] //make sure all keys are present in plJson[p]
@ -2042,6 +2033,13 @@ function expand(i,a)
if (papi.indexOf("Please") == 0) gId(`p${p}cstgl`).checked = true; if (papi.indexOf("Please") == 0) gId(`p${p}cstgl`).checked = true;
tglCs(p); tglCs(p);
} }
}
seg.parentElement.scrollIntoView({
behavior: 'smooth',
block: (expanded[i]?'start':'center'),
});
}
function unfocusSliders() function unfocusSliders()
{ {

View File

@ -78,7 +78,7 @@
<div id="presets">Restore presets:<input type="file" name="data" accept=".json"> <input type="button" value="Upload" onclick="uploadFile(d.Sf.data,'/presets.json');"><br></div> <div id="presets">Restore presets:<input type="file" name="data" accept=".json"> <input type="button" value="Upload" onclick="uploadFile(d.Sf.data,'/presets.json');"><br></div>
<a class="btn" href="/cfg.json?download" target="download-frame">Backup configuration</a><br> <a class="btn" href="/cfg.json?download" target="download-frame">Backup configuration</a><br>
<div id="presets">Restore configuration:<input type="file" name="data2" accept=".json"> <input type="button" value="Upload" onclick="uploadFile(d.Sf.data2,'/cfg.json');"><br></div> <div id="presets">Restore configuration:<input type="file" name="data2" accept=".json"> <input type="button" value="Upload" onclick="uploadFile(d.Sf.data2,'/cfg.json');"><br></div>
<div style="color: #f21;">WARNING!<br>Restoring presets/configuration will OVERWRITE current presets/configuration.<br> <div style="color: #fa0;">WARNING!<br>Restoring presets/configuration will OVERWRITE current presets/configuration.<br>
Incorrect configuration may require factory reset or re-flashing of ESP.</div> Incorrect configuration may require factory reset or re-flashing of ESP.</div>
<hr> <hr>
<h3>Software Update</h3> <h3>Software Update</h3>

View File

@ -401,7 +401,7 @@ onclick='uploadFile(d.Sf.data,"/presets.json")'><br></div><a class="btn"
href="/cfg.json?download" target="download-frame">Backup configuration</a><br> href="/cfg.json?download" target="download-frame">Backup configuration</a><br>
<div id="presets">Restore configuration:<input type="file" name="data2" <div id="presets">Restore configuration:<input type="file" name="data2"
accept=".json"> <input type="button" value="Upload" accept=".json"> <input type="button" value="Upload"
onclick='uploadFile(d.Sf.data2,"/cfg.json")'><br></div><div style="color:#f21"> onclick='uploadFile(d.Sf.data2,"/cfg.json")'><br></div><div style="color:#fa0">
WARNING!<br> WARNING!<br>
Restoring presets/configuration will OVERWRITE current presets/configuration. Restoring presets/configuration will OVERWRITE current presets/configuration.
<br>Incorrect configuration may require factory reset or re-flashing of ESP. <br>Incorrect configuration may require factory reset or re-flashing of ESP.

File diff suppressed because it is too large Load Diff

View File

@ -8,7 +8,7 @@
*/ */
// version code in format yymmddb (b = daily build) // version code in format yymmddb (b = daily build)
#define VERSION 2107181 #define VERSION 2107191
//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