litegraph.js
LiteGraph 1.0
ไลบรารีใน JavaScript เพื่อสร้างกราฟในเบราว์เซอร์คล้ายกับพิมพ์เขียวที่ไม่เป็นจริง โหนดสามารถตั้งโปรแกรมได้อย่างง่ายดายและมีตัวแก้ไขเพื่อสร้างและทดสอบกราฟ
สามารถรวมเข้าด้วยกันได้อย่างง่ายดายในเว็บแอปพลิเคชันและกราฟที่มีอยู่สามารถทำงานได้โดยไม่จำเป็นต้องมีตัวแก้ไข
ลองใช้ในเว็บไซต์สาธิต
แม้ว่าจะเป็นเรื่องง่ายที่จะสร้างโหนดประเภทใหม่ แต่ LiteGraph มาพร้อมกับโหนดเริ่มต้นบางอย่างที่อาจเป็นประโยชน์สำหรับหลายกรณี:
คุณสามารถติดตั้งได้โดยใช้ NPM
npm install litegraph.js
หรือดาวน์โหลดรุ่น build/litegraph.js และ css/litegraph.css จากที่เก็บนี้
< 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 > นี่คือตัวอย่างของวิธีการสร้างโหนดที่รวมสองอินพุต:
//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 ) ;หรือคุณสามารถห่อฟังก์ชั่นที่มีอยู่:
function sum ( a , b )
{
return a + b ;
}
LiteGraph . wrapFunctionAsNode ( "math/sum" , sum , [ "Number" , "Number" ] , "Number" ) ; นอกจากนี้ยังใช้งานด้านเซิร์ฟเวอร์โดยใช้ nodeJs แม้ว่าบางโหนดไม่ทำงานในเซิร์ฟเวอร์ (เสียงกราฟิกอินพุต ฯลฯ )
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 ( ) 
มันมีคำสั่งหลายคำในโฟลเดอร์ UTILS เพื่อสร้างเอกสารตรวจสอบข้อผิดพลาดและสร้างเวอร์ชัน minifyed
การสาธิตรวมถึงตัวอย่างของกราฟ ในการลองใช้พวกเขาคุณสามารถเยี่ยมชมเว็บไซต์สาธิตหรือติดตั้งบนคอมพิวเตอร์ในพื้นที่ของคุณเพื่อทำเช่นนั้นคุณต้องใช้ git , node และ npm ด้วยการติดตั้งการพึ่งพาเหล่านั้นให้เรียกใช้คำสั่งต่อไปนี้เพื่อลองใช้:
$ git clone https://github.com/jagenjo/litegraph.js.git
$ cd litegraph.js
$ npm install
$ node utils/server.js
Example app listening on port 80 !เปิดเบราว์เซอร์ของคุณและชี้ไปที่ http: // localhost: 8000/ คุณสามารถเลือกตัวอย่างจากดรอปดาวน์ที่ด้านบนของหน้า
คุณสามารถเขียนข้อเสนอแนะใด ๆ ถึง [email protected]
