Author in Browser

Watch this video to see how use NTK to create a project, and see the instructions below for more details.


1 Start NTK Server


In your command line app (e.g. Terminal), do the following to start the NTK server:

  1. Change directory to where you have NTK installed. For example, on the Mac:
    cd /Applications/NTKserver-0-6-2
  2. Start the server:
    npm start


2 Open Browser Session


The first step in using NTK is to open a browser window and have it point to the NTK server (be sure NTK is running and your hardware is configured). This means finding out the IP address of the computer or device running NTK. If you are are running NTK on the same device as the web browser (e.g. your laptop), you can use “localhost” instead of the IP address. Once you have this IP address, type it into the address bar of your browser with a port of “9001”. For example

3 Start Authoring

To author, you use the left and right toolbars.

  1. Turn Authoring to On by clicking on the top button in the left toolbar. Proceed to the next step to add widgets.
  2. You can show/hide the toolbars with two icons in the lower right.
    • “=” shows/hides the left system toolbar
    • “+” shows/hides the right widget toolbar

Turn Authoring Off when you want to run your project without the browser window open.


4 Add Widgets

On the right hand side of the browser window, you’ll see a list of widgets, categorized by function. Click on a function to see the available widgets, then click on a widget to add it to the workspace. You can drag it anywhere on the screen by clicking and dragging the top bar of the widget. Usually you will start with an input widget, for example AnalogIn. Then you might add a media widget to show something on the screen, e.g. Image. Or you may add an output widget, for example Servo.

Note that for input and output widgets, you must click on the checkbox in the upper left (input) or right (output) corner to actually connect to the input or output hardware.


5 Connect widgets

Once you have some widgets in your project, you need to connect them together. You do this by clicking on an output tab on the right side of one widget, and dragging it to an input tab on the left of another widget. This makes the data from one widget flow to the other widget.

Once your widgets are connected, you can see what happens as data changes. You don’t need hardware connected to do this, because you can change the output of many widgets by touching the dial and increasing or decreasing the values. Any widget connected to that widget’s output will receive those values and act accordingly, for example, the Image widget will move an image back and forth as its input varies.

alpha release2_1

6 Run Project

Once you have your patch the way you like it, there are four ways you can run it.

  1. Widgets visible – Your project can run in the same mode as you author. As soon as you connect something it’s running.
  2. Widgets invisible – you can click/touch on the Show/Hide Widgets button to hide the widgets, everything will continue to work.
  3. Full Screen – You can also select the Full Screen button to have your project take over your entire screen.
  4. No browser – you can set Edit to OFF, and then close the browser window. The project will continue to run in the background (on your computer if running NTK there, or on the remote device such as an Intel Edison if running it there). Of course, any screen related widgets (like Image, Sound, or Video), won’t keep working. But they’ll all be there when you reopen a browser session.

7 Save/Load Project

  • Save – Click on the “Save” button at the top of the toolbar to save the current project on the NTK server. The next time you launch the NTK server, this project will be running.
  • Export – To download the current project configuration, click on the Download button in the toolbar. This file is a plain text (JSON) file with an .ntk suffix. It can be easily exchanged with other NTK users.
  • Import – To load in a project from an .ntk file, click on the Load button in the toolbar.

8 Add Media

If you are using the Image, Video, or Audio widgets, you will want to add your own media. There is a special directory where you put these assets.

If you are using the NTK Application, you need to put assets inside the NTK App folder. On the PC, just open the directory and find the assets directory (see diagram). On the Mac, you’ll need to right/control-click on the and select “Show Package Contents”

For example, with the Image widget, you would do the following:

In the more tab, set the image file (.jpg, .png, .gif). This file can be local on your device, or it can be a URL pointing to an audio file on the Web. The default image file is in your NTK application directory, in:

App:>Contents>app>dist>assets>images>NTKlogogreen.jpg (on Mac, open app with right/control-click, Show Package Contents)

Command Line: NTKserver>dist>assets>images>NTKlogogreen.jpg

Place your own image files in this images directory, and use a URL such as:



9 Reset NTK


Sometimes an NTK patch can become unusable and may even crash NTK or cause it to hang. In this situation, run the following command:

npm run reset

This will delete the currently saved patch, and reset NTK with a blank patch.

NETLabTK - Tangible IoT