Add configurable sliders

Author: stnkl

data/config.txt

@@ -0,0 +1 @@
+{}

data/index.css

@@ -15,7 +15,7 @@ p {
 	box-shadow: none !important;
 }
 
-.speedSlider, .saturationSlider {
+.slider {
 	margin: 28px 40px;
 }
 

data/index.htm

@@ -33,8 +33,7 @@ <h1 style="text-align: center">FastLED Manager</h1>
         onclick="ws_pending_msg = [2]">Stop</button>
     </div>
 
-    <div class="speedSlider" id="speed"></div>
-    <div class="saturationSlider" id="saturation"></div>
+    <div id="slidersWrapper"></div>
 
     <div id="accordion">
       <div class="card">

data/index.js

@@ -25,13 +25,9 @@ connection.onclose = function (e) {
 
 connection.onmessage = function (e) {
   console.log('Received: ', e.data);
-
-  try {
-    handleJsonData(JSON.parse(e.data));
-
-    connectingOverlayText.innerHTML = 'Success!';
-    connectingOverlay.style.display = 'none';
-  } catch (e) { }
+  handleJsonData(JSON.parse(e.data));
+  connectingOverlayText.innerHTML = 'Success!';
+  connectingOverlay.style.display = 'none';
 };
 
 function handleJsonData(data) {
@@ -51,7 +47,27 @@ function handleJsonData(data) {
         btn.onclick = () => { sendAnimationButton(idx); };
         animationButtons.insertBefore(btn, stopButton);
       }
-    })
+    });
+  }
+
+  if (data.hasOwnProperty('sliders')) {
+    data.sliders.forEach((slider, idx) => {
+      let sliderDiv = document.createElement('div')
+      sliderDiv.classList.add('slider')
+      noUiSlider.create(sliderDiv, {
+        start: slider.value,
+        step: slider.step,
+        range: {
+          'min': slider.min,
+          'max': slider.max
+        }
+      });
+      sliderDiv.querySelector(".noUi-handle").innerHTML = slider.name;
+      sliderDiv.noUiSlider.on('update', (values, handle) => {
+        ws_pending_msg = [20, idx, values[handle]];
+      });
+      document.getElementById('slidersWrapper').appendChild(sliderDiv);
+    });
   }
 
   if (data.hasOwnProperty('alarmAnimation'))
@@ -85,10 +101,6 @@ function handleJsonData(data) {
     sunsetDuration.value = data.sunsetDuration;
   if (data.hasOwnProperty('sunsetOffset'))
     sunsetOffset.value = data.sunsetOffset;
-  if (data.hasOwnProperty('speed'))
-    speed.noUiSlider.set(data.speed);
-  if (data.hasOwnProperty('saturation'))
-    saturation.noUiSlider.set(data.saturation);
   if (data.hasOwnProperty('color')) {
     colorButton.value = data.color;
     currentColor = data.color;
@@ -154,8 +166,6 @@ function sendConfig() {
     sunsetOffset: sunsetOffset.value,
     sunsetAnimation: sunsetAnimation.value,
     startupAnimation: useStartupAnimation.checked ? startupAnimation.value : '',
-    speed: speed.noUiSlider.get(),
-    saturation: saturation.noUiSlider.get(),
     color: currentColor
   }, null, 2);
   sendText(json);
@@ -221,14 +231,6 @@ let $customColorPicker = $('#colorButton').colorPicker({
   }
 });
 
-// Sliders
-noUiSlider.create(speed, { start: 128, step: 1, range: { 'min': 0, 'max': 255 } });
-noUiSlider.create(saturation, { start: 255, step: 1, range: { 'min': 110, 'max': 255 } });
-speed.noUiSlider.on('update', (values, handle) => { ws_pending_msg = [20, values[handle]]; });
-saturation.noUiSlider.on('update', (values, handle) => { ws_pending_msg = [21, values[handle]]; });
-document.querySelector('#speed .noUi-handle').innerHTML = 'Speed';
-document.querySelector('#saturation .noUi-handle').innerHTML = 'Sat.';
-
 // Close connection after being ianctive for 5 minutes
 let idleTime = 0;
 setInterval(() => {

src/FastLEDManager.cpp

@@ -139,6 +139,11 @@ void FastLEDManagerClass::delay(uint16_t ms)
   }
 }
 
+void FastLEDManagerClass::registerSlider(Slider *slider)
+{
+  sliders.add(slider);
+}
+
 void FastLEDManagerClass::registerAnimation(Animation *animation)
 {
   animations.add(animation);
@@ -161,6 +166,23 @@ Animation* FastLEDManagerClass::getAnimation(uint8_t i)
   return (i < animations.size()) ? animations.get(i) : NULL;
 }
 
+Slider* FastLEDManagerClass::getSlider(String name)
+{
+  for (uint8_t i = 0; i < sliders.size(); i++)
+  {
+    Slider *a = sliders.get(i);
+    if (a->name == name)
+      return a;
+  }
+
+  return NULL;
+}
+
+Slider* FastLEDManagerClass::getSlider(uint8_t i)
+{
+  return (i < sliders.size()) ? sliders.get(i) : NULL;
+}
+
 void FastLEDManagerClass::handleInput()
 {
   if (potentiometerPin >= 0 && Fade::currentFade == Fade::FadeMode::NONE)

src/FastLEDManager.h

@@ -3,6 +3,7 @@
 #include "Animation.h"
 #include "ColorUtils.h"
 #include "Config.h"
+#include "Slider.h"
 
 #include <Arduino.h>
 #define FASTLED_INTERNAL
@@ -48,6 +49,10 @@ class FastLEDManagerClass : public CFastLED
   /// @param pin Potentiometer pin
   void enablePotentiometer(uint8_t pin);
 
+  /// Register a slider instance which can be used as a dynamic animation parameter
+  /// @param slider Slider instance
+  void registerSlider(Slider *slider);
+
   /// Register an animation instance to be managed by FastLEDManager
   /// @param animation Pointer to animation instance
   void registerAnimation(Animation *animation);
@@ -66,6 +71,16 @@ class FastLEDManagerClass : public CFastLED
   /// @return Pointer to animation
   Animation *getAnimation(uint8_t i);
 
+  /// Return a pointer to a slider by name
+  /// @param name Slider name
+  /// @return Pointer to slider
+  Slider *getSlider(String name);
+
+  /// Return a pointer to a slider by index
+  /// @param i Slider index
+  /// @return Pointer to slider
+  Slider *getSlider(uint8_t i);
+
   /// Perform gamma correction on the brightness value and use four neighboring
   /// pixels to further increase the perceived brightness
   /// @param bright10 10 bit brightness value
@@ -118,9 +133,12 @@ class FastLEDManagerClass : public CFastLED
   /// calling this method will have no effect.
   void resume();
 
-  /// List of all registered animations
+  /// List of all registered animation pointers
   LinkedList<Animation*> animations;
 
+  /// List of all registered slider pointers
+  LinkedList<Slider*> sliders;
+
   /// Pointer to current animation object
   Animation *currentAnimation;
 

src/Slider.h

@@ -0,0 +1,25 @@
+#include <Arduino.h>
+
+
+class Slider
+{
+public:
+    String name;
+    int16_t min;
+    int16_t max;
+    int16_t value;
+    int16_t step;
+
+    Slider(String _name,
+           int16_t _min,
+           int16_t _max,
+           int16_t _value,
+           int16_t _step) : name(_name),
+                            min(_min),
+                            max(_max),
+                            value(_value),
+                            step(_step)
+    {
+
+    }
+};

src/WebSocket.cpp

@@ -79,9 +79,9 @@ void handleBinary(uint8_t *binary, uint8_t id)
   case 2: // Stop
     FastLEDManager.stop();
     break;
-  case 10: // Spectroscope data
-    if (FastLEDManager.currentAnimation)
-      FastLEDManager.stop();
+  case 10: // Color data
+    FastLEDManager.stop();
+    Fade::stop();
     for (uint16_t i = 0; i < FastLEDManager.numLeds; i++)
       FastLEDManager.leds[i] = CRGB(binary[1 + i * 3], binary[2 + i * 3], binary[3 + i * 3]);
     break;
@@ -91,11 +91,8 @@ void handleBinary(uint8_t *binary, uint8_t id)
   case 12: // Symmetrical spectroscope data
     Spectroscope::updateSpectroscope(binary + 1, true);
     break;
-  case 20: // Speed
-    Config.speed = binary[1];
-    break;
-  case 21: // Saturation
-    Config.saturation = binary[1];
+  case 20: // Slider data
+    FastLEDManager.getSlider(binary[1])->value = binary[2];
     break;
   case 30: // Request configuration
     DynamicJsonDocument doc(2048);
@@ -107,6 +104,17 @@ void handleBinary(uint8_t *binary, uint8_t id)
     {
       animations.add(FastLEDManager.animations.get(i)->getName());
     }
+    JsonArray sliders = doc.createNestedArray("sliders");
+    for (uint8_t i = 0; i < FastLEDManager.sliders.size(); i++)
+    {
+      // sliders.add(FastLEDManager.sliders.get(i).name);
+      JsonObject slider = sliders.createNestedObject();
+      slider["name"] = FastLEDManager.sliders.get(i)->name;
+      slider["min"] = FastLEDManager.sliders.get(i)->min;
+      slider["max"] = FastLEDManager.sliders.get(i)->max;
+      slider["step"] = FastLEDManager.sliders.get(i)->step;
+      slider["value"] = FastLEDManager.sliders.get(i)->value;
+    }
     String buffer = "";
     serializeJson(doc, buffer);
     socket.sendTXT(id, buffer.c_str());