Merge pull request #3481 from WoodyLetsCode/random-bg-img

Improved random bg image and added random bg image options
Aircoookie · Oct 31, 2023 · 1495b75 · 1495b75
2 parents 31a4e38 + 7f78d00
commit 1495b75
Show file tree

Hide file tree

Showing 5 changed files with 2,338 additions and 2,318 deletions.
diff --git a/wled00/data/index.js b/wled00/data/index.js
@@ -24,7 +24,7 @@ var lastinfo = {};
 var isM = false, mw = 0, mh=0;
 var ws, cpick, ranges, wsRpt=0;
 var cfg = {
-	theme:{base:"dark", bg:{url:""}, alpha:{bg:0.6,tab:0.8}, color:{bg:""}},
+	theme:{base:"dark", bg:{url:"", rnd: false, rndGrayscale: false, rndBlur: false}, 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, segpwr:false, segexp:false,
 		  css:true, hdays:false, fxdef:true, on:0, off:0}

diff --git a/wled00/data/settings_ui.htm b/wled00/data/settings_ui.htm
@@ -7,7 +7,7 @@
 	<script>
 	var d = document;
 	var loc = false, locip, locproto = "http:";
-	var initial_ds, initial_st, initial_su;
+	var initial_ds, initial_st, initial_su, oldUrl;
 	var sett = null;
 	var l = {
 		"comp":{
@@ -37,7 +37,9 @@
 			},
 			"bg":{
 				"url":"BG image URL",
-				"random":"Random BG image"
+				"rnd":"Random BG image",
+				"rndGrayscale":"Grayscale",
+				"rndBlur":"Blur"
 			},
 			"color":{
 				"bg":"BG HEX color"
@@ -73,7 +75,7 @@
 	function addRec(s, path = "", label = null)
 	{
 		var str = "";
-		for (i in s)
+		for (let i in s)
 		{
 			var fk = path + (path?'_':'') + i;
 			if (isObject(s[i])) {
@@ -117,6 +119,11 @@
 		str = addRec(s,"",l);
 
 		gId('gen').innerHTML = str;
+		if (gId('theme_bg_rnd').checked) {
+			oldUrl = "";
+			toggle("Image");
+			randomBg();
+		} else oldUrl = gId("theme_bg_url").value;
 	}
 	function GetLS()
 	{
@@ -222,20 +229,15 @@
 	}
 
 	// random BG image
-	function setRandomBg() {
-		if (gId("theme_bg_random").checked) {
-			gId("theme_bg_url").value = "https://picsum.photos/1920/1080";
-		} else {
-			gId("theme_bg_url").value = "";
-		}
-
-	}
-	function checkRandomBg() {
-		if (gId("theme_bg_url").value === "https://picsum.photos/1920/1080") {
-			gId("theme_bg_random").checked = true;
-		} else {
-			gId("theme_bg_random").checked = false;
+	function randomBg() {
+		let url = oldUrl;
+		let t = "theme_bg_rnd";
+		if (gId(t).checked) {
+			url = "https://picsum.photos/1920/1080";
+			if (gId(`${t}Grayscale`).checked) url += "?grayscale";
+			if (gId(`${t}Blur`).checked) url += (url.includes("?") ? "&" : "?") + "blur";
 		}
+		gId("theme_bg_url").value = url;
 	}
 	function uploadFile(fO,name) {
 		var req = new XMLHttpRequest();
@@ -284,8 +286,15 @@ <h3>UI Appearance</h3>
 		<span class="l"></span>: <input type="number" min=0.0 max=1.0 step=0.01 id="theme_alpha_tab" class="agi"><br>
 		<span class="l"></span>: <input type="number" min=0.0 max=1.0 step=0.01 id="theme_alpha_bg" class="agi"><br>
 		<span class="l"></span>: <input type="text" id="theme_color_bg" maxlength="9" class="agi"><br>
-		<span class="l">BG image URL</span>: <input type="text" 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>
+		<span class="l"></span>: <input type="checkbox" id="theme_bg_rnd" class="agi cb" onchange="randomBg();toggle('Image');">
+		<div id="Image">
+			<span class="l"></span>: <input type="text" id="theme_bg_url" class="agi"><br>
+		</div>
+		<div id="NoImage" class="hide">
+			<h4>Random BG image settings</h4>
+			<span class="l"></span>: <input type="checkbox" id="theme_bg_rndGrayscale" class="agi cb" onchange="randomBg()"><br>
+			<span class="l"></span>: <input type="checkbox" id="theme_bg_rndBlur" class="agi cb" onchange="randomBg()"><br>
+		</div>
 		<input id="theme_base" class="agi" 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>

diff --git a/wled00/data/style.css b/wled00/data/style.css
@@ -16,6 +16,9 @@ hr {
 hr.sml {
   width: 260px;
 }
+h4 {
+  margin: 0;
+}
 a, a:hover {
   color: #28f;
   text-decoration: none;