Visualizer architecture
This page is badly out of date.
This page will lay out the architecture and plan of how the game visualizer will be implemented, along with a description of technologies used and other important information.
Technically, the visualizer can be split into two major parts:
A persistent window which always shows a brief overview of the entire game, along with the most important information about brokers, producers and consumers with links to more detailed info about each entity.
The window in which all of the detailed info selected in the Game overview is shown.
This mockup is the default one, with game overview and details windows placed horizontally next to each other.
This is a second proposed mockup, with details window placed below the game overview. This way, each of the windows is granted more horizontal space, making the graphs drawn in the details window show more information.
Each of the windows is planned to be contained in it's own div, that will be handled with jQuery's collapsible elements. In essence, this means that each window can be minimized so that the focus can be shifted from one element to another.
General rule of thumb is to choose as little of different technologies as possible, and to avoid additional Grails plugins to every extent possible. Ie. jQuery and Javascript will be handled from Google's CDNs, rather than additional Grails plugins resulting in a much cleaner architecture and maintainability.
The core of the visualizer will be handled by HTML and CSS, the way any web page is handled these days.
Php will probably be needed for querying the database, or reading messages sent to the visualizer for information access.
The scripting language of Web today. Although the majority of Javascript will be handled by the jQuery and other libraries, there is still a possibility that some elements will rely on Javascript only.
Rich Javascript library with many usable widgets. Most, if not all of the UI elements will be handled with jQuery UI widgets.
Flot is a Javascript library oriented on graphs and plotting. All of the graphs and charts in the visualizer will be handled by this library.
Eventually, the skeleton based around HTML/CSS and Javascript was planned to be merged with Grails code to finally become a Grails plugin, and to use the Groovy code to access relevant information about the brokers. However, if communication with the server will be handled by polling and/or database requests, it is possible to implement the visualizer independently of the Grails plugins and only use the technologies mentioned before.
TBA
While working on the visualizer, I usually start from the bottom and working my way up, to simplify the building process and following these steps, more or less:
- Build a skeleton using HTML/CSS
- Enrich the GUI and interactivity by introducing jQuery and it's widgets
- Adding on additional Javascript libraries, like Flot and dependencies
- Finishing touches on the visual elements
- Deploy a visual demo (http://161.53.19.109:8080/q/demo.html)
- Handle the communication with the server
- Testing and bug handling
This plan is laid out for everyone to comment on, and for people willing to help to gain insight in what needs to be done and how it is supposed to be done.
For any comments and remarks, don't hesitate to contact me via the mailing list.