PMD WiFi + Websockets, Webpage & Dashboard

🔘The 'PMD-Serial-UART', and 'PMD-Display' versions of our 'Particle Matter Detector' ( "PMD" ) were described in previous posts on 📅08.04.24, 16.06.24 & 01.01.25. A 🛜 'WiFi' version has now been added to the product range, which features an embedded 'Websockets Server' serving a webpage; ( enter websockets into the blog search bar to see examples of websockets servers & protocol ). Depending on the installed firmware the PMD can be configured as a Station on an existing 🛜WiFi network ( with or without a config web-portal ), or as a stand-alone Soft Access Point.

PMD - WiFi version: Note (L) air-intake & (R) micro-usb socket  

The webpage, ( designed using HTML, CSS, W3.CSS & JavaScript ), displays all the measurements made by the PMD's internal PMS5003 particle detector, ( particle density ug/m3, & particle number per deci-litre ppdl ), and additionally the 'Air Quality Index - AQI', and 'Air Quality Level - AQL', which are separately calculated from the concentration of 2.5 micron particles. All results are updated in real-time and displayed in tabular form on the webpage every second. There is also a bar meter showing the 🛜WiFi signal level, 🕓time/date stamp, and bar-chart 📊showing the recent history of the PM2.5 measurements. Tapping the 'show/hide levels' button opens a pop-up showing the AQL categories - 'Good, Moderate, Poor, Unhealthy, Very Unhealthy, Hazardous & Extreme '.

Webpage: particle-matter-detector-v3.html

The webpage in the image above was being displayed by a browser on a laptop, having navigated to IP:192.168.1.54. 

A dashboard for the PMD, ( designed with Node-Red ), is shown below. Not all the measurements have had a widget assigned in this example, which is simply for demonstration purposes. 🔲

PMD dashboard - reduced set of measurements displayed

Node-Red Dashboard for the PWM

🔘The "Node-Red " browser based visual programming environment has been used several times before. ( Use the search box to find out more about it and our previous related projects ). This time its dashboard feature is being used again in order to display in real-time the measurements being made by the "Plant Water Monitor - PWM" ( refer to last post 📅05.05.25).

A 'flow' was built-up by interconnecting nodes selected from the palette ( left sidebar ). The input to the flow is of course the measurements being sent by the PWM  'websockets' server. Fortunately the palette includes the node ( 'websocket in' ) to handle this ( highlighted in the image below ) ! 

PWM flow - nodes linking the websockets input to dashboard widgets

The entire websockets data payload is converted to JSON* string format, ( "{"name":"value" }" pairs ) and then output to the debug sidebar on the right. Basically, the other nodes separate out specific measurements from the string, ( battery voltage, battery charge state, time-stamp, moisture value, moisture level & version information ), which are then sent to the relevant widgets on the custom dashboard for viewing.

PWM dashboard displaying real-time data

Another flow & dashboard was also created consisting of just the battery voltage charge/discharge chart 📉widget and left running for 22 hours for the purpose of establishing the discharge characteristic of the 3.7V 1000mAh rechargeable Lithium-Ion-Polymer battery which powers the PWM.

3.7V 1000mAh Li-Po battery discharge characteristic

The value displayed on the primary dashboard for the 'percentage charge remaining' is based on the profile of that chart.🔲

* JSON = Java Script Object Notation.

Solarometer 🔆

🔘The Ultra Violet Radiation Meter 𐆁- UVRM, (📅 see 23-3-2023), has been improved with some new features and functionality, and also given a new name -  "Solarometer".

There is a new version of the BluetoothⓇ mobile 📱App, now called "Solar_Meter", ( as not only the UV index is being displayed ), having more on-screen notifications e.g., 'About' screen, as well as the new signal strength indicator and a different appearance.

Solar_Meter App user interface

The Wifi firmware has also been upgraded. The Solarometer hosts a webserver with a basic embedded web 🕸 page, ( written in html, css & JavaScript ), and automatically configures itself as a WiFi soft access point, ( IP 192.168.4.1, SSID "SpacerLabs WiFi Sensors" ). This was originally developed for the UVRM in 📅 January 2021 as a prototype only. At that time "http" server-client communication protocol was adopted, which required a page refresh to initiate an http request to get a new UV measurement value. The Solarometer, however, uses "Asynchronous JavaScript & XML" ( 'AJAX' ) protocol for near real-time updating of the measured 📏light intensities on the webpage opened in the client's browser.

Webpage displayed on a phone's browser

Alternatively, the new SpacerLabs 'VISUVIR_Viewer' WiFi App can be used to get and display the sun-light ☼ intensities , but still employing the original http protocol.

VISUVIR_Viewer App user interface

The 🔗  Node-Red 🟥visual programming tool contains an 'http request' node. A 'flow' 🔀was created to read data from 192.168.4.1 and update the readings 📈 on a dashboard.

SpacerLabs Node-Red dashboard for the Solarometer

Orange, blue, grey, yellow, white and translucent have been added to the choice of colours 🌈for the 3-D printed enclosure.

The Solarometer is intended for hand-held outdoor ⛅use; wireless version in range of client devices. It is powered by an internal 1000mAh 3.7V Li-Po rechargeable 🔋battery.

Looking ahead 📅,  the Solarometer, and/or new WiFi projects, will make use of websockets servers and protocol for even faster operation.

꩜ 

Note:  css = cascading style sheets.

Node-Red dashboard for the PMS5003

🔘The Node-Red 🟥browser based visual programming tool was first used at SpacerLabs in 📆March 2021 and then several times since then, usually to trigger actions and ⏰alerts, e.g., send an email 📧, when a sensor measurement 📏exceeds a threshold. If the measurement itself were needed it could be found under the debug tab in the sidebar on the right of the workspace ( see image below ). But 🔗 Node-Red also provides a 'dashboard' option for better visualisation of the measurement 📏data. 

A Node-Red 'flow' 〰, ( similar to the one from 📅29 February for the AQM ), was designed, but instead using measurements from the PMS5003 particulate matter sensor⛬ ( see 🗓 8 April & 16 June ). However, only the PM0.3 particles🏁 per deci-litre ( ppdl ) measurement has been extracted for this demonstration exercise.

Node-Red workspace, (L) node palette, flow, (R) debug sidebar

The node 🎨palette has been scrolled down to show all those relevant to the dashboard design. Each node represents a different widget either for displaying the sensor measurement 📏or for user input. Five have been selected and connected into the flow 🔀 as shown above. After deploying the flow, the dashboard can be opened in another browser tab by appending /ui to the address, ( see image below, click to enlarge ).

Node-Red dashboard

The widgets have been arranged vertically; starting from the top: text widget, gauge widget, compass 🧭widget, & chart 📈widget. The fifth widget is  a pop-up notification which only appears when a new measurement is received.🌀

Part of dashboard enlarged to show notification pop-up

PM2.5 data from AQM now on the cloud

🔘Particulate Matter ㏘, PM2.5, data can now be uploaded 🖧 to the Ubidots cloud  ☁ from the Air Quality Monitor ( AQM ); see 15.03.2023. The Ubidots Ů platform provides visualisation / analysis of data from IoT sensors, also generating events, alerts, actions etc if required. We are already using this platform in conjunction with the Greenhouse Gas Monitoring system ( see 28.07.2022 ) and a soil moisture meter. On this occasion, with the AQM,  Node-Red is being used for alerts⏰.Two new widgets to display the PM2.5 concentration value have been added to an existing SpacerLabs Ubidots dashboard. The colours used for the air-quality levels ( good, OK, poor ) on the gauge widget match those used on the coloured LED indicator on the front of the AQM. 

Part of the dashboard showing the new widgets for PM2.5

Using the Node-Red 🟥 application, function 'nodes' are linked by connecting inputs to outputs and on-line services to create a 'flow' to perform task(s) using a browser based workspace. We have used it previously with the UVRM ( see 23.03.2023 ) and a soil moisture meter. The AQM flow ( image below ) starts by subscribing to the AQM PM2.5 data on Ubidots cloud using MQTT ( blue node ) and ends by triggering an email 📧 to be sent when the PM2.5 level exceeds 85 ug/m3; classified as level 'high' and air 🜁 quality 'poor'.

Node-Red 'flow' to trigger an email warning of poor air quality

It can be seen under the 'Debug' tab that an email 📧is indeed sent when PM2.5 >85; otherwise only the value ( if changed ) is reported. The email topic reads "SpacerLabs AQM - PM2.5 Alert " and the message reads "The SpacerLabs AQM has measured a PM2.5 level >85 (High) Air-Quality category - Poor. (Timestamp)". Even though the AQM may not be visible, an immediate audible notification is given by a smart phone when the email is received. 🔲

PM2.5 = Particulate Matter size 2.5 micron

MQTT = Message Queued Telemetry Transport

IoT = Internet of Things