This tutorial introduces the visual editor: a graphical interface that allows to change the TimeSquAir’s behavior.

The visual editor is a web page that you access with your internet browser (use the dedicated tutorial First Launch to see more about that) to manage TimeSquair.

It allows to set preferences as well as its behavior.

The visual editor uses IBM’s Node-Red (http://node-red.org) an open source visual editor for using the internet of things.

It is a very dynamic project with an ever growing community.

Discovering Node-RED

The visual editor looks like this:

The Palette contains all available nodes (there is menu to import new ones from the community). Nodes can be wired together to build flows. To make a flow, nodes should be drag’n dropped from the palette to the workspace and them linked together.

In the flow above, clicking “Go” goes through “hello” and ends in the display node that prints “Hello” in the display tab.

How to build a flow

Building a flow is easy:

  • Drag and drop nodes form the left palette
  • Wire them together by dragging their handles

Activating

Once modified (by adding or removing nodes or wires) the flow should be activated by using the activate top right button.

Tigger the flow

The flow is triggered by a manual event (as the “Go button” above) or by external events (tweets, NFC tag, …). When triggered, the execution starts with the trigger node and goes right through the flow. If a Debug or Display node is invoked, a string is displayed in the info/debug tab.

As stated in the “Try and understand” tutorial, flows follow the scheme below:

Learn more about Node-RED

First read the IBM’s Node-Red website (http://node-red.org).

noderedguide.com series of lectures designed to get you started with Node-RED

You can also go to Youtube to get great video tutorials.

https://youtu.be/r3_L8zgYUkE

How to find new nodes

There is a great Node-RED community that publish new nodes every day.

Use the “Import Node tutorial” to learn how to import nodes.

Back to top