Water Level Monitoring IoT Dashoard in PHP (Watmonitor)

Watmonitor is a versatile, self-hosted web app designed for real-time water level monitoring. Using IoT sensors based on ESP32 and ultrasonic distance sensors, it tracks water levels in various environments such as wells, tanks, lakes, and more. Watmonitor makes monitoring and analyzing water data simple and efficient. Ideal for both personal and industrial use. Provides easy access to real-time and historical data of water level and water volume.

Perfect for makers and engineers looking to implement water level solutions! Standardly it is recording one measurement per 5 minutes, as its also friendly to low power systems.Web interface is universal and can be used with any sensor technology, including advanced industrial solutions. Can be used for height measurement of bulk materials, grain in silos. Sensor node can send the data in difference mode (principle as ultrasonic, measuring distance from the top to the water level), of real mode, (where distance is calculated or measured from the bottom of the well).

Based on procedural PHP, HTML5 and Bootstrap Bare template, SQL database. Provides lightweight web interface that is fully responsive with smartphones (Android, iOS), computers, laptops, tables, even Smart TVs.Web interface is divided into more subpages, where each of them has its own functionality and is accessable via menu:

1. Overview - showing the last known data that are stored in SQL database with real-time update
2. History - provides all-time history of measurements with option to delete exact measurement (HTTP Auth required to auhorize user for the action)
3. Records - tracks the maximum and minimum value of the water level within day, week, month
4. Graphs - water level visualisation during the time in Line charts for last 2 hours, 24 hours, 7 days, 30 days and 365 days
5. Stats - provides the exact number of how many measurements are recorded in the SQL database
6. Program - pre-generates the source code for ESP32 microcontroller based on domain where webapp is running including dynamic route calculation to the required.php file that is responsible for data writing into database. There is example for WiFi and for PHY Ethernet LAN8720 connection
7. Wiring - provides wiring diagram for the supported microcontrollers
8. Options - there is option to set well parameters such as: diameter, name, depth. Possible to change language of the user interface
9. QR scanner - HTML5 based QR scanner to obtain the last data

Let's describe each of the subpages more deeply:

Overview:Webpage provides actual data of water level and water volume with indicator of the sensor node status, if it has sent the data in last 5 minutes. There is visible also last timestamp of data received and the expected timestamp of the new data. QR code can be scanned via QR scanner to obtain these data by scanning.

Values of water level and volume has also arrow indicator that is showing if values are rising / decreasing or are equal with previous measurement. On the top of the output we can also see name of the waterwell which can be set by the user

History:Page serves SQL database records obtained by the newest measurement. There you can see the timestamps of the measurements recorded, their unique identifier (id) and also button using which user can delete the record after authorization via HTTP Auth.

Records:This subpage is visualisating multiple Gauge graphs (JustGage library with Raphael). There are visible the highest value and the lowest value recorded within a day, week or month. Also there is last measurement value provided even with percentage of occupancy.

These Gauges have set in source code color palette from the red to the green. Dynamically based on value in range it is changing the color. Also when page is opened, these gauges have functionality (dynamic effect), when the bar starts from the 0 and then it moves to the water level value.

Graphs:Line Graphs based on ApexCharts library. These graphs can visualise water level in different time ranges. These graphs empower user to zoom the the any graph part. That part can be closely analyzed, even ranges of the graph (min max value) is dynamically set during zooming operation.

Also graph can be resetted using home button to the original range.User can export the whole graph or zoomed subgraph in various formats for further analysis or visualisation in 3rd party software (Excel, Google Sheets, Word, Powerpoint, MATLAB). Export options are to:.svg (vector graphics),.png (pixel graphics) and.csv. CSV file contains timestamp and water level value.

Program:Program subpage is interesting. It dynamically creates the source code for ESP32 in Arduino Core. That implementation is using also FreeRTOS and Queue for inter-task communication. One source code is for WiFi connection, other one for PHY Ethernet connection (RMII interface).

Both implementations are made for DHCP clients on LAN network.Generator is able to add webserver domain name and also the exact trace to the target PHP file into that source code. There is also dynamically put token, which device needs to send at every request to authorize itself.

Even source code is generated based on protocol you are using on your browser, so HTTP or HTTPS connection.System is not generating Root CA certificate that is required for connection, so there is required from your side to use your own if you are using Watmonitor on your domain.

Btw. there are even more source codes on the project's Github. There are example implementations for Arduino, ESP8266 and also ESP32. For these WiFi microcontrollers there are ULP, OTA modes, WiFi setting via WiFiManager and so on.

For Arduino, there is Wiznet Ethernet support (W5100 up to W5500 series), but nowadays it is so obsolete hardware, use ESP32 with PHY Ethernet instead, better stability, encryption support, dynamical reconnect if LAN cable unplugged etc., some custom boards have also PoE support.For ESP32, there is also ESP-IDF framework implementation under its version 5.2.

Options:Subpage offers option to set dimensions of the waterwell which includes diameter in centimeters and depth also in centimeters. Depth is used for calculation of the real water level, if sensor node is sending differential water level.

So for instance if there is depth set to 400 cm and ESP32 will record 50 cm, there is made calculation on the server side when data arrives to the server and the final reading put in SQL database is 350 cm.Diameter of the waterwell is used to calculate water volume.

Volume is not saved in database, its value si still on-site calculated. User can set a name for its waterwell and also there is option to choose one of 6 languages for water level interface.Standardly there is english, but user can choose german, french, spanish, russian, slovak language.

QR scanner:Subpage based on HTML5 QR scanner Instascan. It empowers user to use their smartphone to scan the QR code from the website or from the sensor node itself to get the last known data.Can be good for multisensor installations, where via the app operator can also identify the exact sensor based on its name when scanned.

There were added multiple functionalities as camera switcihing option for phones with multiple cameras or also option to turn on the phone's flashlight, if the currently set camera supports it via WebRTC.Data of the sensor (waterwell name) are parsed from the web interface of Watmonitor.

There is a subpage json_output.php that is providing the last data informations which are parsed and written in the QR scanner app. The same file can be used for 3rd party services for periodical data scraping (Grafana, Loxone, Domoticz, Thingsboard, Hassio).

You can test Watmonitor web interface yourself with your hardware! You can access its interface via:https://hladinomer.eu/?lang=enIf you would like to know more informations about this water level interface, you can visit its official page: https://your-iot.github.io/Watmonitor/

For extended examples for Arduino, ESP32 and ESP8266 please visit their Github:

https://github.com/martinius96/hladinomer-studna-scripty/tree/master/examples/Hladinomer/HTTPS

There is also HTTP test web interface for Watmonitor but it is not recomeend, but it is the only interface that supports Arduino with Ethernet that does not support HTTPS. For new designs I suggest HTTPS only on interface above: https://arduino.clanweb.eu/studna_s_prekladom/?lang=en

Also wiring diagram, but standardly should be well known just based on pin configuration in ESP32 code (Note: ESP32 with PHY Ethernet has different pins compared to all other examples for this microcontroller):