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 += ``+
- `