To create our first graphical clock display, let's follow these steps:

1. First, create a new Qt Widgets Application project. Then, open up mainwindow.ui and remove the menuBar, mainToolBar, and statusBar as we did before.
2. After that, open up the mainwindow.h file and include the following headers:

#include <QTime>
#include <QTimer>
#include <QPainter>

3. Then, declare the paintEvent() function, like so:

public:
    explicit MainWindow(QWidget *parent = 0);
    ~MainWindow();
    virtual void paintEvent(QPaintEvent *event);

4. In the mainwindow.cpp file, create three arrays to store the shapes of the hour hand, minute hand, and second hand, where each of the arrays contains three sets of coordinates:

void MainWindow::paintEvent(QPaintEvent *event) {
    static const QPoint hourHand[3] = {
        QPoint(4, 4),
        QPoint(-4, 4),
        QPoint(0, -40)
    };
    static const QPoint minuteHand[3] = {
        QPoint(4, 4),
        QPoint(-4, 4),
        QPoint(0, -70)
    };
    static const QPoint secondHand[3] = {
        QPoint(2, 2),
        QPoint(-2, 2),
        QPoint(0, -90)
    };
}

5. After that, add the following code below the arrays to create the painter and move it to the center of the main window. Also, we adjust the size of the painter so that it fits nicely in the main window, even when the window is being resized:

int side = qMin(width(), height());
QPainter painter(this);
painter.setRenderHint(QPainter::Antialiasing);
painter.translate(width() / 2, height() / 2);
painter.scale(side / 250.0, side / 250.0);

6. Once you are done with that, we will start drawing the dials by using a for loop. Each dial is rotated by an increment of 6 degrees, so 60 dials would complete a full circle. Also, the dial at every 5 minutes will look slightly longer:

for (int i = 0; i < 60; ++i) {
    if ((i % 5) != 0)
        painter.drawLine(92, 0, 96, 0);
    else
        painter.drawLine(86, 0, 96, 0);
    painter.rotate(6.0);
}

7. Then, we proceed with drawing the hands of the clock. Each hand's rotation is calculated according to the current time and its respective equivalent location over 360 degrees:

QTime time = QTime::currentTime();

// Draw hour hand
painter.save();
painter.rotate((time.hour() * 360) / 12);
painter.setPen(Qt::NoPen);
painter.setBrush(Qt::black);
painter.drawConvexPolygon(hourHand, 3);
painter.restore();

8. Let's go on to draw the minute hand of the clock:

// Draw minute hand
painter.save();
painter.rotate((time.minute() * 360) / 60);
painter.setPen(Qt::NoPen);
painter.setBrush(Qt::black);
painter.drawConvexPolygon(minuteHand, 3);
painter.restore();

9. Then, we also draw the hand for seconds:

// Draw second hand
painter.save();
painter.rotate((time.second() * 360) / 60);
painter.setPen(Qt::NoPen);
painter.setBrush(Qt::black);
painter.drawConvexPolygon(secondHand, 3);
painter.restore();

10. Last but not least, create a timer to refresh the graphics every second so that the program will work like a real clock:

MainWindow::MainWindow(QWidget *parent) : QMainWindow(parent), ui(new Ui::MainWindow) {
    ui->setupUi(this);
    QTimer* timer = new QTimer(this);
    timer->start(1000);
    connect(timer, QTimer::timeout, this, MainWindow::update);
}

11. Compile and run the program now, and you should see something like this: