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 = "
"
+
/***/ })
/******/ ]);
\ 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());
});
}
});