-
Notifications
You must be signed in to change notification settings - Fork 1
Expand file tree
/
Copy pathindex.html
More file actions
195 lines (183 loc) · 9.39 KB
/
index.html
File metadata and controls
195 lines (183 loc) · 9.39 KB
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
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="./style.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@0.9.4/css/bulma.min.css">
<script src="https://kit.fontawesome.com/9ed90db1e3.js" crossorigin="anonymous"></script>
<script type="module" src="./script.js"></script>
<title>Pathdinding Algorithm Visualizer</title>
</head>
<body>
<section class="hero has-background-black-bis has-text-centered p-4">
<p class="title has-text-white">Pathfinding Algorithm Visualizer</p>
<p class="subtitle has-text-white">Explore the pathfinding algorithms using these functions!</p>
</section>
<section class="hero has-background-grey-dark has-text-white has-text-centered">
<div class="hero-body p-1">
<div class="container">
<label class="radio" for="startNode">
<input type="radio" id="startNode" name="operation" value="Start Node">
Start Node
</label>
<label class="radio" for="endNode">
<input type="radio" id="endNode" name="operation" value="End Node">
End Node
</label>
<label class="radio" for="drawWall">
<input type="radio" id="drawWall" name="operation" checked value="Draw Wall">
Draw Wall
</label>
<label class="radio" for="eraseWall">
<input type="radio" id="eraseWall" name="operation" value="Erase Wall">
Erase Wall
</label>
</div>
</div>
</section>
<section class="hero has-background-grey-dark has-text-white has-text-centered">
<div class="hero-body p-3">
<div class="field is-grouped is-grouped-centered">
<p class="control">
<a class="button is-small is-static">Grid size</a>
</p>
<p class="control">
<input class="input is-small" type="number" id="gridSize" min="2" max="1000" value="20">
</p>
<div class="control">
<div class="select is-small">
<select name="algorithm" id="algorithmDropdown">
<option value="dfs">Depth First Search (DFS)</option>
<option value="bfs">Breadth First Search (BFS)</option>
<option value="dijkstra">Dijkstra's Algorithm</option>
<option value="astar">A*</option>
</select>
</div>
</div>
<div class="control">
<button id="updateGridSizeBtn" class="button is-small has-background-warning-light" value="update">Update</button>
</div>
</div>
<div class="column is-half is-offset-one-quarter p-0">
<button class="button has-background-warning is-fullwidth" type="button" id="executeBtn" value="Execute">EXECUTE</button>
</div>
</div>
</section>
<section class="columns is-centered p-1 mb-0">
<div class="column is-half pb-0">
<section class="has-text-centered">
<canvas id="cvs"></canvas>
</section>
</div>
<div class="column is-4 pb-0" id="algorithmInfoDiv">
<article class="panel is-primary mb-4">
<p class="panel-heading has-background-grey-darker">
Algorithm Definition
</p>
<div id="algorithmDefinitionDiv" class="content p-4">
<p>
DFS uses a stack data structure to traverse the grid. The starting node will the only node in the stack at the beginning. Peek the stack and check if it is the ending node, if not it will arbitrarily get the next unvisited neighbor node and push it to the stack. If all neighbors are already visited it will pop the current node in the stack to backtrack. Repeat operation until end node is found or stack is empty.
</p>
</div>
</article>
<article class="panel is-primary mt-4">
<p class="panel-heading has-background-grey-darker">
Algorithm Steps
</p>
<div class="content p-4" id="frameInfoDiv">
<p>This is where the information for every step of the algorithm is located.</p>
<!-- sample frameInfoDiv content
<p><b>Iteration:</b> 69</p>
<p><b>Coordinate:</b> row 22 column 5</p>
<p><b>Operation:</b> Queue-ing</p>
<p><b>Description:</b> Mark as visited</p> -->
</div>
</article>
</div>
</section>
<section class="hero has-background-grey-dark has-text-white has-text-centered p-3">
<div class="field is-grouped is-grouped-centered">
<p class="control">
<a class="button is-static">Speed (ms)</a>
</p>
<p class="control">
<input id="speedInput" class="input" type="number" id="speed" min="1" max="1000" value="10">
</p>
<p class="control">
<input id="playbackRange" type="range" min='0' value='0'>
</p>
<div class="control">
<button id="startOverBtn" class="button has-background-grey-lighter" type="button" value="Start Over">
<i class="fa-solid fa-repeat"></i>
</button>
</div>
<div class="control">
<button id="stepBackBtn" class="button has-background-white-ter" type="button" value="Step Backward">
<i class="fa-solid fa-backward-step"></i>
</button>
</div>
<div class="control">
<button id="playBtn" class="button has-background-warning" type="button" value="Play">
<i class="fa-solid fa-play"></i>
</button>
<button id="pauseBtn" class="button has-background-warning-dark" type="button" value="Pause" style="display: none;">
<i class="fa-solid fa-pause"></i>
</button>
</div>
<div class="control">
<button id="stepForwardBtn" class="button has-background-white-ter" type="button" value="Step Forward">
<i class="fa-solid fa-forward-step"></i>
</button>
</div>
<div class="control">
<button id="endBtn" class="button has-background-grey-lighter" type="button" value="End">
<i class="fa-solid fa-stop"></i>
</button>
</div>
</div>
</section>
<section class="hero has-background-black-bis has-text-centered p-">
<div class="content has-text-white has-text-centered">
<p>
<a href="https://github.com/tenick/pathfinding-visualization.git" class="has-text-warning-dark"><strong>Pathfinding Algorithm Visualizer</strong></a> by <a href="https://github.com/tenick" class="has-text-warning-dark">Kenneth Usares</a> and <a href="https://github.com/rmbernardo27" class="has-text-warning-dark">Reanne Bernardo</a>
</p>
</div>
</section>
<a id="myBtn" class="float has-background-warning">
<i class="fa-solid fa-circle-question my-float"></i>
</a>
<!-- The Modal -->
<div id="myModal" class="modal">
<div class="modal-background"></div>
<div class="modal-card">
<header class="modal-card-head has-background-grey-light">
<p class="modal-card-title has-text-white">Help</p>
<button class="delete close" aria-label="close"></button>
</header>
<!-- Modal content -->
<section class="modal-card-body">
<b>Hotkeys:</b><br>
Home - Go at starting step of algorithm<br>
End - Go at ending step of algorithm<br>
Left Arrow - Go back 1 algorithm step<br>
Right Arrow - Go forward 1 algorithm step<br>
Space Bar - Play/Pause the algorithm<br>
Left Bracket - Decrease speed (ms) by 10<br>
Right Bracket - Increase speed (ms) by 10<br>
<br>
<strong>Note:</strong> Hotkey will only work if not currently focused in a Button or Input element, make sure to click on any element that isn't a button or an input for hotkeys to work (e.g. click on the background)<br>
<br>
<b>Djikstra Node:</b><br>
The number shown in the node means it is the distance from that node to the starting node.<br>
<br>
<b>A* Node:</b><br>
The top-left number refers to g(n), the distance from that node to the starting node.<br>
The bottom-left number refers to h(n), the manhattan distance from that node to the ending node.<br>
The big middle number refers to f(n), where f(n) = g(n) + h(n)<br>
</section>
</div>
</div>
</body>
</html>