Engaging Building Automation Data Visualisation Using Building Information Modelling and Progressive Web Application

Abstract The integration of the building information modelling (BIM) and assets database has enabled a potential pathway for building stakeholders to add value to the building lifecycle management (BLM) processes. However, the obtaining, storing, processing, and distributing of data have not been ratified in a detailed and semantic manner in any official guideline. This paper suggests a framework for the efficient development of an interoperable visualisation of a building “digital twin” through an intuitive interface, to contribute to the idea above. The framework was applied in two case studies as examples, where rich visualisations of two buildings in the Kanta-Häme region of Finland were constructed using their architectural models and building indoor climate metrics. By constructing an engaging interface, relevant metrics and constant feedback from buildings’ occupants are gathered, meaningful data is selected, processed, and displayed to improve the facility management (FM) process. The yielded result is a progressive web application (PWA), where valuable sets of building performance data are visualised and a promptly communicable channel between owners/occupants and building system is delivered. Further development of this application in practice and research work is also proposed to harness the data-driven monitoring and automation in buildings to the greatest extent.


Introduction
'Digital twin', in the scope of building automation development, is a concept related to a physical structure's digital representative carrying real-time properties of the original entity, and thus, the implementation of such is considered beneficial in term of operational management and would gradually raise the premise's assets value. In the FM process, different tasks such as energy consumption measurement, ambient condition monitoring, periodic maintenance, occupant feedback collection etc., are crucial and would be labour-intensive without proper use of digitalisation and ICT. Therefore, having an effective building visualisation utilising the 'digital twin' principle would deliver a significant improvement in FM, ensuring the benefits produced by automation processes. Moreover, the largest share of the tangible cost of any organisation or FM service provider is more than often laid on operational expense (OPEX), which FM is responsible for. Hence the goal of enhancing the FM process with the engagement of BIM and data is to create a more efficient and cost-effective operational performance. Nevertheless, to successfully deliver key insights of the building from the collection of data on its digital twin as a precise reflection, a need is raised for a systematic approach to the development of a meaningful and engaging visualization.
The aforementioned approach can be accomplished by using BIM, from the initial stages of the construction project. For some recent decades, BIM has constantly evolved and has been harnessed at the beginning of the BLM process due to its global view and integrative collaboration offered amongst different disciplines. BLM process is a term stemmed from the product life-cycle management (PLM) set of monitoring techniques, applied specifically to buildings. Over time, the definition of BLM has been deliberated and modified according to the speedy development of digitalisation in the AECO (Architecture -Engineering -Construction -Operation) industry. FM accounts for the longest operative period of the building lifetime, also one of the most critical rings in the BLM chain, because it di-rectly relates to the final use of the building and the living comfort of the occupants. The implementation of BIM in FM has recently been of great research interest, especially in discussions related to the enhancements of the operational efficiency, productivity, commissioning services, and the overall societal well-being of the building occupants. In present times, BIM in FM workflow, technology gap, readiness in open market, transparency in data acquisition and handling, as well as staff training, and of the utmost importance, economic viability and priority, are the main factors that challenge the full use of "BIM-enabled FM" in the AECO industry, as described in [1,2]. The EU BIM Task Group Handbook has been playing an important role in spreading the good use of BIM in the European community, mentioning its high potential in improving productivity in construction projects [3]. Other than that, the British Standard Institution also recognises the added value brought by the BIM method in boosting the cost and time reduction during the building lifecycle management processes [4]. Application of BIM in FM has been reportedly used in both public and commercial projects, such as mentioned in [4][5][6][7], but the integration of monitoring data into BIM and how to orderly produce the best practice from that combination for FM has been studied in various inhomogeneous directions [8,9]. Noticeably and trendily, the internet of things (IoT) technology and artificial intelligence (AI) application in FM have been mentioned in increasing density and are even considered as the "indicative of disruptive technology" by many practitioners in [10].
Data monitoring and processing in FM are deemed to be the backbone of FM system these days; hence, the idea of data-driven innovation in the sector is said to be the new frontier of the convergence amongst BIM and computational analyses and associated tools thereof [11]. Again, the use of data in the AECO industry is no longer a new practice, but the way how the practitioners harness data matters the most, amid both the abundant challenges and benefits it can bring. In construction, geometry and data always come together as a reciprocal pair. In the past, manual documentation was the only way to connect them, before the computational design tools -e.g. BIM softwareexists. Data scientists, engineers, and architectures have been working on leveraging data in many ways to incorporate data in their work. However, there is a lack of a shared methodology to join, to integrate their work, resources, and common workflow in the making of a continuous and smooth BLM process. With the already available data from BIM, the widely accessible IoT technology, and the user-friendly aid of PWA, the proposed hereby framework will bring the buildings' owners and occupants closer to more efficient operation and a higher real-time functional performance monitoring. The gap between geometry and real-time data, as well as human and machine in the age of data-driven industrialisation, will be shortened in this novel approach.

BIM and BLM
In this work, BIM in FM is narrowed to the extent of rough architectural models of one newly built institutional building and one renovated office building, just to demonstrate the idea of the framework implementation. The as-built model was unfortunately not available for the old one due to insufficient flow of building data transfer from the construction contractors in the past. For that case, the BIM model was reconstructed from the latest architectural and structural drawings of the most recent renovation, which is equivalent to Inventory model accuracy level 1 [12]. Minor changes over time in comparison to the architectural documents were manually observed and roughly measured to serve the ultimate purpose of visualisation. Industry Foundation Class ('.ifc'), as well as to object '.obj' file formats were used as the intermediate means of building data transfer between 3D modelling programmes and web application platform (as known as open BIM format).
Nowadays, lifecycle management of a building is usually integrated into the construction project from the beginning. However, for old buildings, such as the latter one presented in this article, the BLM is only adopted from the FM step. As can be seen from this, lacking information documents and building information management in the past cause a hindrance in the implementation of the framework. The low efficient FM process back in the days will have an impact on the new FM method applied to renovated buildings, to some extent. Essentially, FM covers more than just indoor conditions and automation control, to name a few: lighting systems, elevator, access security, fire alarm, and surveillance systems. However, under the scope of this study, only the indoor climate and control system are presented as representatives of other previously mentioned components.

IoT and web-based technology
This project aims to monitor indoor conditions using various sensors, both internally and externally developed, ensuring to some extent the reliability of the collected data. An application programming interface (API) enables a standard communication agreement between third-party providers and consumers in terms of further software customization and development. Besides, modern IoT sensors and communication protocols development has allowed more reliable and accurate measurements in various fields, resulting in the enhancement of building metrics collection. Collected data is then gathered and sorted for storage. Finally, the web platform was chosen for data visualization delivery. To standardize the connection between the data and the web platform, the combination of protocols such as OPC-DA, OPC-UA, MQTT, etc. was chosen for implementation.

Data ownership & access consent
Indoor climate data ownership and consent should be treated with great care as it reflects, to some extent, personal spaces and habits of a building's occupant. However, given that the ownership aspect of IoT itself is a broad topic with many facets to be considered, this problem was addressed with a user-oriented approach. All building-related data collected by researchers and thirdparty smart devices manufacturer must be acknowledged under users' consent. In this case, users, by definition, may vary among individuals and parties owning the infrastructures, or occupants accommodating the building. Taking this approach means that users' privacy and confidential information are guaranteed against commercial exploits. As a result, researchers and companies would have little or no hindrance in collecting users' data with transparent methods, purposes, and regulations [13].

BIM process
For newly built buildings, especially after 2012 in Finland, an as-built model can easily be retrieved from the owner organisation as most of the contractors have practically adopted the Common BIM requirements 2012 [12]. In principle, this will be used as the base model in the PWA construction. Regarding old buildings, one may also retrieve these models, provided that their owners employ BIM integrated FM systems, usually after a large renovation. For any reasons that the based model is not available, the need for collecting all the latest drawings of the building will rise to at least construct a minimal intuitive visualisation of the facility. 3D modelling software programs could be possibly used at this stage are Revit and ArchiCAD. Aiming at visual perspective in FM, zones and spaces are crucial to be modelled as close to the actual as possible. After the 3D model is finished, an output file under the format of '.ifc' or '.obj' is exported for use in the implementation of the PWA interface. '.ifc' the format is the official release BIM format of the Building Smart Finland forum, according to the Common BIM requirements 2012 [12].

Progressive web-app
After a successful BIM process, the building model and its data could then be utilised for constructing a user interface (UI) as a PWA. The term refers to a fast, reliable, and engaging web application (app). In other words, this app is expected to function and perform reliably across multiple devices to provide an enhanced user experience (UX) for better engagement/re-engagement, without being affected by poor network conditions. For this reason, web-based applications' competence level has increased in recent years against their native, desktop counterparts. To further understand the concept of a PWA, the following check-list is provided, and it should be considered as a guideline for the implementation process [14]: At a consumer level, the JavaScript React framework was chosen for the development process for its built-in flexibility. React is a UI, development library, with an interesting concept of reusable UI components. A programmed component could be reused and dynamically manipulated without intensive programming effort, and thus, the React library was considered appropriate for this project. Additionally, the current version of the library supports the technology needed for building a PWA. Figure 1 showcases a comparison between a manufacturer's software (top) and a custom solution (bottom) built for the case study.

Cross-platform visualization
Creating an intuitive, cross-platform interface has always been a challenge to be overcome by software developers. For their dependence on hardware devices and operating systems (OS), native applications are most likely to be developed and delivered on a specific, often dedicated platform. Web applications (web apps), on the other hand, are significantly more flexible, since they are provided, by default, with a run-time environment from the browser. It is safe to assume that most end-devices nowadays are browser-compatible, hence. Though there is a variety of browser types, most standard web apps are highly compatible, and often there are little or no requirements for cross-browsing development. Nevertheless, cross-browser testing is important to ensure a resilient and versatile application.
Another key advantage of web apps is its delivery of services through URLs, with little or no requirement for extra installation from end-users. The 'service worker' technology allows dedicated browser instances for web apps, ensuring a seamless native-like experience for users. The following section discusses further the 'service worker' concept and its implementation.

Mobile-first & Offline-first
Mobile-first approach in web app designing ensures a smooth and efficient cross-platform development process. By limiting resources such as screen size, bandwidth, etc., the key contents and features of the application could be prioritized and thus, the final product is lean in comparison with the desktop-first counterpart. Besides, later enhancement to the application could be added on higher hierarchy platform with their extended features. The following checklist provided some guidelines on creating a mobile-friendly application: -Create a responsive design -Focus on the valuable information -Avoid Flash -Enable autofill & autocorrect for forms -Resize appropriately buttons and fonts -Allow desktop view switch -Perform frequent mobile testing Although it was a progressive advancement, the above-mentioned mobile-first approach enhances the experience of only mobile users under a proper network connection. Users with o ine and poor network connection might find the default browser behaviour to be irritating. This problem, however, could be overcome by creating a service worker [15]. A service worker, in this circumstance, would locate between the client browser and the server. In case of bad & non-reachable requests, the service worker would serve the content precached from previous browsing session. This allows the application to be available with meaningful contents under unfavoured network conditions. Updating the app could be performed in the background when a network connection is available. The implementation of such a technique is simple and is accomplished with defining a service worker file. A manifest file could also be added to allow user prompt for the 'add to home screen' option. This option installs a dedicated browser instance for the web app, allowing a better experience with native-like features such as splash screen, homeicon, etc. At the time of drafting this paper, the service worker is ready for every well-known browser [16].

Data handling & storage
In the scope of this project, multiple sensor data streams were collected and handled for storage. Since there are various third-party sensing devices with different APIs involved, the data collecting architecture should be highly available in terms of input types and processing rate. The combination of NodeJS, TICK stack (Telegraf, InfluxDB, Chronograf, Kapacitor), and Grafana programmatically and systematically meets this requirement: NodeJS enabled a reliable establishment to the previous-mentioned arbitrary APIs, while TICK stack and Grafana provide a systematic approach to data storage and rapid visualisation. The workflow could be described as follow: Input streams of sensor data are collected and rearranged into a predefined format by NodeJS apps; then they are passed through to InfluxDB storage by Telegraf; finally, Kapacitor could provide monitoring and insights through Chronograf or Grafana visualisation. It is to be noticed, that these visualization tools are limited to data-related interaction only, other information and services are performed by the PWA.

NodeJS
NodeJS is a JavaScript library that allows the language to execute in the native desktop environment rather than its browser favoured origin. NodeJS was considered the right candidate for this application because of its scalability. The library allows real-time, two-way, concurrent web socket connection with great quantity [17]. In other words, handling and collecting different sensor data streams concurrently could be carried out without hassle. The project has successfully handled inputs from the following thirdparty devices: -Humia -Iisy -Caverion -EnOcean -Resol -SmartWatcher.

TICK stack
The TICK stack is an acronym for an open-source timeseries platform for capturing, storing, and visualizing timeseries data [18]. The stack includes the following tools: -Telegraf: data collecting agent -InfluxDB: high-performance database for large data handling and compressing -Chronograf: InfluxDB visualizing tool -Kapacitor: Monitoring and alerting system for In-fluxDB The implementation of the technology stack brings about comprehensive advantages. First, such a process is performed rapidly without hassles from licensing. Second and most important, data collecting and aggregation could be performed in real-time, making such platform viable option for real-time and historical analysis [18].
Combining TICK stack with the NodeJS applications, the engineering team was able to automate the data collection procedure, while preventing vendor-lockdown. NodeJS and Telegraf were flexible enough to handle various API protocols from different vendors while being lightweight applications for the ease of deployment and modification. For tasks requiring direct data modification, a TICK script can be used to instruct Kapacitor to make the change before or after the data is stored in InfluxDB. For example, a dataset can be offset to change its units or combined with other datasets to create new measurements, e.g. COP value.

Grafana
Grafana is an open-source platform capable of rapid dashboard prototyping for visualization and monitoring. The tool is also capable of generating complex dashboard system with various plugins, developed by its vast community, providing insights and analysis operations. The installation of such a programme is inexpensive and straightforward. One of the key advantages of the platform is the ability to share and export their dashboards in various formats. The dashboards can be delivered as links, or embedded web format for visualization, or exported in '.csv' format for analytics. Currently, the platform is hosted at [19].

Deployment
As can be seen from previous sections, the technology stack is comprised of multiple software applications and thus, traditional methods of software deployment are often complicated and error-prone. Facing this challenge, the container technology and its famous platform Docker was chosen as the main deployment tool for the project applications. All software applications described in this paper are supported in Docker with well-maintained Docker images available publicly on Docker Hub. Docker Hub is Docker's public registry for application images. An image is a compressed application to be executed in the container environment.
A container provides the bare minimum resources for an application's execution, e.g. run-time, library, file system, etc. For this reason, containerized applications are lightweight and flexible, and deployment of such often takes seconds. This opens opportunities for better software operation in terms of maintenance and rolling updates with minimal downtime. Another key feature of the container platform is security. Each application is kept separate in their containers, with outer connections constrained and predefined. In case of malware, applications are mostly isolated from the host and other processes, hence the enhancement of the system security level.
Another key advantage of containers deployment is that the application stack is flexible and scalable. Containers applications are well supported amongst most modern IoT platform such as Microsoft Azure, Amazon Web Services, etc. Cloud computing and scalability is also possible and could be automated in a straight-forward manner using containers. Some example platforms are Google Compute Engine, Digital Ocean, Heroku, etc.

Case study demonstration
The "Terveellinen Digitalo" or "Healthy Digital House" project was initiated to create insights of buildings to improve its energy efficiency level and the operation of the BLM. Through the utilization of indoor climate monitoring devices, building metrics were collected for analytical tasks and visualization.
To improve the operation process, a need is raised to create an engaging interface with meaningful data visualization. Moreover, as the project is contributed to the building occupants' well-being, actively collecting their feedback about the indoor quality is an important task, which could be performed also by the UI. That being said, two of the buildings in the study were selected, and two custom web interfaces were built accordingly. The reason for such separate development lies in the difference between the two buildings' operations and purposes.

Application description
Sheet Metal Centre is a near-zero energy building and a common research facility shared between HAMK Tech Research Unit and Ruukki Research & Development (R&D) Department. Data from the energy production procedures as well as the building's energy consumption level was recorded and sent through the OPC-UA protocol. The building's HVAC and lighting devices information was also collected through its automation system using the same proto-col. Indoor conditions sensor data was also collected with the MQTT protocol. These data recording could then be systematically monitored with Grafana dashboard as shown in Figure 2. The above dashboard, however, is limited to displaying data only. By developing a UI, the building process could now be visualized for better operation experience, such as in Figure 3. By taking the mobile-first approach, the web application is reliable on mobile devices, such as demonstrated in Figure 4.

Case study discussion
As a new-built building, its BIM model was fetched directly from the project design and implementation party, which enables higher data integration and consistency from the start. The BIM model later can also be used for other purposes in the post-occupancy period, such as the follow-up study of the efficiency of energy pile systems, and further indoor climate condition study in other building performance simulation tools. Not just being a visualisation tool, the PWA can also provide tailored data set on demand, which is an essentially important feature when it comes to simulation model calibration, operation analysis, or, later in the lifecycle of the building -retrofit study.
The use of the PWA can also be utilised as an active and real-time FM tool, or, speaking in its parent scope, BLM tool. Direct management of data from different sources and prompt adjustment of technical settings are the key value-adding points of this application. These allow building owners or facility managers to understand better their building, plus, to steer the performance of building elements to any changes in the building operation (e.g. change in building use purpose or adapting updates on local energy efficiency policy). Also, possible replacement, refurbishment or retrofit scenarios can be forecasted or deliberated on time through frequent observation of joint visualisation (as a form of data reporting).
Moreover, in this case, for instance, from the easily retrievable data, patterns of domestic hot water and door opening schedules can be individually studied in order to produce generalised behavioural profiles. These are representatives of the various "dynamic elements of the building systems from the state of the art" [20]. Temporal aspects in building life cycle assessment (LCA) have been discussed openly in recent times, with the introduction of corresponding dynamic characteristic factors (CFs) as a popular solution from many researchers [21]. From a future perspective, this PWA can be considered as a helping hand in tracking the data of those temporal parameters, analysing the change in both the building system background itself and the building end-user behavioural factors. Dynamic LCA is a broad and separate topic, more discussion on the advantages of this PWA in the practice of LCA should not be presented further in the scope of this article.

Application description
Built from the 1950s, the Uppsala building in Hämeenlinna is now a place for the city offices and activities of the Children, Youth and Quality of Life Development Unit [22]. Like most of Finland's old buildings, this facility has little automation control integration and management over the building control processes. However, indoor metric collecting is still possible and is implemented throughout the building's occupied floor areas. The data was then utilized for display on the web interface in floor plan view mode as shown in Figure 5. There is also a need to collect occupants' feedback on the indoor conditions, thus a form was created as shown in Figure 6. Since it was designed to be mobile-first, a phonebrowsing experience is ensured to be seamless. The idea for further development, particularly in this case, is to create a "heat map" visualization backed by the collected met- ric of indoor temperature. The recorded value will be set to be within an allowable range and notification for further action will be sent to the building manager and/or occupants if it goes out of track.
The building's BIM model could also be displayed on the interface in 3D view mode as illustrated in Figure 7. Although the model was a prototype, future developments regarding the improvement of data display decided to take place using 3D spaces which allows a better intuitive approach towards the users.

Case study discussion
Having undergone several grand renovations over almost 70 years of operation, this building's BIM model was constructed based on the most recent drawings documented. As mentioned above, uses of BIM model are wide; especially for old buildings, the focuses are mostly for maintaining and improving UX. Such visualisation as 'heat map' and feedback form can be considered as the most basic UX improvement of this application, making the occupants feel the connection between them and the building they are working or living in. Although here the PWA is currently built at the preliminary design, its core principles of development will be similarly based on the direction of the former case study, with more emphasis on the building's stable operational performance and possibly the visibility

Conclusion
The two cases have depicted the potential of employing a web-app-based FM system in the BLM process. PWA outweighs previous ways of traditional FM system in terms of device compatibility and serviceable reliability. By creating a cross-platform application, the benefit gives rise not only to the BLM process but subsequently also to the inner occupants' comfort. In addition, the implementation of such a system has proven to be quick and reliable in the development and delivery process.
Beside of being a visualisation tool, the PWA and its framework could be considered a united platform supporting ubiquitous smart devices and automation system. With the fast-paced development of multiple IoT protocols and a flexible technology stack at its core, the framework provides a consistent interface between humans and building automation and monitoring systems. From the design perspective, it is highly customisable to various demands in users' tastes and requested functionalities, while giving them the overall control over their personal data. From the management perspective, the framework is modular and flexible, allowing it to be deployed on a variety of infrastructure while enabling compatibility for automated on-demand scaling to ensure consistent performance and compute resource savings.
Future developments include improvement of the UI to ensure a natural UX, and automation of the development process to systematically generate the web application from a collection of a data model and building floorplans. In addition to delivering more concrete and meaningful key insights into the performance of the buildings, possible topic to be developed following this work is the capability of PWA to handle occupants' feedback and integrate the predicted/ simulated performance of the buildings such as indoor conditions and HVAC operational scheduling into the control of automation system. Another development possibility is to combine automated building fault detection and diagnostics (AFDD) with existing FM systems and PWA interface as the mighty means of communication between building and its owners/occupants. In different circumstances, preventive maintenance and predictive controlling of building automation system with machine learning algorithms are also a great potential direction to leverage this PWA.