litegraph.js

litegraph.js

Perpustakaan di JavaScript untuk membuat grafik di browser yang mirip dengan cetak biru yang tidak nyata. Node dapat diprogram dengan mudah dan termasuk editor untuk membangun dan menguji grafik.

Ini dapat diintegrasikan dengan mudah dalam aplikasi web yang ada dan grafik dapat dijalankan tanpa perlu editor.

Cobalah di situs demo.

Fitur

• Render di CanVas2D (Zoom In/Out dan Panning, Mudah Membuat Antarmuka Kompleks, Dapat Digunakan Di Dalam Webgltexture)
• Editor Mudah Digunakan (SearchBox, Pintasan Keyboard, Beberapa Pilihan, Menu Konteks, ...)
• Dioptimalkan untuk mendukung ratusan node per grafik (pada editor tetapi juga pada eksekusi)
• Tema yang dapat disesuaikan (warna, bentuk, latar belakang)
• Callbacks untuk mempersonalisasi setiap tindakan/gambar/peristiwa node
• Subgraph (node yang berisi grafik sendiri)
• Sistem Mode Langsung (menyembunyikan grafik tetapi memanggil node untuk membuat apa pun yang mereka inginkan, berguna untuk membuat UI)
• Grafik dapat dieksekusi di nodeJS
• Node yang sangat dapat disesuaikan (warna, bentuk, slot vertikal atau horizontal, widget, rendering khusus)
• Mudah diintegrasikan dalam aplikasi JS apa pun (satu file tunggal, tidak ada dependensi)
• Dukungan naskah

Node disediakan

Meskipun mudah untuk membuat tipe simpul baru, Litegraph hadir dengan beberapa node default yang bisa berguna untuk banyak kasus:

• Antarmuka (widget)
• Matematika (Trigonometri, Operasi Matematika)
• Audio (Audioapi dan MIDI)
• Grafik 3D (postprocessing di WebGL)
• Input (baca gamepad)

Instalasi

Anda dapat menginstalnya menggunakan NPM

 npm install litegraph.js

Atau mengunduh versi build/litegraph.js dan css/litegraph.css dari repositori ini.

Proyek Pertama

 < 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 > 

Cara mengkode jenis simpul baru

Berikut adalah contoh cara membangun simpul yang merangkum dua input:

 //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 ) ;

Atau Anda dapat membungkus fungsi yang ada:

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

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

Sisi server

Ini juga berfungsi sisi server menggunakan nodeJs meskipun beberapa node tidak berfungsi di server (audio, grafik, input, dll).

 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 ( ) 

Proyek menggunakannya

comfyui

webglstudio.org

Moi Elephant

Mynodes

Utils

---

Ini mencakup beberapa perintah di folder utils untuk menghasilkan dok, periksa kesalahan dan membangun versi yang lebih bermini.

Demo

---

Demo ini mencakup beberapa contoh grafik. Untuk mencobanya, Anda dapat mengunjungi situs demo atau menginstalnya di komputer lokal Anda, untuk melakukannya Anda memerlukan git , node dan npm . Mengingat dependensi tersebut diinstal, jalankan perintah berikut untuk mencobanya:

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

Buka browser Anda dan arahkan ke http: // localhost: 8000/. Anda dapat memilih demo dari dropdown di bagian atas halaman.

Masukan

---

Anda dapat menulis umpan balik apa pun ke [email protected]

Kontributor

• Atlasan
• Kriffe
• Rappestad
• Inventivetalentdev
• Natescarlet
• Coderofsalvation
• Ilyabesk
• Gausszhou