Creating a GUI/Interface: Using Visual Studio 2010 and QT

After you’ve written up some code, it would be nice to allow a non-programmer to be able to eventually use it. How do you go about this? You develop a front-end GUI!

This article is going to focus on creating a simple GUI in C++ using QT and Visual Studio 2010. I’m going to focus on using the QT Add-in for Visual Studio which makes creating a GUI extremely simple if you are familiar with VS 2010. Please note, that the QT-Addin will not work for Visual Studio Express Editions.

For this tutorial, we’ll do the following:

  • Create the Visual Studio 2010/Qt environment
  • Create a GUI using Qt Designer
  • Within the GUI have a button that when pressed triggers a change
  • Update a text-label on the GUI dynamically using a horizontal slider

You will need to initially download and install the following two things:

  1. QT SDK
  2. QT Visual Studio Add-in

Once you have that installed, restart Visual Studio. If successfully installed, you should now see QT show up on the Menu Bar along with the usual suspects.

Figure 1: QT Option appears on Menu Bar

Once you can see that, it reflects that you have successfully installed the Qt Add-in. Now let’s start a new QT project within Visual Studio.

Same as a new Visual Studio Project: File -> New -> Project. You will now see a new addition called Qt4 Projects. This allows you to create various Qt applications. For simplicity, lets select: Qt Application.

Figure 2: Qt Application

 Let’s enter HelloGUIWorld as the name and click OK. Next, you will be prompted with a QT4 Console Project Wizard, click Finish.

Figure 3: Qt Application Wizard

You now end up with a blank project and a few files:

Figure 4: Blank QT Project in Visual Studio

Great! Things are looking familiar so far. Now for the Qt Add-in goodness. On the menu bar, find helloguiworld.ui and double click the file.

Figure 5: Launch UI file in Qt Designer

The Qt designer application opens up with your bare-bone GUI On the left you can see the more familiar GUI based choices such as buttons, containers (scroll-boxes, check-boxes, radio buttons etc.)

Figure 6: Qt Designer

Our GUI currently is a main window canvas with dots spaced equally to help in placing of the various GUI elements. If you want to re-size the size of the GUI, just go to the extremities and drag it to expand/contract. If you instead prefer giving exact dimensions:

  1. Locate the Property container
  2. Click the + sign against the geometry option to enter width and height

Figure 7: GUI Dimensions

For this tutorial let’s aspire to build merely a simple GUI with a single push-button that triggers some event.

Here is how we go about accomplishing this: Find the Push Button widget on the top-left and drag it onto the Main Window canvas at a position you want it to appear.

Figure 8: Push Button Widget

Figure 9: Push Button placed in GUI

Next, we also add a Text-Label that basically changes text when the button is pressed. Simple enough? Let’s set the default text of the text-label to Button Relaxed. You do the same thing to put a text-label, just find it on the left hand side where the widgets are and drag it into your GUI area.

Figure 10: Text label widget

The default Text-label that appears in the GUI, I don’t like so much. So let’s change a few parameters:

  1. Firstly, I changed the font type. To do this, click on the text-label find the property box on the right and look for font. Click on the red arrow and change your font type, size, etc.
  2. Next, the default text says Text Label. I want to change it to display Button Relaxed instead. So I scroll all the way down to Qlabel -> text and change it to whatever you’d like:

Figure 11: Change default text on Text label

Now that we’ve gotten the bare-bones of our design on the GUI area, lets save our work. File -> Save. Now if you go back to Visual Studio and compile your program, you will see the GUI generated as we designed it.

Figure 12: GUI Generated after compiling in VS 2010

Visually, out GUI looks like how we wanted it to. Let’s add a action listener / trigger that changes something on the GUI when the PushButton is pressed. Qt has a very nice Signal/Slots framework in place for more complex action listeners. I would highly suggest reading this article to understand the concept and try easy to understand examples.

However, since our trigger is quite simple, we can take advantage of the default action listeners available in QT and not have to go through the slot/signal method.

Here is what we want to do:

  1. Click on the button
  2. Detect the button was clicked
  3. Change the text of the text panel from Button Relaxed to Button Pressed!

To accomplish the above, we need the Object names of the push-button/ text-panel. We can easily get them by going to Qt Designer, clicking on the individual objects and just checking the property box under objectName

Figure 13: Object Name from Qt Designer

Now, looking at the Qt Designer, I know the object name for:

  1. Push Button = pushButton
  2. Button Relaxed text label = label

Next, we dig into some code to add the on button press event.

First, we go to the helloguiworld.h file. Currently, the default generated code there is as follows:

class HelloGUIWorld : public QMainWindow
{
Q_OBJECT

public:
HelloGUIWorld(QWidget *parent = 0, Qt::WFlags flags = 0);
~HelloGUIWorld();

private:
Ui::HelloGUIWorldClass ui;
};

We need to add the slot or quite simply the action listening function to the GUI that will run when the button is pressed. To do that we merely add the following:

class HelloGUIWorld : public QMainWindow
{
Q_OBJECT

public:
HelloGUIWorld(QWidget *parent = 0, Qt::WFlags flags = 0);
~HelloGUIWorld();

private:
Ui::HelloGUIWorldClass ui;

public slots: void on_pushButton_clicked();
};

Few things to note:

void on_pushButton_clicked(); 
  • void is basically specifying that the function doesn’t return anything
  • pushButton is the name of the Button you want to assign the action to! It could be anything that you name your object in Qt Designer!
  • _clicked() is specifying that you want to invoke an action when the button was clicked. There are other variants you can also use such as (_pressed(), _released() etc.):

Next, we go to the helloguiworld.cpp file. Currently, the code there is as follows:

#include "helloguiworld.h"

HelloGUIWorld::HelloGUIWorld(QWidget *parent, Qt::WFlags flags)
    : QMainWindow(parent, flags)
{
    ui.setupUi(this);
}

HelloGUIWorld::~HelloGUIWorld()
{

}

We modify it to add our newly created onClicked function as follows:

#include "helloguiworld.h"

HelloGUIWorld::HelloGUIWorld(QWidget *parent, Qt::WFlags flags)
    : QMainWindow(parent, flags)
{
    ui.setupUi(this);
}

void HelloGUIWorld::on_pushButton_clicked() {

    ui.label->setText("Button Pressed!"); //Changes the text on the Text-label
}

HelloGUIWorld::~HelloGUIWorld()
{

}

The objectName label was used here since we know that our “Button Relaxed” label had the object name, label (after checking in Qt Designer).  Depending on which text label we want to change within our GUI we could append ui.somelabelname instead. All we are doing above is setting the button to say Button Pressed!

Finally, all you have to do is re-build your program in Visual Studio and now click the Push Button, you should see your text-change as it did on mine:

Figure 14: Button Press Change

Similar to this something else that I wanted to demonstrate is the use of a slider widget. As done previously, we select this from the left hand window pane:

Figure 15: Horizontal Slider Widget

I placed one of it in my GUI and the default objectName is horizontalSlider. Then, I save the .UI file created so far (so that I can access this object via the VS code, otherwise it will give me errors if I hadn’t saved it).

Similar to the above, we add the following file in the public slots section of (helloguiworld.h). All it does is say that we want to trigger a change in GUI if the horizontal slider was moved (value changed).

public slots:
        void on_pushButton_clicked();
        void on_horizontalSlider_valueChanged();

In the helloguiworld.cpp file you add the following:

void HelloGUIWorld::on_horizontalSlider_valueChanged() {

    double sliderValue = ui.horizontalSlider->value();
    ui.label->setNum(sliderValue); //Changes the number on the Text-label to match the slider
}

Now in the initial configuration the slider looks as follows:

Figure 16: Horizontal Slider Initial Position

Hopefully, the value changes to 50, it is half-way through (Eureka, it actually does!):

Figure 17: Horizontal Slider Half-way Position

Finally, this is what it looks at the other extreme:

Figure 18: Horizontal Slider all-way Position

And finally if we press the PushButton and see if it still works as expected (Eureka!):

Figure 19: Push-button action event

That is about it guys! This was merely a simple introduction to setting you up with Qt and Visual Studio. However, this is really the basis to building a really well functioning GUI, all you have to play around with are the different widgets on the left hand side of the designer and also try out the different slots available to best suit your needs. Qt does really simplify a lot of the work/development curve in learning to get a GUI out …

Hopefully, I might create a second part describing some more things such as inserting images etc.

Leave a Reply