- [What does the application do?](#what-does-the-application-do)
- [GIT Repository](#git-repository)
- [Installation](#installation)
- [Prerequisites](#prerequisites)
- [Instructions](#instructions-1)
- [Files and folders:](#files-and-folders)
- [API documentation:](#api-documentation)
- [Parallel](#parallel)
- [Grid](#grid)
- [Horizon](#horizon)
- [Saved Flexiboards](#saved-flexiboards)
- [Credits:](#credits)
# Instructions
All the lines below should be run inside the 'py' subdirectory.
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:
2. Run 'python -m flask --app main run' to start the API server.
## Prerequisites
By default the API will be available at http://localhost:5000.
- A web server
- Pythion and Flask. This first version uses:
$ flask --version
Python 3.10.12
Flask 2.3.3
Werkzeug 2.3.7
- The app uses sqlite to store the data. Sqlite is included in Python3.
## Instructions
# Endpoints
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.
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
1. Open a browser and go to twhere the ndex,html ius. You must be able to select the data ordatas you just created.
## Parallel
## Files and folders:
### /parallel/daily
/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.
@ -24,7 +137,7 @@ URL parameters:
* 'family' [Optional; default: 'S1']: name of family of sensors.
* 'type' [Optional; default: 'celsius']: type of sensor.
### /parallel/weekly
/parallel/weekly
Returns data formatted for the 'weekly' parallel coordinates view.
@ -33,7 +146,7 @@ Returns data formatted for the 'weekly' parallel coordinates view.
* 'family' [Optional; default: 'S1']: name of family of sensors.
* 'type' [Optional; default: 'celsius']: type of sensor.
### /parallel/monthly
/parallel/monthly
Returns data formatted for the 'monthly' parallel coordinates view.
@ -42,7 +155,7 @@ Returns data formatted for the 'monthly' parallel coordinates view.
* 'family' [Optional; default: 'S1']: name of family of sensors.
* 'type' [Optional; default: 'celsius']: type of sensor.
### /parallel/yearly
/parallel/yearly
Returns data formatted for the 'yearly' parallel coordinates view.
@ -51,9 +164,9 @@ Returns data formatted for the 'yearly' parallel coordinates view.
* 'type' [Optional; default: 'celsius']: type of sensor.
## Grid
### Grid
### /grid/weekly
/grid/weekly
Returns data formatted for the 'weekly' grid view.
@ -62,7 +175,7 @@ Returns data formatted for the 'weekly' grid view.
* 'sensor' [Optional; default: 'S1:1']: name of the sensor.
* 'type' [Optional; default: 'celsius']: type of sensor.
### /grid/monthly
/grid/monthly
Returns data formatted for the 'monthly' grid view.
@ -71,7 +184,7 @@ Returns data formatted for the 'monthly' grid view.
* 'sensor' [Optional; default: 'S1:1']: name of the sensor.
* 'type' [Optional; default: 'celsius']: type of sensor.
### /grid/yearly
/grid/yearly
Returns data formatted for the 'yearly' grid view.
@ -80,9 +193,9 @@ Returns data formatted for the 'yearly' grid view.
* 'type' [Optional; default: 'celsius']: type of sensor.
## Horizon
### Horizon
### /horizon/daily
/horizon/daily
Returns data formatted for the 'daily' horizon view.
@ -90,7 +203,7 @@ Returns data formatted for the 'daily' horizon view.
* 'family' [Optional; default: 'S1']: name of family of sensors.
* 'type' [Optional; default: 'celsius']: type of sensor.
### /horizon/weekly
/horizon/weekly
Returns data formatted for the 'weekly' horizon view.
@ -99,7 +212,7 @@ Returns data formatted for the 'weekly' horizon view.
* 'family' [Optional; default: 'S1']: name of family of sensors.
* 'type' [Optional; default: 'celsius']: type of sensor.
### /horizon/monthly
/horizon/monthly
Returns data formatted for the 'monthly' horizon view.
@ -108,7 +221,7 @@ Returns data formatted for the 'monthly' horizon view.
* 'family' [Optional; default: 'S1']: name of family of sensors.
* 'type' [Optional; default: 'celsius']: type of sensor.
### /horizon/yearly
/horizon/yearly
Returns data formatted for the 'yearly' horizon view.
@ -120,9 +233,9 @@ Returns data formatted for the 'yearly' horizon view.
*NOTE*: For 2023 the data goes only up to August (8 months).
## Saved Flexiboards
### Saved Flexiboards
### /boards
/boards
[
{
@ -132,7 +245,7 @@ Returns data formatted for the 'yearly' horizon view.
}
]
### /boards/save
/boards/save
Method: POST
@ -156,7 +269,7 @@ Every time we call save, it is a new board.
],
}
### /boards/[Board_ID]
/boards/[Board_ID]
{
Board_ID [int],
@ -174,3 +287,12 @@ Every time we call save, it is a new board.
}
],
}
# 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
