Handling user interactions with FBP

[Henri Bergius]

Hi!

I recently ported the NoFlo FBP engine to run also in the browser. This allows us to manage user interactions also with flows.

Here is a quick demo for touch-enabled browsers:
http://noflojs.org/demo/touch.html

If you have a smartphone or tablet, try that out. You can move the image around.

The eventual goal is to be able to build similar interactions as in this demo of the Facebook Home UI built with the Quartz Composer pseudo-FBP tool:
https://news.layervault.com/stories/3117-facebook-home-prototyped-in-quartz-composer--tutorial

As always, the whole logic is in the graph. Here is roughly how it works:

* The process is started by sending a CSS selector as an IIP to the "GetElement" component
* GetElement finds the right DOM element and passes it forward
* The element is sent to two components: "ListenTouch" and "MoveElement"
* ListenTouch attaches to touch interaction events on the element and sends them out as new packets
* We use "Gate" components for managing drag-and-drop
* When user starts touching the element, we open the gate
* When gate is open, the new coordinates are passed to the MoveElement component, which moves the element to whereever user has moved their finger
* When user lifts finger of the screen, we close the gate
* Any finger movement packets sent while the gate is closed are ignored and the packets dropped

The next step would be to build some more sophisticated components, like a Spring that would move the image back to its starting point in a kinetic manner.

So, early stages still, but shows already how FBP and the modern touch-screen era can meet :-)

/Henri

[Henri Bergius]

Hi,

On Thu, Jun 6, 2013 at 1:50 PM, Fábio Santos <fabiosa...@gmail.com> wrote:

Greetings! I am rather curious about how one could combine several flows into a reusable component.

In NoFlo you can simply register any existing flow graph as a component by adding it to the noflo.graphs configuration key of package.json (for Node.js flows) and/or component.json (for client-side flows).

A little bit about how to distribute components and graphs: http://bergie.iki.fi/blog/distributing-noflo-components/

 

For instance, the above example could be combined with some more stuff and abstracted away into something like JQuery UI's sortable (http://jqueryui.com/sortable/).

In general I'm trying to keep large dependencies like jQuery out of the picture.

However, here is an example of wrapping an existing JS library into a component:https://github.com/d4tocchini/noflo-draggabilly

A live demo of graph using this component can be found from http://d4tocchini.github.io/noflo-draggabilly/demo/

jQuery UI sortable is an interesting widget to wrap. I could imagine having an inport where you can send an element to listen to, and then an outport where the new position indexes of sorted elements are sent.

--
Henri Bergius
Motorcycle Adventures and Free Software
http://bergie.iki.fi/

Jabber: henri....@gmail.com
Microblogs: @bergie

[Fábio Santos]

On 6 Jun 2013 17:36, "Henri Bergius" <henri....@iki.fi> wrote:
>
> Hi,
>
> On Thu, Jun 6, 2013 at 1:50 PM, Fábio Santos <fabiosa...@gmail.com> wrote:
>>
>> Greetings! I am rather curious about how one could combine several flows into a reusable component.
>
>
> In NoFlo you can simply register any existing flow graph as a component by adding it to the noflo.graphs configuration key of package.json (for Node.js flows) and/or component.json (for client-side flows).

That sounds really cool. The first thing that attracted my curiosity about noflo was the usage of simple blocks of imperative code on the lower level. The whole concept makes it easier to reuse code, which is harder to do with imperative code. Having a way to reuse graphs themselves is great. You can have several levels of abstraction.

> jQuery UI sortable is an interesting widget to wrap. I could imagine having an inport where you can send an element to listen to, and then an outport where the new position indexes of sorted elements are sent.

Sounds like a cool project.