An Animated Circular Gauge for QGraphicsView Framework


This article describes a simple animated round gauge I created for the Qt Graphics View Framework.  Despite the emphasis on QML nowadays, “old” Qt is still of value.  Lots of people use QGraphicsView still, so I thought this could be useful to people. Find the source at https://github.com/MarkVTech/CircularGauge

The image below shows a static view of the CircularGaugeGraphicsObject. The outer white ring is the outline of the gauge, the red curved “bar” is a graphical representation of the value displayed by the gauge, and the red ring is the “glow ring”.  The glow ring pulses; its color can be altered to pulse different colors within different value ranges.

Here is a video of the gauge in action. A change in the displayed value results in an animation sequence that changes the bar gradually.  An animation sequence also causes the glow ring to pulse.  Both effects are obtained via the the Qt Animation Framework. 

The gauge is built up from layers.  The first layer is the empty “channel”, while the next layer adds the value bar.  Both layers are drawn by QPainter::drawPie.

The next layer is the pulse ring, which is an ellipse drawn by QPainter::drawEllipse.

The next to last layer is a black ellipse, within which the value of the gauge is displayed.

QVariantAnimation is used animate both the value bar and the pulse ring.

I hope you find this useful.  Constructive feedback and questions are always welcome.

Advertisement

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

This site uses Akismet to reduce spam. Learn how your comment data is processed.