[solved] adding Qt to existing program

mzimmers

Hi -

I've developed a small program in the Qt IDE. It's now to the point that I want to begin actually using Qt's GUI capabilities (if for no other reason than making debugging easier!) in the program.

I've looked through the list of tutorials, both built into Creator and those online, but in this nearly overwhelming body of information, I can't find something that shows me what tools to use and how to get started displaying program values in a GUI. For right now, the GUI can be read-only.

Can someone point me to a particular reference to get me started? If it just shows me how to display ONE variable, that'd be a good start.

Thanks...

Scylla

Try to create a new project in the QtCreator and choose a gui application. All needed files will create. The you can open the form and create a gui in the integrated designer. Now you have good base project. I hope I have understood you correct.

ZapB

Start off simple and build up in complexity as you get more familiar with the widgets and other facilities at your disposal.

Try making a trivial application that has a single window that shows a QLabel and a QLineEdit for example. To do this follow these simple steps:

In qt-creator go to File->New File or Project...

Choose Qt Gui Application and choose a name for it.

Select the base class to be QWidget (leave the class name as Widget which is the default).

The above will create you a simple project consisting of four files:

main.cpp
widget.h
widget.cpp
widget.ui

We will edit the widget.ui file first so click on that and designer will switch to design mode and open up the file. You should see a blank widget. Now do this:

Using the toolbox on the left, drag a Label onto the widget form

Do similarly for a Line Edit and place it to the right of the Label. The exact position is not important.

Click on the widget background so that both of your new widgets (the label and line edit) get deselected.

In the toolbar at the top click on the "Lay out Horizontally" button or press Ctrl-H to add all widgets to a horizontal layout. The layout will take care of resizing your widgets for you if the parent widget's size changes.

Double click on the Label and it will switch to edit mode. Change the text to "My name is:"

Press Ctrl-S to save the form.

Click on the Edit mode button in the left hand panel of creator to switch back to the text editor. You will probably see the raw xml content of the UI file at this point. Just close it we are done with it for now.

Now open up the widget.h file and edit it so that it looks like this:

@
#ifndef WIDGET_H
#define WIDGET_H

#include <QWidget>

namespace Ui {
class Widget;
}

class Widget : public QWidget
{
Q_OBJECT

public:
explicit Widget(QWidget *parent = 0);
~Widget();

void setName( const QString& name );
QString name() const;

private:
Ui::Widget *ui;
};

#endif // WIDGET_H
@

Now edit the corresponding .cpp file to look like this:

@
#include "widget.h"
#include "ui_widget.h"

Widget::Widget(QWidget *parent) :
QWidget(parent),
ui(new Ui::Widget)
{
ui->setupUi(this);
}

Widget::~Widget()
{
delete ui;
}

void Widget::setName( const QString& name )
{
ui->lineEdit->setText( name );
}

QString Widget::name() const
{
return ui->lineEdit->text();
}
@

Finally edit main.cpp to this:

@
#include <QtGui/QApplication>
#include "widget.h"

int main(int argc, char *argv[])
{
QApplication a(argc, argv);
Widget w;

w.setName( "Slim Shady" );

w.show();

return a.exec&#40;&#41;;

}
@

Now build and run the application. As you can see the main() function is very simple. All we do is create a QApplication and then a Widget (this is our custom widget that we layed out in designer and added custom behaviour to in code with the name() and setName() functions).

We then call our custom setName function on the widget. This in turn gets a pointer to the QLineEdit widget that we placed on the form and calls the setText() function of QLineEdit.

Finally we show the widget and enter the event loop by calling a.exec().

Once you understand how this simple app works then you can start adding some more bells and whistles like signal/slot connections.

Good luck!

mzimmers

Thanks for the detailed reply, Zap. I followed your detailed instructions and it worked like a charm.

Now, I'd like to face the task of adding Qt functionality to an existing application. Since I can't do the "File->New File or Project…" command (since it's not new), I'm not sure how to go about this.

Again, I'm willing to start small. If I could have a display like this widget program, but instead of the editable name field, I had a single numeric field that displayed the value of one integer variable in my program...I'd consider that a pretty good start. (Of course, the next thing I'll want to is have that variable display automatically updated whenever the variable changes; I bet that's a bit more work.)

So...how can I do this? Should I just import the widget stuff into my existing program, or is there a semi-automated way to do it?

Thanks again.

ZapB

Can you provide us with some more details please. What you want to achieve sounds easy enough but I do not understand enough about your existing project.

Is your project developed in qt-creator? Does it use qmake as the build system or something else (e.g. cmake)?

Where does your updating data come from? Are you calculating it or getting it from a network connection etc?

Do you have a QObject sub-class that performs the data updates (from whatever source)? If so then all we need to do is to add a signal to this class that gets emitted whenevr your variable changes. something like:

@
class MyClass : public QObject
{
Q_OBJECT
public:
MyClass() : m_data( 0.0 ) {}

public slots:
void calculateNewData()
{
// do soemthng useful here
m_data = ...

    // Let the world know about our new data
    emit dataChanged( m_data )
}

signals:
void dataChanged( double val );

private:
double m_data;
};
@

Then in you custom widget/dialog add a QDoubleSpinBox widget instead of a line edit and then somewhere that knows about both the data class and your widget make a signal/slot connection:

@
connect( myData, SIGNAL( dataChanged( double ) ), widget, SLOT( setValue( double ) ) );
@

Now, whenever the MyClass object calls calculateNewData() it will get the new data and emit the signal valueChanged( double ) where the argument is the value of your new data. Since we have connected this signal up to a slot that updates the GUI, it will be updated to reflect the latest value.

Of course you are not limited to passing single values in a signal if you have a lot of data changing. This is just an example so that you can see how signals/slots are used.

You could of course go one step further and use a QTimer and another signal/slot connection to automatically call the calculateNewData() function on a regular basis.

Good luck!

mzimmers

Is your project developed in qt-creator? Does it use qmake as the build system or something else (e.g. cmake)?

Yes, and yes.

Where does your updating data come from? Are you calculating it or getting it from a network connection etc?

For now, let's restrict this to data that is internally calculated.

Do you have a QObject sub-class that performs the data updates (from whatever source)? If so then all we need to do is to add a signal to this class that gets emitted whenever your variable changes. something like:

No, I don't have any QObjects defined. This is currently a vanilla C++ program. Should I modify my program to create and use a QObject?

ZapB

OK then let's modify last night's exampe to do something more along the lines of what you need.

We'll start by adding in a simple class that generates some data in response to a function call. Go to File->New file or project...->C++ class. Enter a name for the class of Generator and choose QObject as the base class.

Edit the files for this class to look like this:

generator.h
@
#ifndef GENERATOR_H
#define GENERATOR_H

#include <QObject>

class Generator : public QObject
{
Q_OBJECT
public:
explicit Generator( QObject* parent = 0 );

public slots:
void calculateNextValue();

signals:
void dataChanged( double value );

private:
int m_n;
};

#endif // GENERATOR_H
@

generator.cpp
@
#include "generator.h"

Generator::Generator( QObject* parent ) :
QObject( parent ),
m_n( 0 )
{
}

void Generator::calculateNextValue()
{
++m_n;
double value = m_n * m_n;
emit dataChanged( value );
}
@

As you can see this is a very simple class. Each time a call to calculateNextValue() is made it simply increments a counter and calculates the square if it. This value is then broadcast to the world via the dataChanged() signal which is declared in the header file in the "signals:" section.

This is where you would integrate your existing calculation code.

Now to get this to play nicely with our GUI. Since we are only going to be displaying read-only data I have simply deleted the line edit from our Widget using the design mode. I have then changed the Widget header file to look like this:

@
#ifndef WIDGET_H
#define WIDGET_H

#include <QWidget>

namespace Ui {
class Widget;
}

class Generator;

class QTimer;

class Widget : public QWidget
{
Q_OBJECT

public:
explicit Widget(QWidget *parent = 0);
~Widget();

public slots:
void setValue( double value );

private:
Ui::Widget ui;
QTimer m_timer;
Generator* m_generator;
};
@

Here you can see I have replaced the old string-based function with a new slot called setValue() that accepts a double as an argument.

I have also declared as member variables, pointers to a QTimer and an object of our new Generator class.

The corresponding .cpp file now looks like this:

@
#include "widget.h"
#include "ui_widget.h"

#include "generator.h"

#include <QTimer>

Widget::Widget( QWidget* parent ) :
QWidget( parent ),
ui( new Ui::Widget ),
m_timer( new QTimer( this ) ),
m_generator( new Generator( this ) )
{
ui->setupUi( this );

// Use a couple of connections to do something useful.

// This one causes new data to be calculated once a second (once the timer is started)
connect( m_timer, SIGNAL( timeout() ), m_generator, SLOT( calculateNextValue() ) );

// This one causes the new data to update the GUI
connect( m_generator, SIGNAL( dataChanged( double ) ), this, SLOT( setValue( double ) ) );

// Start the timer off to kick things into motion
m_timer->start( 1000 );

}

Widget::~Widget()
{
delete ui;
}

void Widget::setValue( double value )
{
QString s = QString( "The current value is %1" ).arg( value );
ui->label->setText( s );
}
@

In the constructor we create a QTimer and a Generator object. Note that we pass through "this" to the constructors. This has the effect of making these object schildren of our Widget object which in turn means that we do not need to worry about deleting them explicitly since QObject (and hence our Widget) class automatically deletes its QObject-based children when it is destroyed.

Then in the constructor we use a couple of signal-slot connections to make our objects interact with each other.

First of all we want our Generator object to calculate a new value at regular intervals of 1s say. To do this we connect the "timeout()" signal of the QTimer object to the "calculateNextValue()" slot of the Generator object.

That gets our data calculated but it is not yet enough to make our GUI reflect it in the window. To do so we need a second signal. This time we connect the "dataChanged()" signal of the Generator object to the "setValue()" slot of the Widget class.

Finally in the constructor we start the timer off such that it emits signals at intervals of 1000ms (1s).

In the implementation of the Widget::setValue( double value ) function, we simply use QString::arg() to construct a suitable string for display and then tell the QLabel to show that string. Simple! ;-)

Now when you build and run the app you should see a label showing the sequence of square numbers being updated at a rate of 1 per second.

Does that help you get closer to what you wish to accomplish?

I recommend that you have a read up on signals/slots in the Qt docs and also have a look at the tutorials/examples/demos that ship with Qt.

Good luck!

andre

Hey ZapB,

Perhaps you could use the very clear descriptions you wrote above to make a very simple "Qt Ui Basics" Tutorial, or something like that?

ZapB

Yeah I will try to do that. I'll make some screenshots as I go along too. Good idea.

mzimmers

Hey, Zap -

Thanks a ton for this information. I will hopefully have a chance to play with it tomorrow, and I imagine I'll come back with some more questions.

ZapB

No problem. I just noticed that I forgot to post the modified main.cpp. It is a simple modification though, just remove the call to w.setName(). The rest is the same.

mzimmers

OK, I've made the changes you outline above, and I tried to build. I'm getting a curious error (probably not germane to this thread): "the build directory needs to be at the same level as the root directory." I did move the files, but I thought I kept the directory structures intact. Any idea what this is?

Once I get this built, I'll step through it and re-read your explanations above.

EDIT: don't sweat this; I just nuked the project files and re-generated them. I think it's OK now. Time to start watching this work.

mzimmers

OK...I have a few questions. Hopefully, the answers to these will also be of use in preparing your introductory tutorial.

I notice we had a few choices when we selected widget for our base class. What is a good working definition of a widget (for Qt purposes), and why did we choose it for this example?

I don't really understand the syntax of widget.cpp, line 30. It appears you're making a new variable called s, but what does the first pair of parens contain? Is this some kind of compound function call?

what controls the position and format of the output in the GUI window?

if I wanted to add a pause button, how would I go about that? (this question is mostly out of curiosity, so don't spend a lot of time on it.)

can you explain the return a.exec(); in main.cpp? It seems like this is where the program spends all of its time, and I think I need to know more about this if I'm going to successfully decouple my main program from its auxiliary GUI.

Thanks!

goetz

[quote author="mzimmers" date="1300743352"]# I notice we had a few choices when we selected widget for our base class. What is a good working definition of a widget (for Qt purposes), and why did we choose it for this example?
[/quote]

A widget is just a collection of GUI elements, together with its internal logic (eg. the code that increases the value if you click on the up-arrow of a spin box widget). A widget can be displayed as a single toplevel window (like in the hello world examples) or can be embedded in other widgets to construct more complex user interfaces.

Dialoges, MainWindows and the like are more specialized widgets. A dialog, for example, is intended to be shown as its own top level window, but not to be embedded into another user interface. The same holds for main windows which contain a menu bar, a tool bar and other goodies by default.

To start with a widget in an example is just for simplicity :-)

[quote author="mzimmers" date="1300743352"]# I don't really understand the syntax of widget.cpp, line 30. It appears you're making a new variable called s, but what does the first pair of parens contain? Is this some kind of compound function call?
[/quote]

You mean this on line 35:

@
QString s = QString( "The current value is %1" ).arg( value );
@

<pre>QString( "The current value is %1" )</pre> is the constructor of a new QString object. It's the call for a value of the object (= allocation on the stack), in contrast to creating an object on the heap with new xxx. Subsequently you call method arg() on that newly created object. The resulting string is eventually assigned to variable s.

[quote author="mzimmers" date="1300743352"]# what controls the position and format of the output in the GUI window?
[/quote]

The position of a new toplevel window is usually the center of the screen (or the centered over the parent window if, for example, a QDialog has a parent). The size is calculated by the layout and respects the size of the parts of the widget (sizeHint etc.)

[quote author="mzimmers" date="1300743352"]# if I wanted to add a pause button, how would I go about that? (this question is mostly out of curiosity, so don't spend a lot of time on it.)
[/quote]

You would add the button in Qt Designer (or the designer component of Qt Creator). It depends on the actual layout of your existing UI if you just drop the button on the right place or if you have to break the layout and re-layout things afterwards. Just play around, you'll get a feeling for this very soon. It lasts longer to describe it textually :-)

[quote author="mzimmers" date="1300743352"]# can you explain the return a.exec(); in main.cpp? It seems like this is where the program spends all of its time, and I think I need to know more about this if I'm going to successfully decouple my main program from its auxiliary GUI.

Thanks![/quote]

Every Qt GUI application has a so called event loop. It is responsible to receive all the events from the user (mouse moves and clicks, keyboard and all this) and to activate the appropriate actions on the application's GUI elements. exec() is just the method that starts the event loop. It only returns, when the event loops is stopped, which usually only happens when your program terminates.

ZapB