From 42347326311d8e096e5263bde5de4cba967e77e9 Mon Sep 17 00:00:00 2001 From: RaffaelW Date: Sun, 15 Dec 2024 00:11:37 +0100 Subject: [PATCH] added slider for led brightness --- data/index.html | 18 ++++++++++++++++++ data/range-input.js | 14 ++++++++++++++ data/style.css | 35 +++++++++++++++++++++++++++++------ data/submit.js | 2 +- src/routes/config.cpp | 3 +++ 5 files changed, 65 insertions(+), 7 deletions(-) create mode 100644 data/range-input.js diff --git a/data/index.html b/data/index.html index c32318f..d5c8ca9 100644 --- a/data/index.html +++ b/data/index.html @@ -11,6 +11,7 @@ +
@@ -177,6 +178,23 @@ /> +
+ Sonstiges + +
diff --git a/data/range-input.js b/data/range-input.js new file mode 100644 index 0000000..4b31c04 --- /dev/null +++ b/data/range-input.js @@ -0,0 +1,14 @@ +document.querySelector("form").addEventListener("input", (event) => { + if (event.target.classList.contains("range")) { + updateValue(event.target); + } +}); + +function updateValue(slider) { + const percentage = Math.round((slider.value / slider.max) * 100); + slider.nextElementSibling.innerText = `${percentage}%`; +} + +document.querySelectorAll("input[type='range'].range").forEach((element) => { + updateValue(element); +}); diff --git a/data/style.css b/data/style.css index a595e33..e0553be 100644 --- a/data/style.css +++ b/data/style.css @@ -3,7 +3,7 @@ --color-on-primary: white; --color-background: #222; --color-danger: #fa2b58; - --icon-button-size: 2.5rem; + --appended-item-size: 2.5rem; } body { @@ -50,8 +50,13 @@ label span { } input, -select { +select, +label div { width: clamp(200px, 100%, 400px); +} + +input, +select { background-color: var(--color-background); color: white; border: 1px solid white; @@ -66,8 +71,13 @@ select:focus { border-color: var(--color-primary); } -select:has(+ .icon-button) { - width: calc(clamp(200px, 100%, 400px) - var(--icon-button-size) - 8px); +select:has(+ .icon-button), +label div input[type="range"] { + width: calc(clamp(200px, 100%, 400px) - var(--appended-item-size) - 8px); +} + +input[type="range"] { + accent-color: var(--color-primary); } button { @@ -213,8 +223,8 @@ button.reload { .icon-button { padding: 8px; font-size: 0; - width: var(--icon-button-size); - height: var(--icon-button-size); + width: var(--appended-item-size); + height: var(--appended-item-size); } .spinning { @@ -223,3 +233,16 @@ button.reload { animation-iteration-count: infinite; animation-timing-function: linear; } + +div:has(.range-value) { + display: flex; + flex-direction: row; + gap: 8px; +} + +.range-value { + width: var(--appended-item-size); + height: var(--appended-item-size); + text-align: center; + line-height: var(--appended-item-size); +} diff --git a/data/submit.js b/data/submit.js index 0fdbda8..f7e5924 100644 --- a/data/submit.js +++ b/data/submit.js @@ -18,7 +18,7 @@ function parseValue(input) { return null; } - if (input.type === "number") { + if (input.type === "number" || input.type === "range") { const number = Number(input.value); return Number.isNaN(number) ? null : number; } diff --git a/src/routes/config.cpp b/src/routes/config.cpp index 5ca6107..7450e5e 100644 --- a/src/routes/config.cpp +++ b/src/routes/config.cpp @@ -96,6 +96,7 @@ void onGetConfig(AsyncWebServerRequest *request) doc["direction-1"] = config.getUInt("direction-1", Output); doc["universe-2"] = config.getUInt("universe-2", 1); doc["direction-2"] = config.getUInt("direction-2", Input); + doc["led-brightness"] = config.getUInt("led-brightness", 25); config.end(); @@ -152,6 +153,8 @@ void onPutConfig(AsyncWebServerRequest *request, uint8_t *data, size_t len, size config.putUInt("universe-1", doc["universe-1"]); config.putUInt("universe-2", doc["universe-2"]); + config.putUInt("led-brightness", doc["led-brightness"]); + config.end(); request->send(200);