Getting Started

Note: the video refers to the Flash Component Inspector, but in current versions of Flash, widget parameters are set in the Property Inspector.

Overview

Description

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.

Chinese Language overview

widgetsWidgets – Visual Interface

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

Cursor_and_NETLabHub

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 or send output.

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

Download and install the NETLab Toolkit

  1. Download: Go to the Download page to get the current version of the toolkit for your platform. The file is a compressed .zip file that will decompress into a folder with all the necessary files.
  2. Install Widgets: Double click the NETLabFlashWidgets_X_X_X.zxp file. This will launch Adobe Extension Manager (be sure you have it installed from Adobe Cloud) which will do the widget installation for you.
    1. OR if you are running Flash 5.5 or earlier, you can double click on the NETLabFlashWidgets_X_X_X.mxp file to install it in your version of Flash
    2. OR move the NETLabFlashWidgets folder to the following location:
      Flash folder>Common>Configuration>Components
      In the new Adobe Animate:

      1. Control-click on the Animate application, then move the NETLabFlashWidgets folder to the following location:
      2. Contents>Common>Configuration>Components
  3. Install Hub: Put the entire HUB folder into your applications/programs directory (do not separate the Hub application from the folder it comes in – 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.
    1. 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.
    2. Windows: If the Hub does not stay open when you launch it – Windows will automatically ask you to download Java if you don’t have it installed. If you need to, download Java for Windows here.

Set up Arduino

The Arduino must have the Standard Firmata sketch installed on it.

  1. Download the Arduino IDE
  2. Plug the Arduino into your computer with a USB cable.
    1. If you have an older Arduino such as the Duemilanove, you’ll need to install the appropriate driver from FTDI.)
    2. On the PC, you may need to install a .inf file as outlined on the official Arduino Getting Started page
  3. Open the Arduino IDE software  and select File>Examples>Firmata>StandardFirmata
  4. Select the correct board from Tools>Board
  5. Select the correct serial port from Tools>Serial Port (mac: usbmodemxxx pc: COMxxx)
  6. Upload Standard Firmata to your Arduino by clicking on the right arrow button in the upper left of the sketch

For more detailed instructions on getting your Arduino working, see the following Arduino.cc pages:

Test with a knob and Arduino

To see if everything is working, you can hook up a knob to your microcontroller and have an AnalogIn widget display the position of the knob. Watch the video Intro to NETLab Toolkit to see all of this in action.

ArduinoUnoFront_parts

Image from this great tutorial: http://www.cs.uregina.ca/Links/class-info/207/

Hook it up

  1. Attach a knob to Analog Input 0 of the Arduino
    1. 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”.
    2. Hook the ground wire (usually BLACK) up to the pin marked “GND” (i.e. 4th pin in from right)
    3. Hook the power wire (usually RED) up to the pin marked “5V” (i.e. third pin in from right)
    4. Note: The left and right (ground and power) connections on a knob can be swapped, which will result in a reversal of which part of the knob is zero, and which is the maximum amount.
      knob_wires_big
      knob_hookup
  2. Connect the Arduino to your computer with a USB cable
  3. Start the Hub server application
  4. Use the AnalogIn Widget – Flash version
    1. Open Flash and create a new Flash document (ActionScript 3)
    2. Open the WINDOW>COMPONENTS palette and drag the AnalogIn widget to the Flash stage
    3. Give it an instance name of “input0”
    4. Save the Flash file, and select CONTROL>TEST MOVIE to run it
  5. 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).
  6. Make changes to the sensor and see them reflected in the AnalogIn indicator.

Make a graphic move

  1. Add a ClipControl widget to the stage and in the Property Inspector (lower part) set its “InputSource” to the name you gave the AnalogInput (e.g. “input0″).
  2. Create or import a graphic on the screen, and turn it into a symbol.
  3. Set the new symbol’s instance name (e.g. “clip1″) – In HTML5, it will get a name automatically
  4. Test the movie again, and experiment with the different ClipControl properties and see how sensor changes affect the symbol.

Additional Topics

Other widgets and capabilities to explore
The toolkit has widgets for almost every common task based on the experience of designers.

  • Widget Overview – A page that lists all widgets with brief descriptions and a description of common characteristics of the widgets
    • Input-Output – These widgets communicate with microcontrollers, external devices, software, and other computers.
    • Media – These widgets control sound, images, and video.
    • Logic-Processing – These widgets enable the processing and interpretation of values as they go from one widget to the next.
  • 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
Any changes you make to a widget while the movie is running, e.g. to the min and max of a AnalogInput widget, are saved in an XML file with the same name as the Flash file. So if the Flash file is named myFirst1.swf,  the corresponding settings file will be called myFirst1.xml in the same directory as the SWF. The next time you run the SWF, the run-time settings will be restored to where they were during the previous run.

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.

Using the Flash SWF in Full Screen mode
If you need to run your Flash SWF file outside of the Flash application, e.g. to use it in fullscreen mode, you’ll need to change the Flash security settings for that computer. This is because the widgets in the Flash SWF needs to communicate with the Hub, and that causes a so-called security sandbox violation. To permit the communication between the Hub and Widgets, do the following:

  1. Get the latest version of the stand alone Flash Player Projector (non-debugging version).
  2. Go to the web page to manage your Flash Security Settings.
  3. 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.
  4. In this Settings Manager, select the middle “Always Allow” button.
  5. Then, click on the pull-down menu “Edit Locations…” and select “Add Location…”
  6. 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.
  7. 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.
  8. To show your project in full-screen mode, use command F (Mac) or control F (PC) to go full screen.


Firewall Issues
On the Mac: If you are working with the Make Controller, or accessing a remote Hub, or having some other mysterious problem where everything seems right but you are not getting data from or to the controller, be sure to check if you have your firewall turned on. If it is, it will prevent things from working write. You can turn it off in System Preferences>Security>Firewall. We’ve also seen problems if Little Snitch is running.

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
If after installing Java the Hub still does not work, you’ll need to make sure Java is in your “Path” environment variable for XP. The process for setting this up is outlined here  – instructions here or get a windows expert to help you with this since it is a bit complicated. You need to be logged in as an administrator.

Last modified July 21st, 2016