forked from jagenjo/litegraph.js
-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
executable file
·86 lines (71 loc) · 2.96 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<!--
<meta property="og:title" content="GameEditor" />
<meta property="og:description" content="GameEditor for simple games" />
<meta property="og:image" content="" />
-->
<title>litegraph.js</title>
<link type="text/css" rel="stylesheet" media="all" href="https://github.com/assets/github-c066013be20516a6aae45467044fa109f18bd0c6.css">
<link type="text/css" rel="stylesheet" media="all" href="https://github.com/assets/github2-97081caeb5890bc349a9ff52de33ac5ba1a4b6cc.css">
<link type="text/css" rel="stylesheet" media="all" href="https://github.com/assets/styleguide-4a2ef42768c9e616cf8022dec2fe99290430ac2c.css">
<link rel="stylesheet" type="text/css" href="style.css" />
<style type='text/css'>
</style>
</head>
<body>
<div id="wrap">
<div id="main">
<div id="content" class="markdown-body">
<h1>litegraph.js</h1>
<p>Litegraph.js is a library that allows to create modular graphs on the web, similar to PureData.</p>
<p>Graphs can be used to create workflows, image processing, audio, or any kind of network of modules interacting with each other.</p>
<p>Some of the main features:</p>
<ul>
<li>Automatic sorting of modules according to basic rules.</li>
<li>Dynamic number of input/outputs per module.</li>
<li>Persistence, graphs can be serialized in a JSON.</li>
<li>Optimized render in a HTML5 Canvas (supports hundres of modules on the screen).</li>
<li>Allows to run the graphs without the need of the canvas (standalone mode).</li>
<li>Simple API. It is very easy to create new modules.</li>
<li>Edit and Live mode, (in live mode only modules with widgets are rendered.</li>
<li>Contextual menu in the editor.</li>
</ul>
<h2>Usage</h2>
<p>Include the library</p>
<pre>
<script type="text/javascript" src="../src/litegraph.js"></script></pre>
<p>Create a graph</p>
<pre>
var graph = new LGraph();</pre>
<p>Create a canvas renderer</p>
<pre>
var canvas = new LGraphCanvas("#mycanvas");</pre>
<p>Add some nodes to the graph</p>
<pre>
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);</pre>
<p>Connect them</p>
<pre>
node_const.connect(0, node_watch, 0 );</pre>
<p>Run the graph</p>
<pre>
graph.start();</pre>
<h2>Example of editor</h2>
<ul>
<li><a href="demo">Module editor</a></li>
</ul>
<h2>Documentation</h2>
<p>Here you can check <a href="doc">automatically generated documentation</a>.</p>
</div>
</div>
</div>
</body>
</html>