Author Archives: eric

Yet another Freeboard widget plugin

Leave a reply

freeboard-widget-plugins

Two new widget plugins are available for Freeboard.io

  1. Slider widget plugin
  2. 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://goo.gl/hbAXXU

All plugins are available for download from the following Github repository: https://github.com/onlinux/freeboard-plugins

Slider widget plugin for freeboard.io

slider

 

 

slider-settings

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

switch

 

switch-settings

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.

 

  1. git clone https://github.com/Freeboard/freeboard.git
  2. npm install
  3. 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);
  })