Drawing FBP in browser

[Henri Bergius]

Hi,

Yesterday I had some discussions about FBP here in JSconf.eu, and I
found out about Joint, a tool that might have potential for drawing
FBP graphs:
http://www.jointjs.com/demos/run.html?unit=devs

This is completely browser-based and under the MIT open source
license. I will try to hook it up with NoFlo and see if it works well
for the concept.

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

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

[Paul Morrison]

Hi Henri,

That's quite pretty! I sort of like that subnet notation... I am not
sure what the source code is though - is it the code that draws the
diagram, or is a text representation of the diagram? Or maybe they
are the same thing in this technology, which I think could be
confusing...

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

[Tom Young]

Very nice!  Also very close to GraphViz .DOT language.   Should be relatively easy to
convert back and forth.  

          -Tom Y.

--
Tom Young
47 MITCHELL ST.
STAMFORD, CT  06902

"When bad men combine, the good must associate; ..." 
   -Edmund Burke 'Thoughts on the cause of the present discontents' , 1770

This e-mail message from Tom Young is intended
only for the individual or entity to which it is addressed. This e-mail
may contain information that is privileged, confidential and exempt from
disclosure under applicable law. If you are not the intended recipient,
you are hereby notified that any dissemination, distribution or copying
of this communication is strictly prohibited. If you received this
e-mail by accident, please notify the sender immediately and destroy
this e-mail and all copies of it.

[Henri Bergius]

Hi,

On Sun, Oct 9, 2011 at 12:08 AM, Paul Morrison <paul.m...@rogers.com> wrote:
> That's quite pretty!  I sort of like that subnet notation...  I am not
> sure what the source code is though - is it the code that draws the
> diagram, or is a text representation of the diagram?  Or maybe they
> are the same thing in this technology, which I think could be
> confusing...

The source (http://www.jointjs.com/demos/devs.js) is the text
representation of the diagram, which the JointJS widget then
visualizes and manipulates.

The author of JointJS is very interested in FBP, and I hope we'll be
able to demonstrate NoFlo with it soon.

One downside with JointJS currently is that it requires SVG support
from the browser, and so doesn't work in current Android devices. I
hope this will be fixed at some point, as I find touchscreens a very
potential solution for making drawing of FBP graphs more efficient.

--
Henri Bergius

[Andres Tremols]

Have you checked out jsplumb?  its open source, and can render with different mechanisms (svg, html5). I am making a web based fbp editing environment with it.

http://jsplumb.org/jquery/demo.html

[Henri Bergius]

Hi,

Yep, jsplumb was my first pick, but it didn't handle ports quite the
way I liked, and so I've now been looking at JointJS instead. If you
want to see the jsplumb-powered editor I did, check out:
https://github.com/bergie/noflo/tree/master/server
Screenshot:
http://universalruntime.tumblr.com/post/8998693776/node-js-powered-web-server-written-with-the-noflo

There has been quite a bit of discussion on the various libraries we
could use for browser-based FBP editing:
https://github.com/bergie/noflo/issues/1

[Andres Tremols]

  Know what you mean with the ports limitation, I managed to hack around it so that a box can have multiple labeled inputs and outputs on the left and right sides (like the reactor and synthedit  music environments).

 That said, I would sacrifice the fancy spline lines for performance and lightness, squared lines made with a few divs are fine. 

[Simon Porritt]

Hi - I just came across this discussion. I am the author of jsPlumb and I'm always interested in ways I can improve it - could you tell me a little more about the ports limitation you're talking about here?

thanks!

[Paul Morrison]

Hi Simon,

I assume that it is because jsPlumb doesn't support multiple input and
output named ports - I'm not familiar with it, so maybe there is a way
to do this...? You could take a look at a diagram I am working on
right now - at http://www.jpaulmorrison.com/graphicsstuff/ViewCSV-Iteration1-2.png
to get an idea of what a working diagram might look like. Right now,
this app diagram is in its early stages - later it will sprout other
information such as component names... There is a lot of information
about this drawing tool, called DrawFBP, and FBP in general, on
http://www.jpaulmorrison.com/fbp .

[Forrest Oliphant]

That's a nice library. I invented about the same wheel (in a limited way, but with input and output ports) for my http://meemoo.org/ project.