From 4a20f43fbf5dab03295080f8b69ae0c448064588 Mon Sep 17 00:00:00 2001 From: Christophe Gagnier Date: Thu, 18 Mar 2021 18:59:56 -0400 Subject: [PATCH] Search bar and palettes preview (#1637) * Fix swipe behavior on firefox when clicking on palette selection input When clicking on the palette select element on firefox, it would often swipe to the next tab due to a bug in firefox: https://bugzilla.mozilla.org/show_bug.cgi?id=1410816 * Update UI .h files and remove console log * Fix indentation in requestJson * Add palette preview Add palette and effects search * Add palette preview Add palette and effects search * Add palette preview Add palette and effects search * Add palette preview Add palette and effects search * Fix error with background image * Add missing palettes * Add expiration to cached palette data * Remove extra console.log * bug fixes for palettes * Rename "Default" effect back to "Solid" * Fix scrolling issue when selecting an effect * Add sticky default and sticky selected item * Change checkboxes for radio button * build html .h files * Design Iteration 1 * Palette preview style changes * Add button for clearing search field * Use version ID for caching palette data rather than 24h expiration Co-authored-by: Aircoookie --- .gitignore | 3 +- wled00/data/index.css | 150 +- wled00/data/index.htm | 46 +- wled00/data/index.js | 453 ++++- wled00/html_ui.h | 4257 +++++++++++++++++++++-------------------- wled00/json.cpp | 197 +- 6 files changed, 2881 insertions(+), 2225 deletions(-) diff --git a/.gitignore b/.gitignore index a95dd5ac..7c0dd1e5 100644 --- a/.gitignore +++ b/.gitignore @@ -7,9 +7,10 @@ /wled00/Release /wled00/extLibs /platformio_override.ini -/wled00/my_config.h +/wled00/my_config.h /build_output .DS_Store .gitignore .clang-format node_modules +.idea diff --git a/wled00/data/index.css b/wled00/data/index.css index 035d0041..827f64dd 100644 --- a/wled00/data/index.css +++ b/wled00/data/index.css @@ -166,6 +166,14 @@ button { color: var(--c-d); } +.search-cancel-icon { + position: absolute; + right: 8px; + top: 9px; + cursor: pointer; + display: none; +} + .flr { float: right; cursor: pointer; @@ -215,7 +223,7 @@ button { .top button { padding: var(--tbp); -} +} .bot button { padding: var(--bbp); @@ -299,7 +307,7 @@ button { top: -1px; z-index: 1; margin-top: 1px; - width: 274px; + width: 272px; margin: auto; border-radius: 25px; } @@ -308,10 +316,6 @@ button { top: 28px; } -#staytop2 { - top: 56px; -} - #fxb0 { margin-bottom: 2px; filter: drop-shadow(0 0 1px #000); @@ -548,6 +552,7 @@ input[type=range]:active + .sliderbubble { font-size: 19px; background-color: var(--c-3); color: var(--c-f); + cursor: pointer; border: 0px solid white; border-radius: 25px; transition-duration: 0.5s; @@ -668,8 +673,8 @@ input[type=number]:focus, input[type=text]:focus { background: var(--c-6); } -input[type=number]::-webkit-inner-spin-button, -input[type=number]::-webkit-outer-spin-button { +input[type=number]::-webkit-inner-spin-button, +input[type=number]::-webkit-outer-spin-button { -webkit-appearance: none; } @@ -742,7 +747,7 @@ input[type=number]::-webkit-outer-spin-button { } .pwr { - color: var(--c-6); + color: var(--c-6); transform: translate(2px, 3px); cursor: pointer; } @@ -764,7 +769,7 @@ input[type=number]::-webkit-outer-spin-button { cursor: pointer; } -.check { +.check, .radio { display: inline-block; position: relative; padding-bottom: 32px; @@ -774,7 +779,7 @@ input[type=number]::-webkit-outer-spin-button { } .schkl { - padding: 2px 22px 0px 35px; + padding: 2px 5px 0px 35px; margin: 0 0 0 2px; } @@ -784,7 +789,13 @@ input[type=number]::-webkit-outer-spin-button { margin-top: 8px; } -.check input { +.fxchkl { + position: absolute; + top: 0px; + left: 8px; +} + +.check input, .radio input { position: absolute; opacity: 0; cursor: pointer; @@ -792,7 +803,7 @@ input[type=number]::-webkit-outer-spin-button { width: 0; } -.checkmark { +.checkmark, .radiomark { position: absolute; bottom: 0; left: 0; @@ -802,6 +813,13 @@ input[type=number]::-webkit-outer-spin-button { border-radius: 10px; } +.radiomark { + height: 24px; + width: 24px; + border-radius: 50%; + background-color: transparent; +} + .schk { top: 0; } @@ -828,13 +846,13 @@ input[type=number]::-webkit-outer-spin-button { background-color: var(--c-6); } -.checkmark:after { +.checkmark:after, .radiomark:after { content: ""; position: absolute; display: none; } -.check input:checked ~ .checkmark:after { +.check input:checked ~ .checkmark:after, .radio input:checked ~ .radiomark:after { display: block; } @@ -850,6 +868,16 @@ input[type=number]::-webkit-outer-spin-button { transform: rotate(45deg); } +.radio .radiomark:after { + width: 12px; + height: 12px; + top: 50%; + left: 50%; + margin: -6px; + border-radius: 50%; + background: var(--c-f); +} + .h { font-size: 13px; text-align: center; @@ -873,7 +901,93 @@ input[type=number]::-webkit-outer-spin-button { border-radius: 20px; text-align: left; transition: background-color 0.5s; - filter: brightness(1); + filter: brightness(1); +} + +.list { + position: relative; + transition: background-color 0.5s; + margin: auto auto 10px; + padding-bottom: 10px; + width: 230px; +} + +.lstI { + overflow: hidden; +} + +.fxbtn { + margin: 20px auto; + padding: 8px 0; +} + +.lstI:hover { + background: var(--c-4); +} + +.lstI:last-child { + border: none; +} + +.lstI.sticky, .lstI.selected { + position: sticky; + z-index: 1; +} + +#selectPalette .lstI.selected { + top: 27px; + bottom: -11px; +} + +#selectPalette .lstI.sticky { + top: -11px; +} + +.lstI.selected { + background: var(--c-5); + top: 95px; + bottom: -11px; +} + +.lstI.sticky { + top: 57px; +} + +.lstIname { + margin: 3px 0; + white-space: nowrap; + cursor: pointer; + font-size: 19px; +} + +.lstIprev { + width: 100%; + height: 5px; + margin: auto; + position: absolute; + bottom: 0px; + left: 0px; +} + +input[type="text"].search { + display: block; + width: 230px; + box-sizing: border-box; + padding: 8px 8px 9px 38px; + margin: 6px auto 0 auto; + text-align: left; + background: url("data:image/svg+xml;utf8,") + no-repeat 10px 10px; + background-size: 20px; + background-color: var(--c-3); +} + +input[type="text"].search:focus { + background-color: var(--c-4); +} + +input[type="text"].search:not(:placeholder-shown) { + background-color: var(--c-5); } .pres { @@ -906,7 +1020,7 @@ input[type=number]::-webkit-outer-spin-button { width: 6px; } ::-webkit-scrollbar-track { - background: transparent; + background: transparent; } ::-webkit-scrollbar-thumb { background: var(--c-sb); @@ -947,4 +1061,4 @@ input[type=number]::-webkit-outer-spin-button { #buttonPcm { display: none; } -} \ No newline at end of file +} diff --git a/wled00/data/index.htm b/wled00/data/index.htm index c981c9df..8560ee14 100644 --- a/wled00/data/index.htm +++ b/wled00/data/index.htm @@ -88,13 +88,33 @@ -

Color palette

-
+

- + Color palette +

+
+
+
+ +
+ + Default + +
+
+
+
+ + Loading... + +
+
+ +
@@ -118,21 +138,17 @@

Effect mode

-
- -
-
+
Loading...
-
- +
Loading...
- +
@@ -141,7 +157,7 @@
- +
@@ -205,4 +221,4 @@ - \ No newline at end of file + diff --git a/wled00/data/index.js b/wled00/data/index.js index 74ca041f..d6aacff7 100644 --- a/wled00/data/index.js +++ b/wled00/data/index.js @@ -3,6 +3,7 @@ var loc = false, locip; var noNewSegs = false; var isOn = false, nlA = false, isLv = false, isInfo = false, isNodes = false, syncSend = false, syncTglRecv = true, isRgbw = false; var whites = [0,0,0]; +var selColors; var expanded = [false]; var powered = [true]; var nlDur = 60, nlTar = 0; @@ -15,6 +16,7 @@ var segCount = 0, ledCount = 0, lowestUnused = 0, maxSeg = 0, lSeg = 0; var pcMode = false, pcModeA = false, lastw = 0; var d = document; const ranges = RangeTouch.setup('input[type="range"]', {}); +var palettesData; var pJson = {}; var pN = "", pI = 0; var pmt = 1, pmtLS = 0, pmtLast = 0; @@ -29,17 +31,17 @@ var cpick = new iro.ColorPicker("#picker", { wheelLightness: false, wheelAngle: 90, layout: [ - { + { component: iro.ui.Wheel, options: {} }, - { + { component: iro.ui.Slider, options: { sliderType: 'value' } }, - { + { component: iro.ui.Slider, options: { sliderType: 'kelvin', @@ -157,7 +159,6 @@ function loadBg(iUrl) { } img.addEventListener('load', (event) => { var a = parseFloat(cfg.theme.alpha.bg); - d.getElementById('staytop2').style.background = "transparent"; if (isNaN(a)) a = 0.6; bg.style.opacity = a; bg.style.backgroundImage = `url(${img.src})`; @@ -177,12 +178,12 @@ function onLoad() { } var sett = localStorage.getItem('wledUiCfg'); if (sett) cfg = mergeDeep(cfg, JSON.parse(sett)); - + resetPUtil(); - + applyCfg(); loadBg(cfg.theme.bg.url); - + var cd = d.getElementById('csl').children; for (var i = 0; i < cd.length; i++) { cd[i].style.backgroundColor = "rgb(0, 0, 0)"; @@ -233,7 +234,7 @@ function showToast(text, error = false) { x.className = error ? "error":"show"; clearTimeout(timeout); x.style.animation = 'none'; - x.style.animation = null; + x.style.animation = null; timeout = setTimeout(function(){ x.className = x.className.replace("show", ""); }, 2900); } @@ -255,7 +256,7 @@ function getRuntimeStr(rt) if (!days && hrs) str += ", "; if (t > 59 && !days) str += mins + " min"; if (t < 3600 && t > 59) str += ", "; - if (t < 3600) str += (t - mins*60) + " sec"; + if (t < 3600) str += (t - mins*60) + " sec"; return str; } @@ -271,7 +272,7 @@ function getLowestUnusedP() { if (key == l) l++; } - if (l > 250) l = 250; + if (l > 250) l = 250; return l; } @@ -309,7 +310,6 @@ function cpBck() { copyText.select(); copyText.setSelectionRange(0, 999999); - d.execCommand("copy"); showToast("Copied to clipboard!"); @@ -322,12 +322,12 @@ function presetError(empty) bckstr = localStorage.getItem("wledP"); if (bckstr.length > 10) hasBackup = true; } catch (e) { - + } var cn = `
`; - if (empty) + if (empty) cn += `You have no presets yet!`; - else + else cn += `Sorry, there was an issue loading your presets!`; if (hasBackup) { @@ -351,7 +351,7 @@ function loadPresets() if (loc) { url = `http://${locip}/presets.json`; } - + fetch (url, { method: 'get' @@ -380,7 +380,7 @@ function populateQL() var cn = ""; if (pQL.length > 0) { cn += `

Quick load

`; - + var it = 0; for (var key of (pQL||[])) { @@ -392,7 +392,7 @@ function populateQL() } } if (it != 0) cn+= '
'; - + cn += `

All presets

`; } d.getElementById('pql').innerHTML = cn; @@ -416,7 +416,7 @@ function populatePresets(fromls) var qll = key[1].ql; if (qll) pQL.push([i, qll]); is.push(i); - + cn += `
`; if (cfg.comp.pid) cn += `
${i}
`; cn += `
${pName(i)}
@@ -467,7 +467,7 @@ function populateInfo(i) var vcn = "Kuuhaku"; if (i.ver.startsWith("0.12.")) vcn = "Hikari"; if (i.cn) vcn = i.cn; - + cn += `v${i.ver} "${vcn}"

${urows} ${inforow("Build",i.vid)} @@ -487,17 +487,17 @@ function populateSegments(s) { var cn = ""; segCount = 0; lowestUnused = 0; lSeg = 0; - + for (var y = 0; y < (s.seg||[]).length; y++) { segCount++; - + var inst=s.seg[y]; let i = parseInt(inst.id); powered[i] = inst.on; if (i == lowestUnused) lowestUnused = i+1; if (i > lSeg) lSeg = i; - + cn += `