litegraph.js
LiteGraph 1.0
Une bibliothèque en JavaScript pour créer des graphiques dans le navigateur similaires aux Blueprints Unreal. Les nœuds peuvent être programmés facilement et il comprend un éditeur pour construire et tester les graphiques.
Il peut être intégré facilement dans toutes les applications Web existantes et les graphiques peuvent être exécutés sans avoir besoin de l'éditeur.
Essayez-le dans le site de démonstration.
Bien qu'il soit facile de créer de nouveaux types de nœuds, LiteGraph est livré avec certains nœuds par défaut qui pourraient être utiles pour de nombreux cas:
Vous pouvez l'installer à l'aide de NPM
npm install litegraph.js
Ou télécharger la version build/litegraph.js et css/litegraph.css de ce référentiel.
< 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 > Voici un exemple de la façon de construire un nœud qui résume deux entrées:
//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 ) ;Ou vous pouvez envelopper une fonction existante:
function sum ( a , b )
{
return a + b ;
}
LiteGraph . wrapFunctionAsNode ( "math/sum" , sum , [ "Number" , "Number" ] , "Number" ) ; Il fonctionne également côté serveur à l'aide de NodeJS bien que certains nœuds ne fonctionnent pas dans le serveur (audio, graphiques, entrée, 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 ( ) 
Il inclut plusieurs commandes dans le dossier UTILS pour générer des DOC, vérifier les erreurs et créer une version minimifiée.
La démo comprend quelques exemples de graphiques. Pour les essayer, vous pouvez visiter le site de démonstration ou l'installer sur votre ordinateur local, pour le faire, vous avez besoin git , node et npm . Étant donné que ces dépendances sont installées, exécutez les commandes suivantes pour l'essayer:
$ git clone https://github.com/jagenjo/litegraph.js.git
$ cd litegraph.js
$ npm install
$ node utils/server.js
Example app listening on port 80 !Ouvrez votre navigateur et pointez-le sur http: // localhost: 8000 /. Vous pouvez sélectionner une démo dans la liste déroulante en haut de la page.
Vous pouvez rédiger des commentaires à [email protected]
