On This Page

Create A Widget

NTK is designed to be extended so the community can easily add new features. If there is something NTK doesn’t do that you wish it did, you can create your own widget, or find someone who has.

Widgets are created by starting with a Javascript file, an HTML template, and a css styles document. We’ve provided a template for you by creating a simple widget called Blank. This includes all the starter files, and shows you how a widget works. You copy the Blank files folder to start a new widget.

Instructions

1 Add the new folder and files

Copy the Blank Widget folder located in the /app/scripts/views directory and name this new folder with the name of your widget. This folder has three files needed for each widget

  • MyWidget.js – the javascript view for the widget – must be named with widget name
  • template.js – the HTML template for the widget – keep this name
  • styles.scss – the css in SASS format – keep this name

Rename the view file to your widget name (e.g. from Blank.js to MyWidget.js).

Set the Widget Name - Open the view file to see comments on building out a custom view in Javascript. In this file, be sure to change names of the typeID, className and title to your new widget name (paying close attention to capitalization in the Blank.js example).

Set the Widget Category – Uncomment the “categories” line and set the category you would like the widget to appear in on the right hand side of the browser interface for adding widgets. If you create a new category, this category will be automatically added to the interface.

categories: ['I/O'],

OR

categories: ['myCategory'],

 

2 Add the new widget to system

When you are ready to test and run your widget you will need to add it into the system by opening the WidgetMap.js file located in the same directory (/app/scripts/views). There are three changes that need to be made to this file (in the future, you’ll simply place the new widget directory in the right place, and it will immediately become usable).

1) Look at the top of the file in the define section:

define([
    'views/Blank/Blank',
    'views/AnalogIn/AnalogIn',
    'views/AnalogOut/AnalogOut',
    'views/Code/Code',
    'views/Image/Image',
],

and add your widget like so:

define([
    'views/Blank/Blank',
    'views/AnalogIn/AnalogIn',
    'views/AnalogOut/AnalogOut',
    'views/Code/Code',
    'views/Image/Image',
    'views/MyWidget/MyWidget',
],

Note that the “.js” at the end of the file is unnecessary.

2) Then pass the widget into the function call as a parameter (order is very important. Always add to the end):

function(Blank, AnalogIn, AnalogOut, Code, Image){

...

function(Blank, AnalogIn, AnalogOut, Code, Image, MyWidget){

3) Add your widget to the map like so:

    return {
        'Blank': Blank,
        'AnalogIn': AnalogIn,
        'AnalogOut': AnalogOut,
        'Code': Code,
        'Image': Image,
    };

...

    return {
        'Blank': Blank,
        'AnalogIn': AnalogIn,
        'AnalogOut': AnalogOut,
        'Code': Code,
        'Image': Image,
        'MyWidget': MyWidget,
    };

This will both add the widget to the lefthand toolbar and allow your widget to be loaded from the GUI.

To update everything, run “npm run dev” in the NTK directory.

That’s it!

3 Add your own code and layout

Modify the Blank code to suit the design of the new widget and test, adding Javascript code to the MyWidget.js file, setting the layout of the widget by editing the template.js file, and altering the CSS for the widget in the styles.css file.

NETLabTK - Tangible IoT