
JsPlumb - pipe your UI elements together - toni
http://jsplumb.org/jquery/demo.html
======
Scaevolus
Neat, but there are a few edge cases that you may want to consider. Graph
layout is one of those problems that's easy for a human but a pain to program,
as I'm sure you've noticed.

The bezier connectors can get ugly when the endpoints are near each other--
making a sort of "N" shape. I assume this is because there's a control point
offset a certain distance from the actual endpoint, but could that shrink as
the total offset decreases?

For the flocwchart connectors demo, the connection "4 - 3" would be easier to
follow with one corner instead of three.

~~~
sporritt
yes the 'N' shape is caused by where the control points for that curve are
placed. the api allows you to change that value when you make a connection; i
think the yellow connection on the main demo just uses the default. but i do
like the idea of the control points shifting as the distance between elements
decreases. i might look into that.

------
thomasfl
Looks good.

BTW. Does anyone know any good web based sql modeling tools? If not, jsplumb
would be a good basis for the gui part.

~~~
dmnd
There's a pretty good Javascript-based modelling tool called
wwwsqldesigner[1]. The demo installation is little hard to get to from that
project page, so look here[2]. I use it for all my ER diagrams.

[1]: <http://code.google.com/p/wwwsqldesigner/>

[2]: <http://ondras.zarovi.cz/sql/demo/>

------
flyosity
Ha, very nice. At my work we built a complex node-based UI for marketing
segmentation and I rolled that from scratch using a similar architecture to
this (1 canvas element per curve, jQUI for dragging)

<http://cl.ly/7tpT>

~~~
joeyespo
Wow, that looks very nice. Well done.

------
bergie
Sounds like something that I could use for building the graphs in my Flow-
Based Programming environment for Node.js

<https://github.com/bergie/noflo>

~~~
dkersten
I used jsplumb for flow based programming last year, but in the end switched
to QGraphicsView based interface instead (I was using embedded WebKit and a
HTML/JS interface first). I really like jsplumb, but theres a few things I
found difficult to do, for example, I had problems saving and restoring
jsplumb graphs - when I restored them, they did not always display the same
way as they did when they were saved. Could just be that I didn't know how to
use jsplumb, but in the end it was easier to just do it myself in C++ (and
better graphics performance...).

Still, jsPlumb is pretty cool!

~~~
bergie
A native editor might indeed be cool, but I really would like to make NoFlo a
"zero install" system where you can even just run it on a browser.

More native installs with embedded WebKit would be cool for getting it to
mobile devices, though. I'm especially interested in HP TouchPad, as WebOS
already ships Node.js, and so NoFlo might run fully on the device with quite
small effort.

BTW, what FBP tool did you use, or did you roll your own? So far I've mostly
looked at JavaFBP and C#FBP for inspiration.

~~~
dkersten
Well, my program was a native desktop program, so the choice between JS and
C++ didn't have much impact - for a lot of people this would not be an option
though. I do love the idea of making your app work on various tablets - seems
like the kind of interface that would be very nicely suited to a touch-centric
device.

It was a homemade system I made for a spreadsheet-like application. I never
released it though, I should polish it a little and release it sometime when I
have some spare time. The interface was very much inspired by SynthMaker[1], a
little by LabView and Max/MSP, and of course JP Morrison's work[2].

[1] <http://synthmaker.co.uk/>

[2] <http://www.jpaulmorrison.com/fbp/index.shtml>

------
sylvinus
There's also an excellent library for wiring components client or server-side
in javascript : <http://neyric.github.com/wireit/>

------
Swannie
Yes, this has been around for a quite a while. I was playing with this over 6
months ago.

It looks good, and is OK to use. The docs/examples could be cleaner.
Unfortunately it seems a lot of things, like custom labels, etc. are not as
simple as you'd expect.

------
bitdiffusion
This could be very useful for implementing organisational-charts which, as far
as I am aware, is currently only implemented in Google Viz. (flot, highcharts
and their ilk don't seem to support them).

~~~
bergie
Yep, they even have a demo of this: <http://jsplumb.org/jquery/chartDemo.html>

------
tluyben2
Nicely done! Was looking for something like this.

