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 @@
+
+ +
+

Instructions

- hide + hide
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 @@

Instructions

Click Start Search in the lower-right corner to start the animation.
+
+ +
+
-

Select Algorithm

+

Select Algorithm

+ hide +

A*

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],