implemented fluid transition

README.md

@@ -35,6 +35,8 @@ To have the clock light up in a rainbow color on the hour just check the box.
 
 If you want the colors of two elements to blend when they overlap enable "Blend colors when lights overlap". This way for example a red hour hand and a blue second hand overlapping will create a purple light.
 
+To enable a fluid progression of brightness between seconds set the fluid motion option. It is still experimental and might be buggy.
+
 To select your current timezome just click on the dropdown field and look for your contintent and city.
 
 ### LED settings

src/color.h

@@ -96,4 +96,14 @@ void updateColors()
     segment = htmlToColor(hourSegmentString);
 }
 
+RgbColor DimColor(float percent, RgbColor sourceColor)
+{
+    RgbColor targetColor(0, 0, 0);
+    percent = 100 - percent;
+    targetColor.R = (sourceColor.R * percent) / 100;
+    targetColor.G = (sourceColor.G * percent) / 100;
+    targetColor.B = (sourceColor.B * percent) / 100;
+    return targetColor;
+}
+
 #endif //color_h

src/config.cpp

@@ -34,6 +34,7 @@ StaticJsonDocument<1024> Config::configToJSON()
 
         doc["hourLight"] = config.hourLight;
         doc["blendColors"] = config.blendColors;
+        doc["fluidMotion"] = config.fluidMotion;
 
         doc["alarmTime"] = config.alarmTime;
         doc["alarmActive"] = config.alarmActive;
@@ -118,6 +119,7 @@ bool Config::JSONToConfig(StaticJsonDocument<1024> doc)
 
         config.hourLight = doc["hourLight"] | false;
         config.blendColors = doc["blendColors"] | true;
+        config.fluidMotion = doc["fluidMotion"] | true;
 
         config.alarmActive = doc["alarmActive"] | false;
         strlcpy(config.alarmTime,

src/config.h

@@ -37,6 +37,7 @@ struct ConfigData
 
     bool hourLight;
     bool blendColors;
+    bool fluidMotion;
 
     bool alarmActive;
     char alarmTime[6];

src/main.cpp

@@ -16,11 +16,24 @@
 #include "color.h"
 #include "led.h"
 
-uint8_t calculateSecondHand()
+void renderSecondHand()
 {
   uint8_t secondHand = floor((float)(config.config.ledCount / 60) * localTime.second());
   secondHand = (secondHand + config.config.ledRoot) % config.config.ledCount;
-  return secondHand;
+  if (config.config.fluidMotion)
+  {
+    RgbColor currentPixelColor, upcomingPixelColor;
+    float percent = (ms() % 1000) / 10;
+    currentPixelColor = DimColor(percent, secondColor);
+    upcomingPixelColor = DimColor(100 - percent, secondColor);
+
+    setPixel(secondHand, currentPixelColor, false);
+    setPixel(secondHand + 1, upcomingPixelColor, false);
+  }
+  else
+  {
+    setPixel(secondHand, secondColor, config.config.blendColors);
+  }
 }
 
 uint8_t calculateMinuteHand()
@@ -39,7 +52,7 @@ uint8_t calculateHourHand()
   return hourHand;
 }
 
-void showClockHandles()
+void showClockElements()
 {
 
   webserver.currentTime = localTime.dateTime();
@@ -72,7 +85,7 @@ void showClockHandles()
 
   setPixel(calculateHourHand(), hourColor, config.config.blendColors);
   setPixel(calculateMinuteHand(), minuteColor, config.config.blendColors);
-  setPixel(calculateSecondHand(), secondColor, config.config.blendColors);
+  renderSecondHand();
 
   strip->Show();
 }
@@ -119,6 +132,7 @@ void loop()
   MDNS.update();
 #endif
   webserver.handleRequest();
+  events();
 
   uint8_t sec = second();
   uint8_t min = minute();
@@ -137,10 +151,10 @@ void loop()
   {
     hourRainbow();
   }
-  else if (currentSecond != sec && !isAlarm() && currentMinute != 0)
+  else if (!isAlarm() && currentMinute != 0)
   {
     currentSecond = second();
-    showClockHandles();
+    showClockElements();
     animationPos = 0;
   }
 }

src/time.h

@@ -4,16 +4,16 @@
 uint64_t lasttime = 0;
 bool tick()
 {
-    uint64_t diff = micros() - lasttime;
+    uint64_t diff = ms() - lasttime;
 
-    if (diff >= 16000)
+    if (diff >= 16)
     {
-        lasttime = micros();
+        lasttime = ms();
         return true;
     }
     else if (diff < 0)
     {
-        lasttime = micros();
+        lasttime = ms();
         return true;
     }
     return false;

web/index.html

@@ -149,6 +149,10 @@ <h3>Color configuration</h3>
                 <label for="blendcolors">Blend colors when elements overlap?</label>
                 <input type="checkbox" id="blendcolors" name="blendcolors" />
             </p>
+            <p>
+                <label for="blendcolors">Enable fluid fading between the pixels for the second hand?</label>
+                <input type="checkbox" id="fluidmotion" name="fluidmotion" />
+            </p>
             <label for="timezone">Local timezone <span class="aside">(Change requires restart)</span></label>
             <select id="timezone" name="timezone"></select>
             <h3>LED settings</h3>

web/main.js

@@ -28,6 +28,7 @@ function onChangedInput(saveData = false) {
 
         configData.hourLight = document.getElementById("hourlight").checked;
         configData.blendColors = document.getElementById("blendcolors").checked;
+        configData.fluidMotion = document.getElementById("fluidmotion").checked;
 
         configData.ledPin = parseInt(document.getElementById("ledpin").value);
         configData.ledCount = parseInt(document.getElementById("ledcount").value);
@@ -100,6 +101,7 @@ document.addEventListener('DOMContentLoaded', function (event) {
 
             document.getElementById("hourlight").checked = configData.hourLight;
             document.getElementById("blendcolors").checked = configData.blendColors;
+            document.getElementById("fluidmotion").checked = configData.fluidMotion;
 
             document.getElementById("ledpin").value = configData.ledPin;
             document.getElementById("ledcount").value = configData.ledCount;