Merge pull request #3464 from ajotanc/new_feature
UI tooltips (interface improvements)
This commit is contained in:
Blaž Kristan
GitHub
commit
bdc78a826f
@ -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);
|
||||
}
|
||||
|
||||
@ -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);"></i>
|
||||
<div class="slider">
|
||||
<i class="icons slider-icon" onclick="tglTheme()" style="transform: translateY(2px);"></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()"></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"></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"></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"></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"></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"></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"></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"></i></button>
|
||||
</div>
|
||||
<p class="labels" id="pall"><i class="icons sel-icon" onclick="tglHex()"></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">🎨
|
||||
<label id="filterPal" tooltip="Uses palette" class="check fchkl">🎨
|
||||
<input type="checkbox" data-flt="🎨" onchange="filterFx(this)">
|
||||
<span class="checkmark"></span>
|
||||
<span class="tooltiptext ttfirst">Uses palette</span>
|
||||
</label>
|
||||
<label id="filter0D" class="check fchkl hide">•
|
||||
<label id="filter0D" tooltip="Single pixel" class="check fchkl hide">•
|
||||
<input type="checkbox" data-flt="•" onchange="filterFx(this)">
|
||||
<span class="checkmark"></span>
|
||||
<span class="tooltiptext">Single pixel</span>
|
||||
</label>
|
||||
<label id="filter1D" class="check fchkl">⋮
|
||||
<label id="filter1D" tooltip="1D" class="check fchkl">⋮
|
||||
<input type="checkbox" data-flt="⋮" onchange="filterFx(this)">
|
||||
<span class="checkmark"></span>
|
||||
<span class="tooltiptext">1D</span>
|
||||
</label>
|
||||
<label id="filter2D" class="check fchkl">▦
|
||||
<label id="filter2D" tooltip="2D" class="check fchkl">▦
|
||||
<input type="checkbox" data-flt="▦" onchange="filterFx(this)">
|
||||
<span class="checkmark"></span>
|
||||
<span class="tooltiptext">2D</span>
|
||||
</label>
|
||||
<label id="filterVol" class="check fchkl">♪
|
||||
<label id="filterVol" tooltip="Volume" class="check fchkl">♪
|
||||
<input type="checkbox" data-flt="♪" onchange="filterFx(this)">
|
||||
<span class="checkmark"></span>
|
||||
<span class="tooltiptext">Volume</span>
|
||||
</label>
|
||||
<label id="filterFreq" class="check fchkl">♫
|
||||
<label id="filterFreq" tooltip="Frequency" class="check fchkl">♫
|
||||
<input type="checkbox" data-flt="♫" 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()"></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()"></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"></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"></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"></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"></i><span class="tooltiptext" id="optLabel0">Check 1</span>
|
||||
<label id="opt0" tooltip="Check 1" class="check ochkl hide"><i class="icons"></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"></i><span class="tooltiptext" id="optLabel1">Check 2</span>
|
||||
<label id="opt1" tooltip="Check 2" class="check ochkl hide"><i class="icons"></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"></i><span class="tooltiptext" id="optLabel2">Check 3</span>
|
||||
<label id="opt2" tooltip="Check 3" class="check ochkl hide"><i class="icons"></i>
|
||||
<input id="checkO3" type="checkbox" onchange="setOption(3, this.checked)">
|
||||
<span class="checkmark"></span>
|
||||
</label>
|
||||
|
||||
@ -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;
|
||||
@ -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
|
||||
gId('fxopt').classList.remove('fade');
|
||||
for (let i = 0; i<3; i++) {
|
||||
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);
|
||||
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
|
||||
gId('opt'+i).classList.add('hide');
|
||||
}
|
||||
} else {
|
||||
gId('fxopt').classList.add('fade');
|
||||
}
|
||||
slider.parentElement.classList.add('hide');
|
||||
});
|
||||
|
||||
if (slOnOff.length > 5) { // up to 3 checkboxes
|
||||
gId('fxopt').classList.remove('fade');
|
||||
let checks = d.querySelectorAll("#sliders .ochkl");
|
||||
checks.forEach((check, i)=>{
|
||||
let text = check.getAttribute("tooltip");
|
||||
if (5+i<slOnOff.length && slOnOff[5+i]!=='') {
|
||||
if (slOnOff.length>5+i && slOnOff[5+i]!="!") text = slOnOff[5+i];
|
||||
check.setAttribute("tooltip", text);
|
||||
check.classList.remove('hide');
|
||||
} else
|
||||
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);
|
||||
@ -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
4048
wled00/html_ui.h
File diff suppressed because it is too large
Load Diff
Loading…
Reference in New Issue
Block a user