Add option to load custom CSS and custom holidays.json

wled00/data/index.js

@@ -26,7 +26,8 @@ var lastinfo = {};
 var ws;
 var cfg = {
 	theme:{base:"dark", bg:{url:""}, alpha:{bg:0.6,tab:0.8}, color:{bg:""}},
-	comp :{colors:{picker: true, rgb: false, quick: true, hex: false}, labels:true, pcmbot:false, pid:true, seglen:false}
+	comp :{colors:{picker: true, rgb: false, quick: true, hex: false},
+          labels:true, pcmbot:false, pid:true, seglen:false, css:true, hdays:false}
 };
 var hol = [
 	[0,11,24,4,"https://aircoookie.github.io/xmas.png"], // christmas
@@ -169,6 +170,19 @@ function loadBg(iUrl)
 	});
 }
 
+function getHdayBg()
+{
+	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) return hol[i][4];
+	}
+	return "";
+}
+
 function loadSkinCSS(cId)
 {
 	if (!gId(cId))	// check if element exists
@@ -201,35 +215,33 @@ function onLoad()
 	resetPUtil();
 
 	applyCfg();
-	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", {
-			method: 'get'
-		})
-		.then(res => {
-			return res.json();
-		})
-		.then(json => {
-			if (Array.isArray(json)) hol = json;
-			//TODO: do some parsing first
-		})
-		.catch(function(error){
-			console.log("holidays.json does not contain array of holidays. Defaults loaded.");
-		})
-		.finally(()=>{
-			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);
-		});
+	var iUrl = cfg.theme.bg.url;
+	if (iUrl==="" || iUrl==="https://picsum.photos/1920/1080") {
+		if (cfg.comp.hdays) {
+			fetch((loc?`http://${locip}`:'.') + "/holidays.json", {
+				method: 'get'
+			})
+			.then(res => {
+				return res.json();
+			})
+			.then(json => {
+				if (Array.isArray(json)) hol = json;
+				//TODO: do some parsing first
+			})
+			.catch(function(error){
+				console.log("holidays.json does not contain array of holidays. Defaults loaded.");
+			})
+			.finally(()=>{
+				iUrl = getHdayBg();
+				if (iUrl!=="") loadBg(iUrl);
+			});
+		} else {
+			iUrl = getHdayBg();
+			if (iUrl!=="") loadBg(iUrl);
+		}
 	} else
-		loadBg(cfg.theme.bg.url);
-	loadSkinCSS('skinCss');
+		loadBg(iUrl);
+	if (cfg.comp.css) loadSkinCSS('skinCss');
 
 	var cd = gId('csl').children;
 	for (var i = 0; i < cd.length; i++) cd[i].style.backgroundColor = "rgb(0, 0, 0)";
@@ -1210,7 +1222,7 @@ function requestJson(command=null)
 	command.v = true; // force complete /json/si API response
 	command.time = Math.floor(Date.now() / 1000);
 	var t = d.getElementById('tt');
-	if (command.transition===null && t.validity.valid) {
+	if (t.validity.valid && command.transition==null) {
 		var tn = parseInt(t.value*10);
 		if (tn != tr) command.transition = tn;
 	}

wled00/data/settings_ui.htm

@@ -20,7 +20,9 @@
 					},
 				"pcmbot": "Show bottom tab bar in PC mode",
 				"pid": "Show preset IDs",
-				"seglen": "Use LED Count instead of Stop LED on segments"
+				"seglen": "Set segment length instead of stop LED",
+				"css": "Enable custom CSS",
+		        "hdays": "Enable custom Holidays list"
 			},
 			"theme":{
 				"alpha": {
@@ -237,7 +239,9 @@
 		<span class="l">BG image URL</span>: <input id="theme_bg_url" class="agi" oninput="checkRandomBg()"><br>
 		<span class="l">Random BG image</span>: <input type="checkbox" id="theme_bg_random" class="agi cb" onchange="setRandomBg()"><br>
 		<input id="theme_base" class="agi" style="display:none">
-		<div id="skin">Skinning CSS: <input type="file" name="data" accept=".css"> <input type="button" value="Upload" onclick="uploadFile(d.Sf.data,'/skin.css');"><br></div>
+		<span class="l"></span>: <input type="checkbox" id="comp_css" class="agi cb"><br>
+		<div id="skin">Custom CSS: <input type="file" name="data" accept=".css"> <input type="button" value="Upload" onclick="uploadFile(d.Sf.data,'/skin.css');"><br></div>
+		<span class="l"></span>: <input type="checkbox" id="comp_hdays" class="agi cb"><br>
 		<div id="holidays">Holidays: <input type="file" name="data2" accept=".json"> <input type="button" value="Upload" onclick="uploadFile(d.Sf.data2,'/holidays.json');"><br></div>
 		<div id="toast"></div>
 		<hr><button type="button" onclick="B()">Back</button><button type="button" onclick="Save()">Save</button>

wled00/html_settings.h

@@ -192,7 +192,7 @@ const char PAGE_settings_dmx[] PROGMEM = R"=====()=====";
 // Autogenerated from wled00/data/settings_ui.htm, do not edit!!
 const char PAGE_settings_ui[] PROGMEM = R"=====(<!DOCTYPE html><html><head lang="en"><meta charset="utf-8"><meta 
 name="viewport" content="width=500"><title>UI Settings</title><script>
-var initial_ds,initial_st,initial_su,timeout,d=document,sett=null,l={comp:{labels:"Show button labels",colors:{LABEL:"Color selection methods",picker:"Color Wheel",rgb:"RGB sliders",quick:"Quick color selectors",hex:"HEX color input"},pcmbot:"Show bottom tab bar in PC mode",pid:"Show preset IDs",seglen:"Use LED Count instead of Stop LED on segments"},theme:{alpha:{bg:"Background opacity",tab:"Button opacity"},bg:{url:"BG image URL",random:"Random BG image"},color:{bg:"BG HEX color"}}};function gId(e){return d.getElementById(e)}function isObject(e){return e&&"object"==typeof e&&!Array.isArray(e)}function set(e,t,i){for(var n=t,o=e.split("_"),s=o.length,a=0;a<s-1;a++){var l=o[a];n[l]||(n[l]={}),n=n[l]}n[o[s-1]]=i}function showToast(e,t=!1){var i=gId("toast");i.innerHTML=e,i.className=t?"error":"show",clearTimeout(timeout),i.style.animation="none",timeout=setTimeout((function(){i.className=i.className.replace("show","")}),2900)}function addRec(e,t="",n=null){var o="";for(i in e){var s=t+(t?"_":"")+i;if(isObject(e[i]))n&&n[i]&&n[i].LABEL&&(o+=`<h3>${n[i].LABEL}</h3>`),o+=addRec(e[i],s,n?n[i]:null);else{var a=s;if(n&&n[i]?a=n[i]:e[i+"LABEL"]&&(a=e[i+"LABEL"]),i.indexOf("LABEL")>0)continue;var l=typeof e[i];gId(s)?("boolean"===l?gId(s).checked=e[i]:gId(s).value=e[i],gId(s).previousElementSibling.matches(".l")&&(gId(s).previousElementSibling.innerHTML=a)):"boolean"===l?o+=`${a}: <input class="agi cb" type="checkbox" id=${s} ${e[i]?"checked":""}><br>`:"number"===l?o+=`${a}: <input class="agi" type="number" id=${s} value=${e[i]}><br>`:"string"===l&&(o+=`${a}:<br><input class="agi" id=${s} value=${e[i]}><br>`)}}return o}function genForm(e){var t;t=addRec(e,"",l),gId("gen").innerHTML=t}function GetLS(){(sett=localStorage.getItem("wledUiCfg"))||(gId("lserr").style.display="inline");try{sett=JSON.parse(sett)}catch(e){sett={},gId("lserr").style.display="inline",gId("lserr").innerHTML="&#9888; Settings JSON parsing failed. ("+e+")"}genForm(sett),gId("dm").checked="light"===gId("theme_base").value}function SetLS(){for(var e=d.querySelectorAll(".agi"),t=0;t<e.length;t++){var i=e[t],n=i.classList.contains("cb")?i.checked:i.value;set(i.id,sett,n),console.log(`${i.id} set to ${n}`)}try{localStorage.setItem("wledUiCfg",JSON.stringify(sett)),gId("lssuc").style.display="inline"}catch(i){gId("lssuc").style.display="none",gId("lserr").style.display="inline",gId("lserr").innerHTML="&#9888; Settings JSON saving failed. ("+i+")"}}function Save(){SetLS(),d.Sf.DS.value==initial_ds&&d.Sf.ST.checked==initial_st&&d.Sf.SU.checked==initial_su||d.Sf.submit()}function S(){GetV(),initial_ds=d.Sf.DS.value,initial_st=d.Sf.ST.checked,initial_su=d.Sf.SU.checked,GetLS()}function H(){window.open("https://github.com/Aircoookie/WLED/wiki/Settings#user-interface-settings")}function B(){window.open("/settings","_self")}function UI(){gId("idonthateyou").style.display=gId("dm").checked?"inline":"none";var e=gId("theme_base");e&&(e.value=gId("dm").checked?"light":"dark")}function setRandomBg(){gId("theme_bg_random").checked?gId("theme_bg_url").value="https://picsum.photos/1920/1080":gId("theme_bg_url").value=""}function checkRandomBg(){"https://picsum.photos/1920/1080"===gId("theme_bg_url").value?gId("theme_bg_random").checked=!0:gId("theme_bg_random").checked=!1}function uploadFile(e,t){var i=new XMLHttpRequest;i.addEventListener("load",(function(){showToast(this.responseText)})),i.addEventListener("error",(function(e){showToast(e.stack,!0)})),i.open("POST","/upload");var n=new FormData;return n.append("data",e.files[0],t),i.send(n),e.value="",!1}function GetV() {var d=document;
+var initial_ds,initial_st,initial_su,timeout,d=document,sett=null,l={comp:{labels:"Show button labels",colors:{LABEL:"Color selection methods",picker:"Color Wheel",rgb:"RGB sliders",quick:"Quick color selectors",hex:"HEX color input"},pcmbot:"Show bottom tab bar in PC mode",pid:"Show preset IDs",seglen:"Set segment length instead of stop LED",css:"Enable custom CSS",hdays:"Enable custom Holidays list"},theme:{alpha:{bg:"Background opacity",tab:"Button opacity"},bg:{url:"BG image URL",random:"Random BG image"},color:{bg:"BG HEX color"}}};function gId(e){return d.getElementById(e)}function isObject(e){return e&&"object"==typeof e&&!Array.isArray(e)}function set(e,t,i){for(var n=t,s=e.split("_"),o=s.length,a=0;a<o-1;a++){var l=s[a];n[l]||(n[l]={}),n=n[l]}n[s[o-1]]=i}function showToast(e,t=!1){var i=gId("toast");i.innerHTML=e,i.className=t?"error":"show",clearTimeout(timeout),i.style.animation="none",timeout=setTimeout((function(){i.className=i.className.replace("show","")}),2900)}function addRec(e,t="",n=null){var s="";for(i in e){var o=t+(t?"_":"")+i;if(isObject(e[i]))n&&n[i]&&n[i].LABEL&&(s+=`<h3>${n[i].LABEL}</h3>`),s+=addRec(e[i],o,n?n[i]:null);else{var a=o;if(n&&n[i]?a=n[i]:e[i+"LABEL"]&&(a=e[i+"LABEL"]),i.indexOf("LABEL")>0)continue;var l=typeof e[i];gId(o)?("boolean"===l?gId(o).checked=e[i]:gId(o).value=e[i],gId(o).previousElementSibling.matches(".l")&&(gId(o).previousElementSibling.innerHTML=a)):"boolean"===l?s+=`${a}: <input class="agi cb" type="checkbox" id=${o} ${e[i]?"checked":""}><br>`:"number"===l?s+=`${a}: <input class="agi" type="number" id=${o} value=${e[i]}><br>`:"string"===l&&(s+=`${a}:<br><input class="agi" id=${o} value=${e[i]}><br>`)}}return s}function genForm(e){var t;t=addRec(e,"",l),gId("gen").innerHTML=t}function GetLS(){(sett=localStorage.getItem("wledUiCfg"))||(gId("lserr").style.display="inline");try{sett=JSON.parse(sett)}catch(e){sett={},gId("lserr").style.display="inline",gId("lserr").innerHTML="&#9888; Settings JSON parsing failed. ("+e+")"}genForm(sett),gId("dm").checked="light"===gId("theme_base").value}function SetLS(){for(var e=d.querySelectorAll(".agi"),t=0;t<e.length;t++){var i=e[t],n=i.classList.contains("cb")?i.checked:i.value;set(i.id,sett,n),console.log(`${i.id} set to ${n}`)}try{localStorage.setItem("wledUiCfg",JSON.stringify(sett)),gId("lssuc").style.display="inline"}catch(i){gId("lssuc").style.display="none",gId("lserr").style.display="inline",gId("lserr").innerHTML="&#9888; Settings JSON saving failed. ("+i+")"}}function Save(){SetLS(),d.Sf.DS.value==initial_ds&&d.Sf.ST.checked==initial_st&&d.Sf.SU.checked==initial_su||d.Sf.submit()}function S(){GetV(),initial_ds=d.Sf.DS.value,initial_st=d.Sf.ST.checked,initial_su=d.Sf.SU.checked,GetLS()}function H(){window.open("https://github.com/Aircoookie/WLED/wiki/Settings#user-interface-settings")}function B(){window.open("/settings","_self")}function UI(){gId("idonthateyou").style.display=gId("dm").checked?"inline":"none";var e=gId("theme_base");e&&(e.value=gId("dm").checked?"light":"dark")}function setRandomBg(){gId("theme_bg_random").checked?gId("theme_bg_url").value="https://picsum.photos/1920/1080":gId("theme_bg_url").value=""}function checkRandomBg(){"https://picsum.photos/1920/1080"===gId("theme_bg_url").value?gId("theme_bg_random").checked=!0:gId("theme_bg_random").checked=!1}function uploadFile(e,t){var i=new XMLHttpRequest;i.addEventListener("load",(function(){showToast(this.responseText)})),i.addEventListener("error",(function(e){showToast(e.stack,!0)})),i.open("POST","/upload");var n=new FormData;return n.append("data",e.files[0],t),i.send(n),e.value="",!1}function GetV() {var d=document;
 %CSS%%SCSS%<link href="/skin.css" 
 rel="stylesheet"></head><body onload="S()"><form id="form_s" name="Sf" 
 method="post"><div class="toprow"><div class="helpB"><button type="button" 
@@ -224,9 +224,11 @@ class="agi"><br><span class="l">BG image URL</span>: <input id="theme_bg_url"
 class="agi" oninput="checkRandomBg()"><br><span class="l">Random BG image</span>
 : <input type="checkbox" id="theme_bg_random" class="agi cb" 
 onchange="setRandomBg()"><br><input id="theme_base" class="agi" 
-style="display:none"><div id="skin">Skinning CSS: <input type="file" 
+style="display:none"> <span class="l"></span>: <input type="checkbox" 
+id="comp_css" class="agi cb"><br><div id="skin">Custom CSS: <input type="file" 
 name="data" accept=".css"> <input type="button" value="Upload" 
-onclick='uploadFile(d.Sf.data,"/skin.css")'><br></div><div id="holidays">
+onclick='uploadFile(d.Sf.data,"/skin.css")'><br></div><span class="l"></span>: 
+<input type="checkbox" id="comp_hdays" class="agi cb"><br><div id="holidays">
 Holidays: <input type="file" name="data2" accept=".json"> <input type="button" 
 value="Upload" onclick='uploadFile(d.Sf.data2,"/holidays.json")'><br></div><div 
 id="toast"></div><hr><button type="button" onclick="B()">Back</button><button 

wled00/wled.h

@@ -8,7 +8,7 @@
  */
 
 // version code in format yymmddb (b = daily build)
-#define VERSION 2108161
+#define VERSION 2108180
 
 //uncomment this if you have a "my_config.h" file you'd like to use
 //#define WLED_USE_MY_CONFIG