From d9b2ca0f5a77e4f5a331809ce8fe2c82413d013d Mon Sep 17 00:00:00 2001
From: M-Factory <mario.felipe.tf@gmail.com>
Date: Fri, 1 Aug 2025 10:47:51 +0900
Subject: [PATCH] Blinking Colon Toggle

Added toggle for the blinking colon under advanced settings
---
 ESPTimeCast_ESP32/ESPTimeCast_ESP32.ino     | 29 +++++++++++++++++----
 ESPTimeCast_ESP32/data/config.json          |  1 +
 ESPTimeCast_ESP32/data/index.html           | 18 +++++++++++++
 ESPTimeCast_ESP8266/ESPTimeCast_ESP8266.ino | 29 +++++++++++++++++----
 ESPTimeCast_ESP8266/data/config.json        |  1 +
 ESPTimeCast_ESP8266/data/index.html         | 18 +++++++++++++
 6 files changed, 86 insertions(+), 10 deletions(-)

diff --git a/ESPTimeCast_ESP32/ESPTimeCast_ESP32.ino b/ESPTimeCast_ESP32/ESPTimeCast_ESP32.ino
index c145b1d..f9c3ac0 100644
--- 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();
diff --git a/ESPTimeCast_ESP32/data/config.json b/ESPTimeCast_ESP32/data/config.json
index 2535637..325e605 100644
--- 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,
diff --git a/ESPTimeCast_ESP32/data/index.html b/ESPTimeCast_ESP32/data/index.html
index 0ce9124..4f2da1f 100644
--- 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',
diff --git a/ESPTimeCast_ESP8266/ESPTimeCast_ESP8266.ino b/ESPTimeCast_ESP8266/ESPTimeCast_ESP8266.ino
index 9480a5e..2552087 100644
--- 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();
diff --git a/ESPTimeCast_ESP8266/data/config.json b/ESPTimeCast_ESP8266/data/config.json
index 2535637..325e605 100644
--- 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,
diff --git a/ESPTimeCast_ESP8266/data/index.html b/ESPTimeCast_ESP8266/data/index.html
index 0ce9124..4f2da1f 100644
--- 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',