-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
executable file
·250 lines (250 loc) · 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
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
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
<html>
<head>
<link href="css/cyborg.css" rel="stylesheet" type="text/css" />
<link href="css/slider.css" rel="stylesheet" type="text/css" />
<link href="css/table.css" rel="stylesheet" type="text/css" />
<link href='http://fonts.googleapis.com/css?family=Press+Start+2P' rel='stylesheet' type='text/css'>
<script type="text/javascript" src="script/external/jquery.js"></script>
<script type="text/javascript" src="script/external/bootstrap.js"></script>
<script type="text/javascript" src="script/external/bootstrap-slider.js"></script>
<script type="text/javascript" src="script/external/bootstrap-carousel.js"></script>
<script type="text/javascript" src="script/external/buckets.js"></script>
<script type="text/javascript" src="script/init/init.js"></script>
<script type="text/javascript" src="script/search/wrapper.js"></script>
<script type="text/javascript" src="script/search/search.js"></script>
<script type="text/javascript">
var size = 20;
var graph = true;
function issueAlert(alertType, alertMessage) {
//alertType in ['error', 'warning', 'success', 'info', '']
$('#alertModal .modal-body.alert').toggleClass('alert-'+alertType).text(alertMessage);
$('#alertModal').modal();
}
function dismissAlert() {
$('#alertModal .modal-body.alert').attr('class', 'modal-body alert').text('');
}
$(document).ready(function() {
initialize(size);
RUN = function(is_graph) {
$('#grid td').removeClass('path').not('.end').not('.start').text('');
$('#grid td').removeClass('visited');
var world = generateWorld(size);
if (world.start == {} || world.end == {}) {
return null;
}
var k = new node(world.start, world);
var selection = $('#header .nav .active').attr('selection');
var fringe = null;
if (selection == '0') {
fringe = new buckets.Stack();
}
else if (selection == '1') {
fringe = new Queue();
}
else if (selection == '2') {
var estr = 'return Math.abs(worldObject.end.x - state.x) + Math.abs(worldObject.end.y - state.y);';
var comp = compareGenerator(world, estr, 'greedy');
fringe = new PriorityQueue(comp);
}
else if (selection == '3') {
var estr = 'return Math.abs(worldObject.end.x - state.x) + Math.abs(worldObject.end.y - state.y);';
var comp = compareGenerator(world, estr, 'astar');
fringe = new PriorityQueue(comp);
}
else {
fringe = new Queue();
}
if ($('.end').length && $('.start')) {
var searchRes = search(fringe, world, k, function(s) { return s.x == world.end.x && s.y == world.end.y; }, is_graph);
if (!searchRes) {
issueAlert('info', 'No path could be found! Better luck next time.');
return null;
}
var backup = function(fin) {
if (fin.x == world.start.x && fin.y == world.start.y) {
return 0;
}
var number = backup(fin.__proto__) + 1;
var selector = $('#td' + String(fin.x + fin.y * size));
selector.addClass('path').text(String(number));
return number;
}
backup(searchRes.__proto__);
return searchRes;
}
else {
issueAlert('error', 'You must put, at least, a start and end point!');
}
}
});
</script>
</head>
<body style="height:100%;min-height:900px;">
<div id="content" class="container" style="background-color:#020202;min-height:100%;">
<div class="row" style="margin: 20px 0px;">
<div class="span12">
<a class="brand" style="font-size:20px;">Search Algorithm Visualizer</a>
</div>
</div>
<div id="header" class="row">
<div class="span12">
<div class="navbar">
<div class="navbar-inner" style="padding-left:0px;">
<ul class="nav">
<li class="active"><a>Depth First</a></li>
<li class="divider-vertical"></li>
<li><a>Breadth First</a></li>
<li class="divider-vertical"></li>
<li><a>Greedy</a></li>
<li class="divider-vertical"></li>
<li><a>A Star</a></li>
<li class="divider-vertical"></li>
<li id="instructions" onclick="$('#instructionModal').modal();"><a>Instructions</a></li>
</ul>
</div>
</div>
</div>
</div>
<div id="selector" class="row">
<div class="offset2 span8">
<div class="navbar">
<div class="navbar-inner">
<ul class="nav nav-pills">
<li class="dropdown">
<a id="displayed-option" class="dropdown-toggle" data-toggle="dropdown" href="#">Start Location
<b class="caret"></b></a>
<ul class="dropdown-menu">
<li class="active"><a>Start Location</a></li>
<li><a>End Location</a></li>
<li><a>Obstacle</a></li>
</ul>
</li>
<li onclick="RUN(graph)"><a>Run Search</a></li>
<li onclick="$('#grid td').attr('class', '').text('');"><a>Clear Board</a></li>
<li onclick="$('#optionModal').modal();"><a>Options</a></li>
</ul>
</div>
</div>
</div>
</div>
<div class="row">
<div class="offset2 span8" style="border:solid 3px #222;border-radius:3px;">
<div id="instructionModal" class="modal fade hide" data-backdrop="static">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<span>Instructions</span>
<span id="pageCount" val='0'></span>
</div>
<div class="modal-body alert alert-info">
<div id="instructionCarousel" class="carousel slide">
<div class="carousel-inner" style="line-height: 20px;">
<div class="active item">
Welcome, to the interactive demo of basic search algorithms!
Hurray for Artificial Intelligence!
</div>
<div class="item">
In the topmost menu, you will find the four basic searches which have been implemented for your experimentation - the DFS, BFS, Greedy, and A* searches. Select which one you would like to observe.
</div>
<div class="item">
On the secondmost menu, you will find controls for placing a starting point, an ending point, and obstacles, as well as buttons to run the search on the board, and to clear the board.<br />
<br />
To change what type of piece you are placing on the board, click on the first item in the menu (which by default is set to your Start Location) and make your selection via the drop-down menu.
</div>
<div class="item">
There is also an Options button that, while functional, does not yet actually control anything. Upcoming feature, as it were.
</div>
<div class="item">
Try it out!
</div>
<div class="item">
If it is guidance you seek - some keen, unearthly insight into my ways, go enlighten yourself. Learn Lisp and read John Milton's Paradise Lost.
</div>
</div>
</div>
</div>
<div class="modal-footer">
<script type="text/javascript">
$('#instructionCarousel').carousel({interval : false});
var pageCount = $('#instructionCarousel .item').length;
setPageCountText();
function setPageCountText() {
var val = parseInt($('#pageCount').attr('val'));
$('#pageCount').text(String(val + 1) + '/' + String(pageCount));
}
function nextInstr() {
$('#instructionModal').carousel('next');
var v = parseInt($('#pageCount').attr('val'));
$('#pageCount').attr('val', (v+1) % pageCount);
setPageCountText();
}
function prevInstr() {
$('#instructionModal').carousel('next');
var v = parseInt($('#pageCount').attr('val'));
$('#pageCount').attr('val', (((v-1) % pageCount)+pageCount)%pageCount);
setPageCountText();
}
</script>
<button type="button" class="btn next" onclick="prevInstr();" style="float:left;">Previous</button>
<button type="button" class="btn prev" onclick="nextInstr();">Next</button>
</div>
</div>
<div id="alertModal" class="modal fade hide" data-backdrop="static">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true" onclick="dismissAlert();">×</button>
<span>Alert</span>
</div>
<div class="modal-body alert">
</div>
<div class="modal-footer">
<button type="button" class="btn" data-dismiss="modal" onclick="dismissAlert();">Dismiss</button>
</div>
</div>
<div id="optionModal" class="modal fade hide" data-backdrop="static">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true" onclick="">×</button>
<span>Options</span>
</div>
<div class="modal-body">
<script type="text/javascript">
function apply() {
size=$('#sizeScrollbar').data('slider').value[0];
initialize(size);
graph = $('#graphScrollbar').data('slider').value[0] == 1;
if (!graph) {
issueAlert('error', 'You are performing a tree search. For DFS, you are likely to hit infinite loops. No DFS for you! (Of course, nobody is stopping you). Of course, a tree search also means that performance on BFS will suffer, as it checks many redundant nodes.');
}
}
</script>
<span class="span2">Grid Size</span>
<input id="sizeScrollbar" type="text" class="span4" value="" data-slider-min="5" data-slider-max="35" data-slider-value="20" />
<script type="text/javascript">$('#sizeScrollbar').slider();</script><br />
<span class="span2">Graph Search</span>
<input id="graphScrollbar" type="text" class="span4" value="" data-slider-min="0" data-slider-max="1" data-slider-value="1" />
<script type="text/javascript">$('#graphScrollbar').slider();</script>
<span class="span6">Heuristic</span><br />
<span class="span6">function(worldObject, state) {</span><br />
<div class="offset1 span5"><textarea class="span5" rows="8" style="resize:none;">
//This is where you'd put your heuristic, if you had one!
</textarea></div>
<span class="span6">}</span>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-primary" data-dismiss="modal" onclick="apply();">Apply</button>
<button type="button" class="btn btn-danger" data-dismiss="modal" onclick="">Cancel</button>
</div>
</div>
<table id="grid">
<tbody></tbody>
</table>
</div>
</div>
<div class="row">
<div id="brought-by" class="offset2 span8" style="margin-top: 20px;">
Brought to you by: Talon James Bowler
<a href="https://twitter.com/Moghedrin" class="twitter-follow-button" data-show-count="false" data-lang="en-gb">Follow @Moghedrin</a>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');</script>
</div>
</div>
</div>
</body>
</html>