## 2 Methodology and Site Description
### Waves Seafront Monitoring Architecture--Overview and Functionalities  
Waves Seafront Monitoring is a cross-platform mobile application that allows users to access and interactively view the current sea level, discretized by coastal segments with respect to coastal height. As shown in Figure 8a, it comprises a cloud and client side. At the cloud side, the Google Firebase server component executes an evaluation algorithm based on data from the sensor it communicates with, serves as a server for these results and performs user authentication. Sensor data comprising air pressure, wind speed and direction are sent to The Things Network (TTN) cloud via the LoRaWAN communication channel, which is forwarded via MQTT protocol to the TTN microservice. Once the packet with sensor data arrives, the TTN microservice captures and stores the LoRaWAN uplink data into the database and forwards the data through the PMO algorithm to estimate sea level according to the data arriving from LoRaWAN sensors (wind speed and direction, barometric pressure and sea tide level). As can be seen, an alarm notification can be sent to the application if the sea level exceeds a predefined level. Figure 8: (**a**) High-level overview of the implementation of the solution, (**b**) Front-end interface of the mobile application. Figure 6: Architecture of LoRaWAN-enabled MeteoHelix and MeteoWind devices from Barani Design. Figure 7: Installation of MeteoHelix and MeteoWind IoT Pro devices. The front-end of the application is comprised of the following elements, as depicted in Figure 8b:  
1. Login interface (Figure 8b)--initial interface for users when opening the application: 1. Form--the user enters his login details (e-mail and password) and has the option of registration if he does not have an account by clicking on the appropriate link (Figure 8b, number 1), 2. Prominent logo--the project was realized within the Interreg PMO GATE collaboration (Figure 8b, number 2). 2. Registration Interface--the registration interface is analogous to the login interface, only it allows the user to create an account to access the application by entering login information. To simplify logging into the system, there is no special validation of user accounts, such as email confirmation. 3. Map interface (Figure 8b) --the central part of the application, which contains the following basic functionalities: 1. At the top is a drop-down menu where the user has a choice between three languages: Croatian, English and Italian. By clicking on an option, the interface text adjusts the interface language (Figure 8b, number 3). 2. Log out button from the application (Figure 8b, number 4). 3. Values read from the sensor are updated over time depending on how often the data from the TTN arrives. From top to bottom, sea level is the sum of altitudes caused by sea tide, wind speed and direction and barometric pressure (Figure 8b, number 5). The total amount is calculated based on the algorithm submitted by the Client. 4. Google maps with plotted polygons that correspond to discretized segments of the coast according to their heights (Figure 8b, number 6). The color of the zone corresponds to the early warning status: green--safe, i.e., the sea level is below the coast level; yellow--warning, i.e., the sea can exceed 20 cm above the height of the shore; orange--dangerous, i.e., the sea can rise up to 50 cm above the height of the shore; red--flooded, i.e., the sea exceeds 50 cm above the height of the coast. By clicking on an individual zone, the cards will position themselves next to the corresponding zone and the map will be centered on the selected zone. Based on the coastal height data, the monitoring area is divided into 10 zones. 5. Zone maps showing the names and photos of coastal zones. Here, the user can see exactly the height of this segment of the coast, the estimated sea level in relation to the zone and, consequently, the situation in that zone, which is coded in colors analogous to the zones on the map (Figure 8b, number 7).