Designing a Yahoo Pipes inspired interface [closed]

烂漫一生 提交于 2019-11-29 23:18:01

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.

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

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

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.

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.

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!