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

UI interface improvements

Browse Source
This commit is contained in:
Alerson Jorge 2023-10-19 12:47:37 -03:00
parent 832ff39eb6
commit 0521e988bc
5 changed files with 2145 additions and 2051 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

30
wled00/data/index.css
View File

@ -465,6 +465,36 @@ button {
/*overflow: visible;*/
}
/* New tooltip */
.tooltip {
position: absolute;
opacity: 0;
visibility: hidden;
transition: opacity 0.4s ease, visibility 0.4s ease;
background-color: var(--c-5);
box-shadow: 4px 4px 10px 4px var(--c-1);
color: var(--c-f);
text-align: center;
padding: 8px 16px;
border-radius: 6px;
}
.tooltip::after {
content: "";
position: absolute;
border: 8px;
border-style: solid;
border-color: var(--c-5) transparent transparent transparent;
top: 100%;
left: calc(50% - 8px);
z-index: 0;
}
.tooltip.visible {
opacity: 1;
visibility: visible;
}
/* Tooltip text */
.slider .tooltiptext, .option .tooltiptext, .filter .tooltiptext {
visibility: hidden;

34
wled00/data/index.htm
View File

@ -181,9 +181,9 @@
<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" 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">
@ -230,43 +230,43 @@
<div id="filters" class="filter">
<label id="filterPal" class="check fchkl">&#x1F3A8;
<input type="checkbox" data-flt="&#x1F3A8;" onchange="filterFx(this)">
<span class="checkmark"></span>
<span class="tooltiptext ttfirst">Uses palette</span>
<span class="checkmark" tooltip="Uses palette"></span>
<span class="hide tooltiptext ttfirst">Uses palette</span>
</label>
<label id="filter0D" class="check fchkl hide">&#8226;
<input type="checkbox" data-flt="&#8226;" onchange="filterFx(this)">
<span class="checkmark"></span>
<span class="tooltiptext">Single pixel</span>
<span class="checkmark" tooltip="Single pixel"></span>
<span class="hide tooltiptext">Single pixel</span>
</label>
<label id="filter1D" class="check fchkl">&#8942;
<input type="checkbox" data-flt="&#8942;" onchange="filterFx(this)">
<span class="checkmark"></span>
<span class="tooltiptext">1D</span>
<span class="checkmark" tooltip="1D"></span>
<span class="hide tooltiptext">1D</span>
</label>
<label id="filter2D" class="check fchkl">&#9638;
<input type="checkbox" data-flt="&#9638;" onchange="filterFx(this)">
<span class="checkmark"></span>
<span class="tooltiptext">2D</span>
<span class="checkmark" tooltip="2D Matrix"></span>
<span class="hide tooltiptext">2D</span>
</label>
<label id="filterVol" class="check fchkl">&#9834;
<input type="checkbox" data-flt="&#9834;" onchange="filterFx(this)">
<span class="checkmark"></span>
<span class="tooltiptext">Volume</span>
<span class="checkmark" tooltip="Volume"></span>
<span class="hide tooltiptext">Volume</span>
</label>
<label id="filterFreq" class="check fchkl">&#9835;
<input type="checkbox" data-flt="&#9835;" onchange="filterFx(this)">
<span class="checkmark"></span>
<span class="tooltiptext ttlast">Frequency</span>
<span class="checkmark" tooltip="Frequency"></span>
<span class="hide tooltiptext ttlast">Frequency</span>
</label>
</div>
<div id="slider0" class="slider">
<i class="icons slider-icon" onclick="tglFreeze()">&#xe325;</i>
<div class="sliderwrap il">
<input id="sliderSpeed" class="noslide" onchange="setSpeed()" oninput="updateTrail(this)" max="255" min="0" type="range" value="128" />
<input id="sliderSpeed" tooltip="Effect speed" 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>
<span id="sliderLabel0" class="hide tooltiptext">Effect speed</span>
</div>
<div id="slider1" class="slider">
<i class="icons slider-icon" onclick="tglLabels()">&#xe409;</i>

39
wled00/data/index.js
View File

@ -2936,6 +2936,43 @@ function mergeDeep(target, ...sources)
return mergeDeep(target, ...sources);
}
function tooltip(){
const elements = d.querySelectorAll("[tooltip]");
elements.forEach(function (element) {
element.addEventListener("mouseover", function () {
const tooltip = d.createElement("span");
tooltip.className = "tooltip";
tooltip.textContent = element.getAttribute("tooltip");
const { top, left, width } = element.getBoundingClientRect();
d.body.appendChild(tooltip);
const { offsetHeight, offsetWidth } = tooltip;
console.log(element.type);
const multiplier = element.type == "range" ? 0.2 : 0.4;
const newTop = top - (offsetHeight + (offsetHeight * multiplier));
const newLeft = left + (width / 2) - (offsetWidth / 2);
tooltip.style.top = newTop + "px";
tooltip.style.left = newLeft + "px";
tooltip.classList.add("visible");
});
element.addEventListener("mouseout", function () {
const tooltip = d.querySelector('.tooltip');
tooltip.classList.remove("visible");
d.body.removeChild(tooltip);
});
});
};
size();
_C.style.setProperty('--n', N);
@ -2947,3 +2984,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 = 3275;
const uint8_t PAGE_settings_ui[] PROGMEM = {
0x1f, 0x8b, 0x08, 0x00, 0x00, 0x00, 0x00, 0x00, 0x02, 0x13, 0xad, 0x59, 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, 0x52, 0x8f, 0x97, 0x22,
0x21, 0x09, 0x31, 0x45, 0x70, 0x09, 0xd0, 0x8f, 0x2a, 0xfa, 0xef, 0x3d, 0x17, 0x20, 0x25, 0xca,
@ -1167,7 +1167,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,
@ -1395,7 +1395,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,
@ -1616,7 +1616,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,
@ -1782,7 +1782,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,
@ -1995,7 +1995,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,
@ -2207,7 +2207,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,

4069
wled00/html_ui.h
View File

File diff suppressed because it is too large Load Diff