Getting started with NoFlo on the browser
Follow these directions to make a “Hello World” NoFlo browser project with two nodes and one edge.
We recommend Chrome 33+ or Firefox 28+.
Make a project
- Load app.flowhub.io
- Log in (optional, more info)
- Under “Projects” click “Create”
- Give your project a name and label
- Choose “Browser” as the primary type. (Unless you have set up a Node runtime, that will be the only option.)
- Tap “Create” and the UI should load, showing a blank canvas
Search and add components
- In the top-left is the library search box, tap there to show search input
- Search for “alert,” then tap
prompts/Alertto add that component to your graph
- Search for and add one
- Move them so
Alertis to the right of
Pan the graph by dragging the background. Zoom with scroll wheel, 2-finger scroll gesture, or pinch.
If part of the graph is not in the window, a minimap should appear in the bottom-right. You can click that to fit the graph to the window.
There are several ways to connect nodes, depending on your setup and personal preference. You can either tap one port and then the other, or drag from one port to the other. If you are zoomed out, you can open the node context menu by tap-and-hold or secondary click. Then you can tap one of the the expanded port names to start a connection.
- Click on this new edge to see its inspector and change the edge color
Inspect a component and edit its initial information packets
Initial information packets (IIPs) are the data that is send to the process when the network starts.
core/Repeat will send that data on to anything connected, which makes it a good way to automatically start a network.
- Tap the
Repeatnode to see its inspector
- In the text input field by
in, type “hello world”
- In the top-left is a play icon with the words “not started,” tap it to start the network
- The preview panel should open, and the “hello world” alert should pop up
Congratulations! Your first client-side NoFlo graph is running.
The preview graph runs in an iframe. If you want to have some HTML content ready there when you start the graph, tap the cog icon by the search box. This will open the graph settings dialog, where you can put HTML in the “preview contents” text area. The clock example illustrates setting up and manipulating DOM elements like this.