-->

Designing a Yahoo Pipes inspired interface [closed

2020-02-17 07:44发布

问题:


Want to improve this question? Update the question so it's on-topic for Stack Overflow.

Closed 2 years ago.

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.

回答1:

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.



回答2:

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



回答3:

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


回答4:

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.



回答5:

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.