forked from jakobgt/dajkstra
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
56 lines (55 loc) · 2.25 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
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<title>Shortest Path</title>
<script language="javascript" type="text/javascript" src="build/visualizer.dart.js" defer></script>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<h2>An illustration of <a
href="http://en.wikipedia.org/wiki/Shortest_path_problem">the
shortest-path problem</a></h2>
<p>
This tool illustrates finding the shortest path in a graph in two ways:
<ul>
<li>The <em>naive</em> strategy enumerates all possible paths from the initial node (in green) to the final node (in
red).
</li>
<li>The <em>Dijkstra</em> strategy incrementally builds a tree of shortest-paths from the initial node (in green)
using <a href="http://en.wikipedia.org/wiki/Dijkstra's_algorithm"> Dijkstra's shortest-path algorithm</a>.
</li>
</ul>
The naive strategy might appear reasonable but it does not scale. Use
the <em>Hard Map</em> button to get a map with many paths and compare
the naive enumeration to Dijkstra's solution.
<p>
The code requires HTML Canvas support in your browser. If it does not
work, try using the Google Chrome browser with which the code has been
tested.
</p>
<p>
To access the Dart source code see our Github repository:
<a href="https://github.com/zerny/shortest-path" target="_blank">https://github.com/zerny/shortest-path</a>
</p>
<hr/>
<input id="btn_reset" type="button" value="Reset Map"/>
—
<input id="btn_easy_map" type="button" value="New Easy Map"/>
<input id="btn_hard_map" type="button" value="New Hard Map"/>
—
<input id="btn_naive_step" type="button" value="Step Naive"/>
<input id="btn_naive_backstep" type="button" value="Back step Naive"/>
<input id="btn_naive_run" type="button" value="Run Naive"/>
—
<input id="btn_dijkstra_step" type="button" value="Step Dijkstra"/>
<input id="btn_dijkstra_run" type="button" value="Run Dijkstra"/>
—
<label for="inp_run_speed">Run speed:</label><input id="inp_run_speed" type="input" value="100"/>
<hr/>
<canvas id="map" style="float: left"></canvas>
<iframe id="code" style="float:left" src="naive-simple.html">
</iframe>
<hr/>
</body>
</html>