separate fw variation for chat

data/mqttConfig.json

@@ -2,5 +2,5 @@
     "mqttClientName" : "illucat",
     "mqttBrokerHost" : "192.168.1.2",
     "mqttBrokerPort" : 1883,
-    "mqttRootTopic" : "wirelos/led"
+    "mqttRootTopic" : "wirelos/illucat"
 }

data/www/gradients.json

@@ -3,10 +3,6 @@
         "text": "None",
         "value": ["#000000", "#000000"]
     },
-    {
-        "text": "Stadler",
-        "value": ["#0B3F75", "#0B3F75"]
-    },
     {
         "text": "Blu",
         "value": ["#00416A", "#E4E5E6"]

data/www/index.html

@@ -60,6 +60,12 @@
         </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">

data/www/script.js

@@ -10793,7 +10793,9 @@ __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({
@@ -10814,6 +10816,8 @@ __WEBPACK_IMPORTED_MODULE_0_jquery___default()(() => {
         app.mediator.trigger('pixels/color2',   colors[1]);
         //console.log('pixels/hue: ' + msg);
         app.ws.send(msg);
+
+
     });
 
     // TODO make components
@@ -11045,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"]; });
+
 
 
 
@@ -12115,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);
     }
 
@@ -12241,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 && msg.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/www/styles.css

@@ -31,7 +31,7 @@
 .sui label {
   color: #b3b2b2;
 }
-.sui button, .sui input[type=file] {
+.sui button {
   background: #097479;
   color: #eeeeee;
   font-size: 0.9em;
@@ -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;
+}

platformio.ini

@@ -86,7 +86,7 @@ lib_deps = ${common.lib_deps}
     https://gitlab.com/wirelos/sprocket-plugin-web.git
     https://gitlab.com/wirelos/sprocket-plugin-mqtt.git
     PubSubClient
-    
+
 [env:illuchat]
 src_filter = +<*> -<var/> +<var/illuchat/>
 platform = ${common.platform}

src/var/illuchat/main.cpp

@@ -8,6 +8,7 @@
 #include <WebApiPlugin.h>
 #include <PixelPlugin.h>
 #include <MqttPlugin.h>
+#include <OtaTcpPlugin.cpp>
 
 WiFiNet *network;
 Sprocket *sprocket;
@@ -16,6 +17,7 @@ WebConfigPlugin *webConfigPlugin;
 WebApiPlugin *webApiPlugin;
 PixelPlugin *pixelPlugin;
 MqttPlugin *mqttPlugin;
+OtaTcpPlugin *otaTcpPlugin;
 
 void setup()
 {
@@ -25,11 +27,14 @@ void setup()
     webServerPlugin = new WebServerPlugin({WEB_CONTEXT_PATH, WEB_DOC_ROOT, WEB_DEFAULT_FILE, WEB_PORT});
     webConfigPlugin = new WebConfigPlugin(webServerPlugin->server);
     webApiPlugin = new WebApiPlugin(webServerPlugin->server);
+    otaTcpPlugin = new OtaTcpPlugin({OTA_PORT, OTA_PASSWORD});
+
     sprocket->addPlugin(pixelPlugin);
     sprocket->addPlugin(webServerPlugin);
     sprocket->addPlugin(webConfigPlugin);
     sprocket->addPlugin(webApiPlugin);
     sprocket->addPlugin(mqttPlugin);
+    sprocket->addPlugin(otaTcpPlugin);
 
     network = new WiFiNet(
         WIFI_MODE,
@@ -44,11 +49,10 @@ void setup()
     webServerPlugin->server->serveStatic(PIXEL_CONFIG_FILE, SPIFFS, "pixelConfig.json");
     webServerPlugin->server->serveStatic(MQTT_CONFIG_FILE, SPIFFS, "mqttConfig.json");
 
-    const char* mqChatTopic = "wirelos/chat/log";
-    const char* outChatTopic = "out/chat/log";
-    const char* chatUser = "user";
+    const char *mqChatTopic = "wirelos/chat/log";
+    const char *outChatTopic = "out/chat/log";
 
-    sprocket->subscribe("mqtt/connect", [mqChatTopic, outChatTopic, chatUser](String msg) {
+    sprocket->subscribe("mqtt/connect", [mqChatTopic, outChatTopic](String msg) {
         if (msg.length() > 0)
         {
             mqttPlugin->client->subscribe(mqChatTopic);
@@ -58,9 +62,9 @@ void setup()
             });
 
             // send message from WS to this topic
-            sprocket->subscribe(outChatTopic, [mqChatTopic, chatUser](String msg) {
-                PRINT_MSG(Serial, "CHAT", msg.c_str());
-                mqttPlugin->client->publish(mqChatTopic, (String(chatUser) + ": " + msg).c_str());
+            sprocket->subscribe(outChatTopic, [mqChatTopic](String msg) {
+                PRINT_MSG(Serial, "CHAT", String("outgoing:  " + msg).c_str());
+                mqttPlugin->client->publish(mqChatTopic, msg.c_str());
             });
         }
     });