Vesivoimalaitoksen lämpötila-antureiden visualisointi web-selaimessa

Abstract

Tämän opinnäytetyön tavoitteena oli kehittää web-selaimessa toimiva sovellus, jossa esitetään vesivoimalaitoksen anturikaapeleiden tuottamia mittaustuloksia reaaliajassa. Vesivoimalaitoksen padon vallin läheisyydessä sijaitsee erilaisia anturikaapeleita, jotka ottavat lämpötilanäytteitä vallista. Suunnitelmana oli luoda vesivoimalaitoksen lähiympäristöstä 3D-mallinnus, jossa näkyvät vallin läheisyydessä olevat anturikaapelit ja niiden ilmoittamat lämpötilalukemat. Sovellukseen oli myös kaavailtu graafisen esityksen lisäämistä, jossa esitettäisiin aikaisemmin mitattuja lämpötila-arvoja diagrammeissa. Sovelluksen tarkoitus on tehostaa padon vallin olosuhdevalvontaa analyyttisin sekä visuaalisin keinoin.

Sovellus toteutettiin JavaScript-pohjaisella Babylon.js-nimisellä 3D-pelimoottorilla. Babylon.js-pelimoottori mahdollisti interaktiivisen 3D-maailman luomisen web-selaimen näkymään. Vesivoimalaitoksen lähiympäristöä esittävät 3D-mallit luotiin Blender-mallinnusohjelmalla. Luodut 3D-mallit ladattiin web-selaimeen esitettäväksi Babylon.js:llä. Babylon.js:stä löytyi paljon muutakin kriittistä toiminnallisuutta sovelluksen toteuttamisen kannalta. Babylon.js:stä luotiin paikallinen asennus, ja sitä ajettiin Webpackin DevServer-palvelinohjelmistolla. Sovelluksen käyttöliittymän ulkoasu toteutettiin HTML5/CSS3-merkintäkielillä. Sovelluksen ohjelmalogiikka puolestaan toteutettiin JavaScript-ohjelmointikielellä.

Lopputuloksena syntyi web-sovellus, jossa vesivoimalaitoksen anturikaapeleiden tuottamia lämpötilatietoja voitiin esittää web-selaimen ruudulla 3D-maailman näkymässä ja sekä graafisessa esityksessä. Sovelluksessa esitetään reaaliajassa päivittyvää lämpötilatietoa anturikaapeleita kuvastavissa 3D-malleissa. Lisäksi lämpötilatietoa on mahdollista hakea loppukäyttäjän antamalta päivämääräväliltä ja esittää se erityyppisissä diagrammeissa. Sovellukseen luotiin monipuolisia tapoja tiedon esittämiselle. Sovellus täytti kaikki sille asetetut kriittiset tavoitteet. Joitakin suunniteltuja lisätoimintoja jäi tekemättä aikarajoitteiden takia.

The objective of this thesis was to develop a web application focused primarily on the visualization of sensor data on a web browser in realtime. The sensor data is generated by a few sets of sensor cables of different types. These sensor cables are located in close proximity of a dam wall near a hydroelectric power plant. The initial plan consisted of creating a simple 3D model of the power plant's nearby environment. An end user would have the ability to examine sensor readings generated by the sensors in the 3D model. Furthermore, the plan also included implementing a graphical representation of the sensor data. The purpose of this application is to provide a way to monitor the structural integrity of the dam wall and to detect possible leakages through data visualization.

The first step in the development process was to create a fully interactive 3D world view that would be displayed on a web page. This was achieved by using a 3D game engine called Babylon.js. Babylon.js had several important features that made the development of this application possible. One of the key features included a way to import 3D models to the 3D world view that were made with a modeling software called Blender. Furthermore, Babylon.js engine was installed locally on a development server provided by Webpack library. The application's user interface was made in HTML5 and CSS3. Additionally, the program logic used in the application was programmed in JavaScript.

The end result of this project is an application, in which an end user is able to observe sensor data originating from the power plant in realtime. The application offers various ways of data visualization. For example, sensor readings are displayed in message boxes when an end user performs certain actions in the 3D world view. Sensor data is also represented in different types of graphs and charts. In conclusion, the application contains all critical functionality that was planned beforehand. Overall, the development process was successful.