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

Optimisations.

Browse Source 
- tooltip everywhere
- smaller footprint
- fix brightness div
This commit is contained in:
Blaz Kristan 2023-10-20 21:32:39 +02:00
parent 14fc64f2f1
commit dffd1b1d69
4 changed files with 2169 additions and 2254 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

114
wled00/data/index.css
View File

@ -400,7 +400,7 @@ button {
position: sticky !important; position: sticky !important;
top: 0; top: 0;
z-index: 2; z-index: 2;
margin: 0 auto auto; margin: 0 auto auto;
} }
.staybot { .staybot {
@ -467,10 +467,10 @@ button {
/* New tooltip */ /* New tooltip */
.tooltip { .tooltip {
position: absolute; position: absolute;
opacity: 0; opacity: 0;
visibility: hidden; visibility: hidden;
transition: opacity 0.4s ease, visibility 0.4s ease; transition: opacity .4s ease, visibility .4s ease;
background-color: var(--c-5); background-color: var(--c-5);
box-shadow: 4px 4px 10px 4px var(--c-1); box-shadow: 4px 4px 10px 4px var(--c-1);
color: var(--c-f); color: var(--c-f);
@ -480,77 +480,19 @@ button {
} }
.tooltip::after { .tooltip::after {
content: ""; content: "";
position: absolute; position: absolute;
border: 8px; border: 8px;
border-style: solid; border-style: solid;
border-color: var(--c-5) transparent transparent transparent; border-color: var(--c-5) transparent transparent transparent;
top: 100%; top: 100%;
left: calc(50% - 8px); left: calc(50% - 8px);
z-index: 0; z-index: 0;
} }
.tooltip.visible { .tooltip.visible {
opacity: 1;
visibility: visible;
}
/* Tooltip text */
.tooltiptext {
visibility: hidden;
background-color: var(--c-5);
/*border: 2px solid var(--c-2);*/
box-shadow: 4px 4px 10px 4px var(--c-1);
color: var(--c-f);
text-align: center;
padding: 4px 8px;
border-radius: 6px;
/* Position the tooltip text */
width: 160px;
position: absolute;
z-index: 1;
bottom: 120%;
transform: translate(-50%, 0%);
left: 50%;
/* Ensure tooltip goes away when mouse leaves control */
pointer-events: none;
/* Fade in tooltip */
opacity: 0;
transition: opacity .75s;
}
.slider .tooltiptext {
bottom: 100%;
}
.ttfirst {
transform: translateX(-20%);
}
.ttlast {
transform: translateX(-80%);
}
/* Tooltip arrow */
.tooltiptext::after {
content: "";
position: absolute;
top: 100%;
left: 50%;
margin-left: -5px;
border-width: 5px;
border-style: solid;
border-color: var(--c-5) transparent transparent transparent;
}
.ttfirst::after {
left: 20%;
}
.ttlast::after {
left: 80%;
}
/* Show the tooltip text when you mouse over the tooltip container */
.slider:hover .tooltiptext, .check:hover .tooltiptext {
visibility: visible;
opacity: 1; opacity: 1;
visibility: visible;
} }
.fade { .fade {
@ -813,7 +755,7 @@ input[type=range]::-moz-range-thumb {
} }
#briwrap { #briwrap {
min-width: 267px; min-width: 300px;
float: right; float: right;
margin-top: var(--bmt); margin-top: var(--bmt);
} }
@ -939,8 +881,8 @@ select {
transition-duration: .5s; transition-duration: .5s;
-webkit-backface-visibility: hidden; -webkit-backface-visibility: hidden;
-webkit-transform: translate3d(0,0,0); -webkit-transform: translate3d(0,0,0);
-webkit-appearance: none; -webkit-appearance: none;
-moz-appearance: none; -moz-appearance: none;
backface-visibility: hidden; backface-visibility: hidden;
transform: translate3d(0,0,0); transform: translate3d(0,0,0);
text-overflow: ellipsis; text-overflow: ellipsis;
@ -960,15 +902,15 @@ div.sel-p {
position: relative; position: relative;
} }
div.sel-p:after { div.sel-p:after {
content: ""; content: "";
position: absolute; position: absolute;
right: 10px; right: 10px;
top: 22px; top: 22px;
width: 0; width: 0;
height: 0; height: 0;
border-left: 8px solid transparent; border-left: 8px solid transparent;
border-right: 8px solid transparent; border-right: 8px solid transparent;
border-top: 8px solid var(--c-f); border-top: 8px solid var(--c-f);
} }
select.sel-ple { select.sel-ple {
text-align: center; text-align: center;
@ -1307,14 +1249,14 @@ TD .checkmark, TD .radiomark {
.list { .list {
position: relative; position: relative;
transition: background-color .5s; transition: background-color .5s;
margin: auto auto 10px; margin: auto auto 10px;
line-height: 24px; line-height: 24px;
} }
/* list item */ /* list item */
.lstI { .lstI {
align-items: center; align-items: center;
cursor: pointer; cursor: pointer;
background-color: var(--c-2); background-color: var(--c-2);
overflow: hidden; overflow: hidden;
position: -webkit-sticky; position: -webkit-sticky;
@ -1336,7 +1278,7 @@ TD .checkmark, TD .radiomark {
#segcont .seg:hover:not([class*="expanded"]), #segcont .seg:hover:not([class*="expanded"]),
.lstI:hover:not([class*="expanded"]) { .lstI:hover:not([class*="expanded"]) {
background: var(--c-5); background: var(--c-5);
} }
.selected .checkmark, .selected .checkmark,
@ -1413,8 +1355,8 @@ TD .checkmark, TD .radiomark {
display: block; display: block;
width: 100%; width: 100%;
box-sizing: border-box; box-sizing: border-box;
padding: 8px 40px 8px 44px; padding: 8px 40px 8px 44px;
margin: 5px auto 0; margin: 5px auto 0;
text-align: left; text-align: left;
border-radius: 21px; border-radius: 21px;
background: var(--c-2); background: var(--c-2);
@ -1526,7 +1468,7 @@ TD .checkmark, TD .radiomark {
@media all and (max-width: 335px) { @media all and (max-width: 335px) {
.sliderbubble { .sliderbubble {
display: none; display: none;
} }
} }

131
wled00/data/index.htm
View File

@ -72,8 +72,8 @@
</div> </div>
<div id="briwrap"> <div id="briwrap">
<p class="hd">Brightness</p> <p class="hd">Brightness</p>
<div class="slider" style="padding-right:32px;"> <div class="slider">
<i class="icons slider-icon" onclick="tglTheme()" style="transform: translate(-32px,5px);">&#xe2a6;</i> <i class="icons slider-icon" onclick="tglTheme()" style="transform: translateY(2px);">&#xe2a6;</i>
<div class="sliderwrap il"> <div class="sliderwrap il">
<input id="sliderBri" onchange="setBri()" oninput="updateTrail(this)" max="255" min="1" type="range" value="128" /> <input id="sliderBri" onchange="setBri()" oninput="updateTrail(this)" max="255" min="1" type="range" value="128" />
<div class="sliderdisplay"></div> <div class="sliderdisplay"></div>
@ -88,91 +88,88 @@
<div class ="container"> <div class ="container">
<div id="Colors" class="tabcontent"> <div id="Colors" class="tabcontent">
<div id="picker" class="noslide"></div> <div id="picker" class="noslide"></div>
<div id="hwrap" class="slider"> <div id="hwrap" tooltip="Hue" class="slider">
<div class="sliderwrap il"> <div class="sliderwrap il">
<input id="sliderH" tooltip="Hue" class="noslide" oninput="fromH()" onchange="setColor(0)" max="359" min="0" type="range" value="0" step="any"> <input id="sliderH" class="noslide" oninput="fromH()" onchange="setColor(0)" max="359" min="0" type="range" value="0" step="any">
<div class="sliderdisplay" style="background: linear-gradient(90deg, #f00 2%, #ff0 19%, #0f0 35%, #0ff 52%, #00f 68%, #f0f 85%, #f00)"></div> <div class="sliderdisplay" style="background: linear-gradient(90deg, #f00 2%, #ff0 19%, #0f0 35%, #0ff 52%, #00f 68%, #f0f 85%, #f00)"></div>
</div> </div>
</div> </div>
<div id="swrap" class="slider"> <div id="swrap" tooltip="Saturation" class="slider">
<div class="sliderwrap il"> <div class="sliderwrap il">
<input id="sliderS" tooltip="Saturation" class="noslide" oninput="fromS()" onchange="setColor(0)" max="100" min="0" type="range" value="100" step="any"> <input id="sliderS" class="noslide" oninput="fromS()" onchange="setColor(0)" max="100" min="0" type="range" value="100" step="any">
<div class="sliderdisplay" style="background: linear-gradient(90deg, #aaa 0%, #f00)"></div> <div class="sliderdisplay" style="background: linear-gradient(90deg, #aaa 0%, #f00)"></div>
</div> </div>
</div> </div>
<div id="vwrap" class="slider"> <div id="vwrap" tooltip="Value/Brightness" class="slider">
<div class="sliderwrap il"> <div class="sliderwrap il">
<input id="sliderV" tooltip="Value / Brightness" class="noslide" oninput="fromV()" onchange="setColor(0)" max="100" min="0" type="range" value="100" step="any" /> <input id="sliderV" class="noslide" oninput="fromV()" onchange="setColor(0)" max="100" min="0" type="range" value="100" step="any" />
<div class="sliderdisplay"></div> <div class="sliderdisplay"></div>
</div> </div>
</div> </div>
<div id="kwrap" class="slider"> <div id="kwrap" tooltip="Kelvin/Temperature" class="slider">
<div class="sliderwrap il"> <div class="sliderwrap il">
<input id="sliderK" tooltip="Kelvin / Temperature" class="noslide" oninput="fromK()" onchange="setColor(0)" max="10091" min="1900" type="range" value="6550" /> <input id="sliderK" class="noslide" oninput="fromK()" onchange="setColor(0)" max="10091" min="1900" type="range" value="6550" />
<div class="sliderdisplay"></div> <div class="sliderdisplay"></div>
</div> </div>
</div> </div>
<div id="rgbwrap"> <div id="rgbwrap">
<!--p class="labels hd">RGB color</p--> <div id="rwrap" tooltip="Red channel" class="slider">
<div id="rwrap" class="slider">
<div class="sliderwrap il"> <div class="sliderwrap il">
<input id="sliderR" tooltip="Red channel" class="noslide" oninput="fromRgb()" onchange="setColor(0)" max="255" min="0" type="range" value="128" /> <input id="sliderR" class="noslide" oninput="fromRgb()" onchange="setColor(0)" max="255" min="0" type="range" value="128" />
<div class="sliderdisplay"></div> <div class="sliderdisplay"></div>
</div> </div>
</div> </div>
<div id="gwrap" class="slider"> <div id="gwrap" tooltip="Green channel" class="slider">
<div class="sliderwrap il"> <div class="sliderwrap il">
<input id="sliderG" tooltip="Green channel" class="noslide" oninput="fromRgb()" onchange="setColor(0)" max="255" min="0" type="range" value="128" /> <input id="sliderG" class="noslide" oninput="fromRgb()" onchange="setColor(0)" max="255" min="0" type="range" value="128" />
<div class="sliderdisplay"></div> <div class="sliderdisplay"></div>
</div> </div>
</div> </div>
<div id="bwrap" class="slider"> <div id="bwrap" tooltip="Blue channel" class="slider">
<div class="sliderwrap il"> <div class="sliderwrap il">
<input id="sliderB" tooltip="Blue channel" class="noslide" oninput="fromRgb()" onchange="setColor(0)" max="255" min="0" type="range" value="128" /> <input id="sliderB" class="noslide" oninput="fromRgb()" onchange="setColor(0)" max="255" min="0" type="range" value="128" />
<div class="sliderdisplay"></div> <div class="sliderdisplay"></div>
</div> </div>
</div> </div>
</div> </div>
<div id="wwrap" class="slider"> <div id="wwrap" tooltip="White channel" class="slider">
<!--p class="labels hd">White channel</p-->
<div id="whibri" class="sliderwrap il"> <div id="whibri" class="sliderwrap il">
<input id="sliderW" tooltip="White channel" class="noslide" oninput="fromW()" onchange="setColor(0)" max="255" min="0" type="range" value="128" /> <input id="sliderW" class="noslide" oninput="fromW()" onchange="setColor(0)" max="255" min="0" type="range" value="128" />
<div class="sliderdisplay"></div> <div class="sliderdisplay"></div>
</div> </div>
</div> </div>
<div id="wbal" class="slider"> <div id="wbal" tooltip="White balance" class="slider">
<!--p class="labels hd">White balance</p-->
<div class="sliderwrap il"> <div class="sliderwrap il">
<input id="sliderA" tooltip="White balance" class="noslide" onchange="setBalance(this.value)" max="255" min="0" type="range" value="128" /> <input id="sliderA" class="noslide" onchange="setBalance(this.value)" max="255" min="0" type="range" value="128" />
<div class="sliderdisplay"></div> <div class="sliderdisplay"></div>
</div> </div>
</div> </div>
<div id="qcs-w"> <div id="qcs-w">
<div class="qcs" onclick="pC('#ff0000');" title="Red" style="background-color:#ff0000;"></div> <div class="qcs" onclick="pC('#ff0000');" tooltip="Red" style="background-color:#ff0000;"></div>
<div class="qcs" onclick="pC('#ffa000');" title="Orange" style="background-color:#ffa000;"></div> <div class="qcs" onclick="pC('#ffa000');" tooltip="Orange" style="background-color:#ffa000;"></div>
<div class="qcs" onclick="pC('#ffc800');" title="Yellow" style="background-color:#ffc800;"></div> <div class="qcs" onclick="pC('#ffc800');" tooltip="Yellow" style="background-color:#ffc800;"></div>
<div class="qcs" onclick="pC('#ffe0a0');" title="Warm White" style="background-color:#ffe0a0;"></div> <div class="qcs" onclick="pC('#ffe0a0');" tooltip="Warm White" style="background-color:#ffe0a0;"></div>
<div class="qcs" onclick="pC('#ffffff');" title="White" style="background-color:#ffffff;"></div> <div class="qcs" onclick="pC('#ffffff');" tooltip="White" style="background-color:#ffffff;"></div>
<div class="qcs qcsb" onclick="pC('#000000');" title="Black" style="background-color:#000000;"></div><br> <div class="qcs qcsb" onclick="pC('#000000');" tooltip="Black" style="background-color:#000000;"></div><br>
<div class="qcs" onclick="pC('#ff00ff');" title="Pink" style="background-color:#ff00ff;"></div> <div class="qcs" onclick="pC('#ff00ff');" tooltip="Pink" style="background-color:#ff00ff;"></div>
<div class="qcs" onclick="pC('#0000ff');" title="Blue" style="background-color:#0000ff;"></div> <div class="qcs" onclick="pC('#0000ff');" tooltip="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');" tooltip="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');" tooltip="Green" style="background-color:#08ff00;"></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 class="qcs" onclick="pC('rnd');" tooltip="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 id="csl0" title="Select slot" class="btn xxs cl" onclick="selectSlot(0);" data-r="0" data-g="0" data-b="0" data-w="0">1</button> <button id="csl0" tooltip="Select slot" class="btn xxs cl" onclick="selectSlot(0);" data-r="0" data-g="0" data-b="0" data-w="0">1</button>
<button id="csl1" title="Select slot" class="btn xxs cl" onclick="selectSlot(1);" data-r="0" data-g="0" data-b="0" data-w="0">2</button> <button id="csl1" tooltip="Select slot" class="btn xxs cl" onclick="selectSlot(1);" data-r="0" data-g="0" data-b="0" data-w="0">2</button>
<button id="csl2" title="Select slot" class="btn xxs cl" onclick="selectSlot(2);" data-r="0" data-g="0" data-b="0" data-w="0">3</button> <button id="csl2" tooltip="Select slot" class="btn xxs cl" onclick="selectSlot(2);" data-r="0" data-g="0" data-b="0" data-w="0">3</button>
</div> </div>
<p class="labels h" id="cslLabel"></p> <p class="labels h" id="cslLabel"></p>
<div id="hexw"> <div id="hexw">
<i class="icons sel-icon" onclick="tglRgb()">&#xe22d;</i> <i class="icons sel-icon" onclick="tglRgb()">&#xe22d;</i>
<input id="hexc" title="Hex RGB" type="text" class="noslide" onkeydown="hexEnter()" autocomplete="off" maxlength="8" /> <input id="hexc" tooltip="Hex RGB" type="text" class="noslide" onkeydown="hexEnter()" autocomplete="off" maxlength="8" />
<button id="hexcnf" class="btn btn-xs" onclick="fromHex();"><i class="icons btn-icon">&#xe390;</i></button> <button id="hexcnf" class="btn btn-xs" onclick="fromHex();"><i class="icons btn-icon">&#xe390;</i></button>
</div> </div>
<div style="padding: 8px 0;"> <div style="padding: 8px 0;">
<button class="btn btn-xs" tooltip="Pixel Magic Tool" type="button" onclick="window.location.href=getURL('/pxmagic.htm')"><i class="icons btn-icon">&#xe410;</i></button> <button class="btn btn-xs" tooltip="Pixel Magic Tool" type="button" id="pxmb" onclick="window.location.href=getURL('/pxmagic.htm')"><i class="icons btn-icon">&#xe410;</i></button>
<button class="btn btn-xs" tooltip="Add custom palette" type="button" onclick="window.location.href=getURL('/cpal.htm')"><i class="icons btn-icon">&#xe18a;</i></button> <button class="btn btn-xs" tooltip="Add custom palette" type="button" onclick="window.location.href=getURL('/cpal.htm')"><i class="icons btn-icon">&#xe18a;</i></button>
<button class="btn btn-xs" tooltip="Remove custom palette" type="button" id="rmPal" onclick="palettesData=null;localStorage.removeItem('wledPalx');requestJson({rmcpal:true});setTimeout(loadPalettes,250,loadPalettesData);"><i class="icons btn-icon">&#xe037;</i></button> <button class="btn btn-xs" tooltip="Remove custom palette" type="button" id="rmPal" onclick="palettesData=null;localStorage.removeItem('wledPalx');requestJson({rmcpal:true});setTimeout(loadPalettes,250,loadPalettesData);"><i class="icons btn-icon">&#xe037;</i></button>
</div> </div>
@ -219,83 +216,83 @@
</div> </div>
<div id="sliders"> <div id="sliders">
<div id="filters" class="filter"> <div id="filters" class="filter">
<label id="filterPal" class="check fchkl">&#x1F3A8; <label id="filterPal" tooltip="Uses palette" class="check fchkl">&#x1F3A8;
<input type="checkbox" data-flt="&#x1F3A8;" onchange="filterFx(this)"> <input type="checkbox" data-flt="&#x1F3A8;" onchange="filterFx(this)">
<span class="checkmark" tooltip="Uses palette"></span> <span class="checkmark"></span>
</label> </label>
<label id="filter0D" class="check fchkl hide">&#8226; <label id="filter0D" tooltip="Single pixel" class="check fchkl hide">&#8226;
<input type="checkbox" data-flt="&#8226;" onchange="filterFx(this)"> <input type="checkbox" data-flt="&#8226;" onchange="filterFx(this)">
<span class="checkmark" tooltip="Single pixel"></span> <span class="checkmark"></span>
</label> </label>
<label id="filter1D" class="check fchkl">&#8942; <label id="filter1D" tooltip="1D" class="check fchkl">&#8942;
<input type="checkbox" data-flt="&#8942;" onchange="filterFx(this)"> <input type="checkbox" data-flt="&#8942;" onchange="filterFx(this)">
<span class="checkmark" tooltip="1D"></span> <span class="checkmark"></span>
</label> </label>
<label id="filter2D" class="check fchkl">&#9638; <label id="filter2D" tooltip="2D" class="check fchkl">&#9638;
<input type="checkbox" data-flt="&#9638;" onchange="filterFx(this)"> <input type="checkbox" data-flt="&#9638;" onchange="filterFx(this)">
<span class="checkmark" tooltip="2D Matrix"></span> <span class="checkmark"></span>
</label> </label>
<label id="filterVol" class="check fchkl">&#9834; <label id="filterVol" tooltip="Volume" class="check fchkl">&#9834;
<input type="checkbox" data-flt="&#9834;" onchange="filterFx(this)"> <input type="checkbox" data-flt="&#9834;" onchange="filterFx(this)">
<span class="checkmark" tooltip="Volume"></span> <span class="checkmark"></span>
</label> </label>
<label id="filterFreq" class="check fchkl">&#9835; <label id="filterFreq" tooltip="Frequency" class="check fchkl">&#9835;
<input type="checkbox" data-flt="&#9835;" onchange="filterFx(this)"> <input type="checkbox" data-flt="&#9835;" onchange="filterFx(this)">
<span class="checkmark" tooltip="Frequency"></span> <span class="checkmark"></span>
</label> </label>
</div> </div>
<div id="slider0" class="slider"> <div id="slider0" class="slider">
<i class="icons slider-icon" onclick="tglFreeze()">&#xe325;</i> <i class="icons slider-icon" onclick="tglFreeze()">&#xe325;</i>
<div class="sliderwrap il"> <div tooltip="Effect speed" class="sliderwrap il">
<input id="sliderSpeed" tooltip="Effect speed" class="noslide" onchange="setSpeed()" oninput="updateTrail(this)" max="255" min="0" type="range" value="128" /> <input id="sliderSpeed" class="noslide" onchange="setSpeed()" oninput="updateTrail(this)" max="255" min="0" type="range" value="128" />
<div class="sliderdisplay"></div> <div class="sliderdisplay"></div>
</div> </div>
<output class="sliderbubble"></output> <output class="sliderbubble"></output>
</div> </div>
<div id="slider1" class="slider"> <div id="slider1" class="slider">
<i class="icons slider-icon" onclick="tglLabels()">&#xe409;</i> <i class="icons slider-icon" onclick="tglLabels()">&#xe409;</i>
<div class="sliderwrap il"> <div tooltip="Effect intensity" class="sliderwrap il">
<input id="sliderIntensity" tooltip="Effect intensity" class="noslide" onchange="setIntensity()" oninput="updateTrail(this)" max="255" min="0" type="range" value="128" /> <input id="sliderIntensity" class="noslide" onchange="setIntensity()" oninput="updateTrail(this)" max="255" min="0" type="range" value="128" />
<div class="sliderdisplay"></div> <div class="sliderdisplay"></div>
</div> </div>
<output class="sliderbubble"></output> <output class="sliderbubble"></output>
</div> </div>
<div id="slider2" class="slider hide"> <div id="slider2" class="slider hide">
<i class="icons slider-icon">&#xe410;</i> <i class="icons slider-icon">&#xe410;</i>
<div class="sliderwrap il"> <div tooltip="Custom 1" class="sliderwrap il">
<input id="sliderC1" tooltip="Custom 1" class="noslide" onchange="setCustom(1)" oninput="updateTrail(this)" max="255" min="0" type="range" value="0" /> <input id="sliderC1" class="noslide" onchange="setCustom(1)" oninput="updateTrail(this)" max="255" min="0" type="range" value="0" />
<div class="sliderdisplay"></div> <div class="sliderdisplay"></div>
</div> </div>
<output class="sliderbubble"></output> <output class="sliderbubble"></output>
</div> </div>
<div id="slider3" class="slider hide"> <div id="slider3" class="slider hide">
<i class="icons slider-icon">&#xe0a2;</i> <i class="icons slider-icon">&#xe0a2;</i>
<div class="sliderwrap il"> <div tooltip="Custom 2" class="sliderwrap il">
<input id="sliderC2" tooltip="Custom 2" class="noslide" onchange="setCustom(2)" oninput="updateTrail(this)" max="255" min="0" type="range" value="0" /> <input id="sliderC2" class="noslide" onchange="setCustom(2)" oninput="updateTrail(this)" max="255" min="0" type="range" value="0" />
<div class="sliderdisplay"></div> <div class="sliderdisplay"></div>
</div> </div>
<output class="sliderbubble"></output> <output class="sliderbubble"></output>
</div> </div>
<div id="slider4" class="slider hide"> <div id="slider4" class="slider hide">
<i class="icons slider-icon">&#xe0e8;</i> <i class="icons slider-icon">&#xe0e8;</i>
<div class="sliderwrap il"> <div tooltip="Custom 3" class="sliderwrap il">
<input id="sliderC3" tooltip="Custom 3" class="noslide" onchange="setCustom(3)" oninput="updateTrail(this)" max="31" min="0" type="range" value="0" /> <input id="sliderC3" class="noslide" onchange="setCustom(3)" oninput="updateTrail(this)" max="31" min="0" type="range" value="0" />
<div class="sliderdisplay"></div> <div class="sliderdisplay"></div>
</div> </div>
<output class="sliderbubble"></output> <output class="sliderbubble"></output>
</div> </div>
<div id="fxopt" class="option fade"> <div id="fxopt" class="option fade">
<label id="opt0" class="check ochkl hide"><i class="icons">&#xe2b3;</i> <label id="opt0" tooltip="Check 1" class="check ochkl hide"><i class="icons">&#xe2b3;</i>
<input id="checkO1" type="checkbox" onchange="setOption(1, this.checked)"> <input id="checkO1" type="checkbox" onchange="setOption(1, this.checked)">
<span class="checkmark" tooltip="Check 1"></span> <span class="checkmark"></span>
</label> </label>
<label id="opt1" class="check ochkl hide"><i class="icons">&#xe34b;</i> <label id="opt1" tooltip="Check 2" class="check ochkl hide"><i class="icons">&#xe34b;</i>
<input id="checkO2" type="checkbox" onchange="setOption(2, this.checked)"> <input id="checkO2" type="checkbox" onchange="setOption(2, this.checked)">
<span class="checkmark" tooltip="Check 2"></span> <span class="checkmark"></span>
</label> </label>
<label id="opt2" class="check ochkl hide"><i class="icons">&#xe04c;</i> <label id="opt2" tooltip="Check 3" class="check ochkl hide"><i class="icons">&#xe04c;</i>
<input id="checkO3" type="checkbox" onchange="setOption(3, this.checked)"> <input id="checkO3" type="checkbox" onchange="setOption(3, this.checked)">
<span class="checkmark" tooltip="Check 3"></span> <span class="checkmark"></span>
</label> </label>
</div> </div>
</div> </div>

106
wled00/data/index.js
View File

@ -26,7 +26,7 @@ var ws, cpick, ranges, wsRpt=0;
var cfg = { var cfg = {
theme:{base:"dark", bg:{url:""}, alpha:{bg:0.6,tab:0.8}, color:{bg:""}}, theme:{base:"dark", bg:{url:""}, alpha:{bg:0.6,tab:0.8}, color:{bg:""}},
comp :{colors:{picker: true, rgb: false, quick: true, hex: false}, comp :{colors:{picker: true, rgb: false, quick: true, hex: false},
labels:true, pcmbot:false, pid:true, seglen:false, segpwr:false, segexp:false, labels:true, pcmbot:false, pid:true, seglen:false, segpwr:false, segexp:false,
css:true, hdays:false, fxdef:true, on:0, off:0} css:true, hdays:false, fxdef:true, on:0, off:0}
}; };
var hol = [ var hol = [
@ -74,7 +74,7 @@ function setCSL(cs)
function applyCfg() function applyCfg()
{ {
cTheme(cfg.theme.base === "light"); cTheme(cfg.theme.base === "light");
gId("Colors").style.paddingTop = cfg.comp.colors.picker ? "0" : "20px"; gId("Colors").style.paddingTop = cfg.comp.colors.picker ? "0" : "28px";
var bg = cfg.theme.color.bg; var bg = cfg.theme.color.bg;
if (bg) sCol('--c-1', bg); if (bg) sCol('--c-1', bg);
var l = cfg.comp.labels; var l = cfg.comp.labels;
@ -922,7 +922,7 @@ function populatePalettes()
for (let pa of lJson) { for (let pa of lJson) {
html += generateListItemHtml( html += generateListItemHtml(
'palette', 'palette',
pa[0], pa[0],
pa[1], pa[1],
'setPalette', 'setPalette',
`<div class="lstIprev" style="${genPalPrevCss(pa[0])}"></div>` `<div class="lstIprev" style="${genPalPrevCss(pa[0])}"></div>`
@ -1211,6 +1211,7 @@ function updateUI()
gId('buttonPower').className = (isOn) ? 'active':''; gId('buttonPower').className = (isOn) ? 'active':'';
gId('buttonNl').className = (nlA) ? 'active':''; gId('buttonNl').className = (nlA) ? 'active':'';
gId('buttonSync').className = (syncSend) ? 'active':''; gId('buttonSync').className = (syncSend) ? 'active':'';
gId('pxmb').style.display = (isM) ? "inline-block" : "none";
updateSelectedFx(); updateSelectedFx();
updateSelectedPalette(selectedPal); // must be after updateSelectedFx() to un-hide color slots for * palettes updateSelectedPalette(selectedPal); // must be after updateSelectedFx() to un-hide color slots for * palettes
@ -1502,41 +1503,30 @@ function setEffectParameters(idx)
var paOnOff = (effectPars.length<3 || effectPars[2]=='')?[]:effectPars[2].split(","); var paOnOff = (effectPars.length<3 || effectPars[2]=='')?[]:effectPars[2].split(",");
// set html slider items on/off // set html slider items on/off
let sliders = d.querySelectorAll("#sliders .slider"); let sliders = d.querySelectorAll("#sliders .sliderwrap");
sliders.forEach((slider, i)=>{
sliders.forEach(function(slider, i){ let text = slider.getAttribute("tooltip");
const tooltip = slider.querySelector('[tooltip]'); if ((!controlDefined && i < ((idx < 128) ? 2 : nSliders)) || (slOnOff.length > i && slOnOff[i] != "")) {
const text = tooltip.getAttribute("tooltip"); if (slOnOff.length > i && slOnOff[i] != "!") text = slOnOff[i];
slider.setAttribute("tooltip", text);
if ((!controlDefined && i < ((idx < 128) ? 2 : nSliders)) || (slOnOff.length > i && slOnOff[i] != "")) { slider.parentElement.classList.remove('hide');
const newText = slOnOff.length > i && slOnOff[i] != "!" ? slOnOff[i] : text; } else
tooltip.setAttribute("tooltip", newText); slider.parentElement.classList.add('hide');
slider.classList.remove('hide'); });
} else {
slider.classList.add('hide');
}
});
if (slOnOff.length > 5) { // up to 3 checkboxes if (slOnOff.length > 5) { // up to 3 checkboxes
gId('fxopt').classList.remove('fade'); gId('fxopt').classList.remove('fade');
let checks = d.querySelectorAll("#sliders .ochkl");
let checks = d.querySelectorAll("#fxopt .check"); checks.forEach((check, i)=>{
let text = check.getAttribute("tooltip");
checks.forEach(function(check, i){ if (5+i < slOnOff.length && slOnOff[5+i] !== '') {
const tooltip = check.querySelector('[tooltip]'); if (slOnOff.length > 5+i && slOnOff[5+i] != "!") text = slOnOff[5+i];
const text = tooltip.getAttribute("tooltip"); check.setAttribute("tooltip", text);
if (5 + i < slOnOff.length && slOnOff[5 + i] !== '') {
const newText = slOnOff[5 + i] == "!" ? text : slOnOff[5 + i].substr(0, 16);
tooltip.setAttribute("tooltip", newText);
check.classList.remove('hide'); check.classList.remove('hide');
} else { } else
check.classList.add('hide'); check.classList.add('hide');
} });
}); } else gId('fxopt').classList.add('fade');
} else {
gId('fxopt').classList.add('fade');
}
// set the bottom position of selected effect (sticky) as the top of sliders div // set the bottom position of selected effect (sticky) as the top of sliders div
setInterval(()=>{ setInterval(()=>{
@ -2946,39 +2936,39 @@ function mergeDeep(target, ...sources)
return mergeDeep(target, ...sources); return mergeDeep(target, ...sources);
} }
function tooltip(){ function tooltip()
const elements = d.querySelectorAll("[tooltip]"); {
const elements = d.querySelectorAll("[tooltip]");
elements.forEach(function (element) { elements.forEach((element)=>{
element.addEventListener("mouseover", function () { element.addEventListener("mouseover", ()=>{
const tooltip = d.createElement("span"); const tooltip = d.createElement("span");
tooltip.className = "tooltip"; tooltip.className = "tooltip";
tooltip.textContent = element.getAttribute("tooltip"); tooltip.textContent = element.getAttribute("tooltip");
const { top, left, width } = element.getBoundingClientRect(); let { top, left, width } = element.getBoundingClientRect();
d.body.appendChild(tooltip); d.body.appendChild(tooltip);
const { offsetHeight, offsetWidth } = tooltip; const { offsetHeight, offsetWidth } = tooltip;
const multiplier = element.type == "range" ? 0.2 : 0.4; const multiplier = element.className === "slider" ? 0 : .3;
const newTop = top - (offsetHeight + (offsetHeight * multiplier)); top -= (offsetHeight + (offsetHeight * multiplier));
const newLeft = left + (width / 2) - (offsetWidth / 2); left += (width / 2) - (offsetWidth / 2);
tooltip.style.top = newTop + "px"; tooltip.style.top = top + "px";
tooltip.style.left = newLeft + "px"; tooltip.style.left = left + "px";
tooltip.classList.add("visible"); tooltip.classList.add("visible");
}); });
element.addEventListener("mouseout", function () { element.addEventListener("mouseout", ()=>{
const tooltip = d.querySelector('.tooltip'); const tooltip = d.querySelector('.tooltip');
tooltip.classList.remove("visible");
tooltip.classList.remove("visible"); d.body.removeChild(tooltip);
d.body.removeChild(tooltip); });
}); });
});
}; };
size(); size();

4064
wled00/html_ui.h
View File

File diff suppressed because it is too large Load Diff