{"_id":"566b3b8614c22f1900f00b7b","project":"56009c541503430d007cc951","user":"5564f227f0f70f0d00a9ab20","githubsync":"","version":{"_id":"56009c571503430d007cc954","__v":1,"project":"56009c541503430d007cc951","createdAt":"2015-09-22T00:09:59.421Z","releaseDate":"2015-09-22T00:09:59.421Z","categories":["56009c581503430d007cc955"],"is_deprecated":false,"is_hidden":false,"is_beta":false,"is_stable":true,"codename":"","version_clean":"1.0.0","version":"1.0"},"__v":3,"category":{"_id":"56009c581503430d007cc955","__v":41,"project":"56009c541503430d007cc951","version":"56009c571503430d007cc954","pages":["56009c591503430d007cc957","56009c7f0c703d19009531c6","56009c911503430d007cc958","56009c9c1503430d007cc95a","56009ca697f69f1700f21a55","56009cb81503430d007cc95c","56009cc80c703d19009531c8","56009ce18c0c9d0d00dcaef8","56009cf21503430d007cc95e","56009cfe81a9670d006d146a","56009d0781a9670d006d146c","56009d1d81a9670d006d146e","56009d271503430d007cc960","56009d581503430d007cc962","56009d651503430d007cc964","56009d711503430d007cc966","56009d8d81a9670d006d1472","56009d970c703d19009531ce","56009da197f69f1700f21a5a","56009dae3aa0520d00da0bff","56009db83aa0520d00da0c01","56009dcf81a9670d006d1474","56009ddb3aa0520d00da0c04","56009de597f69f1700f21a5d","56009df80c703d19009531d0","56009e0d8c0c9d0d00dcaefa","56009e213aa0520d00da0c08","56009e2c81a9670d006d1476","5600a4971503430d007cc97d","561c5a6b01e1c417001f54f1","561d9845d712bc0d00777b72","563cfe55d8f2d20d00448d14","563d09d9913e650d00b65f92","566b3b8614c22f1900f00b7b","568ff8529ebef90d00872887","568ff8ed4719c119002ce637","5690922a208b910d00ed77b4","56a93fd311d0390d00a3d29a","56b25cc8a5a1020d00cf4cc3","56b25f02147e900d00d64990","56b291ed4e71701700232ea4"],"sync":{"url":"","isSync":false},"reference":false,"createdAt":"2015-09-22T00:10:00.324Z","from_sync":false,"order":9999,"slug":"documentation","title":"Documentation"},"updates":[],"next":{"pages":[],"description":""},"createdAt":"2015-12-11T21:09:26.763Z","link_external":false,"link_url":"","sync_unique":"","hidden":false,"api":{"results":{"codes":[]},"settings":"","auth":"required","params":[],"url":""},"isReference":false,"order":36,"body":"# Octoblu Usage\n\n1. Create a UUID/TOKEN from the Things page in app.octoblu.com\n2. Goto dashboard.octoblu.com?uuid=YOUR-UUID&token=YOUR-TOKEN\n3. Send messages to the freeboard device, use freeboard\n4. ???\n5. PROFIT\n\n\n##Using freeboard.io service w/ Octoblu plugin\n1. Create freeboard account\n2. Create new freeboard\n3. On the bottom right click \"DEVELOPER CONSOLE\"\n4. Add this link https://s3-us-west-2.amazonaws.com/octoblu.com/meshblu_frb.js\n5. Create a new datasource, the Octoblu plugin should now be available.\n6. Create a generic device in Octoblu using the Things page.\n7. Use the UUID/TOKEN for the datasource configuration\n8. In the flow designer, drop the freeboard node in and set it to forward message.\nAny data sent to that device will be available in freeboard via the datasource.\n\n##HOST YOU OWN FREEBOARD\n[block:embed]\n{\n  \"html\": false,\n  \"url\": \"https://github.com/octoblu/freeboard\",\n  \"title\": \"octoblu/freeboard\",\n  \"favicon\": \"https://assets-cdn.github.com/favicon.ico\",\n  \"image\": \"https://avatars0.githubusercontent.com/u/5607067?v=3&s=400\"\n}\n[/block]\n\n\n1. Clone the repo\n2. In app.octoblu.com create a Generic Device through the Connect page.\n2. Open index.html?uuid=your-uuid&token=your-token in a browser using the credentials from prev step.\n4. In app.octoblu.com create a Generic Device through the Connect page.\n5. Click on Add Data Source\n6. Enter your Generic Device's UUID and TOKEN (you can get this from the connect page)\n7. Save this data source.\n8. Click Add Pane\n9. Clicking on +datasource anywhere will let you select that datasource, any data sent to that datasource as JSON will appear as selectable key values that you can drop into this pane's assignable values.\n10. To save, press Save Dashboard, this will update the device that acts as your freeboard from step 1.\n\n\n==========\n==========\n\nfreeboard\n==========\n\n**free·board** (noun) *\\ˈfrē-ˌbȯrd\\*\n\n1. 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.\n2. the act of freeing data from below the \"waterline\" and exposing it to the world.\n3. a damn-sexy, open source real-time dashboard builder/viewer for IOT and other web mashups.\n\n### Demo\nhttp://freeboard.github.io/freeboard\n\nhttps://freeboard.io\n\n### Screenshots\n![Weather](https://raw.github.com/Freeboard/branding/master/screenshots/freeboard-screenshot-1.jpg)\n\n### What is It?\n\nFreeboard 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.\n\nThe 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.\n\n### How to Use\n\nFreeboard 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.\n\n### API\n\nWhile 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.\n\n-------\n\n**freeboard.initialize(allowEdit, [callback])**\n\nMust be called first to initialize freeboard.\n\n> **allowEdit** (boolean) - Sets the initial state of freeboard to allow or disallow editing.\n\n> **callback** (function) - Function that will be called back when freeboard has finished initializing.\n\n-------\n\n**freeboard.newDashboard()**\n\nClear the contents of the freeboard and initialize a new dashboard.\n\n-------\n\n**freeboard.serialize()**\n\nSerializes the current dashboard and returns a javascript object.\n\n-------\n\n**freeboard.loadDashboard(configuration, [callback])**\n\nLoad the dashboard from a serialized dashboard object.\n\n> **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.\n\n> **callback** (function) - Function that will be called back when the dashboard has finished loading.\n\n-------\n\n**freeboard.setEditing(editing, animate)**\n\nProgramatically control the editing state of the of dashboard.\n\n> **editing** (bool) - Set to true or false to modify the view-only or editing state of the board.\n\n> **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).\n\n-------\n\n**freeboard.isEditing()**\n\nReturns boolean depending on whether the dashboard is in in the view-only or edit state.\n\n-------\n\n**freeboard.loadDatasourcePlugin(plugin)**\n\nRegister a datasource plugin. See http://freeboard.github.io/freeboard/docs/plugin_example.html for information on creating plugins.\n\n> **plugin** (object) - A plugin definition object as defined at http://freeboard.github.io/freeboard/docs/plugin_example.html\n\n-------\n\n**freeboard.loadWidgetPlugin(plugin)**\n\nRegister a widget plugin. See http://freeboard.github.io/freeboard/docs/plugin_example.html for information on creating plugins.\n\n> **plugin** (object) - A plugin definition object as defined at http://freeboard.github.io/freeboard/docs/plugin_example.html\n\n-------\n\n**freeboard.showLoadingIndicator(show)**\n\nShow/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.\n\n> **show** (boolean) - Set to true or false to show or hide the loading indicator.\n\n-------\n\n**freeboard.showDialog(contentElement, title, okButtonTitle, cancelButtonTitle, okCallback)**\n\nShow a styled dialog box with custom content.\n\n> **contentElement** (DOM or jquery element) - The DOM or jquery element to display within the content of the dialog box.\n\n> **title** (string) - The title of the dialog box displayed on the top left.\n\n> **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.\n\n> **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.\n\n> **okCallback** (function) - A function that will be called if the user presses the OK button.\n\n-------\n\n**freeboard.getDatasourceSettings(datasourceName)**\n\nReturns an object with the current settings for a datasource or null if no datasource with the given name is found.\n\n> **datasourceName** (string) - The name of a datasource in the dashboard.\n\n-------\n\n**freeboard.setDatasourceSettings(datasourceName, settings)**\n\nUpdates settings on a datasource.\n\n> **datasourceName** (string) - The name of a datasource in the dashboard.\n\n> **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.\n\n-------\n\n**freeboard.on(eventName, callback)**\n\nAttach to a global freeboard event.\n\n> **eventName** (string) - The name of a global event. The following events are supported:\n\n> **\"dashboard_loaded\"** - Occurs after a dashboard has been loaded.\n\n> **\"initialized\"** - Occurs after freeboard has first been initialized.\n\n> **callback** (function) - The callback function to be called when the event occurs.\n\n-------\n\n### Building Plugins\n\nSee http://freeboard.github.io/freeboard/docs/plugin_example.html for info on how to build plugins for freeboard.\n\n### Testing Plugins\n\nJust edit index.html and add a link to your javascript file near the end of the head.js script loader, like:\n\n```javascript\n...\n\"path/to/my/plugin/file.js\",\n$(function()\n{ //DOM Ready\n    freeboard.initialize(true);\n});\n```\n\n### Copyright \n\nCopyright © 2013 Jim Heising (https://github.com/jheising)<br/>Copyright © 2013 Bug Labs, Inc. (http://buglabs.net)<br/>Licensed under the **MIT** license.","excerpt":"Build your own IoT Dashboard!","slug":"freeboard","type":"basic","title":"Freeboard"}

Freeboard

Build your own IoT Dashboard!

# Octoblu Usage 1. Create a UUID/TOKEN from the Things page in app.octoblu.com 2. Goto dashboard.octoblu.com?uuid=YOUR-UUID&token=YOUR-TOKEN 3. Send messages to the freeboard device, use freeboard 4. ??? 5. PROFIT ##Using freeboard.io service w/ Octoblu plugin 1. Create freeboard account 2. Create new freeboard 3. On the bottom right click "DEVELOPER CONSOLE" 4. Add this link https://s3-us-west-2.amazonaws.com/octoblu.com/meshblu_frb.js 5. Create a new datasource, the Octoblu plugin should now be available. 6. Create a generic device in Octoblu using the Things page. 7. Use the UUID/TOKEN for the datasource configuration 8. In the flow designer, drop the freeboard node in and set it to forward message. Any data sent to that device will be available in freeboard via the datasource. ##HOST YOU OWN FREEBOARD [block:embed] { "html": false, "url": "https://github.com/octoblu/freeboard", "title": "octoblu/freeboard", "favicon": "https://assets-cdn.github.com/favicon.ico", "image": "https://avatars0.githubusercontent.com/u/5607067?v=3&s=400" } [/block] 1. Clone the repo 2. In app.octoblu.com create a Generic Device through the Connect page. 2. Open index.html?uuid=your-uuid&token=your-token in a browser using the credentials from prev step. 4. In app.octoblu.com create a Generic Device through the Connect page. 5. Click on Add Data Source 6. Enter your Generic Device's UUID and TOKEN (you can get this from the connect page) 7. Save this data source. 8. Click Add Pane 9. Clicking on +datasource anywhere will let you select that datasource, any data sent to that datasource as JSON will appear as selectable key values that you can drop into this pane's assignable values. 10. To save, press Save Dashboard, this will update the device that acts as your freeboard from step 1. ========== ========== 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](https://raw.github.com/Freeboard/branding/master/screenshots/freeboard-screenshot-1.jpg) ### 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. ### 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: ```javascript ... "path/to/my/plugin/file.js", $(function() { //DOM Ready freeboard.initialize(true); }); ``` ### Copyright Copyright © 2013 Jim Heising (https://github.com/jheising)<br/>Copyright © 2013 Bug Labs, Inc. (http://buglabs.net)<br/>Licensed under the **MIT** license.