A damn-sexy, open source real-time dashboard builder for IOT and other web mashups. A free open-source alternative to Geckoboard.

Related tags

freeboard
Overview

freeboard

free·board (noun) *\ˈfrē-ˌbȯrd*

  1. the distance between the waterline and the main deck or weather deck of a ship or between the level of the water and the upper edge of the side of a small boat.
  2. the act of freeing data from below the "waterline" and exposing it to the world.
  3. a damn-sexy, open source real-time dashboard builder/viewer for IOT and other web mashups.

Demo

http://freeboard.github.io/freeboard

https://freeboard.io

Screenshots

Weather

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.

The code here is the client-side portion of what you see when you visit a freeboard at http://freeboard.io. It does not include any of the server-side code for user management, saving to a database or public/private functionality— this is left up to you to implement should you want to use freeboard as an online service.

How to Use

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. cd freeboard
  3. npm install
  4. grunt

Then run a index.html or index-dev.html through a webserver.

API

While freeboard runs as a stand-alone app out of the box, you can augment and control it from javascript with a simple API. All API calls are made on the freeboard singleton object.


freeboard.initialize(allowEdit, [callback])

Must be called first to initialize freeboard.

allowEdit (boolean) - Sets the initial state of freeboard to allow or disallow editing.

callback (function) - Function that will be called back when freeboard has finished initializing.


freeboard.newDashboard()

Clear the contents of the freeboard and initialize a new dashboard.


freeboard.serialize()

Serializes the current dashboard and returns a javascript object.


freeboard.loadDashboard(configuration, [callback])

Load the dashboard from a serialized dashboard object.

configuration (object) - A javascript object containing the configuration of a dashboard. Normally this will be an object that has been created and saved via the freeboard.serialize() function.

callback (function) - Function that will be called back when the dashboard has finished loading.


freeboard.setEditing(editing, animate)

Programatically control the editing state of the of dashboard.

editing (bool) - Set to true or false to modify the view-only or editing state of the board.

animate (function) - Set to true or false to animate the modification of the editing state. This animates the top-tab dropdown (the part where you can edit datasources and such).


freeboard.isEditing()

Returns boolean depending on whether the dashboard is in in the view-only or edit state.


freeboard.loadDatasourcePlugin(plugin)

Register a datasource plugin. See http://freeboard.github.io/freeboard/docs/plugin_example.html for information on creating plugins.

plugin (object) - A plugin definition object as defined at http://freeboard.github.io/freeboard/docs/plugin_example.html


freeboard.loadWidgetPlugin(plugin)

Register a widget plugin. See http://freeboard.github.io/freeboard/docs/plugin_example.html for information on creating plugins.

plugin (object) - A plugin definition object as defined at http://freeboard.github.io/freeboard/docs/plugin_example.html


freeboard.showLoadingIndicator(show)

Show/hide the loading indicator. The loading indicator will display an indicator over the entire board that can be useful when you have some code that takes a while and you want to give a visual indication and to prevent the user from modifying the board.

show (boolean) - Set to true or false to show or hide the loading indicator.


freeboard.showDialog(contentElement, title, okButtonTitle, cancelButtonTitle, okCallback)

Show a styled dialog box with custom content.

contentElement (DOM or jquery element) - The DOM or jquery element to display within the content of the dialog box.

title (string) - The title of the dialog box displayed on the top left.

okButtonTitle (string) - The string to display in the button that will be used as the OK button. A null or undefined value will result in no button being displayed.

cancelButtonTitle (string) - The string to display in the button that will be used as the Cancel button. A null or undefined value will result in no button being displayed.

okCallback (function) - A function that will be called if the user presses the OK button.


freeboard.getDatasourceSettings(datasourceName)

Returns an object with the current settings for a datasource or null if no datasource with the given name is found.

datasourceName (string) - The name of a datasource in the dashboard.


freeboard.setDatasourceSettings(datasourceName, settings)

Updates settings on a datasource.

datasourceName (string) - The name of a datasource in the dashboard.

settings (object) - An object of key-value pairs for the settings of the datasource. The values specified here will be combined with the current settings, so you do not need specify every setting if you only want to update one. To get a list of possible settings for a datasource, consult the datasource documentation or code, or call the freeboard.getDatasourceSettings function.


freeboard.on(eventName, callback)

Attach to a global freeboard event.

eventName (string) - The name of a global event. The following events are supported:

"dashboard_loaded" - Occurs after a dashboard has been loaded.

"initialized" - Occurs after freeboard has first been initialized.

callback (function) - The callback function to be called when the event occurs.


Building Plugins

See http://freeboard.github.io/freeboard/docs/plugin_example.html for info on how to build plugins for freeboard.

Testing Plugins

Just edit index.html and add a link to your javascript file near the end of the head.js script loader, like:

...
"path/to/my/plugin/file.js",
$(function()
{ //DOM Ready
    freeboard.initialize(true);
});

Copyright

Copyright © 2013 Jim Heising (https://github.com/jheising)
Copyright © 2013 Bug Labs, Inc. (http://buglabs.net)
Licensed under the MIT license.


Issues
  • Mess after loading stored dashboard

    Mess after loading stored dashboard

    I'm currently trying to implement freeboard in our environment. Therefore I've added a server backend which stores the dashboard configuration object as json (sent to a REST API).

    Storing and retrieving the information works like a charm, but as soon as freeboard tries to render a loaded dashboard, it just places all panes on top of each other. Please see the following two screenshot (before and after loading). Any ideas how I can fix this?

    bildschirmfoto 2014-11-09 um 08 23 01

    bildschirmfoto 2014-11-09 um 08 23 26 (Clock pane slightly moved sideways so you can see the other panes are below of it)

    opened by marbetschar 13
  • How to auto load

    How to auto load "dashboard.json" when everyone go to freeboard

    Hi Sirs,

    As default freeboard need to save and load their dashboard into .json then save into desktop. Then how to auto load the default dashboard file when every user enter freeboard?

    Tks! Hanky

    opened by hankycheng 13
  • How to make an HTML widget?

    How to make an HTML widget?

    It says "Can be literal HTML". Given that, how would I insert a datasource?

    <div style="background-color: gray">This is a timestamp: datasources["DS"]["Timestamp"]</div>

    Related SO question: http://stackoverflow.com/questions/31592886/adding-literal-html-to-an-html-widget-with-data-from-a-datasource

    opened by ScottBeeson 12
  • widgets not updating...

    widgets not updating...

    ...except for one only. I double checked, only one widget auto-updates when I POST data to Dweet.io. Dweet.io is the only method I'm using to push data, right now.

    (Address: https://freeboard.io/board/BnehvC)

    *) If I'm logged in and click on the "update" button in the datasources panel from the settings, widgets' values get updated.

    *) If I'm not logged in freeboard:

    • on 1st page loading I get empty fields;
    • If I reload, values get updated, but with no history.

    [all the above, except for one only widget: night-leds-level, if it matters. I'm wondering what does it have to be so special... :) ]

    Thanks.

    opened by dentex 10
  • directly load a prepared dashboard: howto and bugfix

    directly load a prepared dashboard: howto and bugfix

    first - missing documentation: if you want to load a dashboard: first create it and then "save freeboard" to get a json on your local computer. then put this json on the server. then you should be able to call it like /freeboard/index.html#source=test.json (if its in the freeboard folder)

    second - fix default index.html: change in the default index.html to "$.getJSON" instead of "$.get"

    opened by toastbrotch 8
  • Full width and resizable widgets

    Full width and resizable widgets

    Hi, great initiative with this dashboard project.

    But why did you make it fixed width? A lot of screen estate is being unused.

    It would be awesome if you could use the entire screen width and be able to resize the widgets in whatever size you want.

    Look at this: http://gridster.net/demos/dynamic-grid-width.html

    You can support both custom widths, custom widget sizes and custom placements at once! Why restrict the user? I hated the fixed sizes with Geckoboard.

    Thanks.

    opened by Zyles 7
  • Gauge Colors - 100% could be green ?

    Gauge Colors - 100% could be green ?

    I use freeboard to monitor application availability metrics, and currently, 100% shows up as red. Is there a way to invert the colors on a per widget basis ?

    opened by unixengineer 7
  • No development in a long time; please give me ownership

    No development in a long time; please give me ownership

    @jheising

    It appears that development of Freeboard has been abandoned. I would like to take ownership of Freeboard. Would you kindly either:

    1. Make me an owner of the project, so I can keep it going or
    2. Merge all pull requests (after review, of course) and close out all relevant bugs (if needed, of course)?

    I like the work you have done and I would like to keep it going, preferably under the same name.

    opened by JonathanWilbur 6
  • Do I really need a plugin?  Is it possible to just use d3 or another library in an HTML widget?

    Do I really need a plugin? Is it possible to just use d3 or another library in an HTML widget?

    Just really looking for a simple way to get some more charts, especially pie and bar.

    opened by ScottBeeson 6
  • Smaller columns possible?

    Smaller columns possible?

    In order to better utilize screen real estate, I would like to define a smaller column size. For example, by going from 5 columns to 10 columns, I could effectively support "half-columns" and pack stuff more tightly. I tried simply raising the number of columns, but the columns retain their width. Any help is much appreciated - thanks!

    question 
    opened by tsjensen 6
  • Please help with Freeboard on Github IO

    Please help with Freeboard on Github IO

    Hi there, Could anybody give me some directions. I forked Freeboard to my own repositry. Next I made a Github page with freeboard from that repositry. And it works partially. I can make a time widget and a Google maps widget which work fine.

    But as I add a dweet datasource it will not update. Any clues. The original board does: http://freeboard.github.io/freeboard/ Mine does not: https://lucvolders.github.io/freeboard/

    What are the steps I need to do to have my Github freeboard get the updated data from dweet. My dweet is Lucstemp2018 and then temp (updated every half hour).

    Thanks Luc

    opened by Lucvolders 2
  • API functions to populate a freeboard instance?

    API functions to populate a freeboard instance?

    Hi there, is there some calls to populate a freeboard instance with panes and widget by code? I mean bypassing the loadDashboard() function that in my understanding is the only way to achieve that?

    Thanks!

    opened by SteMMo33 0
  • Widget disappears from pane

    Widget disappears from pane

    I'm having an issue where an HTML widget w/ dweet datasource will disappear from it's pane. I've seen this occur for two reasons, but doesn't happen with any real consistency.

    1. Re-arranging / re-sizing elements
    2. Submitting data to a dweet from two different scripts

    I have 3 other panes with an almost identical HTML widget that do not do this.

    I can fully delete the widget and pane (and even the datasource) and re-add, but it will happen again eventually.

    Inspecting the page, it shows that there should be an HTML widget there, but it has 0 height and no content. The widget controls are not available to click either.

    image

    opened by sctdan 1
  • Setting widget title font size

    Setting widget title font size

    Is there a way to set the font size of the widget title in the json file?

                                    {
                                            "type": "gauge",
                                            "settings": {
                                                    "title": "Test Widget",
                                                    "value": "datasources[\"dweet\"][\"test\"]",
                                                    "units": "",
                                                    "min_value": 0,
                                                    "max_value": 100
                                            }
    
    opened by thindata 0
  • Newbie help, please

    Newbie help, please

    I have created a dashboard with a name FUBAR100 accessible as https://freeboard.io/board/bSYZEB

    I am using dweet.io as datasource. I tried dweet.io/play to send dweets to the dashboard but the dashboard does not receive them even though the dweet push indicates success. The “last updated” field on the dashboard says “never” even if I refresh it many times.

    Note that there is no key called “INITIAL” in the dashboard yet but I still expect to see the dweet received.

    Below is the dweet.io/play session

    Request URL https://dweet.io:443/dweet/for/FUBAR100 Response Body { "this": "succeeded", "by": "dweeting", "the": "dweet", "with": { "thing": "FUBAR100", "created": "2021-05-14T05:19:54.382Z", "content": { "INITIAL": 1 }, "transaction": "d6ae9b84-8901-4868-b315-b084a91f82f4" } }

    opened by sunilmeister 0
  • Fix to admin bar display issues on mobile and tablet

    Fix to admin bar display issues on mobile and tablet

    Fixes https://github.com/Freeboard/freeboard/issues/276

    opened by bernietai 0
  • ajax request doesn't work json file on freeboard

    ajax request doesn't work json file on freeboard

    I'm trying to upload the dashboard by adding this in index-dev.html, but it doesn't work. it returns a black page

    $.ajax("/examples/weather.json", { 'async': true, 'method': 'get', 'success': function(data, status, xhr) { freeboard.loadDashboard(data); }; })

    opened by lau175 2
  • Display issue on IOS tablet / mobile

    Display issue on IOS tablet / mobile

    Tested on IOS14 Iphone 11

    On tablet and iphone breakpoints, admin bar is broken and not accessible

    Screen Shot 2021-03-25 at 3 59 04 pm

    opened by bernietai 0
  • Added Light theme and OS dark mode preference support

    Added Light theme and OS dark mode preference support

    I have created a basic 'light-theme' that uses "prefers-color-scheme" media feature, supported by most modern browsers https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-color-scheme

    Instant switch between light and dark theme using your OS's preference

    Screen Shot 2021-03-21 at 12 55 58 pm
    opened by bernietai 0
  • Is it possible to change column width?

    Is it possible to change column width?

    I have been wondering if it is even possible to change the collumn width? How can this be done?

    opened by 71GA 1
Owner
freeboard
Ridiculously simple dashboards for your devices.
freeboard
Open-source IoT Platform - Device management, data collection, processing and visualization.

ThingsBoard ThingsBoard is an open-source IoT platform for data collection, processing, visualization, and device management. Documentation ThingsBoar

ThingsBoard - Open-source IoT Platform 9.3k Sep 24, 2021
Tipboard - in-house, tasty, local dashboarding system

Tipboard Introduction Tipboard is a system for creating dashboards, written in JavaScript and Python. Its widgets ('tiles' in Tipboard's terminology)

Allegro Tech 1.1k Sep 23, 2021
:bar_chart: a nice and simple dashboard / landing page.

Dashboard Dashboard is just that - a dashboard. It's inspired by SUI and has all the same features as SUI, such as simple customization through JSON-f

Bastian Meissner 277 Sep 24, 2021
Your life's personal dashboard.

Reportr "Your life's personal dashboard." Reportr is a complete application which works like a dashboard for tracking events in your life (using a ver

Reportr 2.5k Sep 23, 2021
Self hosted Spotify tracking dashboard

Your Spotify Your Spotify is a self-hosted application that tracks what you listen and offers you a dashboard to explore statistics about it ! It's co

Timothee Boussus 221 Sep 18, 2021
A very simple static homepage for your server.

Homer A dead simple static HOMepage for your servER to keep your services on hand, from a simple yaml configuration file. Demo • Chat • Getting starte

Bastien Wirtz 2.8k Sep 20, 2021
An Application dashboard and launcher

Heimdall Visit the website - https://heimdall.site About As the name suggests Heimdall Application Dashboard is a dashboard for all your web applicati

LinuxServer.io 3.2k Sep 15, 2021
HTPC Dashboard to load website services, written in PHP

iDashboard-PHP NEW Updated dashboard available @ https://github.com/causefx/Organizr HTPC Dashboard to load website services, written in PHP [Inspired

null 122 Sep 21, 2021
DeviceHive Java Server

DeviceHive Java server DeviceHive turns any connected device into the part of Internet of Things. It provides the communication layer, control softwar

DeviceHive 259 Sep 2, 2021
Your web application for managing personal data.

Personal Management System Your central point for managing personal data (if current modules allow to do that). Documentation - available here Demo -

Dariusz 1.9k Sep 14, 2021
Another web application bookmark dashboard, with fun features.

DashMachine Another web application bookmark dashboard, with fun features. Want a feature added now? Open a bounty Screenshots Installation Docker doc

sportivaman 888 Sep 12, 2021
the data logging engine behind data.sparkfun.com

phant Phant is No Longer in Operation Unfortunately Phant, our data-streaming service, is no longer in service and has been discontinued. The system h

SparkFun Electronics 702 Mar 18, 2021
A simple, fully responsive Dashboard to forward to the services of your choice!

simple-dash Try the Demo here: https://kutyla-philipp.github.io/simple-dash/ A simple, fully responsive Dashboard to forward to the services of your c

Philipp Kutyla 239 Sep 4, 2021
A :baby: buddy to help caregivers track sleep, feedings, diaper changes, and tummy time to learn about and predict baby's needs without (as much) guess work.

Baby Buddy A buddy for babies! Helps caregivers track sleep, feedings, diaper changes, tummy time and more to learn about and predict baby's needs wit

Baby Buddy 1.1k Sep 16, 2021
A :baby: buddy to help caregivers track sleep, feedings, diaper changes, and tummy time to learn about and predict baby's needs without (as much) guess work.

Baby Buddy A buddy for babies! Helps caregivers track sleep, feedings, diaper changes, tummy time and more to learn about and predict baby's needs wit

Baby Buddy 1.1k Sep 16, 2021
The open and composable observability and data visualization platform. Visualize metrics, logs, and traces from multiple sources like Prometheus, Loki, Elasticsearch, InfluxDB, Postgres and many more.

The open-source platform for monitoring and observability. Grafana allows you to query, visualize, alert on and understand your metrics no matter wher

Grafana Labs 43.9k Sep 18, 2021
Self hosted FLOSS fitness/workout, nutrition and weight tracker written with Django

wger wger (ˈvɛɡɐ) Workout Manager is a free, open source web application that help you manage your personal workouts, weight and diet plans and can al

wger Project 1.6k Sep 20, 2021
Self hosted FLOSS fitness/workout, nutrition and weight tracker written with Django

wger wger (ˈvɛɡɐ) Workout Manager is a free, open source web application that help you manage your personal workouts, weight and diet plans and can al

wger Project 1.6k Sep 16, 2021
HTPC/Homelab Services Organizer - Written in PHP

Do you have quite a bit of services running on your computer or server? Do you have a lot of bookmarks or have to memorize a bunch of ip's and ports?

null 3.5k Sep 17, 2021