litegraph.js

litegraph.js

Библиотека в JavaScript для создания графиков в браузере, аналогичной нереальным чертежам. Узлы могут быть легко запрограммированы, и он включает в себя редактор для построения и тестирования графиков.

Он может быть легко интегрирован в любые существующие веб -приложения, и графики могут быть запущены без необходимости редактора.

Попробуйте это на демонстрационном сайте.

Функции

• Рендеры на Canvas2D (Zoom in in unding and Panning, легко рендеринговые интерфейсы, можно использовать внутри веб -glglexture)
• Легкий в использовании редактор (Searchbox, сочетание клавиатуры, множественный выбор, контекстное меню, ...)
• Оптимизирован для поддержки сотен узлов на график (на редакторе, а также на выполнение)
• Настраиваемая тема (цвета, формы, фон)
• Обратные вызовы для персонализации каждого действия/рисования/события узлов
• Подграфы (узлы, которые сами содержат графики)
• Система режима живого режима (скрывает график, но вызывает узлы, чтобы отображать все, что они хотят, полезно для создания интерфейсов)
• Графики могут быть выполнены в Nodejs
• Высоко настраиваемые узлы (цвет, форма, слоты вертикальные или горизонтальные, виджеты, пользовательский рендеринг)
• Легко интегрировать в любое приложение JS (один файл, без зависимостей)
• Поддержка TypeScript

Узлы предоставлены

Хотя это легко создавать новые типы узлов, LiteGraph поставляется с некоторыми узлами по умолчанию, которые могут быть полезны для многих случаев:

• Интерфейс (виджеты)
• Математика (тригонометрия, математические операции)
• Аудио (аудиоапи и миди)
• 3D Graphics (постобработка в Webgl)
• Ввод (читать GamePad)

Установка

Вы можете установить его с помощью 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 ( ) 

Проекты, использующие его

comfyui

webglstudio.org

Мои Слон

Mynodes

Утилит

---

Он включает в себя несколько команд в папке UTILS для генерации DOC, проверки ошибок и построения миниверной версии.

Демо

---

Демо включает в себя некоторые примеры графиков. Чтобы попробовать их, вы можете посетить демонстрационный сайт или установить его на локальный компьютер, чтобы сделать это, вам нужны 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]

Участники

• Атласан
• Крифф
• Раппестад
• InventiveTalentDev
• НАТСКАРЛ
• Кодерофсальвация
• Ильейбеск
• Гауссчжоу