Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Improved random bg image and added random bg image options #3481

Merged
merged 6 commits into from
Oct 31, 2023
Merged

Improved random bg image and added random bg image options #3481

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
04791d0
hide URL field when Random BG image is checked
w00000dy Oct 20, 2023
820facb
Removed unnecessary text
w00000dy Oct 21, 2023
b5af6b0
added options for random bg image
w00000dy Oct 23, 2023
4204393
Merge branch '0_15' into random-bg-img
w00000dy Oct 23, 2023
bfd58b3
Merge branch '0_15' into random-bg-img
blazoncek Oct 31, 2023
7f78d00
Tweaks
blazoncek Oct 31, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion wled00/data/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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}
Expand Down
45 changes: 27 additions & 18 deletions wled00/data/settings_ui.htm
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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":{
Expand Down Expand Up @@ -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"
Expand Down Expand Up @@ -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])) {
Expand Down Expand Up @@ -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()
{
Expand Down Expand Up @@ -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();
Expand Down Expand Up @@ -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>
Expand Down
3 changes: 3 additions & 0 deletions wled00/data/style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,6 +16,9 @@ hr {
hr.sml {
width: 260px;
}
h4 {
margin: 0;
}
a, a:hover {
color: #28f;
text-decoration: none;
Expand Down
Loading
Loading