Watmonitor - Level Monitoring Dashboard
by martinius96 in Design > Websites
180 Views, 1 Favorites, 0 Comments
Watmonitor - Level Monitoring Dashboard
Watmonitor is a lightweight web dashboard originally designed to visualize water levels using graphs and real-time outputs. Over time, it turned out to be just as useful for monitoring any liquid, or bulk material levels. This opened up applications across many industries — from agriculture (grain) to energy (coal, pellets, biomass) and even manufacturing (granulates). Standardly Watmonitor works as a central interface that communicates using API with sensor node (DIY hardware / industrial hardware), that is performing measurements.
The design of a webpage is very simple and clear. It is translated to English, Russian, German, Spanish, French and Slovak language. The main advantage of the system later became the possibility of integration into other systems, including industrial ones. This paved the way for the creation of automation with the Watmonitor system, which was originally designed only for visualization.
Watmonitor can be tested for free with open-source hardware (Arduino, ESP8266, ESP32): https://your-iot.github.io/Watmonitor/
Supplies
- Webserver
- Database
- Sensor node (DIY Arduino / ESP32 or industrial)
To be able to run Watmonitor on your side, you will need to have Webserver. You can host it locally on your computer, or Rpi board. There is also possible to host it via webhosting. Watmonitor is compatible with PHP at least 7.0 up to the latest version of PHP 8.4 (valid in end of September 2025). I had good experience with Apache (HTTD), but also NGINX.
As database you can use MySQL or MariaDB database, both are SQL database type. Standardly database is administrated using Adminer or phpMyAdmin tool.
Watmonitor comes with wide database of source codes for ESP32, ESP8266 or Arduino including WiFi, Ethernet, PHY Ethernet or also LoRa, LoRaWAN, NB-IoT connectivity. There are multiple examples for ultrasonic distance sensors (HC-SR04, JSN-SR04T...), or also for ToF laser sensors (VL53L1XC - TOF400, VL53L0X - TOF200C). There are standard implementations and then more advanced with ULP or OTA modes present.
For ESP32, there are implementations for ESP-IDF 5.X framework with FreeRTOS operating system and inter-task communication aswell. These source codes are available for fast development and prototyping compatible with Watmonitor interface. Also you can build your own sensor node based on industrial hardware STM32 with Murata / Inventek WiFi modules, also it is possible to integrate 3rd party industrial hardware to Watmonitor, if it supports HTTP(S) POST request. As web interface is universal, you can use any sensor technology you like.
Project installation guide: https://arduino-blog.webnode.page/l/how-to-install-watmonitor/
What Watmonitor Offers?
Watmonitor has multiple separate pages, which are made for:
- Overview - real-time level data visualisation with volume and connectivity status
- History - historical measurements log with option to delete exact measurement
- Records - max and min level values recorded per day, week, month
- Graphs - historical measurements with option to download whole / exact part of the graph in .csv format for further analysis
- Program - Source code generator for ESP32 microntroller (based on project depth, etc it will calculate working source code)
- Wiring - schematics for ESP32, ESP8266, Arduino compatible for firmware
- Options - settings for waterwell dimensions, name, language setting
- QR - QR scanner feature that allows you to get the latest data based on scanning QR code
- AR - Augemented reality dashboard which is triggered when QR code is scanned. It will visualise dashboard in augmented reality on your camera
- API1 - obtaining the latest data from database, used for QR / AR standardly
- API2 - obtaining all data from database / filtered if used GET parameters from - to (possible to use all from, or all to)
- data.php - API for data from sensor node, MCU needs to authenticate itself using token to write data into database
Oficially Watmonitor can handle one sensor node. If you want to use more instances of Watmonitor, it is possible to clone web interface to as many as you need. You will have separate dasboard, each for unique sensor node.
How to clone Watmonitor? - https://arduino-blog.webnode.page/l/watmonitor-project-cloning/
Integration to 3rd Party Software
The mentioned APIs (API1, API2) are endpoints, these provide data in JSON format. This standardized format makes third-party integration easier. Essentially, any software that supports JSON API calls and parsing can integrate Watmonitor seamlessly. Since Watmonitor is suitable for both households and industry, we can distinguish integration software from these two perspectives.
- Household usage - Domoticz, Loxone, openHAB, Grafana (InfluxDB), Home Assistant
- Industrial - SAP, Odoo, ERPNext, Power BI, Home Assistant, ThingsBoard, Node-RED, Tableau, AWS IoT, SCADA
Even if the target system is not 100% compatible with Watmonitor integration requirements, but contains an alternative method, it is possible to use the Node-RED tool as an intermediary, which can change the format of the target data for event-driven applications, or even the way it is sent to the server (UDP, TCP, MQTT...). Thanks to this, it is possible to achieve the desired integration into any system
It can also be used for automation or triggering Webhooks (Zapier, IFTTT, n8n, Microsoft Power Automate) and their actions, which can be useful for automating processes, notifications, and the like.
Watmonitor JSON endpoint integration (general): https://arduino-blog.webnode.page/l/watmonitor-json-endpoint-integration/
ThingsBoard Integration
Watmonitor can be integrated into ThingsBoard IoT platform. It is not a trivial job, as ThingsBoard is using Push model. That means, the platform can't get data directly from a source, but a source need to send data to the platform using via REST API (HTTP) or MQTT.
Due of that, it is possible to do a separate CURL request from Watmonitor that will send data to the ThingsBoard, but alternatively we can use its functionalities. It is possible to create custom widget, if we are interested for the latest data only. But in case we are looking for time-series data, it is good to use Rule Chain (works similar to Node-RED). It is able to create HTTP GET request each XY seconds, minutes based on generator node, which is creating a "tick" and that can run the whole flow.
Alternatively we can use also Node-RED that is able to push data into ThingsBoard via HTTP request, or using MQTT to its broker on 1883 or secured 8883 port. In that case and also in case of Rule Chain, values and variables are stored in telemetry of pre-created device. ThingsBoard allows you to do postprocessing with the variable within dashboard. Meaning, you can calculate actual water percentage present within a known waterwell depth, etc, even you have only value in cm of the current reading. Rule Chain within ThingsBoard allows you to do automation too, anything is possible to do, directly or via 3rd party webhook.
Watmonitor direct integration to ThingsBoard: https://arduino-blog.webnode.page/l/thingsboard-watmonitor-json-integration/
Watmonitor integration to ThingsBoard via Node-RED: https://arduino-blog.webnode.page/l/integrating-watmonitor-into-node-red-via-json-endpoint/
QR Scanner
HTML5 based webapp which is using Instascan tool for scanning nearby QR codes using phone's camera. Once the correct QR code is present, it will trigger HTML5 table that is printed on the screen with the latest data. It is connecting to the API1 endpoint, where it gets the latest data.
Great for big installations with many sensor nodes. By scanning QR code you will also get web interface's name of Watmonitor, which can be also used for sensor node name. The webapp is using WebRTC API for controlling flashlight of the phone, which is helpful for waterwells, tanks where is dark and QR code needs to be readable.
Video: https://www.youtube.com/watch?v=-A4HMGgGQTE
You can test QR scanner at: https://hladinomer.eu/QR/
You need to scan QR code from: https://hladinomer.eu/?lang=en
AR Dashboard
Orbital visualisation of AR within webapp. It is based on A-frame JS framework. It is using the same principle as QR scanner, the goal is to scan the exact QR code to trigger AR scene. Once AR scene trigerred, you will see dashboard present on your screen within real world that is visible via camera of your phone. As its orbital visualisation, you are able to move object with your finger around your axis. It can be extended for WebXR, which allows you to create an object within scene and it will be present on the original location only. That requires also more phone's functionalities, as it needs to measure nearby space, room.
Conclusion
Watmonitor is an interesting project that can be used not only for home and DIY projects, but also has the potential to be used in industry and the corporate segment. Although Watmonitor itself does not allow for automation, it is easy to achieve it using the Node-RED tool, webhooks.
Testing the project with your own hardware is free on Watmonitor's test interfaces. There are two interfaces in total, one for HTTP connectivity and the other for HTTPS connectivity.
How to install Watmonitor on your server? https://arduino-blog.webnode.page/l/how-to-install-watmonitor/
More about Watmonitor you can find at: https://your-iot.github.io/Watmonitor/
Watmonitor test web interface: https://hladinomer.eu/?lang=en