From 0a67f05189b15924d96479bffe256f47e3721f1b Mon Sep 17 00:00:00 2001
From: Patrick Balsiger <frupii@gmail.com>
Date: Mon, 17 Sep 2018 15:34:41 +0200
Subject: [PATCH] moar paramz

---
 data/index.html                   | 33 ++++++++++++++++++++++---------
 data/script.js                    | 20 ++++++++++---------
 data/styles.css                   |  3 ---
 src/app/components/ParamSlider.js | 14 ++++++-------
 src/app/components/ParamWs.js     |  5 ++++-
 src/pages/index.html              | 33 ++++++++++++++++++++++---------
 src/styles/form/input.less        |  2 +-
 7 files changed, 71 insertions(+), 39 deletions(-)

diff --git a/data/index.html b/data/index.html
index 48df5ac..fd5a08c 100644
--- a/data/index.html
+++ b/data/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>
diff --git a/data/script.js b/data/script.js
index 341e813..b3ce2fb 100644
--- a/data/script.js
+++ b/data/script.js
@@ -11897,23 +11897,22 @@ class PresetSwitch extends __WEBPACK_IMPORTED_MODULE_1__base_Switch_Switch__["a"
 /* harmony import */ var __WEBPACK_IMPORTED_MODULE_0_jquery__ = __webpack_require__(0);
 /* harmony import */ var __WEBPACK_IMPORTED_MODULE_0_jquery___default = __webpack_require__.n(__WEBPACK_IMPORTED_MODULE_0_jquery__);
 /* harmony import */ var __WEBPACK_IMPORTED_MODULE_1__base_Slider_Slider__ = __webpack_require__(6);
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_2__core_store_RestStore__ = __webpack_require__(2);
-
 
 
+//import Store from '../core/store/RestStore';
 
 class ParamSlider extends __WEBPACK_IMPORTED_MODULE_1__base_Slider_Slider__["a" /* default */] {
 
     constructor(ctx, node) {
         super(ctx, node);
-        this.store = new __WEBPACK_IMPORTED_MODULE_2__core_store_RestStore__["a" /* default */](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
+        }));
     }
 
 }
@@ -12022,7 +12021,10 @@ class ParamWs extends __WEBPACK_IMPORTED_MODULE_1__base_TextInput_TextInput__["a
         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);
     }
 
diff --git a/data/styles.css b/data/styles.css
index fe033af..0746973 100644
--- a/data/styles.css
+++ b/data/styles.css
@@ -243,9 +243,6 @@ form .form-row input[type="checkbox"] {
     flex: 5;
   }
 }
-.sui input {
-  padding: .5em;
-}
 .sui input[type="text"],
 .sui input[type="password"] {
   height: 16px;
diff --git a/src/app/components/ParamSlider.js b/src/app/components/ParamSlider.js
index ca4ec26..564d587 100644
--- a/src/app/components/ParamSlider.js
+++ b/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
+        }));
     }
 
 }
\ No newline at end of file
diff --git a/src/app/components/ParamWs.js b/src/app/components/ParamWs.js
index 9139208..2704856 100644
--- a/src/app/components/ParamWs.js
+++ b/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);
     }
 
diff --git a/src/pages/index.html b/src/pages/index.html
index 48df5ac..fd5a08c 100644
--- a/src/pages/index.html
+++ b/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>
diff --git a/src/styles/form/input.less b/src/styles/form/input.less
index f90e032..afe16be 100644
--- a/src/styles/form/input.less
+++ b/src/styles/form/input.less
@@ -1,7 +1,7 @@
 .sui {
     
     input {
-        padding: .5em;
+        //padding: .5em;
     }
     
     input[type="text"], input[type="password"] {