ui countdown

ui look
logging cleanup
2025-08-29 11:39:16 +02:00 · 2025-08-29 10:10:56 +02:00 · 2025-08-29 10:10:46 +02:00 · 2025-08-29 09:56:41 +02:00 · 2025-08-29 09:56:23 +02:00 · 2025-08-29 09:56:15 +02:00
9 changed files with 278 additions and 111 deletions
--- a/index.html
+++ b/index.html
@ -1,8 +1,14 @@
+<!DOCTYPE html>
 <html lang="de">
 <head>
  <title id="title"></title>
  <link rel="icon" type="image/svg" href="icon.svg">
  <style>
+    body {
+      font-family: sans-serif;
+      margin: 0;
+    }
+
    .relay {
      display: flex;
      flex-direction: row;
@ -11,6 +17,8 @@

    .relay > * {
      flex: 1;
+      margin: 0.25em;
+      padding: 0.25em;
    }

    .name {
@ -29,6 +37,29 @@
      text-align: right;
    }

+    .state {
+    }
+
+    .stateOn {
+      background-color: palegreen;
+    }
+
+    .stateOff {
+      background-color: indianred;
+    }
+
+    .switchOn {
+      background-color: palegreen;
+    }
+
+    .switchOff {
+      background-color: indianred;
+    }
+
+    .switchCycle {
+      background-color: lightskyblue;
+    }
+
    #info {
      display: none;
    }
@ -41,12 +72,13 @@
  <div class="relay">
    <div class="header name">Name</div>
    <div class="header state">Status</div>
-    <div class="header initial">Initial</div>
+    <div class="header countdown">Countdown</div>
    <div class="header onMillis">Auto Aus</div>
    <div class="header offMillis">Auto An</div>
-    <div class="header switchOn">Ein</div>
-    <div class="header switchOff">Aus</div>
-    <div class="header switchCycle">Zyklus</div>
+    <div class="header"></div>
+    <div class="header"></div>
+    <div class="header"></div>
+    <div class="header initial">Initial</div>
  </div>
 </div>

@ -71,6 +103,68 @@

  let timeout;

+  function updateValue(tag, clazz, innerTag, value) {
+    const input = tag.getElementsByClassName(clazz)[0].getElementsByTagName(innerTag)[0];
+    if (document.activeElement !== input) {
+      input.value = value;
+    }
+  }
+
+  function updateState(relayTag, state) {
+    const tag = relayTag.getElementsByClassName("state")[0];
+    if (state) {
+      tag.innerText = "Ein";
+      tag.classList.add("stateOn");
+      tag.classList.remove("stateOff");
+    } else {
+      tag.innerText = "Aus";
+      tag.classList.add("stateOff");
+      tag.classList.remove("stateOn");
+    }
+  }
+
+  const SECOND = 1000;
+  const MINUTE = (60 * SECOND);
+  const HOUR = (60 * MINUTE);
+  const DAY = (24 * HOUR);
+
+  function countdownString(relayData, millis) {
+    const rest = Math.ceil((millis - relayData.stateMillis - (Date.now() - dataAge)) / SECOND) * SECOND;
+    if (millis <= 0 || (relayData.onCount === 0 && !relayData.state)) {
+      return "-";
+    }
+    const days = rest / DAY;
+    const hours = rest / HOUR;
+    const minutes = rest / MINUTE;
+    const seconds = rest / SECOND;
+    if (days >= 1) {
+      return Math.floor(days) + "d " + Math.floor(hours % 24) + "h " + Math.ceil(minutes % 60) + "m " + Math.ceil(seconds % 60) + "s";
+    }
+    if (hours >= 1) {
+      return Math.floor(hours) + "h " + Math.floor(minutes % 60) + "m " + Math.ceil(seconds % 60) + "s";
+    }
+    if (minutes >= 1) {
+      return Math.floor(minutes) + "m " + Math.ceil(seconds % 60) + "s";
+    }
+    if (seconds >= 1) {
+      return Math.ceil(rest / SECOND) + "s";
+    }
+    return "Warte...";
+  }
+
+  function updateCountdown(relayTag, relayData) {
+    const tag = relayTag.getElementsByClassName("countdown")[0];
+    if (relayData.state) {
+      tag.innerText = countdownString(relayData, relayData.onMillis);
+    } else {
+      tag.innerText = countdownString(relayData, relayData.offMillis);
+    }
+  }
+
+  let data;
+
+  let dataAge;
+
  function request(query = "") {
    if (timeout) {
      clearTimeout(timeout);
@ -81,16 +175,18 @@
    r.open("GET", getUrl(`set?${query}`));
    r.onreadystatechange = () => {
      if (r.readyState === 4 && r.status === 200) {
-        const data = JSON.parse(r.response);
+        data = JSON.parse(r.response);
+        dataAge = Date.now();
        title.innerText = data.hostname;
        for (let index = 0; index < data.relays.length; index++) {
          const relayData = data.relays[index];
-          const tag = document.getElementById("relay" + index) || create(index);
-          tag.getElementsByClassName("name")[0].getElementsByTagName("input")[0].value = relayData.name;
-          tag.getElementsByClassName("state")[0].innerText = relayData.state ? "Ein" : "Aus";
-          tag.getElementsByClassName("onMillis")[0].getElementsByTagName("input")[0].value = relayData.onMillis;
-          tag.getElementsByClassName("offMillis")[0].getElementsByTagName("input")[0].value = relayData.offMillis;
-          tag.getElementsByClassName("initial")[0].getElementsByTagName("select")[0].value = relayData.initial;
+          const relayTag = document.getElementById("relay" + index) || create(index);
+          updateValue(relayTag, "name", "input", relayData.name);
+          updateState(relayTag, relayData.state);
+          updateCountdown(relayTag, relayData);
+          updateValue(relayTag, "onMillis", "input", relayData.onMillis);
+          updateValue(relayTag, "offMillis", "input", relayData.offMillis);
+          updateValue(relayTag, "initial", "select", relayData.initial);
        }
        info.innerText = JSON.stringify(data, null, 2);
      }
@ -119,7 +215,7 @@
  function newButton(relayIndex, relayTag, clazz, key, value, text) {
    const div = newDiv(relayIndex, relayTag, clazz);

-    const button = document.createElement("button")
+    const button = document.createElement("div")
    button.innerText = text;
    button.onclick = () => set(key, relayIndex, value);
    div.append(button);
@ -152,16 +248,30 @@

    newInput(relayIndex, relayTag, "name", "text");
    newDiv(relayIndex, relayTag, "state");
-    newSelect(relayIndex, relayTag, "initial", [["OFF", "Aus"], ["ON", "Ein"], ["CYCLE", "Zyklus"]]);
+    newDiv(relayIndex, relayTag, "countdown");
    newInput(relayIndex, relayTag, "onMillis", "number");
    newInput(relayIndex, relayTag, "offMillis", "number");
    newButton(relayIndex, relayTag, "switchOn", "state", "true", "Ein");
    newButton(relayIndex, relayTag, "switchOff", "state", "false", "Aus");
    newButton(relayIndex, relayTag, "switchCycle", "onCount", -1, "Zyklus");
+    newSelect(relayIndex, relayTag, "initial", [["OFF", "Aus"], ["ON", "Ein"], ["CYCLE", "Zyklus"]]);
    return relayTag;
  }

  request();
+
+  function update() {
+    if (!data) {
+      return;
+    }
+    for (let index = 0; index < data.relays.length; index++) {
+      const relayData = data.relays[index];
+      const relayTag = document.getElementById("relay" + index) || create(index);
+      updateCountdown(relayTag, relayData);
+    }
+  }
+
+  setInterval(() => update(), 500);
 </script>
 </body>
 </html>
--- a/platformio.ini
+++ b/platformio.ini
@ -16,4 +16,4 @@ upload_speed = 921600
 monitor_speed = 115200
 build.filesystem = littlefs
 lib_deps = bblanchon/ArduinoJson @ 7.4.2
-build_flags = -D STATUS_PIN=2 -D STATUS_INVERT=false
+build_flags = -D STATUS_PIN=2 -D STATUS_INVERT=false -D CORE_DEBUG_LEVEL=0
--- a/src/Output.h
+++ b/src/Output.h
@ -30,7 +30,7 @@ protected:
  void _write(const bool state) {
    if (state != get()) {
      if (logState) {
-        Serial.printf("%s: %s\n", name.c_str(), state ? "ON" : "OFF");
+        Serial.printf("[RELAY] \"%s\" = %s\n", name.c_str(), state ? "ON" : "OFF");
      }
      stateMillis = millis();
    }
--- a/src/Relay.h
+++ b/src/Relay.h
@ -18,31 +18,39 @@ public:

  void setup() override {
    Output::setup();
-    Output::setName(configRead(String("relayName") + index, nameFallback));
-    Output::setInitial(configRead(String("relayInitial") + index, INITIAL_OFF));
-    Output::setOnMillis(configRead(String("relayOnMillis") + index, 0L));
-    Output::setOffMillis(configRead(String("relayOffMillis") + index, 0L));
+    Output::setName(configRead(path("name"), nameFallback));
+    Output::setInitial(configRead(path("initial"), INITIAL_OFF));
+    Output::setOnMillis(configRead(path("onMillis"), 0L));
+    Output::setOffMillis(configRead(path("offMillis"), 0L));
    _applyInitial();
  }

  void setName(const String &value) override {
    Output::setName(value);
-    configWrite(String("relayName") + index, nameFallback, value);
+    configWrite(path("name"), nameFallback, value, false);
  }

  void setInitial(const Initial value) override {
    Output::setInitial(value);
-    configWrite(String("relayInitial") + index, INITIAL_OFF, value);
+    configWrite(path("initial"), INITIAL_OFF, value);
  }

  void setOnMillis(const unsigned long value) override {
    Output::setOnMillis(value);
-    configWrite(String("relayOnMillis") + index, 0L, value);
+    configWrite(path("onMillis"), 0L, value);
  }

  void setOffMillis(const unsigned long value) override {
    Output::setOffMillis(value);
-    configWrite(String("relayOffMillis") + index, 0L, value);
+    configWrite(path("offMillis"), 0L, value);
+  }
+
+private:
+
+  String path(const char *name) const {
+    char path[64];
+    snprintf(path, sizeof(path), "/relay%d/%s", index, name);
+    return String(path);
  }

 };
--- a/src/config.cpp
+++ b/src/config.cpp
@ -1,83 +1,141 @@
 #include "config.h"

 #include <LittleFS.h>
-#include <sys/stat.h>
+
+enum CONFIG_LOG {
+  CONFIG_LOG_FALLBACK,
+  CONFIG_LOG_READ,
+  CONFIG_LOG_UNCHANGED,
+  CONFIG_LOG_WRITE,
+};
+
+void listDir(const String &path, const String &indent) {
+  auto dir = LittleFS.open(path, "r");
+  if (!dir || !dir.isDirectory()) {
+    return;
+  }
+  while (true) {
+    File child = dir.openNextFile();
+    if (!child) {
+      break;
+    }
+    if (child.isDirectory()) {
+      Serial.printf("%s[D] [    ] %s\n", indent.c_str(), child.name());
+      listDir(child.path(), indent + "  ");
+    }
+    child.close();
+  }
+  dir.rewindDirectory();
+  while (true) {
+    File child = dir.openNextFile();
+    if (!child) {
+      break;
+    }
+    if (!child.isDirectory()) {
+      Serial.printf("%s[F] [%4d] %s\n", indent.c_str(), child.size(), child.name());
+    }
+    child.close();
+  }
+  dir.close();
+}

 void configSetup() {
-  LittleFS.begin();
+  LittleFS.begin(true);
+  Serial.println("Filesystem-content:");
+  listDir("/", "");
 }

-File configOpen(const String &name, const char *mode) {
-  char path[64];
-  snprintf(path, sizeof(path), "/%s", name.c_str());
-  return LittleFS.open(path, mode);
+File configOpen(const String &path, const bool write) {
+  if (!write && !LittleFS.exists(path)) {
+    return {};
+  }
+  return LittleFS.open(path, write ? "w" : "r", write);
 }

-long configRead(const String &name, const long fallback) {
-  if (auto file = configOpen(name, "r")) {
+void doLog(const String &path, const String &value, const bool isPassword, const CONFIG_LOG type, const bool enable) {
+  if (!enable) {
+    return;
+  }
+  Serial.printf(
+    "[CONFIG] %-20s = %-30s [%s]\n",
+    path.c_str(),
+    isPassword ? "*" : value.c_str(),
+    type == CONFIG_LOG_FALLBACK ? "fallback" : type == CONFIG_LOG_READ ? "READ" : type == CONFIG_LOG_UNCHANGED ? "UNCHANGED" : type == CONFIG_LOG_WRITE ? "WRITE" : ""
+  );
+}
+
+long configRead(const String &path, const long fallback, const bool log) {
+  if (auto file = configOpen(path, false)) {
    const auto content = file.readString();
    file.close();
-    return content.toInt();
+    const auto value = content.toInt();
+    doLog(path, String(value), false, CONFIG_LOG_READ, log);
+    return value;
  }
+  doLog(path, String(fallback), false, CONFIG_LOG_FALLBACK, log);
  return fallback;
 }

-bool configWrite(const String &name, const long fallback, const long value) {
-  if (configRead(name, fallback) == value) {
+bool configWrite(const String &path, const long fallback, const long value) {
+  if (configRead(path, fallback, false) == value) {
+    doLog(path, String(value), false, CONFIG_LOG_UNCHANGED, true);
    return false;
  }
-  Serial.printf("[CONFIG] \"%s\" = \"%ld\"\n", name.c_str(), value);
-  if (auto file = configOpen(name, "w")) {
+  if (auto file = configOpen(path, true)) {
    const auto content = String(value);
    file.write(reinterpret_cast<const uint8_t *>(content.c_str()), content.length());
    file.close();
+    doLog(path, String(value), false, CONFIG_LOG_WRITE, true);
    return true;
  }
  return false;
 }

-bool configRead(const String &name, const bool fallback) {
-  return configRead(name, fallback ? 1L : 0L) > 0;
+bool configRead(const String &path, const bool fallback) {
+  return configRead(path, fallback ? 1L : 0L) > 0;
 }

-bool configWrite(const String &name, const bool fallback, const bool value) {
-  return configWrite(name, fallback ? 1L : 0L, value ? 1L : 0L);
+bool configWrite(const String &path, const bool fallback, const bool value) {
+  return configWrite(path, fallback ? 1L : 0L, value ? 1L : 0L);
 }

-String configRead(const String &name, const char *fallback) {
-  return configRead(name, String(fallback));
+String configRead(const String &path, const char *fallback) {
+  return configRead(path, String(fallback));
 }

-bool configWrite(const String &name, const char *fallback, const char *value) {
-  return configWrite(name, String(fallback), String(value));
+bool configWrite(const String &path, const char *fallback, const char *value) {
+  return configWrite(path, String(fallback), String(value), false);
 }

-String configRead(const String &name, const String &fallback) {
-  if (auto file = configOpen(name, "r")) {
-    const auto content = file.readString();
+String configRead(const String &path, const String &fallback, const bool log, const bool isPassword) {
+  if (auto file = configOpen(path, false)) {
+    const auto value = file.readString();
    file.close();
-    return content;
+    doLog(path, value.c_str(), isPassword, CONFIG_LOG_READ, log);
+    return value;
  }
+  doLog(path, fallback.c_str(), isPassword, CONFIG_LOG_FALLBACK, log);
  return fallback;
 }

-bool configWrite(const String &name, const String &fallback, const String &value) {
-  if (configRead(name, fallback) == value) {
+bool configWrite(const String &path, const String &fallback, const String &value, const bool isPassword) {
+  if (configRead(path, fallback, false) == value) {
+    doLog(path, value.c_str(), isPassword, CONFIG_LOG_UNCHANGED, true);
    return false;
  }
-  Serial.printf("[CONFIG] \"%s\" = \"%s\"\n", name.c_str(), value.c_str());
-  if (auto file = configOpen(name, "w")) {
+  if (auto file = configOpen(path, true)) {
    file.write(reinterpret_cast<const uint8_t *>(value.c_str()), value.length());
    file.close();
+    doLog(path, value.c_str(), isPassword, CONFIG_LOG_WRITE, true);
    return true;
  }
  return false;
 }

-Initial configRead(const String &name, const Initial &fallback) {
-  return stringToInitial(configRead(name, initialToString(fallback)));
+Initial configRead(const String &path, const Initial &fallback) {
+  return stringToInitial(configRead(path, initialToString(fallback)));
 }

-bool configWrite(const String &name, const Initial &fallback, const Initial &value) {
-  return configWrite(name, initialToString(fallback), initialToString(value));
+bool configWrite(const String &path, const Initial &fallback, const Initial &value) {
+  return configWrite(path, initialToString(fallback), initialToString(value));
 }
--- a/src/config.h
+++ b/src/config.h
@ -7,24 +7,24 @@

 void configSetup();

-long configRead(const String &name, long fallback);
+long configRead(const String &path, long fallback, bool log = true);

-bool configWrite(const String &name, long fallback, long value);
+bool configWrite(const String &path, long fallback, long value);

-bool configRead(const String &name, bool fallback);
+bool configRead(const String &path, bool fallback);

-bool configWrite(const String &name, bool fallback, bool value);
+bool configWrite(const String &path, bool fallback, bool value);

-String configRead(const String &name, const char *fallback);
+String configRead(const String &path, const char *fallback);

-bool configWrite(const String &name, const char *fallback, const char *value);
+bool configWrite(const String &path, const char *fallback, const char *value);

-String configRead(const String &name, const String &fallback);
+String configRead(const String &path, const String &fallback, bool log = true, bool isPassword = false);

-bool configWrite(const String &name, const String &fallback, const String &value);
+bool configWrite(const String &path, const String &fallback, const String &value, bool isPassword);

-Initial configRead(const String &name, const Initial &fallback);
+Initial configRead(const String &path, const Initial &fallback);

-bool configWrite(const String &name, const Initial &fallback, const Initial &value);
+bool configWrite(const String &path, const Initial &fallback, const Initial &value);

 #endif
--- a/src/http.cpp
+++ b/src/http.cpp
@ -29,10 +29,8 @@ void httpRelay(const int index, Output &relay) {
  if (server.hasArg(stateKey)) {
    const auto state = server.arg(stateKey);
    if (state == "true") {
-      Serial.printf("[HTTP] %s = %s\n", stateKey.c_str(), state.c_str());
      relay.set(true);
    } else if (state == "false") {
-      Serial.printf("[HTTP] %s = %s\n", stateKey.c_str(), state.c_str());
      relay.set(false);
    }
  }
@ -41,13 +39,10 @@ void httpRelay(const int index, Output &relay) {
  if (server.hasArg(initialKey)) {
    const auto initial = server.arg(initialKey);
    if (initial == "OFF") {
-      Serial.printf("[HTTP] %s = %s\n", initialKey.c_str(), initial.c_str());
      relay.setInitial(INITIAL_OFF);
    } else if (initial == "ON") {
-      Serial.printf("[HTTP] %s = %s\n", initialKey.c_str(), initial.c_str());
      relay.setInitial(INITIAL_ON);
    } else if (initial == "CYCLE") {
-      Serial.printf("[HTTP] %s = %s\n", initialKey.c_str(), initial.c_str());
      relay.setInitial(INITIAL_CYCLE);
    }
  }
@ -55,21 +50,18 @@ void httpRelay(const int index, Output &relay) {
  const auto onCountKey = String("onCount") + index;
  if (server.hasArg(onCountKey)) {
    const auto value = server.arg(onCountKey).toInt();
-    Serial.printf("[HTTP] %s = %ld\n", onCountKey.c_str(), value);
    relay.setOnCount(value);
  }

  const auto onMillisKey = String("onMillis") + index;
  if (server.hasArg(onMillisKey)) {
    const auto value = server.arg(onMillisKey).toInt();
-    Serial.printf("[HTTP] %s = %ld\n", onMillisKey.c_str(), value);
    relay.setOnMillis(value);
  }

  const auto offMillisKey = String("offMillis") + index;
  if (server.hasArg(offMillisKey)) {
    const auto value = server.arg(offMillisKey).toInt();
-    Serial.printf("[HTTP] %s = %ld\n", offMillisKey.c_str(), value);
    relay.setOffMillis(value);
  }
 }
--- a/src/io.cpp
+++ b/src/io.cpp
@ -8,13 +8,13 @@
 #define STATUS_INVERT true
 #endif

-Relay relay0(1, "RELAY #0", 12, false, true);
+Relay relay0(0, "RELAY #0", 12, false, true);

-Relay relay1(2, "RELAY #1", 5, false, true);
+Relay relay1(1, "RELAY #1", 5, false, true);

-Relay relay2(3, "RELAY #2", 4, false, true);
+Relay relay2(2, "RELAY #2", 4, false, true);

-Relay relay3(4, "RELAY #3", 15, false, true);
+Relay relay3(3, "RELAY #3", 15, false, true);

 Output status("Status", STATUS_PIN, STATUS_INVERT, false);

--- a/src/wifi.cpp
+++ b/src/wifi.cpp
@ -3,9 +3,9 @@
 #include "http.h"
 #include "io.h"

-#define CONFIG_HOSTNAME         "hostname"
-#define CONFIG_WIFI_SSID        "wifiSSID"
-#define CONFIG_WIFI_PASSWORD    "wifiPassword"
+#define CONFIG_HOSTNAME         "/wifi/hostname"
+#define CONFIG_WIFI_SSID        "/wifi/ssid"
+#define CONFIG_WIFI_PASSWORD    "/wifi/password"

 #define DEFAULT_HOSTNAME        "PatrixSonoff4ChPro"
 #define DEFAULT_WIFI_SSID       "HappyNet"
@ -28,7 +28,7 @@ void wifiConnect() {

  const auto hostname = configRead(CONFIG_HOSTNAME, DEFAULT_HOSTNAME);
  const auto wifiSSID = configRead(CONFIG_WIFI_SSID, DEFAULT_WIFI_SSID);
-  const auto wifiPass = configRead(CONFIG_WIFI_PASSWORD, DEFAULT_WIFI_PASSWORD);
+  const auto wifiPass = configRead(CONFIG_WIFI_PASSWORD, DEFAULT_WIFI_PASSWORD, true, true);

  WiFi.hostname(hostname);
  WiFi.begin(wifiSSID.c_str(), wifiPass.c_str());
@ -66,22 +66,21 @@ void wifiLoop() {
 void wifiChangeHostname(const char *hostname) {
  if (configWrite(CONFIG_HOSTNAME, DEFAULT_HOSTNAME, hostname)) {
    WiFi.setHostname(hostname);
-    Serial.printf("[WiFi] hostname: %s\n", hostname);
  }
 }

 void wifiChangeSSID(const char *ssid) {
-  if (configWrite(CONFIG_WIFI_SSID, DEFAULT_WIFI_SSID, ssid)) {
-    Serial.printf("[WiFi] SSID: %s\n", ssid);
-  }
+  configWrite(CONFIG_WIFI_SSID, DEFAULT_WIFI_SSID, ssid);
 }

 void wifiChangePassword(const char *password) {
-  configWrite(CONFIG_WIFI_PASSWORD, DEFAULT_WIFI_PASSWORD, password);
-  Serial.printf("[WiFi] password: ***");
+  configWrite(CONFIG_WIFI_PASSWORD, DEFAULT_WIFI_PASSWORD, password, true);
 }

 void wifiSetup() {
+#ifdef ESP32
+  esp_log_level_set("wifi", ESP_LOG_NONE);
+#endif
  ArduinoOTA.onStart([] {
    Serial.println("[OTA] Begin!");
    status.set(true);
Author	SHA1	Message	Date
Patrick Haßel	518473b5a4	ui countdown	2025-08-29 11:39:16 +02:00
Patrick Haßel	5529d26b55	ui look	2025-08-29 10:10:56 +02:00
Patrick Haßel	3470681342	logging cleanup	2025-08-29 10:10:46 +02:00
Patrick Haßel	7345b125ee	config persistence FIX + FS REFACTOR	2025-08-29 09:56:41 +02:00
Patrick Haßel	70bcffe505	ui update FIX on focused fields	2025-08-29 09:56:23 +02:00
Patrick Haßel	d6643a446e	removed SDK logs	2025-08-29 09:56:15 +02:00
Patrick Haßel	9b7765c768	relay index FIX	2025-08-29 09:55:09 +02:00