From 4c17ca783b0ce52f580cee6a1ca7112ac4cee162 Mon Sep 17 00:00:00 2001 From: jomar-honsi Date: Thu, 7 Nov 2024 12:18:54 +0100 Subject: [PATCH 1/3] Aligned connector section with the (unpublished) MQTT demo. --- .../dashboards/data/mqtt-connector/demo.js | 40 ++++++++++--------- 1 file changed, 22 insertions(+), 18 deletions(-) diff --git a/samples/dashboards/data/mqtt-connector/demo.js b/samples/dashboards/data/mqtt-connector/demo.js index dde29f58eac..7292105be6b 100644 --- a/samples/dashboards/data/mqtt-connector/demo.js +++ b/samples/dashboards/data/mqtt-connector/demo.js @@ -72,7 +72,7 @@ const dataGridOptions = { }, cells: { formatter: function () { - return Highcharts.dateFormat('%Y-%m-%d, %H:%M:%S', this.value); + return Highcharts.dateFormat('%Y-%m-%d, %H:%M:%S', this.value); } } }, { @@ -90,6 +90,7 @@ const dataGridOptions = { // Connector configuration const connConfig = { autoSubscribe: true, + maxRows: 10, columnNames: [ 'time', 'value' @@ -348,7 +349,7 @@ const connectorTable = {}; class MQTTConnector extends DataConnector { /** - * Constructs an instance of MQTTConnector. + * Creates an instance of the MQTTConnector, including the MQTT client. * */ constructor(options) { @@ -361,6 +362,7 @@ class MQTTConnector extends DataConnector { this.converter = new JSONConverter(mergedOptions); this.options = mergedOptions; + this.connected = false; // Connection status this.packetCount = 0; @@ -370,11 +372,21 @@ class MQTTConnector extends DataConnector { this.clientId = clientId; // Store connector instance (for use in callbacks from MQTT client) - const connector = this; - connectorTable[clientId] = connector; + connectorTable[clientId] = this; // Register events - connector.registerEvents(); + this.registerEvents(); + + const connector = this, + { + host, port + } = connector.options; + + + // Create MQTT client + this.mqtt = new MQTTClient(host, port, this.clientId); + this.mqtt.onConnectionLost = this.onConnectionLost; + this.mqtt.onMessageArrived = this.onMessageArrived; } /* * @@ -384,22 +396,14 @@ class MQTTConnector extends DataConnector { * */ /** - * Creates the MQTT client and initiates the connection - * if autoConnect is set to true. + * Initiates the connection if autoConnect is set to true and + * not already connected. * */ async load() { - const connector = this, - { - host, port, autoConnect - } = connector.options; - - // Start MQTT client - this.mqtt = new MQTTClient(host, port, this.clientId); - this.mqtt.onConnectionLost = this.onConnectionLost; - this.mqtt.onMessageArrived = this.onMessageArrived; + const connector = this; - if (autoConnect) { + if (connector.options.autoConnect && !connector.connected) { await this.connect(); } super.load(); @@ -582,7 +586,7 @@ class MQTTConnector extends DataConnector { rows.splice(0, nRowsParsed - maxRows); connTable.deleteRows(); } - connTable.setRows(rows, 0); + connTable.setRows(rows); } } connector.packetCount++; From 8fa34a0ba2174b760609aec499c4d3811ffda22c Mon Sep 17 00:00:00 2001 From: jomar-honsi Date: Thu, 7 Nov 2024 15:01:48 +0100 Subject: [PATCH 2/3] Added responsive layout + cosmetics. --- .../dashboards/data/mqtt-connector/demo.css | 43 +++++++++++++++++-- .../dashboards/data/mqtt-connector/demo.js | 2 +- 2 files changed, 40 insertions(+), 5 deletions(-) diff --git a/samples/dashboards/data/mqtt-connector/demo.css b/samples/dashboards/data/mqtt-connector/demo.css index effcf4c6471..8bfce6f8f0a 100644 --- a/samples/dashboards/data/mqtt-connector/demo.css +++ b/samples/dashboards/data/mqtt-connector/demo.css @@ -18,18 +18,18 @@ * * */ -.row { +.highcharts-dashboards-row { display: flex; flex-wrap: wrap; flex-direction: row; } -.cell { - flex: 1; +.highcharts-dashboards-cell { min-width: 20px; + flex: 1 1 50%; } -.cell > .highcharts-dashboards-component { +.highcharts-dashboards-cell > .highcharts-dashboards-component { position: relative; margin: 10px; padding: 10px; @@ -136,8 +136,43 @@ * * */ +div.container { + display: flex; + flex-direction: row; +} + div.description { padding: 0 20px; max-width: 100%; text-align: justify; } + +/* LARGE */ +@media (max-width: 1200px) { + #column-chart-1, + #data-grid-1, + #column-chart-2, + #data-grid-2 { + flex: 1 1 50%; + } +} + +/* MEDIUM */ +@media (max-width: 992px) { + #column-chart-1, + #data-grid-1, + #column-chart-2, + #data-grid-2 { + flex: 1 1 100%; + } +} + +/* SMALL */ +@media (max-width: 576px) { + #column-chart-1, + #data-grid-1, + #column-chart-2, + #data-grid-2 { + flex: 1 1 100%; + } +} diff --git a/samples/dashboards/data/mqtt-connector/demo.js b/samples/dashboards/data/mqtt-connector/demo.js index 7292105be6b..712bdce47a4 100644 --- a/samples/dashboards/data/mqtt-connector/demo.js +++ b/samples/dashboards/data/mqtt-connector/demo.js @@ -72,7 +72,7 @@ const dataGridOptions = { }, cells: { formatter: function () { - return Highcharts.dateFormat('%Y-%m-%d, %H:%M:%S', this.value); + return Highcharts.dateFormat('%H:%M:%S', this.value); } } }, { From 1d39c693b0cfcbc5c8d8ddcd535b1ba4912bac11 Mon Sep 17 00:00:00 2001 From: jomar-honsi Date: Thu, 7 Nov 2024 20:17:55 +0100 Subject: [PATCH 3/3] Cosmetics - dark mode. --- .../dashboards/data/mqtt-connector/demo.css | 43 +++++++++++-------- .../dashboards/data/mqtt-connector/demo.html | 2 +- 2 files changed, 26 insertions(+), 19 deletions(-) diff --git a/samples/dashboards/data/mqtt-connector/demo.css b/samples/dashboards/data/mqtt-connector/demo.css index 8bfce6f8f0a..574fa2fe160 100644 --- a/samples/dashboards/data/mqtt-connector/demo.css +++ b/samples/dashboards/data/mqtt-connector/demo.css @@ -14,7 +14,7 @@ /* * * - * Layout + * Dashboards/Datagrid specific * * */ @@ -31,15 +31,10 @@ .highcharts-dashboards-cell > .highcharts-dashboards-component { position: relative; - margin: 10px; - padding: 10px; + margin: 5px; + padding: 5px; } -/* * - * - * Dashboards/Datagrid specific - * - * */ .highcharts-dashboards-wrapper { padding: 10px; background-color: var(--highcharts-neutral-color-10); @@ -89,11 +84,7 @@ font-family: "Courier New", Courier, monospace; font-size: 0.9em; overflow: auto; - background-color: var(--highcharts-neutral-color-5); -} - -#log-content span.error { - color: #f00; + background-color: var(--highcharts-neutral-color-0); } /* * @@ -128,6 +119,7 @@ #app-control button { font-size: 1em; padding: 5px 10px; + cursor: pointer; } /* * @@ -136,15 +128,25 @@ * * */ -div.container { - display: flex; - flex-direction: row; +body { + background-color: var(--highcharts-neutral-color-10); } -div.description { - padding: 0 20px; +div#description { + background-color: var(--highcharts-neutral-color-5); + color: var(--text-color); + padding: 5px 10px; max-width: 100%; text-align: justify; + + & a { + color: var(--highcharts-highlight-color-100); + } + + pre.json { + padding: 5px; + color: var(--highcharts-highlight-color-80); + } } /* LARGE */ @@ -175,4 +177,9 @@ div.description { #data-grid-2 { flex: 1 1 100%; } + + #app-control #connect-status { + white-space: nowrap; + display: block; + } } diff --git a/samples/dashboards/data/mqtt-connector/demo.html b/samples/dashboards/data/mqtt-connector/demo.html index 9f29837ce04..4a5427087bb 100644 --- a/samples/dashboards/data/mqtt-connector/demo.html +++ b/samples/dashboards/data/mqtt-connector/demo.html @@ -24,7 +24,7 @@

MQTT log

-
+

This demo shows how to connect to an MQTT broker and subscribe to a topic. The data is then displayed in a Highcharts chart and a Dashboards datagrid. The demo also shows how to implement a Custom Connector in Javascript, in his case MQTT. The Custom