Merge pull request #34 from techniccontroller/dev_dyncolorshift

Add dynamic color shift feature

Author: techniccontroller

README.md

@@ -26,6 +26,7 @@ Thank you to everyone who provided feedback on adding new languages and testing
 - webserver interface for configuration and control
 - physical button to change mode or enable night mode without webserver
 - automatic current limiting of LEDs
+- dynamic color shift mode 
 
 ## Pictures of clock
 ![modes_images2](https://user-images.githubusercontent.com/36072504/156947689-dd90874d-a887-4254-bede-4947152d85c1.png)
@@ -152,7 +153,7 @@ MCAST_IF_IP = '192.168.0.7'
 4. Execute the script with following command: 
 
 ```bash
-python multicastUDP_receiver_analyzer.py
+python multicastUDP_receiver.py
 ```
 
 5. Now you should see the log messages of the word clock (every 5 seconds a heartbeat message and the currently displayed time). 

data/index.html

@@ -243,7 +243,7 @@
 	}
 
 	.show{
-		height: 200px;
+		height: 230px;
 		transition: height 1s;
 	}
 
@@ -276,6 +276,10 @@ <h1 id="headline">WORDCLOCK 2.0</h1>
 				<label for="brightness">Brightness:</label>
 				<input type="range" id="brightness" name="volume" min="10" max="255">
 			</div>
+			<div class="number-container">
+				<label for="colorshiftspeed">Color shift speed:</label>
+				<input type="range" id="colorshiftspeed" name="volume" min="0" max="50">
+			</div>
 			<div class="number-container">
 				<label for="nm_start" style="align-self: flex-start">Nightmode start time: </label> 
 				<input type="time" id="nm_start" name="nm_start" min="00:00" max="23:59">
@@ -317,7 +321,12 @@ <h1 id="headline">WORDCLOCK 2.0</h1>
 			<div>
 				<input name= "AutoChange" id="AutoChange" type="checkbox" class="toggle">
 			</div>
-			
+		</div>
+		<div class="checkbox-container" id = "colorshiftcontainer">
+			<label for="ColorShift" style="align-self: flex-start">DynamicColorShift</label>
+			<div>
+				<input name= "ColorShift" id="ColorShift" type="checkbox" class="toggle">
+			</div>
 		</div>
 
 		<div class="main-container hidden" id="colorcontainer">
@@ -480,10 +489,28 @@ <h1 id="headline">WORDCLOCK 2.0</h1>
 							sendCommand("./cmd?stateautochange=0");
 						}
 					});
+
+					var ckb_colorshift = document.querySelector('input[id="ColorShift"]');
+					if(myVar.colorshift == "1") {
+						console.log("colorshift == 1");
+						ckb_colorshift.checked = true;
+					}
+					else {
+						console.log("colorshift == 0");
+						ckb_colorshift.checked = false;
+					}
+					ckb_colorshift.addEventListener('change', () => {
+						if(ckb_colorshift.checked) {
+							sendCommand("./cmd?colorshift=1");
+						} else {
+							sendCommand("./cmd?colorshift=0");
+						}
+					});
 
 					document.getElementById("nm_start").value = myVar.nightModeStart.replace("-", ":");
 					document.getElementById("nm_end").value = myVar.nightModeEnd.replace("-", ":");
 					document.getElementById("brightness").value = parseInt(myVar.brightness);
+					document.getElementById("colorshiftspeed").value = parseInt(myVar.colorshiftspeed);
 
 					updateDisplay(parseInt(myVar.modeid));
 					console.log(myVar);
@@ -513,20 +540,26 @@ <h1 id="headline">WORDCLOCK 2.0</h1>
 					switch(modeid){
 						case 0: // clock
 							document.getElementById("colorcontainer").classList.remove("hidden");
+							document.getElementById("colorshiftcontainer").classList.remove("hidden");
 							break;
 						case 1: // diclock
 							document.getElementById("colorcontainer").classList.remove("hidden");
+							document.getElementById("colorshiftcontainer").classList.add("hidden");
 							break;
 						case 2: // spiral
+							document.getElementById("colorshiftcontainer").classList.add("hidden");
 							break;
 						case 3: // tetris
 							document.getElementById("tetriscontainer").classList.remove("hidden");
+							document.getElementById("colorshiftcontainer").classList.add("hidden");
 							break;
 						case 4: // snake
 							document.getElementById("snakecontainer").classList.remove("hidden");
+							document.getElementById("colorshiftcontainer").classList.add("hidden");
 							break;
 						case 5: // pingping
 							document.getElementById("pongcontainer").classList.remove("hidden");
+							document.getElementById("colorshiftcontainer").classList.add("hidden");
 							break;
 
 					}
@@ -543,14 +576,17 @@ <h1 id="headline">WORDCLOCK 2.0</h1>
 			function saveSettings(){
 				var nmStart = document.getElementById("nm_start");
 				var nmEnd = document.getElementById("nm_end");
-				var brightnessElmt = document.getElementById("brightness");
+				var sld_brightness = document.getElementById("brightness");
+				var sld_colorshiftspeed = document.getElementById("colorshiftspeed");
 				var ckb_resetWifi = document.querySelector('input[id="ResetWifi"]');
 				var cmdstr = "./cmd?setting=";
 				cmdstr += nmStart.value.replace(":", "-");
 				cmdstr += "-";
 				cmdstr += nmEnd.value.replace(":", "-");
 				cmdstr += "-";
-				cmdstr += brightnessElmt.value;
+				cmdstr += sld_brightness.value;
+				cmdstr += "-";
+				cmdstr += sld_colorshiftspeed.value;
 				console.log(cmdstr);
 				sendCommand(cmdstr);
 				if(ckb_resetWifi.checked) {

ledmatrix.cpp

@@ -104,6 +104,9 @@ void LEDMatrix::setupMatrix()
  */
 void LEDMatrix::setMinIndicator(uint8_t pattern, uint32_t color)
 {
+  if(dynamicColorShiftActivePhase >= 0){
+    color = Wheel(dynamicColorShiftActivePhase);
+  }
   // pattern:
   // 15 -> 1111
   // 14 -> 1110
@@ -134,6 +137,9 @@ void LEDMatrix::setMinIndicator(uint8_t pattern, uint32_t color)
  */
 void LEDMatrix::gridAddPixel(uint8_t x, uint8_t y, uint32_t color)
 {
+  if(dynamicColorShiftActivePhase >= 0){
+    color = Wheel((uint16_t(x + y*WIDTH) * 256 * 2 / (WIDTH*HEIGHT) + dynamicColorShiftActivePhase) % 256);
+  }
   // limit ranges of x and y
   if(x < WIDTH && y < HEIGHT){
     targetgrid[y][x] = color;
@@ -298,4 +304,14 @@ uint16_t LEDMatrix::calcEstimatedLEDCurrent(uint32_t color){
  */
 void LEDMatrix::setCurrentLimit(uint16_t mycurrentLimit){
   currentLimit = mycurrentLimit;
+}
+
+/**
+ * @brief Set dynamic color shift phase (0-255)
+ * 
+ * @param phase phase of the color shift
+ */
+void LEDMatrix::setDynamicColorShiftPhase(int16_t phase)
+{
+  dynamicColorShiftActivePhase = phase;
 }

ledmatrix.h

@@ -30,6 +30,7 @@ class LEDMatrix{
         void printChar(uint8_t xpos, uint8_t ypos, char character, uint32_t color);
         void setBrightness(uint8_t mybrightness);
         void setCurrentLimit(uint16_t mycurrentLimit);
+        void setDynamicColorShiftPhase(int16_t phase);
 
     private:
 
@@ -38,6 +39,7 @@ class LEDMatrix{
 
         uint8_t brightness;
         uint16_t currentLimit;
+        int16_t dynamicColorShiftActivePhase = -1; // -1: not active, 0-255: active phase shift
 
         // target representation of matrix as 2D array
         uint32_t targetgrid[HEIGHT][WIDTH] = {0};