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 & JavaScript ), exposes 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 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-v1.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 using Node-Red, is shown below. Not all the measurements have been used in this example, which is simply for demonstration purposes.

Node-Red PMD dashboard - reduced set of measurements displayed

The latest issue of the PMD User Guide can be downloaded 🔗 here. 🔲

* A Bluetooth version with Android App is also available.

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.

Plant Water Monitor - PWM

🔘The "Plant Water Monitor" ( PWM ) project has been completed. It's function is to measure the 💧moisture in the soil where a 🪴plant is growing. The PWM consists of a capacitive soil moisture sensor, µ-controller, rechargeable battery, 🔋battery charger, waterproof enclosure, 🛜Wifi and webserver serving a webpage. In use, the protruding moisture sensor is pushed into the soil near the 🪴plant's roots.

Plant Water Monitor

The ﹌moisture measurement is sent by the webserver using 🛜Wifi and 'Websockets' to the PWM webpage opened in a browser, running on a client computer💻 or phone🖁. Websockets and the preliminary webpage designs were the subjects of the last post, on 📅20 April 2025. 

Two PWM firmware versions have been made; each having a different 🛜Wifi configuration. Depending on the location of the 🪴plant of interest, either the version of the PWM configured as a 🛜Wifi 'Station (STA)' on an existing network or the version configured as a stand-alone 'Soft Access Point (SAP)' would be chosen. The former requires an existing 🛜Wifi network to be in range of both the PWM and phone etc; the latter does not have that restriction but does require the client device to be connected to SSID "SpacerLabs-Wifi-Sensors".

A different webpage has been designed for each version of the PWM, using HTML, CSS & JavaScript. The webpage ( IP:192.168.1.63 ) for the version supporting 'STA' is almost identical to V4 shown in the previous post, with the addition of the 🔋battery charge status.

Notice the 'favicon' in the browser page tab (click to enlarge)

The webpage for the PWM version supporting 'SAP' is shown in the image below, and is being displayed on a phone's browser, after connecting to 🛜Wifi network 'SpacerLabs-Wifi-Sensors' & then navigating to IP:192.168.4.1.

Page: plant-water-monitor-v2.html

Features supported include Wifi signal monitoring, 🕓time-stamp, battery🔋 charge state, soil moisture, serial number, chip model & revision, pop-ups for 💦moisture level categories and ⛿flagging recommended action.

The latest issue of the 'User Guide' can be downloaded 🔗 here 🔘

Websockets Servers & Websockets Protocol

🔳A couple of our recent projects involving sensors & WiFi, ( 'Solarometer' 📅13.10.2024 & 'Greenhouse Gas Sensors'  📅01.12.2024 ), have an integrated webserver hosting a webpage so that the sensor readings can be displayed on a client device, e.g., phone 🖁or computer💻, running a browser. Either HTTP or AJAX protocol was employed for the server-client connection.

A🪴'Plant Water Monitor'  is a new project which will use a Websockets Server & Protocol instead. Websockets was briefly mentioned in the 'Solarometer' post. To recap, unlike HTTP or AJAX, Websockets provides real-time server/client communication over a continuously open full-duplex bidirectional connection 🔁, requiring no page refreshes or other requests; just the measurement data ( not the entire page ), are sent automatically, with minimal latency.

Testing Websockets has been successful. The Websockets server, ( programmed on the µ-controller in the 🪴Plant Water Monitor ), is assigned IP address 192.168.1.51 when it establishes a connection with our Wifi network router access point. Navigating to that address with a browser on a 🖁phone or 💻computer displays the page to see the data being updated.

Several variations of a webpage were designed, ( again using HTML, CSS & JavaScript ). One or more will eventually be selected as a basis for the design for the 🪴Plant Water Monitor. Each has the filename soil-moisture-sensor-vn.html. Websockets protocol is used to automatically update ( ⏱every hour or every minute ) the moisture﹌ readings, time stamp of the last reading, and Wifi signal level, in real time.⌚

V1 viewed on a phone

V1 is the basic page design having the essential features. Wifi signal level ( at the moisture sensors location ), moisture ﹌readings at two locations and time-stamp are updated automatically without any intervention required from the user.

V2 + WiFi signal level meter

V2 as V1, with the addition of an analogue bar-meter showing the WiFi signal level changing to assist in choosing a location for the remote sensor. 

V3 + popup notification

V3 as V1, with the addition of an alarm ⏰ condition pop-up advising that action should be taken on the basis of the reported moisture measurement. 🥀🏜

V4 + button & background image

V4 as V1, with the addition of a 'button' which when tapped will show or hide the moisture level descriptions, and with the addition of a background image of the 🪴'Plant Water Monitor' itself.

Note that the ⌂"home" icon in V2, V3 & V4 is continuously spinning.

🔲

Web Page Viewer

🔘Our new html page 📄viewer software called "WebPageViewer" was developed by us using the 'Visual Basic' programming language ( part of the MicroSoftⓇ Visual Studio Community 2022 edition development suite ), and has just been finished. Although it is basically a browser, its main purpose is to facilitate the design of html pages 🗐 for our µ-controller projects which have embedded web-servers,  such as the Green-House Gas Sensors 🏭( 01.12.24 )  and Solarometer 🌞( 13.10.24 ), and not for online browsing.

Application window after navigating to this blog

The main window has an uncluttered appearance, free from sidebars and bookmarks, to maximise space; menu bar and tool strip comprising address box and buttons 🔲at the top, page display area underneath and a progress bar in the status strip at the bottom. The width of the page display area defaults to be the same as the horizontal screen resolution ( 1080 px ) of the smart-phone 📱that will be used to display the page, making it quick and easy to see the effect of design changes when arranging the elements on a page in order to suit the phone screen size.  

'About' window displayed after clicking the menu-bar item

As is typical, version information 🛈, copyright © notice and a brief description of the application are contained in the 'About' window, which is a common feature of all our in-house 🏠software running on the WindowsⓇ OS. 🔳

 

Stand for the PMD - display version

🔘 Until now the atmospheric "Particulate Matter Detector ( PMD )" project based on a 🪴Plantower 🗼PMS5003 particle concentration sensor and having a ⎚ display had been assembled on a solder-less 🍞 breadboard, ( see 📅16 June 2024 ), while awaiting further development.

A 'U ' cross-section 🖼frame, which functions as a stand, has been designed and produced on a 3-D printer 🖶 so that the PMD ( comprising PMS5003, colour display & µ-controller ) is now self-contained and can be easily moved to different locations.

Front view

Rear view

Being open construction the micro-usb connector for power and serial data, ( requiring the 'PMD_Serial'  software ), reset & boot buttons and SD card slot on the rear of the display are easily accessible. An SD card could perhaps be used to load an image when the PMD starts, or for data storage.

The stand is very stable. The addition of rubber feet provides extra non-slip adhesion on smooth surfaces, as well as protection from scratches. Overall dimensions are 122 x 70 x 64mm.

PMS5003 sensor is the blue module with fan air inlet.

Click on this 🔗link to view the frame in 3D and rotate it !