Random color background.
Few tweaks.
This commit is contained in:
parent
3640f977c8
commit
588789cb77
@ -621,13 +621,17 @@ input[type=range]::-moz-range-thumb {
|
||||
margin-top: 10px;
|
||||
}
|
||||
.qcs {
|
||||
padding: 14px;
|
||||
margin: 2px;
|
||||
border-radius: 14px;
|
||||
display: inline-block;
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
line-height: 28px;
|
||||
}
|
||||
.qcsb {
|
||||
padding: 13px;
|
||||
width: 26px;
|
||||
height: 26px;
|
||||
line-height: 26px;
|
||||
border: 1px solid var(--c-f);
|
||||
}
|
||||
#hexw {
|
||||
@ -763,7 +767,6 @@ input[type=number]::-webkit-outer-spin-button {
|
||||
width: 44px;
|
||||
height: 44px;
|
||||
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 {
|
||||
@ -773,6 +776,10 @@ input[type=number]::-webkit-outer-spin-button {
|
||||
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 {
|
||||
color: var(--c-f);
|
||||
margin: 4px;
|
||||
|
@ -88,7 +88,7 @@
|
||||
<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('#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 id="csl">
|
||||
<button class="btn xxs" onclick="selectSlot(0);">1</button>
|
||||
|
@ -93,7 +93,7 @@ button:hover {
|
||||
background: var(--c-4);
|
||||
}
|
||||
|
||||
.labels {
|
||||
.label {
|
||||
margin: 0;
|
||||
padding: 8px 0 2px 0;
|
||||
}
|
||||
@ -494,13 +494,16 @@ input[type=range]::-moz-range-thumb {
|
||||
}
|
||||
|
||||
.qcs {
|
||||
padding: 14px;
|
||||
margin: 2px;
|
||||
border-radius: 14px;
|
||||
display: inline-block;
|
||||
}
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
line-height: 28px;}
|
||||
.qcsb {
|
||||
padding: 13px;
|
||||
width: 26px;
|
||||
height: 26px;
|
||||
line-height: 26px;
|
||||
border: 1px solid var(--c-f);
|
||||
}
|
||||
option {
|
||||
@ -552,7 +555,6 @@ input[type=number]::-webkit-outer-spin-button {
|
||||
width: 44px;
|
||||
height: 44px;
|
||||
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 {
|
||||
@ -562,6 +564,10 @@ input[type=number]::-webkit-outer-spin-button {
|
||||
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 {
|
||||
color: var(--c-f);
|
||||
margin: 6px;
|
||||
|
@ -27,7 +27,7 @@
|
||||
<button id="buttonBri" onclick="tglBri()"><i class="icons"></i><p class="tab-label">Brightness</p></button>
|
||||
</div>
|
||||
<div id="briwrap">
|
||||
<p class="labels hd">Global brightness</p>
|
||||
<p class="label hd">Global brightness</p>
|
||||
<div class="il">
|
||||
<i class="icons slider-icon" onclick="tglTheme()"></i>
|
||||
<div class="sliderwrap il">
|
||||
@ -45,7 +45,7 @@
|
||||
<div id="picker" class="center"></div>
|
||||
|
||||
<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"></i>
|
||||
<div class="sliderwrap il">
|
||||
<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('#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('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 id="csl" class="center" style="display: none;">
|
||||
<button class="xxs btn" onclick="selectSlot(0);">1</button>
|
||||
@ -78,12 +78,12 @@
|
||||
</div>
|
||||
|
||||
<div id="QuickLoad" class="center">
|
||||
<p class="labels h">Quick Load</p>
|
||||
<p class="label h">Quick Load</p>
|
||||
<div id="pql"></div>
|
||||
</div>
|
||||
|
||||
<div id="Presets" class="center" style="display:none;">
|
||||
<p class="labels h">Presets</p>
|
||||
<p class="label h">Presets</p>
|
||||
<div class="fnd">
|
||||
<input type="text" class="fnd" placeholder="Search" oninput="search(this,'pcont')" onfocus="search(this)" />
|
||||
<span onclick="clean(this)" class="icons"></span>
|
||||
@ -93,9 +93,9 @@
|
||||
</div>
|
||||
|
||||
<div id="Effects" class="center">
|
||||
<p class="labels h">Effect</p>
|
||||
<!--p class="labels h">Effect speed</p-->
|
||||
<div>
|
||||
<p class="label h">Effect</p>
|
||||
<!--p class="label h">Effect speed</p-->
|
||||
<div title="Effect speed">
|
||||
<i class="icons slider-icon"></i>
|
||||
<div class="sliderwrap il">
|
||||
<input id="sliderSpeed" onchange="setSpeed()" oninput="updateTrail(this)" max="255" min="0" type="range" value="128" />
|
||||
@ -103,8 +103,8 @@
|
||||
</div>
|
||||
<output class="sliderbubble"></output>
|
||||
</div>
|
||||
<!--p class="labels h">Effect intensity</p-->
|
||||
<div>
|
||||
<!--p class="label h">Effect intensity</p-->
|
||||
<div title="Effect intensity">
|
||||
<i class="icons slider-icon" onclick="tglLabels()"></i>
|
||||
<div class="sliderwrap il">
|
||||
<input id="sliderIntensity" onchange="setIntensity()" oninput="updateTrail(this)" max="255" min="0" type="range" value="128" />
|
||||
|
@ -75,6 +75,8 @@ function applyCfg()
|
||||
var l = cfg.comp.labels; //l = false;
|
||||
var e = d.querySelectorAll('.tab-label');
|
||||
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.style.display = l ? "block":"none";
|
||||
//sCol('--tbp',l ? "14px 14px 10px 14px":"10px 22px 4px 22px");
|
||||
@ -226,7 +228,7 @@ async function onLoad()
|
||||
|
||||
// Load initial data
|
||||
loadPalettes(()=>{
|
||||
loadPalettesData();
|
||||
loadPalettesData(redrawPalPrev);
|
||||
loadFX(()=>{
|
||||
loadPresets(()=>{
|
||||
loadInfo(requestJson);
|
||||
@ -432,7 +434,7 @@ function populatePresets()
|
||||
{
|
||||
if (!pJson) {pJson={};return};
|
||||
delete pJson["0"];
|
||||
var cn = ""; //`<p class="labels">All presets</p>`;
|
||||
var cn = ""; //`<p class="label">All presets</p>`;
|
||||
var arr = Object.entries(pJson);
|
||||
arr.sort(cmpP);
|
||||
pQL = [];
|
||||
@ -548,7 +550,7 @@ function populateSegments(s)
|
||||
if (i > lSeg) lSeg = i;
|
||||
|
||||
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>
|
||||
<i class="icons pwr ${powered[i] ? "act":""}" id="seg${i}pwr" onclick="setSegPwr(${i})" title="${inst.n}"></i>
|
||||
<div id="sliderSeg${i}Bri" class="sliderwrap il">
|
||||
@ -826,7 +828,7 @@ function updateUI(scrollto=false)
|
||||
redrawPalPrev();
|
||||
|
||||
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";
|
||||
}
|
||||
|
||||
@ -1221,8 +1223,7 @@ function loadPalettesData(callback = null)
|
||||
palettesDataJson = JSON.parse(palettesDataJson);
|
||||
if (palettesDataJson && palettesDataJson.vid == lastinfo.vid) {
|
||||
palettesData = palettesDataJson.p;
|
||||
//redrawPalPrev() //TODO!
|
||||
if (callback) callback();
|
||||
if (callback) callback(); //redrawPalPrev()
|
||||
return;
|
||||
}
|
||||
} catch (e) {}
|
||||
@ -1234,8 +1235,7 @@ function loadPalettesData(callback = null)
|
||||
p: palettesData,
|
||||
vid: lastinfo.vid
|
||||
}));
|
||||
//redrawPalPrev();
|
||||
if (callback) setTimeout(callback, 99); //go on to connect websocket
|
||||
if (callback) setTimeout(callback, 99); //redrawPalPrev()
|
||||
});
|
||||
}
|
||||
|
||||
|
3567
wled00/html_simple.h
3567
wled00/html_simple.h
File diff suppressed because it is too large
Load Diff
3619
wled00/html_ui.h
3619
wled00/html_ui.h
File diff suppressed because it is too large
Load Diff
Loading…
Reference in New Issue
Block a user