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 لإنشاء DOC ، والتحقق من الأخطاء وإنشاء إصدار MINIFY.
يتضمن العرض التوضيحي بعض أمثلة الرسوم البيانية. من أجل تجربتها ، يمكنك زيارة الموقع التجريبي أو تثبيته على جهاز الكمبيوتر المحلي الخاص بك ، للقيام بذلك ، تحتاج إلى 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]
