From 62186af303dc128dc2946a0cb5344396ca2aa670 Mon Sep 17 00:00:00 2001 From: Patrick Balsiger Date: Fri, 23 Nov 2018 09:46:41 +0100 Subject: [PATCH] separate fw variation for chat --- data/mqttConfig.json | 2 +- data/www/favicon-32x32.png | Bin 0 -> 3155 bytes data/www/gradients.json | 4 -- data/www/index.html | 6 +++ data/www/script.js | 92 +++++++++++++++++++++++++++++++++++-- data/www/styles.css | 23 +++++++++- platformio.ini | 2 +- src/var/illuchat/main.cpp | 18 +++++--- 8 files changed, 130 insertions(+), 17 deletions(-) create mode 100644 data/www/favicon-32x32.png diff --git a/data/mqttConfig.json b/data/mqttConfig.json index df0e9dc..f55046a 100644 --- a/data/mqttConfig.json +++ b/data/mqttConfig.json @@ -2,5 +2,5 @@ "mqttClientName" : "illucat", "mqttBrokerHost" : "192.168.1.2", "mqttBrokerPort" : 1883, - "mqttRootTopic" : "wirelos/led" + "mqttRootTopic" : "wirelos/illucat" } \ No newline at end of file diff --git a/data/www/favicon-32x32.png b/data/www/favicon-32x32.png new file mode 100644 index 0000000000000000000000000000000000000000..0e5d4f68d380cf5eec8d24882e448b6911afadb4 GIT binary patch literal 3155 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 CU9*h< literal 0 HcmV?d00001 diff --git a/data/www/gradients.json b/data/www/gradients.json index 2b8556f..d184f8d 100644 --- a/data/www/gradients.json +++ b/data/www/gradients.json @@ -3,10 +3,6 @@ "text": "None", "value": ["#000000", "#000000"] }, - { - "text": "Stadler", - "value": ["#0B3F75", "#0B3F75"] - }, { "text": "Blu", "value": ["#00416A", "#E4E5E6"] diff --git a/data/www/index.html b/data/www/index.html index c1ee593..34223a0 100644 --- a/data/www/index.html +++ b/data/www/index.html @@ -60,6 +60,12 @@ +
+ IlluChat +
+
+
+
Settings
diff --git a/data/www/script.js b/data/www/script.js index 15b4f74..152482a 100644 --- a/data/www/script.js +++ b/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) => ` +
  • + ${user} + ${msg} +
    • + ` + }; + } + + 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 = "
    \n
      \n
    • \n \n \n
      • \n
    \n
    \n
      \n
      \n
        \n
      • \n \n \n
        • \n
      \n \n
      " + /***/ }) /******/ ]); \ No newline at end of file diff --git a/data/www/styles.css b/data/www/styles.css index fb13cdf..dd04a28 100644 --- a/data/www/styles.css +++ b/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; +} diff --git a/platformio.ini b/platformio.ini index cb18957..5253e31 100644 --- a/platformio.ini +++ b/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 = +<*> - + platform = ${common.platform} diff --git a/src/var/illuchat/main.cpp b/src/var/illuchat/main.cpp index 3f8e40e..ecf0dcb 100644 --- a/src/var/illuchat/main.cpp +++ b/src/var/illuchat/main.cpp @@ -8,6 +8,7 @@ #include #include #include +#include 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()); }); } });