From d9afabbdac07872fd0bedc37331192ec4c9a1e30 Mon Sep 17 00:00:00 2001 From: RaffaelW Date: Sat, 14 Dec 2024 21:14:26 +0100 Subject: [PATCH 01/11] fixed input/output toggle --- data/index.html | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/data/index.html b/data/index.html index 748d193..c32318f 100644 --- a/data/index.html +++ b/data/index.html @@ -133,8 +133,8 @@ type="checkbox" name="direction-1" id="input-direction-1" - data-value-not-checked="output" - data-value-checked="input" + data-value-not-checked="0" + data-value-checked="1" /> Input @@ -159,8 +159,8 @@ type="checkbox" name="direction-2" id="input-direction-2" - data-value-not-checked="output" - data-value-checked="input" + data-value-not-checked="0" + data-value-checked="1" /> Input From 6276b1f74bfe38299ee76fb00a315703e7f6e9ab Mon Sep 17 00:00:00 2001 From: RaffaelW Date: Sat, 14 Dec 2024 22:42:59 +0100 Subject: [PATCH 02/11] disabled automatic wifi scan when the configuration page loads to avoid disconnecting and added warning --- data/load-data.js | 4 +++- data/networks.js | 13 +++++++++++-- 2 files changed, 14 insertions(+), 3 deletions(-) diff --git a/data/load-data.js b/data/load-data.js index 1ec35a7..b169abf 100644 --- a/data/load-data.js +++ b/data/load-data.js @@ -6,6 +6,8 @@ import { const form = document.querySelector("form"); +export let data = {}; + export async function loadData(timeout = null) { const req = await fetch("/config", { method: "GET", @@ -38,7 +40,7 @@ export function writeDataToInput(data) { showLoadingScreen("Konfiguration wird geladen..."); try { - const data = await loadData(); + data = await loadData(); hideLoadingScreen(); writeDataToInput(data); } catch (error) { diff --git a/data/networks.js b/data/networks.js index 1ed4452..fd74fea 100644 --- a/data/networks.js +++ b/data/networks.js @@ -1,3 +1,5 @@ +import { data } from "./load-data.js"; + const networkDropdown = document.querySelector("#select-network"); const refreshButton = document.querySelector("#refresh-networks"); const refreshIcon = refreshButton.querySelector("img"); @@ -5,6 +7,15 @@ const refreshIcon = refreshButton.querySelector("img"); let isLoading = false; refreshButton.addEventListener("click", async () => { + // check if interface is connected via WiFi-AccessPoint + if (data.connection == 0 || data.connection == 1) { + alert( + "Um nach WLAN-Netzwerken zu scannen, muss hardware-bedingt die " + + "WLAN-Verbindung kurzzeitig unterbrochen werden.\n" + + "Wenn das DMX-Interface nach dem Scan nicht mehr verbunden " + + "ist, verbinde es bitte neu." + ); + } updateNetworks(); }); @@ -56,5 +67,3 @@ async function updateNetworks() { insertNetworks(networks); } } - -updateNetworks(); From 42347326311d8e096e5263bde5de4cba967e77e9 Mon Sep 17 00:00:00 2001 From: RaffaelW Date: Sun, 15 Dec 2024 00:11:37 +0100 Subject: [PATCH 03/11] 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); From 1e52c401e4e679a9608f878f80cb299b7f44abfd Mon Sep 17 00:00:00 2001 From: RaffaelW Date: Sun, 15 Dec 2024 16:12:30 +0100 Subject: [PATCH 04/11] adjust led brightness --- src/main.cpp | 3 +++ 1 file changed, 3 insertions(+) diff --git a/src/main.cpp b/src/main.cpp index 778d320..e6c57ed 100644 --- a/src/main.cpp +++ b/src/main.cpp @@ -101,6 +101,9 @@ void setup() esp_read_mac(mac, ESP_MAC_ETH); // LED + config.begin("dmx", true); + brightness_led = config.getUInt("led-brightness", 20); + config.end(); analogWrite(PIN_LED, brightness_led); // delay(5000); ledBlink(500); From c3fab50ccc6f2aeaeb27504499d1b2edba9a3d6f Mon Sep 17 00:00:00 2001 From: RaffaelW Date: Sun, 15 Dec 2024 18:45:15 +0100 Subject: [PATCH 05/11] extracted default config values --- src/main.cpp | 29 +++++++++++++---------------- src/routes/config.cpp | 30 +++++++++++++----------------- src/routes/config.h | 23 ++++++++++++++++++----- 3 files changed, 44 insertions(+), 38 deletions(-) diff --git a/src/main.cpp b/src/main.cpp index e6c57ed..e7dce89 100644 --- a/src/main.cpp +++ b/src/main.cpp @@ -102,7 +102,7 @@ void setup() // LED config.begin("dmx", true); - brightness_led = config.getUInt("led-brightness", 20); + brightness_led = config.getUInt("led-brightness", DEFAULT_LED_BRIGHTNESS); config.end(); analogWrite(PIN_LED, brightness_led); // delay(5000); @@ -127,11 +127,11 @@ void setup() config.begin("dmx", true); - universe1 = config.getUChar("universe-1", 1); - universe2 = config.getUChar("universe-2", 1); + universe1 = config.getUChar("universe-1", DEFAULT_UNIVERSE1); + universe2 = config.getUChar("universe-2", DEFAULT_UNIVERSE2); - direction1 = static_cast(config.getUInt("direction-1", 0)); - direction2 = static_cast(config.getUInt("direction-2", 1)); + direction1 = static_cast(config.getUInt("direction-1", DEFAULT_DIRECTION1)); + direction2 = static_cast(config.getUInt("direction-2", DEFAULT_DIRECTION2)); Serial.print("Port A: Universe "); Serial.print(universe1); @@ -143,25 +143,22 @@ void setup() Serial.print(" "); Serial.println((direction2 == Input) ? "DMX -> Art-Net" : "Art-Net -> DMX"); - Connection connection = static_cast(config.getUInt("connection", WiFiAP)); - IpMethod ipMethod = static_cast(config.getUInt("ip-method"), DHCP); + Connection connection = static_cast(config.getUInt("connection", DEFAULT_CONNECTION)); + IpMethod ipMethod = static_cast(config.getUInt("ip-method"), DEFAULT_IP_METHOD); - WiFi.macAddress(mac); char hostname[30]; snprintf(hostname, sizeof(hostname), "ChaosDMX-%02X%02X", mac[4], mac[5]); + DEFAULT_SSID = hostname; Serial.print("Hostname: "); Serial.println(hostname); - String ssid = config.getString("ssid", hostname); - String pwd = config.getString("password", "mbgmbgmbg"); + String ssid = config.getString("ssid", DEFAULT_SSID); + String pwd = config.getString("password", DEFAULT_PASSWORD); // Default IP as defined in standard https://art-net.org.uk/downloads/art-net.pdf, page 13 - IPAddress defaultIp(2, mac[3], mac[4], mac[5]); - IPAddress ip = config.getUInt("ip", defaultIp); - IPAddress defaultSubnet(255, 0, 0, 0); - IPAddress subnet = config.getUInt("subnet", defaultSubnet); - IPAddress defaultGateway(2, 0, 0, 1); - IPAddress gateway = config.getUInt("gateway", defaultGateway); + IPAddress ip = config.getUInt("ip", DEFAULT_IP); + IPAddress subnet = config.getUInt("subnet", DEFAULT_SUBNET); + IPAddress gateway = config.getUInt("gateway", DEFAULT_GATEWAY); config.end(); diff --git a/src/routes/config.cpp b/src/routes/config.cpp index 7450e5e..2f4e648 100644 --- a/src/routes/config.cpp +++ b/src/routes/config.cpp @@ -4,6 +4,7 @@ #include "WiFi.h" Preferences config; +String DEFAULT_SSID = ""; #pragma region Utility @@ -75,28 +76,23 @@ void onGetConfig(AsyncWebServerRequest *request) { config.begin("dmx", true); - IPAddress defaultIp(192, 168, 1, 201); - IPAddress ip = config.getUInt("ip", defaultIp); - - IPAddress defaultSubnet(255, 255, 255, 0); - IPAddress subnet = config.getUInt("subnet", defaultSubnet); - - IPAddress defaultGateway(192, 168, 1, 1); - IPAddress gateway = config.getUInt("gateway", defaultGateway); + IPAddress ip = config.getUInt("ip", DEFAULT_IP); + IPAddress subnet = config.getUInt("subnet", DEFAULT_SUBNET); + IPAddress gateway = config.getUInt("gateway", DEFAULT_GATEWAY); JsonDocument doc; - doc["connection"] = config.getUInt("connection", WiFiSta); - doc["ssid"] = config.getString("ssid", "artnet"); - doc["password"] = config.getString("password", "mbgmbgmbg"); - doc["ip-method"] = config.getUInt("ip-method"), Static; + doc["connection"] = config.getUInt("connection", DEFAULT_CONNECTION); + doc["ssid"] = config.getString("ssid", DEFAULT_SSID); + doc["password"] = config.getString("password", DEFAULT_PASSWORD); + doc["ip-method"] = config.getUInt("ip-method", DEFAULT_IP_METHOD); doc["ip"] = ip.toString(); doc["subnet"] = subnet.toString(); doc["gateway"] = gateway.toString(); - doc["universe-1"] = config.getUInt("universe-1", 1); - 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); + doc["universe-1"] = config.getUInt("universe-1", DEFAULT_UNIVERSE1); + doc["direction-1"] = config.getUInt("direction-1", DEFAULT_DIRECTION1); + doc["universe-2"] = config.getUInt("universe-2", DEFAULT_UNIVERSE2); + doc["direction-2"] = config.getUInt("direction-2", DEFAULT_DIRECTION2); + doc["led-brightness"] = config.getUInt("led-brightness", DEFAULT_LED_BRIGHTNESS); config.end(); diff --git a/src/routes/config.h b/src/routes/config.h index 54c1a03..948f0c3 100644 --- a/src/routes/config.h +++ b/src/routes/config.h @@ -1,11 +1,9 @@ -#pragma once - #include #include #include -// #ifndef CONFIG_h -// #define CONFIG_h +#ifndef CONFIG_h +#define CONFIG_h extern Preferences config; @@ -31,10 +29,25 @@ enum Direction }; const uint8_t DIRECTION_SIZE = 2; +const Connection DEFAULT_CONNECTION = WiFiAP; +const IpMethod DEFAULT_IP_METHOD = DHCP; +extern String DEFAULT_SSID; // initialized in setup because it depends on the mac address +const String DEFAULT_PASSWORD = "mbgmbgmbg"; +const IPAddress DEFAULT_IP(192, 168, 4, 1); +const IPAddress DEFAULT_SUBNET(255, 0, 0, 0); +const IPAddress DEFAULT_GATEWAY(2, 0, 0, 1); + +const Direction DEFAULT_DIRECTION1 = Output; +const Direction DEFAULT_DIRECTION2 = Input; +const uint8_t DEFAULT_UNIVERSE1 = 1; +const uint8_t DEFAULT_UNIVERSE2 = 2; + +const uint8_t DEFAULT_LED_BRIGHTNESS = 25; + void onGetConfig(AsyncWebServerRequest *request); void onPutConfig(AsyncWebServerRequest *request, uint8_t *data, size_t len, size_t index, size_t total); void onGetNetworks(AsyncWebServerRequest *request); -// #endif \ No newline at end of file +#endif \ No newline at end of file From c3705583ea038ddd9d99bf4b975fca52f672d8a0 Mon Sep 17 00:00:00 2001 From: RaffaelW Date: Sun, 15 Dec 2024 21:08:42 +0100 Subject: [PATCH 06/11] corrected default values for ip addresses --- src/main.cpp | 2 +- src/routes/config.cpp | 4 ++-- src/routes/config.h | 2 +- 3 files changed, 4 insertions(+), 4 deletions(-) diff --git a/src/main.cpp b/src/main.cpp index 0d71a41..9a02be3 100644 --- a/src/main.cpp +++ b/src/main.cpp @@ -155,7 +155,7 @@ void setup() // Default IP as defined in standard https://art-net.org.uk/downloads/art-net.pdf, page 13 IPAddress ip = config.getUInt("ip", DEFAULT_IP); IPAddress subnet = config.getUInt("subnet", DEFAULT_SUBNET); - IPAddress gateway = config.getUInt("gateway", DEFAULT_GATEWAY); + IPAddress gateway = config.getUInt("gateway", NULL); config.end(); diff --git a/src/routes/config.cpp b/src/routes/config.cpp index 2f4e648..85cb4f5 100644 --- a/src/routes/config.cpp +++ b/src/routes/config.cpp @@ -78,7 +78,7 @@ void onGetConfig(AsyncWebServerRequest *request) IPAddress ip = config.getUInt("ip", DEFAULT_IP); IPAddress subnet = config.getUInt("subnet", DEFAULT_SUBNET); - IPAddress gateway = config.getUInt("gateway", DEFAULT_GATEWAY); + IPAddress gateway = config.getUInt("gateway", NULL); JsonDocument doc; doc["connection"] = config.getUInt("connection", DEFAULT_CONNECTION); @@ -87,7 +87,7 @@ void onGetConfig(AsyncWebServerRequest *request) doc["ip-method"] = config.getUInt("ip-method", DEFAULT_IP_METHOD); doc["ip"] = ip.toString(); doc["subnet"] = subnet.toString(); - doc["gateway"] = gateway.toString(); + doc["gateway"] = gateway != NULL ? gateway.toString() : ""; doc["universe-1"] = config.getUInt("universe-1", DEFAULT_UNIVERSE1); doc["direction-1"] = config.getUInt("direction-1", DEFAULT_DIRECTION1); doc["universe-2"] = config.getUInt("universe-2", DEFAULT_UNIVERSE2); diff --git a/src/routes/config.h b/src/routes/config.h index 948f0c3..4e928fa 100644 --- a/src/routes/config.h +++ b/src/routes/config.h @@ -34,7 +34,7 @@ const IpMethod DEFAULT_IP_METHOD = DHCP; extern String DEFAULT_SSID; // initialized in setup because it depends on the mac address const String DEFAULT_PASSWORD = "mbgmbgmbg"; const IPAddress DEFAULT_IP(192, 168, 4, 1); -const IPAddress DEFAULT_SUBNET(255, 0, 0, 0); +const IPAddress DEFAULT_SUBNET(255, 255, 255, 0); const IPAddress DEFAULT_GATEWAY(2, 0, 0, 1); const Direction DEFAULT_DIRECTION1 = Output; From 0d3a398f8344a8e1216936eac3e3b88e3cf9d1aa Mon Sep 17 00:00:00 2001 From: RaffaelW Date: Sun, 15 Dec 2024 21:09:02 +0100 Subject: [PATCH 07/11] made some input fields required --- data/index.html | 7 +++++++ 1 file changed, 7 insertions(+) diff --git a/data/index.html b/data/index.html index d5c8ca9..c6f81ab 100644 --- a/data/index.html +++ b/data/index.html @@ -40,6 +40,7 @@ name="ip-method" id="input-ip-method" title="IP-" + required > @@ -53,6 +54,7 @@ name="ip" id="input-ip" placeholder="IP-Adresse" + required />
@@ -80,6 +84,7 @@ name="connection" id="input-connection" title="Verbindung" + required > @@ -94,6 +99,7 @@ name="ssid" id="input-ssid" placeholder="SSID" + required /> @@ -104,6 +110,7 @@ name="ssid" id="select-network" title="Netzwerk" + required >