JsPlumb - pipe your UI elements together | Hacker News Reader

JsPlumb - pipe your UI elements together

jsplumb.org

156 pointstoni15 comments

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.

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.

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.

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/

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

Wow, that looks very nice. Well done.

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

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!

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.

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

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

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.

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).

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

Nicely done! Was looking for something like this.

Reply on news.ycombinator.com