Skip to content

Visualisation

Jump to bottom
Eric Leung edited this page Aug 29, 2019 · 13 revisions

Requirements

  • Visualization should provide user with relevant information about scheduling
  • Visualization should update the user with relevant information about the scheduling
  • Visualization should update the user appropriately once a partial solution has been found
  • Visualization should update the user appropriately once a complete solution has been found
  • Visualization should not impact the performance of scheduling (too much (10% slow down is OK))
  • Visualization should be responsive at all times
  • Visualization should be appealing to look at
  • Visualization should be meet HCI Principles in relation to this project's targeted users

Design Phase

The design phase includes:

  • Designing the draft mockup(s) and its components for implementation: Mockup

  • We decided on three main views: The input graph being searched, the Gantt Chart of the current schedule and a table of the schedule information.

  • Basic stats agreed upon: Time elapsed, thread count (for parallelization), processor count (for task scheduling), Nodes changing colour to represent them being searched by the algorithm.

  • The plan was to make all views live updating and accessible via tabbed panes. The observer pattern was used in between both the algorithm when solving a partial solution to the visualization's components (graph, gantt chart, table, labels).

  • UML took into account to wiring the interfaces needed between the Algorithm classes and the GUI (refer to Software Architecture in Wiki)

  • Focus on separate views so the user won't be distracted / overwhelmed by too much information on the screen while not providing slow down to the algorithm performing the scheduling search

Implementation Phase

  • Technologies used: JavaFX 8, Graphstream , Jfoenix 8- all as decided in design phase.

  • Implemented our core design features: Time elapsed / timer, stats panel, input graph view, gantt chart view and table schedule view.

  • How we deal with parallelisation: Added a dropdown list of the thread you want to visualise. The 3 views are representative of 1 thread, which is by default thread 1. Again,l the goal was to keep it simple - 4 different views of graphs / gantt charts and tables would be too much man!

  • It became clear during the optimisation of the algorithm that we'd like to display the branch pruning stats and memory usage stats in the visualisation, too.

  • Spent time stylizing the GUI to give a unique finish.

  • Icons are also added to add quick identification of statistics, buttons and added personalization - referenced below.

  • Implementation of the Gantt Chart using extends XYCharts was inspired by the following LINK. The length of the task plot, style class for colours of the task and the task's ID are used to instantiate a Plot Properties object to plot onto the XY chart:

public Properties(long lengthMs, String style, String taskId) {
     super();
     _length = lengthMs;
     _styleClass = "gantt-border";
     _taskId = taskId;
}

Testing Phase

The team played around with the implementation and reported many bugs and stylistic issues. A couple of examples are listed below.

  • The infamous GraphStreme node "jiggling" issue. Nodes start vibrating like jelly if you move them around too much
  • Rethought colouring choices after seeing how hard it was to distinguish between processor colours. Fixed this issue by ensuring the generated colours would highly contrast each other.
  • Concurrency of threads issues were found -> Algorithm would start before the GUI would start, causing timing issue. Fixed by providing enforced ordering and recreating the timer interfaces to be more flexible with the changes.
  • Initial styling was a simple black text on white which did not stand out -> Added personalized darker version with team logo and team colours.

References

Clone this wiki locally