Root Folder

The zip file must have a single root folder, the folder name being the unique name your custom panel. When uploading your panel RuBAN will inspect the name of the root folder, if the folder name is not already among the list of existing panels RuBAN will create a new panel in the catalog. If the root folder matches an existing panel the existing panel will be updated with the contents of the zip file.

panel.json

The panel.json file provides meta-data to RuBAN about the panel being created. Below is the contents of the quick start example panel.json file:

panel.json

{
    "name": "Example Panel",
    "description": "A panel used to illustrate RuBANs extensibility",
    "glyph": "rocket",
   	"defaults": {
   		"title": "Custom Panel Example",
   		"details": "mmmm coffee"
    }
}

"name"

This a label for the panel, for human consumption. The value need not match the root folder name.

"description"

A short description of the panels purpose and function. The name and description for the tool tip of the panel when it's presented in the panel catalog of RuBANs dashboard editor.

"glyph"

This is the name of the glyph/icon to be used when presenting the panel in the panel catalog. The glyphs are provided by Font Awesome, take a look here for the an icon you like and put it's name into the "glyph" field and that icon will now represent your panel in the catalog.

"icon"

Can't find a glyph you like? No problem. You can put a 32x32 .png, .gif, .svg file into your root folder or a sub-folder of the root folder and put it's path into this field. e.g. if you have an icon called mypanel.png in root folder/img then your "icon" entry should be "img/mypanel.png".

"defaults"

This is a hash of data to be provided to the panel when dragged into the dashboard initially. This data would be edited by your panel editor code (more about that in a later article). In our example panel we use the values of the "title" and "details" fields as the text for our panels header and body respectively.

view.html

view.html is a fragment of markup which is injected into the panel container created by RuBAN for your custom panel. Use this file to define the structure for your panel. Static content only don't pull in script tags, they might not get rendered or, at best, result in unpredictable results. Use the panel.js script to attach logic to your view.

editor.html

editor.html is also a fragment of markup used to define the static structure of your panel editor. The panel editor is used to edit settings and parameters used in your view logic. The fields you define in the "defaults" field of your panel.json are typically edited by your editor. Just as in the view.html you should define only static content here deferring any logic to the panel.js file I'll describe next.

panel.js

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. Find out more about writing panel code in panel.js - adding logic to your custom panel.

styles.less

RuBAN uses the less pre-processor on styles defined in the styles.less file. If you have never used less, or don't want to, you can just define you css styles in css syntax in this file and the result is the same. The example code in the quick start guide will show you how to define a basic style sheet for your panel. More detail about styling your panel can be found in styles.less - creating a stylesheet for your panel

Browser not supported