Added skinning capability.
This commit is contained in:
parent
9dadb6da4c
commit
9ac7acf8b3
@ -1124,5 +1124,3 @@ input[type="text"].fnd:not(:placeholder-shown) {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
@import 'skin.css';
|
||||
|
@ -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);
|
||||
|
@ -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(){}
|
||||
</script>
|
||||
<style>
|
||||
@import url("style.css");
|
||||
</style>
|
||||
<style>@import url("/style.css");</style>
|
||||
<link href="/skin.css" rel="stylesheet">
|
||||
</head>
|
||||
<body onload="S()">
|
||||
<form id="form_s" name="Sf" method="post">
|
||||
|
@ -325,13 +325,13 @@ Reverse (rotated 180°): <input type="checkbox" name="CV${i}">
|
||||
c += `<span style="cursor: pointer;" onclick="off('${bt}')"> ×</span><br>`;
|
||||
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°): <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;
|
||||
}
|
||||
</script>
|
||||
<style>
|
||||
@import url("style.css");
|
||||
</style>
|
||||
<style>@import url("/style.css");</style>
|
||||
<link href="/skin.css" rel="stylesheet">
|
||||
</head>
|
||||
<body onload="S()">
|
||||
<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="8">JSON remote</option>
|
||||
</select><span style="cursor: pointer;" onclick="off('IR')"> ×</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>
|
||||
<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')"> ×</span><br>
|
||||
|
@ -25,6 +25,7 @@
|
||||
<style>
|
||||
@import url("style.css");
|
||||
</style>
|
||||
<link href="/skin.css" rel="stylesheet">
|
||||
</head>
|
||||
<body onload="GetV()">
|
||||
<form id="form_s" name="Sf" method="post">
|
||||
|
@ -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;}
|
||||
</script>
|
||||
<style>@import url("style.css");</style></head>
|
||||
<style>@import url("/style.css");</style>
|
||||
<link href="/skin.css" rel="stylesheet">
|
||||
</head>
|
||||
<body onload="S()">
|
||||
<form id="form_s" name="Sf" method="post">
|
||||
<div class="toprow">
|
||||
|
@ -95,9 +95,8 @@
|
||||
//values injected by server while sending HTML
|
||||
}
|
||||
</script>
|
||||
<style>
|
||||
@import url("style.css");
|
||||
</style>
|
||||
<style>@import url("/style.css");</style>
|
||||
<link href="/skin.css" rel="stylesheet">
|
||||
</head>
|
||||
<body onload="S()">
|
||||
<form id="form_s" name="Sf" method="post" onsubmit="Wd()">
|
||||
|
@ -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;}
|
||||
</script>
|
||||
<style>
|
||||
@import url("style.css");
|
||||
</style>
|
||||
<style>@import url("/style.css");</style>
|
||||
<link href="/skin.css" rel="stylesheet">
|
||||
</head>
|
||||
<body onload="S()">
|
||||
<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">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('/skin.css');"><br></div>
|
||||
<div id="toast"></div>
|
||||
<hr><button type="button" onclick="B()">Back</button><button type="button" onclick="Save()">Save</button>
|
||||
</form>
|
||||
</body>
|
||||
|
@ -118,9 +118,8 @@
|
||||
}
|
||||
function GetV() {}
|
||||
</script>
|
||||
<style>
|
||||
@import url("style.css");
|
||||
</style>
|
||||
<style>@import url("/style.css");</style>
|
||||
<link href="/skin.css" rel="stylesheet">
|
||||
</head>
|
||||
|
||||
<body onload="S()">
|
||||
|
@ -18,9 +18,8 @@
|
||||
//values injected by server while sending HTML
|
||||
}
|
||||
</script>
|
||||
<style>
|
||||
@import url("style.css");
|
||||
</style>
|
||||
<style>@import url("/style.css");</style>
|
||||
<link href="/skin.css" rel="stylesheet">
|
||||
</head>
|
||||
<body onload="GetV()">
|
||||
<form id="form_s" name="Sf" method="post">
|
||||
|
@ -3,7 +3,7 @@ body {
|
||||
text-align: center;
|
||||
background: #222;
|
||||
color: #fff;
|
||||
line-height: 200%;
|
||||
line-height: 200%%; /* %% because of AsyncWebServer */
|
||||
margin: 0;
|
||||
}
|
||||
hr {
|
||||
|
File diff suppressed because one or more lines are too long
1420
wled00/html_ui.h
1420
wled00/html_ui.h
File diff suppressed because it is too large
Load Diff
@ -8,7 +8,7 @@
|
||||
*/
|
||||
|
||||
// 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
|
||||
//#define WLED_USE_MY_CONFIG
|
||||
|
Loading…
Reference in New Issue
Block a user