When developing the user interface for an application, no matter the platform, a great amount of time is spent refining the look and feel of the widgets that users interact with.
Sometimes, the GUI framework being used helps in this job, but sometimes there is the need to write your own versions of a known widget.
The LPGPU2 consortium is working on extending CodeXL with new functionality for profiling low-power GPUs. CodeXL’s user interface is developed using Qt 5.5, which is quite old by modern standards. This means that we have to write custom widgets once in a while in order to achieve our goals.
One of the visualisations we aim to provide is a pie chart. Pie charts are good for showing proportions of one group of elements relative to a set. However, Qt 5.5 does not provide some of the off-the-shelf chart components we require, so we had to develop our own pie chart.
Drawing a pie chart requires some calculations, but once that is sorted out we need to find the right look and feel for it.
The first version we came up with was far from ok, but it served to prove the point and allows us to keep working on the prototype (Before image). Unfortunately, there were a lot of things that didn’t feel right about the first version. The pie edges were drawn using black and they were quite jagged. The text for the labels was too big and very hard to read when confined in a small space. Finally, it was very difficult to associate the percentage amount of the corresponding label.
In order to improve this, the pie edge colours are now a light grey, this removes the attention from the edges and directs the eyes towards what is important in a pie chart: proportion. A small reduction in the font size combined with a better placement of the labels allows the association of a pie and label to be made more easily.
To remove the jagged edges, since we are using Qt, one can specify antialiasing flags to the object used for the actual drawing:
QPainter painter{ this };
painter.setRenderHints(QPainter::Antialiasing | QPainter::TextAntialiasing | QPainter::HighQualityAntialiasing);
The last flag is only used when this component is used with an OpenGL renderer is available.
The following screenshots give an overview of how the look and feel of the pie chart widget was improved by this change. (Click to zoom)
Original View
Modified View
Comments are closed.