Merge pull request #41 from techniccontroller/dev_nightmodeswitch

Implement night mode activation switch

Author: techniccontroller

data/index.html

@@ -243,7 +243,7 @@
 	}
 
 	.show{
-		height: 230px;
+		height: 280px;
 		transition: height 1s;
 	}
 
@@ -288,6 +288,12 @@ <h1 id="headline">WORDCLOCK 2.0</h1>
 				<label for="nm_end" style="align-self: flex-start">Nightmode end time: </label>
 				<input type="time" id="nm_end" name="nm_end" min="00:00" max="23:59">
 			</div>
+			<div class="checkbox-container">
+				<label for="NightMode" style="align-self: flex-start">Nightmode</label> 
+				<div>
+					<input name= "NightMode" id="NightMode" type="checkbox" class="toggle">
+				</div>
+			</div>
 			<div class="checkbox-container">
 				<label for="ResetWifi" style="align-self: flex-start">Reset Wifi</label> 
 				<div>
@@ -310,12 +316,6 @@ <h1 id="headline">WORDCLOCK 2.0</h1>
 			<div class="grid-item mode-item"><span class="dot-mode" onclick="modechange(this, 4)"><a onclick="sendCommand('./cmd?mode=snake')" class="buttonClass" style="width: 100%;"><img src = "./icons/snake.svg" style="height:50px"/></a></span></div>
 			<div class="grid-item mode-item"><span class="dot-mode" onclick="modechange(this, 5)"><a onclick="sendCommand('./cmd?mode=pingpong')" class="buttonClass" style="width: 100%;"><img src = "./icons/pingpong.svg" style="height:50px"/></a></span></div>
 		</div>
-		<div class="checkbox-container">
-			<label for="NightMode" style="align-self: flex-start">Nightmode</label> 
-			<div>
-				<span style="font-weight: 800; color: green;" id="NightMode">active</span>
-			</div>
-		</div>
 		<div class="checkbox-container">
 			<label for="LED_Off" style="align-self: flex-start">LEDs OFF</label> 
 			<div>
@@ -462,17 +462,22 @@ <h1 id="headline">WORDCLOCK 2.0</h1>
 					modebuttons[state].classList.add("active");
 
 					// set checkbox states
-					var span_nightMode = document.querySelector('span[id="NightMode"]');
-					if(myVar.nightMode == "1") {
-						console.log("nightMode == 1");
-						span_nightMode.textContent = "active";
-						span_nightMode.style.color = "green";
+					var ckb_nightmodeactivated = document.querySelector('input[id="NightMode"]');
+					if(myVar.nightModeActivated == "1") {
+						console.log("nightmodeactivated == 1");
+						ckb_nightmodeactivated.checked = true;
 					}
 					else {
-						console.log("nightMode == 0");
-						span_nightMode.textContent = "inactive";
-						span_nightMode.style.color = "red";
+						console.log("nightmodeactivated == 0");
+						ckb_nightmodeactivated.checked = false;
 					}
+					ckb_nightmodeactivated.addEventListener('change', () => {
+						if(ckb_nightmodeactivated.checked) {
+							sendCommand("./cmd?nightmodeactivated=1");
+						} else {
+							sendCommand("./cmd?nightmodeactivated=0");
+						}
+					});
 
 					// set checkbox states
 					var ckb_ledoff = document.querySelector('input[id="LED_Off"]');

wordclock_esp8266.ino

@@ -58,6 +58,7 @@
 #define ADR_MC_GREEN 22
 #define ADR_MC_BLUE 24
 #define ADR_STATE 26
+#define ADR_NM_ACTIVATED 27
 #define ADR_COLSHIFTSPEED 28
 #define ADR_COLSHIFTACTIVE 29
 
@@ -184,6 +185,7 @@ float filterFactor = DEFAULT_SMOOTHING_FACTOR;// stores smoothing factor for led
 uint8_t currentState = st_clock;              // stores current state
 bool stateAutoChange = false;                 // stores state of automatic state change
 bool nightMode = false;                       // stores state of nightmode
+bool nightModeActivated = true;               // stores if the function nightmode is activated (its not the state of nightmode)
 bool ledOff = false;                          // stores state of led off
 uint32_t maincolor_clock = colors24bit[2];    // color of the clock and digital clock
 uint32_t maincolor_snake = colors24bit[1];    // color of the random snake animation
@@ -617,15 +619,15 @@ void checkNightmode(){
   int startInMinutes = nightModeStartHour * 60 + nightModeStartMin;
   int endInMinutes = nightModeEndHour * 60 + nightModeEndMin;
 
-  if (startInMinutes < endInMinutes) { // Same day scenario
+  if (startInMinutes < endInMinutes && nightModeActivated) { // Same day scenario
       if (startInMinutes < currentTimeInMinutes && currentTimeInMinutes < endInMinutes) {
           nightMode = true;
-          logger.logString("Nightmode activated");
+          logger.logString("Nightmode active");
       }
-  } else if (startInMinutes > endInMinutes) { // Overnight scenario
+  } else if (startInMinutes > endInMinutes && nightModeActivated) { // Overnight scenario
       if (currentTimeInMinutes >= startInMinutes || currentTimeInMinutes < endInMinutes) {
           nightMode = true;
-          logger.logString("Nightmode activated");
+          logger.logString("Nightmode active");
       }
   }
 }
@@ -853,10 +855,12 @@ void loadNightmodeSettingsFromEEPROM()
   nightModeStartMin = EEPROM.read(ADR_NM_START_M);
   nightModeEndHour = EEPROM.read(ADR_NM_END_H);
   nightModeEndMin = EEPROM.read(ADR_NM_END_M);
+  nightModeActivated = EEPROM.read(ADR_NM_ACTIVATED);
   if(nightModeStartHour < 0 || nightModeStartHour > 23) nightModeStartHour = 22;
   if(nightModeStartMin < 0 || nightModeStartMin > 59) nightModeStartMin = 0;
   if(nightModeEndHour < 0 || nightModeEndHour > 23) nightModeEndHour = 7;
   if(nightModeEndMin < 0 || nightModeEndMin > 59) nightModeEndMin = 0;
+  logger.logString("Nightmode activated: " + String(nightModeActivated));
   logger.logString("Nightmode starts at: " + String(nightModeStartHour) + ":" + String(nightModeStartMin));
   logger.logString("Nightmode ends at: " + String(nightModeEndHour) + ":" + String(nightModeEndMin));
 }
@@ -941,6 +945,15 @@ void handleCommand() {
     if(modestr == "1") ledOff = true;
     else ledOff = false;
   }
+  else if(server.argName(0) == "nightmodeactivated"){
+    String modestr = server.arg(0);
+    logger.logString("nightModeActivated change via Webserver to: " + modestr);
+    if(modestr == "1") nightModeActivated = true;
+    else nightModeActivated = false;
+    EEPROM.write(ADR_NM_ACTIVATED, nightModeActivated);
+    EEPROM.commit();
+    checkNightmode();
+  }
   else if(server.argName(0) == "setting"){
     String timestr = server.arg(0) + "-";
     logger.logString("Nightmode setting change via Webserver to: " + timestr);
@@ -1112,7 +1125,7 @@ void handleDataRequest() {
       message += ",";
       message += "\"ledoff\":\"" + String(ledOff) + "\"";
       message += ",";
-      message += "\"nightMode\":\"" + String(nightMode) + "\"";
+      message += "\"nightModeActivated\":\"" + String(nightModeActivated) + "\"";
       message += ",";
       message += "\"nightModeStart\":\"" + leadingZero2Digit(nightModeStartHour) + "-" + leadingZero2Digit(nightModeStartMin) + "\"";
       message += ",";