adapt message

data/index.html

@@ -33,16 +33,19 @@
           <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="color2" 
+            data-name="color" 
+            data-topic="pixels/color2"
             data-label="Color 2">
           </li>    
           <li class="form-row ParamSelect"
             data-label="Pattern"
             data-name="pattern"
+            data-topic="pixels/pattern"
             data-entries='[{"text": "None", "value": "0"}, {"text": "Rainbow", "value": "1"}, {"text": "TheaterChase", "value": "2"}]'
             ></li>      
         </ul>

data/script.js

@@ -10438,57 +10438,6 @@ return jQuery;
 /* 1 */
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
-"use strict";
-/* 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__Mediator__ = __webpack_require__(5);
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_2__DataStore__ = __webpack_require__(17);
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_3__StoreAction__ = __webpack_require__(18);
-
-
-
-
-
-class RestStore extends __WEBPACK_IMPORTED_MODULE_2__DataStore__["a" /* default */] {
-  constructor(endpoint, mediator = new __WEBPACK_IMPORTED_MODULE_1__Mediator__["a" /* default */]()){
-    super(mediator);
-    this.endpoint = endpoint;
-  }
-  load(entry){
-    return this.request(__WEBPACK_IMPORTED_MODULE_3__StoreAction__["a" /* default */].LOAD, 'GET', entry);
-  }
-  save(entry){
-    return this.request(__WEBPACK_IMPORTED_MODULE_3__StoreAction__["a" /* default */].SAVE, 'POST', entry);
-  }
-  add(entry){
-    return this.request(__WEBPACK_IMPORTED_MODULE_3__StoreAction__["a" /* default */].ADD, 'PUT', entry);
-  }
-  delete(entry){
-    return this.request(__WEBPACK_IMPORTED_MODULE_3__StoreAction__["a" /* default */].DELETE, 'POST', entry);
-  }
-  request(event, type, payload){
-    return __WEBPACK_IMPORTED_MODULE_0_jquery___default.a.ajax({
-      url: this.endpoint,
-      type: type,
-      data: payload
-    })
-    .then(JSON.parse)
-    .then((response) => {
-      this.mediator.trigger(event, response);
-    });
-  }
-  on(event, subscriber, context){
-    this.mediator.on(event, subscriber, context);
-  }
-}
-/* harmony export (immutable) */ __webpack_exports__["a"] = RestStore;
-
-
-
-/***/ }),
-/* 2 */
-/***/ (function(module, __webpack_exports__, __webpack_require__) {
-
 "use strict";
 /* harmony import */ var __WEBPACK_IMPORTED_MODULE_0_mustache__ = __webpack_require__(13);
 /* harmony import */ var __WEBPACK_IMPORTED_MODULE_0_mustache___default = __webpack_require__.n(__WEBPACK_IMPORTED_MODULE_0_mustache__);
@@ -10539,6 +10488,57 @@ class Component {
 /* harmony export (immutable) */ __webpack_exports__["a"] = Component;
 
 
+/***/ }),
+/* 2 */
+/***/ (function(module, __webpack_exports__, __webpack_require__) {
+
+"use strict";
+/* 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__Mediator__ = __webpack_require__(5);
+/* harmony import */ var __WEBPACK_IMPORTED_MODULE_2__DataStore__ = __webpack_require__(17);
+/* harmony import */ var __WEBPACK_IMPORTED_MODULE_3__StoreAction__ = __webpack_require__(18);
+
+
+
+
+
+class RestStore extends __WEBPACK_IMPORTED_MODULE_2__DataStore__["a" /* default */] {
+  constructor(endpoint, mediator = new __WEBPACK_IMPORTED_MODULE_1__Mediator__["a" /* default */]()){
+    super(mediator);
+    this.endpoint = endpoint;
+  }
+  load(entry){
+    return this.request(__WEBPACK_IMPORTED_MODULE_3__StoreAction__["a" /* default */].LOAD, 'GET', entry);
+  }
+  save(entry){
+    return this.request(__WEBPACK_IMPORTED_MODULE_3__StoreAction__["a" /* default */].SAVE, 'POST', entry);
+  }
+  add(entry){
+    return this.request(__WEBPACK_IMPORTED_MODULE_3__StoreAction__["a" /* default */].ADD, 'PUT', entry);
+  }
+  delete(entry){
+    return this.request(__WEBPACK_IMPORTED_MODULE_3__StoreAction__["a" /* default */].DELETE, 'POST', entry);
+  }
+  request(event, type, payload){
+    return __WEBPACK_IMPORTED_MODULE_0_jquery___default.a.ajax({
+      url: this.endpoint,
+      type: type,
+      data: payload
+    })
+    .then(JSON.parse)
+    .then((response) => {
+      this.mediator.trigger(event, response);
+    });
+  }
+  on(event, subscriber, context){
+    this.mediator.on(event, subscriber, context);
+  }
+}
+/* harmony export (immutable) */ __webpack_exports__["a"] = RestStore;
+
+
+
 /***/ }),
 /* 3 */
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
@@ -10546,7 +10546,7 @@ class Component {
 "use strict";
 /* 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__core_Component__ = __webpack_require__(2);
+/* harmony import */ var __WEBPACK_IMPORTED_MODULE_1__core_Component__ = __webpack_require__(1);
 /* harmony import */ var __WEBPACK_IMPORTED_MODULE_2__TextInput_html__ = __webpack_require__(16);
 /* harmony import */ var __WEBPACK_IMPORTED_MODULE_2__TextInput_html___default = __webpack_require__.n(__WEBPACK_IMPORTED_MODULE_2__TextInput_html__);
 
@@ -10584,7 +10584,7 @@ class TextInput extends __WEBPACK_IMPORTED_MODULE_1__core_Component__["a" /* def
 "use strict";
 /* 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__core_Component__ = __webpack_require__(2);
+/* harmony import */ var __WEBPACK_IMPORTED_MODULE_1__core_Component__ = __webpack_require__(1);
 /* harmony import */ var __WEBPACK_IMPORTED_MODULE_2__Switch_html__ = __webpack_require__(19);
 /* harmony import */ var __WEBPACK_IMPORTED_MODULE_2__Switch_html___default = __webpack_require__.n(__WEBPACK_IMPORTED_MODULE_2__Switch_html__);
 
@@ -10656,7 +10656,7 @@ class Mediator {
 "use strict";
 /* 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__core_Component__ = __webpack_require__(2);
+/* harmony import */ var __WEBPACK_IMPORTED_MODULE_1__core_Component__ = __webpack_require__(1);
 /* harmony import */ var __WEBPACK_IMPORTED_MODULE_2__Slider_html__ = __webpack_require__(20);
 /* harmony import */ var __WEBPACK_IMPORTED_MODULE_2__Slider_html___default = __webpack_require__.n(__WEBPACK_IMPORTED_MODULE_2__Slider_html__);
 
@@ -10694,7 +10694,7 @@ class Slider extends __WEBPACK_IMPORTED_MODULE_1__core_Component__["a" /* defaul
 "use strict";
 /* 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__core_Component__ = __webpack_require__(2);
+/* harmony import */ var __WEBPACK_IMPORTED_MODULE_1__core_Component__ = __webpack_require__(1);
 /* harmony import */ var __WEBPACK_IMPORTED_MODULE_2__Select_html__ = __webpack_require__(21);
 /* harmony import */ var __WEBPACK_IMPORTED_MODULE_2__Select_html___default = __webpack_require__.n(__WEBPACK_IMPORTED_MODULE_2__Select_html__);
 
@@ -10728,7 +10728,7 @@ class Select extends __WEBPACK_IMPORTED_MODULE_1__core_Component__["a" /* defaul
 "use strict";
 /* 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__core_Component__ = __webpack_require__(2);
+/* harmony import */ var __WEBPACK_IMPORTED_MODULE_1__core_Component__ = __webpack_require__(1);
 /* harmony import */ var __WEBPACK_IMPORTED_MODULE_2__ColorPicker_html__ = __webpack_require__(22);
 /* harmony import */ var __WEBPACK_IMPORTED_MODULE_2__ColorPicker_html___default = __webpack_require__.n(__WEBPACK_IMPORTED_MODULE_2__ColorPicker_html__);
 
@@ -11023,9 +11023,9 @@ Object.defineProperty(__webpack_exports__, "__esModule", { value: true });
 "use strict";
 /* 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__core_Component__ = __webpack_require__(2);
+/* harmony import */ var __WEBPACK_IMPORTED_MODULE_1__core_Component__ = __webpack_require__(1);
 /* harmony import */ var __WEBPACK_IMPORTED_MODULE_2__TextInput_TextInput__ = __webpack_require__(3);
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_3__core_store_RestStore__ = __webpack_require__(1);
+/* harmony import */ var __WEBPACK_IMPORTED_MODULE_3__core_store_RestStore__ = __webpack_require__(2);
 
 
 
@@ -11850,7 +11850,7 @@ module.exports = "<label for=\"{{name}}\">{{label}}</label>\n<input type=\"color
 /* 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_Switch_Switch__ = __webpack_require__(4);
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_2__core_store_RestStore__ = __webpack_require__(1);
+/* harmony import */ var __WEBPACK_IMPORTED_MODULE_2__core_store_RestStore__ = __webpack_require__(2);
 
 
 
@@ -11897,7 +11897,7 @@ 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__(1);
+/* harmony import */ var __WEBPACK_IMPORTED_MODULE_2__core_store_RestStore__ = __webpack_require__(2);
 
 
 
@@ -11928,7 +11928,7 @@ class ParamSlider extends __WEBPACK_IMPORTED_MODULE_1__base_Slider_Slider__["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_TextInput_TextInput__ = __webpack_require__(3);
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_2__core_store_RestStore__ = __webpack_require__(1);
+/* harmony import */ var __WEBPACK_IMPORTED_MODULE_2__core_store_RestStore__ = __webpack_require__(2);
 
 
 
@@ -11959,8 +11959,6 @@ class ParamText extends __WEBPACK_IMPORTED_MODULE_1__base_TextInput_TextInput__[
 /* 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_ColorPicker_ColorPicker__ = __webpack_require__(8);
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_2__core_store_RestStore__ = __webpack_require__(1);
-
 
 
 
@@ -11968,26 +11966,15 @@ class ParamColor extends __WEBPACK_IMPORTED_MODULE_1__base_ColorPicker_ColorPick
 
     constructor(ctx, node) {
         super(ctx, node);
-        //this.store = new Store(this.config.endpoint);
-        /* this.ws = new WebSocket(this.config.endpoint.indexOf('/') === 0 ? "ws://" + window.location.host + this.config.endpoint : this.config.endpoint );
-        this.ws.onopen = (event) => {
-            console.log('open ' + this.config.endpoint);
-        };
-        this.ws.onmessage = (event) => {
-            console.log(event.data);
-         }; */
     }
 
     onChange(evt) {
-        /*this.store.save({
+        let obj = {
-            rgb: parseInt(this.value.replace('#', '0x'))
+            topic: this.config.topic,
-        });*/
+            payload: parseInt(this.value.replace('#', '0x'))
-        //let cmd = this.config.id + parseInt(this.value.replace('#', '0x'));
+        };
-        console.log(parseInt(this.value.replace('#', '0x')));
+        this.ctx.ws.send(JSON.stringify(obj));
-        this.ctx.ws.send(JSON.stringify({
+        console.log(obj);
-            mode: this.config.mode,
-            value: parseInt(this.value.replace('#', '0x'))
-        }));
     }
 
 }
@@ -12002,7 +11989,7 @@ class ParamColor extends __WEBPACK_IMPORTED_MODULE_1__base_ColorPicker_ColorPick
 /* 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_TextInput_TextInput__ = __webpack_require__(3);
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_2__core_store_RestStore__ = __webpack_require__(1);
+/* harmony import */ var __WEBPACK_IMPORTED_MODULE_2__core_store_RestStore__ = __webpack_require__(2);
 
 
 
@@ -12067,10 +12054,11 @@ class ParamSelect extends __WEBPACK_IMPORTED_MODULE_1__base_Select_Select__["a"
     }
 
     onChange(evt) {
-        let obj = {};
+        let obj = {
-        obj[this.config.name] = evt.target.value;
+            topic: this.config.topic,
+            payload: evt.target.value
+        };
         this.ctx.ws.send(JSON.stringify(obj));
-        
     }
 
 }
@@ -12085,7 +12073,7 @@ class ParamSelect extends __WEBPACK_IMPORTED_MODULE_1__base_Select_Select__["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_Switch_Switch__ = __webpack_require__(4);
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_2__core_store_RestStore__ = __webpack_require__(1);
+/* harmony import */ var __WEBPACK_IMPORTED_MODULE_2__core_store_RestStore__ = __webpack_require__(2);
 
 
 

src/app/components/ParamColor.js

@@ -1,31 +1,19 @@
 import $ from 'jquery';
 import ColorPicker from './base/ColorPicker/ColorPicker';
-import Store from '../core/store/RestStore';
 
 export default class ParamColor extends ColorPicker {
 
     constructor(ctx, node) {
         super(ctx, node);
-        //this.store = new Store(this.config.endpoint);
-        /* this.ws = new WebSocket(this.config.endpoint.indexOf('/') === 0 ? "ws://" + window.location.host + this.config.endpoint : this.config.endpoint );
-        this.ws.onopen = (event) => {
-            console.log('open ' + this.config.endpoint);
-        };
-        this.ws.onmessage = (event) => {
-            console.log(event.data);
-         }; */
     }
 
     onChange(evt) {
-        /*this.store.save({
+        let obj = {
-            rgb: parseInt(this.value.replace('#', '0x'))
+            topic: this.config.topic,
-        });*/
+            payload: parseInt(this.value.replace('#', '0x'))
-        //let cmd = this.config.id + parseInt(this.value.replace('#', '0x'));
+        };
-        console.log(parseInt(this.value.replace('#', '0x')));
+        this.ctx.ws.send(JSON.stringify(obj));
-        this.ctx.ws.send(JSON.stringify({
+        console.log(obj);
-            mode: this.config.mode,
-            value: parseInt(this.value.replace('#', '0x'))
-        }));
     }
 
 }

src/app/components/ParamSelect.js

@@ -14,10 +14,11 @@ export default class ParamSelect extends Select {
     }
 
     onChange(evt) {
-        let obj = {};
+        let obj = {
-        obj[this.config.name] = evt.target.value;
+            topic: this.config.topic,
+            payload: evt.target.value
+        };
         this.ctx.ws.send(JSON.stringify(obj));
-        
     }
 
 }

src/pages/index.html

@@ -33,16 +33,19 @@
           <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="color2" 
+            data-name="color" 
+            data-topic="pixels/color2"
             data-label="Color 2">
           </li>    
           <li class="form-row ParamSelect"
             data-label="Pattern"
             data-name="pattern"
+            data-topic="pixels/pattern"
             data-entries='[{"text": "None", "value": "0"}, {"text": "Rainbow", "value": "1"}, {"text": "TheaterChase", "value": "2"}]'
             ></li>      
         </ul>