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

Random color background.

Browse Source 
Few tweaks.
This commit is contained in:
Blaz Kristan 2021-08-12 15:47:22 +02:00
parent 3640f977c8
commit 588789cb77
7 changed files with 3636 additions and 3617 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
wled00/data/index.css
View File

@ -621,13 +621,17 @@ input[type=range]::-moz-range-thumb {
margin-top: 10px; margin-top: 10px;
} }
.qcs { .qcs {
padding: 14px;
margin: 2px; margin: 2px;
border-radius: 14px; border-radius: 14px;
display: inline-block; display: inline-block;
width: 28px;
height: 28px;
line-height: 28px;
} }
.qcsb { .qcsb {
padding: 13px; width: 26px;
height: 26px;
line-height: 26px;
border: 1px solid var(--c-f); border: 1px solid var(--c-f);
} }
#hexw { #hexw {
@ -763,7 +767,6 @@ input[type=number]::-webkit-outer-spin-button {
width: 44px; width: 44px;
height: 44px; height: 44px;
margin: 5px; margin: 5px;
text-shadow: -1px -1px 0 var(--c-6), 1px -1px 0 var(--c-6), -1px 1px 0 var(--c-6), 1px 1px 0 var(--c-6);
} }
.xxs-w { .xxs-w {
@ -773,6 +776,10 @@ input[type=number]::-webkit-outer-spin-button {
height: 50px; height: 50px;
} }
.qcs, .xss {
text-shadow: -1px -1px 0 var(--c-6), 1px -1px 0 var(--c-6), -1px 1px 0 var(--c-6), 1px 1px 0 var(--c-6);
}
.psts { .psts {
color: var(--c-f); color: var(--c-f);
margin: 4px; margin: 4px;

2
wled00/data/index.htm
View File

@ -88,7 +88,7 @@
<div class="qcs" onclick="pC('#0000ff');" title="Blue" style="background-color:#0000ff;"></div> <div class="qcs" onclick="pC('#0000ff');" title="Blue" style="background-color:#0000ff;"></div>
<div class="qcs" onclick="pC('#00ffc8');" title="Cyan" style="background-color:#00ffc8;"></div> <div class="qcs" onclick="pC('#00ffc8');" title="Cyan" style="background-color:#00ffc8;"></div>
<div class="qcs" onclick="pC('#08ff00');" title="Green" style="background-color:#08ff00;"></div> <div class="qcs" onclick="pC('#08ff00');" title="Green" style="background-color:#08ff00;"></div>
<div class="qcs" onclick="pC('rnd');" title="Random" style="background-color:var(--c-3); padding: 4px 8px; transform: translateY(-10px);">R</div> <div class="qcs" onclick="pC('rnd');" title="Random" style="background:linear-gradient(to right, red, orange, yellow, green, blue, purple);transform: translateY(-11px);">R</div>
</div> </div>
<div id="csl"> <div id="csl">
<button class="btn xxs" onclick="selectSlot(0);">1</button> <button class="btn xxs" onclick="selectSlot(0);">1</button>

16
wled00/data/simple.css
View File

@ -93,7 +93,7 @@ button:hover {
background: var(--c-4); background: var(--c-4);
} }
.labels { .label {
margin: 0; margin: 0;
padding: 8px 0 2px 0; padding: 8px 0 2px 0;
} }
@ -494,13 +494,16 @@ input[type=range]::-moz-range-thumb {
} }
.qcs { .qcs {
padding: 14px;
margin: 2px; margin: 2px;
border-radius: 14px; border-radius: 14px;
display: inline-block; display: inline-block;
} width: 28px;
height: 28px;
line-height: 28px;}
.qcsb { .qcsb {
padding: 13px; width: 26px;
height: 26px;
line-height: 26px;
border: 1px solid var(--c-f); border: 1px solid var(--c-f);
} }
option { option {
@ -552,7 +555,6 @@ input[type=number]::-webkit-outer-spin-button {
width: 44px; width: 44px;
height: 44px; height: 44px;
margin: 5px; margin: 5px;
text-shadow: -1px -1px 0 var(--c-6), 1px -1px 0 var(--c-6), -1px 1px 0 var(--c-6), 1px 1px 0 var(--c-6);
} }
.xxs-w { .xxs-w {
@ -562,6 +564,10 @@ input[type=number]::-webkit-outer-spin-button {
height: 50px; height: 50px;
} }
.qcs, .xss {
text-shadow: -1px -1px 0 var(--c-6), 1px -1px 0 var(--c-6), -1px 1px 0 var(--c-6), 1px 1px 0 var(--c-6);
}
.psts { .psts {
color: var(--c-f); color: var(--c-f);
margin: 6px; margin: 6px;

20
wled00/data/simple.htm
View File

@ -27,7 +27,7 @@
<button id="buttonBri" onclick="tglBri()"><i class="icons">&#xe2a6;</i><p class="tab-label">Brightness</p></button> <button id="buttonBri" onclick="tglBri()"><i class="icons">&#xe2a6;</i><p class="tab-label">Brightness</p></button>
</div> </div>
<div id="briwrap"> <div id="briwrap">
<p class="labels hd">Global brightness</p> <p class="label hd">Global brightness</p>
<div class="il"> <div class="il">
<i class="icons slider-icon" onclick="tglTheme()">&#xe2a6;</i> <i class="icons slider-icon" onclick="tglTheme()">&#xe2a6;</i>
<div class="sliderwrap il"> <div class="sliderwrap il">
@ -45,7 +45,7 @@
<div id="picker" class="center"></div> <div id="picker" class="center"></div>
<div id="wwrap" class="center"> <div id="wwrap" class="center">
<p class="labels h">White channel</p> <p class="label h">White channel</p>
<i class="icons slider-icon" id="wht" title="White channel">&#xe333;</i> <i class="icons slider-icon" id="wht" title="White channel">&#xe333;</i>
<div class="sliderwrap il"> <div class="sliderwrap il">
<input id="sliderW" onchange="setColor(0)" oninput="updateTrail(this)" max="255" min="0" type="range" value="128" /> <input id="sliderW" onchange="setColor(0)" oninput="updateTrail(this)" max="255" min="0" type="range" value="128" />
@ -65,7 +65,7 @@
<div class="qcs" onclick="pC('#0000ff');" title="Blue" style="background-color:#0000ff;"></div> <div class="qcs" onclick="pC('#0000ff');" title="Blue" style="background-color:#0000ff;"></div>
<div class="qcs" onclick="pC('#00ffc8');" title="Cyan" style="background-color:#00ffc8;"></div> <div class="qcs" onclick="pC('#00ffc8');" title="Cyan" style="background-color:#00ffc8;"></div>
<div class="qcs" onclick="pC('#08ff00');" title="Green" style="background-color:#08ff00;"></div> <div class="qcs" onclick="pC('#08ff00');" title="Green" style="background-color:#08ff00;"></div>
<div class="qcs" onclick="pC('rnd');" title="Random" style="background-color:var(--c-3); padding: 4px 8px; transform: translateY(-10px);">R</div> <div class="qcs" onclick="pC('rnd');" title="Random" style="background:linear-gradient(to right, red, orange, yellow, green, blue, purple);transform: translateY(-11px);">R</div>
</div> </div>
<div id="csl" class="center" style="display: none;"> <div id="csl" class="center" style="display: none;">
<button class="xxs btn" onclick="selectSlot(0);">1</button> <button class="xxs btn" onclick="selectSlot(0);">1</button>
@ -78,12 +78,12 @@
</div> </div>
<div id="QuickLoad" class="center"> <div id="QuickLoad" class="center">
<p class="labels h">Quick Load</p> <p class="label h">Quick Load</p>
<div id="pql"></div> <div id="pql"></div>
</div> </div>
<div id="Presets" class="center" style="display:none;"> <div id="Presets" class="center" style="display:none;">
<p class="labels h">Presets</p> <p class="label h">Presets</p>
<div class="fnd"> <div class="fnd">
<input type="text" class="fnd" placeholder="Search" oninput="search(this,'pcont')" onfocus="search(this)" /> <input type="text" class="fnd" placeholder="Search" oninput="search(this,'pcont')" onfocus="search(this)" />
<span onclick="clean(this)" class="icons">&#xe38f;</span> <span onclick="clean(this)" class="icons">&#xe38f;</span>
@ -93,9 +93,9 @@
</div> </div>
<div id="Effects" class="center"> <div id="Effects" class="center">
<p class="labels h">Effect</p> <p class="label h">Effect</p>
<!--p class="labels h">Effect speed</p--> <!--p class="label h">Effect speed</p-->
<div> <div title="Effect speed">
<i class="icons slider-icon">&#xe325;</i> <i class="icons slider-icon">&#xe325;</i>
<div class="sliderwrap il"> <div class="sliderwrap il">
<input id="sliderSpeed" onchange="setSpeed()" oninput="updateTrail(this)" max="255" min="0" type="range" value="128" /> <input id="sliderSpeed" onchange="setSpeed()" oninput="updateTrail(this)" max="255" min="0" type="range" value="128" />
@ -103,8 +103,8 @@
</div> </div>
<output class="sliderbubble"></output> <output class="sliderbubble"></output>
</div> </div>
<!--p class="labels h">Effect intensity</p--> <!--p class="label h">Effect intensity</p-->
<div> <div title="Effect intensity">
<i class="icons slider-icon" onclick="tglLabels()">&#xe409;</i> <i class="icons slider-icon" onclick="tglLabels()">&#xe409;</i>
<div class="sliderwrap il"> <div class="sliderwrap il">
<input id="sliderIntensity" onchange="setIntensity()" oninput="updateTrail(this)" max="255" min="0" type="range" value="128" /> <input id="sliderIntensity" onchange="setIntensity()" oninput="updateTrail(this)" max="255" min="0" type="range" value="128" />

16
wled00/data/simple.js
View File

@ -75,6 +75,8 @@ function applyCfg()
var l = cfg.comp.labels; //l = false; var l = cfg.comp.labels; //l = false;
var e = d.querySelectorAll('.tab-label'); var e = d.querySelectorAll('.tab-label');
for (var i=0; i<e.length; i++) e[i].style.display = l ? "block":"none"; for (var i=0; i<e.length; i++) e[i].style.display = l ? "block":"none";
e = d.querySelectorAll('.label');
for (var i=0; i<e.length; i++) e[i].style.display = l ? "block":"none";
e = d.querySelector('.hd'); e = d.querySelector('.hd');
e.style.display = l ? "block":"none"; e.style.display = l ? "block":"none";
//sCol('--tbp',l ? "14px 14px 10px 14px":"10px 22px 4px 22px"); //sCol('--tbp',l ? "14px 14px 10px 14px":"10px 22px 4px 22px");
@ -226,7 +228,7 @@ async function onLoad()
// Load initial data // Load initial data
loadPalettes(()=>{ loadPalettes(()=>{
loadPalettesData(); loadPalettesData(redrawPalPrev);
loadFX(()=>{ loadFX(()=>{
loadPresets(()=>{ loadPresets(()=>{
loadInfo(requestJson); loadInfo(requestJson);
@ -432,7 +434,7 @@ function populatePresets()
{ {
if (!pJson) {pJson={};return}; if (!pJson) {pJson={};return};
delete pJson["0"]; delete pJson["0"];
var cn = ""; //`<p class="labels">All presets</p>`; var cn = ""; //`<p class="label">All presets</p>`;
var arr = Object.entries(pJson); var arr = Object.entries(pJson);
arr.sort(cmpP); arr.sort(cmpP);
pQL = []; pQL = [];
@ -548,7 +550,7 @@ function populateSegments(s)
if (i > lSeg) lSeg = i; if (i > lSeg) lSeg = i;
cn += cn +=
`${inst.n && cfg.comp.labels ? '<div class="labels h">'+inst.n+'</div>' : ''} `<div class="label h">${(inst.n&&inst.n!=='')?inst.n:('Segment '+y)}</div>
<div> <div>
<i class="icons pwr ${powered[i] ? "act":""}" id="seg${i}pwr" onclick="setSegPwr(${i})" title="${inst.n}">&#xe08f;</i> <i class="icons pwr ${powered[i] ? "act":""}" id="seg${i}pwr" onclick="setSegPwr(${i})" title="${inst.n}">&#xe08f;</i>
<div id="sliderSeg${i}Bri" class="sliderwrap il"> <div id="sliderSeg${i}Bri" class="sliderwrap il">
@ -826,7 +828,7 @@ function updateUI(scrollto=false)
redrawPalPrev(); redrawPalPrev();
var l = cfg.comp.labels; //l = false; var l = cfg.comp.labels; //l = false;
var e = d.querySelectorAll('.labels'); var e = d.querySelectorAll('.label');
for (var i=0; i<e.length; i++) e[i].style.display = l ? "block":"none"; for (var i=0; i<e.length; i++) e[i].style.display = l ? "block":"none";
} }
@ -1221,8 +1223,7 @@ function loadPalettesData(callback = null)
palettesDataJson = JSON.parse(palettesDataJson); palettesDataJson = JSON.parse(palettesDataJson);
if (palettesDataJson && palettesDataJson.vid == lastinfo.vid) { if (palettesDataJson && palettesDataJson.vid == lastinfo.vid) {
palettesData = palettesDataJson.p; palettesData = palettesDataJson.p;
//redrawPalPrev() //TODO! if (callback) callback(); //redrawPalPrev()
if (callback) callback();
return; return;
} }
} catch (e) {} } catch (e) {}
@ -1234,8 +1235,7 @@ function loadPalettesData(callback = null)
p: palettesData, p: palettesData,
vid: lastinfo.vid vid: lastinfo.vid
})); }));
//redrawPalPrev(); if (callback) setTimeout(callback, 99); //redrawPalPrev()
if (callback) setTimeout(callback, 99); //go on to connect websocket
}); });
} }

3567
wled00/html_simple.h
View File

File diff suppressed because it is too large Load Diff

3619
wled00/html_ui.h
View File

File diff suppressed because it is too large Load Diff