Blinking Colon Toggle

Added toggle for the blinking colon under advanced settings
2026-02-19 11:54:56 -05:00 · 2025-08-01 10:47:51 +09:00
parent deb8f8cbd7
commit d9b2ca0f5a
6 changed files with 86 additions and 10 deletions
--- a/ESPTimeCast_ESP32/ESPTimeCast_ESP32.ino
+++ b/ESPTimeCast_ESP32/ESPTimeCast_ESP32.ino
@@ -49,6 +49,7 @@ bool flipDisplay = false;
 bool twelveHourToggle = false;
 bool showDayOfWeek = true;
 bool showHumidity = false;
+bool colonBlinkEnabled = true;
 char ntpServer1[64] = "pool.ntp.org";
 char ntpServer2[64] = "time.nist.gov";

@@ -167,6 +168,7 @@ void loadConfig() {
    doc[F("twelveHourToggle")] = twelveHourToggle;
    doc[F("showDayOfWeek")] = showDayOfWeek;
    doc[F("showHumidity")] = showHumidity;
+    doc[F("colonBlinkEnabled")] = colonBlinkEnabled; 
    doc[F("ntpServer1")] = ntpServer1;
    doc[F("ntpServer2")] = ntpServer2;
    doc[F("dimmingEnabled")] = dimmingEnabled;
@@ -231,6 +233,7 @@ void loadConfig() {
  twelveHourToggle = doc["twelveHourToggle"] | false;
  showDayOfWeek = doc["showDayOfWeek"] | true;
  showHumidity = doc["showHumidity"] | false;
+  colonBlinkEnabled = doc.containsKey("colonBlinkEnabled") ? doc["colonBlinkEnabled"].as<bool>() : true;

  String de = doc["dimmingEnabled"].as<String>();
  dimmingEnabled = (de == "true" || de == "on" || de == "1");
@@ -452,8 +455,10 @@ void printConfigToSerial() {
  Serial.println(showDayOfWeek ? "Yes" : "No");
  Serial.print(F("Show Weather Description: "));
  Serial.println(showWeatherDescription ? "Yes" : "No");
-  Serial.print(F("Show Humidity "));
+  Serial.print(F("Show Humidity: "));
  Serial.println(showHumidity ? "Yes" : "No");
+  Serial.print(F("Blinking colon: "));
+  Serial.println(colonBlinkEnabled ? "Yes" : "No");
  Serial.print(F("NTP Server 1: "));
  Serial.println(ntpServer1);
  Serial.print(F("NTP Server 2: "));
@@ -545,6 +550,7 @@ void setupWebServer() {
      else if (n == "twelveHourToggle") doc[n] = (v == "true" || v == "on" || v == "1");
      else if (n == "showDayOfWeek") doc[n] = (v == "true" || v == "on" || v == "1");
      else if (n == "showHumidity") doc[n] = (v == "true" || v == "on" || v == "1");
+      else if (n == "colonBlinkEnabled") doc[n] = (v == "true" || v == "on" || v == "1");
      else if (n == "dimStartHour") doc[n] = v.toInt();
      else if (n == "dimStartMinute") doc[n] = v.toInt();
      else if (n == "dimEndHour") doc[n] = v.toInt();
@@ -783,6 +789,17 @@ void setupWebServer() {
    request->send(200, "application/json", "{\"ok\":true}");
  });

+  server.on("/set_colon_blink", HTTP_POST, [](AsyncWebServerRequest *request) {
+  bool enableBlink = false;
+  if (request->hasParam("value", true)) {
+    String v = request->getParam("value", true)->value();
+    enableBlink = (v == "1" || v == "true" || v == "on");
+  }
+  colonBlinkEnabled = enableBlink;
+  Serial.printf("[WEBSERVER] Set colonBlinkEnabled to %d\n", colonBlinkEnabled);
+  request->send(200, "application/json", "{\"ok\":true}");
+});
+
  server.on("/set_language", HTTP_POST, [](AsyncWebServerRequest *request) {
    if (!request->hasParam("value", true)) {
      request->send(400, "application/json", "{\"error\":\"Missing value\"}");
@@ -1557,10 +1574,12 @@ void loop() {
      }

    } else {
-      // NTP and weather are OK — show time
-      String timeString = formattedTime;
-      if (!colonVisible) timeString.replace(":", " ");
-      P.print(timeString);
+  // NTP and weather are OK — show time
+  String timeString = formattedTime;
+  if (colonBlinkEnabled && !colonVisible) {
+    timeString.replace(":", " ");
+  }
+  P.print(timeString);
    }

    yield();
--- a/ESPTimeCast_ESP32/data/config.json
+++ b/ESPTimeCast_ESP32/data/config.json
@@ -15,6 +15,7 @@
  "twelveHourToggle": false,
  "showDayOfWeek": true,
  "showHumidity": false,
+  "colonBlinkEnabled": true,
  "language": "en",
  "dimmingEnabled": false,
  "dimStartHour": 18,
--- a/ESPTimeCast_ESP32/data/index.html
+++ b/ESPTimeCast_ESP32/data/index.html
@@ -486,6 +486,14 @@ textarea::placeholder {
          </span>
        </label>

+        <label style="display: flex; align-items: center; margin-top: 1.75rem; justify-content: space-between;">
+          <span style="margin-right: 0.5em;">Blinking Colon:</span>
+          <span class="toggle-switch">
+            <input type="checkbox" id="colonBlinkEnabled" name="colonBlinkEnabled" onchange="setColonBlink(this.checked)">
+            <span class="toggle-slider"></span>
+          </span>
+        </label>
+
        <label style="display: flex; align-items: center; margin-top: 1.75rem; justify-content: space-between;">
          <span style="margin-right: 0.5em;">Display 12-hour Clock:</span>
          <span class="toggle-switch">
@@ -647,6 +655,7 @@ window.onload = function () {
      document.getElementById('twelveHourToggle').checked = !!data.twelveHourToggle;
      document.getElementById('showDayOfWeek').checked = !!data.showDayOfWeek;
      document.getElementById('showHumidity').checked = !!data.showHumidity;
+      document.getElementById('colonBlinkEnabled').checked = !!data.colonBlinkEnabled;
      document.getElementById('showWeatherDescription').checked = !!data.showWeatherDescription;
      // Dimming controls
 const dimmingEnabledEl = document.getElementById('dimmingEnabled');
@@ -787,6 +796,7 @@ async function submitConfig(event) {
  formData.set('twelveHourToggle', document.getElementById('twelveHourToggle').checked ? 'on' : '');
  formData.set('showDayOfWeek', document.getElementById('showDayOfWeek').checked ? 'on' : '');
  formData.set('showHumidity', document.getElementById('showHumidity').checked ? 'on' : '');
+  formData.set('colonBlinkEnabled', document.getElementById('colonBlinkEnabled').checked ? 'on' : '');

  //dimming
  formData.set('dimmingEnabled', document.getElementById('dimmingEnabled').checked ? 'true' : 'false');
@@ -1087,6 +1097,14 @@ function setShowDayOfWeek(val) {
  });
 }

+function setColonBlink(val) {
+  fetch('/set_colon_blink', {
+    method: 'POST',
+    headers: { "Content-Type": "application/x-www-form-urlencoded" },
+    body: "value=" + (val ? 1 : 0)
+  });
+}
+
 function setShowHumidity(val) {
  fetch('/set_humidity', {
    method: 'POST',
--- a/ESPTimeCast_ESP8266/ESPTimeCast_ESP8266.ino
+++ b/ESPTimeCast_ESP8266/ESPTimeCast_ESP8266.ino
@@ -49,6 +49,7 @@ bool flipDisplay = false;
 bool twelveHourToggle = false;
 bool showDayOfWeek = true;
 bool showHumidity = false;
+bool colonBlinkEnabled = true;
 char ntpServer1[64] = "pool.ntp.org";
 char ntpServer2[64] = "time.nist.gov";

@@ -167,6 +168,7 @@ void loadConfig() {
    doc[F("twelveHourToggle")] = twelveHourToggle;
    doc[F("showDayOfWeek")] = showDayOfWeek;
    doc[F("showHumidity")] = showHumidity;
+    doc[F("colonBlinkEnabled")] = colonBlinkEnabled; 
    doc[F("ntpServer1")] = ntpServer1;
    doc[F("ntpServer2")] = ntpServer2;
    doc[F("dimmingEnabled")] = dimmingEnabled;
@@ -231,6 +233,7 @@ void loadConfig() {
  twelveHourToggle = doc["twelveHourToggle"] | false;
  showDayOfWeek = doc["showDayOfWeek"] | true;
  showHumidity = doc["showHumidity"] | false;
+  colonBlinkEnabled = doc.containsKey("colonBlinkEnabled") ? doc["colonBlinkEnabled"].as<bool>() : true;

  String de = doc["dimmingEnabled"].as<String>();
  dimmingEnabled = (de == "true" || de == "on" || de == "1");
@@ -452,8 +455,10 @@ void printConfigToSerial() {
  Serial.println(showDayOfWeek ? "Yes" : "No");
  Serial.print(F("Show Weather Description: "));
  Serial.println(showWeatherDescription ? "Yes" : "No");
-  Serial.print(F("Show Humidity "));
+  Serial.print(F("Show Humidity: "));
  Serial.println(showHumidity ? "Yes" : "No");
+  Serial.print(F("Blinking colon: "));
+  Serial.println(colonBlinkEnabled ? "Yes" : "No");
  Serial.print(F("NTP Server 1: "));
  Serial.println(ntpServer1);
  Serial.print(F("NTP Server 2: "));
@@ -545,6 +550,7 @@ void setupWebServer() {
      else if (n == "twelveHourToggle") doc[n] = (v == "true" || v == "on" || v == "1");
      else if (n == "showDayOfWeek") doc[n] = (v == "true" || v == "on" || v == "1");
      else if (n == "showHumidity") doc[n] = (v == "true" || v == "on" || v == "1");
+      else if (n == "colonBlinkEnabled") doc[n] = (v == "true" || v == "on" || v == "1");
      else if (n == "dimStartHour") doc[n] = v.toInt();
      else if (n == "dimStartMinute") doc[n] = v.toInt();
      else if (n == "dimEndHour") doc[n] = v.toInt();
@@ -783,6 +789,17 @@ void setupWebServer() {
    request->send(200, "application/json", "{\"ok\":true}");
  });

+  server.on("/set_colon_blink", HTTP_POST, [](AsyncWebServerRequest *request) {
+  bool enableBlink = false;
+  if (request->hasParam("value", true)) {
+    String v = request->getParam("value", true)->value();
+    enableBlink = (v == "1" || v == "true" || v == "on");
+  }
+  colonBlinkEnabled = enableBlink;
+  Serial.printf("[WEBSERVER] Set colonBlinkEnabled to %d\n", colonBlinkEnabled);
+  request->send(200, "application/json", "{\"ok\":true}");
+});
+
  server.on("/set_language", HTTP_POST, [](AsyncWebServerRequest *request) {
    if (!request->hasParam("value", true)) {
      request->send(400, "application/json", "{\"error\":\"Missing value\"}");
@@ -1555,10 +1572,12 @@ void loop() {
      }

    } else {
-      // NTP and weather are OK — show time
-      String timeString = formattedTime;
-      if (!colonVisible) timeString.replace(":", " ");
-      P.print(timeString);
+  // NTP and weather are OK — show time
+  String timeString = formattedTime;
+  if (colonBlinkEnabled && !colonVisible) {
+    timeString.replace(":", " ");
+  }
+  P.print(timeString);
    }

    yield();
--- a/ESPTimeCast_ESP8266/data/config.json
+++ b/ESPTimeCast_ESP8266/data/config.json
@@ -15,6 +15,7 @@
  "twelveHourToggle": false,
  "showDayOfWeek": true,
  "showHumidity": false,
+  "colonBlinkEnabled": true,
  "language": "en",
  "dimmingEnabled": false,
  "dimStartHour": 18,
--- a/ESPTimeCast_ESP8266/data/index.html
+++ b/ESPTimeCast_ESP8266/data/index.html
@@ -486,6 +486,14 @@ textarea::placeholder {
          </span>
        </label>

+        <label style="display: flex; align-items: center; margin-top: 1.75rem; justify-content: space-between;">
+          <span style="margin-right: 0.5em;">Blinking Colon:</span>
+          <span class="toggle-switch">
+            <input type="checkbox" id="colonBlinkEnabled" name="colonBlinkEnabled" onchange="setColonBlink(this.checked)">
+            <span class="toggle-slider"></span>
+          </span>
+        </label>
+
        <label style="display: flex; align-items: center; margin-top: 1.75rem; justify-content: space-between;">
          <span style="margin-right: 0.5em;">Display 12-hour Clock:</span>
          <span class="toggle-switch">
@@ -647,6 +655,7 @@ window.onload = function () {
      document.getElementById('twelveHourToggle').checked = !!data.twelveHourToggle;
      document.getElementById('showDayOfWeek').checked = !!data.showDayOfWeek;
      document.getElementById('showHumidity').checked = !!data.showHumidity;
+      document.getElementById('colonBlinkEnabled').checked = !!data.colonBlinkEnabled;
      document.getElementById('showWeatherDescription').checked = !!data.showWeatherDescription;
      // Dimming controls
 const dimmingEnabledEl = document.getElementById('dimmingEnabled');
@@ -787,6 +796,7 @@ async function submitConfig(event) {
  formData.set('twelveHourToggle', document.getElementById('twelveHourToggle').checked ? 'on' : '');
  formData.set('showDayOfWeek', document.getElementById('showDayOfWeek').checked ? 'on' : '');
  formData.set('showHumidity', document.getElementById('showHumidity').checked ? 'on' : '');
+  formData.set('colonBlinkEnabled', document.getElementById('colonBlinkEnabled').checked ? 'on' : '');

  //dimming
  formData.set('dimmingEnabled', document.getElementById('dimmingEnabled').checked ? 'true' : 'false');
@@ -1087,6 +1097,14 @@ function setShowDayOfWeek(val) {
  });
 }

+function setColonBlink(val) {
+  fetch('/set_colon_blink', {
+    method: 'POST',
+    headers: { "Content-Type": "application/x-www-form-urlencoded" },
+    body: "value=" + (val ? 1 : 0)
+  });
+}
+
 function setShowHumidity(val) {
  fetch('/set_humidity', {
    method: 'POST',