Repository files navigation

This dashboard provides easy-to-use client-side visualisation of Internet-of-Things sensor data fromOGC 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 theproject page.

Authors: Simon Böhm, Moritz Grauer, Daniel Liebler, Robin Maisch, Till Stöckmann, Frederic Tausch

A demo of an integration of this dashboard can be found in thepublic 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 thepublic folder. The script has to be imported into the host website after importing the 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.

The dashboard will be plotted into thediv withid=iot-db.The dashboard is accessed via thewindow.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:
  • BooleandisableImportExportCMS: Disable the user's ability to import/export his dashboard-configuration from/into a CMS. Defaults to false
  • BooleandisableDownloadUpload: Disable the user's ability to download/upload his dashboard-configuration to/from his local PC. Defaults to false
  • BooleandisableConfiguration: Disable the user's ability to change the dashboard (including servers, widgets and their placement). Defaults to false
  • BooleanbackgroundTransparent: Set the background transparent. Defaults to false
  • BooleanenableNoDistraction: Enable the "no distraction"-mode on startup (removing every part of the dashboard GUI except the widgets). Defaults to false
  • StringbaseDir: The directory to fetch the resources from (fonts andres folder). Root is the folder of the script. Defaults to./
  • Stringlanguage: 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 inlangEn.js for all the translations needed
• onLoad(function): The function to be called once the dashboard is all started up
• onSaveConfig(function): The function to be called once the user presses the export button. Here you should export the user's dashboard-config into your CMS
• onLoadConfig(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