How to install Watmonitor?
Watmonitor is a universal web interface for a water level meter that allows you to collect data from a sensor node that sends a differential or total water level at regular intervals, depending on the sensor used (ultrasonic, radar, pressure, capacitive, optical, doppler, inductive). Each sensor has its advantages and disadvantages in terms of use for this application with regard to the type of well, the measured distance.
The web interface can certainly also be used to visualize the height of bulk materials, such as coal, seed, sand, cement, gravel, sugar, flour. and many others, which can also be used for more extensive automation based on this data. Thanks to the REST API on the server side, the sensor node can send data in various ways, directly: An HTTPS POST request with data is made directly from the device, using any transmission technology, such as Ethernet, PHY Ethernet, WiFi, GSM, LTE, NB-IoT and other.
The second way may be to distribute data through an intermediary, which is required due to the transmission technology, which itself is not connected to the Internet. For the ESP32 microcontroller, the most interesting way may be to use the ESP-NOW protocol from its manufacturer - Espressif Systems, while devices that communicate with it (also supported by ESP8266) can send data in the mesh to the first root device, which can forward data (Initiators) to the Internet if it has connectivity (Responder).
However, several IoT technologies also communicate through an intermediary, especially LoRaWAN, Sigfox IoT. These services most often have a portal directly through which a Callback is set, which is directly launched when data is received from the controller. These networks are characterized by the fact that small volumes of data are transmitted through them and therefore they must be encoded and then decoded in order to be able to work with them and insert them into the callback. In addition to LoRaWAN, there is also LoRa for Point-to-Point communication, which can also work between your own devices, with one of them having connectivity and based on the received data it just forwards it to the Internet.
The request in this case does not have a complex structure and contains only two parameters (URL-encoded data) that define the water level and also an authorization token that authorizes the device to write the data to the database. Therefore, today we will take a closer look at how to install the web interface of the Watmonitor system. The instructions will be written in such a way that even laymen can understand it.
The basic structure of the project includes a PHP application, an extension for the Instascan QR scanner, language dictionaries, icons linked from a local folder, and also an sql folder where the exported file of the SQL table structure is stored. The index.php file will open automatically when calling a specific folder in which the project will be on a local server or web server with hosting. The application can therefore only work within a folder, or directly on the root page of the domain, as all paths are relative.
What will we need before installing the Watmonitor system?
Web hosting. We have a choice between local and external. You can set up local web hosting on your own computer or a server that you have at home connected to your LAN network. In order for the microcontroller to record data at any time, this server must be running and permanently powered.
External web hosting can be paid or free (free hosting) depending on the limitations they entail (free hosting will always have only a 3rd-order domain for free, if it provides it, because some free hostings are hosting that does not provide a domain). With paid hosting, you will not be limited in terms of the complexity of this application, 99% of hostings will provide you with sufficient performance and space even on the lowest package. Among the usable free hostings we can include, for example, Endora.
Make sure that the hosting you have chosen also provides a MySQL database, if not, you will need to have the database set up elsewhere, where the server will connect, which can increase the responsiveness of the entire Watmonitor web portal.
If you decide to host locally yourself, you need to install a web server and a MySQL database. You can achieve this in one step by installing the WAMP server, which installs a web server (Apache) and a MySQL database, including the phpMyAdmin tool for its management. XAMPP is also an interesting solution, which provides a MariaDB database, but in terms of use it is identical to a MySQL database and the entire PHP application will work without changes with this database.
If we have mastered these steps, we can proceed to the actual deployment of the Watmonitor environment and import of the SQL database file.
The model situation is valid for both local and external web hosting. Often, the MySQL database is managed via phpMyAdmin. This application is launched via a browser and provides the ability to log in to the MySQL database administration. In the case of local hosting, the root login and password are usually empty. However, if you have external web hosting, the login and password will definitely be different, since the entire system is shared between hosting users and everyone in the system sees only their own. The phpMyAdmin tool is also in Slovak and you can select it in the login menu.
When you log in to the database management environment, you need to create an empty database. This is done by clicking on the + New icon in the left menu. You can name the database anything you want, you will use its name later. After creating the database, click on it, again via the menu on the left and click on the Import icon. From the Watmonitor project archive, select the export.sql file, which is in the /sql/ folder, and click on Import. The table named studna2 will be automatically imported into the database you created and create its structure. This completes the database section and we need data on the database name, login name and password, which will need to be set in the project file.
Uploading the project to hosting:
Depending on the hosting, you can upload the Watmonitor web application in several ways, directly via a browser or via an FTP service, but this depends on the circumstances. By default, the project is uploaded to the www folder, where you can create a separate folder where you copy the project, or directly to the www (so-called root) folder. You will receive FTP data from your hosting provider, where the domain will certainly be defined, which you will need to enter. For FTP, Total Commander is enough, or more experienced users prefer, for example, FileZilla or WinSCP.
In the next step, we will need to set up the connect.php file. This file contains several configurable parameters. There are variables for the username and password for HTTP Basic Auth, as well as a token for the device that will send data to the Watmonitor web interface. There is also data for accessing the MySQL database that we created in the previous step.
For HTTP Basic Auth, choose a name and password that suits you. However, it is important to emphasize that if your website runs on the HTTP protocol, which is not encrypted, anyone on the network can see this data in plain text. Do not use any data for this name and password that you use anywhere else. With the HTTPS protocol, the data is still in plain text, but is transmitted over an encrypted channel between you and the server. HTTP Basic Auth is used in the Watmonitor project to authorize the user to delete records from the database directly in the web application, or to make the source code for the microcontroller available, or to perform settings (well data, well name).
The microcontroller token is a string of characters that the microcontroller uses to authorize itself with the server and thus allows the server to write data to the MySQL database. You can use a mix of numbers and letters. The connection to the MySQL database consists of a host, username, password, and database name. The host is usually localhost if the database runs on the same computer as the webserver. Otherwise, you must enter the domain specified by the hosting provider. The name, password and database are the same as the one we used with phpMyAdmin. You can also extend these parameters by a fifth parameter, the port, if a specific one is used, which you specify as another parameter of the mysqli_connect() function.
If you have set up the application correctly, you will see the following output on the website. You open the website by entering the web address in the browser. The specific folder on the domain depends on where and how you copied it:
If you only see a text output of scattered text in which you can see e.g. some functions, the server is probably unable to execute PHP code for you. In that case, check if your web server service (Apache, HTTPD or NGINX) is working, or restart it.
You may also see other types of errors, if the database is not reachable, or the correct database data is not entered, or the database does not exist, you will see output like this:
First data to the system:
If we want to send data to the Watmonitor web application, we have several options. We can make our own sensor node, or write the data via an external tool in a similar way as if it were sent by a microcontroller. Watmonitor itself has a Program subpage. The system automatically creates the source code based on the location of your website (be careful not to use localhost instead of the IP address if you are using local hosting, because you will not be able to connect from another device this way, since localhost is only within the given device, i.e. the sensor node has its own localhost...).
Watmonitor automatically calculates the path to the .php file, which is responsible for writing data, and predefine the correct path in the microcontroller source code. The source code is always in two versions for the ESP32 microcontroller, one code for connecting via WiFi, the other via PHY Ethernet (RMII). It also takes into account the transmission protocol, depending on whether you have the page open via HTTP or HTTPS protocol. The alternative HTTP port 8080 does not apply, only 80. Such source code is ready to be uploaded to the microcontroller, while in the case of the WiFi version you only need to adjust the name and password of the WiFi network to which you will connect it. With the HTTPS protocol, it is necessary to emphasize that the Root CA certificate used for the HTTPS connection is hard-coded and is ISRG Root X1 for Let's Encrypt certificates. So if you use a different Root CA for your domain, the connection will not work and the sensor node will not send anything.
The source code for ESP32 is compatible with the NewPingESP8266 library and Arduino Core 3.0.X, which is already based on ESP-IDF v5.1.X. The source code for WiFi is also compatible with other ESP32 modules, from WROOM, through S and C versions. This source code is linked to ultrasonic sensors RCW, US-XXX, IOE-SR0X, SR0X, HC-SR0X, HY-SRF0X, DYP-MEXXX, JST-SR0X and Parallax PING)))™, etc. More advanced implementations are on the project's Github, but you have to set the path to your web application there manually. These implementations also include Deep Sleep (ULP) mode of operation, or support for OTA updates. Several implementations with FreeRTOS are also available for ESP32, including in the ESP-IDF (Espressif IoT Development Framework) framework. A standard sensor node sends data once every 5 minutes, or on the server side it is possible to send once every 200 seconds.
If the data is written to the system, you will see it directly in the main overview in real time. This way you will immediately know whether the data from the microcontroller (sensor IoT node) is being sent to the system or not. In this case, an example of sending a water level difference of 30 cm, i.e. the actual level is 370 cm, since the depth of the well is 400 cm. The diameter of the well is 80 cm and so the volume of this water column is almost 1860 liters. The depth, name and diameter of the well are configurable in the system.
If the sensor node does not send any more data in 5 minutes, the Connected status will change to Disconnected. The data will remain as is. You will also see the time of the last entry, when the last data was actually entered into Watmonitor. Sometimes it is necessary to set the time in the database, some have the time set to UTC and the time of entry in the database may not match your local time. However, the problem with free hosting is that you cannot change this.
The second method, suitable for testing the system, is to use an API testing tool. My very favorite is Postman, where we will demonstrate this solution. The tool offers the option of setting requests, including the data that is sent and the like. This makes it possible to make a full-fledged request using the appropriate HTTP method. In our case, we will use POST and data encoded as URL-Encoded, client-side header application/x-www-form-urlencoded. This will guarantee that the data arrives in a format that the web server understands.
I have prepared a Collection for Postman, which you can easily import and use. All requests are there in duplicate because one interface (my test one) is used primarily for the HTTP protocol and the other for the HTTPS protocol. You can select it by clicking on the relevant POST request. It contains two parameters in the message body: a value that indicates the numerical difference in water level and a token (it must match the one you changed in connect.php). Edit as needed and click Send.
If the request goes through, you will see an OK mark in the server's response. If you send too often, you will see a message with the number of seconds you still have to wait before a new request for writing data. You may also receive an HTTP 404 error code if you have set the path incorrectly. The server will also notify you if the client is not authorized with the correct token and will not save its data. Data is written by calling the data.php file. The file does not support any method other than POST.
Collection can be found at:
In this way, it is possible to test whether the webserver receives data even without a sensor node. The web interface is universal and will accept connections from any sensor node regardless of the level sensor used, control hardware, or transmission technology.
The Watmonitor system is not strictly for monitoring the water level in a well. It will certainly also find use in monitoring water in tanks, cesspools, perhaps in applications with monitoring fuels or other liquids. I could imagine it also for monitoring the height of products (bulk materials) such as seeds in silos, coal in tanks, and also for monitoring the height of rivers and lakes, if they do not have a very fast or turbulent flow. Ultrasonic measurement is also not suitable for wells that have a gradient inflow, which constantly causes a vortex on the surface. The surface should be calm for good reflection of the ultrasonic beam. Some people also solve this with a floating lid to increase the reliability of the reflection.
Watmonitor allows you to change the logo that is on the main menu bar. By navigating to the location menu.php, you can find an image on the first line of the HTML source code that is rendered by default in the web application with the Your-IoT logo. By changing the hyperlink, you can link to any image, including those with a transparent background (.png). The default size is 96x38 px.
Try Watmonitor. You can use predefined source codes that include Arduino, ESP32, ESP8266, or create your own sensor node that will send this data to a webserver with your own firmware, respecting at least a 200-second window between writes. You can also use any sensor, including industrial ones, also with support for interesting pre-industrial protocols and output forms, e.g. 4-20 mA in a current loop, analog linear output 0-10V, Modbus RTU / TCP protocols, HART, CAN (CANopen), Profibus / Profinet, IO-Link, RS-232, RS-485 buses and others.
Watmonitor test interface you can test for free with your hardware:
More about Watmonitor:
https://your-iot.github.io/Watmonitor/
If you would like to support the project by purchasing the web interface:
Your-IoT (project author) portfolio: https://your-iot.github.io/portfolio.html