From 9ac7acf8b3254c323072a3bf5f08b82975f884ef Mon Sep 17 00:00:00 2001 From: Blaz Kristan Date: Sun, 6 Jun 2021 20:36:19 +0200 Subject: [PATCH] Added skinning capability. --- wled00/data/index.css | 2 - wled00/data/index.js | 51 +- wled00/data/settings_dmx.htm | 5 +- wled00/data/settings_leds.htm | 11 +- wled00/data/settings_sec.htm | 1 + wled00/data/settings_sync.htm | 4 +- wled00/data/settings_time.htm | 5 +- wled00/data/settings_ui.htm | 30 +- wled00/data/settings_um.htm | 5 +- wled00/data/settings_wifi.htm | 5 +- wled00/data/style.css | 2 +- wled00/html_settings.h | 263 +++--- wled00/html_ui.h | 1420 +++++++++++++++++---------------- wled00/wled.h | 2 +- 14 files changed, 908 insertions(+), 898 deletions(-) diff --git a/wled00/data/index.css b/wled00/data/index.css index ab8d7b0bf..69d54174a 100644 --- a/wled00/data/index.css +++ b/wled00/data/index.css @@ -1124,5 +1124,3 @@ input[type="text"].fnd:not(:placeholder-shown) { display: none; } } - -@import 'skin.css'; diff --git a/wled00/data/index.js b/wled00/data/index.js index 76cda4318..f8db561d2 100644 --- a/wled00/data/index.js +++ b/wled00/data/index.js @@ -173,6 +173,21 @@ function loadBg(iUrl) }); } +function loadSkinCSS(cId) +{ + if (!gId(cId)) // chack if element exists + { + var h = document.getElementsByTagName('head')[0]; + var l = document.createElement('link'); + l.id = cId; + l.rel = 'stylesheet'; + l.type = 'text/css'; + l.href = '/skin.css'; + l.media = 'all'; + h.appendChild(l); + } +} + function onLoad() { if (window.location.protocol == "file:") { @@ -191,6 +206,7 @@ function onLoad() applyCfg(); loadBg(cfg.theme.bg.url); + loadSkinCSS('skinCss'); var cd = gId('csl').children; for (var i = 0; i < cd.length; i++) cd[i].style.backgroundColor = "rgb(0, 0, 0)"; @@ -263,7 +279,6 @@ function showToast(text, error = false) x.className = error ? "error":"show"; clearTimeout(timeout); x.style.animation = 'none'; -// x.style.animation = null; timeout = setTimeout(function(){ x.className = x.className.replace("show", ""); }, 2900); } @@ -431,7 +446,6 @@ function loadFX(callback = null) .then(json => { eJson = Object.entries(json); populateEffects(); -// updateUI(); if (callback) callback(); }) .catch(function (error) { @@ -985,15 +999,6 @@ function updateSelectedPalette(scrollto=false) var selectedPalette = parent.querySelector(`.lstI[data-id="${selectedPal}"]`); if (selectedPalette) parent.querySelector(`.lstI[data-id="${selectedPal}"]`).classList.add('selected'); - -/* - if (scrollto && selectedPalette) { - selectedPalette.scrollIntoView({ - behavior: 'smooth', - block: 'center', - }); - } -*/ } function updateSelectedFx(scrollto=false) @@ -1008,14 +1013,6 @@ function updateSelectedFx(scrollto=false) var selectedEffect = parent.querySelector(`.lstI[data-id="${selectedFx}"]`); if (selectedEffect) selectedEffect.classList.add('selected'); -/* - if (scrollto && selectedEffect) { - selectedEffect.scrollIntoView({ - behavior: 'smooth', - block: 'center', - }); - } -*/ } function displayRover(i,s) @@ -1135,22 +1132,6 @@ function requestJson(command, rinfo = true, verbose = true, callback = null) return; } var s = json.state ? json.state : json; -/* - if (!command || rinfo) { -// if (!rinfo) { -// pmt = json.info.fs.pmt; -// populatePresets(true); -// pmtLast = pmt; -// } - var info = json.info; - pmt = info.fs.pmt; -// if (!command && pmt != pmtLast) setTimeout(loadPresets,99); - pmtLast = pmt; - lastinfo = info; -// if (isInfo) populateInfo(info); -// if (!rinfo) loadPalettesData(); - } -*/ if (!handleJson(s)) { showToast('No Segments!', true); updateUI(false); diff --git a/wled00/data/settings_dmx.htm b/wled00/data/settings_dmx.htm index 1ab5e3910..8b9efab49 100644 --- a/wled00/data/settings_dmx.htm +++ b/wled00/data/settings_dmx.htm @@ -31,9 +31,8 @@ function mMap(){ function S(){GCH(15);GetV();mMap();}function H(){window.open("https://github.com/Aircoookie/WLED/wiki/DMX");}function B(){window.history.back();} function GetV(){} - + +
diff --git a/wled00/data/settings_leds.htm b/wled00/data/settings_leds.htm index 5f8942dc9..1869850ed 100644 --- a/wled00/data/settings_leds.htm +++ b/wled00/data/settings_leds.htm @@ -325,13 +325,13 @@ Reverse (rotated 180°): c += ` ×
`; gId("btns").innerHTML = c; } - function uploadFile() { + function uploadFile(name) { var req = new XMLHttpRequest(); req.addEventListener('load', function(){showToast(this.responseText)}); req.addEventListener('error', function(e){showToast(e.stack,true);}); req.open("POST", "/upload"); var formData = new FormData(); - formData.append("data", d.Sf.data.files[0], "/ir.json"); + formData.append("data", d.Sf.data.files[0], name); req.send(formData); d.Sf.data.value = ''; return false; @@ -342,9 +342,8 @@ Reverse (rotated 180°): //maxM=5000;maxPB=1536;d.um_p=[1,6,7,8,9,10,11];addLEDs(3);d.Sf.LC.value=250;addLEDs(1);d.Sf.L00.value=2;d.Sf.L10.value=0;d.Sf.LC0.value=250;d.Sf.LT0.value=22;d.Sf.CO0.value=0;d.Sf.LS0.value=0;d.Sf.LS0.checked=0;d.Sf.MA.value=5400;d.Sf.LA.value=55;d.getElementsByClassName("pow")[0].innerHTML="350mA";d.Sf.CA.value=40;d.Sf.AW.value=3;d.Sf.BO.checked=0;d.Sf.BP.value=3;d.Sf.GB.checked=0;d.Sf.GC.checked=1;d.Sf.TF.checked=1;d.Sf.TD.value=700;d.Sf.PF.checked=0;d.Sf.BF.value=64;d.Sf.TB.value=0;d.Sf.TL.value=60;d.Sf.TW.value=1;d.Sf.PB.selectedIndex=0;d.Sf.RL.value=12;d.Sf.RM.checked=0;addBtn(0,0,2);addBtn(1,3,4);addBtn(2,-1,0);d.Sf.IR.value=-1; } - + + @@ -405,7 +404,7 @@ Reverse (rotated 180°):  ×
- +
IR info
Relay pin: invert  ×
diff --git a/wled00/data/settings_sec.htm b/wled00/data/settings_sec.htm index df537086a..211fa4671 100644 --- a/wled00/data/settings_sec.htm +++ b/wled00/data/settings_sec.htm @@ -25,6 +25,7 @@ + diff --git a/wled00/data/settings_sync.htm b/wled00/data/settings_sync.htm index 3e1be1791..cc57f6b97 100644 --- a/wled00/data/settings_sync.htm +++ b/wled00/data/settings_sync.htm @@ -9,7 +9,9 @@ function SetVal(){switch(parseInt(d.Sf.EP.value)){case 5568: d.Sf.DI.value = 556 function S(){GetV();SetVal();} function GetV(){var d=document;} - + + +
diff --git a/wled00/data/settings_time.htm b/wled00/data/settings_time.htm index b922c17bf..d53d24435 100644 --- a/wled00/data/settings_time.htm +++ b/wled00/data/settings_time.htm @@ -95,9 +95,8 @@ //values injected by server while sending HTML } - + + diff --git a/wled00/data/settings_ui.htm b/wled00/data/settings_ui.htm index 0dcadb155..bf7a0149a 100644 --- a/wled00/data/settings_ui.htm +++ b/wled00/data/settings_ui.htm @@ -54,7 +54,16 @@ } tar[pList[len-1]] = val; } - + var timeout; + function showToast(text, error = false) + { + var x = gId("toast"); + x.innerHTML = text; + x.className = error ? "error":"show"; + clearTimeout(timeout); + x.style.animation = 'none'; + timeout = setTimeout(function(){ x.className = x.className.replace("show", ""); }, 2900); + } function addRec(s, path = "", label = null) { var str = ""; @@ -180,12 +189,21 @@ gId("theme_bg_random").checked = false; } } - + function uploadFile(name) { + var req = new XMLHttpRequest(); + req.addEventListener('load', function(){showToast(this.responseText)}); + req.addEventListener('error', function(e){showToast(e.stack,true);}); + req.open("POST", "/upload"); + var formData = new FormData(); + formData.append("data", d.Sf.data.files[0], name); + req.send(formData); + d.Sf.data.value = ''; + return false; + } function GetV(){var d=document;} - + + @@ -217,6 +235,8 @@ BG image URL:
Random BG image:
+
Skinning CSS:
+
diff --git a/wled00/data/settings_um.htm b/wled00/data/settings_um.htm index 58e22e0f1..5ba136057 100644 --- a/wled00/data/settings_um.htm +++ b/wled00/data/settings_um.htm @@ -118,9 +118,8 @@ } function GetV() {} - + + diff --git a/wled00/data/settings_wifi.htm b/wled00/data/settings_wifi.htm index 3a8709861..67fb058a0 100644 --- a/wled00/data/settings_wifi.htm +++ b/wled00/data/settings_wifi.htm @@ -18,9 +18,8 @@ //values injected by server while sending HTML } - + +
diff --git a/wled00/data/style.css b/wled00/data/style.css index d1e4aaccf..2a231f4f1 100644 --- a/wled00/data/style.css +++ b/wled00/data/style.css @@ -3,7 +3,7 @@ body { text-align: center; background: #222; color: #fff; - line-height: 200%; + line-height: 200%%; /* %% because of AsyncWebServer */ margin: 0; } hr { diff --git a/wled00/html_settings.h b/wled00/html_settings.h index 6b511d514..6474abb6b 100644 --- a/wled00/html_settings.h +++ b/wled00/html_settings.h @@ -6,7 +6,7 @@ */ // Autogenerated from wled00/data/style.css, do not edit!! -const char PAGE_settingsCss[] PROGMEM = R"=====()====="; +const char PAGE_settingsCss[] PROGMEM = R"=====()====="; // Autogenerated from wled00/data/settings.htm, do not edit!! @@ -31,37 +31,37 @@ action="/settings/sec">
const char PAGE_settings_wifi[] PROGMEM = R"=====(WiFi Settings