Real-time monitoring system for weather and air pollutant measurement with HTML-based UI application

ABSTRACT


INTRODUCTION
Today, information system is very important to human life, such as to inform the weather [1], health [2]- [6], warning system, and more. In human daily activities are inseparable from the weather and air conditions in the place where they live and work. This of course will affect health conditions. Especially during the current COVID-19 (corona virus disease 2019) pandemic, environmental conditions are an important concern in maintaining a healthy body. Information about weather conditions can be of great use when considering activities outside the home or office. Besides, information about the levels of pollutant gases in the air is also very important to determine the potential for air pollution which greatly affects the health of the body.
Several studies have been conducted to measure and monitor weather conditions and gas levels in the air, such as the internet of things-based system conducted by Kodali et al. [7]. Weather stations with mobile applications have also been carried out by Munandar et al. [8]. Research on weather station design using a microcontroller board was carried out by Saini et al. [9] and Solano et al. [10], who also used a

PROCEDURE
This research consists of 3 parts, namely; field-deployed hardware, real-time databases, and web applications. The hardware consists of a power supply, sensors, and a microcontroller. Database using Google Firebase cloud server and web hosting using the GitHub platform. For web monitoring applications using the HTML platform. Figure 1 explains the design of the system which consists of; sensors, microcontroller, router, and modem are installed on the equipment in the field. They are supplied by a 9 V adapter. Measurement of weather parameters using an anemometer, wind vane, and rain gauge which is integrated with DHT 11 and BMP sensors in a shield module. This shield module sends data via serial communication to the microcontroller. The data that has been processed is then uploaded to the database server and stored on a micro SD card. From the user's side, a web-based application was created for monitoring all measured parameters. This application can be accessed at the address http://ftmm.unair.ac.id/airfeelproject. Data acquisition on this web application is carried out at a 2-minute interval.

Hardware design
The hardware installed in the field consists of a PCB assembled for the gas sensors, weather station shield, DC/DC step down converter, and the Nodemcu ESP32 development kit C as microcontroller board [29]- [34]. several researchers have also developed various automation systems using various microcontroller boards [35]- [42]. Figure 2 shows the connections between the components used in this field system. There are 4 sensors which have an analog signal output, namely MQ-8, MQ-131, MQ-135, and a UV sensor. The use of the ESP32 board is suitable because it has many pins that can be used as an analog to digital converter (ADC) input. Another gas sensor, the Parallax brand, has a digital signal output, namely CO and CO2. Their output pins are connected to the general digital pins on the ESP32. Then the MQ-4 sensor has a digital signal output that is sent via i2c communication on the SDA and SCL pins. Then the weather shield sends weather parameter data via serial communication on the TX and RX pins. This device also uses a 16x2 LCD as an indicator of SSID and IP on the Wi-fi network used. All components in this device are supplied by one 9 V adapter. The power supply is then separated into 2 DC/DC step-down converters for the right voltage specifications for the ESP32 board and sensors.

Real-time database
This study utilizes an open-source facility provided free by Google Firebase. Firebase gives the Real-time database, in Firebase the data is stored as JSON and synchronized continuously to each associated client this means that the client need not has to make a call to fetch data changes, Firebase takes the initiative and notifies the application every time the data is changed this means unless the data at server get changed no call or response will be done which leads to optimum utilization of bandwidth [43]. The feature used in this study is a real-time database. This feature is a cloud-hosted database. A series of datasets are put together in the process on the microcontroller and then sent to the database in the form of a string containing the value of each sensor parameter with a separate comma.

Web-based application
This application is used to observe changes in the value of all measured parameters. Created using HTML programming, there are a total of 13 actual parameters plus 2-time parameters, namely date and time. Especially for time parameters, data is retrieved from the NTP server. This data is taken every measurement made by the microcontroller. Thus, the measurement dataset will always correspond to the actual time in the field.

RESEARCH METHOD 3.1. Field station system
As mentioned in the previous section, all sensors, microcontrollers, and routers are placed in the field for the actual measurement. The placement is on the top of Nanizar Zaman Joenoes Building, Airlangga University, Surabaya, Indonesia. This building has coordinates -7.266329, 112.78436. Installation of the device is on the highest structure in the building which has an altitude of about 80 meters. All of the fieldsets shown in Figure 3 (a) are protected in an aluminum panel. This panel can protect electronic devices from heat and rain. As shown in Figure 3 (b), the anemometer used is a vertical wind turbine that has 3 spoon-shaped lattices to catch the wind. The vertical turbine type makes it capable of catching wind from all directions. A wind vane is used to measure the direction of wind arrival. This fin is used so that the wind vane can rotate in the direction of the wind. Rainfall measurements are made with a rain gauge. As an indicator of the sun's lighting conditions, the S12SD UV sensor is used.

Firmware design
This firmware is an embedded program that is made as to the operational core of the hardware station field. This program is made with the Arduino IDE. The program workflow embedded in the microcontroller is shown in Figure 4 This program begins with a declaration of all libraries and all variables. Then enter the main program in the infinite loop. In this main program, the process begins with reading all the gas sensors, followed by reading the weather data from the weather station shield. After this, the network is connected again to ensure that the equipment is still connected to the local network. Then the process of parsing all sensor data. All data is concatenated as a comma-separated string. This is done to simplify the data split process in the client application. The data that has been collected from the sensor is then formulated into an equation to produce the actual data unit reading then this dataset is saved to SD in .csv form. The next process is uploading data to a real-time database. If the connection is interrupted and the database responds to a failed upload, the system will reset. But if not, the system work will continue into the loop process. If the loop has occurred 10 times, the system will reset.  Figure 5 shows the UI display on a web page created for monitoring weather station devices. All measurement data for weather and air gas parameters are displayed in numerical form. This web application 1673 design is made attractive and informative, making it easier for users to observe weather conditions and air gas levels around the location of field hardware placement. Figure 5. UI real-time display on web browser

Data traffic
The field device will upload the dataset every 1 minute. The data is then stored in a real-time database. Uploaded data is always replaced with data afterward, so this database storage is not permanent, only temporary. In the web application, data requests are made in 2-minute intervals. Each time during this period, the application will request data access data to the real-time database to be displayed in text form on the database web page. Once this data is obtained by the client application, it is then processed and displayed on a web page.

Field system work
This system works well supported by a good internet connection. Internet connection is very dependent on the performance of the router and 4G modem to get a cellular signal in the field. The voltage supply for each sensor is provided separately in 2 DC/DC step-down converters. Overall, this field device requires an AC supply voltage of 220V and a current of around 0.08A, so the total power for operation of this device is around 17Watt AC.

Monitoring system work
A survey of the level of interest and informativeness of this monitoring web page has been conducted to assess the quality of the UI designed. The survey results showed that 100% of 32 correspondents stated that the web monitoring page design was interesting and informative.

Data analysis
The UI web application does the request and receives real-time data at a 2-minute interval. So normally, all data changes once every 2 minutes. This application requests data to the Firebase server at this interval. Data retrieval on-field device is correct in terms of time. However, data transmission and data reception are highly dependent on the quality of the network connection at the location. There may be network connection interruptions at certain times such as when it rains or the weather is not supportive. This is also influenced by the performance of the 4G modem and router used. This test was conducted from 10:00 a.m. on November 1, 2020, to 10:00 a.m. on November 2, 2020. Data is taken from SD Card storage. All data is stored in one .csv file. Figure 6 shows the other 4 weather parameters, including the UV index at the location, Figure 6(a) UV index, 6(b) air ambient temperature, 6(c) humidity, and 6(d) barometric pressure. Mostly it has more than 15 indexes, the change of ambient temperature at location over a day and night, actual humidity, and barometric pressure at the location which has about 90-meter height above the sea level. Figure 7 shows the wind distribution at the location. Most winds come from the North of the location with a 3.2 m/s speed on average.

CONCLUSION
The design of a weather station system and measurement of 6 kinds of pollutant gases contained in the air were successfully made to observe actual weather and air condition. The field test shows that all measured weather parameters, including wind direction and speed, rainfall, UV index, air temperature and humidity, and barometric pressure have accurate and reasonable measurement results. The measurement results show changes in the value of the parameters in 1 daily cycle. The value of gas parameters measured in 1 daily cycle also shows a reasonable result. The UI web application is very useful to give real-time information about all parameters every 2 minutes via public network and Firebase. Offline data storage on the SD card can be stored and can be accessed properly for users who want to get measurement history for a certain period. The future direction of improving this proposed study is developing the detection of the severe level of gases in the system and indicating the found level of gases that reach the critical level on the webbased application or smart devices.

BIOGRAPHIES OF AUTHORS
Prisma Megantoro is a lecturer in Electrical Engineering, School of Advanced Technology, and Multidiscipline, Universitas Airlangga since 2020. He received a bachelor's degree and master's degree from Universitas Gadjah Mada, Yogyakarta, Indonesia in 2014 and 2018. His current research is focused on solar photovoltaic technology, embedded system, and the internet of things.
Brahmantya Aji Pramudita is a lecturer in Electrical Engineering, School of Electrical Engineering, Telkom University since 2020. He received a bachelor's degree and master's degree from Universitas Gadjah Mada, Yogyakarta, Indonesia in 2015 and 2018. His research interest includes instrumentation, digital signal processing, and biomedical engineering.