lba.gitea/WLED
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Added skinning capability.

Browse Source
This commit is contained in:
Blaz Kristan 2021-06-06 20:36:19 +02:00
parent 9dadb6da4c
commit 9ac7acf8b3
14 changed files with 908 additions and 898 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
wled00/data/index.css
View File

@ -1124,5 +1124,3 @@ input[type="text"].fnd:not(:placeholder-shown) {
display: none; display: none;
} }
} }
@import 'skin.css';

51
wled00/data/index.js
View File

@ -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() function onLoad()
{ {
if (window.location.protocol == "file:") { if (window.location.protocol == "file:") {
@ -191,6 +206,7 @@ function onLoad()
applyCfg(); applyCfg();
loadBg(cfg.theme.bg.url); loadBg(cfg.theme.bg.url);
loadSkinCSS('skinCss');
var cd = gId('csl').children; var cd = gId('csl').children;
for (var i = 0; i < cd.length; i++) cd[i].style.backgroundColor = "rgb(0, 0, 0)"; 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"; x.className = error ? "error":"show";
clearTimeout(timeout); clearTimeout(timeout);
x.style.animation = 'none'; x.style.animation = 'none';
// x.style.animation = null;
timeout = setTimeout(function(){ x.className = x.className.replace("show", ""); }, 2900); timeout = setTimeout(function(){ x.className = x.className.replace("show", ""); }, 2900);
} }
@ -431,7 +446,6 @@ function loadFX(callback = null)
.then(json => { .then(json => {
eJson = Object.entries(json); eJson = Object.entries(json);
populateEffects(); populateEffects();
// updateUI();
if (callback) callback(); if (callback) callback();
}) })
.catch(function (error) { .catch(function (error) {
@ -985,15 +999,6 @@ function updateSelectedPalette(scrollto=false)
var selectedPalette = parent.querySelector(`.lstI[data-id="${selectedPal}"]`); var selectedPalette = parent.querySelector(`.lstI[data-id="${selectedPal}"]`);
if (selectedPalette) parent.querySelector(`.lstI[data-id="${selectedPal}"]`).classList.add('selected'); if (selectedPalette) parent.querySelector(`.lstI[data-id="${selectedPal}"]`).classList.add('selected');
/*
if (scrollto && selectedPalette) {
selectedPalette.scrollIntoView({
behavior: 'smooth',
block: 'center',
});
}
*/
} }
function updateSelectedFx(scrollto=false) function updateSelectedFx(scrollto=false)
@ -1008,14 +1013,6 @@ function updateSelectedFx(scrollto=false)
var selectedEffect = parent.querySelector(`.lstI[data-id="${selectedFx}"]`); var selectedEffect = parent.querySelector(`.lstI[data-id="${selectedFx}"]`);
if (selectedEffect) selectedEffect.classList.add('selected'); if (selectedEffect) selectedEffect.classList.add('selected');
/*
if (scrollto && selectedEffect) {
selectedEffect.scrollIntoView({
behavior: 'smooth',
block: 'center',
});
}
*/
} }
function displayRover(i,s) function displayRover(i,s)
@ -1135,22 +1132,6 @@ function requestJson(command, rinfo = true, verbose = true, callback = null)
return; return;
} }
var s = json.state ? json.state : json; 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)) { if (!handleJson(s)) {
showToast('No Segments!', true); showToast('No Segments!', true);
updateUI(false); updateUI(false);

5
wled00/data/settings_dmx.htm
View File

@ -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 S(){GCH(15);GetV();mMap();}function H(){window.open("https://github.com/Aircoookie/WLED/wiki/DMX");}function B(){window.history.back();}
function GetV(){} function GetV(){}
</script> </script>
<style> <style>@import url("/style.css");</style>
@import url("style.css"); <link href="/skin.css" rel="stylesheet">
</style>
</head> </head>
<body onload="S()"> <body onload="S()">
<form id="form_s" name="Sf" method="post"> <form id="form_s" name="Sf" method="post">

11
wled00/data/settings_leds.htm
View File

@ -325,13 +325,13 @@ Reverse (rotated 180°): <input type="checkbox" name="CV${i}">
c += `<span style="cursor: pointer;" onclick="off('${bt}')">&nbsp;&#215;</span><br>`; c += `<span style="cursor: pointer;" onclick="off('${bt}')">&nbsp;&#215;</span><br>`;
gId("btns").innerHTML = c; gId("btns").innerHTML = c;
} }
function uploadFile() { function uploadFile(name) {
var req = new XMLHttpRequest(); var req = new XMLHttpRequest();
req.addEventListener('load', function(){showToast(this.responseText)}); req.addEventListener('load', function(){showToast(this.responseText)});
req.addEventListener('error', function(e){showToast(e.stack,true);}); req.addEventListener('error', function(e){showToast(e.stack,true);});
req.open("POST", "/upload"); req.open("POST", "/upload");
var formData = new FormData(); 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); req.send(formData);
d.Sf.data.value = ''; d.Sf.data.value = '';
return false; return false;
@ -342,9 +342,8 @@ Reverse (rotated 180°): <input type="checkbox" name="CV${i}">
//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; //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;
} }
</script> </script>
<style> <style>@import url("/style.css");</style>
@import url("style.css"); <link href="/skin.css" rel="stylesheet">
</style>
</head> </head>
<body onload="S()"> <body onload="S()">
<form id="form_s" name="Sf" method="post"> <form id="form_s" name="Sf" method="post">
@ -405,7 +404,7 @@ Reverse (rotated 180°): <input type="checkbox" name="CV${i}">
<option value="7">9-key red</option> <option value="7">9-key red</option>
<option value="8">JSON remote</option> <option value="8">JSON remote</option>
</select><span style="cursor: pointer;" onclick="off('IR')">&nbsp;&#215;</span><br> </select><span style="cursor: pointer;" onclick="off('IR')">&nbsp;&#215;</span><br>
<div id="json" style="display:none;">JSON file: <input type="file" name="data" accept=".json"> <input type="button" value="Upload" onclick="uploadFile();"><br></div> <div id="json" style="display:none;">JSON file: <input type="file" name="data" accept=".json"> <input type="button" value="Upload" onclick="uploadFile('/ir.json');"><br></div>
<div id="toast"></div> <div id="toast"></div>
<a href="https://github.com/Aircoookie/WLED/wiki/Infrared-Control" target="_blank">IR info</a><br> <a href="https://github.com/Aircoookie/WLED/wiki/Infrared-Control" target="_blank">IR info</a><br>
Relay pin: <input type="number" min="-1" max="40" name="RL" onchange="UI()" style="width:35px"> invert <input type="checkbox" name="RM"><span style="cursor: pointer;" onclick="off('RL')">&nbsp;&#215;</span><br> Relay pin: <input type="number" min="-1" max="40" name="RL" onchange="UI()" style="width:35px"> invert <input type="checkbox" name="RM"><span style="cursor: pointer;" onclick="off('RL')">&nbsp;&#215;</span><br>

1
wled00/data/settings_sec.htm
View File

@ -25,6 +25,7 @@
<style> <style>
@import url("style.css"); @import url("style.css");
</style> </style>
<link href="/skin.css" rel="stylesheet">
</head> </head>
<body onload="GetV()"> <body onload="GetV()">
<form id="form_s" name="Sf" method="post"> <form id="form_s" name="Sf" method="post">

4
wled00/data/settings_sync.htm
View File

@ -9,7 +9,9 @@ function SetVal(){switch(parseInt(d.Sf.EP.value)){case 5568: d.Sf.DI.value = 556
function S(){GetV();SetVal();} function S(){GetV();SetVal();}
function GetV(){var d=document;} function GetV(){var d=document;}
</script> </script>
<style>@import url("style.css");</style></head> <style>@import url("/style.css");</style>
<link href="/skin.css" rel="stylesheet">
</head>
<body onload="S()"> <body onload="S()">
<form id="form_s" name="Sf" method="post"> <form id="form_s" name="Sf" method="post">
<div class="toprow"> <div class="toprow">

5
wled00/data/settings_time.htm
View File

@ -95,9 +95,8 @@
//values injected by server while sending HTML //values injected by server while sending HTML
} }
</script> </script>
<style> <style>@import url("/style.css");</style>
@import url("style.css"); <link href="/skin.css" rel="stylesheet">
</style>
</head> </head>
<body onload="S()"> <body onload="S()">
<form id="form_s" name="Sf" method="post" onsubmit="Wd()"> <form id="form_s" name="Sf" method="post" onsubmit="Wd()">

30
wled00/data/settings_ui.htm
View File

@ -54,7 +54,16 @@
} }
tar[pList[len-1]] = val; 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) function addRec(s, path = "", label = null)
{ {
var str = ""; var str = "";
@ -180,12 +189,21 @@
gId("theme_bg_random").checked = false; 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;} function GetV(){var d=document;}
</script> </script>
<style> <style>@import url("/style.css");</style>
@import url("style.css"); <link href="/skin.css" rel="stylesheet">
</style>
</head> </head>
<body onload="S()"> <body onload="S()">
<form id="form_s" name="Sf" method="post"> <form id="form_s" name="Sf" method="post">
@ -217,6 +235,8 @@
<span class="l">BG image URL</span>: <input id="theme_bg_url" class="agi" oninput="checkRandomBg()"><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> <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"> <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('/skin.css');"><br></div>
<div id="toast"></div>
<hr><button type="button" onclick="B()">Back</button><button type="button" onclick="Save()">Save</button> <hr><button type="button" onclick="B()">Back</button><button type="button" onclick="Save()">Save</button>
</form> </form>
</body> </body>

5
wled00/data/settings_um.htm
View File

@ -118,9 +118,8 @@
} }
function GetV() {} function GetV() {}
</script> </script>
<style> <style>@import url("/style.css");</style>
@import url("style.css"); <link href="/skin.css" rel="stylesheet">
</style>
</head> </head>
<body onload="S()"> <body onload="S()">

5
wled00/data/settings_wifi.htm
View File

@ -18,9 +18,8 @@
//values injected by server while sending HTML //values injected by server while sending HTML
} }
</script> </script>
<style> <style>@import url("/style.css");</style>
@import url("style.css"); <link href="/skin.css" rel="stylesheet">
</style>
</head> </head>
<body onload="GetV()"> <body onload="GetV()">
<form id="form_s" name="Sf" method="post"> <form id="form_s" name="Sf" method="post">

2
wled00/data/style.css
View File

@ -3,7 +3,7 @@ body {
text-align: center; text-align: center;
background: #222; background: #222;
color: #fff; color: #fff;
line-height: 200%; line-height: 200%%; /* %% because of AsyncWebServer */
margin: 0; margin: 0;
} }
hr { hr {

263
wled00/html_settings.h
View File

File diff suppressed because one or more lines are too long

1420
wled00/html_ui.h
View File

File diff suppressed because it is too large Load Diff

2
wled00/wled.h
View File

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