some changes

src/app/components/LedStripPatternSwitch.js

@@ -1,12 +1,15 @@
 import $ from 'jquery';
 import Switch from './base/Switch/Switch';
-import Store from '../core/store/RestStore';
+import RestStore from '../core/store/RestStore';
 
 export default class LedStripPatternSwitch extends Switch {
 
     constructor(ctx, node) {
         super(ctx, node);
-        this.store = new Store(this.config.endpoint);
+        this.store = new RestStore(this.config.endpoint);
+
+        this.ws = new WebSocket(this.config.endpoint.indexOf('/') === 0 ? "ws://" + window.location.host + this.config.endpoint : this.config.endpoint );
+
         this.modes = ["init", "Color", "Pattern", "octoPrint"];
         this.patterns = [ "none", "Rainbow", "Scanner", "ColorWipe", "TheaterChase"];
     }
@@ -14,18 +17,23 @@ export default class LedStripPatternSwitch extends Switch {
     onClick(evt) {
         // FIXME separate mode from pattern
         let payload = {
-            id: this.patterns.indexOf(this.config.name),
-            pattern: this.config.name.substring(0,1),
-            group: this.config.group,
-            mode: 'P',
-            state: this.state
+            //id: this.patterns.indexOf(this.config.name),
+            //pattern: this.config.name.substring(0,1),
+            //group: this.config.group,
+            //mode: 'P',
+            //state: this.state
+            value: ''+this.config.id,
+            mode: ''+this.config.mode,
+            foo: this.value
         };
         this.ctx.mediator.trigger('/ledStripPreset/switched', payload);
     }
 
     subscribe() {
         this.ctx.mediator.on('/ledStripPreset/switched', (payload) => {
-            this.store.save(payload);
+            //this.store.save(payload);
+            console.log(payload);
+            this.ws.send(JSON.stringify(payload));
             if (payload.state
                 && payload.id !== this.patterns.indexOf(this.config.name)
                 && payload.group === this.config.group) {

src/app/components/ParamColor.js

@@ -7,7 +7,7 @@ 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('/') > -1 ? "ws://" + window.location.host + this.config.endpoint : 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);
         };
@@ -20,8 +20,12 @@ export default class ParamColor extends ColorPicker {
         /*this.store.save({
             rgb: parseInt(this.value.replace('#', '0x'))
         });*/
-        let cmd = this.config.id + parseInt(this.value.replace('#', '0x'));
-        this.ws.send(cmd);
+        //let cmd = this.config.id + parseInt(this.value.replace('#', '0x'));
+        console.log(parseInt(this.value.replace('#', '0x')));
+        this.ws.send(JSON.stringify({
+            mode: this.config.mode,
+            value: parseInt(this.value.replace('#', '0x'))
+        }));
     }
 
 }

src/app/components/ParamWs.js

@@ -8,7 +8,7 @@ export default class ParamWs extends TextInput {
         super(ctx, node);
         //this.store = new Store(this.config.endpoint);
 
-        this.ws = new WebSocket(this.config.endpoint.indexOf('/') > -1 ? "ws://" + window.location.host + this.config.endpoint : 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);
         };

src/app/components/base/Form/Form.html

@@ -0,0 +1,3 @@
+<form action="{{endpoint}}">
+    <button class="js-submit">Submit</button>
+</form>

src/app/components/base/Form/Form.js

@@ -0,0 +1,43 @@
+import $ from 'jquery';
+import Component from '../../../core/Component';
+import TextInput from '../TextInput/TextInput';
+import Store from '../../../core/store/RestStore';
+
+export default class Form extends Component {
+
+    constructor(ctx, node) {
+        super(ctx, node);
+        this.store = new Store(this.config.endpoint);
+        this.render(this.config);
+        
+        this.fields = [];
+        let tf1 = new TextInput(ctx); 
+        tf1.config = {
+            name: 'ssid',
+            label: 'SSID',
+            placeholder: 'some AP'
+        };
+        tf1.value = 'MyAp';
+
+        this.fields.push(tf1);
+        this.fields.forEach((f) => {
+            f.render({
+                name: 'ssid',
+                label: 'SSID',
+                placeholder: 'some AP'
+            });
+            this.node.prepend(f);
+        });
+
+        this.node.delegate('click', '.js-submit', this.onSubmit.bind(this));
+    }
+
+    onSubmit(evt) {
+        let obj = {};
+
+        obj[this.config.name] = this.value;
+        //this.store.save(obj);
+        console.log(this.value);
+    }
+
+}

src/app/components/exports.js

@@ -1,3 +1,4 @@
+export { default as Form } from './base/Form/Form'
 export { default as Switch } from './base/Switch/Switch'
 export { default as Slider } from './base/Slider/Slider'
 export { default as TextInput } from './base/TextInput/TextInput'

src/app/core/Component.js

@@ -7,9 +7,9 @@ export default class Component {
 
     constructor(ctx, node, template) {
         this.ctx = ctx;
-        this.node = node;
+        this.node = node ? node : $();
         this.component = this.constructor.name;
-        this.config = this.node.data();
+        this.config = this.node.data() || {name: 'none'};
         this.data = {};
         this.markup = template;
     }
@@ -33,6 +33,7 @@ export default class Component {
     render(data) {
         if (data) data.helpers = this.templateHelpers();
         let rendered = Mustache.render(this.markup, data);
+        if(!this.node) this.node = $(rendered);
         this.node.html(rendered);
         this.bindData();
     }

src/pages/index.html

@@ -31,34 +31,40 @@
       <div class="content">
         <ul>
           <li class="form-row ParamColor" 
-            data-id="C"
+            data-mode="2"
             data-name="color" 
             data-label="Color" 
-            data-endpoint="/patterns">
+            data-endpoint="ws://192.168.1.246/pixel">
           </li>
           <li class="form-row ParamColor" 
-            data-id="D"
+            data-mode="2"
             data-name="color2" 
             data-label="Color 2" 
-            data-endpoint="/patterns">
+            data-endpoint="/pixel">
           </li>          
           <li class="form-row LedStripPatternSwitch" 
             data-group="stripPattern" 
+            data-id="1"
+            data-mode="3"
             data-name="Rainbow" 
             data-label="Rainbow" 
-            data-endpoint="/strip/pattern">
-          </li>
-          <li class="form-row LedStripPatternSwitch" 
-            data-group="stripPattern" 
-            data-name="Scanner" 
-            data-label="Scanner" 
-            data-endpoint="/strip/pattern">
+            data-endpoint="ws://192.168.1.246/pixel">
           </li>
           <li class="form-row LedStripPatternSwitch" 
             data-group="stripPattern" 
             data-name="TheaterChase" 
             data-label="Theater Chase" 
-            data-endpoint="/strip/pattern">
+            data-id="2"
+            data-mode="3"
+            data-endpoint="ws://192.168.1.246/pixel">
+          </li>
+          <li class="form-row LedStripPatternSwitch" 
+            data-group="stripPattern" 
+            data-name="Scanner" 
+            data-label="Scanner" 
+            data-id="4"
+            data-mode="3"
+            data-endpoint="ws://192.168.1.246/pixel">
           </li>
         </ul>
       </div>
@@ -66,6 +72,7 @@
     <div class="settings container collapsible open">
       <span class="heading">WiFi Settings</span>
       <div class="content">
+        <!-- <div class="Form" data-name="configForm" data-endpoint="/config.json"></div> -->
         <form action="/wifiConfig" method="POST">
           <!-- <li class="form-row">
             <label for="ap">AP Mode</label>