moar paramz

src/app/components/ParamSlider.js

@@ -1,19 +1,19 @@
 import $ from 'jquery';
 import Slider from './base/Slider/Slider';
-import Store from '../core/store/RestStore';
+//import Store from '../core/store/RestStore';
 
 export default class ParamSlider extends Slider {
 
     constructor(ctx, node) {
         super(ctx, node);
-        this.store = new Store(this.config.endpoint);
+        //this.store = new Store(this.config.endpoint);
     }
-
+    
     onChange(evt) {
-        this.store.save({
-            param: this.config.name,
-            value: this.value
-        });
+        this.ctx.ws.send(JSON.stringify({
+            topic: this.config.topic,
+            payload: evt.target.value
+        }));
     }
 
 }

src/app/components/ParamWs.js

@@ -30,7 +30,10 @@ export default class ParamWs extends TextInput {
         obj[this.config.name] = this.value;
         //this.store.save(obj);
         console.log(this.value);
-        this.ws.send(this.value);
+        this.ctx.ws.send({
+            topic: this.config.topic,
+            payload: this.value
+        });
         this.ctx.mediator.trigger(this.config.endpoint, this.value);
     }
 

src/pages/index.html

@@ -31,24 +31,39 @@
       <div class="content">
         <ul>
           <li class="form-row ParamColor" 
-            data-mode="2"
             data-name="color" 
             data-topic="pixels/color"
             data-label="Color">
           </li>
           <li class="form-row ParamColor" 
-            data-mode="2"
             data-name="color" 
             data-topic="pixels/color2"
             data-label="Color 2">
-          </li>    
+          </li>
+          <!-- data-entries='[{"text": "Color", "value": "0"}, {"text": "Rainbow", "value": "1"}, {"text": "TheaterChase", "value": "2"}, {"text": "Wipe", "value": "3"}, {"text": "Scanner", "value": "4"}, {"text": "Fade", "value": "5"}]' -->
           <li class="form-row ParamSelect"
-            data-label="Pattern"
-            data-name="pattern"
-            data-topic="pixels/pattern"
-            data-default="1"
-            data-entries='[{"text": "Color", "value": "0"}, {"text": "Rainbow", "value": "1"}, {"text": "TheaterChase", "value": "2"}]'
-            ></li>      
+          data-label="Pattern"
+          data-name="pattern"
+          data-topic="pixels/pattern"
+          data-default="0"
+          data-entries='[{"text": "Color", "value": "0"}, {"text": "Rainbow", "value": "1"}, {"text": "TheaterChase", "value": "2"}, {"text": "Fade", "value": "5"}]'
+          ></li>      
+          <!-- <li class="form-row ParamSlider" 
+            data-name="totalSteps" 
+            data-min="1"
+            data-max="255"
+            data-value="255"
+            data-topic="pixels/totalSteps"
+            data-label="Total Steps">
+          </li> -->    
+          <li class="form-row ParamSlider" 
+            data-name="brightness" 
+            data-min="0"
+            data-max="255"
+            data-value="64"
+            data-topic="pixels/brightness"
+            data-label="Brightness">
+          </li>    
         </ul>
       </div>
     </form>

src/styles/form/input.less

@@ -1,7 +1,7 @@
 .sui {
     
     input {
-        padding: .5em;
+        //padding: .5em;
     }
     
     input[type="text"], input[type="password"] {