Skip to content

Commit 3bbe6bc

Browse files
rvhuangrvhuang
authored
Merge pull request #20 from rvhuang/wip-ui-minor-change
Obstacle Type Selection Improvement
2 parents 57b8d82 + c8bdef5 commit 3bbe6bc

File tree

10 files changed

+168
-89
lines changed

10 files changed

+168
-89
lines changed

‎src/Heuristic.PathfindingLab/Heuristic.PathfindingLab/Models/MapSettings.cs

+1-1
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,7 @@ public class MapSettings
1111
public const int DefaultMapWidth = 40;
1212
public const int DefaultMapHeight = 20;
1313
public const int MinMapWidth = 10;
14-
public const int MinMapHeight = 20;
14+
public const int MinMapHeight = 10;
1515

1616
private int _width;
1717
private int _height;

‎src/Heuristic.PathfindingLab/Heuristic.PathfindingLab/Views/Embed/Index.cshtml

+1-11
Original file line numberDiff line numberDiff line change
@@ -34,23 +34,13 @@
3434
<span class="glyphicon glyphicon-globe"></span>
3535
</a>
3636
</div>
37+
@await Html.PartialAsync("../Home/_Algorithm")
3738
@if (Model.IsSmartDevice)
3839
{
3940
<button type="button" class="btn btn-primary btn-sm" data-toggle="button" id="btnFindPath">
4041
<span class="glyphicon glyphicon-search"></span>
4142
</button>
4243
}
43-
<div class="btn-group" role="group" data-toggle="buttons">
44-
<label class="btn btn-default btn-sm active algorithm"><input type="radio" name="algorithm" value="@nameof(HeuristicSearch.AStar)" checked /><span>A*</span></label>
45-
<label class="btn btn-default btn-sm algorithm" data-toggle="tooltip" title="Best-first Search"><input type="radio" name="algorithm" value="@nameof(HeuristicSearch.BestFirstSearch)" />BFS</label>
46-
<label class="btn btn-default btn-sm algorithm" data-toggle="tooltip" title="Iterative Deepening A*"><input type="radio" name="algorithm" value="@nameof(HeuristicSearch.IterativeDeepeningAStar)" />IDA*</label>
47-
<label class="btn btn-default btn-sm algorithm" data-toggle="tooltip" title="Recursive Best-first Search"><input type="radio" name="algorithm" value="@nameof(HeuristicSearch.RecursiveBestFirstSearch)" />RBFS</label>
48-
</div>
49-
<div class="btn-group" role="group" data-toggle="buttons">
50-
<label class="btn btn-default btn-sm"><input type="checkbox" name="heuristic" value="@nameof(PointExtensions.GetChebyshevDistance)">Chebyshev</label>
51-
<label class="btn btn-default btn-sm"><input type="checkbox" name="heuristic" value="@nameof(PointExtensions.GetEuclideanDistance)">Euclidean</label>
52-
<label class="btn btn-default btn-sm active"><input type="checkbox" name="heuristic" value="@nameof(PointExtensions.GetManhattanDistance)" checked>Manhattan</label>
53-
</div>
5444
<div class="btn-group" role="group" id="histories"></div>
5545
</form>
5646
</div>

‎src/Heuristic.PathfindingLab/Heuristic.PathfindingLab/Views/Home/Index.cshtml

+6-20
Original file line numberDiff line numberDiff line change
@@ -36,29 +36,15 @@
3636
<span class="glyphicon glyphicon-info-sign"></span>
3737
</button>
3838
</div>
39+
@await Html.PartialAsync("_Algorithm")
3940
@if (Model.IsSmartDevice)
4041
{
4142
<button type="button" class="btn btn-primary btn-sm" data-toggle="button" id="btnFindPath">
4243
<span class="glyphicon glyphicon-search"></span>
4344
</button>
4445
}
45-
<div class="btn-group" role="group" data-toggle="buttons">
46-
<label class="btn btn-default btn-sm active algorithm"><input type="radio" name="algorithm" value="@nameof(HeuristicSearch.AStar)" checked /><span>A*</span></label>
47-
<label class="btn btn-default btn-sm algorithm" data-toggle="tooltip" title="Best-first Search"><input type="radio" name="algorithm" value="@nameof(HeuristicSearch.BestFirstSearch)" />BFS</label>
48-
<label class="btn btn-default btn-sm algorithm" data-toggle="tooltip" title="Iterative Deepening A*"><input type="radio" name="algorithm" value="@nameof(HeuristicSearch.IterativeDeepeningAStar)" />IDA*</label>
49-
<label class="btn btn-default btn-sm algorithm" data-toggle="tooltip" title="Recursive Best-first Search"><input type="radio" name="algorithm" value="@nameof(HeuristicSearch.RecursiveBestFirstSearch)" />RBFS</label>
50-
</div>
51-
<div class="btn-group" role="group" data-toggle="buttons">
52-
<label class="btn btn-default btn-sm"><input type="checkbox" name="heuristic" value="@nameof(PointExtensions.GetChebyshevDistance)">Chebyshev</label>
53-
<label class="btn btn-default btn-sm"><input type="checkbox" name="heuristic" value="@nameof(PointExtensions.GetEuclideanDistance)">Euclidean</label>
54-
<label class="btn btn-default btn-sm active"><input type="checkbox" name="heuristic" value="@nameof(PointExtensions.GetManhattanDistance)" checked>Manhattan</label>
55-
</div>
56-
<a href="javascript:void();" role="button" class="btn btn-link" data-toggle="popover" data-trigger="focus" data-placement="right" data-container="body" data-content="A heuristic function is used to evaluate the cost of every step. For some of algorithms, at least one heuristic function needs to be selected. If more than one functions are selected, the subsequent one will be used when previous one evaluates two steps as equal.">
57-
<span class="glyphicon glyphicon-question-sign"></span>
58-
</a>
59-
@if (!Model.IsSmartDevice)
60-
{
61-
<span>&nbsp;</span>
46+
else
47+
{
6248
<span class="small">Left click to place obstacles, right click on two positions to get a path.</span>
6349
}
6450
</form>
@@ -67,7 +53,7 @@
6753
<div class="row" style="margin-top: 8px">
6854
<div class="col-lg-2">
6955
<label>Open List Analysis</label>
70-
<a href="javascript:void();" role="button" class="btn btn-link" data-toggle="popover" data-trigger="focus" data-placement="right" data-container="body" data-content="The chart shows the retrospective analysis of open list. A stale node is the node that has not expanded because of low priority estimated by heuristic functions.">
56+
<a href="javascript:void(0)" role="button" class="btn btn-link" data-toggle="popover" data-trigger="focus" data-placement="right" data-container="body" data-content="The chart shows the retrospective analysis of open list. A stale node is the node that has not expanded because of low priority estimated by heuristic functions.">
7157
<span class="glyphicon glyphicon-question-sign"></span>
7258
</a>
7359
<p class="small" id="description">
@@ -88,7 +74,7 @@
8874
</div>
8975
<div class="col-lg-5">
9076
<label>LINQ Expression</label>
91-
<a href="javascript:void();" role="button" class="btn btn-link" data-toggle="popover" data-trigger="focus" data-placement="right" data-container="body" data-content="A code snippet using LINQ to A* to set conditions and fetch the path will be displayed here.">
77+
<a href="javascript:void(0)" role="button" class="btn btn-link" data-toggle="popover" data-trigger="focus" data-placement="right" data-container="body" data-content="A code snippet using LINQ to A* to set conditions and fetch the path will be displayed here.">
9278
<span class="glyphicon glyphicon-question-sign"></span>
9379
</a>
9480
<!-- Nav tabs -->
@@ -170,7 +156,7 @@
170156
</div>
171157
<div class="modal-body">
172158
<p>Copyright © <a href="https://rvhuang.github.io/" target="_blank">Robert Vandenberg Huang</a></p>
173-
<p>Copyright © <a href="https://kenney.nl/" target="_blank">Kenney Vleugels</a> (assets)</p>
159+
<p>Copyright © <a href="https://kenney.nl/" target="_blank">Kenney Vleugels</a> (asset design)</p>
174160
<p>The project is licensed under the MIT license. Feel free to copy, modify and use in your computer science homework (grades not guaranteed).</p>
175161
</div>
176162
<div class="modal-footer">

‎src/Heuristic.PathfindingLab/Heuristic.PathfindingLab/Views/Home/_Algorithm.cshtml

+110
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,110 @@
1+
@using Heuristic.Linq
2+
@using Microsoft.AspNetCore.Http
3+
@using Microsoft.AspNetCore.Http.Extensions
4+
@{
5+
const int assetSize = 16;
6+
}
7+
<div class="btn-group" role="group" data-toggle="buttons">
8+
<div class="dropup">
9+
<button class="btn btn-success btn-sm dropdown-toggle" type="button" id="obstacle-selection" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
10+
<span class="glyphicon glyphicon-tree-conifer"></span>
11+
</button>
12+
<ul class="dropdown-menu dropdown-menu-right" aria-labelledby="obstacle-selection">
13+
<li style="padding: 2px">
14+
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="@(assetSize * 2 * 5)" height="@(assetSize * 2 * 4)">
15+
<defs>
16+
<image id="obstacle-tile-assets" x="0" y="0" width="968" height="526" xlink:href="@UriHelper.BuildAbsolute(Context.Request.Scheme, Context.Request.Host, new PathString("/images/assets.png"))" />
17+
<!---->
18+
<svg id="obstacle-tile-0" preserveAspectRatio="xMidYMid slice" viewBox="@(assetSize * 13 + 13) @(assetSize * 9 + 9) @(assetSize) @(assetSize )" width="@(assetSize * 2)" height="@(assetSize * 2)">
19+
<use xlink:href="#obstacle-tile-assets" />
20+
</svg>
21+
<svg id="obstacle-tile-1" preserveAspectRatio="xMidYMid slice" viewBox="@(assetSize * 14 + 14) @(assetSize * 9 + 9) @(assetSize) @(assetSize )" width="@(assetSize * 2)" height="@(assetSize * 2)">
22+
<use xlink:href="#obstacle-tile-assets" />
23+
</svg>
24+
<svg id="obstacle-tile-2" preserveAspectRatio="xMidYMid slice" viewBox="@(assetSize * 15 + 15) @(assetSize * 9 + 9) @(assetSize) @(assetSize )" width="@(assetSize * 2)" height="@(assetSize * 2)">
25+
<use xlink:href="#obstacle-tile-assets" />
26+
</svg>
27+
<svg id="obstacle-tile-3" preserveAspectRatio="xMidYMid slice" viewBox="@(assetSize * 16 + 16) @(assetSize * 9 + 9) @(assetSize) @(assetSize )" width="@(assetSize * 2)" height="@(assetSize * 2)">
28+
<use xlink:href="#obstacle-tile-assets" />
29+
</svg>
30+
<svg id="obstacle-tile-4" preserveAspectRatio="xMidYMid slice" viewBox="@(assetSize * 17 + 17) @(assetSize * 9 + 9) @(assetSize) @(assetSize )" width="@(assetSize * 2)" height="@(assetSize * 2)">
31+
<use xlink:href="#obstacle-tile-assets" />
32+
</svg>
33+
<svg id="obstacle-tile-5" preserveAspectRatio="xMidYMid slice" viewBox="@(assetSize * 18 + 18) @(assetSize * 9 + 9) @(assetSize) @(assetSize )" width="@(assetSize * 2)" height="@(assetSize * 2)">
34+
<use xlink:href="#obstacle-tile-assets" />
35+
</svg>
36+
<svg id="obstacle-tile-6" preserveAspectRatio="xMidYMid slice" viewBox="@(assetSize * 19 + 19) @(assetSize * 9 + 9) @(assetSize) @(assetSize )" width="@(assetSize * 2)" height="@(assetSize * 2)">
37+
<use xlink:href="#obstacle-tile-assets" />
38+
</svg>
39+
<svg id="obstacle-tile-7" preserveAspectRatio="xMidYMid slice" viewBox="@(assetSize * 20 + 20) @(assetSize * 9 + 9) @(assetSize) @(assetSize )" width="@(assetSize * 2)" height="@(assetSize * 2)">
40+
<use xlink:href="#obstacle-tile-assets" />
41+
</svg>
42+
<svg id="obstacle-tile-8" preserveAspectRatio="xMidYMid slice" viewBox="@(assetSize * 21 + 21) @(assetSize * 9 + 9) @(assetSize) @(assetSize )" width="@(assetSize * 2)" height="@(assetSize * 2)">
43+
<use xlink:href="#obstacle-tile-assets" />
44+
</svg>
45+
<svg id="obstacle-tile-9" preserveAspectRatio="xMidYMid slice" viewBox="@(assetSize * 22 + 22) @(assetSize * 9 + 9) @(assetSize) @(assetSize )" width="@(assetSize * 2)" height="@(assetSize * 2)">
46+
<use xlink:href="#obstacle-tile-assets" />
47+
</svg>
48+
<svg id="obstacle-tile-10" preserveAspectRatio="xMidYMid slice" viewBox="@(assetSize * 23 + 23) @(assetSize * 9 + 9) @(assetSize) @(assetSize )" width="@(assetSize * 2)" height="@(assetSize * 2)">
49+
<use xlink:href="#obstacle-tile-assets" />
50+
</svg>
51+
<svg id="obstacle-tile-11" preserveAspectRatio="xMidYMid slice" viewBox="@(assetSize * 24 + 24) @(assetSize * 9 + 9) @(assetSize) @(assetSize )" width="@(assetSize * 2)" height="@(assetSize * 2)">
52+
<use xlink:href="#obstacle-tile-assets" />
53+
</svg>
54+
<svg id="obstacle-tile-12" preserveAspectRatio="xMidYMid slice" viewBox="@(assetSize * 25 + 25) @(assetSize * 9 + 9) @(assetSize) @(assetSize )" width="@(assetSize * 2)" height="@(assetSize * 2)">
55+
<use xlink:href="#obstacle-tile-assets" />
56+
</svg>
57+
<svg id="obstacle-tile-13" preserveAspectRatio="xMidYMid slice" viewBox="@(assetSize * 26 + 26) @(assetSize * 9 + 9) @(assetSize) @(assetSize )" width="@(assetSize * 2)" height="@(assetSize * 2)">
58+
<use xlink:href="#obstacle-tile-assets" />
59+
</svg>
60+
<svg id="obstacle-tile-14" preserveAspectRatio="xMidYMid slice" viewBox="@(assetSize * 24 + 24) @(assetSize * 10 + 10) @(assetSize) @(assetSize )" width="@(assetSize * 2)" height="@(assetSize * 2)">
61+
<use xlink:href="#obstacle-tile-assets" />
62+
</svg>
63+
<svg id="obstacle-tile-15" preserveAspectRatio="xMidYMid slice" viewBox="@(assetSize * 25 + 25) @(assetSize * 10 + 10) @(assetSize) @(assetSize )" width="@(assetSize * 2)" height="@(assetSize * 2)">
64+
<use xlink:href="#obstacle-tile-assets" />
65+
</svg>
66+
<svg id="obstacle-tile-16" preserveAspectRatio="xMidYMid slice" viewBox="@(assetSize * 26 + 26) @(assetSize * 10 + 10) @(assetSize) @(assetSize )" width="@(assetSize * 2)" height="@(assetSize * 2)">
67+
<use xlink:href="#obstacle-tile-assets" />
68+
</svg>
69+
<svg id="obstacle-tile-17" preserveAspectRatio="xMidYMid slice" viewBox="@(assetSize * 24 + 24) @(assetSize * 11 + 11) @(assetSize) @(assetSize )" width="@(assetSize * 2)" height="@(assetSize * 2)">
70+
<use xlink:href="#obstacle-tile-assets" />
71+
</svg>
72+
<svg id="obstacle-tile-18" preserveAspectRatio="xMidYMid slice" viewBox="@(assetSize * 26 + 26) @(assetSize * 11 + 11) @(assetSize) @(assetSize )" width="@(assetSize * 2)" height="@(assetSize * 2)">
73+
<use xlink:href="#obstacle-tile-assets" />
74+
</svg>
75+
<svg id="obstacle-tile-19" preserveAspectRatio="xMidYMid slice" viewBox="@(assetSize * 27 + 27) @(assetSize * 11 + 11) @(assetSize) @(assetSize )" width="@(assetSize * 2)" height="@(assetSize * 2)">
76+
<use xlink:href="#obstacle-tile-assets" />
77+
</svg>
78+
</defs>
79+
<g id="obstacle-list">
80+
@for (var i = 0; i < 20; i++)
81+
{
82+
<svg x="@(assetSize * 2 * (i % 5))" y="@(assetSize * 2 * (i / 5))">
83+
<use xlink:href="#obstacle-tile-@(i)" data-obstacle-value="@(i + 1)" />
84+
</svg>
85+
}
86+
</g>
87+
</svg>
88+
</li>
89+
</ul>
90+
</div>
91+
</div>
92+
<div class="btn-group" role="group" data-toggle="buttons">
93+
<div class="dropup">
94+
<button class="btn btn-default btn-sm dropdown-toggle algorithm" type="button" value="@nameof(HeuristicSearch.AStar)" id="algorithm" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">A*</button>
95+
<ul class="dropdown-menu dropdown-menu-right" aria-labelledby="algorithm">
96+
<li><a data-algorithm="@nameof(HeuristicSearch.AStar)" href="#algorithm">A*</a></li>
97+
<li><a data-algorithm="@nameof(HeuristicSearch.BestFirstSearch)" href="#algorithm">BFS</a></li>
98+
<li><a data-algorithm="@nameof(HeuristicSearch.IterativeDeepeningAStar)" href="#algorithm">IDA*</a></li>
99+
<li><a data-algorithm="@nameof(HeuristicSearch.RecursiveBestFirstSearch)" href="#algorithm">RBFS</a></li>
100+
</ul>
101+
</div>
102+
</div>
103+
<div class="btn-group" role="group" data-toggle="buttons">
104+
<label class="btn btn-default btn-sm"><input type="checkbox" name="heuristic" value="@nameof(PointExtensions.GetChebyshevDistance)">Chebyshev</label>
105+
<label class="btn btn-default btn-sm"><input type="checkbox" name="heuristic" value="@nameof(PointExtensions.GetEuclideanDistance)">Euclidean</label>
106+
<label class="btn btn-default btn-sm active"><input type="checkbox" name="heuristic" value="@nameof(PointExtensions.GetManhattanDistance)" checked>Manhattan</label>
107+
</div>
108+
<a href="javascript:void(0)" role="button" class="btn btn-link" data-toggle="popover" data-trigger="focus" data-placement="top" data-container="body" data-content="A heuristic function is used to evaluate the cost of every step. For some of algorithms, at least one heuristic function needs to be selected. If more than one functions are selected, the subsequent one will be used when previous one evaluates two steps as equal.">
109+
<span class="glyphicon glyphicon-question-sign"></span>
110+
</a>

‎src/Heuristic.PathfindingLab/Heuristic.PathfindingLab/Views/Home/_Map.cshtml

+1-9
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@
77
const int baseOffsetX = 5 * assetSize + 5;
88
const int baseOffsetY = 19 * assetSize + 19;
99
}
10-
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="@(assetSize * 2 * (Model.Width + 1))" height="@(assetSize * 2 * Model.Height)" id="map">
10+
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="@(assetSize * 2 * Model.Width)" height="@(assetSize * 2 * Model.Height)" id="map">
1111
<defs>
1212
<image id="tile-assets" x="0" y="0" width="968" height="526" xlink:href="@UriHelper.BuildAbsolute(Context.Request.Scheme, Context.Request.Host, new PathString("/images/assets.png"))" />
1313
<!---->
@@ -143,12 +143,4 @@
143143
<text x="@(assetSize * 2 - 3)" y="27" class="cursor-y" text-anchor="end" style="font-size: 0.8em"></text>
144144
<rect width="@(assetSize * 2)" height="@(assetSize * 2)" x="0" y="0" fill="cadetblue" fill-opacity="0.6" />
145145
</svg>
146-
<g id="obstacle-list">
147-
@for (var i = 0; i < 20; i++)
148-
{
149-
<svg x="@(assetSize * 2 * Model.Width)" y="@(assetSize * 2 * i)" width="@(assetSize * 2)" height="@(assetSize * 2)">
150-
<use xlink:href="#obstacle-@(i)" data-obstacle-value="@(i + 1)" />
151-
</svg>
152-
}
153-
</g>
154146
</svg>

0 commit comments

Comments
 (0)