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

Optimisations.

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

62
wled00/data/index.css
View File

@ -470,7 +470,7 @@ button {
position: absolute;
opacity: 0;
visibility: hidden;
transition: opacity 0.4s ease, visibility 0.4s ease;
transition: opacity .4s ease, visibility .4s ease;
background-color: var(--c-5);
box-shadow: 4px 4px 10px 4px var(--c-1);
color: var(--c-f);
@ -495,64 +495,6 @@ button {
visibility: visible;
}
/* Tooltip text */
.tooltiptext {
visibility: hidden;
background-color: var(--c-5);
/*border: 2px solid var(--c-2);*/
box-shadow: 4px 4px 10px 4px var(--c-1);
color: var(--c-f);
text-align: center;
padding: 4px 8px;
border-radius: 6px;
/* Position the tooltip text */
width: 160px;
position: absolute;
z-index: 1;
bottom: 120%;
transform: translate(-50%, 0%);
left: 50%;
/* Ensure tooltip goes away when mouse leaves control */
pointer-events: none;
/* Fade in tooltip */
opacity: 0;
transition: opacity .75s;
}
.slider .tooltiptext {
bottom: 100%;
}
.ttfirst {
transform: translateX(-20%);
}
.ttlast {
transform: translateX(-80%);
}
/* Tooltip arrow */
.tooltiptext::after {
content: "";
position: absolute;
top: 100%;
left: 50%;
margin-left: -5px;
border-width: 5px;
border-style: solid;
border-color: var(--c-5) transparent transparent transparent;
}
.ttfirst::after {
left: 20%;
}
.ttlast::after {
left: 80%;
}
/* Show the tooltip text when you mouse over the tooltip container */
.slider:hover .tooltiptext, .check:hover .tooltiptext {
visibility: visible;
opacity: 1;
}
.fade {
visibility: hidden; /* hide it */
opacity: 0; /* make it transparent */
@ -813,7 +755,7 @@ input[type=range]::-moz-range-thumb {
}
#briwrap {
min-width: 267px;
min-width: 300px;
float: right;
margin-top: var(--bmt);
}

131
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>
@ -88,91 +88,88 @@
<div class ="container">
<div id="Colors" class="tabcontent">
<div id="picker" class="noslide"></div>
<div id="hwrap" class="slider">
<div id="hwrap" tooltip="Hue" class="slider">
<div class="sliderwrap il">
<input id="sliderH" tooltip="Hue" class="noslide" oninput="fromH()" onchange="setColor(0)" max="359" min="0" type="range" value="0" step="any">
<input id="sliderH" class="noslide" oninput="fromH()" onchange="setColor(0)" max="359" min="0" type="range" value="0" step="any">
<div class="sliderdisplay" style="background: linear-gradient(90deg, #f00 2%, #ff0 19%, #0f0 35%, #0ff 52%, #00f 68%, #f0f 85%, #f00)"></div>
</div>
</div>
<div id="swrap" class="slider">
<div id="swrap" tooltip="Saturation" class="slider">
<div class="sliderwrap il">
<input id="sliderS" tooltip="Saturation" class="noslide" oninput="fromS()" onchange="setColor(0)" max="100" min="0" type="range" value="100" step="any">
<input id="sliderS" class="noslide" oninput="fromS()" onchange="setColor(0)" max="100" min="0" type="range" value="100" step="any">
<div class="sliderdisplay" style="background: linear-gradient(90deg, #aaa 0%, #f00)"></div>
</div>
</div>
<div id="vwrap" class="slider">
<div id="vwrap" tooltip="Value/Brightness" class="slider">
<div class="sliderwrap il">
<input id="sliderV" tooltip="Value / Brightness" class="noslide" oninput="fromV()" onchange="setColor(0)" max="100" min="0" type="range" value="100" step="any" />
<input id="sliderV" class="noslide" oninput="fromV()" onchange="setColor(0)" max="100" min="0" type="range" value="100" step="any" />
<div class="sliderdisplay"></div>
</div>
</div>
<div id="kwrap" class="slider">
<div id="kwrap" tooltip="Kelvin/Temperature" class="slider">
<div class="sliderwrap il">
<input id="sliderK" tooltip="Kelvin / Temperature" class="noslide" oninput="fromK()" onchange="setColor(0)" max="10091" min="1900" type="range" value="6550" />
<input id="sliderK" class="noslide" oninput="fromK()" onchange="setColor(0)" max="10091" min="1900" type="range" value="6550" />
<div class="sliderdisplay"></div>
</div>
</div>
<div id="rgbwrap">
<!--p class="labels hd">RGB color</p-->
<div id="rwrap" class="slider">
<div id="rwrap" tooltip="Red channel" class="slider">
<div class="sliderwrap il">
<input id="sliderR" tooltip="Red channel" class="noslide" oninput="fromRgb()" onchange="setColor(0)" max="255" min="0" type="range" value="128" />
<input id="sliderR" class="noslide" oninput="fromRgb()" onchange="setColor(0)" max="255" min="0" type="range" value="128" />
<div class="sliderdisplay"></div>
</div>
</div>
<div id="gwrap" class="slider">
<div id="gwrap" tooltip="Green channel" class="slider">
<div class="sliderwrap il">
<input id="sliderG" tooltip="Green channel" class="noslide" oninput="fromRgb()" onchange="setColor(0)" max="255" min="0" type="range" value="128" />
<input id="sliderG" class="noslide" oninput="fromRgb()" onchange="setColor(0)" max="255" min="0" type="range" value="128" />
<div class="sliderdisplay"></div>
</div>
</div>
<div id="bwrap" class="slider">
<div id="bwrap" tooltip="Blue channel" class="slider">
<div class="sliderwrap il">
<input id="sliderB" tooltip="Blue channel" class="noslide" oninput="fromRgb()" onchange="setColor(0)" max="255" min="0" type="range" value="128" />
<input id="sliderB" class="noslide" oninput="fromRgb()" onchange="setColor(0)" max="255" min="0" type="range" value="128" />
<div class="sliderdisplay"></div>
</div>
</div>
</div>
<div id="wwrap" class="slider">
<!--p class="labels hd">White channel</p-->
<div id="wwrap" tooltip="White channel" class="slider">
<div id="whibri" class="sliderwrap il">
<input id="sliderW" tooltip="White channel" class="noslide" oninput="fromW()" onchange="setColor(0)" max="255" min="0" type="range" value="128" />
<input id="sliderW" class="noslide" oninput="fromW()" onchange="setColor(0)" max="255" min="0" type="range" value="128" />
<div class="sliderdisplay"></div>
</div>
</div>
<div id="wbal" class="slider">
<!--p class="labels hd">White balance</p-->
<div id="wbal" tooltip="White balance" class="slider">
<div class="sliderwrap il">
<input id="sliderA" tooltip="White balance" class="noslide" onchange="setBalance(this.value)" max="255" min="0" type="range" value="128" />
<input id="sliderA" class="noslide" onchange="setBalance(this.value)" max="255" min="0" type="range" value="128" />
<div class="sliderdisplay"></div>
</div>
</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 class="btn btn-xs" tooltip="Pixel Magic Tool" type="button" onclick="window.location.href=getURL('/pxmagic.htm')"><i class="icons btn-icon">&#xe410;</i></button>
<button class="btn btn-xs" tooltip="Pixel Magic Tool" type="button" id="pxmb" onclick="window.location.href=getURL('/pxmagic.htm')"><i class="icons btn-icon">&#xe410;</i></button>
<button class="btn btn-xs" tooltip="Add custom palette" type="button" onclick="window.location.href=getURL('/cpal.htm')"><i class="icons btn-icon">&#xe18a;</i></button>
<button class="btn btn-xs" tooltip="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>
@ -219,83 +216,83 @@
</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" tooltip="Uses palette"></span>
<span class="checkmark"></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" tooltip="Single pixel"></span>
<span class="checkmark"></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" tooltip="1D"></span>
<span class="checkmark"></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" tooltip="2D Matrix"></span>
<span class="checkmark"></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" tooltip="Volume"></span>
<span class="checkmark"></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" tooltip="Frequency"></span>
<span class="checkmark"></span>
</label>
</div>
<div id="slider0" class="slider">
<i class="icons slider-icon" onclick="tglFreeze()">&#xe325;</i>
<div class="sliderwrap il">
<input id="sliderSpeed" tooltip="Effect speed" class="noslide" onchange="setSpeed()" oninput="updateTrail(this)" max="255" min="0" type="range" value="128" />
<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>
</div>
<div id="slider1" class="slider">
<i class="icons slider-icon" onclick="tglLabels()">&#xe409;</i>
<div class="sliderwrap il">
<input id="sliderIntensity" tooltip="Effect intensity" class="noslide" onchange="setIntensity()" oninput="updateTrail(this)" max="255" min="0" type="range" value="128" />
<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>
</div>
<div id="slider2" class="slider hide">
<i class="icons slider-icon">&#xe410;</i>
<div class="sliderwrap il">
<input id="sliderC1" tooltip="Custom 1" class="noslide" onchange="setCustom(1)" oninput="updateTrail(this)" max="255" min="0" type="range" value="0" />
<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>
</div>
<div id="slider3" class="slider hide">
<i class="icons slider-icon">&#xe0a2;</i>
<div class="sliderwrap il">
<input id="sliderC2" tooltip="Custom 2" class="noslide" onchange="setCustom(2)" oninput="updateTrail(this)" max="255" min="0" type="range" value="0" />
<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>
</div>
<div id="slider4" class="slider hide">
<i class="icons slider-icon">&#xe0e8;</i>
<div class="sliderwrap il">
<input id="sliderC3" tooltip="Custom 3" class="noslide" onchange="setCustom(3)" oninput="updateTrail(this)" max="31" min="0" type="range" value="0" />
<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>
</div>
<div id="fxopt" class="option fade">
<label id="opt0" class="check ochkl hide"><i class="icons">&#xe2b3;</i>
<label id="opt0" tooltip="Check 1" class="check ochkl hide"><i class="icons">&#xe2b3;</i>
<input id="checkO1" type="checkbox" onchange="setOption(1, this.checked)">
<span class="checkmark" tooltip="Check 1"></span>
<span class="checkmark"></span>
</label>
<label id="opt1" class="check ochkl hide"><i class="icons">&#xe34b;</i>
<label id="opt1" tooltip="Check 2" class="check ochkl hide"><i class="icons">&#xe34b;</i>
<input id="checkO2" type="checkbox" onchange="setOption(2, this.checked)">
<span class="checkmark" tooltip="Check 2"></span>
<span class="checkmark"></span>
</label>
<label id="opt2" class="check ochkl hide"><i class="icons">&#xe04c;</i>
<label id="opt2" tooltip="Check 3" class="check ochkl hide"><i class="icons">&#xe04c;</i>
<input id="checkO3" type="checkbox" onchange="setOption(3, this.checked)">
<span class="checkmark" tooltip="Check 3"></span>
<span class="checkmark"></span>
</label>
</div>
</div>

68
wled00/data/index.js
View File

@ -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;
@ -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,41 +1503,30 @@ function setEffectParameters(idx)
var paOnOff = (effectPars.length<3 || effectPars[2]=='')?[]:effectPars[2].split(",");
// set html slider items on/off
let sliders = d.querySelectorAll("#sliders .slider");
sliders.forEach(function(slider, i){
const tooltip = slider.querySelector('[tooltip]');
const text = tooltip.getAttribute("tooltip");
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] != "")) {
const newText = slOnOff.length > i && slOnOff[i] != "!" ? slOnOff[i] : text;
tooltip.setAttribute("tooltip", newText);
slider.classList.remove('hide');
} else {
slider.classList.add('hide');
}
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');
let checks = d.querySelectorAll("#fxopt .check");
checks.forEach(function(check, i){
const tooltip = check.querySelector('[tooltip]');
const text = tooltip.getAttribute("tooltip");
if (5 + i < slOnOff.length && slOnOff[5 + i] !== '') {
const newText = slOnOff[5 + i] == "!" ? text : slOnOff[5 + i].substr(0, 16);
tooltip.setAttribute("tooltip", newText);
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 {
} else
check.classList.add('hide');
}
});
} else {
gId('fxopt').classList.add('fade');
}
} else gId('fxopt').classList.add('fade');
// set the bottom position of selected effect (sticky) as the top of sliders div
setInterval(()=>{
@ -2946,35 +2936,35 @@ function mergeDeep(target, ...sources)
return mergeDeep(target, ...sources);
}
function tooltip(){
function tooltip()
{
const elements = d.querySelectorAll("[tooltip]");
elements.forEach(function (element) {
element.addEventListener("mouseover", function () {
elements.forEach((element)=>{
element.addEventListener("mouseover", ()=>{
const tooltip = d.createElement("span");
tooltip.className = "tooltip";
tooltip.textContent = element.getAttribute("tooltip");
const { top, left, width } = element.getBoundingClientRect();
let { top, left, width } = element.getBoundingClientRect();
d.body.appendChild(tooltip);
const { offsetHeight, offsetWidth } = tooltip;
const multiplier = element.type == "range" ? 0.2 : 0.4;
const newTop = top - (offsetHeight + (offsetHeight * multiplier));
const newLeft = left + (width / 2) - (offsetWidth / 2);
const multiplier = element.className === "slider" ? 0 : .3;
top -= (offsetHeight + (offsetHeight * multiplier));
left += (width / 2) - (offsetWidth / 2);
tooltip.style.top = newTop + "px";
tooltip.style.left = newLeft + "px";
tooltip.style.top = top + "px";
tooltip.style.left = left + "px";
tooltip.classList.add("visible");
});
element.addEventListener("mouseout", function () {
element.addEventListener("mouseout", ()=>{
const tooltip = d.querySelector('.tooltip');
tooltip.classList.remove("visible");
d.body.removeChild(tooltip);
});

4064
wled00/html_ui.h
View File

File diff suppressed because it is too large Load Diff