NoFlo UI Tutorial

1,309 views
Skip to first unread message

Oliver Rolle

unread,
Mar 8, 2014, 6:48:07 PM3/8/14
to flow-based-...@googlegroups.com
Hi,

I am totally new to fbp and noflo. I use the noflo-ui to build my first hello wold fbp program but I stuck in the middle.
I googled the web and this mailing list but I could not find a tutorial for noflo-ui. Does anyone have a tutorial?

I use the online version http://noflojs.org/noflo-ui/ and checked out the git repo & followed the install instructions of noflo-ui (which were successful). But I stuck in both cases.
I created a new graph (test) and 2 components (hello & world). The 2 components have alert("") in their implementation. I want to add both components to the graph. How do I do that?

best regards
Oliver

Henri Bergius

unread,
Mar 8, 2014, 6:52:08 PM3/8/14
to flow-based-...@googlegroups.com
Hi,

On 9 March 2014 00:48, Oliver Rolle <oliver...@googlemail.com> wrote:
> I use the online version http://noflojs.org/noflo-ui/ and checked out the
> git repo & followed the install instructions of noflo-ui (which were
> successful). But I stuck in both cases.
> I created a new graph (test) and 2 components (hello & world). The 2
> components have alert("") in their implementation. I want to add both
> components to the graph. How do I do that?

So, to make sure: you created a project inside NoFlo UI, and then
added some components to it? In that case the components will be sent
to the FBP runtime automatically when you're in the graph editor. If
they are correctly made (no parse errors, etc), they should show up
when you search.

Try searching either by component name or type "show library" to see
all components available in the runtime.

> Oliver

/Henri

--
Henri Bergius
Decoupling software, one piece at a time.
http://bergie.iki.fi/
@bergie

Oliver Rolle

unread,
Mar 8, 2014, 7:35:27 PM3/8/14
to flow-based-...@googlegroups.com


Am Sonntag, 9. März 2014 00:52:08 UTC+1 schrieb Henri Bergius:
Hi,

On 9 March 2014 00:48, Oliver Rolle <oliver...@googlemail.com> wrote:
> I use the online version http://noflojs.org/noflo-ui/ and checked out the
> git repo & followed the install instructions of noflo-ui (which were
> successful). But I stuck in both cases.
> I created a new graph (test) and 2 components (hello & world). The 2
> components have alert("") in their implementation. I want to add both
> components to the graph. How do I do that?

So, to make sure: you created a project inside NoFlo UI, and then
added some components to it?
In that case the components will be sent
to the FBP runtime automatically when you're in the graph editor. If
they are correctly made (no parse errors, etc), they should show up
when you search.
Is fbp runtime in the browser? I do not get any error output on firebugs console or elsewhere.


Try searching either by component name or type "show library" to see
all components available in the runtime.
I searched locally and remotely for "show library" or the components name ("Hello", "World"). In every case I have no results.
 

Henri Bergius

unread,
Mar 8, 2014, 7:39:41 PM3/8/14
to flow-based-...@googlegroups.com
Hi,

On 9 March 2014 01:35, Oliver Rolle <oliver...@googlemail.com> wrote:
> yes. look here: http://noflojs.org/noflo-ui/#project/Test/2avr7

Sorry, the projects are stored in your browser's local storage, so I
have no access to that.

> Is fbp runtime in the browser? I do not get any error output on firebugs
> console or elsewhere.

Yep, it is controlled from the top right corner of your screen. Is the
"refresh" button showing green for you? That means you're connected.

> I searched locally and remotely for "show library" or the components name
> ("Hello", "World"). In every case I have no results.

No, click the search bar on the top-left corner of the screen and type there.

It should look something like http://i.imgur.com/DSXY2OI.png

Oliver Rolle

unread,
Mar 8, 2014, 7:50:10 PM3/8/14
to flow-based-...@googlegroups.com


Am Sonntag, 9. März 2014 01:39:41 UTC+1 schrieb Henri Bergius:
Hi,

On 9 March 2014 01:35, Oliver Rolle <oliver...@googlemail.com> wrote:
> yes. look here: http://noflojs.org/noflo-ui/#project/Test/2avr7

Sorry, the projects are stored in your browser's local storage, so I
have no access to that.

> Is fbp runtime in the browser? I do not get any error output on firebugs
> console or elsewhere.

Yep, it is controlled from the top right corner of your screen. Is the
"refresh" button showing green for you? That means you're connected.
yes, its green. 

> I searched locally and remotely for "show library" or the components name
> ("Hello", "World"). In every case I have no results.

No, click the search bar on the top-left corner of the screen and type there.

It should look something like http://i.imgur.com/DSXY2OI.png
it does not look like on your pic :( I type "show library" in the search box, but no result set "appears".

--

Henri Bergius

unread,
Mar 8, 2014, 8:04:24 PM3/8/14
to flow-based-...@googlegroups.com
Hi,

On 9 March 2014 01:50, Oliver Rolle <oliver...@googlemail.com> wrote:
> yes, its green.
> it does not look like on your pic :( I type "show library" in the search
> box, but no result set "appears".

Does it otherwise look like my screenshot?

What exact browser and version do you have? There might be curious
issues with Polymer (which our UI is built on) on some of the older
ones.

Oliver Rolle

unread,
Mar 8, 2014, 9:08:09 PM3/8/14
to flow-based-...@googlegroups.com


Am Sonntag, 9. März 2014 02:04:24 UTC+1 schrieb Henri Bergius:
Hi,

On 9 March 2014 01:50, Oliver Rolle <oliver...@googlemail.com> wrote:
> yes, its green.
> it does not look like on your pic :( I type "show library" in the search
> box, but no result set "appears".

Does it otherwise look like my screenshot?
Its similar. Only 2 differences: no results and no visualized graph.
If I open examples (http://noflo.github.io/noflo-ui/#example/6608098), I get the graph visualized.
I have a bug below the search box (I totally overseen it ): http://i.imgur.com/E6nBgq3.png


What exact browser and version do you have? There might be curious
issues with Polymer (which our UI is built on) on some of the older
ones.
Mozilla Firefox, 27.0.1, Ubuntu Linux

Henri Bergius

unread,
Mar 8, 2014, 9:14:55 PM3/8/14
to flow-based-...@googlegroups.com
Thanks! Can you file a bug at https://github.com/noflo/noflo-ui/issues ?

I just tried on Firefox Mobile 27, and there things worked as expected.
> --
> You received this message because you are subscribed to the Google Groups
> "Flow Based Programming" group.
> To unsubscribe from this group and stop receiving emails from it, send an
> email to flow-based-progra...@googlegroups.com.
> For more options, visit https://groups.google.com/d/optout.

Paul Morrison

unread,
Mar 8, 2014, 10:10:05 PM3/8/14
to flow-based-...@googlegroups.com
Finally I have an image on my screen, using http://noflojs.org/noflo-ui/#example/6608098

Can I run it? 

The IIPs for makeSecondRotation and makeMinuteRotation divisors are not shown in the diagram - is this right?

What is the little white rectangle with the two grey triangles in it (up and down) - some kind of scrolling control?

TIA

Paul

Henri Bergius

unread,
Mar 8, 2014, 10:21:07 PM3/8/14
to flow-based-...@googlegroups.com
Hi,

On 9 March 2014 04:10, Paul Morrison <jpau...@gmail.com> wrote:
> Finally I have an image on my screen, using
> http://noflojs.org/noflo-ui/#example/6608098
>
> Can I run it?

Sure! Just click the "Play" icon in the top right of the screen. I
just added a new IIP to the graph to auto-start (after the network is
initialized, which is what happens via the "Play" icon it, so you may
want to reload the page.

While the network is running, you can click any wire to see the data
passing through. This should look something like:
http://i.imgur.com/yHYOIit.png

> The IIPs for makeSecondRotation and makeMinuteRotation divisors are not
> shown in the diagram - is this right?

There are two ways to see the IIP values:

1) Zoom in close enough and the values will be shown (zoom via mouse
wheel on desktop or multi-touch on tablet). Example:
http://i.imgur.com/MTACupT.png

2) Click on the node and you'll get the IIP editor to the left side of
the screen. Example: http://i.imgur.com/qH8qGsB.png

If you edit any of the IIP values, the new ones will be transmitted by
the network and should take effect immediately.

> Paul

/Henri

Oliver Rolle

unread,
Mar 9, 2014, 8:15:22 AM3/9/14
to flow-based-...@googlegroups.com

Paul Morrison

unread,
Mar 9, 2014, 10:38:21 AM3/9/14
to flow-based-...@googlegroups.com
All right!  My first running NoFlo program!  I guess I didn't notice the "play" button because it was greyed out, and generally in Windows greyed out means inoperative or irrelevant.   And grey on a black background is pretty hard to see!

Thanks, I found the IIPs - I wouldn't have thought of using the scrolling wheel - I have actually never had to use it before!  :-)  I think I would have liked to see the IIPs on the network diagram, but maybe you were short of space!

And what is the little white rectangle with the two grey triangles in it (up and down) - some kind of scrolling control?

Thanks - this is great!

Paul


Henri Bergius

unread,
Mar 9, 2014, 10:45:15 AM3/9/14
to flow-based-...@googlegroups.com
Hi,

On 9 March 2014 15:38, Paul Morrison <jpau...@gmail.com> wrote:
> All right! My first running NoFlo program! I guess I didn't notice the
> "play" button because it was greyed out, and generally in Windows greyed out
> means inoperative or irrelevant. And grey on a black background is pretty
> hard to see!

We're still working on improving the contrast. And there will soon be
the option to switch to a brighter theme as well. That works better in
daylight and on projectors when giving conference talks :-)

> Thanks, I found the IIPs - I wouldn't have thought of using the scrolling
> wheel - I have actually never had to use it before! :-) I think I would
> have liked to see the IIPs on the network diagram, but maybe you were short
> of space!

There is a little indicator that an IIP is there even when zoomed out,
but when you zoom in you see the actual values.

> And what is the little white rectangle with the two grey triangles in it (up
> and down) - some kind of scrolling control?

What browser (and version) are you using, and on what operating
system? I'm assuming this could be related to this bug:
https://github.com/noflo/noflo-ui/issues/131

Some of the web technologies we used for building the UI are quite
cutting-edge, so right now the best experience will be on Google
Chrome and the Mobile Safari on iOS 7 on an iPad (iPhone screen is a
bit too small for this stuff).

Paul Morrison

unread,
Mar 9, 2014, 11:15:38 AM3/9/14
to flow-based-...@googlegroups.com
On Sun, Mar 9, 2014 at 10:45 AM, Henri Bergius <henri....@iki.fi> wrote:
Hi,

On 9 March 2014 15:38, Paul Morrison <jpau...@gmail.com> wrote:

> Thanks, I found the IIPs - I wouldn't have thought of using the scrolling
> wheel - I have actually never had to use it before!  :-)  I think I would
> have liked to see the IIPs on the network diagram, but maybe you were short
> of space!

There is a little indicator that an IIP is there even when zoomed out,
but when you zoom in you see the actual values.

IMO making the IIPs only show when you click on the process block makes them seem internal to the process - which they are not.  Since in NoFlo, if I understand it correctly, they emit an IP, it makes even more sense  (again IMO) to make them a block on the diagram.  This would also enable some more gestures, such as clicking on them to edit, or perhaps emit a value, displaying the IP as it is emitted, etc.  ...

What do you think?  Maybe Forrest could come up with a neat icon...?

> And what is the little white rectangle with the two grey triangles in it (up
> and down) - some kind of scrolling control?

What browser (and version) are you using, and on what operating
system? I'm assuming this could be related to this bug:
https://github.com/noflo/noflo-ui/issues/131

I'm using Firefox 27.0.1 ...

Thanks for your prompt response, Henri!

Paul

Paul Morrison

unread,
Mar 10, 2014, 10:43:55 AM3/10/14
to flow-based-...@googlegroups.com, HENRI BERGIUS, Forrest O.

On Sun, Mar 9, 2014 at 11:15 AM, Paul Morrison <jpau...@gmail.com> wrote:


IMO making the IIPs only show when you click on the process block makes them seem internal to the process - which they are not.  Since in NoFlo, if I understand it correctly, they emit an IP, it makes even more sense  (again IMO) to make them a block on the diagram.  This would also enable some more gestures, such as clicking on them to edit, or perhaps emit a value, displaying the IP as it is emitted, etc.  ...

What do you think?  Maybe Forrest could come up with a neat icon...?


It occurred to me that this proposal is more important than I thought.  In fact this is tied in with the whole rationale behind IIPs:  the thing that makes IIPs different from simple parameters is that they are defined as part of the network, and it should be trivial to change a network to use an upstream process instead of an IIP to send parametric info to a process.  From this point of view, IIPs should definitely be visible when you look at a network, and it should be very easy to disconnect an IIP connection and replace it with a regular process connection - or go the other way....

Forrest, perhaps you could come up with an icon for this - unless there was some even more fundamental reason for IIPs to be handled as at present in the UI...?  Henri, are you aware of any such reasons?

Regards,

Paul M.

Paul Morrison

unread,
Mar 10, 2014, 11:55:53 AM3/10/14
to Forrest Oliphant, flow-based-...@googlegroups.com, HENRI BERGIUS
I had forgotten about the mouse wheel.  However, as I said before, I have only used the mouse wheel occasionally, and then not for zooming, so I wouldn't naturally think of using it for that function.  I still feel the IIP should have a box on the screen, which could then be moved, reconnected, clicked on, etc.  I actually spent quite a long time wondering why divide didn't seem to have a divisor, before I stumbled on the zoom!  :-)

I assume, by direct manipulation, you mean editing the diagram.  Have you had a look at DrawFBP?  It really only has two block types that are used to generate code: components and IIPs (plus external ports, I guess, in the case of subnets only)...

Regards,

Paul



On Mon, Mar 10, 2014 at 11:12 AM, Forrest Oliphant <auf...@forresto.com> wrote:
We are visualizing IIPs as external to the process now, visible by zooming in:

Inline image 1

Editing is still done in the node inspector, but a medium-term goal is to do more editing in-situ. Direct manipulation is the mantra.

Forrest O.

unread,
Mar 10, 2014, 1:18:37 PM3/10/14
to flow-based-...@googlegroups.com, Forrest Oliphant, HENRI BERGIUS
(apologies if this is a dupe; my reply didn't seem to go through)


We're mimicking established gestures for digital map navigation: zoom = wheel or pinch. Zoomable UI has only really been adopted with maps: show country / city / street info as it becomes relevant. I think that the concept of getting closer to see details "maps" really well to what we're building, and I want to explore it more. It also maps well to the huge variety of screens and resolutions that we're targeting.

I actually wasn't a huge fan of Google Maps' wheel-zoom: the time that it takes to load the map tiles disconnects the gesture from the motion. But I think it is powerful in NoFlo UI, and I'm happy with how smooth we've gotten it with SVG.

Rather than dragging the map, zoom out, move mouse to target, zoom in. It takes a little getting used to, but I think it works.

By direct manipulation I mean clicking on an IIP to get an editor widget in place, as opposed to an inspector panel in the sidebar.

I think we'll leave IIPs like this for now. I don't want more things to drag around.

Paul Morrison

unread,
Mar 10, 2014, 3:05:43 PM3/10/14
to Forrest O, flow-based-...@googlegroups.com, HENRI BERGIUS


On 2014-03-10 1:00 PM, "Forrest Oliphant" <auf...@forresto.com> wrote:
>
> We're mimicking established gestures for digital map navigation: zoom = wheel or pinch. Zoomable UI has only really been adopted with maps: show country / city / street info as it becomes relevant. I think that the concept of getting closer to see details "maps" really well to what we're building, and I want to explore it more. It also maps well to the huge variety of screens and resolutions that we're targeting.

Yes, I do like that technique - I actually don't use  it in DrawFBP,  but then I use double click to give more info about a given process.  What you describe is certainly appropriate for showing, say, component names.

>
> I actually wasn't a huge fan of Google Maps' wheel-zoom: the time that it takes to load the map tiles disconnects the gesture from the motion. But I think it is powerful in NoFlo UI, and I'm happy with how smooth we've gotten it with SVG.

That may be part of my problem with the wheel - it is very unsmooth on my machine  (Firefox 27)!  And, as I said, I don't have the wheel habit!

>
> Rather than dragging the map, zoom out, move mouse to target, zoom in. It takes a little getting used to, but I think it works.

But surely you only have to do this to see IIPs.  You can grasp the flow without needing to see component names, so IIPs are the only other things that you really need to see.  Plus, DrawFBP does stepwise decomposition,  which is key to understanding complex networks, so the network on a given screen is always a manageable size.  In DrawFBP IIPs don't take up much room!

>
> By direct manipulation I mean clicking on an IIP to get an editor widget in place, as opposed to an inspector panel in the sidebar.

That sounds like what I'm asking for...


>
> I think we'll leave IIPs like this for now. I don't want more things to drag around.
>

Give DrawFBP a try - dragging IIPs is not that bad!  :-)

Regards,

Paul

Henri Bergius

unread,
Mar 10, 2014, 3:20:24 PM3/10/14
to flow-based-...@googlegroups.com
Hi,

On 10 March 2014 20:05, Paul Morrison <jpau...@gmail.com> wrote:
> Yes, I do like that technique - I actually don't use it in DrawFBP, but
> then I use double click to give more info about a given process. What you
> describe is certainly appropriate for showing, say, component names.

In our case we're not using double-click, but with right click on a
node or edge you get a menu with various options. On touchscreen
devices the same comes with tap-and-hold.

> That may be part of my problem with the wheel - it is very unsmooth on my
> machine (Firefox 27)!

Yeah, SVG GPU acceleration seems quite bad in Firefox. Try Google
Chrome, it'll be a lot smoother.

> And, as I said, I don't have the wheel habit!

That can change when people start using Flowhub/NoFlo UI more :-)

On touch-screens we're using pinch-zoom, which is something most users
are already quite familiar with.

> But surely you only have to do this to see IIPs. You can grasp the flow
> without needing to see component names, so IIPs are the only other things
> that you really need to see.

...and you see them when you zoom in. When zoomed out you only see
that "there is an IIP here". This gives you a much more comprehensive
overview of the graph, especially when developers start using
component icons and node groups more.

>> I think we'll leave IIPs like this for now. I don't want more things to
>> drag around.
>>
> Give DrawFBP a try - dragging IIPs is not that bad! :-)

In my view, having to "drag anything around" is bad. People already
end up bikeshedding enough with things like indentation in textual
programming languages. For visual programming like Flowhub to succeed
we need to let people focus on creating graphs, not fiddling with
visual representation. This is what makes the autolayout algorithms
such an important thing. The graph should just "look right" without
need for user interaction.

And I agree with Forrest here. Nodes and edges of the graph are the
key... edges are how data flows in the graph, and components do
something with that data. IIPs are "just configuration" for nodes that
you can see easily when you want to, but what stays out of the way
otherwise.

Alfredo Sistema

unread,
Mar 10, 2014, 3:26:26 PM3/10/14
to flow-based-...@googlegroups.com
In my humble opinion no design fits all, an options/settings menu to setup the environment to your preference would be the desired approach.
I like to visualize IIPs because they give meaning to processes, but that's just me. It can look really cluttered that way also.
So this whole ordeal can be solved with a toggle or a setting to fit your needs.


Henri Bergius

unread,
Mar 10, 2014, 3:39:53 PM3/10/14
to flow-based-...@googlegroups.com
Hi,

On 10 March 2014 20:26, Alfredo Sistema <sistemas...@gmail.com> wrote:
> In my humble opinion no design fits all, an options/settings menu to setup
> the environment to your preference would be the desired approach.
> I like to visualize IIPs because they give meaning to processes, but that's
> just me. It can look really cluttered that way also.
> So this whole ordeal can be solved with a toggle or a setting to fit your
> needs.

Options complicate things by forcing users to make choices, as well as
complicate testing because suddenly you have many more combinations of
settings you have to test for. So, I'd rather have one setup for
everybody that "just works".

The way things are with noflo-ui, you can still see your IIPs just
fine by using the UI slightly more zoomed in. And on a modern browser
zooming in/out is something that happens very quickly. You'll get used
to it. I did, and my graphs have tons of IIPs :-)

I feel the way we implemented it strikes a quite nice balance between
showing IIPs when you need them (zoomed in), and keeping the graph
uncluttered when you just want to see how things work in general
(zoomed out).

The other thing that is nice with the way with did Flowhub is that
anybody can easily write their own now... you can register your own
apps to use the Flowhub API, which gives you access to things like
project repositories and the runtime registry. And from there on you
just need to talk the runtime protocol to manipulate and run graphs.
We even extracted those parts from the UI into their own standalone
library (https://github.com/noflo/noflo-runtime).

This should allow experimentation in the FBP editing and management
space... maybe you'll have ideas for a command-line tool, an augmented
reality 3D graph editor, or you just want to visualize the graph in a
different way. All of that is suddenly possible, and you'll have
exactly the same access to projects and runtimes that the NoFlo UI
has.

Paul Morrison

unread,
Mar 10, 2014, 3:47:21 PM3/10/14
to flow-based-...@googlegroups.com

Sorry, do you mean we can develop personalized UIs?  That will be fantastic!

I suppose whether we need to see IIPs also depends on how meaningful our process names are...

Henri Bergius

unread,
Mar 10, 2014, 4:13:23 PM3/10/14
to flow-based-...@googlegroups.com
Hi,

On 10 March 2014 20:47, Paul Morrison <jpau...@gmail.com> wrote:
> Sorry, do you mean we can develop personalized UIs? That will be fantastic!

Yes, you can do that right now :-)

You essentially need three things:

1) OAuth2 authentication with user's Grid account. Register and manage
your app at https://passport.thegrid.io/account
You'll need to use the 'github' OAuth2 scope to be able to access
repository information

2) Communicate REST with the https://api.flowhub.io using user's Grid
OAuth token with the HTTP Bearer method
No docs for the API yet, but that will come soon.

3) Communicate over the FBP protocol
(http://noflojs.org/documentation/protocol/), which means you'll want
to at least be a WebSockets client. Maybe also a WebRTC peer in near
future

For FBP UIs made in JavaScript we provide libraries for all of those
three. For other platforms, there should be the necessary protocol
libraries out there to do OAuth2, RESTful JSON over HTTP, and
WebSockets.

Our libs are at:

* https://github.com/the-grid/passport-thegrid - Passport.js
authentication plugin for The Grid accounts
* https://github.com/the-grid/flowhub-registry - interacting with the
Flowhub API for runtime discovery and project management
* https://github.com/noflo/noflo-runtime - FBP protocol client library

And this is not only interesting for writing new UIs. You can use the
same technique also to make other FBP runtimes (say, JavaFBP or
goflow) to be fully-qualified members of the Flowhub ecosystem
(including being manageable using all the custom UIs people make).

Just provide a FBP protocol endpoint and register the user's runtime
instances with the Flowhub registry, and they'll be able to start
creating graphs running on your FBP implementation.

At the moment there are four different compatible runtimes that I'm
aware of: NoFlo on browser, NoFlo on Node.js, NoFlo on GNOME desktop,
and MicroFlo. But people on this list have made many more, and I'd be
happy to help getting those running with Flowhub.

So, in short: Flowhub Registry + FBP procol = any FBP UI can manage
any FBP system

> I suppose whether we need to see IIPs also depends on how meaningful our
> process names are...

Yeah. We default to the component name, but you can edit it by just
clicking the node.

Paul Morrison

unread,
Mar 10, 2014, 10:02:01 PM3/10/14
to flow-based-...@googlegroups.com
Many thanks, Henri!  Lots to absorb! 

Dumb question: when I said UIs, I meant diagramming tools - was this what you were talking about, or did you mean front ends?

Either way, I need to study your note, preferably with a glossary in one window, and work through it veeery slowly and carefully!

Thanks again!

Paul M.


Paul Morrison

unread,
Mar 11, 2014, 11:15:00 AM3/11/14
to flow-based-...@googlegroups.com, HENRI BERGIUS, Forrest O.
Hi Henri or Forrest,

I am looking at http://noflojs.org/noflo-ui/#example/6608098 - I really like being able to see what is travelling across the pipes - cute!

So, I have been looking at the blocks called makeXRotation - they appear to do some parsing, and then do a divide.  So when it says math/Divide underneath, do you just mean they use math/Divide?  Clearly there must be more function in these functions.  Why did you not parse the time stamps and then process the parts separately?  Just curious...

Also, a) can I see the code, and b) can I get from the diagram to the code?

Regards,

PaulM

Paul Morrison

unread,
Mar 11, 2014, 3:06:21 PM3/11/14
to flow-based-...@googlegroups.com, HENRI BERGIUS
Not sure if this question got sent...  I am not sure if your answer describes diagramming tools or interactive front end...

TIA

Forrest Oliphant

unread,
Mar 10, 2014, 1:00:07 PM3/10/14
to Paul Morrison, flow-based-...@googlegroups.com, HENRI BERGIUS
We're mimicking established gestures for digital map navigation: zoom = wheel or pinch. Zoomable UI has only really been adopted with maps: show country / city / street info as it becomes relevant. I think that the concept of getting closer to see details "maps" really well to what we're building, and I want to explore it more. It also maps well to the huge variety of screens and resolutions that we're targeting.

I actually wasn't a huge fan of Google Maps' wheel-zoom: the time that it takes to load the map tiles disconnects the gesture from the motion. But I think it is powerful in NoFlo UI, and I'm happy with how smooth we've gotten it with SVG.

Rather than dragging the map, zoom out, move mouse to target, zoom in. It takes a little getting used to, but I think it works.

By direct manipulation I mean clicking on an IIP to get an editor widget in place, as opposed to an inspector panel in the sidebar.

I think we'll leave IIPs like this for now. I don't want more things to drag around.

Forrest Oliphant

unread,
Mar 10, 2014, 11:12:33 AM3/10/14
to Paul Morrison, flow-based-...@googlegroups.com, HENRI BERGIUS
We are visualizing IIPs as external to the process now, visible by zooming in:

Inline image 1

Editing is still done in the node inspector, but a medium-term goal is to do more editing in-situ. Direct manipulation is the mantra.
On Mon, Mar 10, 2014 at 3:43 PM, Paul Morrison <jpau...@gmail.com> wrote:

Paul Morrison

unread,
Mar 12, 2014, 11:03:30 AM3/12/14
to flow-based-...@googlegroups.com, HENRI BERGIUS, Forrest O., Dan Tocchini IV
Sorry, guys, I am not sure what happened to my repost of this - or maybe one of you answered and the answer has gotten lost...  I really don't understand what is going on in this application - I am very confused about the blocks called make-something-Rotation: what the logic is, why they are labelled math/Divide, etc.

Why is the screen called Rewiring Polymers?!

BTW to help me understand what's going on, I have redrawn the diagram using DrawFBP, appended below.  I think it's accurate: would one of you care to check it?


Forrest O.

unread,
Mar 12, 2014, 12:05:47 PM3/12/14
to flow-based-...@googlegroups.com

As the clock example is now, I'm dividing the timestamp directly by those values, which gives the correct rotation percentage. (As analog "sweep" clock movement, the minutes and hours also move a bit every second.) Adding some more components might make the math easier to follow. I might do that.

The components have labels and sublabels. The labels are user-defined. I think of them like code comments. The sublabels are library/component.



"Rewiring Polymers" just means "Loading" ... maybe a bit of an inside joke. We are (ab)using http://www.polymer-project.org/ , the polyfill library for custom elements, a future web standard.

- Forrest

Paul Morrison

unread,
Mar 12, 2014, 1:34:03 PM3/12/14
to flow-based-...@googlegroups.com, Forrest O.
Thanks for the feedback, Forrest!  That helps a lot!

I think I get it: the time stamp is really a value in milliseconds - the display function for these values passing across the wire is what turns it into a human-readable format - a bit confusing IMO!    And it looks like the rotation percentage you use is really the value after the decimal point in the quotients - so I guess the rotation logic uses something like   

   quotient - integerPartOf(quotient)  - or the equivalent in JS...

Also you may have noticed that I have turned "Split" into "Copy", as I think that's a better description of what is happening...

Of course, you realize that you would have to take a very different approach if you wanted to do this in "classical" FBP...  I think I could only have one process which is tightly synchronized to real time.  I may try to come up with an approach...   I guess I worry that examples like this one could lead FBP users into thinking too synchronously. ;-)

Regards,

Paul M

PS I'll take a look at Polymer...  Thx

Henri Bergius

unread,
Mar 12, 2014, 1:48:20 PM3/12/14
to flow-based-...@googlegroups.com
On Wed, Mar 12, 2014 at 6:34 PM, Paul Morrison <jpau...@gmail.com> wrote:
> PS I'll take a look at Polymer... Thx

You may want to take a look at https://github.com/noflo/noflo-polymer
then. This is a wrapper that makes Polymer custom elements appear as
regular NoFlo components. We use that to tie the visual UI widgets
(Polymer elements) to actual logic (NoFlo graphs) to make the NoFlo UI
run.

Paul Morrison

unread,
Mar 24, 2014, 3:07:45 PM3/24/14
to flow-based-...@googlegroups.com, Jon Nordby, HENRI BERGIUS, Forrest O.
I am trying to develop a network on Windows 7, and as Jon suggested, I am using Chrome.  .

I am starting over for the umpteenth time, and not even getting as far as I got last time - there ought to be a place for really, really dumb questions - but I'll put mine up here for now...

Are there any Windows Noflo people out there?  If so, please help!

I enter http://noflojs.org/noflo-ui/    Somehow, I am now logged on - I guess I somehow managed to do it earlier - so it remembered (don't know where)!   So that's good!

I click on "On Device" - it changes to a grey rectangle, so I assume that means my project will be on my computer...(?)

It is now showing 1 project, and 1 runtime - don't know what the difference is...

The project is called "Try new" (I know, it's not very bright!).    Clicking on it brings up an icon (core/Kick) (which I managed to create a few days ago) and

    Error Script error in the bottom right...  Sometimes I get it several times...

Clicking on that message used to bring up a message about looking in my logs (which I can't find anyway) - now it doesn't produce any message at all.

I have found a little magnifying glass in the top left (faint grey on black - almost invisible, as I have been saying for months!), and clicking on it gives me the word "Search", but entering a search string there has no apparent effect.

At this point, the only thing that seems active is dragging the icon, and clicking on the 4 bars at middle left...

So now I'm totally stymied!    If someone is supporting this IDE, I would very much like some error messages, or at least a trail of breadcrumbs!  And, please, why do we have to have faint grey icons on a black background?!  ;-)  Remember, some users, like me, are totally ignorant about all the fancy tools you are using!!!

TIA

Paul M.


Reply all
Reply to author
Forward
0 new messages