diff --git a/tools/cdata.js b/tools/cdata.js index 90619ba67..09816f959 100644 --- a/tools/cdata.js +++ b/tools/cdata.js @@ -219,36 +219,10 @@ function writeChunks(srcDir, specs, resultFile) { } writeHtmlGzipped("wled00/data/index.htm", "wled00/html_ui.h", 'index'); -writeHtmlGzipped("wled00/data/simple.htm", "wled00/html_simple.h", 'simple'); writeHtmlGzipped("wled00/data/pixart/pixart.htm", "wled00/html_pixart.h", 'pixart'); writeHtmlGzipped("wled00/data/cpal/cpal.htm", "wled00/html_cpal.h", 'cpal'); writeHtmlGzipped("wled00/data/pxmagic/pxmagic.htm", "wled00/html_pxmagic.h", 'pxmagic'); -/* -writeChunks( - "wled00/data", - [ - { - file: "simple.css", - name: "PAGE_simpleCss", - method: "gzip", - filter: "css-minify", - }, - { - file: "simple.js", - name: "PAGE_simpleJs", - method: "gzip", - filter: "js-minify", - }, - { - file: "simple.htm", - name: "PAGE_simple", - method: "gzip", - filter: "html-minify-ui", - } - ], - "wled00/html_simplex.h" -); -*/ + writeChunks( "wled00/data", [ diff --git a/wled00/cfg.cpp b/wled00/cfg.cpp index fdb70099c..b036dc1d4 100644 --- a/wled00/cfg.cpp +++ b/wled00/cfg.cpp @@ -31,9 +31,7 @@ bool deserializeConfig(JsonObject doc, bool fromFS) { getStringFromJson(cmDNS, id[F("mdns")], 33); getStringFromJson(serverDescription, id[F("name")], 33); getStringFromJson(alexaInvocationName, id[F("inv")], 33); -#ifdef WLED_ENABLE_SIMPLE_UI CJSON(simplifiedUI, id[F("sui")]); -#endif JsonObject nw = doc["nw"]; #ifndef WLED_DISABLE_ESPNOW @@ -655,9 +653,7 @@ void serializeConfig() { id[F("mdns")] = cmDNS; id[F("name")] = serverDescription; id[F("inv")] = alexaInvocationName; -#ifdef WLED_ENABLE_SIMPLE_UI id[F("sui")] = simplifiedUI; -#endif JsonObject nw = doc.createNestedObject("nw"); #ifndef WLED_DISABLE_ESPNOW diff --git a/wled00/data/index.css b/wled00/data/index.css index 7faaeb47e..0ffdf68d3 100644 --- a/wled00/data/index.css +++ b/wled00/data/index.css @@ -370,6 +370,16 @@ button { padding: 5px 0 0; } +/* Quick load magin for simplified UI */ +.simplified #pql { + margin-bottom: 8px; +} + +/* Button margin for simplified UI */ +.simplified #fx .btn, .simplified #palw .btn { + margin-top: 0; +} + .smooth { transition: transform calc(var(--f, 1)*.5s) ease-out } .tab-label { @@ -413,6 +423,7 @@ button { position: sticky; bottom: 0; max-width: 300px; + z-index: 2; } #sliders .labels { @@ -754,13 +765,17 @@ input[type=range]::-moz-range-thumb { } #Colors .sliderwrap { - margin: 4px 0 0; + margin: 2px 0 0; } -/* Dynamically hide brightness slider label */ +/* Dynamically hide labels */ .hd { display: var(--bhd); } +/* Do not hide quick load label in simplified mode on small screen widths */ +.simplified #pql .hd { + display: var(--bhd) !important; +} #briwrap { min-width: 300px; @@ -1284,6 +1299,12 @@ TD .checkmark, TD .radiomark { margin-top: 0; } +/* Simplify segments */ +.simplified #segcont .lstI { + margin-top: 4px; + min-height: unset; +} + /* selected item/element */ .selected { /* has to be after .lstI since !important is not ok */ background: var(--c-4); @@ -1324,6 +1345,19 @@ TD .checkmark, TD .radiomark { top: calc(var(--sti) + 42px); } +dialog::backdrop { + backdrop-filter: blur(10px); + -webkit-backdrop-filter: blur(10px); +} +dialog { + max-height: 70%; + border: 0; + border-radius: 10px; + background: linear-gradient(rgba(0, 0, 0, 0.15), rgba(0, 0, 0, 0.1)), var(--c-3); + box-shadow: 4px 4px 10px 4px var(--c-1); + color: var(--c-f); +} + #fxlist .lstI.sticky, #pallist .lstI.sticky { top: var(--sti); diff --git a/wled00/data/index.htm b/wled00/data/index.htm index 21aa28d6d..8ef5a62f7 100644 --- a/wled00/data/index.htm +++ b/wled00/data/index.htm @@ -168,7 +168,7 @@ -
+
diff --git a/wled00/data/index.js b/wled00/data/index.js index 02bb07ff9..3fed6d20e 100644 --- a/wled00/data/index.js +++ b/wled00/data/index.js @@ -12,6 +12,7 @@ var currentPreset = -1; var lastUpdate = 0; var segCount = 0, ledCount = 0, lowestUnused = 0, maxSeg = 0, lSeg = 0; var pcMode = false, pcModeA = false, lastw = 0, wW; +var simplifiedUI = false; var tr = 7; var d = document; var palettesData; @@ -624,11 +625,12 @@ function parseInfo(i) { if (name === "Dinnerbone") d.documentElement.style.transform = "rotate(180deg)"; // Minecraft easter egg if (i.live) name = "(Live) " + name; if (loc) name = "(L) " + name; - d.title = name; - ledCount = i.leds.count; - //syncTglRecv = i.str; - maxSeg = i.leds.maxseg; - pmt = i.fs.pmt; + d.title = name; + simplifiedUI = i.simplifiedui; + ledCount = i.leds.count; + //syncTglRecv = i.str; + maxSeg = i.leds.maxseg; + pmt = i.fs.pmt; gId('buttonNodes').style.display = lastinfo.ndc > 0 ? null:"none"; // do we have a matrix set-up mw = i.leds.matrix ? i.leds.matrix.w : 0; @@ -750,6 +752,7 @@ function populateSegments(s) let rvXck = ``; let miXck = ``; let rvYck = "", miYck =""; + let smpl = simplifiedUI ? 'hide' : ''; if (isMSeg) { rvYck = ``; miYck = ``; @@ -768,23 +771,23 @@ function populateSegments(s) ``+ `
`+ `
`; - cn += `
`+ - `