Home | All Classes | Main Classes | Annotated | Grouped Classes | Functions |

# Analog Clock Example

Files:

- widgets/analogclock/analogclock.cpp
- widgets/analogclock/analogclock.h
- widgets/analogclock/main.cpp

The Analog Clock example shows how to draw the contents of a custom widget.

This example also demonstrates how the transformation and scaling features of QPainter can be used to make drawing custom widgets easier.

## AnalogClock Class Definition

The `AnalogClock` class provides a clock widget with hour and minute hands that is automatically updated every few seconds. We subclass QWidget and reimplement the standard paintEvent() function to draw the clock face:

        class AnalogClock : public QWidget
        {
            Q_OBJECT

        public:
            AnalogClock(QWidget *parent = 0);

        protected:
            void paintEvent(QPaintEvent *event);
        };

## AnalogClock Class Implementation

When the widget is constructed, we set up a timer to keep track of the current time, and we connect it to the standard update() slot so that the clock face is updated when the timer emits the timeout() signal.

        AnalogClock::AnalogClock(QWidget *parent)
            : QWidget(parent)
        {
            QTimer *timer = new QTimer(this);
            connect(timer, SIGNAL(timeout()), this, SLOT(update()));
            timer->start(5000);

            setWindowTitle(tr("Analog Clock"));
            resize(200, 200);
        }

We use a five second timer, so the clock may run five seconds late. Since we are only interested in keeping the clock accurate to the nearest minute, this margin of error is acceptable. Finally, we resize the widget so that it is displayed at a reasonable size.

The `paintEvent()` function is called whenever the widget's contents need to be updated. This happens when the widget is first shown, and when it is covered then exposed, but it is also executed when the widget's update() slot is called. Since we connected the timer's `timeout()` signal to this slot, it will be called at least once every five seconds.

Before we set up the painter and draw the clock, we first define two lists of coordinates that will be used for the hour and minute hands.

        void AnalogClock::paintEvent(QPaintEvent *)
        {
            static int hourHand[8] = { 2, 0, 0, 2, -2, 0, 0, -25 };
            static int minuteHand[8] = { 1, 0, 0, 1, -1, 0, 0, -40 };

            int side = qMin(width(), height());
            QTime time = QTime::currentTime();

We also determine the length of the widget's shortest side so that we can fit the clock face inside the widget. It is also useful to determine the current time before we start drawing.

The contents of custom widgets are drawn with a QPainter. Painters can be used to draw on any QPaintDevice, but they are usually used with widgets, so we pass the widget instance to the painter's constructor.

            QPainter painter(this);
            painter.setBrush(painter.pen().color());

We use a brush with the same color as the default pen. Brushes are used when filling in polygons and other graphics primitives. We use a brush that uses the widget's standard foreground color to provide a contrast between the clock face and the widget's background color.

To make our code simpler, we will draw a fixed size clock face that will be positioned and scaled so that it lies in the center of the widget.

            painter.translate(width() / 2, height() / 2);
            painter.scale(side / 100.0, side / 100.0);

The translation moves the origin to the center of the widget, and the scale operation ensures that the following drawing operations are scaled to fit within the widget. We use a scale factor that let's us use x and y-coordinates between -50 and 50, and that ensures that these lie within the length of the widget's shortest side.

We draw the hour hand first, using a formula that rotates the coordinate system counterclockwise by a number of degrees determined by the current hour and minute. This means that the hand will be shown rotated clockwise by the required amount.

            painter.save();
            painter.rotate(30 * (time.hour() % 12) + time.minute() / 2);
            painter.drawConvexPolygon(QPointArray(4, hourHand));
            painter.restore();

We save and restore the transformation matrix before and after the rotation because we want to place the minute hand without having to take into account any previous rotations.

The minute hand is rotated in a similar way to the hour hand.

            painter.save();
            painter.rotate(6 * time.minute());
            painter.drawConvexPolygon(QPointArray(4, minuteHand));
            painter.restore();

Finally, we draw markers around the edge of the clock for each hour. We draw each marker then rotate the coordinate system so that the painter is ready for the next one.

            for (int i = 0; i < 12; ++i) {
                painter.drawLine(44, 0, 46, 0);
                painter.rotate(30);
            }
        }

We do not need to save and restore the transformation matrix after these rotations because we are not drawing anything afterwards.

The painter takes care of all the transformations made during the paint event, and ensures that everything is drawn correctly. Letting the painter handle transformations is often easier than performing manual calculations just to draw the contents of a custom widget.