improved ws, chat component

data/gradients.js

@@ -1,16 +0,0 @@
-const gradients = [ ["#FDEB71", "#F8D800"], ["#ABDCFF", "#0396FF"], ["#FEB692", "#EA5455"], ["#CE9FFC", "#7367F0"], ["#90F7EC", "#32CCBC"], ["#FFF6B7", "#F6416C"], ["#81FBB8", "#28C76F"], ["#E2B0FF", "#9F44D3"], ["#F97794", "#623AA2"], ["#FCCF31", "#F55555"], ["#F761A1", "#8C1BAB"], ["#43CBFF", "#9708CC"], ["#5EFCE8", "#736EFE"], ["#FAD7A1", "#E96D71"], ["#FFD26F", "#3677FF"], ["#A0FE65", "#FA016D"], ["#FFDB01", "#0E197D"], ["#FEC163", "#DE4313"], ["#92FFC0", "#002661"], ["#EEAD92", "#6018DC"], ["#F6CEEC", "#D939CD"], ["#52E5E7", "#130CB7"], ["#F1CA74", "#A64DB6"], ["#E8D07A", "#5312D6"], ["#EECE13", "#B210FF"], ["#79F1A4", "#0E5CAD"], ["#FDD819", "#E80505"], ["#FFF3B0", "#CA26FF"], ["#FFF5C3", "#9452A5"], ["#F05F57", "#360940"], ["#2AFADF", "#4C83FF"], ["#FFF886", "#F072B6"], ["#97ABFF", "#123597"], ["#F5CBFF", "#C346C2"], ["#FFF720", "#3CD500"], ["#FF6FD8", "#3813C2"], ["#EE9AE5", "#5961F9"], ["#FFD3A5", "#FD6585"], ["#C2FFD8", "#465EFB"], ["#FD6585", "#0D25B9"], ["#FD6E6A", "#FFC600"], ["#65FDF0", "#1D6FA3"], ["#6B73FF", "#000DFF"], ["#FF7AF5", "#513162"], ["#F0FF00", "#58CFFB"], ["#FFE985", "#FA742B"], ["#FFA6B7", "#1E2AD2"], ["#FFAA85", "#B3315F"], ["#72EDF2", "#5151E5"], ["#FF9D6C", "#BB4E75"], ["#F6D242", "#FF52E5"], ["#69FF97", "#00E4FF"], ["#3B2667", "#BC78EC"], ["#70F570", "#49C628"], ["#3C8CE7", "#00EAFF"], ["#FAB2FF", "#1904E5"], ["#81FFEF", "#F067B4"], ["#FFA8A8", "#FCFF00"], ["#FFCF71", "#2376DD"], ["#FF96F9", "#C32BAC"] ];
-
-
-
-// [{"text": "<b>foo</b>", "value": "0"}]
-
-// let msg = JSON.stringify({
-//         topic: 'pixels/state',
-//         payload: JSON.stringify({
-//             brightness: 32,
-//             color: parseInt(gradient[0].replace('#', '0x'), 16),
-//             color2: parseInt(gradient[1].replace('#', '0x'), 16),
-//             totalSteps: 100,
-//             pattern: 5
-//         })
-//     });

data/index.html

@@ -5,7 +5,7 @@
   <title>ESP Kit</title>
   <meta http-equiv="Content-type" content="text/html; charset=utf-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <link rel="icon" type="image/png" href="/favicon-32x32.png">
+  <link rel="icon" type="image/png" href="/favicon.png">
   <link rel="stylesheet" type="text/css" href="styles.css">
   <script src="script.js"></script>
 </head>
@@ -21,7 +21,7 @@
             data-name="hue"
             data-topic="pixels/hue"
             data-default="0"
-            data-entries='[{"text": "None", "value": "0"}, {"text": "Cool", "value": "1"}, {"text": "Warm", "value": "2"}, {"text": "Alien", "value": "5"}]'
+            data-external="/gradients.json"
             ></li>
           <li class="form-row ParamColor" 
             data-name="color" 
@@ -39,7 +39,7 @@
           data-name="pattern"
           data-topic="pixels/pattern"
           data-default="0"
-          data-entries='[{"text": "None", "value": "0"}, {"text": "Rainbow", "value": "1"}, {"text": "TheaterChase", "value": "2"}, {"text": "Fade", "value": "5"}]'
+          data-entries='[{"text": "None", "value": "0"}, {"text": "Rainbow", "value": "1"}, {"text": "TheaterChase", "value": "2"}, {"text": "Color Wipe", "value": "3"}, {"text": "Scanner", "value": "4"}, {"text": "Fade", "value": "5"}, {"text": "Fire", "value": "6"}]'
           ></li>      
           <li class="form-row ParamSlider" 
             data-name="brightness" 
@@ -53,26 +53,38 @@
             data-name="totalSteps" 
             data-min="1"
             data-max="255"
-            data-value="255"
+            data-value="16"
             data-topic="pixels/totalSteps"
             data-label="Steps">
           </li>    
         </ul>
       </div>
     </form>
+    <div class="settings container collapsible open">
+      <span class="heading">IlluChat</span>
+      <div class="content">
+        <div class="Chat" data-name="Ruedi" data-label="foo" data-placeholder="msg" data-topic="out/chat/log"></div>
+      </div>
+    </div>
     <div class="settings container collapsible">
       <span class="heading">Settings</span>
       <div class="content">
           <h2>Network</h2>
           <div class="Form" data-fileName="/config.json" data-name="configForm" data-from="/config.json" data-endpoint="/config"></div>
           <h2>NeoPixel</h2>
-        <div class="Form" data-fileName="/pixelConfig.json" data-name="configForm" data-from="/pixelConfig.json" data-endpoint="/config"></div>
+          <div class="Form" data-fileName="/pixelConfig.json" data-name="configForm" data-from="/pixelConfig.json" data-endpoint="/config"></div>
+          <h2>MQTT</h2>
+          <div class="Form" data-fileName="/mqttConfig.json" data-name="configForm" data-from="/mqttConfig.json" data-endpoint="/config"></div>
       </div>
     </div>
     <div class="settings container collapsible">
         <span class="heading">System</span>
         <div class="content">
           <div><label>Free Heap: </label><span class="js-heap"></span><span>&nbsp;bytes</span><br><br></div>
+          <form method='POST' action='/update' enctype='multipart/form-data'>
+            <input type='file' name='update'><input type='submit' value='Update'>
+          </form>
+          <br>
           <button class="js-restart">Restart</button>
         </div>
       </div>

data/script.js

@@ -10784,31 +10784,40 @@ Object.defineProperty(__webpack_exports__, "__esModule", { value: true });
 
 
 
-const hues = [ ["#FDEB71", "#F8D800"], ["#ABDCFF", "#0396FF"], ["#FEB692", "#EA5455"], ["#CE9FFC", "#7367F0"], ["#90F7EC", "#32CCBC"], ["#FFF6B7", "#F6416C"], ["#81FBB8", "#28C76F"], ["#E2B0FF", "#9F44D3"], ["#F97794", "#623AA2"], ["#FCCF31", "#F55555"], ["#F761A1", "#8C1BAB"], ["#43CBFF", "#9708CC"], ["#5EFCE8", "#736EFE"], ["#FAD7A1", "#E96D71"], ["#FFD26F", "#3677FF"], ["#A0FE65", "#FA016D"], ["#FFDB01", "#0E197D"], ["#FEC163", "#DE4313"], ["#92FFC0", "#002661"], ["#EEAD92", "#6018DC"], ["#F6CEEC", "#D939CD"], ["#52E5E7", "#130CB7"], ["#F1CA74", "#A64DB6"], ["#E8D07A", "#5312D6"], ["#EECE13", "#B210FF"], ["#79F1A4", "#0E5CAD"], ["#FDD819", "#E80505"], ["#FFF3B0", "#CA26FF"], ["#FFF5C3", "#9452A5"], ["#F05F57", "#360940"], ["#2AFADF", "#4C83FF"], ["#FFF886", "#F072B6"], ["#97ABFF", "#123597"], ["#F5CBFF", "#C346C2"], ["#FFF720", "#3CD500"], ["#FF6FD8", "#3813C2"], ["#EE9AE5", "#5961F9"], ["#FFD3A5", "#FD6585"], ["#C2FFD8", "#465EFB"], ["#FD6585", "#0D25B9"], ["#FD6E6A", "#FFC600"], ["#65FDF0", "#1D6FA3"], ["#6B73FF", "#000DFF"], ["#FF7AF5", "#513162"], ["#F0FF00", "#58CFFB"], ["#FFE985", "#FA742B"], ["#FFA6B7", "#1E2AD2"], ["#FFAA85", "#B3315F"], ["#72EDF2", "#5151E5"], ["#FF9D6C", "#BB4E75"], ["#F6D242", "#FF52E5"], ["#69FF97", "#00E4FF"], ["#3B2667", "#BC78EC"], ["#70F570", "#49C628"], ["#3C8CE7", "#00EAFF"], ["#FAB2FF", "#1904E5"], ["#81FFEF", "#F067B4"], ["#FFA8A8", "#FCFF00"], ["#FFCF71", "#2376DD"], ["#FF96F9", "#C32BAC"] ];
-let endpoint = '/pixel';
+let endpoint = '/ws';
+
+// gradients
+// https://uigradients.com
 
 __WEBPACK_IMPORTED_MODULE_0_jquery___default()(() => {
     let app = new __WEBPACK_IMPORTED_MODULE_1__core_App__["a" /* default */](__WEBPACK_IMPORTED_MODULE_0_jquery___default()('body'))
         .components(__WEBPACK_IMPORTED_MODULE_2__components_exports__)
         .websocket(new WebSocket(endpoint.indexOf('/') === 0 ? "ws://" + window.location.host + endpoint : endpoint));
-
+    app.ws.onmessage = (msg) => {
+        app.mediator.trigger('out/chat/log', {topic: 'out/chat/log', payload: msg.data});
+    };
     app.mediator.on('pixels/hue', (payload) => {
+        let colors = payload.split(',');
         let msg = JSON.stringify({
             topic: 'pixels/state',
+            broadcast: 1,
             payload: JSON.stringify({
-                brightness: 32,
-                color: parseInt(hues[payload][0].replace('#', '0x'), 16),
-                color2: parseInt(hues[payload][1].replace('#', '0x'), 16),
-                totalSteps: 32,
+                //brightness: 64,
+                color: parseInt(colors[0].replace('#', '0x'), 16),
+                color2: parseInt(colors[1].replace('#', '0x'), 16),
+                //totalSteps: 64,
                 pattern: 5
             })
         });
-        app.mediator.trigger('pixels/totalSteps', 32);
+        //app.mediator.trigger('pixels/brightness', 64);
+        //app.mediator.trigger('pixels/totalSteps', 64);
         app.mediator.trigger('pixels/pattern', 5);
-        app.mediator.trigger('pixels/color', hues[payload][0]);
-        app.mediator.trigger('pixels/color2', hues[payload][1]);
+        app.mediator.trigger('pixels/color',    colors[0]);
+        app.mediator.trigger('pixels/color2',   colors[1]);
         //console.log('pixels/hue: ' + msg);
         app.ws.send(msg);
+
+
     });
 
     // TODO make components
@@ -11040,6 +11049,9 @@ Object.defineProperty(__webpack_exports__, "__esModule", { value: true });
 /* harmony reexport (binding) */ __webpack_require__.d(__webpack_exports__, "ParamSelect", function() { return __WEBPACK_IMPORTED_MODULE_11__ParamSelect__["a"]; });
 /* harmony import */ var __WEBPACK_IMPORTED_MODULE_12__LedStripPatternSwitch__ = __webpack_require__(29);
 /* harmony reexport (binding) */ __webpack_require__.d(__webpack_exports__, "LedStripPatternSwitch", function() { return __WEBPACK_IMPORTED_MODULE_12__LedStripPatternSwitch__["a"]; });
+/* harmony import */ var __WEBPACK_IMPORTED_MODULE_13__Chat_Chat__ = __webpack_require__(30);
+/* harmony reexport (binding) */ __webpack_require__.d(__webpack_exports__, "Chat", function() { return __WEBPACK_IMPORTED_MODULE_13__Chat_Chat__["a"]; });
+
 
 
 
@@ -11984,20 +11996,18 @@ class ParamSlider extends __WEBPACK_IMPORTED_MODULE_1__base_Slider_Slider__["a"
     constructor(ctx, node) {
         super(ctx, node);
         //this.store = new Store(this.config.endpoint);
+        this.ctx.mediator.on(this.config.topic, (payload) => {
+            this.node.find('input').val(payload);
+        });
     }
     
     onChange(evt) {
-        this.ctx.ws.send(JSON.stringify({
+        let msg = JSON.stringify({
             topic: this.config.topic,
-            payload: evt.target.value
-        }));
-    }
-    subscribe(){
-        this.ctx.mediator.on(this.config.topic, (payload) => {
-            //console.log(this.config.topic + ":" + payload);
-            this.node.find('input').val(payload);
-            //this.notify(payload);
+            payload: evt.target.value,
+            broadcast: 1
         });
+        this.ctx.ws.send(msg);
     }
 }
 /* harmony export (immutable) */ __webpack_exports__["a"] = ParamSlider;
@@ -12061,7 +12071,8 @@ class ParamColor extends __WEBPACK_IMPORTED_MODULE_1__base_ColorPicker_ColorPick
     notify(val){
         let obj = {
             topic: this.config.topic,
-            payload: parseInt(val.replace('#', '0x'))
+            payload: parseInt(val.replace('#', '0x')),
+            broadcast: 1
         };
         this.ctx.ws.send(JSON.stringify(obj));
     }
@@ -12111,10 +12122,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.ctx.ws.send({
+        this.ctx.ws.send(JSON.stringify({
             topic: this.config.topic,
             payload: this.value
-        });
+        }));
         this.ctx.mediator.trigger(this.config.endpoint, this.value);
     }
 
@@ -12138,11 +12149,20 @@ class ParamSelect extends __WEBPACK_IMPORTED_MODULE_1__base_Select_Select__["a"
 
     constructor(ctx, node) {
         super(ctx, node);
-        this.render({
+        let viewData = {
             label: this.config.label,
-            name: this.config.name,
-            entries: this.config.entries
-        });
+            name: this.config.name
+        };
+        if(this.config.external){
+            __WEBPACK_IMPORTED_MODULE_0_jquery___default.a.getJSON(this.config.external).done((data) => {
+                viewData.entries = data;
+                this.render(viewData);
+            })
+        } else {
+            viewData.entries = this.config.entries;
+            this.render(viewData);
+        }
+        
         this.selectEntry(this.config.default);
         this.ctx.mediator.on(this.config.topic, (payload) => {
             this.selectEntry(payload);
@@ -12156,7 +12176,8 @@ class ParamSelect extends __WEBPACK_IMPORTED_MODULE_1__base_Select_Select__["a"
     onChange(evt) {
         let obj = {
             topic: this.config.topic,
-            payload: evt.target.value
+            payload: evt.target.value,
+            broadcast: 1
         };
         this.ctx.mediator.trigger(obj.topic, obj.payload);
         this.ctx.ws.send(JSON.stringify(obj));
@@ -12227,5 +12248,84 @@ class LedStripPatternSwitch extends __WEBPACK_IMPORTED_MODULE_1__base_Switch_Swi
 /* harmony export (immutable) */ __webpack_exports__["a"] = LedStripPatternSwitch;
 
 
+/***/ }),
+/* 30 */
+/***/ (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__Chat_html__ = __webpack_require__(31);
+/* harmony import */ var __WEBPACK_IMPORTED_MODULE_1__Chat_html___default = __webpack_require__.n(__WEBPACK_IMPORTED_MODULE_1__Chat_html__);
+/* harmony import */ var __WEBPACK_IMPORTED_MODULE_2__core_Component__ = __webpack_require__(1);
+
+
+
+
+class Chat extends __WEBPACK_IMPORTED_MODULE_2__core_Component__["a" /* default */] {
+
+    constructor(ctx, node, template) {
+        super(ctx, node, template || __WEBPACK_IMPORTED_MODULE_1__Chat_html___default.a);
+        this.render(this.config);
+        this.ctx.mediator.on(this.config.topic, this.onMessage.bind(this));
+        this.node.delegate('input.msg', 'keypress', this.onInput.bind(this));
+        this.node.delegate('button', 'click', this.send.bind(this));
+    }
+
+    templates() {
+        return {
+            message: (user, msg) => `
+                <li>
+                    <span class="user-label">${user}</span>
+                    <span class="message-text">${msg}</span>
+                </li>
+            `
+        };
+    }
+
+    onMessage(msg) {
+        let payload = msg.payload; //.replace(/<.+?>/g, '');
+        //console.log('onMsg: ' + msg);
+        let msgParts = payload.split(':');
+        let messages = this.node.find('.messages');
+        messages.append(
+            this.templates().message(msgParts[0], msgParts[1] ? msgParts[1] : '')
+        );
+        this.node.find('.message-container').animate({
+            scrollTop: messages[0].scrollHeight
+        }, 250);
+    }
+    sanitizeInput(val) {
+        return val.replace(/<.+?>/g, '');
+    }
+    send(evt) {
+        evt.preventDefault();
+        let username = this.node.find('input.username');
+        let msg = this.node.find('input.msg');
+        if (username.length > 0 && message.length > 0) {
+            let message = JSON.stringify({
+                topic: this.sanitizeInput(this.config.topic),
+                payload: this.sanitizeInput(username.val() + ':' + msg.val())
+            });
+            this.ctx.ws.send(message);
+            msg.val('');
+        }
+    }
+    onInput(evt) {
+        if (evt.keyCode === 13) {
+            this.send(evt);
+        }
+    }
+
+}
+/* harmony export (immutable) */ __webpack_exports__["a"] = Chat;
+
+
+/***/ }),
+/* 31 */
+/***/ (function(module, exports) {
+
+module.exports = "<form>\n    <ul>\n        <li class=\"form-row\">\n            <input type=\"text\" placeholder=\"Topic\" class=\"topic\" value=\"{{topic}}\" disabled>\n            <input type=\"text\" placeholder=\"Username\" class=\"username\">\n        </li>\n    </ul>\n    <div class=\"message-container\">\n        <ul class=\"messages\"></ul>\n    </div>\n    <ul>\n        <li class=\"form-row\">\n            <input type=\"text\" placeholder=\"{{placeholder}}\" class=\"msg\">\n            <button>Send</button>\n        </li>\n    </ul>\n    </ul>\n</form>"
+
 /***/ })
 /******/ ]);

data/styles.css

@@ -306,3 +306,24 @@ form .form-row input[type="checkbox"] {
 .sui select option {
   background: #333333;
 }
+.Chat .message-container {
+  max-height: 200px;
+  overflow: auto;
+}
+.Chat .message-container .messages {
+  list-style-type: none;
+}
+.Chat .message-container .messages .user-label {
+  color: lightblue;
+}
+.Chat .message-container .messages .user-label:before {
+  color: #097479;
+  content: '<';
+}
+.Chat .message-container .messages .user-label:after {
+  color: #097479;
+  content: '>';
+}
+.Chat .message-container .messages .message-text {
+  font-weight: normal;
+}

src/app/components/Chat/Chat.html

@@ -0,0 +1,18 @@
+<form>
+    <ul>
+        <li class="form-row">
+            <input type="text" placeholder="Topic" class="topic" value="{{topic}}" disabled>
+            <input type="text" placeholder="Username" class="username">
+        </li>
+    </ul>
+    <div class="message-container">
+        <ul class="messages"></ul>
+    </div>
+    <ul>
+        <li class="form-row">
+            <input type="text" placeholder="{{placeholder}}" class="msg">
+            <button>Send</button>
+        </li>
+    </ul>
+    </ul>
+</form>

src/app/components/Chat/Chat.js

@@ -0,0 +1,60 @@
+import $ from 'jquery';
+import markup from './Chat.html';
+import Component from '../../core/Component';
+
+export default class Chat extends Component {
+
+    constructor(ctx, node, template) {
+        super(ctx, node, template || markup);
+        this.render(this.config);
+        this.ctx.mediator.on(this.config.topic, this.onMessage.bind(this));
+        this.node.delegate('input.msg', 'keypress', this.onInput.bind(this));
+        this.node.delegate('button', 'click', this.send.bind(this));
+    }
+
+    templates() {
+        return {
+            message: (user, msg) => `
+                <li>
+                    <span class="user-label">${user}</span>
+                    <span class="message-text">${msg}</span>
+                </li>
+            `
+        };
+    }
+
+    onMessage(msg) {
+        let payload = msg.payload; //.replace(/<.+?>/g, '');
+        //console.log('onMsg: ' + msg);
+        let msgParts = payload.split(':');
+        let messages = this.node.find('.messages');
+        messages.append(
+            this.templates().message(msgParts[0], msgParts[1] ? msgParts[1] : '')
+        );
+        this.node.find('.message-container').animate({
+            scrollTop: messages[0].scrollHeight
+        }, 250);
+    }
+    sanitizeInput(val) {
+        return val.replace(/<.+?>/g, '');
+    }
+    send(evt) {
+        evt.preventDefault();
+        let username = this.node.find('input.username');
+        let msg = this.node.find('input.msg');
+        if (username.length > 0 && message.length > 0) {
+            let message = JSON.stringify({
+                topic: this.sanitizeInput(this.config.topic),
+                payload: this.sanitizeInput(username.val() + ':' + msg.val())
+            });
+            this.ctx.ws.send(message);
+            msg.val('');
+        }
+    }
+    onInput(evt) {
+        if (evt.keyCode === 13) {
+            this.send(evt);
+        }
+    }
+
+}

src/app/components/ParamColor.js

@@ -17,7 +17,8 @@ export default class ParamColor extends ColorPicker {
     notify(val){
         let obj = {
             topic: this.config.topic,
-            payload: parseInt(val.replace('#', '0x'))
+            payload: parseInt(val.replace('#', '0x')),
+            broadcast: 1
         };
         this.ctx.ws.send(JSON.stringify(obj));
     }

src/app/components/ParamSelect.js

@@ -6,11 +6,20 @@ export default class ParamSelect extends Select {
 
     constructor(ctx, node) {
         super(ctx, node);
-        this.render({
+        let viewData = {
             label: this.config.label,
-            name: this.config.name,
-            entries: this.config.entries
-        });
+            name: this.config.name
+        };
+        if(this.config.external){
+            $.getJSON(this.config.external).done((data) => {
+                viewData.entries = data;
+                this.render(viewData);
+            })
+        } else {
+            viewData.entries = this.config.entries;
+            this.render(viewData);
+        }
+        
         this.selectEntry(this.config.default);
         this.ctx.mediator.on(this.config.topic, (payload) => {
             this.selectEntry(payload);
@@ -24,7 +33,8 @@ export default class ParamSelect extends Select {
     onChange(evt) {
         let obj = {
             topic: this.config.topic,
-            payload: evt.target.value
+            payload: evt.target.value,
+            broadcast: 1
         };
         this.ctx.mediator.trigger(obj.topic, obj.payload);
         this.ctx.ws.send(JSON.stringify(obj));

src/app/components/ParamSlider.js

@@ -7,19 +7,17 @@ export default class ParamSlider extends Slider {
     constructor(ctx, node) {
         super(ctx, node);
         //this.store = new Store(this.config.endpoint);
+        this.ctx.mediator.on(this.config.topic, (payload) => {
+            this.node.find('input').val(payload);
+        });
     }
     
     onChange(evt) {
-        this.ctx.ws.send(JSON.stringify({
+        let msg = JSON.stringify({
             topic: this.config.topic,
-            payload: evt.target.value
-        }));
-    }
-    subscribe(){
-        this.ctx.mediator.on(this.config.topic, (payload) => {
-            //console.log(this.config.topic + ":" + payload);
-            this.node.find('input').val(payload);
-            //this.notify(payload);
+            payload: evt.target.value,
+            broadcast: 1
         });
+        this.ctx.ws.send(msg);
     }
 }

src/app/components/ParamWs.js

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

src/app/components/exports.js

@@ -11,3 +11,4 @@ export { default as ParamColor } from './ParamColor'
 export { default as ParamWs } from './ParamWs'
 export { default as ParamSelect } from './ParamSelect'
 export { default as LedStripPatternSwitch } from './LedStripPatternSwitch'
+export { default as Chat } from './Chat/Chat'

src/app/main.js

@@ -4,31 +4,40 @@ import $ from 'jquery';
 import App from './core/App';
 import * as components from './components/exports';
 
-const hues = [ ["#FDEB71", "#F8D800"], ["#ABDCFF", "#0396FF"], ["#FEB692", "#EA5455"], ["#CE9FFC", "#7367F0"], ["#90F7EC", "#32CCBC"], ["#FFF6B7", "#F6416C"], ["#81FBB8", "#28C76F"], ["#E2B0FF", "#9F44D3"], ["#F97794", "#623AA2"], ["#FCCF31", "#F55555"], ["#F761A1", "#8C1BAB"], ["#43CBFF", "#9708CC"], ["#5EFCE8", "#736EFE"], ["#FAD7A1", "#E96D71"], ["#FFD26F", "#3677FF"], ["#A0FE65", "#FA016D"], ["#FFDB01", "#0E197D"], ["#FEC163", "#DE4313"], ["#92FFC0", "#002661"], ["#EEAD92", "#6018DC"], ["#F6CEEC", "#D939CD"], ["#52E5E7", "#130CB7"], ["#F1CA74", "#A64DB6"], ["#E8D07A", "#5312D6"], ["#EECE13", "#B210FF"], ["#79F1A4", "#0E5CAD"], ["#FDD819", "#E80505"], ["#FFF3B0", "#CA26FF"], ["#FFF5C3", "#9452A5"], ["#F05F57", "#360940"], ["#2AFADF", "#4C83FF"], ["#FFF886", "#F072B6"], ["#97ABFF", "#123597"], ["#F5CBFF", "#C346C2"], ["#FFF720", "#3CD500"], ["#FF6FD8", "#3813C2"], ["#EE9AE5", "#5961F9"], ["#FFD3A5", "#FD6585"], ["#C2FFD8", "#465EFB"], ["#FD6585", "#0D25B9"], ["#FD6E6A", "#FFC600"], ["#65FDF0", "#1D6FA3"], ["#6B73FF", "#000DFF"], ["#FF7AF5", "#513162"], ["#F0FF00", "#58CFFB"], ["#FFE985", "#FA742B"], ["#FFA6B7", "#1E2AD2"], ["#FFAA85", "#B3315F"], ["#72EDF2", "#5151E5"], ["#FF9D6C", "#BB4E75"], ["#F6D242", "#FF52E5"], ["#69FF97", "#00E4FF"], ["#3B2667", "#BC78EC"], ["#70F570", "#49C628"], ["#3C8CE7", "#00EAFF"], ["#FAB2FF", "#1904E5"], ["#81FFEF", "#F067B4"], ["#FFA8A8", "#FCFF00"], ["#FFCF71", "#2376DD"], ["#FF96F9", "#C32BAC"] ];
-let endpoint = '/pixel';
+let endpoint = '/ws';
+
+// gradients
+// https://uigradients.com
 
 $(() => {
     let app = new App($('body'))
         .components(components)
         .websocket(new WebSocket(endpoint.indexOf('/') === 0 ? "ws://" + window.location.host + endpoint : endpoint));
-
+    app.ws.onmessage = (msg) => {
+        app.mediator.trigger('out/chat/log', {topic: 'out/chat/log', payload: msg.data});
+    };
     app.mediator.on('pixels/hue', (payload) => {
+        let colors = payload.split(',');
         let msg = JSON.stringify({
             topic: 'pixels/state',
+            broadcast: 1,
             payload: JSON.stringify({
-                brightness: 32,
-                color: parseInt(hues[payload][0].replace('#', '0x'), 16),
-                color2: parseInt(hues[payload][1].replace('#', '0x'), 16),
-                totalSteps: 32,
+                //brightness: 64,
+                color: parseInt(colors[0].replace('#', '0x'), 16),
+                color2: parseInt(colors[1].replace('#', '0x'), 16),
+                //totalSteps: 64,
                 pattern: 5
             })
         });
-        app.mediator.trigger('pixels/totalSteps', 32);
+        //app.mediator.trigger('pixels/brightness', 64);
+        //app.mediator.trigger('pixels/totalSteps', 64);
         app.mediator.trigger('pixels/pattern', 5);
-        app.mediator.trigger('pixels/color', hues[payload][0]);
-        app.mediator.trigger('pixels/color2', hues[payload][1]);
+        app.mediator.trigger('pixels/color',    colors[0]);
+        app.mediator.trigger('pixels/color2',   colors[1]);
         //console.log('pixels/hue: ' + msg);
         app.ws.send(msg);
+
+
     });
 
     // TODO make components

src/pages/gradients.js

@@ -1,16 +0,0 @@
-const gradients = [ ["#FDEB71", "#F8D800"], ["#ABDCFF", "#0396FF"], ["#FEB692", "#EA5455"], ["#CE9FFC", "#7367F0"], ["#90F7EC", "#32CCBC"], ["#FFF6B7", "#F6416C"], ["#81FBB8", "#28C76F"], ["#E2B0FF", "#9F44D3"], ["#F97794", "#623AA2"], ["#FCCF31", "#F55555"], ["#F761A1", "#8C1BAB"], ["#43CBFF", "#9708CC"], ["#5EFCE8", "#736EFE"], ["#FAD7A1", "#E96D71"], ["#FFD26F", "#3677FF"], ["#A0FE65", "#FA016D"], ["#FFDB01", "#0E197D"], ["#FEC163", "#DE4313"], ["#92FFC0", "#002661"], ["#EEAD92", "#6018DC"], ["#F6CEEC", "#D939CD"], ["#52E5E7", "#130CB7"], ["#F1CA74", "#A64DB6"], ["#E8D07A", "#5312D6"], ["#EECE13", "#B210FF"], ["#79F1A4", "#0E5CAD"], ["#FDD819", "#E80505"], ["#FFF3B0", "#CA26FF"], ["#FFF5C3", "#9452A5"], ["#F05F57", "#360940"], ["#2AFADF", "#4C83FF"], ["#FFF886", "#F072B6"], ["#97ABFF", "#123597"], ["#F5CBFF", "#C346C2"], ["#FFF720", "#3CD500"], ["#FF6FD8", "#3813C2"], ["#EE9AE5", "#5961F9"], ["#FFD3A5", "#FD6585"], ["#C2FFD8", "#465EFB"], ["#FD6585", "#0D25B9"], ["#FD6E6A", "#FFC600"], ["#65FDF0", "#1D6FA3"], ["#6B73FF", "#000DFF"], ["#FF7AF5", "#513162"], ["#F0FF00", "#58CFFB"], ["#FFE985", "#FA742B"], ["#FFA6B7", "#1E2AD2"], ["#FFAA85", "#B3315F"], ["#72EDF2", "#5151E5"], ["#FF9D6C", "#BB4E75"], ["#F6D242", "#FF52E5"], ["#69FF97", "#00E4FF"], ["#3B2667", "#BC78EC"], ["#70F570", "#49C628"], ["#3C8CE7", "#00EAFF"], ["#FAB2FF", "#1904E5"], ["#81FFEF", "#F067B4"], ["#FFA8A8", "#FCFF00"], ["#FFCF71", "#2376DD"], ["#FF96F9", "#C32BAC"] ];
-
-
-
-// [{"text": "<b>foo</b>", "value": "0"}]
-
-// let msg = JSON.stringify({
-//         topic: 'pixels/state',
-//         payload: JSON.stringify({
-//             brightness: 32,
-//             color: parseInt(gradient[0].replace('#', '0x'), 16),
-//             color2: parseInt(gradient[1].replace('#', '0x'), 16),
-//             totalSteps: 100,
-//             pattern: 5
-//         })
-//     });

src/pages/index.html

@@ -5,7 +5,7 @@
   <title>ESP Kit</title>
   <meta http-equiv="Content-type" content="text/html; charset=utf-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <link rel="icon" type="image/png" href="/favicon-32x32.png">
+  <link rel="icon" type="image/png" href="/favicon.png">
   <link rel="stylesheet" type="text/css" href="styles.css">
   <script src="script.js"></script>
 </head>
@@ -21,7 +21,7 @@
             data-name="hue"
             data-topic="pixels/hue"
             data-default="0"
-            data-entries='[{"text": "None", "value": "0"}, {"text": "Cool", "value": "1"}, {"text": "Warm", "value": "2"}, {"text": "Alien", "value": "5"}]'
+            data-external="/gradients.json"
             ></li>
           <li class="form-row ParamColor" 
             data-name="color" 
@@ -39,7 +39,7 @@
           data-name="pattern"
           data-topic="pixels/pattern"
           data-default="0"
-          data-entries='[{"text": "None", "value": "0"}, {"text": "Rainbow", "value": "1"}, {"text": "TheaterChase", "value": "2"}, {"text": "Fade", "value": "5"}]'
+          data-entries='[{"text": "None", "value": "0"}, {"text": "Rainbow", "value": "1"}, {"text": "TheaterChase", "value": "2"}, {"text": "Color Wipe", "value": "3"}, {"text": "Scanner", "value": "4"}, {"text": "Fade", "value": "5"}, {"text": "Fire", "value": "6"}]'
           ></li>      
           <li class="form-row ParamSlider" 
             data-name="brightness" 
@@ -53,26 +53,38 @@
             data-name="totalSteps" 
             data-min="1"
             data-max="255"
-            data-value="255"
+            data-value="16"
             data-topic="pixels/totalSteps"
             data-label="Steps">
           </li>    
         </ul>
       </div>
     </form>
+    <div class="settings container collapsible open">
+      <span class="heading">IlluChat</span>
+      <div class="content">
+        <div class="Chat" data-name="Ruedi" data-label="foo" data-placeholder="msg" data-topic="out/chat/log"></div>
+      </div>
+    </div>
     <div class="settings container collapsible">
       <span class="heading">Settings</span>
       <div class="content">
           <h2>Network</h2>
           <div class="Form" data-fileName="/config.json" data-name="configForm" data-from="/config.json" data-endpoint="/config"></div>
           <h2>NeoPixel</h2>
-        <div class="Form" data-fileName="/pixelConfig.json" data-name="configForm" data-from="/pixelConfig.json" data-endpoint="/config"></div>
+          <div class="Form" data-fileName="/pixelConfig.json" data-name="configForm" data-from="/pixelConfig.json" data-endpoint="/config"></div>
+          <h2>MQTT</h2>
+          <div class="Form" data-fileName="/mqttConfig.json" data-name="configForm" data-from="/mqttConfig.json" data-endpoint="/config"></div>
       </div>
     </div>
     <div class="settings container collapsible">
         <span class="heading">System</span>
         <div class="content">
           <div><label>Free Heap: </label><span class="js-heap"></span><span>&nbsp;bytes</span><br><br></div>
+          <form method='POST' action='/update' enctype='multipart/form-data'>
+            <input type='file' name='update'><input type='submit' value='Update'>
+          </form>
+          <br>
           <button class="js-restart">Restart</button>
         </div>
       </div>

src/styles/chat.less

@@ -0,0 +1,23 @@
+.Chat {
+    .message-container{
+        max-height: 200px;
+        overflow: auto;
+        .messages {
+            list-style-type: none;
+            .user-label {
+                color: lightblue;
+                &:before {
+                    color: @color-main;
+                    content: '<'
+                }
+                &:after {
+                    color: @color-main;
+                    content: '>'
+                }
+            }
+            .message-text{
+                font-weight: normal;
+            }
+        }
+    }
+}

src/styles/main.less

@@ -10,3 +10,5 @@
 @import "form/input.less";
 @import "form/color.less";
 @import "form/select.less";
+
+@import "chat.less";