4 ms·

JsPlumb - pipe your UI elements together

156 points by toni 15y ago

deleted 15y ago
[deleted]
tluyben2 15y ago
Nicely done! Was looking for something like this.
Scaevolus 15y ago
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 15y ago
  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 15y ago
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 15y ago
  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/ http://code.google.com/p/wwwsqldesigner/ [2]: http://ondras.zarovi.cz/sql/demo/ http://ondras.zarovi.cz/sql/demo/
bergie 15y ago
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 https://github.com/bergie/noflo
- dkersten 15y ago
  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 15y ago
    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 15y ago
      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/ http://synthmaker.co.uk/ [2] http://www.jpaulmorrison.com/fbp/index.shtml http://www.jpaulmorrison.com/fbp/index.shtml
bitdiffusion 15y ago
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 15y ago
  Yep, they even have a demo of this: http://jsplumb.org/jquery/chartDemo.html http://jsplumb.org/jquery/chartDemo.html
Swannie 15y ago
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.
flyosity 15y ago
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 http://cl.ly/7tpT
- joeyespo 15y ago
  Wow, that looks very nice. Well done.
sylvinus 15y ago
There's also an excellent library for wiring components client or server-side in javascript : http://neyric.github.com/wireit/ http://neyric.github.com/wireit/

156 points by toni 15y ago

deleted 15y ago

[deleted]

tluyben2 15y ago

Nicely done! Was looking for something like this.

Scaevolus 15y ago

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 15y ago
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 15y ago

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 15y ago
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/ http://code.google.com/p/wwwsqldesigner/ [2]: http://ondras.zarovi.cz/sql/demo/ http://ondras.zarovi.cz/sql/demo/

bergie 15y ago

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 https://github.com/bergie/noflo

dkersten 15y ago
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 15y ago
  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 15y ago
    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/ http://synthmaker.co.uk/ [2] http://www.jpaulmorrison.com/fbp/index.shtml http://www.jpaulmorrison.com/fbp/index.shtml

bitdiffusion 15y ago

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 15y ago
Yep, they even have a demo of this: http://jsplumb.org/jquery/chartDemo.html http://jsplumb.org/jquery/chartDemo.html

Swannie 15y ago

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.

flyosity 15y ago

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 http://cl.ly/7tpT

joeyespo 15y ago
Wow, that looks very nice. Well done.

sylvinus 15y ago

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