Join GitHub today
GUI for drawing and monitoring NoFlo graphs #1
NoFlo needs a GUI that can be used for drawing and monitoring graphs. The idea there is that once NoFlo boots up a graph, it is "living software" that you can change and see how it is doing.
For example, the paths most commonly taken between nodes could be visualized with thicker lines, and processes that are down (database connection has gone away, a web service is down, whatever) could show their error state.
Had a look on all of the options.
My preference go to jsPlumb, cause it's the only one who provides svg visualization, and therefore, may be the most appropriate for dynamic process monitoring vizualisation.
additionally, it supports jQuery which is good for it.
So, +1 for jsPlumb
@nka11 agreed, jsPlumb seems like the best option. It doesn't impose any particular editing UI, so we can implement our own UX. And it is MIT-licensed which fits NoFlo licensing.
WireIt would've been most feature-complete of the bunch, but I feel it tries to do too much.
Current status of the GUI with jsPlumb:
We can now visualize existing networks, but editing them doesn't do anything yet.
To get here, do the following:
Hi everyone, new to NoFlo, here are my 2 cents:
After looking at all the libs mentioned I think it should be either JointJS or jsPlumb,
Requirements for me would definitely be MIT license and jquery compatibility.
jsPlumb seems to be more stable, but is hosted on google code, so contributing, fixing the diagramming layer is a pain. In addition to that it does not seem to be as feature rich as JointJS
The JointJS is on github which is a major plus, and it seems that it has a better architecture (I only glanced over it) and supports hierarchical components, which is hard to add after the fact. JointJS is using Raphael under the hood, which is a very solid product.
So to sum it up I would go with JointJS.
Regarding the UI: My experience having developed a workflow package and some diagramming packages in the far past is that simplicity is key. Nodes in, nodes out, may some color coding and an icon and one sentence description. More can be shown when a user hovers over a node (or does a single tap on the ipad)
People in general have a hard time visualizing flow once you have more than a couple nodes, which is why visual debugging (e.g. animating the flow) is nice for marketing but not often used in practice. If debugging is needed users are mostly in an aggravated state and just want to get the job done, which is why lists are preferred (events in, events out+ errors + filtering)
@mwawrusch: lists are good for debugging, but some sort of visualization (throughput, number of packets processed) would probably work better for getting an overview of the state of a running application.
Agreed that JointJS is a closer match to the needs of FBP visualization, and I'm, also a bit allergic on Google Code.
I also heard an interesting idea of visualizing ports as jigsaw puzzle connectors. That way you could directly see what components fit together. But that is something to be explored later.
@jrz in nutshell, jsPlumb appears to be more mature, but JointJS has some features that we really would like to have in NoFlo (like named ports).
A big difference is that in jsPlumb nodes are regular DOM elements (DIVs, for instance), and only the edges are drawn with canvas. In JointJS the whole graph is a canvas. It appears the jsPlumb approach performs slightly better with large graphs.
Another potential differentiating point may be mobile support. I've been able to edit jsPlumb graphs using the HP TouchPad browser.
Hi bergie, thanks for the explanation.
Yep, they did a great job. I played with the lib for an hour or so and found only one bug so far, which is a good sign. Downside right now is no support for touch events on the IPad, but that could be added. I need something sooner than later, so I am probably going to try to whip something up using jsPlumb.
added a commit
Mar 8, 2012
This was referenced
Oct 1, 2012
The subway map metaphor is really interesting.
I like a map metaphor in general, such as the interface of Google Maps that allows zooming in and out.
What I like about a map interface is that detail can be either shown or abstracted in meaningful ways. So I can show a node as a coordinate, a city, a country, a continent, a planet, but each is just a view-appropriate representation of a single node.
Another powerful thing about that sort of representation is that it aids refactoring of code. Maybe I don't know the details of the US, but I know I want to visit the Gand Canyon and Empire State Building. I can draw a node called US and give it those two attributes. Later, I can decide the huge US node is unwieldy and create sub-nodes inside of US for Arizona and New York and move the attributes to those sub-nodes, which are then easier to reuse across programs.
From my work with Canvas and SVG so far, I think it would be far more achievable to implement an "infinite map" or "zoom user interface" in HTML5 Canvas (for example with Kinetic.js) than with SVG.
Check out a simple Canvas site I made and bump up the number of paint dabs and it keeps running. Slowdown starts detracting from the animation up around 1000 nodes. I've not tried an equivalent exercise with SVG.
On Feb 8, 2013, at 9:30 AM, Henri Bergius firstname.lastname@example.org wrote:
This looks really sweet! I like that it's pretty basic-feature-complete with the menu bar. One quick suggestion is to include the component's name in the box so it's clear what you're dealing with without opening the Source panel.
So this would obviously be a "graph" and we'd be able to add the ports to export? Or when you save it's automatically exporting unbound ports?
All in all, this is an amazing feat so far!
referenced this issue
Aug 1, 2013
TL;DR: Could link colors & connector types be considered to signify data types please?
I don't know how solidified your are on the GUI, but here is a "Flow-Programming" platform I've programmed on for 5 years called FlowStone:
I'm not suggesting you need to rework everything, but I do find the extra colors & connector symbols to be helpful when quickly scanning a program to understand what data is being transferred between modules. There are also 'empty'/blank connectors so you know when a connector is not active.
Thanks for all your hard work; I'm a KickStarter supporter!
Anyone can download a more or less fully functioning copy: http://www.dsprobotics.com/download.php
I used to be a super-user with SynthMaker (the old version), so let me know if you have any questions!
I did not write the actual platform, just programed on it ;)
A kickstarter is in progress now: http://www.kickstarter.com/projects/noflo/noflo-development-environment