From 1b64747c2b44d9841aba07fa19b2c07e4924a494 Mon Sep 17 00:00:00 2001 From: Blaz Kristan Date: Wed, 27 Jul 2022 00:11:24 +0200 Subject: [PATCH] Quick effect filter. --- wled00/FX.cpp | 10 +- wled00/data/index.css | 40 +- wled00/data/index.htm | 20 +- wled00/data/index.js | 64 +- wled00/html_ui.h | 3612 +++++++++++++++++++++-------------------- 5 files changed, 1918 insertions(+), 1828 deletions(-) diff --git a/wled00/FX.cpp b/wled00/FX.cpp index 75ce8f51..7da8c2eb 100644 --- a/wled00/FX.cpp +++ b/wled00/FX.cpp @@ -911,7 +911,7 @@ uint16_t mode_chase_rainbow(void) { return chase(color, SEGCOLOR(0), SEGCOLOR(1), false); } -static const char *_data_FX_MODE_CHASE_RAINBOW PROGMEM = "Chase Rainbow@!,Width;!,!,;0"; +static const char *_data_FX_MODE_CHASE_RAINBOW PROGMEM = "Chase Rainbow@!,Width;!,!,;"; /* @@ -925,7 +925,7 @@ uint16_t mode_chase_rainbow_white(void) { return chase(SEGCOLOR(0), color2, color3, false); } -static const char *_data_FX_MODE_CHASE_RAINBOW_WHITE PROGMEM = "Rainbow Runner@!,Size;Bg,,;!"; +static const char *_data_FX_MODE_CHASE_RAINBOW_WHITE PROGMEM = "Rainbow Runner@!,Size;Bg,,;"; /* @@ -1066,7 +1066,7 @@ uint16_t mode_chase_flash_random(void) { } return delay; } -static const char *_data_FX_MODE_CHASE_FLASH_RANDOM PROGMEM = "Chase Flash Rnd@!,;,Fx,;!"; +static const char *_data_FX_MODE_CHASE_FLASH_RANDOM PROGMEM = "Chase Flash Rnd@!,;,Fx,;0"; /* @@ -2022,7 +2022,7 @@ uint16_t mode_fire_2012() } return FRAMETIME; } -static const char *_data_FX_MODE_FIRE_2012 PROGMEM = "Fire 2012@Cooling=120,Spark rate=64;1,2,3;!=35"; +static const char *_data_FX_MODE_FIRE_2012 PROGMEM = "Fire 2012 1D/2D@Cooling=120,Spark rate=64;1,2,3;!=35"; // ColorWavesWithPalettes by Mark Kriegsman: https://gist.github.com/kriegsman/8281905786e8b2632aeb @@ -4199,7 +4199,7 @@ uint16_t mode_blends(void) { return FRAMETIME; } -static const char *_data_FX_MODE_BLENDS PROGMEM = "Blends@Shift speed,Blend speed;1,2,3,!"; +static const char *_data_FX_MODE_BLENDS PROGMEM = "Blends@Shift speed,Blend speed;1,2,3;!"; /* diff --git a/wled00/data/index.css b/wled00/data/index.css index 9a12d25a..776d866a 100644 --- a/wled00/data/index.css +++ b/wled00/data/index.css @@ -193,7 +193,7 @@ button { position: absolute; top: 8px; left: 12px; - pointer-events: none; + /*pointer-events: none;*/ width: 24px; height: 24px; } @@ -369,7 +369,7 @@ button { #sliders { width: 300px; - margin: 32px auto 0; + margin: 0 auto; position: sticky; bottom: 0; } @@ -380,14 +380,26 @@ button { } .slider { - background: var(--c-2); + background-color: var(--c-2); max-width: 300px; min-width: 280px; margin: 0 auto; /* add 5px; if you want some vertical space but looks ugly */ - border-radius: 15px; + border-radius: 24px; position: relative; } +.filter { + background-color: var(--c-4); + border-radius: 26px; + height: 26px; + margin: 0 auto; /* 8px if you want space */ + padding: 8px; + position: relative; + width: 260px; + /*transition: opacity 1s;*/ + /*opacity: 1;*/ +} + /* Tooltip text */ .slider .tooltiptext { visibility: hidden; @@ -447,6 +459,10 @@ button { .hide { display: none !important; } +.fade { + visibility: hidden; + opacity: 0; +} .first { margin-top: 10px; @@ -1186,6 +1202,17 @@ TD .checkmark, TD .radiomark { left: 9px; } +.filter .fchkl { + display: inline-block; + min-width: 1em; + padding: 4px 4px 4px 32px; + text-align: left; + line-height: 24px; + vertical-align: middle; + -webkit-filter: grayscale(100%); /* Safari 6.0 - 9.0 */ + filter: grayscale(100%); +} + .lbl-s { display: inline-block; /* margin: 10px 4px 0 0; */ @@ -1279,6 +1306,9 @@ TD .checkmark, TD .radiomark { /* list item name (for sorting) */ .lstIname { white-space: nowrap; + text-overflow: ellipsis; + -webkit-filter: grayscale(100%); /* Safari 6.0 - 9.0 */ + filter: grayscale(100%); } /* list item palette preview */ @@ -1308,6 +1338,8 @@ TD .checkmark, TD .radiomark { border-radius: 21px; background: var(--c-2); border: 1px solid var(--c-3); + -webkit-filter: grayscale(100%); /* Safari 6.0 - 9.0 */ + filter: grayscale(100%); } .fnd input[type="text"]:focus { diff --git a/wled00/data/index.htm b/wled00/data/index.htm index b9b8d94c..d5791cb0 100644 --- a/wled00/data/index.htm +++ b/wled00/data/index.htm @@ -202,7 +202,7 @@
- +
@@ -217,6 +217,24 @@
+
+ + + + +
diff --git a/wled00/data/index.js b/wled00/data/index.js index f5b77412..f8fb6258 100644 --- a/wled00/data/index.js +++ b/wled00/data/index.js @@ -690,12 +690,12 @@ function populateSegments(s)
`; - let rvXck = ``; - let miXck = ``; + let rvXck = ``; + let miXck = ``; let rvYck = "", miYck =""; if (isM) { - rvYck = ``; - miYck = ``; + rvYck = ``; + miYck = ``; } let map2D = `
Expand 1D FX
- + &#x${inst.frz ? (li.live && li.liveseg==i?'e410':'e0e8') : 'e325'};
@@ -762,7 +762,7 @@ function populateSegments(s)
@@ -808,16 +808,17 @@ function populateEffects() for (let i = 0; i < effects.length; i++) { // WLEDSR: add slider and color control to setX (used by requestjson) + let id = effects[i].id; + let nm = effects[i].name; + let fd = ""; + if (Array.isArray(fxdata) && fxdata.length>id) { + fd = fxdata[id].substr(1); + var eP = (fd == '')?[]:fd.split(";"); + var p = (eP.length<3 || eP[2]==='')?[]:eP[2].split(","); + if (p.length>0 && p[0].substr(0,1) === "!") nm += " 🎨"; + } if (effects[i].name.indexOf("Reserved") < 0) { - let id = effects[i].id; - html += generateListItemHtml( - 'fx', - id, - effects[i].name, - 'setX', - '', - !(Array.isArray(fxdata) && fxdata.length>id) ? '' : fxdata[id].substr(1) - ); + html += generateListItemHtml('fx',id,nm,'setX','',fd); } } @@ -918,7 +919,7 @@ function generateListItemHtml(listName, id, name, clickAction, extraHtml = '', e return `