litegraph.js

litegraph.js

Una biblioteca en JavaScript para crear gráficos en el navegador similar a Unreal Blueprints. Los nodos se pueden programar fácilmente e incluye un editor para construir y probar los gráficos.

Se puede integrar fácilmente en cualquier aplicación web existente y los gráficos se pueden ejecutar sin la necesidad del editor.

Pruébelo en el sitio de demostración.

Características

• Renders en Canvas2D (acercar/salir y panorámica, se pueden usar interfaces complejas fáciles de hacer dentro de un WebGltexture)
• El editor fácil de usar (SearchBox, Accesos directos de teclado, Selección Múltiple, Menú contextual, ...)
• Optimizado para admitir cientos de nodos por gráfico (en el editor pero también en ejecución)
• Tema personalizable (colores, formas, fondo)
• Devoluciones de llamada para personalizar cada acción/dibujo/evento de nodos
• Subgrafías (nodos que contienen gráficos en sí mismos)
• Sistema de modo en vivo (oculta el gráfico pero llama a los nodos para representar lo que quieran, útil para crear UI)
• Los gráficos se pueden ejecutar en NodeJS
• Nodos altamente personalizables (color, forma, ranuras verticales u horizontales, widgets, representación personalizada)
• Fácil de integrar en cualquier aplicación JS (un solo archivo, sin dependencias)
• Soporte mecanografiado

Nodos proporcionados

Aunque es fácil crear nuevos tipos de nodos, LiteGraph viene con algunos nodos predeterminados que podrían ser útiles para muchos casos:

• Interfaz (widgets)
• Matemáticas (trigonometría, operaciones de matemáticas)
• Audio (audioapi y midi)
• Gráficos 3D (postprocesamiento en WebGL)
• Entrada (Leer gamepad)

Instalación

Puede instalarlo con NPM

 npm install litegraph.js

O descargar la versión build/litegraph.js y css/litegraph.css de este repositorio.

Primer proyecto

 < html >
< head >
	< link rel =" stylesheet " type =" text/css " href =" litegraph.css " >
	< script type =" text/javascript " src =" litegraph.js " > </ script >
</ head >
< body style =' width:100%; height:100% ' >
< canvas id =' mycanvas ' width =' 1024 ' height =' 720 ' style =' border: 1px solid ' > </ canvas >
< script >
var graph = new LGraph ( ) ;

var canvas = new LGraphCanvas ( "#mycanvas" , graph ) ;

var node_const = LiteGraph . createNode ( "basic/const" ) ;
node_const . pos = [ 200 , 200 ] ;
graph . add ( node_const ) ;
node_const . setValue ( 4.5 ) ;

var node_watch = LiteGraph . createNode ( "basic/watch" ) ;
node_watch . pos = [ 700 , 200 ] ;
graph . add ( node_watch ) ;

node_const . connect ( 0 , node_watch , 0 ) ;

graph . start ( )
</ script >
</ body >
</ html > 

Cómo codificar un nuevo tipo de nodo

Aquí hay un ejemplo de cómo construir un nodo que resume dos entradas:

 //node constructor class
function MyAddNode ( )
{
  this . addInput ( "A" , "number" ) ;
  this . addInput ( "B" , "number" ) ;
  this . addOutput ( "A+B" , "number" ) ;
  this . properties = { precision : 1 } ;
}

//name to show
MyAddNode . title = "Sum" ;

//function to call when the node is executed
MyAddNode . prototype . onExecute = function ( )
{
  var A = this . getInputData ( 0 ) ;
  if ( A === undefined )
    A = 0 ;
  var B = this . getInputData ( 1 ) ;
  if ( B === undefined )
    B = 0 ;
  this . setOutputData ( 0 , A + B ) ;
}

//register in the system
LiteGraph . registerNodeType ( "basic/sum" , MyAddNode ) ;

O puede envolver una función existente:

 function sum ( a , b )
{
   return a + b ;
}

LiteGraph . wrapFunctionAsNode ( "math/sum" , sum , [ "Number" , "Number" ] , "Number" ) ; 

Lado del servidor

También funciona del lado del servidor usando NodeJs, aunque algunos nodos no funcionan en servidor (audio, gráficos, entrada, etc.).

 var LiteGraph = require ( "./litegraph.js" ) . LiteGraph ;

var graph = new LiteGraph . LGraph ( ) ;

var node_time = LiteGraph . createNode ( "basic/time" ) ;
graph . add ( node_time ) ;

var node_console = LiteGraph . createNode ( "basic/console" ) ;
node_console . mode = LiteGraph . ALWAYS ;
graph . add ( node_console ) ;

node_time . connect ( 0 , node_console , 1 ) ;

graph . start ( ) 

Proyectos que lo usan

conserfyui

webglstudio.org

Moi elefante

Mynodes

Tensiones

---

Incluye varios comandos en la carpeta Utils para generar DOC, verificar errores y construir la versión minificada.

Manifestación

---

La demostración incluye algunos ejemplos de gráficos. Para probarlos, puede visitar el sitio de demostración o instalarlo en su computadora local, para hacerlo, necesite git , node y npm . Dado que esas dependencias están instaladas, ejecute los siguientes comandos para probarlo:

$ git clone https://github.com/jagenjo/litegraph.js.git
$ cd litegraph.js
$ npm install
$ node utils/server.js
Example app listening on port 80 !

Abra su navegador y apírtelo a http: // localhost: 8000/. Puede seleccionar una demostración del menú desplegable en la parte superior de la página.

Comentario

---

Puede escribir cualquier comentario a [email protected]

Colaboradores

• atlasán
• kriffe
• rappestad
• Inventivetalentdev
• Natescarlet
• Coderofsalvation
• Ilyabesk
• Gausszhou