add websockets, basic UI

TODO: - UI - BME680 state

add websockets, basic UI
8a1c2d9c · Jan Grewe · 875b88c1 · 8a1c2d9c · 8a1c2d9c · 8a1c2d9c
Commit 8a1c2d9c authored Nov 15, 2021 by Jan Grewe
--- a/data/airqmon.css
+++ b/data/airqmon.css
+h1 {
+    font-weight: bolder;
+    letter-spacing: 3px;
+}
+
+#wsSpinner {
+  position: fixed;
+  bottom: 15px;
+  left: 15px;
+  color: #000000;
+}
--- a/data/airqmon.js
+++ b/data/airqmon.js
+var websock;
+
+$(document).ready(function(event) {
+  startWebsocket();
+});
+
+function startWebsocket() {
+    websock = new WebSocket('ws://' + window.location.hostname + ':81/');
+    websock.onopen = function(evt) {
+        console.log('websock open');
+        $('#wsSpinner').invisible();
+    };
+    websock.onclose = function(evt) {
+        console.log('websock close');
+        websock = null;
+        $('#wsSpinner').visible();
+        setTimeout(startWebsocket, 1000);
+    };
+    websock.onerror = function(evt) {
+        console.log(evt);
+    };
+    websock.onmessage = function(evt) {
+        data = JSON.parse(evt.data);
+        handleWebsocketMessage(data);
+    };
+}
+
+function handleWebsocketMessage(data) {
+    console.log(data);
+    $('#data').text(JSON.stringify(data, null, 2));
+}
+
+jQuery.fn.visible = function() {
+    return this.css('visibility', 'visible');
+};
+
+jQuery.fn.invisible = function() {
+    return this.css('visibility', 'hidden');
+};
\ No newline at end of file
--- a/data/bootstrap.min.css
+++ b/data/bootstrap.min.css
--- a/data/bootstrap.min.css.gz
+++ b/data/bootstrap.min.css.gz
--- a/data/bootstrap.min.js
+++ b/data/bootstrap.min.js
--- a/data/bootstrap.min.js.gz
+++ b/data/bootstrap.min.js.gz
--- a/data/index.html
+++ b/data/index.html
-<!DOCTYPE html>
-<html>
+<!doctype html>
+<html lang="en">
 <head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <meta name="mobile-web-app-capable" content="yes">
+  <meta name="apple-mobile-web-app-capable" content="yes">
+  <!-- icons/theme -->
+  <link rel="apple-touch-icon-precomposed" href="img/apple-touch-icon.png"/>
  <link rel="apple-touch-icon" sizes="180x180" href="img/apple-touch-icon.png">
  <link rel="icon" type="image/png" sizes="32x32" href="img/favicon-32x32.png">
  <link rel="icon" type="image/png" sizes="16x16" href="img/favicon-16x16.png">
  <link rel="manifest" href="/site.webmanifest">
+  <meta name="msapplication-config" content="/browserconfig.xml">
  <meta name="msapplication-TileColor" content="#da532c">
  <meta name="theme-color" content="#ffffff">
+  <!-- end icons/theme -->
+  <link rel="stylesheet" href="bootstrap.min.css">
+  <link rel="stylesheet" href="airqmon.css">
  <title>Air Quality Monitor</title>
 </head>
 <body>
-dis gon b gud.
+  
+<main class="container flex-column justify-content-center align-items-center">
+
+    <div class="mb-3 text-center my-4">
+        <h1>Air Quality Monitor</h1>
+    </div>
+
+    <div class="mb-4">
+      <div class="row">
+        
+        <div class="col-lg-10 col-12 my-4">
+          <div id="data"><div>
+        </div>
+
+    </div> <!-- row -->
+    
+    <div class="spinner-border" role="status" id="wsSpinner">
+        <span class="visually-hidden">Loading...</span>
+    </div>
+
+</main><!-- /.container -->
+
+<script src="jquery-3.5.1.min.js"></script>
+<script src="bootstrap.min.js"></script>
+<script src="airqmon.js"></script>
 </body>
 </html>
\ No newline at end of file
-
--- a/data/jquery-3.5.1.min.js
+++ b/data/jquery-3.5.1.min.js
--- a/data/jquery-3.5.1.min.js.gz
+++ b/data/jquery-3.5.1.min.js.gz
--- a/platformio.ini
+++ b/platformio.ini
@@ -22,11 +22,13 @@ lib_deps =
    ESP8266WebServer
    ESP8266mDNS
    ArduinoOTA
+    links2004/WebSockets @ ^2.3.6
    plerup/EspSoftwareSerial @ ^6.15.1
    avaldebe/PMSerial @ ^1.1.1
    boschsensortec/BSEC Software Library @ ^1.6.1480
    knolleary/PubSubClient @ ^2.8
    spacehuhn/SimpleMap @ ^1.0.0
+    bblanchon/ArduinoJson @ ^6.17.2

 [env:d1_mini_ota]
 extends = env:d1_mini

--- a/src/main.cpp
+++ b/src/main.cpp
@@ -7,11 +7,13 @@
 #include <ArduinoOTA.h>
 #include <ESP8266mDNS.h>
 #include <ESP8266WebServer.h>
+#include <WebSocketsServer.h>
 #include <Wire.h>
 #include <PMserial.h>
 #include <bsec.h>
 #include <PubSubClient.h>
 #include <SimpleMap.h>
+#include <ArduinoJson.h>

 #define PMS_TX D3
 #define PMS_RX D4
@@ -20,6 +22,7 @@ SoftwareSerial swSerial;
 WiFiClient wifiClient;
 MDNSResponder mdns;
 ESP8266WebServer server(80);
+WebSocketsServer webSocket = WebSocketsServer(81);
 SerialPM pms(PMS5003, PMS_RX, PMS_TX);
 Bsec iaqSensor;
 PubSubClient mqttClient(wifiClient);
@@ -110,6 +113,53 @@ bool handleFileRead(String path)
  return false; // If the file doesn't exist, return false
 }

+void sendWebsocketData(uint8_t num)
+{
+  DynamicJsonDocument json(1024);
+  for (int i = 0; i < sensorData->size(); i++)
+  {
+    json[sensorData->getKey(i)] = sensorData->getData(i);
+  }
+  const size_t strsize = measureJson(json) + 1;
+  char MSG[strsize];
+  serializeJson(json, MSG, strsize);
+  webSocket.broadcastTXT(MSG, strsize - 1);
+}
+
+void webSocketEvent(uint8_t num, WStype_t type, uint8_t *payload, size_t length)
+{
+  Serial.printf("webSocketEvent(%d, %d, ...)\r\n", num, type);
+  switch (type)
+  {
+  case WStype_DISCONNECTED:
+    Serial.printf("[%u] Disconnected!\r\n", num);
+    break;
+  case WStype_CONNECTED:
+  {
+    IPAddress ip = webSocket.remoteIP(num);
+    Serial.printf("[%u] Connected from %d.%d.%d.%d url: %s\r\n", num, ip[0], ip[1], ip[2], ip[3], payload);
+    sendWebsocketData(num);
+  }
+  break;
+  case WStype_TEXT:
+    Serial.printf("[%u] get Text: %s\r\n", num, payload);
+    break;
+  case WStype_BIN:
+    Serial.printf("[%u] get binary length: %u\r\n", num, length);
+    hexdump(payload, length);
+    break;
+  case WStype_PING:
+    Serial.printf("[%u] ping received\r\n", num);
+    break;
+  case WStype_PONG:
+    Serial.printf("[%u] pong received\r\n", num);
+    break;
+  default:
+    Serial.printf("Invalid WStype [%d]\r\n", type);
+    break;
+  }
+}
+
 void setupWebserver()
 {
  LittleFS.begin();
@@ -118,6 +168,9 @@ void setupWebserver()
      server.send(404, "text/plain", "404: Not Found"); // otherwise, respond with a 404 (Not Found) error
  });
  server.begin();
+
+  webSocket.begin();
+  webSocket.onEvent(webSocketEvent);
 }

 void messageReceived(String &topic, String &payload)
@@ -391,7 +444,7 @@ void readSensorData()
  readBme();
 }

-void sendSensorData()
+void sendMqttSensorData()
 {
  String metricValues;
  for (int i = 0; i < sensorData->size(); i++)
@@ -417,6 +470,7 @@ void logSensorData()
 void loop()
 {
  ArduinoOTA.handle();
+  webSocket.loop();
  server.handleClient();
  MDNS.update();

@@ -424,6 +478,7 @@ void loop()
  if (millis() - readTimer >= 1000)
  {
    readSensorData();
+    sendWebsocketData(0);
    readTimer = millis();
  }

@@ -442,7 +497,7 @@ void loop()
      connectMQTT();
    }

-    sendSensorData();
+    sendMqttSensorData();
    logSensorData();
    sendTimer = millis();
  }