= TimberVis Flexiboard =

• Introduction
• What does the application do?
• GIT Repository
• Installation
  • Prerequisites
  • Prepare your dataset: database input format
  • Instructions
  • Files and folders:
  • API documentation:
    • Parallel
    • Grid
    • Horizon
    • Saved Flexiboards
• Credits:
• Kicense:

Introduction

This is a web application developed by Infravis.se for the Structural Health Monitoring research group at the Department at Building Technology, all from the Linneuniversitetet, Växjö, Sweden. This project has been developed from March to December 2023-

TimberVis Flexiboard is a data visualization and exploration web-based tool that allows researchers and participating companies to quickly and reliably analyse ongoing monitoring projects where continuous measurements at real buildings and at laboratory scale are done.

The building and projects are equipped with several sensors (temperature. vibration, humidity). The data is collected continuously every few minutes and saved for analysis. The result time-series data for each sensor's position inside the construction structure.

In order to visualize and explore this kind of data, it is very popular the use of dashboard that allow data filtering for a pre-defined number of diagrams. With TimberVis we wanted to go beyond a classic dashboard and be able to have a bit more freedom when creating the dashboard and, at the same time, cover a wider number of user cases: from researchers to companies, from students to general audience. According to this goal we created what we call a Flexiborad, where a user of the TimberVis interface is able to generate as many diagrams are needed, as well as texts that give context to the representations.

Technically, TimberVis is a web application that uses just HTML-CSS ad JavaScript for the frontend, and SQLte and API in python flask for the backend.

What does the application do?

The TimberVis Flexiboard app allows to create an save multiple dashboard for defined datasets. Since the app is created ofr prokects monitoring timber buildings, the data gave a time series format with values for several parameters depending on the sensors installed on each building/project.

This first version of the app allows three types of diagrams:

• Parallel-like diagram (Called Parallel in the application)
• Heat-map calendars: weekly, monthly and yearly (Called Grid in the application)
• Joy plot (Called Horizon in the application)

GIT Repository

The code of this application is accessible and can be downloaded from the Git repository: [https://leonard.lnu.se/git/jaume/infravis-trahust]

Installation

Prerequisites

• A web server
• Pythion and Flask. This first version uses: $ flask --version Python 3.10.12 Flask 2.3.3 flask-cors-4.0.0 Werkzeug 2.3.7
• The app uses sqlite to store the data. Sqlite is included in Python3.

Prepare your dataset: database input format

• Each house in its own subfolder of 'Data'. The name of the subfolder will be used as the ID of the house.
• Inside the subfolder, the .TXT files with the sensor data should be name as "CARD-YEAR-MONTH.TXT"
• For example: 1-2022-10.TXT for October 2022, card 1.
• It does not matter if the TXT files are organized into subfolders. The import script will find them.

Instructions

1. Prepare your dataset in a file like my_database.db
2. Put the file inside /py/ directory
3. From a command-line terminal: cd /path_to/py/
4. From a command-line terminal run 'python import.py' to create the sqlite database. This will create sqlite databses for each .db file. 4,1 Pyhon libs installation: ~ pip install flask flask-cors werkzeug
5. From a command-line terminal run 'python -m flask --app main run' to start the API server. 4- Run/start a web server pointing to web-html/index.html as home page
6. Open a browser and go to twhere the ndex,html ius. You must be able to select the data ordatas you just created.

Files and folders:

• /Data/ -> datasets for each project. Create a folder name for each project. This folder name must be defined in web-html/config/datamap.js [Check Installation ( Instructions for the files(folders structure for each project]\

  • Data/Charlie\
  • Data/Pilgatan

• /py/\

• Data/Boards -> Saved boards are here. For a fresh installation, this folder can be empty\

  • output_import.txt\
  • Charlie.db\
  • main.py\
  • Pilgatan.db\
  • README.md

• /web-html/\

• web-html/config  -> Configuration files that need to be edited\

  • config.js -> General variables\
  • datamap.js -> Specific variables for each project included in the flexiboard

• web-html/css -> CSS styles used\

  • bootstrap-datepicker3.css\
  • c3.css\
  • quill.snow.css\
  • bootstrap-icons.css\
  • dash.css\
  • winbox.min.css\
  • bootstrap.min.css\
  • font-awesome.min.css

• web-html/js -> JS flexiboard functions\

  • dash.js\
  • home.js

• web-html/lib .> JS libraries used\

  • bootstrap.bundle.min.js\
  • d3-horizon-chart0.0.5.js\
  • moment.min.js\
  • bootstrap-datepicker.min.js\
  • d3.v4.js\
  • quill.js\
  • bootstrap-datetimepicker.min.js\
  • jquery-3.7.0.min.js\
  • c3.js\
  • jquery-ui.js

• web-html/imgs  -> Put here the images defined in web-html/config/datamap.js\

  • infravis.jpg\
  • infravis.ico\
  • ...

• dash.html -> Main page\

• index.html -> Home page

API documentation:

Parallel

/parallel/daily

Returns data formatted for the 'daily' parallel coordinates view.

URL parameters:

• 'day' [Mandatory]: in the format YYYY-MM-DD.
• 'family' [Optional; default: 'S1']: name of family of sensors.
• 'type' [Optional; default: 'celsius']: type of sensor.

/parallel/weekly

Returns data formatted for the 'weekly' parallel coordinates view.

• 'week' [Optional; default: 1]: week number, 1-52.
• 'year' [Optional; default: 2023]: year.
• 'family' [Optional; default: 'S1']: name of family of sensors.
• 'type' [Optional; default: 'celsius']: type of sensor.

/parallel/monthly

Returns data formatted for the 'monthly' parallel coordinates view.

• 'month' [Optional; default: 1]: month number, 1-12.
• 'year' [Optional; default: 2023]: year.
• 'family' [Optional; default: 'S1']: name of family of sensors.
• 'type' [Optional; default: 'celsius']: type of sensor.

/parallel/yearly

Returns data formatted for the 'yearly' parallel coordinates view.

• 'year' [Optional; default: 2023]: year.
• 'family' [Optional; default: 'S1']: name of family of sensors.
• 'type' [Optional; default: 'celsius']: type of sensor.

Grid

/grid/weekly

Returns data formatted for the 'weekly' grid view.

• 'week' [Optional; default: 1]: week number, 1-52.
• 'year' [Optional; default: 2023]: year.
• 'sensor' [Optional; default: 'S1:1']: name of the sensor.
• 'type' [Optional; default: 'celsius']: type of sensor.

/grid/monthly

Returns data formatted for the 'monthly' grid view.

• 'month' [Optional; default: 1]: month number, 1-12.
• 'year' [Optional; default: 2023]: year.
• 'sensor' [Optional; default: 'S1:1']: name of the sensor.
• 'type' [Optional; default: 'celsius']: type of sensor.

/grid/yearly

Returns data formatted for the 'yearly' grid view.

• 'year' [Optional; default: 2023]: year.
• 'sensor' [Optional; default: 'S1:1']: name of the sensor.
• 'type' [Optional; default: 'celsius']: type of sensor.

Horizon

/horizon/daily

Returns data formatted for the 'daily' horizon view.

• 'day' [Optional; default: '2023-01-01']: in the format YYYY-MM-DD.
• 'family' [Optional; default: 'S1']: name of family of sensors.
• 'type' [Optional; default: 'celsius']: type of sensor.

/horizon/weekly

Returns data formatted for the 'weekly' horizon view.

• 'week' [Optional; default: 1]: week number, 1-52.
• 'year' [Optional; default: 2023]: year.
• 'family' [Optional; default: 'S1']: name of family of sensors.
• 'type' [Optional; default: 'celsius']: type of sensor.

/horizon/monthly

Returns data formatted for the 'monthly' horizon view.

• 'month' [Optional; default: 1]: month number, 1-12.
• 'year' [Optional; default: 2023]: year.
• 'family' [Optional; default: 'S1']: name of family of sensors.
• 'type' [Optional; default: 'celsius']: type of sensor.

/horizon/yearly

Returns data formatted for the 'yearly' horizon view.

• 'year' [Optional; default: 2023]: year.
• 'family' [Optional; default: 'S1']: name of family of sensors.
• 'type' [Optional; default: 'celsius']: type of sensor.

NOTE: For 2023 the data goes only up to August (8 months).

Saved Flexiboards

/boards

[ { Board_ID [int], Name [String], Description [String] } ]

/boards/save

Method: POST

Every time we call save, it is a new board. ID is auto generated. Name must be unique.

{ Name [String], Description [String], col-left: [ { order [int], id [String], text [String], api_url [int] }, { ... } ], }

/boards/[Board_ID]

{ Board_ID [int], Name [String], Description [String], Parallel: [ { order [int], id [String], text [String], api_url [int] }, { ... } ], }

Credits:

• Project manager
• Michael Dorn, Jaume Nualart Vilaplana
• Other project members
• Rafael Messias Martins, Osama Abdeljaber, Carl Larsson
• Participating organizations
• Linnaeus University, the InfraVis node at Linnaeus University

Kicense:

Copyright 2024 Jaume Nualart, Rafael M. Marins, and Infravis.se

The code created for this project is distributed under the terms of MIT License. Check the attached file MIT-License.txt for further information.