Improve UI styling

- Make UI buttons and headers looks nicer
- Allow maps width and height to be controllable
- Fix some bugs

Author: mlsdpk

README.md

@@ -4,16 +4,10 @@
 
 A tool for visualizing numerous pathfinding algorithms in two dimensions.
 
-This project involves minimal implementations of the popular planning algorithms, including both graph-based and sampling-based planners. We provide an easy-to-use GUI to control the animation process and explore different planner configurations. This is an ongoing work and current implementation of the project only involves four search-based planning algorithms: BFS, DFS, DIJKSTRA and A-Star and two sampling-based planners: RRT and RRT*. The project extensively uses SFML, ImGui and Modern C++ features such as smart pointers, lamda expressions along with multi-threading concepts.
+This project involves minimal implementations of the popular planning algorithms, including both graph-based and sampling-based planners. We provide an easy-to-use GUI to control the animation process and explore different planner configurations. Current implementation of the project involves four search-based planning algorithms: BFS, DFS, DIJKSTRA and A-Star and two sampling-based planners: RRT and RRT*. The project extensively uses SFML, ImGui and Modern C++ features such as smart pointers, lamda expressions along with multi-threading concepts.
 
 ![](figures/img0.png)
 
-## How to use
-
-- to place/remove obstacle cells (`left-CLICKED`)
-- to change starting cell (`left-SHIFT + left-CLICKED`)
-- to change end cell (`left-CTRL + left-CLICKED`)
-
 ## Dependencies
 
 * cmake >= 3.14

figures/img0.png

@@ -36,7 +36,8 @@ class Game {
   void update();
   void render();
   void initGuiTheme();
-  void renderMenuBar(ImGuiIO& io);
+  void renderNewPlannerMenu();
+  void renderRunMenu(ImGuiIO& io);
   void setGraphBasedPlanner(const int id);
   void setSamplingBasedPlanner(const int id);
   void showHowToUseWindow();
@@ -52,10 +53,13 @@ class Game {
   float dt_;
   std::stack<std::unique_ptr<State>> states_;
   std::string curr_planner_;
-  std::shared_ptr<LoggerPanel> logger_panel_;
+  std::shared_ptr<gui::LoggerPanel> logger_panel_;
   bool disable_run_;
-  bool show_how_to_use_window_{false};
-  bool show_about_window_{false};
+  bool show_how_to_use_window_{true};
+  bool show_about_window_{true};
+  bool show_control_panel_{true};
+  bool show_console_{true};
+  bool show_stats_panel_{true};
 };
 
 }  // namespace path_finding_visualizer

include/Game.h

@@ -4,6 +4,7 @@
 #include <imgui.h>
 
 namespace path_finding_visualizer {
+namespace gui {
 
 class LoggerPanel {
  public:
@@ -73,4 +74,61 @@ class LoggerPanel {
   }
 };
 
+// Helper to display a little (?) mark which shows a tooltip when hovered.
+// In your own code you may want to display an actual icon if you are using a
+// merged icon fonts (see docs/FONTS.md)
+inline void HelpMarker(const char* desc) {
+  ImGui::TextDisabled("(?)");
+  if (ImGui::IsItemHovered()) {
+    ImGui::BeginTooltip();
+    ImGui::PushTextWrapPos(ImGui::GetFontSize() * 35.0f);
+    ImGui::TextUnformatted(desc);
+    ImGui::PopTextWrapPos();
+    ImGui::EndTooltip();
+  }
+}
+
+inline bool inputInt(const std::string& label, int* val, const int& min_val,
+                     const int& max_val, const int& step = 1,
+                     const int& step_fast = 100,
+                     const std::string& help_marker = "",
+                     ImGuiInputTextFlags flags = 0) {
+  flags |= ImGuiInputTextFlags_EnterReturnsTrue;
+  bool is_active = ImGui::InputInt(label.c_str(), val, step, step_fast, flags);
+  if (!help_marker.empty()) {
+    ImGui::SameLine();
+    HelpMarker(help_marker.c_str());
+  }
+  if (is_active) {
+    if (*val < min_val)
+      *val = min_val;
+    else if (*val > max_val)
+      *val = max_val;
+  }
+  return is_active;
+}
+
+inline bool inputDouble(const std::string& label, double* val,
+                        const double& min_val, const double& max_val,
+                        const double& step = 0.0, const double& step_fast = 0.0,
+                        const std::string& help_marker = "",
+                        const char* format = "%.6f",
+                        ImGuiInputTextFlags flags = 0) {
+  flags |= ImGuiInputTextFlags_EnterReturnsTrue;
+  bool is_active =
+      ImGui::InputDouble(label.c_str(), val, step, step_fast, format, flags);
+  if (!help_marker.empty()) {
+    ImGui::SameLine();
+    HelpMarker(help_marker.c_str());
+  }
+  if (is_active) {
+    if (*val < min_val)
+      *val = min_val;
+    else if (*val > max_val)
+      *val = max_val;
+  }
+  return is_active;
+}
+
+}  // namespace gui
 }  // namespace path_finding_visualizer

include/LoggerPanel.h renamed to include/Gui.h

@@ -11,7 +11,7 @@
 #include <string>
 #include <vector>
 
-#include "LoggerPanel.h"
+#include "Gui.h"
 
 /*
   State Base Class
@@ -22,14 +22,14 @@ namespace path_finding_visualizer {
 class State {
  private:
  protected:
-  std::shared_ptr<LoggerPanel> logger_panel_;
+  std::shared_ptr<gui::LoggerPanel> logger_panel_;
   sf::Vector2f mousePositionWindow_;
   bool is_reset_;
   bool is_running_;
 
  public:
   // Constructor
-  State(std::shared_ptr<LoggerPanel> logger_panel);
+  State(std::shared_ptr<gui::LoggerPanel> logger_panel);
 
   // Destructor
   virtual ~State();

include/State.h

@@ -21,7 +21,7 @@ struct MinimumDistanceASTAR {
 class ASTAR : public BFS {
  public:
   // Constructor
-  ASTAR(std::shared_ptr<LoggerPanel> logger_panel);
+  ASTAR(std::shared_ptr<gui::LoggerPanel> logger_panel);
 
   // Destructor
   virtual ~ASTAR();

include/States/Algorithms/GraphBased/ASTAR/ASTAR.h

@@ -11,7 +11,7 @@ namespace graph_based {
 class BFS : public GraphBased {
  public:
   // Constructor
-  BFS(std::shared_ptr<LoggerPanel> logger_panel);
+  BFS(std::shared_ptr<gui::LoggerPanel> logger_panel);
 
   // Destructor
   virtual ~BFS();

include/States/Algorithms/GraphBased/BFS/BFS.h

@@ -10,7 +10,7 @@ namespace graph_based {
 class DFS : public BFS {
  public:
   // Constructor
-  DFS(std::shared_ptr<LoggerPanel> logger_panel);
+  DFS(std::shared_ptr<gui::LoggerPanel> logger_panel);
 
   // Destructor
   virtual ~DFS();

include/States/Algorithms/GraphBased/DFS/DFS.h

@@ -21,7 +21,7 @@ struct MinimumDistanceDIJKSTRA {
 class DIJKSTRA : public BFS {
  public:
   // Constructor
-  DIJKSTRA(std::shared_ptr<LoggerPanel> logger_panel);
+  DIJKSTRA(std::shared_ptr<gui::LoggerPanel> logger_panel);
 
   // Destructor
   virtual ~DIJKSTRA();

include/States/Algorithms/GraphBased/DIJKSTRA/DIJKSTRA.h

@@ -10,7 +10,7 @@
 #include <queue>
 #include <vector>
 
-#include "LoggerPanel.h"
+#include "Gui.h"
 #include "MessageQueue.h"
 #include "State.h"
 #include "States/Algorithms/GraphBased/Node.h"
@@ -22,7 +22,7 @@ namespace graph_based {
 class GraphBased : public State {
  public:
   // Constructor
-  GraphBased(std::shared_ptr<LoggerPanel> logger_panel);
+  GraphBased(std::shared_ptr<gui::LoggerPanel> logger_panel);
 
   // Destructor
   virtual ~GraphBased();
@@ -55,6 +55,7 @@ class GraphBased : public State {
   // initialization Functions
   void initColors();
   void initVariables();
+  void initGridMapParams();
   void initNodes(bool reset = true, bool reset_neighbours_only = false);
 
   // colors
@@ -68,13 +69,13 @@ class GraphBased : public State {
   // Map Variables
   int no_of_grid_rows_;
   int no_of_grid_cols_;
-  int gridSize_;
-  int slider_grid_size_;
+  int grid_size_;
+  int ui_grid_size_;
   sf::Vector2f init_grid_xy_;
   // 0 = 4 connected grid, 1 = 8 connected grid
   int grid_connectivity_;
-  unsigned int mapWidth_;
-  unsigned int mapHeight_;
+  unsigned int map_width_;
+  unsigned int map_height_;
 
   // Algorithm related
   std::string algo_name_;