The goal of this application is to improve know-how and gain more experience of frontend technologies especially ngrx and angular. This application developed naturally and dynamically to what it is now without a great plan at the beginning.
This application provides a visualization of path search algorithms (described in more detail in the documentation) on a grid. The screenshot above shows the initial page when accessing the application. The interaction is described more precisely in the documentation.
Nevertheless, a quick introduction follows:
The grid symbolizes an empty space, which is all passable/accessible. A start and end cell can be selected by using the controls above the grid. The start cell is dark green in the screenshot above, whereas the end or goal is dark red. Since finding a path on an empty space is rather simple, walls can be added. These are marked by purple cells in the screenshot above.
The path finding algorithm can be selected next to the grid on the right side. By clicking on run, the algorithm starts to explore. The process can be paused and continued as well as executed in different speeds, which allows a more detailed look on how algorithms work. Intermediate cells are visualized as well, namely cells which have been visited (darker blue) by the algorithm and cells which are considered to visit but haven't been so far (light blue). The final path is marked in yellow in the grid in the screenshot above.
The colors used to visualize these individual states of a cell can be changed by clicking on the gear wheel in the upper right corner.
The frontend implementation is based on the angular framework. More specific the current major version 11.
NgRx Store ist used throughout the application to manage the inner states of the application, namely the state of the graph, the settings and the algorithm settings. Furthermore, these states are "persisted" by saving them to the local storage of the browser. The application states are initialized by these "persisted" states on startup.
The graph of hexagons is created dynamically by the javascript framework p5.js. This framework is capable of creating and displaying of dynamic or static graphics. The graph is currently only using hexagons, which might be changed in the future to allow different styles of cells. This can easily be supported by p5 since all forms have to be designed individually.
Some styling elements, like the buttons, the theming, etc. are based on bootstrap or angular materials. There are still custom classed which should be replaced by bootstrap classes to minimize unnecessary customizations.
Although the local storage is not really a "technology" it shall still be listed here. As mentioned in section NGRX the application states are persisted in the local storage to allow resuming although the browser window has been closed in between.
A brief documentation can be accessed here.
The documentation has been written down without much of a prove reading, therefore check spelling, grammar and completeness.
The application state is already split up into multiple smaller states. These should be moved to the angular modules to allow a cleaner access/visibility model.