design - Diseñando una interfaz inspirada en Yahoo Pipes

interface widget

Question

Me gusta mucho la interfaz de Yahoo Pipes ( http://pipes.yahoo.com/pipes/ ) y me gustaría crear una interfaz similar para un problema diferente. ¿Hay alguna biblioteca que me permita crear una interfaz con la misma apariencia básica?

Me gusta especialmente cómo se comportan las tuberías y cómo no son solo líneas rectas.

Editar: la aplicación estaría basada en la web. Estoy abierto a usar Flash o Javascript.

Answer 1

Esto es lo que encontré en las juntas de YUI:

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

Parece que no hay ninguna biblioteca abierta de "widgets de cableado", pero YUI parece un buen comienzo.

Answer 2

No mencionó la plataforma en la que está desarrollando, pero si se va a ubicar en un sitio web interactivo, probablemente ahorre tiempo al hacerlo en Flash. Echa un vistazo a cómo hacer primero objetos que se puedan arrastrar (Google te ayuda aquí), luego es fácil conectarlos con líneas o curvas como quieras.

Answer 3

Por lo que puedo ver, Yahoo! está comiendo su propio dogfood construyendo Pipes en YUI con la adición de la ultra-genial etiqueta CANVAS y el archivo de script IE (que no sabía que existía hasta que hice una pequeña excavación hoy) que maneja el cableado tipo Visio. Si no ha utilizado YUI antes de tener que aprender mucho antes de poder construir algo tan sólido como Pipes, pero tal vez alguien haya publicado ejemplos en las placas de YUI que lo acercarán a donde necesita ser.

Toda mi información fue encontrada en los siguientes sitios:

1. YUIBlog
2. WebResourcesDepot
3. Desarrollador.Mozilla.org

Answer 4

WireIt es una biblioteca javascript de código abierto para crear interfaces web deseables como Yahoo! Tuberías para aplicaciones de flujo de datos, lenguajes de programación visual o modelado gráfico. Wireit usa la biblioteca YUI (2.6.0) para DOM y la manipulación de eventos, y excanvas para el soporte de IE de la etiqueta canvas. Actualmente es compatible con Firefox 1.5+, Safari 2.0+, IE 7.0, Opera 9+ y Chrome 0.2.x.

Answer 5

Prueba JSplumb .

La estructura principal es HTML / CSS, las conexiones pueden ser SVG / Canvas / VML *

Gran documentación API muy limpia y demos en vivo

* Configurable o se configura automáticamente mediante la detección de las capacidades del navegador