implements ColorHsv + ColorsExtras

code/html/custom.js

@@ -347,6 +347,67 @@ function initColor() {
 
 }
 
+function initColorHsv() {
+
+    // check if already initialized
+    var done = $("#colors > div").length;
+    if (done > 0) return;
+
+    // add template
+    var template = $("#colorHsvTemplate").children();
+    var line = $(template).clone();
+    line.appendTo("#colors");
+
+    // init color wheel
+    $('input[name="color"]').wheelColorPicker({
+        sliders: 'whsvp'
+    }).on('sliderup', function() {
+        var color_all = $(this).wheelColorPicker('getColor');
+        var color_hsv ={};
+        color_hsv.h	  =Math.floor(color_all.h * 255);
+        color_hsv.s	  =Math.floor(color_all.s * 255);
+        color_hsv.v	  =Math.floor(color_all.v * 255);
+        websock.send(JSON.stringify({'action': 'color_hsv', 'data' : color_hsv}));
+    });
+
+}
+
+function initColorsExtras() {
+    // check if already initialized
+    var done = $("#colorsExtras > div").length;
+    if (done > 0) return;
+
+    // add template
+    var template = $("#colorsExtrasTemplate").children();
+    var line = $(template).clone();
+    line.appendTo("#colorsExtras");
+
+	// init anim mode
+    $("#animMode").on('change', function() {
+        var select = this.value;
+        websock.send(JSON.stringify( {'action': 'anim_mode', 'data'  : select }));
+    });
+
+    // init anim speed slider
+    noUiSlider.create($("#animSpeed").get(0), {
+		start: 500,
+		connect: [true, false],
+        tooltips: true,
+        format: {
+            to: function (value) { return parseInt(value); },
+            from: function (value) { return value; }
+        },
+		orientation: "horizontal",
+		range: { 'min': 0, 'max': 1000}
+	}).on("change", function() {
+        var value = parseInt(this.get());
+        websock.send(JSON.stringify({'action': 'anim_speed', 'data' : value}));
+    });
+}
+
+
+
+
 function initChannels(num) {
 
     // check if already initialized
@@ -520,6 +581,28 @@ function processData(data) {
             return;
         }
 
+        if (key == "color_hsv") {
+            initColorHsv();
+            var color_hsv ={};
+            color_hsv.h = data[key]['h'] / 255;
+            color_hsv.s = data[key]['s'] / 255;
+            color_hsv.v = data[key]['v'] / 255;
+            $("input[name='color']").wheelColorPicker('setColor', color_hsv);
+            return;
+        }
+
+        if (key == "anim_mode") {
+            initColorsExtras();
+            $("[name='animation']").val(data[key]);
+            return;
+        }
+        if (key == "anim_speed") {
+            initColorsExtras();
+            var slider = $("#animSpeed");
+            if (slider.length) slider.get(0).noUiSlider.set(data[key]);
+            return;
+        }
+
         if (key == "brightness") {
             var slider = $("#brightness");
             if (slider.length) slider.get(0).noUiSlider.set(data[key]);

code/html/index.html

@@ -165,6 +165,10 @@
                                 <div id="channels">
                                 </div>
 
+                                <div id="colorsExtras">
+                                </div>
+
+
                                 <div class="pure-g module module-analog">
                                     <label class="pure-u-1 pure-u-sm-1-4" for="analogValue">Analog</label>
                                     <input class="pure-u-1 pure-u-sm-3-4" type="text" name="analogValue" readonly />
@@ -936,6 +940,32 @@
             </div>
         </div>
 
+        <div id="colorHsvTemplate" class="template">
+            <div class="pure-g">
+                <label class="pure-u-1 pure-u-sm-1-4">Color</label>
+                <input class="pure-u-1 pure-u-sm-1-4" data-wcp-layout="block" name="color" readonly />
+            </div>
+        </div>
+
+        <div id="colorsExtrasTemplate" class="template">
+            <div class="pure-g">
+                <label class="pure-u-1 pure-u-sm-1-4">Mode</label>
+                <select class="pure-u-1 pure-u-sm-1-4" name="animation"  id="animMode">
+                	<option value=0>Single Color</option>
+                	<option value=1>1 - Flash</option>
+                	<option value=2>2 - Strobe</option>
+                	<option value=3>3 - Fade</option>
+                	<option value=4>4 - Smooth</option>
+                	<option value=5>5 - Party</option>
+                </select>
+            </div>
+            <div class="pure-g">
+                <label class="pure-u-1 pure-u-sm-1-4">Speed</label>
+                <div class="slider pure-u-1 pure-u-sm-1-4" id="animSpeed"></div>
+            </div>
+
+        </div>
+
         <div id="channelTemplate" class="template">
             <div class="pure-g">
                 <label class="pure-u-1 pure-u-sm-1-4">Channel #</label>