Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Designing a Yahoo Pipes inspired interface [closed]

I really like the interface for Yahoo Pipes (http://pipes.yahoo.com/pipes/) and would like to create a similar interface for a different problem. Are there any libraries that would allow me to create an interface with the same basic look and feel?

I especially like how the pipes behave and how they are not just straight lines.

Edit: The application would be web-based. I'm open to using Flash or Javascript.

like image 907
sutee Avatar asked Sep 17 '08 18:09

sutee


5 Answers

WireIt is an open-source javascript library to create web wirable interfaces like Yahoo! Pipes for dataflow applications, visual programming languages or graphical modeling. Wireit uses the YUI library (2.6.0) for DOM and events manipulation, and excanvas for IE support of the canvas tag. It currently supports Firefox 1.5+, Safari 2.0+, IE 7.0, Opera 9+ and Chrome 0.2.x.

like image 186
Brad The App Guy Avatar answered Oct 20 '22 15:10

Brad The App Guy


Try JSplumb.

The main structure is HTML/CSS, the connections can be SVG/Canvas/VML*

Great documentation very clean API and live demos

*Configurable or is automatically set by detecting browser's capabilities

like image 32
adardesign Avatar answered Oct 20 '22 17:10

adardesign


From what I can see, Yahoo! is eating their own dogfood by building Pipes in YUI with the addition of the ultra-cool CANVAS tag and IE script file (which I didn't know existed until I did a little digging today) that drive the Visio-like wiring. If you haven't used YUI before you're going to need to do a good deal of learning before you can build something as robust as Pipes, but maybe someone has released examples on the YUI boards that will get you close to where you need to be.

All my information was found at the following sites:

  1. YUIBlog
  2. WebResourcesDepot
  3. Developer.Mozilla.org
like image 2
kooshmoose Avatar answered Oct 20 '22 16:10

kooshmoose


You didn't mention the platform you're developing for, but if it's to be placed on an interactive website, you'd probably save time by doing it in Flash. Check out how to make draggable objects first (Google helps you here), then it's easy to connect them with lines or curves any way you like.

like image 1
jjrv Avatar answered Oct 20 '22 17:10

jjrv


Here's what I found on YUI's boards:

http://tech.groups.yahoo.com/group/ydn-javascript/message/30836

Doesn't seem like there's currently any open "wiring widget" libraries, but YUI does seem like a good start.

like image 1
sutee Avatar answered Oct 20 '22 15:10

sutee



Donate For Us

If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!