forked from gowrijsuria/MarsPathfinder
-
Notifications
You must be signed in to change notification settings - Fork 0
/
home.html
212 lines (179 loc) · 13 KB
/
home.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
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet"
href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css"
integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk"
crossorigin="anonymous">
<link rel="stylesheet" type="text/css" href="css/main.css">
<link rel="stylesheet" type="text/css" href="css/style2.css">
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<title>Engage 2020 - Mars Pathfinder</title>
</head>
<body style = "overflow:auto;">
<div>
<nav class="navbar nav-tabs navbar-expand-lg navbar-dark bg-dark position-relative">
<a class="navbar-brand" href="#">Mars Pathfinder</a>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav">
<a class="nav-link dropdown-toggle text-white" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" data-toggle="tooltip" data-placement="right" title="Click to select an Algorithm"></a>
<li class="nav-item dropdown">
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<button id="bfs" type="button" class="mydropdown-item">Breadth-First Search</button>
<button id="dfs" type="button" class="mydropdown-item">Depth-First Search</button>
<button id="greedy" type="button" class="mydropdown-item">Greedy Best-First Search</button>
<button id="dijkstra" type="button" class="mydropdown-item">Dijkstra Algorithm</button>
<button id="astar" type="button" class="mydropdown-item">A* Search</button>
</div>
</li>
<li class="navbar-nav">
<div id="algorithm-text" class="navbar-text text-white font-weight-bold">Greedy Best-First Search</div>
</li>
</ul>
<div class="btn-group" role="group" aria-label="Basic example">
<button id="startBtn" type="button" class="btn btn-dark" data-toggle="tooltip" data-placement="right" title="Select an Algorithm and click to find the path">Find Path</button>
<center onclick="Closestfunc()" data-toggle="tooltip" data-placement="bottom" title="Turn it on to find out the closest destination node with Multiple Start Nodes and vice-verse. Click to know more">
<p>Closest Node</p>
<input type="checkbox" id="switch" class="checkbox" />
<label for="switch" class="toggle">
</label>
</center>
<button id="clrPathBtn" type="button" class="btn btn-dark" data-toggle="tooltip" data-placement="right" title="Click to clear the search path">Clear Path</button>
<button id="clrTerrainBtn" type="button" class="btn btn-dark" data-toggle="tooltip" data-placement="right" title="Click to clear all the created node weights">Clear Terrain</button>
<button id="clrWallBtn" type="button" class="btn btn-dark">Clear Walls</button>
<button id="instructions" type="button" class="btn btn-dark" data-toggle="tooltip" data-placement="right" title="Click to display the Instructions">Instructions</button>
<button class="btn btn-dark">
<a href="https://github.com/gowrijsuria/MarsPathfinder" target="_blank" id="repoLink">Github Link</a></button>
</div>
</div>
</nav>
<div>
<nav class="navbar">
<!-- <div class="icons NotationsBar"><i class="fa fa-stop startstyle" style="font-size: 24px"></i> Start Node</div> -->
<div class="icons NotationsBar"><i class="fa fa-stop startstyle" style="font-size: 24px"></i> <i
class="fa fa-stop startstyle1" style="font-size: 24px"></i> Start Node</div>
<!-- <div class="icons NotationsBar"><i class="fa fa-stop stopstyle" style="font-size: 24px"></i> Target Node</div> -->
<div class="icons NotationsBar"><i class="fa fa-stop stopstyle" style="font-size: 24px"></i> <i
class="fa fa-stop stopstyle1" style="font-size: 24px"></i> Target Node</div>
<div class="icons NotationsBar"><i class="fa fa-stop viastyle" style="font-size: 24px"></i> Via Node</div>
<div class="icons NotationsBar"><i class="fa fa-stop shortestpathstyle" style="font-size: 24px"></i> <i class="fa fa-stop shortestpathstyle1" style="font-size: 24px"></i> Shortest-path Node</div>
<div class="icons NotationsBar"><i class="fa fa-stop obstaclestyle" style="font-size: 24px"></i> Obstacle Node</div>
<div class="icons NotationsBar"><i class="fa fa-stop terrainstyle" style="font-size: 24px"></i> Terrain Node</div>
<div class="icons NotationsBar"><i class="fa fa-stop visitedstyle" style="font-size: 24px"></i> <i
class="fa fa-stop visitedstyle1" style="font-size: 24px"></i> Visited Node</div>
</nav>
</div>
</div>
<div id = "accordion" style="width: 20%; float:left" class="btn-group-vertical sidebar" role="group" aria-label="Button group with nested dropdown">
<button id="RandomObs" type="button" class="btn btn-dark bg-dark" data-toggle="tooltip" data-placement="right" title="Click to create Random Untraversable Obstacles">Create Random Obstacles</button>
<button id="Via" type="button" class="btn btn-dark bg-dark" data-toggle="tooltip" data-placement="right" title="Click to add a Via Point">Add Via Point</button>
<button id="Terrain" type="button" class="btn btn-dark bg-dark" data-toggle="tooltip" data-placement="right" title="Click to create traversable weights to random nodes">Create Terrain</button>
<button id="Maze" type="button" class="btn btn-dark bg-dark" data-toggle="tooltip" data-placement="right" title="Click to Create Obstacles in the form of a maze">Create Maze</button>
<div class="btn-group" role="group">
<button type="button" class="btn btn-dark dropdown-toggle" data-toggle="dropdown"
aria-haspopup="true" aria-expanded="false" data-toggle="tooltip" data-placement="right" title="Click to Add more Start or Destination nodes">Add Nodes</button>
<div class="dropdown-menu" aria-labelledby="btnGroupDrop1">
<button id="multipleDestinations" type="button" class="mydropdown-item" data-toggle="tooltip" data-placement="right" title="Click on the grid to positon a new Destination Node">Add Destination</button>
<button id="multipleStart" type="button" class="mydropdown-item" data-toggle="tooltip" data-placement="right" title="Click on the grid to positon a new Start Node">Add Start Point</button>
</div>
</div>
<button id="Cleardest" type="button" class="btn btn-dark bg-dark" data-toggle="tooltip" data-placement="right" title="Click to remove new destination nodes and keep only the original one">Clear Added Destinations</button>
<button id="ClearStart" type="button" class="btn btn-dark bg-dark" data-toggle="tooltip" data-placement="right" title="Click to remove new start nodes and keep only the original one">Clear Added Start Points</button>
<div id = "ViaInfo" class="card bg-white text-dark" style = "position: relative; display:none;">
<div class="card-body">
<h5 class="card-title">About Via Point</h5>
<h6 class="card-text">A Via Point is a Drop-by point before reaching the destination</h6>
<h6 class="card-text">It is similar to having multiple destinations with a fixed Final Destination</h6>
</div>
</div>
<div id = "RandObInfo" class="card" style = "position: relative; display:none">
<div class="card-body">
<h5 class="card-title">Random Obstacles</h5>
<h6 class="card-text">Randomly creates walls in the grid</h6>
<h6 class="card-text">You can also manually add more walls by left-clicking in the grid</h6>
</div>
</div>
<div id = "TerrainInfo" class="card" style = "position: relative; display:none">
<div class="card-body">
<h5 class="card-title">About Terrain</h5>
<h6 class="card-text">Terrain represents craters, mountains on Mars which are dangerous but manoeuvrable </h6>
<h6 class="card-text">It assigns a different costs to different nodes randomly to simulate the environment</h6>
</div>
</div>
<div id = "MazeInfo" class="card" style = "position: relative; display:none">
<div class="card-body">
<h5 class="card-title">Recursive Maze</h5>
<h6 class="card-text">It generates a Maze of Obstacles recursively</h6>
<h6 class="card-text">This feature simulates a typical Mars Terrain where most of the paths are unmanoeuvrable</h6>
</div>
</div>
<div id = "DestInfo" class="card" style = "position: relative; display:none">
<div class="card-body">
<h5 class="card-title">Multiple Destinations</h5>
<h6 class="card-text">To visit Multiple Places to Pick-Up something or investigate the area </h6>
<h6 class="card-text">This feature simulates the situation by finding least cost path using Travelling Salesman Problem</h6>
</div>
</div>
<div id = "StartInfo" class="card" style = "position: relative; display:none">
<div class="card-body">
<h5 class="card-title">Multiple Start Points</h5>
<h6 class="card-text">In case we have multiple Rovers, this feature creates a Multi-Agent Scenario</h6>
<h6 class="card-text">It chooses the start node which is closest to the destination</h6>
</div>
</div>
<div id = "ClosestInfo" class="card" style = "position: relative; display:none">
<div class="card-body">
<h5 class="card-title">Closest Start/Destination Node</h5>
<h6 class="card-text">Turn it on to find out the closest destination node with Multiple Agents</h6>
<h6 class="card-text">And closest Agent with Multiple Destinations</h6>
</div>
</div>
</div>
<!-- CANVAS -->
<div style="width: 80%; float:right;">
<div id="boardDiv">
<div class="fa fa-stop backstyle">
<canvas id="canvas", style="margin-left: 25px; margin-top: 20px;" oncontextmenu="return false;"></canvas></div></div>
</div>
<!--TUTORIAL-->
<div id="tutorial" class="card" style="width: 20rem;">
<div class="card-body">
<h5 class="card-title">Instructions</h5>
<h6 class="card-text">1. Change start, via and end points by dragging.</h6>
<h6 class="card-text">2. To draw walls, use left click</h6>
<h6 class="card-text">3. To delete walls, use right click</h6>
<h6 class="card-text">4. Click create terrain for getting a weighted graph</h6>
<button type="button" id="tutorialBtn" class="btn btn-success">Got it!</button>
</div>
</div>
<script src="./functions/clearNode.js"></script>
<script src="./functions/moveNode.js"></script>
<script src="./grid.js"></script>
<script src="./algorithms/astar.js"></script>
<script src="./algorithms/greedyBestFirstSearch.js"></script>
<script src="./algorithms/dijkstra.js"></script>
<script src="./algorithms/dfs.js"></script>
<script src="./algorithms/bfs.js"></script>
<script src="./features/maze.js"></script>
<script src="./features/terrain.js"></script>
<script src="./features/RandomObstacles.js"></script>
<script src="./main_script.js"></script>
<script src="./functions/instructions.js"></script>
<script src="./functions/DrawingPath.js"></script>
<script src="./RoverSearch.js"></script>
<script src="./features/TSP.js"></script>
<script src="./features/RoverFeatures.js"></script>
<script src="./functions/mousemoves.js"></script>
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"
integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj"
crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js"
integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo"
crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"
integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI"
crossorigin="anonymous"></script>
</body>
</html>