Online vizualizace dat z building management systémů
Loading...
Date
2024-06-11
Authors
Journal Title
Journal ISSN
Volume Title
Publisher
Abstract
Tato diplomová práce se zabývá online vizualizací dat z building managment systémů. V úvodu práce je představen současný stav problematiky, včetně příkladů z praxe. Následně jsou analyzovány dostupné nástroje pro vývoj a tvorbu uživatelského rozhraní. V části o realizaci je nejprve nastíněna struktura řešení, která se skládá ze dvou částí: vizualizační aplikace a ukázkové aplikace reprezentující server budovy. Jako primární vývojový nástroj byl zvolen framework Next.js, který je postavený na popuární knihovně React. Hlavním stavebním kamenem vizuální části řešení je design systém Material Design, který je implementován pro React knihovnou Material UI. Obě aplikace jsou nasazené na platformě Vercel a jako databázi využívají MongoDB, která běží na cloudovém řešení MongoDB Atlas. Vizualizační aplikace umožňuje uživateli po přihlášení přidávat koncové body, které slouží jako zdroje dat. Uživatel dále může vytvářet dashboardy, které fungují jako místa, kam lze umístit grafy a tabulky a seskupit je do logických celků. V rámci dashboardu je možné vytvořené vizualizace přesouvat a upravovat jejich velikost podle potřeby. Je také možné měnit zobrazovaný časový interval. Uživatel má k dispozici sloupcový graf, spojnicový graf, tabulku a interaktivní kombinaci tabulky s grafem. V části týkající se ukázkové aplikace pro budovy je definováno rozhraní API, které umožňuje komunikaci s hlavní aplikací. Tato ukázková aplikace zahrnuje funkce pro generování testovacích dat a sběr reálných dat. Sbírána jsou data o proudu a napětí z chytré zásuvky a také aktuální teplota v Praze. Obě aplikace byly otestovány. Byla ověřena funkčnost hlavní aplikace v různých prohlížečích a na obrazovkách s různou velikostí. Výkonnost aplikace společně s dalšími parametry byla ověřena nástrojem Lighthouse. Aplikace splňuje standardy firmy Google pro výkonnou a přístupnou webovou aplikaci.
This master's thesis deals with the online visualization of data from building management systems. The introduction presents the current state, including real world examples. Following that, the analysis explores the available tools for development and the creation of user interfaces. In the implementation section, the solution structure is outlined, consisting of two parts: a visualization application and example application representing the building server. The Next.js framework, which is built on the popular React library, was chosen as the primary development tool. The main building block of the visual part of the solution is Material Design, implemented for React with the Material UI library. Both applications are deployed on the Vercel platform and use MongoDB as the database, running on the MongoDB Atlas cloud solution. The visualization application allows users to add endpoints after logging in, which serve as data sources. Users can also create dashboards, which function as places to place graphs and tables and group them into logical units. Within the dashboard, created visualizations can be moved and resized as needed. It is also possible to change the displayed time interval. The user has access to a bar chart, a line chart, a table, and an interactive combination of a table with a graph. In the section about the example building application, an API interface is defined, which allows communication with the main application. This example application includes functions for generating test data and collecting real data. Information on the current flow and voltage from a smart socket is being collected, alongside the present temperature in Prague. Both applications have been tested. The functionality of the main application has been verified in various browsers and on screens of different sizes. The application's performance, along with other parameters, was verified by the Lighthouse tool. The application meets Google's standards for a performant and accessible web application.
This master's thesis deals with the online visualization of data from building management systems. The introduction presents the current state, including real world examples. Following that, the analysis explores the available tools for development and the creation of user interfaces. In the implementation section, the solution structure is outlined, consisting of two parts: a visualization application and example application representing the building server. The Next.js framework, which is built on the popular React library, was chosen as the primary development tool. The main building block of the visual part of the solution is Material Design, implemented for React with the Material UI library. Both applications are deployed on the Vercel platform and use MongoDB as the database, running on the MongoDB Atlas cloud solution. The visualization application allows users to add endpoints after logging in, which serve as data sources. Users can also create dashboards, which function as places to place graphs and tables and group them into logical units. Within the dashboard, created visualizations can be moved and resized as needed. It is also possible to change the displayed time interval. The user has access to a bar chart, a line chart, a table, and an interactive combination of a table with a graph. In the section about the example building application, an API interface is defined, which allows communication with the main application. This example application includes functions for generating test data and collecting real data. Information on the current flow and voltage from a smart socket is being collected, alongside the present temperature in Prague. Both applications have been tested. The functionality of the main application has been verified in various browsers and on screens of different sizes. The application's performance, along with other parameters, was verified by the Lighthouse tool. The application meets Google's standards for a performant and accessible web application.
Description
Subject(s)
Building management systémy, Online vizualizace dat, React, Next.js, Material Design