panel.js is the interface between your panel and the RuBAN dashboard engine. The dashboard system uses dojo to define a base-class from which all custom components should be derived. Don't worry if you don't usually develop in dojo we use it to impose minimal structure on your panel code as it interfaces with RuBAN and to give you the opportunity to use dojo's AMD feature. The example code provided in the quick start guide is all the dojo you'll ever have to write.

The panel super-class

The below snippet is the panel superclass in its entirety. Sub-classes of the panel should override the methods defined therein to hook into the lifecycle of the panel in the dashboard.

The panel super-class

define(["dojo/_base/declare"], function(declare){
	return declare("ruban.Panel", null, {
		constructor: function(){},
		initView: function(context){}, 
		redrawView: function(){},
		initEditor: function(context){},
		destroyView: function(context){},
		destroyEditor: function(context){}
	});
});

initView(context)

This method is called by RuBAN after the placeholder for the panel has been rendered and the contents of the view.html file have been injected into it. The context object has the following methods:

The context object

context = {
 
	getDom: function(){},
	getConfig: function(){},
	addFilterListener: function(handler_function, obj) {}
}

getDom: Provides access to the panels container DOM object. From here you can find and attach event handlers and logic to the elements within your panel markup.

getConfig: This method returns the configuration data saved for the panel. See Anatomy of a Custom Panel for a description of the data stored within this object.

addFilterListener:

The dashboard eco-system provides the ability to select a time range, devices and dimensions within sensor data stored in RuBANs timeseries database, this method allows custom panels to be notified of changes in the selection of these values.

The handler_function takes two parameters: filterName and filterValue. The (non-exhaustive list of) possible (example) values of these are:

filterName	filterValue
"timerange"	{ start_absolute: <timestamp_in_milliseconds>, end_absolute: <timestamp_in_milliseconds> }
"tags"	{ tags: { deviceId: [343] } }
"device"	{ deviceId: [302] }

filterName

filterValue

"timerange"

{
  start_absolute: <timestamp_in_milliseconds>, 
  end_absolute: <timestamp_in_milliseconds>
}

"tags"

{
  tags: {
    deviceId: [343]
  }
}

"device"

  deviceId: [302]

redrawView()

RuBAN invokes this method when the browser resizes or when the dimensions of the panel geometry changes, this gives custom panels the opportunity to re-calculate dimensions of elements within the view.

destroyView()

This method is called by RuBAN when it's taking down the custom panel giving he panel subclass the opportunity to clean-up any resources it may be using.

initEditor(context)

This method is called by RuBAN when the user launches the panels editor dialog. The context provided to this method is similar to that above except that it provides the "saveConfig" method:

Editor Context

context = {
                getDom: function(){},
                getConfig: function(){},
                saveConfig: function(config){}
            };

getDom: returns the DOM object of the editors container. The contents of the editor.html are placed within this DOM object so all form elements used to change the panels settings can be resolved and have event handlers and logic attached to them.

getConfig: returns the last saved values of the panels configuration, this data should be used to set the values of the editing fields within your editor

saveConfig: calling this method stores the provided config object in RuBANs data store for this panel and closes the editor.

destroyEditor()

This method is called by RuBAN when the editor for the panel is removed allowing the panel sub-class to clean up any resources it's using.

Now that you're familiar with the workings of the panel script the next step is to get sensor data into your custom panel

Browser not supported