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 ). Which one will ultimately be chosen has still to be decided. 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

IoT Cloud Platforms☁

🔘Several previous posts have mentioned the 🔗Ubidots and 🔗Thingspeak IoT cloud ☁ platforms, conveniently accessed from a web-browser, that have been used with some of our sensor based projects to capture, visualise and analyse 💹 the sensor measurements. Two others, 'Arduino IoT Cloud' and 'Thingsboard', have been found and tried out in conjunction with the PMS5003 Particle Concentration Sensor; ( see 8 April & 16 June ). Setting up was quick and straightforward, following the typical process for such platforms of creating an IoT 'thing', assigning 'variables', associating a 'device', programming & connecting the device, & designing a 'dashboard'; our device is a "D1 Mini Esp32" micro-controller board.

The 🔗Arduino IoT Cloud is an entirely cloud based platform, including an editor for writing and compiling the project firmware, which can then be downloaded from the cloud ( depending on the subscription plan ) to the device, from anywhere in the world 🌐. Nothing is required to be installed locally on a pc 💻or connected to it other than a browser and internet connection. The dashboard shown in the image below is constrained by a maximum of  5 cloud variables under the no-time-limit free 🆓 plan. In general, the widgets to populate the dashboard tend to be the standard, classic ones.

Example of Arduino IoT Cloud dashboard - desktop version

An App "Arduino IoT Remote" on a mobile device 📱provides a mobile friendly version of the dashboard.

An account was opened for the 30 day free trial period of the 🔗Thingsboard cloud 'Maker' version. There is a large selection of attractive widgets for the dashboard, sorted by various categories. For example, under the "Air 🜁 Quality"  category there are numerous widget designs specifically for the measurement data relevant to air-quality. Some were chosen for the dashboard shown in the image below

Example of a Thingsboard dashboard

🌀IoT = Internet of Things.      

PMS5003, colour display, BluetoothⓇ & cloud

🔘The project involving the 🪴Plantower 🗼PMS5003 digital Particle Concentration Sensor, described in the previous post on 8 April, has progressed further with the addition of embedded firmware using an  ESP32 microcontroller development board, a colour display, and BluetoothⓇ or Wi-Fi options.

The display is a colour TFT touch sensitive display with resolution 240 x 320 pixels, ( see image below ), last used on 5 January 2023.

Version with display using prototyping board 

Particle number per 0.1 litre ( ppdl ) of air and density ( ug/m^3 ) for various particle diameters Ø in microns are displayed. The "Air Quality Index  - AQI" ( 0 to 500 ) is derived from the PM2.5 density figure.  The "Quality" label which is assigned ( GOOD, MODERATE etc ) depends on the AQI. This is the method in common use internationally to quantify air pollution 😷 due to particulates. The touch-sensitive 'buttons' near the lower edge of the display give full control of the various modes of operation of the PMS5003. Some modes are initiated by sending instructions to the PMS5003 by serial data, and some are hardwired.

The ESP32 has a built-in BluetoothⓇ Low Energy, ( BLE ), module. The particulate matter data and mode functions as described above are available using the BluetoothⓇ version and the SpacerLabs custom Android App, "SpacerLabs PMD_Viewer vn.nn", on a compatible mobile device 📱having BluetoothⓇ enabled.

App user interface opened

Ubidots is a cloud hosted repository for measurement data. It was featured in this blog before, on 29 February,  then being used with the AQM device. The ESP32 also has a built-in Wi-Fi module. So a version of the firmware including Wi-Fi functionality was written, enabling the PMS5003 measurement data to be uploaded to the cloud.

PMS5003 Ubidots dashboard - ( click to enlarge )

An 'Air Quality' device, i.e., the Plantower PMS5003 Particulate Matter Sensor', has been added to our Ubidots dashboard together with several new widgets for displaying the particle measurements. A similar exercise was carried out with Thingspeak cloud; see also 18 February 2024. Search for channels by user ID spacerlabs to see the result.

The serial communications interface ( see 8 April 2024 ) is still retained, and is a common feature of all versions. 

PMS5003 Digital Particle Concentration Sensor

🔘The SpacerLabs domestic 'Air Quality Monitor' ( AQM ) 🏭 with multi-sensor support posted on 15.03.2023, ( updated 29.02.2024 ) is based on the Cubic PM1006 infra-red LED particle sensor module.  Another type of  particle sensor is the 🪴 Plantower 🗼PMS5003.  It uses a laser source, is capable of detecting particles down to ⌀0.3 microns in size, and measures some additional  values compared to the PM1006 as well as being approximately twice as accurate. One has been obtained as an individual item, ( not part of an AQM product, filtration or ventilation equipment etc ), and is being tried out.

The measurements made by the PMS5003 are sent periodically ⏲ as 32 bytes of data over a UART serial interface at a data rate of 9600 bits/sec. A UART to USB protocol converter dongle provides a virtual COM port on a computer allowing the data to be displayed on a pc if there is a usb cable connecting 🔗both and a serial terminal program is running. 

Left - PMS5003, Right - UART to USB dongle

We wrote a serial terminal application specifically for the PMS5003, called 'PMS5003_Serial' , in order to demonstrate the operation of the PMS5003, ( image below ).

PMS5003_Serial software receiving & displaying data

The received raw serial data are displayed in hexadecimal and decimal, then parsed in software to extract the bytes of interest containing data relating to particulate matter🦠  mass concentration ( ug/m^3 ) and particles per deci-litre, ppdl, ( 0.1 litre ) of air 🜁 , sorted according to size in microns. The AQI ( range 0-500 ) and air quality level are also given.

This project might be developed further by providing embedded control, a touch sensitive colour display, Bluetooth, App for a mobile device and a 3-D printed case.

 

UART = Universal Asynchronous Receiver Transmitter.

AQI = Air Quality Index