For a short video introduction to the NETLab Toolkit, see the video Intro to the NETLab Toolkit.
The NETLab Toolkit is a visual system for creating tangible interactions. It’s composed of two parts, the Widgets and the Hub. The Widgets are the visual interface for the toolkit, and the Hub is a server application that coordinates communication between your widgets and external devices and protocols such as the Arduino and OSC.
The widgets are drag-and-drop screen objects that do different functions, and hook together to create a project. Typically, they receive values, do something with those values, and then pass them on to the next widget.
For example, the AnalogIn widget receives values from an external device like an Arduino, allows the user to adjust those values to best work in their project, and then passes on the values to another widget such as the ClipControl widget. The ClipControl widget receives the values, and then uses them to set a property of a graphic on the screen, for example the left-to-right (X) position.
Most widgets have on-screen controls that can be used interactively, as well as parameters used for the widget settings. For example, the ClipControl widget has a screen control to set which graphic property is controlled, and a parameter that defines which other widget it is receiving values from.
Hub – Communication Server
The Hub is a server that works in the background as a separate application, and communicates with a variety of devices (e.g. Arduino or XBee) and software (e.g. OSC applications like OSCemote). Widgets communicate with the Hub to get input, or send output. Other non-widget applications can also communicate with the Hub using the Sockets protocol (e.g. see this explanation of how to get Processing to talk to the Hub).
Follow the steps below to get started using the NETLab Toolkit. You can click on the title of each step to to expose or hide its contents.
Getting Started First Steps
Download and install the NETLab Toolkit
- Install the widgets by simply double clicking on the file NETLabFlashWidgets_X_X_X.mxp. This file will launch the Adobe Extension Manager which will do the widget installation for you.
- OR move the NETLabFlashWidgets folder to the following location:
- OR move the NETLabFlashWidgets folder to the following location:
- Put the entire HUB folder (e.g. NETLabHub_2012_07_18_mac) into your applications/programs directory (do not separate the Hub application from the folder it comes – if you do, it will not work). You may want to put the Hub application in your dock or start menu. The Hub requires that Java be installed on your computer.
- Mac: Java is installed by default on the Mac up to OS X Snow Leopard (10.6). From Lion (10.7) on, it is optional. When you try launch the Hub the first time, you may be asked to install Java.
- Windows: Download Java for Windows here. If the Hub does not stay open when you launch it – Windows 7 will automatically ask you to download Java if you don’t have it installed.
- Plug the Arduino into your computer with a USB cable. If you have an UNO, skip to step 3
- If you have an older Arduino such as the Duemilanove, you’ll need to install the appropriate driver from FTDI
- Open the Arduino software and select File>Examples>Firmata>StandardFirmata
- Upload Firmata to your Arduino
For more detailed instructions, follow these links for setting up the Microcontroller(s) you are using, and then connecting a sensor
Test with a knob and Arduino
Hook it up
- Attach a knob to Analog Input 0 of the Arduino
- Hook the center wire from the knob, which is the “signal” wire (usually WHITE or YELLOW) to the desired port on the Ardiuno, Analog In Port 0 in this example, marked “0″.
- Hook the ground wire (usually BLACK) up to the pin marked “GND” (i.e. 4th pin in from right)
- Hook the power wire (usually RED) up to the pin marked “5V” (i.e. third pin in from right)
- Connect the Arduino to your computer with a USB cable
- Start the Hub server application (note: on OS X Mountain Lion, you will need to control-click the app the first time and select Open to allow the computer to use this application)
- Use the AnalogIn Widget – Flash version
- Open Flash and create a new Flash document (ActionScript 3)
- Open the WINDOW>COMPONENTS palette and drag the AnalogIn widget to the Flash stage
- Give it an instance name of “input0″
- Save the Flash file, and select CONTROL>TEST MOVIE to run it
- Use the AnalogIn Widget - HTML5 version
- Open your browser to netlabtoolkit.org/html5widgets/
- Click on the AnalogIn link to put a widget in the work area
- If it is the first input widget, it will have a name of “input0″
- Click on the “Connect” button at the top right of AnalogIn to establish a connection with the microcontroller (note: it may take a few seconds for the connection to be established).
- Make changes to the sensor and see them reflected in the AnalogIn indicator.
Make a graphic move
- Add a ClipControl widget to the stage and in the Component Inspector set its “InputSource” to the name you gave the AnalogInput (e.g. “input0″).
- Create or import a graphic on the screen, and turn it into a symbol.
- Set the new symbol’s instance name (e.g. “clip1″) – In HTML5, it will get a name automatically
- Test the movie again, and experiment with the different ClipControl properties and see how sensor changes affect the symbol.
Other widgets and capabilities to explore
- Widget Overview – A page that lists all widgets with brief descriptions and a description of common characteristics of the widgets
- Things to Try Out – These widgets and approaches are some of the most important things to explore
- AnalogOut – Control the brightness of an LED connected to the Arduino
- VideoControl – Start and stop a video from any input – use this video to experiment AplusD_walkthrough
- ServoOut – Control the rotation/position of a motor and make physical things move
- IfThenElse – Add logic to your project, e.g. by testing to see if sensor values are in a certain range
- OSC – Get input or send output using this communication protocol used in music and devices like the WiiMote
- CloudIn/CloudOut – Create Internet of Things projects that send and/or receive data from cloud services
- MotionTrack/Kinect – Use a webcam or a Kinect to control a sound or anything else based on someone’s position
- Counter – Tracks how many times an event happens
- TweenIt – Trigger a graphic to animate, or the volume of a sound to fade up over time
- Insert – Add your own custom code to a project
Widget Parameters Saved in an XML File
If you move the SWF, be sure to also move the XML file. Simiarly, if you change the name of the SWF, you can copy the XML file to have the same prefix name and the settings will be preserved for the newly named file. If you do not do this, the settings for all the widgets will return to their defaults.
- Get the latest version of the stand alone Flash Player Projector (non-debugging version).
- Go to the web page to manage your Flash Security Settings.
- In the upper right of this page (under “Global security settings for content creators”), a Flash application will open with a title of “Adobe Flash Player Settings Manager”. Sometimes this is slow, and takes a while to open.
- In this Settings Manager, select the middle “Always Allow” button.
- Then, click on the pull-down menu “Edit Locations…” and select “Add Location…”
- Then click on “Browse for Folder…” and select the folder where your SWF is located, OR simply select your entire hard drive, or desktop, or user folder so you never have to go through this process again. If you are using an external drive for your work, you’ll need to select that.
- To run your project outside of Flash, find the .SWF file. Right (control) click on the file, and open it with the Flash Player, latest version on your system (there are often many copies of this application on your computer) rather than Flash Pro.
- To show your project in full-screen mode, use command F (Mac) or control F (PC) to go full screen.
On the PC: Often when you start up the Hub, Windows will let you know that it has blocked the program’s network access. You need to UNBLOCK when this dialog occurs.
Windows XP & Java
Last modified March 15th, 2013