diff --git a/visual/css/style.css b/visual/css/style.css
index 47c88cdb..0a99dda3 100644
--- a/visual/css/style.css
+++ b/visual/css/style.css
@@ -61,6 +61,61 @@ h1, h2, h3, h4, h5, h6 {
text-decoration: underline;
}
+#show_instructions_panel {
+ top: 20px;
+ left: 20px;
+ width: 550px;
+ background-color:rgba(125, 125, 125, 0.6);
+ box-shadow: 0px 0px 0px rgba(255, 255, 255, 0);
+}
+
+#show_instructions {
+ position: absolute;
+ right: 25px;
+ top: 10px;
+ font-size: 90%;
+ cursor: pointer;
+}
+
+#show_instructions:hover {
+ color: #ffffff;
+ text-decoration: underline;
+}
+
+#hide_algorithms {
+ position: absolute;
+ right: 10px;
+ top: 5px;
+ font-size: 90%;
+ cursor: pointer;
+}
+
+#hide_algorithms:hover {
+ color: #fff;
+ text-decoration: underline;
+}
+
+#show_algorithms_panel {
+ right: 20px;
+ top: 20px;
+ width: 250px;
+ background-color:rgba(125, 125, 125, 0.6);
+ box-shadow: 0px 0px 0px rgba(255, 255, 255, 0);
+}
+
+#show_algorithms {
+ position: absolute;
+ right: 10px;
+ top: 5px;
+ font-size: 90%;
+ cursor: pointer;
+}
+
+#show_algorithms:hover {
+ color: #fff;
+ text-decoration: underline;
+}
+
.option_header {
font-size: 80%;
margin-left: 20px;
diff --git a/visual/index.html b/visual/index.html
index 59710a9e..a543e227 100644
--- a/visual/index.html
+++ b/visual/index.html
@@ -30,10 +30,14 @@
+
+ show
+
+
Click within the white grid and drag your mouse to draw obstacles.
Drag the green node to set the start position.
@@ -42,8 +46,14 @@
Click Start Search in the lower-right corner to start the animation.
+
+ show
+
+
-
+
diff --git a/visual/js/panel.js b/visual/js/panel.js
index 19185d58..e5639b34 100644
--- a/visual/js/panel.js
+++ b/visual/js/panel.js
@@ -15,10 +15,28 @@ var Panel = {
$('#hide_instructions').click(function() {
$('#instructions_panel').slideUp();
});
+ $('#hide_algorithms').click(function() {
+ $('#algorithm_panel').slideUp();
+ });
$('#play_panel').css({
top: $algo.offset().top + $algo.outerHeight() + 20
});
$('#button2').attr('disabled', 'disabled');
+
+ $('#hide_instructions').click(function(hide_instructions_clicked) {
+ $('#show_instructions').show();
+ });
+ $('#hide_algorithms').click(function(hide_algorithms_clicked) {
+ $('#show_algorithms').show();
+ });
+ $('#show_algorithms').click(function() {
+ $('#algorithm_panel').slideDown();
+ $('#show_algorithms').hide();
+ });
+ $('#show_instructions').click(function() {
+ $('#instructions_panel').slideDown();
+ $('#show_instructions').hide();
+});
},
/**
* Get the user selected path-finder.
@@ -26,12 +44,12 @@ var Panel = {
*/
getFinder: function() {
var finder, selected_header, heuristic, allowDiagonal, biDirectional, dontCrossCorners, weight, trackRecursion, timeLimit;
-
+
selected_header = $(
'#algorithm_panel ' +
'.ui-accordion-header[aria-selected=true]'
).attr('id');
-
+
switch (selected_header) {
case 'astar_header':
@@ -131,7 +149,7 @@ var Panel = {
trackRecursion = typeof $('#jump_point_section ' +
'.track_recursion:checked').val() !== 'undefined';
heuristic = $('input[name=jump_point_heuristic]:checked').val();
-
+
finder = new PF.JumpPointFinder({
trackJumpRecursion: trackRecursion,
heuristic: PF.Heuristic[heuristic],