Display Time Qt Creator Application

Display time Qt Creator application tutorial that shows how to update the current time in an application window every second. This tutorial shows how to start a 1 second timer that calls a function periodically and how to get the current time (hours, minutes and seconds).

Display Time Qt Creator Application
Display Time Qt Creator Application

The finished Qt application window is shown above with the current time displayed in the main application window. Follow the steps below to create this application.

1. Create the Display Time Qt Creator Project

Start a new Qt creator project as explained in the Qt 5 Hello World Tutorial. For the purpose of this tutorial, the new project is saved as display_time and saved in a directory of the same name. Delete the default menu bar, tool bar and status bar from the new application’s main window as explained in the hello world tutorial.

2. Modify the Application Window

Open mainwindow.ui under Forms in the left pane of Qt Creator. Edit the form in design mode.

2.1 Add Labels to the Main Window Form

Add two labels to the form by dragging and dropping them from the left pane under Display Widgets. Change the text of the first label to Current Time: as shown in the image at the beginning of this blog post. Double-click the label widget to edit its text.

Change the text of the second label to and change the name of the label to lbl_time. The label name is changed in the bottom right pane of Qt Creator under objectName.

2.2 Group the Labels

Click the first label to select it and then hold down the Ctrl key and click the second label so that they are both selected. Now click the Lay Out Horizontally button on the top toolbar to group the labels together. Resize the horizontal layout box as needed. The label fonts can also be set to bold for a better appearance.

2.3 Resize and Rename the Window Form

Select the main window form and use the resize handles to resize it to a reasonable size around the labels. With the main window form selected, change the title of the window to Time. This is done using the right bottom pane in Qt Creator next to windowTitle.

3. Add a Timer to a Qt Creator Project

A QTimer is used in this project to create a 1s timer tick that calls a function every 1s time period.

3.1 Add a QTimer to the Main Window Class

Open mainwindow.h and add a pointer to a QTimer object as shown below.

Scroll down for a full listing of the mainwindow.h file that includes the above code.

3.2 Timer Handler Function

A function that runs on each 1 second tick must be added to the project. In the mainwindow.h file, add the handler as a Qt slot as follows:

The body of this function or method will be added shortly. The full mainwindow.h file now looks as follows.

mainwindow.h

4. Display Time Application Code

Open mainwindow.cpp to add the main code for this application. Include QTimer and QTime header files at the top of mainwindow.cpp so that we can use a timer object and get the current time.

4.1 Start the Timer

Start the timer by adding the following code in the main window’s constructor. The full code listing is shown further down the page.

This code creates a new timer and then connects the UpdateTime() handler function to the timer’s timeout event or signal. The timer is then started with a 1000 millisecond time period which gives a 1 second timer tick, calling UpdateTime() every second.

4.2 Timer Handler Function

The timer handler function, UpdateTime(), gets and displays the current time in the time label that was named lbl_time as shown below.

The full listing of mainwindow.cpp is shown below.

mainwindow.cpp

The application can now be saved, built and run.

References

QTimer Class in the Qt Documentation.

QTime Class in the Qt Documentation.

Fixing the invalid use of incomplete type error for QTimer on Stack Overflow.

Development Tools

This tutorial was developed on a Linux Mint Mate 64-bit distribution with the following development tools.

  • Qt Creator 3.5.1
  • Qt 5.5.1
  • g++ Compiler version 5.4.0

Leave a Reply

Your email address will not be published. Required fields are marked *