HTML5 Widgets

Note: This page is out of date because we are building the full version of the new toolkit. Please see this update for more infohttp://www.netlabtoolkit.org/flash/netlabtk-update/

 

 

 

The NETLab Toolkit HTML5 Widgets are a new, drag and drop way to interact with the Internet of Things. Hook up your Arduino, go to the toolkit webpage, and start sensing and acting.

The HTML5 widgets are an alternative to the original Flash Pro based widgets. The new widgets run in any modern browser that supports HTML5, including those on mobile devices. Currently in alpha form, the HTML5 authoring environment can be accessed at netlabtoolkit.org/html5widgets, and used with the 2.0 version of the Hub, available as part of the NETLab Toolkit 4.0 release. Setup of an Arduino or other systems is the same as for the Flash widgets – please review the Getting Started page for more information.

For the most part, the HTML5 Widgets work the same as the Flash versions, and information for them can be found in the current Widget documentation.

Note: The design of the HTML5 Widget authoring environment is rapidly evolving, so expect frequent changes!

Resources

Video

Currently Supported Widgets

  • AnalogIn, AnalogOut, ClipControl, ServoOut

How it Works

The NETLab Toolkit HTML5 Widgets are used in the context of a web app that runs in your browser. This is similar to creating word processing documents in Google Drive (formerly Google Docs). The web browser presents the application to you from our website, and there is nothing to download. The HTML5 Widgets use the advanced capabilities of modern web browsers to create a complete working environment, replacing the need for an authoring application like Flash. And of course, this authoring environment is free, open-source, and can be used on any device.

To work with the Arduino and other technologies, you must run the Hub application on a computer. This can be on the same computer as the web browser – the simplest set up – or on another computer that’s accessible on the network. For example, if you want to run the HTML5 Widgets on an iPad, you can run the Hub on a computer and attach the Arduino to that computer, setting the IP address of that Hub computer in the widget interface.

The Authoring Environment

Working with Widgets

  • Add: Click on the widget name in the left sidebar to add one to the stage
  • Move: Click and drag the black bar at the top of the widget
  • Change Settings: Click on the top black bar, and then click on the gray “params” tab that pops up. This will show a panel with all the options available for the widget. Make any changes, and click on the params tab again to save and close the settings.
  • Connect: Click on the button at the top right of the widget IN/OUT widgets like AnalogIn or ServoOut to connect the widget to an Arduino or other system.
  • Delete: Open the params panel, and click on the “Delete Widget” link at the bottom of the panel.
  • Delete All widgets: Click on “Delete all Widgets” in the left sidebar.

Add an Image

To add an image that can be manipulated by the ClipControl widget, click on the Choose File button in the left side panel. This will open a file dialog. Navigate to your image (.jpg, .gif, .png) and select it. You can then move the image around on the stage.
This is currently a very rudimentary implementation and we’re working on other approaches. In particular, we want to add capability for video and text.

Save a Sketch

Sketches (an HTML5 Widgets project) are saved automatically as you work on them. The current project will show up when you return to the site. This features is brand new and will be changing rapidly. Currently, only a single project is saved, but we’re working on adding the capability for multiple projects.

Notes:

  • Sketches are saved in your browser: To retrieve the sketch, you must open the site with the same browser. E.g. if you create the sketch in Chrome, you won’t be able to see it in Firefox.
  • Sketches are saved locally: Your sketches are NOT saved on the NETLab Toolkit web server, but are in your computer, within the browser’s “localstorage” system.

Current limitations and future plans for saving:

  • Media elements are not saved: Right now, if you place an image on the stage, it will not be saved and won’t show up the next time you visit the site.
    • We’re working on a solution to this, and the way images work may change.
  • Only one sketch is saved: Only the current sketch is saved in the current version.
    • We have most of the code in place to allow multiple sketches to be saved, and are now working on the interaction design to allow naming, adding, and deleting saved sketches. Stay tuned.
  • On-screen settings not are saved: On-screen settings such as AnalogIn Min/Max are not now saved.
    • The settings in ClipControl will be fixed in the next release.

Presentation Options

  • Hide the widgets: Click on the “ShowHide Widgets” button in the left side panel. This will leave any images, but hide all the widgets. Everything will continue to work the same.
  • Show full screen: Click on the “FullScreen” button to take over the entire screen and hide the authoring panels. Be sure to hide the widgets first if you don’t want to see them in full screen mode. Hit the Escape Key to return to normal viewing. Full Screen does not seem to work on an iPad or iPhone.

Last modified March 5th, 2015