-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
107 lines (107 loc) · 5.11 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
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
<html>
<head>
<title>Graphing Visualizer</title>
<link rel="shortcut icon" href="/favicon.ico" />
<link href="main.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="coffee-script.js"></script>
<script type="text/javascript" charset="utf-8" src="main.js"></script>
</head>
<body>
<a href="https://github.com/thedufer/VisualGraph"><img style="position: absolute; top: 0; right: 0; border: 0;" src="https://github-camo.global.ssl.fastly.net/38ef81f8aca64bb9a64448d0d70f1308ef5341ab/68747470733a2f2f73332e616d617a6f6e6177732e636f6d2f6769746875622f726962626f6e732f666f726b6d655f72696768745f6461726b626c75655f3132313632312e706e67" alt="Fork me on GitHub" data-canonical-src="https://s3.amazonaws.com/github/ribbons/forkme_right_darkblue_121621.png"></a>
<div id="background">
<div id="wrapper">
<div id="header">
<h1>Graphing Visualizer</h1>
</div>
<svg class="js-svg" width="800" height="400">
Looks like your browser doesn't support the svg element. Try something newer, like <a href="http://www.google.com/chrome">Google Chrome</a>.
<defs>
<marker id="end" viewBox="-2 -4 8 10" refX="8" refY="0" markerWidth="10" markerHeight="6" orient="auto">
<path d="M-5,-3L4,0L-5,3"></path>
</marker>
<marker id="end-self" viewBox="-2 -4 8 10" refX="6" refY="-2" markerWidth="10" markerHeight="6" orient="auto">
<path d="M-5,-3L4,0L-5,3" transform="rotate(-20)"></path>
</marker>
</defs>
</svg>
<br />
<form id="js-options">
<button id="js-play" class="play-pause">▶</button>
<button id="js-pause" class="play-pause">❚❚</button>
<input type="range" id="js-seek" min="1" max="1" step="1" />
<br />
<label for="js-nodes-length">Nodes:</label>
<input type="text" id="js-nodes-length" value="10" />
<label for="js-edges-length">Edges:</label>
<input type="text" id="js-edges-length" value="20" />
<fieldset id="custom-values" class="code-example">
<legend>Custom values</legend>
Use coffeescript to declare the new values. Examples : <code>[4,7,2]</code>, <code>[-10..20]</code>, <code>[50..-30].concat [70..75]</code>
<textarea id="js-custom-values" class="values" rows="10"></textarea>
</fieldset>
<br />
<label for="js-speed">Speed:</label>
<input type="range" id="js-speed" min="1" value="401" max="500" step="1" />
<label for="js-show-node-num">Show Node Numbers:</label>
<input type="checkbox" id="js-show-node-num" checked />
<label for="js-show-edge-cost">Show Edge Costs:</label>
<input type="checkbox" id="js-show-edge-cost" checked />
</form>
<div id="right-bar">
<div id="js-error"></div>
<div id="js-result"></div>
</div>
<div id="main">
<textarea id="js-code" class="code" rows="20"></textarea>
</div>
<br />
<div id="footer">
<div id="footer-buttons">
<center>
<button id="js-run" class="footer-button">Run That Code!</button>
</center>
<center>
Prewritten algorithms:
<select id="js-algorithms"></select>
</center>
</div>
<br />
<div id="description-wrapper">
<div id="description">
Write some code in <a href="http://jashkenas.github.com/coffee-script/">CoffeeScript</a> and hit run. The graph will show what's going on.
<br />
<br />
Use the following methods on <span class="code">VG</span>:
<br />
<ul>
<li><span class="code">getNodeCount()</span>: get number of nodes in the graph</li>
<li><span class="code">getAdjacentNodes(n)</span>: returns an array of objects like <span class="code">{ node, cost }</span> for each node adjacent to to node n</li>
<li><span class="code">setCost(n, m, cost)</span>: set the cost of the edge from node n to node m</li>
<li><span class="code">highlightEdge(n, m[, color])</span>: highlight the edge from node n to node m with color (default: "red")</li>
<li><span class="code">unhighlightEdge(n, m)</span>: unhighlight the edge from node n to node m</li>
<li><span class="code">highlightNode(n[, color])</span>: highlight node n with color (default: "red")</li>
<li><span class="code">unhighlightNode(n)</span>: unhighlight node n to node m</li>
<li><span class="code">addEdge(n, m, cost)</span>: add an edge from node n to node m with cost cost</li>
<li><span class="code">locals</span>: A map (initially empty) where you can store primitives that you want to see as the sort animates.</li>
</ul>
<br />
Try out the prewritten algorithms for syntax examples.
<br />
<br />
Notes:
<br />
<ul>
<li>
Nothing will display if there is an infinite loop.
</li>
</ul>
<br />
<br />
Email me at <span class="code">thedufer at gmail dot com</span> with comments/questions!
</div>
</div>
</div>
</div>
</div>
</body>
</html>