To implement a responsive web application that enables graphic representations of data obtained from readings of water level and surface flow velocity in the Sava river. The hydrological data collected from the readings are being used to protect Zagreb and downstream regions from the danger of flooding in the future.

Solution

As part of a new project for measuring the flow of the Sava in Zagreb, Perpetuum has developed and implemented a web application for the reception and processing of data from Geolux's system. The Geolux company implemented an innovative hydrological station at the railway bridge in Zagreb as part of a pilot project for contactless river flow monitoring. The system includes a water-level meter and five strategically placed radar sensors that measure the river’s surface flow velocity.

During the pilot phase, Perpetuum’s web application has provided a graphic display with different viewing options, filtering, and data from the readings of water level, surface velocity, and other collected information. Besides the measured data, it also shows data about the location of the readings. The application is designed so that, in the future, data from other monitoring stations can also be collected, processed, and displayed on it. The app was constructed on the Microsoft Azure platform, which allows for scalability and flexibility of use.

Technical description

Our responsive web application focuses on the flexible display of graphs. Given that this is a pilot project for which it was necessary to quickly produce a functional demo version, for back-end development we used Lumen Micro-Framework in PHP. With this approach, we had faster development (because the framework is based on the Laravel framework, which we know well) but the app also worked faster because of the specific characteristics of the framework, which is geared towards the development of microservices and APIs.

When selecting the graphic display library, we decided upon eCharts. This is an open-source library that offers great flexibility and display quality on desktop computers, but also the most important aspect of the project—viewing and interactive possibilities on mobile devices. Although this is a Chinese library, created by a developer team at Baidu, its documentation is extremely well written in English.