Help, Questions, Feedback:

IoT-Dashboard

Free open-source website to display & control (IoT) data - everything is a thing.

A generic dashboard application based on JavaScript, HTML and CSS that runs in modern browsers. A server is only used to serve the dashboard files. Simply arrange and configure widgets to display data from any data source - not limited to Internet of Things.

A plugin API that allows easy widget and data source development to keep the dashboard as extensible as possible. All plugins are loaded securely in sandboxed iFrames.

Can be used as free alternative to geckoboard, kibana, grafana or freeboard. And of course for all other IoT, M2M, Industry 4.0, BigData, whatever dashboards you have to pay for out there.

This project is backed by Lobaro.com - We offer full-stack IoT services including customized hardware, backend-integration and visualizations.

---

Documentation

• IoT-Dashboard Documentation
• Plugin Development: Getting Started
• Plugin API

Live Demo

Standalone:

• Live Demo Stable of the master branch.

Online service:

The iot-dashboard code does not include any server-side backend logic for account mangement, plugin registry and state persistence. If you need these features, e.g. if you want to share your dashboard easily with others over the web, you can use the hosted version of the dashboard:

• Lobaro Dashboard Hosting

Motivation

Why just another Dashboard?

I was looking for a Dashboard with the following properties:

• OpenSource, royalty free, with code that I can understand and extend for full customization
• Easy to setup, maintain and extend - even for unusual data sources and widgets
• A Reasonable set of default widgets, to be used out of the box
• Simple API and development setup to write custom widgets and data sources, as a solid base for community driven development and extensions
• Running locally/offline without the need of any server, keeping the server optional until I really need one
• Having a community that extends the Dashboard for their own needs
• Developed with security in mind

If you find something that comes close to the above requirements, please let me know!

Setup / Install

Prerequisite: Download & install NodeJs

NodeJS is used for building the dashboard. You can host it on any http server later.

Setup Plugin Development Toolchain

To keep everything simple all important tasks are based on scripts in package.json. Use npm run <script-name> to run any of them.

1. Clone this reposity

   git clone https://gitlab.com/lobaro/iot-dashboard.git cd iot-dashboard

2. Install all dependencies for building, testing and development - can take some time

   npm install

3. Run the Webpack Dev Server with live-reload and hot module replacement

   npm run dev

Webpack is the used build tool to transpile and bundle all sources. The development WebServer is part of Webpack and allows to run the application with live-reload locally.

1. Open your browser at:

• Dashboard: http://localhost:8080
• Tests: http://localhost:8080/webpack-dev-server/tests.html

1. Run a second task in another terminal to compile i.a. plugins automatically on file-change

   npm run watch

The watch task compiles the Plugin sources and keeps test files up to date.

Particular it monitors & transpiles the plugins in /plugins/**/*.js (source dev folder) to /dist/plugins/**/*.js (plugin load folder) when the sourcefile changes.

See gulpfile.js -> watch task for more details.

1. Done!

You have succesfully installed the dashboard development toolchain.

To get started with plugin developement follow the Plugin Developmenet: Getting Started guide starting with step two.

To continue with plugin development later only the above steps 3 to 6 have to be performed again.

OR Install and run the Dashboard locally

The fastest way to get the dashboard running on your machine (without development tools!).

1. Install the Dashboard starter server

   npm install -g iot-dashboard-starter

2. Start the dashboard with

   iot-dashboard

Open your browser at http://localhost:8081

---

To include the dashboard in your own project install it as dependency with

npm install --save-dev iot-dashboard

Useful Tasks

To make sure all you changes will survive the CI build

npm run build

To just run the tests (not enough to survive the CI build!)

npm test

Find the coverage report in dist/coverage or while the server is running at http://localhost:8080/coverage/

Copyright & License

Copyright © 2016 Lobaro (http://www.lobaro.com)

The code is available under Mozilla Public License 2.0 (MPL 2.0) For more information you might want to read the FAQ.

Contributors have to add a License Header to new sourcecode files.

This means you can use and modify the code for private propose (personal or inside your organisation) Outside of your Organisation you must make modified MPLed code available to your users and comply with all other requirements of the MPL 2.0.

If you need some of the code available under another license, do not hesitate to contact Lobaro.