Two new widget plugins are available for Freeboard.io
- Slider widget plugin
- Switch widget plugin
Freeboard
A damn-sexy, open source real-time dashboard builder for IOT and other web mashups.
What is It?
Freeboard is a turn-key HTML-based “engine” for dashboards. Besides a nice looking layout engine, it provides a plugin architecture for creating datasources (which fetch data) and widgets (which display data)— freeboard then does all the work to connect the two together. Another feature of freeboard is its ability to run entirely in the browser as a single-page static web app without the need for a server. The feature makes it extremely attractive as a front-end for embedded devices which may have limited ability to serve complex and dynamic web pages.
See it in action @ https://onlinux.fr/freeboard
All plugins are available for download from the following Github repository: https://github.com/onlinux/freeboard-plugins
Slider widget plugin for freeboard.io
At each value change, a request is sent with the argument pattern %VALUE% replaced with the value set by the slider.
Switch widget plugin for freeboard.io
Freeboard INSTALLATION
Follow the instructions from Freeboard github site
Freeboard can be run entirely from a local hard drive. Simply download/clone the repository and open index.html. When using Chrome, you may run into issues with CORS when accessing JSON based APIs if you load from your local hard-drive— in this case you can switch to using JSONP or load index.html and run from a local or remote web server.
- git clone https://github.com/Freeboard/freeboard.git
- npm install
- grunt
Then run a index.html or index-dev.html through a webserver.
PLUGIN INSTALLATION
Copy the plugin file to your freeboard installation, for example:
$ cp ./slider.js /var/www/freeboard/plugins/
Edit the freeboard index.html file and add a link to the plugin near the end of the head.js script loader, like:
head.js(
'js/freeboard_plugins.min.js',
'plugins/slider.js',
'plugins/switch.js',
$(function() {
//DOM Ready
freeboard.initialize(true);
})