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;
top: 0;
z-index: 2;
margin: 0 auto auto;
margin: 0 auto auto;
}
.staybot {
@ -465,62 +465,35 @@ button {
/*overflow: visible;*/
}
/* Tooltip text */
.tooltiptext {
/* New tooltip */
.tooltip {
position: absolute;
opacity: 0;
visibility: hidden;
transition: opacity .4s ease, visibility .4s ease;
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;
padding: 8px 16px;
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 {
.tooltip::after {
content: "";
position: absolute;
top: 100%;
left: 50%;
margin-left: -5px;
border-width: 5px;
border: 8px;
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;
top: 100%;
left: calc(50% - 8px);
z-index: 0;
}
.tooltip.visible {
opacity: 1;
visibility: visible;
}
.fade {
@ -783,7 +756,7 @@ input[type=range]::-moz-range-thumb {
}
#briwrap {
min-width: 267px;
min-width: 300px;
float: right;
margin-top: var(--bmt);
}
@ -909,8 +882,8 @@ select {
transition-duration: .5s;
-webkit-backface-visibility: hidden;
-webkit-transform: translate3d(0,0,0);
-webkit-appearance: none;
-moz-appearance: none;
-webkit-appearance: none;
-moz-appearance: none;
backface-visibility: hidden;
transform: translate3d(0,0,0);
text-overflow: ellipsis;
@ -930,15 +903,15 @@ div.sel-p {
position: relative;
}
div.sel-p:after {
content: "";
position: absolute;
right: 10px;
top: 22px;
width: 0;
height: 0;
border-left: 8px solid transparent;
border-right: 8px solid transparent;
border-top: 8px solid var(--c-f);
content: "";
position: absolute;
right: 10px;
top: 22px;
width: 0;
height: 0;
border-left: 8px solid transparent;
border-right: 8px solid transparent;
border-top: 8px solid var(--c-f);
}
select.sel-ple {
text-align: center;
@ -1277,14 +1250,14 @@ TD .checkmark, TD .radiomark {
.list {
position: relative;
transition: background-color .5s;
margin: auto auto 10px;
margin: auto auto 10px;
line-height: 24px;
}
/* list item */
.lstI {
align-items: center;
cursor: pointer;
cursor: pointer;
background-color: var(--c-2);
overflow: hidden;
position: -webkit-sticky;
@ -1306,7 +1279,7 @@ TD .checkmark, TD .radiomark {
#segcont .seg:hover:not([class*="expanded"]),
.lstI:hover:not([class*="expanded"]) {
background: var(--c-5);
background: var(--c-5);
}
.selected .checkmark,
@ -1383,8 +1356,8 @@ TD .checkmark, TD .radiomark {
display: block;
width: 100%;
box-sizing: border-box;
padding: 8px 40px 8px 44px;
margin: 5px auto 0;
padding: 8px 40px 8px 44px;
margin: 5px auto 0;
text-align: left;
border-radius: 21px;
background: var(--c-2);
@ -1496,7 +1469,7 @@ TD .checkmark, TD .radiomark {
@media all and (max-width: 335px) {
.sliderbubble {
display: none;
display: none;
}
}

109
wled00/data/index.htm
View File

@ -72,8 +72,8 @@
</div>
<div id="briwrap">
<p class="hd">Brightness</p>
<div class="slider" style="padding-right:32px;">
<i class="icons slider-icon" onclick="tglTheme()" style="transform: translate(-32px,5px);">&#xe2a6;</i>
<div class="slider">
<i class="icons slider-icon" onclick="tglTheme()" style="transform: translateY(2px);">&#xe2a6;</i>
<div class="sliderwrap il">
<input id="sliderBri" onchange="setBri()" oninput="updateTrail(this)" max="255" min="1" type="range" value="128" />
<div class="sliderdisplay"></div>
@ -89,101 +89,89 @@
<div id="Colors" class="tabcontent">
<div id="picker" class="noslide"></div>
<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">
<div class="sliderdisplay" style="background: linear-gradient(90deg, #f00 2%, #ff0 19%, #0f0 35%, #0ff 52%, #00f 68%, #f0f 85%, #f00)"></div>
</div>
<span class="tooltiptext">Hue</span>
</div>
<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">
<div class="sliderdisplay" style="background: linear-gradient(90deg, #aaa 0%, #f00)"></div>
</div>
<span class="tooltiptext">Saturation</span>
</div>
<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" />
<div class="sliderdisplay"></div>
</div>
<span class="tooltiptext">Value/Brightness</span>
</div>
<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" />
<div class="sliderdisplay"></div>
</div>
<span class="tooltiptext">Kelvin/Temperature</span>
</div>
<div id="rgbwrap">
<!--p class="labels hd">RGB color</p-->
<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" />
<div class="sliderdisplay"></div>
</div>
<span class="tooltiptext">Red channel</span>
</div>
<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" />
<div class="sliderdisplay"></div>
</div>
<span class="tooltiptext">Green channel</span>
</div>
<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" />
<div class="sliderdisplay"></div>
</div>
<span class="tooltiptext">Blue channel</span>
</div>
</div>
<div id="wwrap" class="slider">
<!--p class="labels hd">White channel</p-->
<div id="whibri" class="sliderwrap il">
<div id="whibri" tooltip="White channel" class="sliderwrap il">
<input id="sliderW" class="noslide" oninput="fromW()" onchange="setColor(0)" max="255" min="0" type="range" value="128" />
<div class="sliderdisplay"></div>
</div>
<span class="tooltiptext">White channel</span>
</div>
<div id="wbal" class="slider">
<!--p class="labels hd">White balance</p-->
<div class="sliderwrap il">
<div tooltip="White balance" class="sliderwrap il">
<input id="sliderA" class="noslide" onchange="setBalance(this.value)" max="255" min="0" type="range" value="128" />
<div class="sliderdisplay"></div>
</div>
<span class="tooltiptext">White balance</span>
</div>
<div id="qcs-w">
<div class="qcs" onclick="pC('#ff0000');" title="Red" style="background-color:#ff0000;"></div>
<div class="qcs" onclick="pC('#ffa000');" title="Orange" style="background-color:#ffa000;"></div>
<div class="qcs" onclick="pC('#ffc800');" title="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('#ffffff');" title="White" style="background-color:#ffffff;"></div>
<div class="qcs qcsb" onclick="pC('#000000');" title="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('#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:linear-gradient(to right, red, orange, yellow, green, blue, purple);transform: translateY(-11px);">R</div>
<div class="qcs" onclick="pC('#ff0000');" tooltip="Red" style="background-color:#ff0000;"></div>
<div class="qcs" onclick="pC('#ffa000');" tooltip="Orange" style="background-color:#ffa000;"></div>
<div class="qcs" onclick="pC('#ffc800');" tooltip="Yellow" style="background-color:#ffc800;"></div>
<div class="qcs" onclick="pC('#ffe0a0');" tooltip="Warm White" style="background-color:#ffe0a0;"></div>
<div class="qcs" onclick="pC('#ffffff');" tooltip="White" style="background-color:#ffffff;"></div>
<div class="qcs qcsb" onclick="pC('#000000');" tooltip="Black" style="background-color:#000000;"></div><br>
<div class="qcs" onclick="pC('#ff00ff');" tooltip="Pink" style="background-color:#ff00ff;"></div>
<div class="qcs" onclick="pC('#0000ff');" tooltip="Blue" style="background-color:#0000ff;"></div>
<div class="qcs" onclick="pC('#00ffc8');" tooltip="Cyan" style="background-color:#00ffc8;"></div>
<div class="qcs" onclick="pC('#08ff00');" tooltip="Green" style="background-color:#08ff00;"></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 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="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="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="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" 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" 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>
<p class="labels h" id="cslLabel"></p>
<div id="hexw">
<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>
</div>
<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 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 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="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="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>
<p class="labels" id="pall"><i class="icons sel-icon" onclick="tglHex()">&#xe2b3;</i> Color palette</p>
<div id="palw" class="il">
@ -228,92 +216,81 @@
</div>
<div id="sliders">
<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)">
<span class="checkmark"></span>
<span class="tooltiptext ttfirst">Uses palette</span>
</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)">
<span class="checkmark"></span>
<span class="tooltiptext">Single pixel</span>
</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)">
<span class="checkmark"></span>
<span class="tooltiptext">1D</span>
</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)">
<span class="checkmark"></span>
<span class="tooltiptext">2D</span>
</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)">
<span class="checkmark"></span>
<span class="tooltiptext">Volume</span>
</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)">
<span class="checkmark"></span>
<span class="tooltiptext ttlast">Frequency</span>
</label>
</div>
<div id="slider0" class="slider">
<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" />
<div class="sliderdisplay"></div>
</div>
<output class="sliderbubble"></output>
<span id="sliderLabel0" class="tooltiptext">Effect speed</span>
</div>
<div id="slider1" class="slider">
<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" />
<div class="sliderdisplay"></div>
</div>
<output class="sliderbubble"></output>
<span class="tooltiptext" id="sliderLabel1">Effect intensity</span>
</div>
<div id="slider2" class="slider hide">
<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" />
<div class="sliderdisplay"></div>
</div>
<output class="sliderbubble"></output>
<span class="tooltiptext" id="sliderLabel2">Custom 1</span>
</div>
<div id="slider3" class="slider hide">
<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" />
<div class="sliderdisplay"></div>
</div>
<output class="sliderbubble"></output>
<span class="tooltiptext" id="sliderLabel3">Custom 2</span>
</div>
<div id="slider4" class="slider hide">
<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" />
<div class="sliderdisplay"></div>
</div>
<output class="sliderbubble"></output>
<span class="tooltiptext" id="sliderLabel4">Custom 3</span>
</div>
<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)">
<span class="checkmark"></span>
</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)">
<span class="checkmark"></span>
</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)">
<span class="checkmark"></span>
</label>

91
wled00/data/index.js
View File

@ -26,7 +26,7 @@ var ws, cpick, ranges, wsRpt=0;
var cfg = {
theme:{base:"dark", bg:{url:""}, alpha:{bg:0.6,tab:0.8}, color:{bg:""}},
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}
};
var hol = [
@ -74,7 +74,7 @@ function setCSL(cs)
function applyCfg()
{
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;
if (bg) sCol('--c-1', bg);
var l = cfg.comp.labels;
@ -922,7 +922,7 @@ function populatePalettes()
for (let pa of lJson) {
html += generateListItemHtml(
'palette',
pa[0],
pa[0],
pa[1],
'setPalette',
`<div class="lstIprev" style="${genPalPrevCss(pa[0])}"></div>`
@ -1091,7 +1091,7 @@ function updateTrail(e)
{
if (e==null) return;
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 perc = Math.round(e.value * 100 / max);
if (perc < 50) perc += 2;
@ -1211,6 +1211,7 @@ function updateUI()
gId('buttonPower').className = (isOn) ? 'active':'';
gId('buttonNl').className = (nlA) ? 'active':'';
gId('buttonSync').className = (syncSend) ? 'active':'';
gId('pxmb').style.display = (isM) ? "inline-block" : "none";
updateSelectedFx();
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(",");
// set html slider items on/off
let nSliders = 5;
for (let i=0; i<nSliders; i++) {
var slider = gId("slider" + i);
var label = gId("sliderLabel" + i);
// if (not controlDefined and for AC speed or intensity and for SR all sliders) or slider has a value
if ((!controlDefined && i < ((idx<128)?2:nSliders)) || (slOnOff.length>i && slOnOff[i] != "")) {
if (slOnOff.length>i && slOnOff[i]!="!") label.innerHTML = slOnOff[i];
else if (i==0) label.innerHTML = "Effect speed";
else if (i==1) label.innerHTML = "Effect intensity";
else label.innerHTML = "Custom" + (i-1);
slider.classList.remove('hide');
} else {
slider.classList.add('hide');
}
}
if (slOnOff.length>5) { // up to 3 checkboxes
let sliders = d.querySelectorAll("#sliders .sliderwrap");
sliders.forEach((slider, i)=>{
let text = slider.getAttribute("tooltip");
if ((!controlDefined && i<((idx<128)?2:nSliders)) || (slOnOff.length>i && slOnOff[i]!="")) {
if (slOnOff.length>i && slOnOff[i]!="!") text = slOnOff[i];
slider.setAttribute("tooltip", text);
slider.parentElement.classList.remove('hide');
} else
slider.parentElement.classList.add('hide');
});
if (slOnOff.length > 5) { // up to 3 checkboxes
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]!=='') {
gId('opt'+i).classList.remove('hide');
gId('optLabel'+i).innerHTML = slOnOff[5+i]=="!" ? 'Option' : slOnOff[5+i].substr(0,16);
if (slOnOff.length>5+i && slOnOff[5+i]!="!") text = slOnOff[5+i];
check.setAttribute("tooltip", text);
check.classList.remove('hide');
} else
gId('opt'+i).classList.add('hide');
}
} else {
gId('fxopt').classList.add('fade');
}
check.classList.add('hide');
});
} else gId('fxopt').classList.add('fade');
// set the bottom position of selected effect (sticky) as the top of sliders div
setInterval(()=>{
@ -2938,6 +2936,41 @@ function 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();
_C.style.setProperty('--n', N);
@ -2949,3 +2982,5 @@ _C.addEventListener('touchstart', lock, false);
_C.addEventListener('mouseout', move, false);
_C.addEventListener('mouseup', 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!!
const uint16_t PAGE_settingsCss_length = 888;
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,
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,
@ -70,7 +70,7 @@ const uint8_t PAGE_settingsCss[] PROGMEM = {
// Autogenerated from wled00/data/settings.htm, do not edit!!
const uint16_t PAGE_settings_length = 1115;
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,
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,
@ -146,7 +146,7 @@ const uint8_t PAGE_settings[] PROGMEM = {
// Autogenerated from wled00/data/settings_wifi.htm, do not edit!!
const uint16_t PAGE_settings_wifi_length = 2524;
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,
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,
@ -310,7 +310,7 @@ const uint8_t PAGE_settings_wifi[] PROGMEM = {
// Autogenerated from wled00/data/settings_leds.htm, do not edit!!
const uint16_t PAGE_settings_leds_length = 8389;
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,
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,
@ -841,7 +841,7 @@ const uint8_t PAGE_settings_leds[] PROGMEM = {
// Autogenerated from wled00/data/settings_dmx.htm, do not edit!!
const uint16_t PAGE_settings_dmx_length = 1740;
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,
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,
@ -956,7 +956,7 @@ const uint8_t PAGE_settings_dmx[] PROGMEM = {
// Autogenerated from wled00/data/settings_ui.htm, do not edit!!
const uint16_t PAGE_settings_ui_length = 3302;
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,
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,
@ -1169,7 +1169,7 @@ const uint8_t PAGE_settings_ui[] PROGMEM = {
// Autogenerated from wled00/data/settings_sync.htm, do not edit!!
const uint16_t PAGE_settings_sync_length = 3548;
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,
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,
@ -1397,7 +1397,7 @@ const uint8_t PAGE_settings_sync[] PROGMEM = {
// Autogenerated from wled00/data/settings_time.htm, do not edit!!
const uint16_t PAGE_settings_time_length = 3432;
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,
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,
@ -1618,7 +1618,7 @@ const uint8_t PAGE_settings_time[] PROGMEM = {
// Autogenerated from wled00/data/settings_sec.htm, do not edit!!
const uint16_t PAGE_settings_sec_length = 2551;
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,
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,
@ -1784,7 +1784,7 @@ const uint8_t PAGE_settings_sec[] PROGMEM = {
// Autogenerated from wled00/data/settings_um.htm, do not edit!!
const uint16_t PAGE_settings_um_length = 3298;
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,
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,
@ -1997,7 +1997,7 @@ const uint8_t PAGE_settings_um[] PROGMEM = {
// Autogenerated from wled00/data/settings_2D.htm, do not edit!!
const uint16_t PAGE_settings_2D_length = 3288;
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,
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,
@ -2209,7 +2209,7 @@ const uint8_t PAGE_settings_2D[] PROGMEM = {
// Autogenerated from wled00/data/settings_pin.htm, do not edit!!
const uint16_t PAGE_settings_pin_length = 461;
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,
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,

4048
wled00/html_ui.h
View File

File diff suppressed because it is too large Load Diff