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

Merge pull request #3464 from ajotanc/new_feature

Browse Source 
UI tooltips (interface improvements)
This commit is contained in:
Blaž Kristan 2023-10-21 19:27:01 +02:00 committed by GitHub
commit bdc78a826f
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
5 changed files with 2178 additions and 2191 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

97
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 {
@ -465,62 +465,35 @@ button {
/*overflow: visible;*/ /*overflow: visible;*/
} }
/* Tooltip text */ /* New tooltip */
.tooltiptext { .tooltip {
position: absolute;
opacity: 0;
visibility: hidden; visibility: hidden;
transition: opacity .4s ease, visibility .4s ease;
background-color: var(--c-5); background-color: var(--c-5);
/*border: 2px solid var(--c-2);*/
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);
text-align: center; text-align: center;
padding: 4px 8px; padding: 8px 16px;
border-radius: 6px; border-radius: 6px;
/* Position the tooltip text */
width: 160px;
position: absolute;
z-index: 1; 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%; .tooltip::after {
}
.ttfirst {
transform: translateX(-20%);
}
.ttlast {
transform: translateX(-80%);
}
/* Tooltip arrow */
.tooltiptext::after {
content: ""; content: "";
position: absolute; position: absolute;
top: 100%; border: 8px;
left: 50%;
margin-left: -5px;
border-width: 5px;
border-style: solid; border-style: solid;
border-color: var(--c-5) transparent transparent transparent; border-color: var(--c-5) transparent transparent transparent;
} top: 100%;
.ttfirst::after { left: calc(50% - 8px);
left: 20%; z-index: 0;
} }
.ttlast::after {
left: 80%; .tooltip.visible {
}
/* 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 {
@ -783,7 +756,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);
} }
@ -909,8 +882,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;
@ -930,15 +903,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;
@ -1277,14 +1250,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;
@ -1306,7 +1279,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,
@ -1383,8 +1356,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);
@ -1496,7 +1469,7 @@ TD .checkmark, TD .radiomark {
@media all and (max-width: 335px) { @media all and (max-width: 335px) {
.sliderbubble { .sliderbubble {
display: none; display: none;
} }
} }

109
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>
@ -89,101 +89,89 @@
<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" class="slider">
<div class="sliderwrap il"> <div tooltip="Hue" class="sliderwrap il">
<input id="sliderH" 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>
<span class="tooltiptext">Hue</span>
</div> </div>
<div id="swrap" class="slider"> <div id="swrap" class="slider">
<div class="sliderwrap il"> <div tooltip="Saturation" class="sliderwrap il">
<input id="sliderS" 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>
<span class="tooltiptext">Saturation</span>
</div> </div>
<div id="vwrap" class="slider"> <div id="vwrap" class="slider">
<div class="sliderwrap il"> <div tooltip="Value/Brightness" class="sliderwrap il">
<input id="sliderV" 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>
<span class="tooltiptext">Value/Brightness</span>
</div> </div>
<div id="kwrap" class="slider"> <div id="kwrap" class="slider">
<div class="sliderwrap il"> <div tooltip="Kelvin/Temperature" class="sliderwrap il">
<input id="sliderK" 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>
<span class="tooltiptext">Kelvin/Temperature</span>
</div> </div>
<div id="rgbwrap"> <div id="rgbwrap">
<!--p class="labels hd">RGB color</p-->
<div id="rwrap" class="slider"> <div id="rwrap" class="slider">
<div class="sliderwrap il"> <div tooltip="Red channel" class="sliderwrap il">
<input id="sliderR" 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>
<span class="tooltiptext">Red channel</span>
</div> </div>
<div id="gwrap" class="slider"> <div id="gwrap" class="slider">
<div class="sliderwrap il"> <div tooltip="Green channel" class="sliderwrap il">
<input id="sliderG" 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>
<span class="tooltiptext">Green channel</span>
</div> </div>
<div id="bwrap" class="slider"> <div id="bwrap" class="slider">
<div class="sliderwrap il"> <div tooltip="Blue channel" class="sliderwrap il">
<input id="sliderB" 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>
<span class="tooltiptext">Blue channel</span>
</div> </div>
</div> </div>
<div id="wwrap" class="slider"> <div id="wwrap" class="slider">
<!--p class="labels hd">White channel</p--> <div id="whibri" tooltip="White channel" class="sliderwrap il">
<div id="whibri" class="sliderwrap il">
<input id="sliderW" 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>
<span class="tooltiptext">White channel</span>
</div> </div>
<div id="wbal" class="slider"> <div id="wbal" class="slider">
<!--p class="labels hd">White balance</p--> <div tooltip="White balance" class="sliderwrap il">
<div class="sliderwrap il">
<input id="sliderA" 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>
<span class="tooltiptext">White balance</span>
</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 title="Pixel Magic Tool" class="btn btn-xs" 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 title="Add custom palette" class="btn btn-xs" 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 id="rmPal" title="Remove custom palette" class="btn btn-xs" type="button" 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>
<p class="labels" id="pall"><i class="icons sel-icon" onclick="tglHex()">&#xe2b3;</i> Color palette</p> <p class="labels" id="pall"><i class="icons sel-icon" onclick="tglHex()">&#xe2b3;</i> Color palette</p>
<div id="palw" class="il"> <div id="palw" class="il">
@ -228,92 +216,81 @@
</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"></span> <span class="checkmark"></span>
<span class="tooltiptext ttfirst">Uses palette</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"></span> <span class="checkmark"></span>
<span class="tooltiptext">Single pixel</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"></span> <span class="checkmark"></span>
<span class="tooltiptext">1D</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"></span> <span class="checkmark"></span>
<span class="tooltiptext">2D</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"></span> <span class="checkmark"></span>
<span class="tooltiptext">Volume</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"></span> <span class="checkmark"></span>
<span class="tooltiptext ttlast">Frequency</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" 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>
<span id="sliderLabel0" class="tooltiptext">Effect speed</span>
</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" 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>
<span class="tooltiptext" id="sliderLabel1">Effect intensity</span>
</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" 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>
<span class="tooltiptext" id="sliderLabel2">Custom 1</span>
</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" 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>
<span class="tooltiptext" id="sliderLabel3">Custom 2</span>
</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" 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>
<span class="tooltiptext" id="sliderLabel4">Custom 3</span>
</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><span class="tooltiptext" id="optLabel0">Check 1</span> <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"></span> <span class="checkmark"></span>
</label> </label>
<label id="opt1" class="check ochkl hide"><i class="icons">&#xe34b;</i><span class="tooltiptext" id="optLabel1">Check 2</span> <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"></span> <span class="checkmark"></span>
</label> </label>
<label id="opt2" class="check ochkl hide"><i class="icons">&#xe04c;</i><span class="tooltiptext" id="optLabel2">Check 3</span> <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"></span> <span class="checkmark"></span>
</label> </label>

91
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>`
@ -1091,7 +1091,7 @@ function updateTrail(e)
{ {
if (e==null) return; if (e==null) return;
let sd = e.parentNode.getElementsByClassName('sliderdisplay')[0]; let sd = e.parentNode.getElementsByClassName('sliderdisplay')[0];
if (sd && getComputedStyle(sd).getPropertyValue("--bg") !== "none") { if (sd && getComputedStyle(sd).getPropertyValue("--bg").trim() !== "none") { // trim() for Safari
var max = e.hasAttribute('max') ? e.attributes.max.value : 255; var max = e.hasAttribute('max') ? e.attributes.max.value : 255;
var perc = Math.round(e.value * 100 / max); var perc = Math.round(e.value * 100 / max);
if (perc < 50) perc += 2; if (perc < 50) perc += 2;
@ -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,33 +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 nSliders = 5; let sliders = d.querySelectorAll("#sliders .sliderwrap");
for (let i=0; i<nSliders; i++) { sliders.forEach((slider, i)=>{
var slider = gId("slider" + i); let text = slider.getAttribute("tooltip");
var label = gId("sliderLabel" + i); if ((!controlDefined && i<((idx<128)?2:nSliders)) || (slOnOff.length>i && slOnOff[i]!="")) {
// if (not controlDefined and for AC speed or intensity and for SR all sliders) or slider has a value if (slOnOff.length>i && slOnOff[i]!="!") text = slOnOff[i];
if ((!controlDefined && i < ((idx<128)?2:nSliders)) || (slOnOff.length>i && slOnOff[i] != "")) { slider.setAttribute("tooltip", text);
if (slOnOff.length>i && slOnOff[i]!="!") label.innerHTML = slOnOff[i]; slider.parentElement.classList.remove('hide');
else if (i==0) label.innerHTML = "Effect speed"; } else
else if (i==1) label.innerHTML = "Effect intensity"; slider.parentElement.classList.add('hide');
else label.innerHTML = "Custom" + (i-1); });
slider.classList.remove('hide');
} else { if (slOnOff.length > 5) { // up to 3 checkboxes
slider.classList.add('hide');
}
}
if (slOnOff.length>5) { // up to 3 checkboxes
gId('fxopt').classList.remove('fade'); gId('fxopt').classList.remove('fade');
for (let i = 0; i<3; i++) { let checks = d.querySelectorAll("#sliders .ochkl");
checks.forEach((check, i)=>{
let text = check.getAttribute("tooltip");
if (5+i<slOnOff.length && slOnOff[5+i]!=='') { if (5+i<slOnOff.length && slOnOff[5+i]!=='') {
gId('opt'+i).classList.remove('hide'); if (slOnOff.length>5+i && slOnOff[5+i]!="!") text = slOnOff[5+i];
gId('optLabel'+i).innerHTML = slOnOff[5+i]=="!" ? 'Option' : slOnOff[5+i].substr(0,16); check.setAttribute("tooltip", text);
check.classList.remove('hide');
} else } else
gId('opt'+i).classList.add('hide'); check.classList.add('hide');
} });
} else { } else gId('fxopt').classList.add('fade');
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(()=>{
@ -2938,6 +2936,41 @@ function mergeDeep(target, ...sources)
return mergeDeep(target, ...sources); return mergeDeep(target, ...sources);
} }
function tooltip()
{
const elements = d.querySelectorAll("[tooltip]");
elements.forEach((element)=>{
element.addEventListener("mouseover", ()=>{
const tooltip = d.createElement("span");
tooltip.className = "tooltip";
tooltip.textContent = element.getAttribute("tooltip");
let { top, left, width } = element.getBoundingClientRect();
d.body.appendChild(tooltip);
const { offsetHeight, offsetWidth } = tooltip;
const offset = element.classList.contains("sliderwrap") ? 6 : 12;
top -= offsetHeight + offset;
left += (width - offsetWidth) / 2;
tooltip.style.top = top + "px";
tooltip.style.left = left + "px";
tooltip.classList.add("visible");
});
element.addEventListener("mouseout", ()=>{
const tooltip = d.querySelector('.tooltip');
tooltip.classList.remove("visible");
d.body.removeChild(tooltip);
});
});
};
size(); size();
_C.style.setProperty('--n', N); _C.style.setProperty('--n', N);
@ -2949,3 +2982,5 @@ _C.addEventListener('touchstart', lock, false);
_C.addEventListener('mouseout', move, false); _C.addEventListener('mouseout', move, false);
_C.addEventListener('mouseup', move, false); _C.addEventListener('mouseup', move, false);
_C.addEventListener('touchend', move, false); _C.addEventListener('touchend', move, false);
d.addEventListener('DOMContentLoaded', tooltip);

24
wled00/html_settings.h
View File

@ -8,7 +8,7 @@
// Autogenerated from wled00/data/style.css, do not edit!! // Autogenerated from wled00/data/style.css, do not edit!!
const uint16_t PAGE_settingsCss_length = 888; const uint16_t PAGE_settingsCss_length = 888;
const uint8_t PAGE_settingsCss[] PROGMEM = { const uint8_t PAGE_settingsCss[] PROGMEM = {
0x1f, 0x8b, 0x08, 0x00, 0x00, 0x00, 0x00, 0x00, 0x02, 0x13, 0xad, 0x56, 0x51, 0x8b, 0xab, 0x38, 0x1f, 0x8b, 0x08, 0x00, 0x00, 0x00, 0x00, 0x00, 0x02, 0x0a, 0xad, 0x56, 0x51, 0x8b, 0xab, 0x38,
0x14, 0xfe, 0x2b, 0x2e, 0x65, 0x60, 0x2e, 0x54, 0x51, 0xab, 0x9d, 0xde, 0xc8, 0xc2, 0xb2, 0xef, 0x14, 0xfe, 0x2b, 0x2e, 0x65, 0x60, 0x2e, 0x54, 0x51, 0xab, 0x9d, 0xde, 0xc8, 0xc2, 0xb2, 0xef,
0xf7, 0x6d, 0x58, 0x16, 0x96, 0x79, 0x88, 0xe6, 0x58, 0x43, 0x63, 0x22, 0x49, 0xbc, 0xb5, 0x23, 0xf7, 0x6d, 0x58, 0x16, 0x96, 0x79, 0x88, 0xe6, 0x58, 0x43, 0x63, 0x22, 0x49, 0xbc, 0xb5, 0x23,
0xfe, 0xf7, 0x4d, 0xa2, 0x8e, 0xb6, 0x23, 0x73, 0x5f, 0x2e, 0xa5, 0x25, 0xe6, 0xc4, 0xe4, 0x3b, 0xfe, 0xf7, 0x4d, 0xa2, 0x8e, 0xb6, 0x23, 0x73, 0x5f, 0x2e, 0xa5, 0x25, 0xe6, 0xc4, 0xe4, 0x3b,
@ -70,7 +70,7 @@ const uint8_t PAGE_settingsCss[] PROGMEM = {
// Autogenerated from wled00/data/settings.htm, do not edit!! // Autogenerated from wled00/data/settings.htm, do not edit!!
const uint16_t PAGE_settings_length = 1115; const uint16_t PAGE_settings_length = 1115;
const uint8_t PAGE_settings[] PROGMEM = { const uint8_t PAGE_settings[] PROGMEM = {
0x1f, 0x8b, 0x08, 0x00, 0x00, 0x00, 0x00, 0x00, 0x02, 0x13, 0xb5, 0x56, 0xdb, 0x52, 0xe3, 0x46, 0x1f, 0x8b, 0x08, 0x00, 0x00, 0x00, 0x00, 0x00, 0x02, 0x0a, 0xb5, 0x56, 0xdb, 0x52, 0xe3, 0x46,
0x10, 0x7d, 0xf7, 0x57, 0x0c, 0xb3, 0x15, 0x56, 0x2a, 0x64, 0xf9, 0x42, 0x2a, 0x95, 0xc8, 0x96, 0x10, 0x7d, 0xf7, 0x57, 0x0c, 0xb3, 0x15, 0x56, 0x2a, 0x64, 0xf9, 0x42, 0x2a, 0x95, 0xc8, 0x96,
0xa9, 0x2c, 0x97, 0x8d, 0x53, 0x50, 0x4b, 0x05, 0x58, 0x92, 0x4a, 0xf2, 0x30, 0xd6, 0xb4, 0xac, 0xa9, 0x2c, 0x97, 0x8d, 0x53, 0x50, 0x4b, 0x05, 0x58, 0x92, 0x4a, 0xf2, 0x30, 0xd6, 0xb4, 0xac,
0x59, 0xa4, 0x19, 0xd5, 0x4c, 0xcb, 0xe0, 0xb0, 0xfc, 0x7b, 0x7a, 0x64, 0x63, 0x60, 0xe1, 0x21, 0x59, 0xa4, 0x19, 0xd5, 0x4c, 0xcb, 0xe0, 0xb0, 0xfc, 0x7b, 0x7a, 0x64, 0x63, 0x60, 0xe1, 0x21,
@ -146,7 +146,7 @@ const uint8_t PAGE_settings[] PROGMEM = {
// Autogenerated from wled00/data/settings_wifi.htm, do not edit!! // Autogenerated from wled00/data/settings_wifi.htm, do not edit!!
const uint16_t PAGE_settings_wifi_length = 2524; const uint16_t PAGE_settings_wifi_length = 2524;
const uint8_t PAGE_settings_wifi[] PROGMEM = { const uint8_t PAGE_settings_wifi[] PROGMEM = {
0x1f, 0x8b, 0x08, 0x00, 0x00, 0x00, 0x00, 0x00, 0x02, 0x13, 0xad, 0x59, 0x6b, 0x53, 0xdb, 0x48, 0x1f, 0x8b, 0x08, 0x00, 0x00, 0x00, 0x00, 0x00, 0x02, 0x0a, 0xad, 0x59, 0x6b, 0x53, 0xdb, 0x48,
0x16, 0xfd, 0xee, 0x5f, 0xd1, 0xf4, 0x6e, 0x51, 0x52, 0x21, 0x64, 0x0c, 0xf3, 0xc8, 0x1a, 0xcb, 0x16, 0xfd, 0xee, 0x5f, 0xd1, 0xf4, 0x6e, 0x51, 0x52, 0x21, 0x64, 0x0c, 0xf3, 0xc8, 0x1a, 0xcb,
0x59, 0x1e, 0x9e, 0x84, 0x1d, 0x42, 0xd8, 0x98, 0x1d, 0x6a, 0x2b, 0x9b, 0x9a, 0x11, 0x52, 0xdb, 0x59, 0x1e, 0x9e, 0x84, 0x1d, 0x42, 0xd8, 0x98, 0x1d, 0x6a, 0x2b, 0x9b, 0x9a, 0x11, 0x52, 0xdb,
0xee, 0x89, 0xac, 0xd6, 0xa8, 0x5b, 0x36, 0x14, 0xf0, 0xdf, 0xf7, 0xdc, 0x96, 0x64, 0x4b, 0x06, 0xee, 0x89, 0xac, 0xd6, 0xa8, 0x5b, 0x36, 0x14, 0xf0, 0xdf, 0xf7, 0xdc, 0x96, 0x64, 0x4b, 0x06,
@ -310,7 +310,7 @@ const uint8_t PAGE_settings_wifi[] PROGMEM = {
// Autogenerated from wled00/data/settings_leds.htm, do not edit!! // Autogenerated from wled00/data/settings_leds.htm, do not edit!!
const uint16_t PAGE_settings_leds_length = 8389; const uint16_t PAGE_settings_leds_length = 8389;
const uint8_t PAGE_settings_leds[] PROGMEM = { const uint8_t PAGE_settings_leds[] PROGMEM = {
0x1f, 0x8b, 0x08, 0x00, 0x00, 0x00, 0x00, 0x00, 0x02, 0x13, 0xdd, 0x7d, 0xeb, 0x76, 0xda, 0xc8, 0x1f, 0x8b, 0x08, 0x00, 0x00, 0x00, 0x00, 0x00, 0x02, 0x0a, 0xdd, 0x7d, 0xeb, 0x76, 0xda, 0xc8,
0x96, 0xf0, 0x7f, 0x9e, 0x42, 0xae, 0xee, 0x76, 0xa4, 0x46, 0x80, 0x84, 0xc1, 0x4d, 0x00, 0xe1, 0x96, 0xf0, 0x7f, 0x9e, 0x42, 0xae, 0xee, 0x76, 0xa4, 0x46, 0x80, 0x84, 0xc1, 0x4d, 0x00, 0xe1,
0x31, 0x76, 0x92, 0xf6, 0x1c, 0x3b, 0xf6, 0xb2, 0x9d, 0xce, 0x99, 0x95, 0xce, 0x74, 0x84, 0x28, 0x31, 0x76, 0x92, 0xf6, 0x1c, 0x3b, 0xf6, 0xb2, 0x9d, 0xce, 0x99, 0x95, 0xce, 0x74, 0x84, 0x28,
0x40, 0xb1, 0x90, 0x38, 0x92, 0xf0, 0x65, 0x6c, 0xcf, 0x33, 0xcd, 0x33, 0xcc, 0x93, 0x7d, 0x7b, 0x40, 0xb1, 0x90, 0x38, 0x92, 0xf0, 0x65, 0x6c, 0xcf, 0x33, 0xcd, 0x33, 0xcc, 0x93, 0x7d, 0x7b,
@ -841,7 +841,7 @@ const uint8_t PAGE_settings_leds[] PROGMEM = {
// Autogenerated from wled00/data/settings_dmx.htm, do not edit!! // Autogenerated from wled00/data/settings_dmx.htm, do not edit!!
const uint16_t PAGE_settings_dmx_length = 1740; const uint16_t PAGE_settings_dmx_length = 1740;
const uint8_t PAGE_settings_dmx[] PROGMEM = { const uint8_t PAGE_settings_dmx[] PROGMEM = {
0x1f, 0x8b, 0x08, 0x00, 0x00, 0x00, 0x00, 0x00, 0x02, 0x13, 0x95, 0x57, 0x5b, 0x73, 0xdb, 0x36, 0x1f, 0x8b, 0x08, 0x00, 0x00, 0x00, 0x00, 0x00, 0x02, 0x0a, 0x95, 0x57, 0x5b, 0x73, 0xdb, 0x36,
0x16, 0x7e, 0xd7, 0xaf, 0x40, 0xf0, 0x50, 0x93, 0x23, 0x86, 0x94, 0x9c, 0x75, 0xb7, 0x91, 0x45, 0x16, 0x7e, 0xd7, 0xaf, 0x40, 0xf0, 0x50, 0x93, 0x23, 0x86, 0x94, 0x9c, 0x75, 0xb7, 0x91, 0x45,
0x7a, 0x63, 0xc5, 0x6b, 0x7b, 0xc7, 0x76, 0x3d, 0x51, 0xd2, 0x74, 0xa7, 0xe9, 0x74, 0x20, 0x12, 0x7a, 0x63, 0xc5, 0x6b, 0x7b, 0xc7, 0x76, 0x3d, 0x51, 0xd2, 0x74, 0xa7, 0xe9, 0x74, 0x20, 0x12,
0x12, 0x51, 0x93, 0x04, 0x17, 0x00, 0x25, 0xbb, 0x69, 0xfe, 0xfb, 0x7e, 0x00, 0xa9, 0x8b, 0x6f, 0x12, 0x51, 0x93, 0x04, 0x17, 0x00, 0x25, 0xbb, 0x69, 0xfe, 0xfb, 0x7e, 0x00, 0xa9, 0x8b, 0x6f,
@ -956,7 +956,7 @@ const uint8_t PAGE_settings_dmx[] PROGMEM = {
// Autogenerated from wled00/data/settings_ui.htm, do not edit!! // Autogenerated from wled00/data/settings_ui.htm, do not edit!!
const uint16_t PAGE_settings_ui_length = 3302; const uint16_t PAGE_settings_ui_length = 3302;
const uint8_t PAGE_settings_ui[] PROGMEM = { const uint8_t PAGE_settings_ui[] PROGMEM = {
0x1f, 0x8b, 0x08, 0x00, 0x00, 0x00, 0x00, 0x00, 0x02, 0x13, 0xad, 0x5a, 0x6b, 0x73, 0xdb, 0xb8, 0x1f, 0x8b, 0x08, 0x00, 0x00, 0x00, 0x00, 0x00, 0x02, 0x0a, 0xad, 0x59, 0x6b, 0x73, 0xdb, 0xb8,
0x15, 0xfd, 0xae, 0x5f, 0x81, 0x20, 0x19, 0xaf, 0x38, 0x66, 0x68, 0xd9, 0xd9, 0x99, 0x26, 0x92, 0x15, 0xfd, 0xae, 0x5f, 0x81, 0x20, 0x19, 0xaf, 0x38, 0x66, 0x68, 0xd9, 0xd9, 0x99, 0x26, 0x92,
0x28, 0x37, 0x76, 0xbc, 0x89, 0x77, 0x9c, 0x4d, 0x1a, 0xc5, 0xcd, 0x76, 0xd2, 0x8c, 0x97, 0x22, 0x28, 0x37, 0x76, 0xbc, 0x89, 0x77, 0x9c, 0x4d, 0x1a, 0xc5, 0xcd, 0x76, 0xd2, 0x8c, 0x97, 0x22,
0x21, 0x09, 0x31, 0x45, 0x70, 0x09, 0xd0, 0x8f, 0x2a, 0xfa, 0xef, 0x3d, 0x17, 0x20, 0x25, 0xca, 0x21, 0x09, 0x31, 0x45, 0x70, 0x09, 0xd0, 0x8f, 0x2a, 0xfa, 0xef, 0x3d, 0x17, 0x20, 0x25, 0xca,
@ -1169,7 +1169,7 @@ const uint8_t PAGE_settings_ui[] PROGMEM = {
// Autogenerated from wled00/data/settings_sync.htm, do not edit!! // Autogenerated from wled00/data/settings_sync.htm, do not edit!!
const uint16_t PAGE_settings_sync_length = 3548; const uint16_t PAGE_settings_sync_length = 3548;
const uint8_t PAGE_settings_sync[] PROGMEM = { const uint8_t PAGE_settings_sync[] PROGMEM = {
0x1f, 0x8b, 0x08, 0x00, 0x00, 0x00, 0x00, 0x00, 0x02, 0x13, 0x9d, 0x5a, 0xeb, 0x53, 0xdb, 0x48, 0x1f, 0x8b, 0x08, 0x00, 0x00, 0x00, 0x00, 0x00, 0x02, 0x0a, 0x9d, 0x5a, 0xeb, 0x53, 0xdb, 0x48,
0x12, 0xff, 0xae, 0xbf, 0x62, 0xa2, 0xab, 0xca, 0xda, 0x8b, 0xf1, 0x0b, 0x4c, 0x08, 0x58, 0xca, 0x12, 0xff, 0xae, 0xbf, 0x62, 0xa2, 0xab, 0xca, 0xda, 0x8b, 0xf1, 0x0b, 0x4c, 0x08, 0x58, 0xca,
0x01, 0x26, 0xc4, 0x77, 0x01, 0x1c, 0x1b, 0x36, 0xd9, 0xba, 0xbb, 0xda, 0x1a, 0x4b, 0x63, 0x7b, 0x01, 0x26, 0xc4, 0x77, 0x01, 0x1c, 0x1b, 0x36, 0xd9, 0xba, 0xbb, 0xda, 0x1a, 0x4b, 0x63, 0x7b,
0x40, 0xd2, 0x68, 0x35, 0x23, 0x1e, 0x95, 0xcd, 0xff, 0x7e, 0xdd, 0x33, 0x92, 0xb0, 0x85, 0x5f, 0x40, 0xd2, 0x68, 0x35, 0x23, 0x1e, 0x95, 0xcd, 0xff, 0x7e, 0xdd, 0x33, 0x92, 0xb0, 0x85, 0x5f,
@ -1397,7 +1397,7 @@ const uint8_t PAGE_settings_sync[] PROGMEM = {
// Autogenerated from wled00/data/settings_time.htm, do not edit!! // Autogenerated from wled00/data/settings_time.htm, do not edit!!
const uint16_t PAGE_settings_time_length = 3432; const uint16_t PAGE_settings_time_length = 3432;
const uint8_t PAGE_settings_time[] PROGMEM = { const uint8_t PAGE_settings_time[] PROGMEM = {
0x1f, 0x8b, 0x08, 0x00, 0x00, 0x00, 0x00, 0x00, 0x02, 0x13, 0xd5, 0x1a, 0x6b, 0x77, 0xda, 0x38, 0x1f, 0x8b, 0x08, 0x00, 0x00, 0x00, 0x00, 0x00, 0x02, 0x0a, 0xd5, 0x1a, 0x6b, 0x77, 0xda, 0x38,
0xf6, 0x3b, 0xbf, 0x42, 0x51, 0x7b, 0x32, 0xf6, 0xc4, 0x3c, 0x13, 0xda, 0x04, 0xb0, 0xb3, 0x84, 0xf6, 0x3b, 0xbf, 0x42, 0x51, 0x7b, 0x32, 0xf6, 0xc4, 0x3c, 0x13, 0xda, 0x04, 0xb0, 0xb3, 0x84,
0xd0, 0x26, 0x2d, 0x90, 0x9c, 0x42, 0x27, 0xbb, 0x7d, 0x9c, 0xa9, 0xc0, 0x02, 0x9c, 0x18, 0x89, 0xd0, 0x26, 0x2d, 0x90, 0x9c, 0x42, 0x27, 0xbb, 0x7d, 0x9c, 0xa9, 0xc0, 0x02, 0x9c, 0x18, 0x89,
0xb5, 0xe5, 0x90, 0x6c, 0x9a, 0xff, 0xbe, 0x57, 0x92, 0x31, 0x4f, 0x27, 0x6d, 0x67, 0xf6, 0xc3, 0xb5, 0xe5, 0x90, 0x6c, 0x9a, 0xff, 0xbe, 0x57, 0x92, 0x31, 0x4f, 0x27, 0x6d, 0x67, 0xf6, 0xc3,
@ -1618,7 +1618,7 @@ const uint8_t PAGE_settings_time[] PROGMEM = {
// Autogenerated from wled00/data/settings_sec.htm, do not edit!! // Autogenerated from wled00/data/settings_sec.htm, do not edit!!
const uint16_t PAGE_settings_sec_length = 2551; const uint16_t PAGE_settings_sec_length = 2551;
const uint8_t PAGE_settings_sec[] PROGMEM = { const uint8_t PAGE_settings_sec[] PROGMEM = {
0x1f, 0x8b, 0x08, 0x00, 0x00, 0x00, 0x00, 0x00, 0x02, 0x13, 0x9d, 0x58, 0x6d, 0x53, 0xdb, 0x48, 0x1f, 0x8b, 0x08, 0x00, 0x00, 0x00, 0x00, 0x00, 0x02, 0x0a, 0x9d, 0x58, 0x6d, 0x53, 0xdb, 0x48,
0x12, 0xfe, 0xee, 0x5f, 0x31, 0xcc, 0x56, 0x65, 0xa5, 0x8b, 0x90, 0x81, 0xe4, 0xb6, 0x12, 0xb0, 0x12, 0xfe, 0xee, 0x5f, 0x31, 0xcc, 0x56, 0x65, 0xa5, 0x8b, 0x90, 0x81, 0xe4, 0xb6, 0x12, 0xb0,
0xcc, 0x41, 0x20, 0x17, 0xae, 0x20, 0x50, 0x18, 0x36, 0x77, 0xb5, 0xb7, 0x95, 0x1a, 0x4b, 0x63, 0xcc, 0x41, 0x20, 0x17, 0xae, 0x20, 0x50, 0x18, 0x36, 0x77, 0xb5, 0xb7, 0x95, 0x1a, 0x4b, 0x63,
0x6b, 0x62, 0x59, 0xa3, 0x9d, 0x19, 0xe1, 0x70, 0xd9, 0xfc, 0xf7, 0x7b, 0x7a, 0x24, 0xf9, 0x85, 0x6b, 0x62, 0x59, 0xa3, 0x9d, 0x19, 0xe1, 0x70, 0xd9, 0xfc, 0xf7, 0x7b, 0x7a, 0x24, 0xf9, 0x85,
@ -1784,7 +1784,7 @@ const uint8_t PAGE_settings_sec[] PROGMEM = {
// Autogenerated from wled00/data/settings_um.htm, do not edit!! // Autogenerated from wled00/data/settings_um.htm, do not edit!!
const uint16_t PAGE_settings_um_length = 3298; const uint16_t PAGE_settings_um_length = 3298;
const uint8_t PAGE_settings_um[] PROGMEM = { const uint8_t PAGE_settings_um[] PROGMEM = {
0x1f, 0x8b, 0x08, 0x00, 0x00, 0x00, 0x00, 0x00, 0x02, 0x13, 0xad, 0x59, 0x6d, 0x73, 0xdb, 0x36, 0x1f, 0x8b, 0x08, 0x00, 0x00, 0x00, 0x00, 0x00, 0x02, 0x0a, 0xad, 0x59, 0x6d, 0x73, 0xdb, 0x36,
0x12, 0xfe, 0xae, 0x5f, 0x41, 0xa3, 0x19, 0x99, 0x1c, 0xd1, 0x94, 0x9c, 0xb6, 0x33, 0x39, 0x49, 0x12, 0xfe, 0xae, 0x5f, 0x41, 0xa3, 0x19, 0x99, 0x1c, 0xd1, 0x94, 0x9c, 0xb6, 0x33, 0x39, 0x49,
0x94, 0x2e, 0x76, 0xdc, 0xc6, 0x97, 0x17, 0x7b, 0xe2, 0xa4, 0x99, 0x1b, 0xc7, 0x17, 0x53, 0x22, 0x94, 0x2e, 0x76, 0xdc, 0xc6, 0x97, 0x17, 0x7b, 0xe2, 0xa4, 0x99, 0x1b, 0xc7, 0x17, 0x53, 0x22,
0x24, 0x21, 0xa6, 0x08, 0x96, 0x00, 0xed, 0xf8, 0x64, 0xfd, 0xf7, 0x7b, 0x16, 0x20, 0x29, 0xca, 0x24, 0x21, 0xa6, 0x08, 0x96, 0x00, 0xed, 0xf8, 0x64, 0xfd, 0xf7, 0x7b, 0x16, 0x20, 0x29, 0xca,
@ -1997,7 +1997,7 @@ const uint8_t PAGE_settings_um[] PROGMEM = {
// Autogenerated from wled00/data/settings_2D.htm, do not edit!! // Autogenerated from wled00/data/settings_2D.htm, do not edit!!
const uint16_t PAGE_settings_2D_length = 3288; const uint16_t PAGE_settings_2D_length = 3288;
const uint8_t PAGE_settings_2D[] PROGMEM = { const uint8_t PAGE_settings_2D[] PROGMEM = {
0x1f, 0x8b, 0x08, 0x00, 0x00, 0x00, 0x00, 0x00, 0x02, 0x13, 0xc5, 0x5a, 0x5b, 0x77, 0xdb, 0x36, 0x1f, 0x8b, 0x08, 0x00, 0x00, 0x00, 0x00, 0x00, 0x02, 0x0a, 0xc5, 0x5a, 0x5b, 0x77, 0xdb, 0x36,
0x12, 0x7e, 0xd7, 0xaf, 0x80, 0xb1, 0x5d, 0x97, 0xb4, 0xa8, 0x9b, 0x9b, 0xf6, 0xb4, 0x92, 0x28, 0x12, 0x7e, 0xd7, 0xaf, 0x80, 0xb1, 0x5d, 0x97, 0xb4, 0xa8, 0x9b, 0x9b, 0xf6, 0xb4, 0x92, 0x28,
0x6d, 0x1c, 0xa7, 0xb1, 0xf7, 0xd8, 0x89, 0x8e, 0xe5, 0xc6, 0xc9, 0x69, 0x7b, 0x36, 0x34, 0x09, 0x6d, 0x1c, 0xa7, 0xb1, 0xf7, 0xd8, 0x89, 0x8e, 0xe5, 0xc6, 0xc9, 0x69, 0x7b, 0x36, 0x34, 0x09,
0x49, 0x48, 0x28, 0x80, 0x25, 0x40, 0xd9, 0xae, 0xe3, 0xff, 0xbe, 0x33, 0x00, 0x6f, 0xba, 0xd8, 0x49, 0x48, 0x28, 0x80, 0x25, 0x40, 0xd9, 0xae, 0xe3, 0xff, 0xbe, 0x33, 0x00, 0x6f, 0xba, 0xd8,
@ -2209,7 +2209,7 @@ const uint8_t PAGE_settings_2D[] PROGMEM = {
// Autogenerated from wled00/data/settings_pin.htm, do not edit!! // Autogenerated from wled00/data/settings_pin.htm, do not edit!!
const uint16_t PAGE_settings_pin_length = 461; const uint16_t PAGE_settings_pin_length = 461;
const uint8_t PAGE_settings_pin[] PROGMEM = { const uint8_t PAGE_settings_pin[] PROGMEM = {
0x1f, 0x8b, 0x08, 0x00, 0x00, 0x00, 0x00, 0x00, 0x02, 0x13, 0x5d, 0x92, 0x4b, 0x6f, 0x13, 0x31, 0x1f, 0x8b, 0x08, 0x00, 0x00, 0x00, 0x00, 0x00, 0x02, 0x0a, 0x5d, 0x92, 0x4b, 0x6f, 0x13, 0x31,
0x14, 0x85, 0xf7, 0xf3, 0x2b, 0xcc, 0xdd, 0x34, 0x41, 0xc9, 0x4c, 0xa9, 0x58, 0x80, 0x6a, 0x8f, 0x14, 0x85, 0xf7, 0xf3, 0x2b, 0xcc, 0xdd, 0x34, 0x41, 0xc9, 0x4c, 0xa9, 0x58, 0x80, 0x6a, 0x8f,
0x50, 0xa0, 0x0b, 0x36, 0xa5, 0x52, 0xd9, 0xa0, 0xaa, 0xaa, 0x1c, 0xfb, 0x4e, 0x62, 0xd5, 0x8f, 0x50, 0xa0, 0x0b, 0x36, 0xa5, 0x52, 0xd9, 0xa0, 0xaa, 0xaa, 0x1c, 0xfb, 0x4e, 0x62, 0xd5, 0x8f,
0xc1, 0x8f, 0x84, 0x80, 0xfa, 0xdf, 0xb9, 0x9e, 0x29, 0x05, 0xb1, 0x19, 0xfb, 0x5c, 0xdb, 0xe7, 0xc1, 0x8f, 0x84, 0x80, 0xfa, 0xdf, 0xb9, 0x9e, 0x29, 0x05, 0xb1, 0x19, 0xfb, 0x5c, 0xdb, 0xe7,

4048
wled00/html_ui.h
View File

File diff suppressed because it is too large Load Diff