Introduction
This dashboard provides easy-to-use client-side visualisation of Internet-of-Things sensor data from OGC SensorThings API compatible servers. Various types of widgets can be arranged and configured on the dashboard. It is a web application and can be embedded into any website. A live demo is available on the project page.
Authors: Simon Böhm, Moritz Grauer, Daniel Liebler, Robin Maisch, Till Stöckmann, Frederic Tausch
Screenshots
How to use
A demo of an integration of this dashboard can be found in the public folder. You will still need to download RGraph for this to work (more on this later)!
You need following files and folders:
- iotwebdashboard.html | The structure for the dashboard
- iotwebdashboard.js | The code for the dashboard
- iotwebdashboard.css | The style files for the dashboard
- res | The folder containing all images used by the dashboard
- fonts | The folder containing all glyphicons used by the dashboard. (Not needed if included in your embedded bootstrap)
Those files and folders can be found in a release version in the public folder. The script has to be imported into the host website after importing the dependencies.
Needed Dependencies
- jQuery & jQueryUI
- Bootstrap (CSS & JS)
- Gridstack
- lodash (Needed for Gridstack)
- RGraph (At least common.core, gauge, scatter, line, thermometer, bar)
- Leaflet
- MQTT.js
As you can see in the demo, there are CDNs for every dependency except RGraph. You will have to download and serve this yourself.
Embedding the dashboard
The dashboard will be plotted into the div
with id=iot-db
.
The dashboard is accessed via the window.iotDB
variable.
This variable provides the following functions:
create(Object)
: The function to instanciate the dashboard. There should only be one dashboard instance per site. The passed Object can have the following attributes:- Boolean
disableImportExportCMS
: Disable the user's ability to import/export his dashboard-configuration from/into a CMS. Defaults to false - Boolean
disableDownloadUpload
: Disable the user's ability to download/upload his dashboard-configuration to/from his local PC. Defaults to false - Boolean
disableConfiguration
: Disable the user's ability to change the dashboard (including servers, widgets and their placement). Defaults to false - Boolean
backgroundTransparent
: Set the background transparent. Defaults to false - Boolean
enableNoDistraction
: Enable the "no distraction"-mode on startup (removing every part of the dashboard GUI except the widgets). Defaults to false - String
baseDir
: The directory to fetch the resources from (fonts and res folder). Root is the folder of the script. Defaults to./
- String
language
: The language file to be used. Defaults to english. If you want a different language, set up an object in the public scope with the name passed here. For all missing translations, the english translations will be used. Look at the english language object in langEn.js for all the translations needed
- Boolean
onLoad(function)
: The function to be called once the dashboard is all started uponSaveConfig(function)
: The function to be called once the user presses the export button. Here you should export the user's dashboard-config into your CMSonLoadConfig(function)
: The function to be called once the user presses the import button. Here you should import the user's dashboard-config from your CMS