-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
83 lines (81 loc) · 3.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
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="title" property="og:title" content="Path Finding">
<meta property="og:type" content="Visualization">
<meta name="description" property="og:description" content="Path finding algorithms visualization. Created By Shail Murtaza.">
<meta name="author" content="Shail Murtaza">
<meta name="image" property="og:image" content="logo.png">
<meta property="og:image:width" content="100">
<meta property="og:image:height" content="100">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="shortcut icon" href="logo.png" type="image/x-icon">
<link rel="stylesheet" href="css/msg.css">
<link rel="stylesheet" href="css/main.css">
<title>Searching</title>
</head>
<body>
<div id="msg_container"></div>
<div id="wrapper">
<div id="control">
<select id="algo_select">
<option value=0>Depth First Search</option>
<option value=1>Breadth First Search</option>
<option value=2>Bi-Directional Search (BreadthFirstSearch)</option>
<option value=3>Best First Search (Greedy Search)</option>
<option value=4>A*</option>
</select>
<div>
<input id="action-start" type="radio" name="action" value="START" checked>
<label for="action-start">Select START node</label>
</div>
<div>
<input id="action-goal" type="radio" name="action" value="GOAL">
<label for="action-goal">Select GOAL node</label>
</div>
<div>
<input id="action-block" type="radio" name="action" value="BLOCK">
<label for="action-block">Select BRICK/BLOCK node</label>
</div>
<div>
<input id="action-unblock" type="radio" name="action" value="FILL">
<label for="action-unblock">Unselect BRICK/BLOCK node</label>
</div>
<div class="flex">
<label for="length" style="width: 100%;">Enter length of one tile/node:</label>
<input id="length" class="item" type="number" value=40>
</div>
<div class="flex">
<label for="speed" style="width: 100%;">Speed <output id="speed_output"></output></label>
<input id="speed" type="range" value="90" min="80" max="100" oninput="set_speed()">
</div>
<div class="flex outputs">
<label class="field">STATUS: <output id="status">NONE</output></label>
<label class="field">STEPS: <output id="steps">NONE</output></label>
</div>
<div class="flex">
<button class="item" id="update" onclick="update_map()">UPDATE/RESET</button>
<button class="item" id="clear" onclick="clear_map()">CLEAR</button>
<button class="item" id="invert" onclick="invert_map()">INVERT</button>
</div>
<div class="flex">
<button class="item" id="start" onclick="search.start()">START</button>
<button class="item" id="stop" onclick="search.stop()">STOP</button>
</div>
</div>
</div>
<canvas id="canvas"></canvas>
<script src="js/msg.js"></script>
<script src="js/map.js"></script>
<script src="js/controller.js"></script>
<script src="js/queue.js"></script>
<script src="js/algo/depth_first_search.js"></script>
<script src="js/algo/breadth_first_search.js"></script>
<script src="js/algo/bi_directional_search.js"></script>
<script src="js/algo/best_first_search.js"></script>
<script src="js/algo/a_star_search.js"></script>
<script src="js/searching.js"></script>
</body>
</html>