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.

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 !

DdsModTerm software for AD9850/51 modules

🔘In the post 📮dated 📅27 July 2023, about how a µ-controller and a smart phone🖁 App could be used to upload 🠝 configuration settings to  modules based on AD9850 and AD9851 DDS chips in order to generate a frequency, it was briefly mentioned that  a USB dongle and pc interface software was another method in use here. As that software has recently been updated it would now be a good time to give a description of that method also.

The SpacerLabs dedicated pc 💻software called "DdsModTerm" is the user interface and was first released in about 2015. Since then there have been 15 revisions; the latest appearing this month.

'DdsModTerm' user interface

The clock 🕰frequency and the required output frequency and phase are entered, either manually or by recall from memory. By clicking 'Confirm', the software generates the 5 configuration bytes required from the user input data. In the example in the image above the output frequency is 137700Hz & bytes hexadecimal 00C88AC604. The pc 💻is connected to the serial data interface of the DDS module board via a COM port and the SpacerLabs USB-SPI dongle. Clicking 'Update DDS' then uploads the bytes using  SPI protocol to the registers of the DDS chip and the programmed frequency  ∿  is then present on the output. 

(L) USB-SPI dongle (R) AD9851 DDS chip evaluation board on adaptor

Other features of the software include up/down step 🪜tuning, slider tuning control, eeprom view, 3 memories for storing frequency, saving custom clock🕓, alias frequencies calculated, and general purpose output ( GPO ) toggling on/off.

The dongle and software are available from us. Post a comment, contact us by email or use the form below to receive more information. Note that both AD9850 & AD9851 DDS devices are supported.🔘

( Click on images to enlarge detail. )

SPI = Serial Peripheral Interface, 3-wire bus.

AD9850, AD9851 : 🔗Analog Devices Inc. parts, 32-bit CMOS Direct Digital Synthesiser (DDS) chips.

Webserver for the Greenhouse Gas Sensors

🔘 Carbon Dioxide, CO2, and Methane, CH4, are present in the atmosphere in part due to burning fossil fuels 🏭, and farming 🐂( particularly livestock ). They are potent 'greenhouse' gases as they have a significant impact on global warming, which drives climate change.

A new WiFi version of the Greenhouse Gas Monitoring System, ( 📅28.07.2022, 5.01.2023 & 18.02.2024 ) has been completed, incorporating a web 🕸 server having an embedded webpage. The firmware and webpage were developed along very similar lines to that used recently with the "Solarometer" 🔅( 📅13.10.2024 ); the latter using html and CSS *.

However, as the outdoor location of the gas sensors, ( type MQ-4 for CH4, type MQ-135 for CO2 ), will always be within the coverage area of an existing WiFi network access point, ( AP ), the system has been configured as a station ( STA ) on that network, and assigned the IP address 192.168.1.49.

Webpage opened in a smart phone's browser

The concentration ( parts per million, ppm ) measurements📏 are updated in real-time 🕔, and can be quickly viewed on a mobile device's🖁 browser, saving time over logging in to cloud ☁ based repositories, if historical data are not required.

Another way is to use the new SpacerLabs custom App "Greenhouse_Gas_Viewer v1.nn", for Android devices.

Displaying ppm measurements using the App

In this case the webpage itself ( /root directory ) is not displayed. Only the sub-directories ( /CH4ppm & /CO2ppm ), which are the place-holders for the CH4 and CO2 concentration data, are read by the App and the data held therein displayed.🔘

* CSS = Cascading Style Sheets - used to add style attributes to an html document.

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