Analysing an icon editor application

tomy

Hello,

In the chapter 5 of the book C++ GUI Programming with Qt-4, 2nd Edition, I faced this example:

main.cpp:

#include <QApplication>
#include "iconeditor.h"

int main(int argc, char* argv[])
{
    QApplication app(argc, argv);

    IconEditor iconEditor;
    iconEditor.setWindowTitle(QObject::tr("Icon Editor"));
    iconEditor.setIconImage(QImage(":/images/mouse.png"));
    iconEditor.show();

    return app.exec();
}

iconeditor.h:

#ifndef ICONEDITOR_H
#define ICONEDITOR_H

#include <QColor>
#include <QImage>
#include <QWidget>

class IconEditor : public QWidget
{
    Q_OBJECT
    Q_PROPERTY(QColor penColor READ penColor WRITE setPenColor)
    Q_PROPERTY(QImage iconImage READ iconImage WRITE setIconImage)
    Q_PROPERTY(int zoomFactor READ zoomFactor WRITE setZoomFactor)

public:
    IconEditor(QWidget *parent = 0);

    QColor penColor() const { return curColor; }
    QImage iconImage() const { return image; }
    int zoomFactor() const { return zoom; }
    void setPenColor(const QColor &newColor);
    void setIconImage(const QImage &newImage);
    void setZoomFactor(int newZoom);

    QSize sizeHint() const;

    ~IconEditor();

protected:
    void mousePressEvent(QMouseEvent *event);
    void mouseMoveEvent(QMouseEvent *event);
    void paintEvent(QPaintEvent *event);

private:
    void setImagePixel(const QPoint &pos, bool opaque);
    QRect pixelRect(int i, int j) const;

    QColor curColor;
    QImage image;
    int zoom;
};

#endif // ICONEDITOR_H

iconeditor.cpp:

#include <QtWidgets>
#include "iconeditor.h"

IconEditor::IconEditor(QWidget *parent)
    : QWidget(parent)
{
    setAttribute(Qt::WA_StaticContents);
    setSizePolicy(QSizePolicy::Minimum, QSizePolicy::Minimum);

    curColor = Qt::blue;
    zoom = 8;

    image = QImage(16, 16, QImage::Format_ARGB32);
    image.fill(qRgba(0, 0, 0, 0));
}

//*******************************************************

void IconEditor::setPenColor(const QColor& newColor)
{
    curColor = newColor;
}

//**************************************************

void IconEditor::setZoomFactor(int newZoom)
{
    if (newZoom < 1)
        newZoom = 1;

    if (newZoom != zoom) {
        zoom = newZoom;
        update();
        updateGeometry();
    }
}

//***********************************************************

void IconEditor::setIconImage(const QImage &newImage)
{
    if (newImage != image) {
        image = newImage.convertToFormat(QImage::Format_ARGB32);
        update();
        updateGeometry();
    }
}

//********************************************

QSize IconEditor::sizeHint() const
{
    QSize size = zoom * image.size();
    if (zoom >= 3)
        size += QSize(1, 1);
    return size;
}

//*******************************************

void IconEditor::paintEvent(QPaintEvent *event)
{
    QPainter painter(this);
    qDebug() << image.height() << ' ' << image.width() <<endl;
    if(zoom >= 3)
      {
        painter.setPen(palette().foreground().color());
        for(int i = 0; i< image.width(); ++i)
            painter.drawLine(zoom * i, 0, zoom *i, zoom * image.height());

        for(int j = 0; j<image.height(); ++j)
            painter.drawLine(0, zoom * j, zoom * image.width(), zoom * j);
      }

    for(int i = 0; i<image.width(); ++i)
        for(int j = 0; j < image.height(); ++j)
        {
            QRect rect = pixelRect(i, j);
              if(!event->region().intersected(rect).isEmpty())
              {
                 QColor color = QColor::fromRgba(image.pixel(i, j));
                  if(color.alpha() < 255)
                     painter.fillRect(rect, Qt::white);
                  painter.fillRect(rect, color);
              }
        }
}

//************************************************

QRect IconEditor::pixelRect(int i, int j) const
{
    if( zoom >= 3)
        return QRect(zoom * i + 1, zoom * j + 1, zoom-1, zoom-1);
    else
        return QRect(zoom * i, zoom * j, zoom , zoom);
}

//**************************************************

void IconEditor::mousePressEvent(QMouseEvent *event)
{
    if(event->button() == Qt::LeftButton)
        setImagePixel(event->pos(), true);
    else if(event->button() == Qt::RightButton)
        setImagePixel(event->pos(), false);
}

//************************************************

void IconEditor::mouseMoveEvent(QMouseEvent *event)
{
    if(event->buttons() & Qt::LeftButton)
        setImagePixel(event->pos(), true);
    else if(event->buttons() & Qt::RightButton)
        setImagePixel(event->pos(), false);
}

//*********************************************************

void IconEditor::setImagePixel(const QPoint &pos, bool opaque)
{
    int i = pos.x() / zoom;
    int j = pos.y() / zoom;

    if(image.rect().contains(i, j)) {
        if(opaque)
            image.setPixel(i, j, penColor().rgba());
        else
            image.setPixel(i, j, qRgba(0 , 0, 0, 0));
    update(pixelRect(i, j));
    }
}

//***************************************************

IconEditor::~IconEditor() { }

I read that part of the book two times but haven't understood the example completely, yet!

The issue is the so-called statements execution chain!
I think just like C++ programs, all Qt programs start from main.cpp (OK, I know Qt is only a library!)

If so, the program starts from the first statement: IconEditor iconEditor; in main.cpp, an instantiation. It was the first step. The next step is executing setAttribute(Qt::WA_StaticContents); in the constructor.

Well, I want to continue to state my thought but one question here, have my thoughts been right up to this point?

The subject is that if I know how the statements sequence is executed I figure the program out better.

SGaist

Hi,

Technically, no. The first statement is the app object creation which does a bunch of Qt internal initialisation. Then you have an object of type IconEditor that is created. And the first line is not setAttribute but : QWidget(parent) which is the call to the base class constructor. Only then will setAttribute be called.

jsulm

@tomy Well, a C/C++ program starts with main. In this case the next thing is

QApplication app(argc, argv);

then

IconEditor iconEditor;

which means that the constructor of IconEditor is executed. Then the base class constructor is executed (QWidget(parent)) and then setAttribute(Qt::WA_StaticContents);

tomy

@SGaist @jsulm Thanks.

The first statement is the app object creation which does a bunch of Qt internal initialisation.

but : QWidget(parent) which is the call to the base class constructor.

Yes, these are facts but do we need to care about them?

On setAttribute I got this from Help: Indicates that the widget contents are north-west aligned and static. On resize, such a widget will receive paint events only for parts of itself that are newly visible. This flag is set or cleared by the widget's author.

There are two points: north-west alignment and static. For the static, we have the icon plus a grid. Do we have any copy to prevent them by making those two contents static? And whether we use the attribute or not the icon is north-west aligned and also no modification happens showing the effect of not using that attribute!!

SGaist

Yes you do, ignoring proper construction can lead to all sort of bad things.

That attribute explain that there will be no repaint done unless something new is visible so you won't see any difference changing just that flag. It's on the painting level that the difference happens.

tomy

@SGaist
So since we don't have any new image we won't see any repaint making that attribute useless in this example. Besides the north-west alignment is right without it as well. (1)

Apart from that, another useless (seemingly) code is:

Q_PROPERTY(QColor penColor READ penColor WRITE setPenColor)
Q_PROPERTY(QImage iconImage READ iconImage WRITE setIconImage)
Q_PROPERTY(int zoomFactor READ zoomFactor WRITE setZoomFactor)

The program work well with or without it as well! (2)
I don't know why the author has used these in the program except for introducing them. So I think I can remove both (1) and (2) without any problem facing the program.

tomy

The next statement that is executed is: setSizePolicy(QSizePolicy::Minimum, QSizePolicy::Minimum);
I looked its meaning up on Help and it speaks about preferences. The book also says: The widget
can be stretched if required, but it should never shrink below the size hint..

sizeHint() is also:

QSize IconEditor::sizeHint() const
{
    QSize size = zoom * image.size();
    if (zoom >= 3)
        size += QSize(1, 1);
    return size;
}

The image is multiplied by the zoom factor (8).
So the widget, the window containing the grid layout and the image should not be shrunk. But in practice we can make it bigger and also smaller!
EDITED:

The next steps are: curColor = Qt::blue; zoom = 8;
Then: image = QImage(16, 16, QImage::Format_ARGB32);, that using this initialisation we actually make a 16*16 pixels room for the image variable. In image.fill(qRgba(0, 0, 0, 0)); we make that room transparent (clear or having nothing ready to get the real icon image).

The next statement will be iconEditor.setIconImage(QImage(":/images/mouse.png")); in main.cpp.

Right up to here?

jsulm

@tomy Please check Qt documentation: http://doc.qt.io/qt-5/qwidget.html#sizeHint-prop
It says:
"This property holds the recommended size for the widget"
So, it is recommended size not minimal.
Even the description in the book doesn't say that it is not allowed to go bellow the sizeHint:
"but it should never shrink below the size hint".

"Right up to here?" - what do you mean?

tomy

@jsulm

"Right up to here?" - what do you mean?

I meant : was what I said/understood correct? (Mostly about the next statements)

mrjj

@tomy

if you mean
QImage(16, 16, QImage::Format_ARGB32)

you create an image of size 16x16 with ARG32 format.

tomy

@mrjj
No I meant: is iconEditor.setIconImage(QImage(":/images/mouse.png")); in main.cpp the next statement?
If so, then it goes to void IconEditor::setIconImage(const QImage &newImage). This function executes and finishes. But it's not clear from where the executor follows other statements, or, what is the next statement after this function?

We have several functions in the program, I want to know how they will be called.

mrjj

@tomy

Hi
if you right click on a function, you can select Find Usage
and it will all show places called / used.

You can also stand on a function and press F2 it will then go into that. You can then F2 other things it calls there.

J.Hilk

@mrjj additionally to that, in one of the latest QCreator releases, ctrl + Leftclick can be used instead of F2.

A tiny bit more convenient in my opinion.

mrjj

@J.Hilk

Absolutely and also holding ctrl+alt + click to open in spit window is really handy.

J.Hilk

@mrjj Wait, what !? I wasn't aware of that! Very very handy!

Thankfully with 4.4.1 my Creator doesnt bug out any longer when i have more than one window open. Previously any and all popups would no longer be shown. Aggravating but made me lookup and learn more shortcuts...

mrjj

@J.Hilk
Yep, now i only wish for a key that can open/close all comment sections in a file :)

tomy

Guys, I don't need these (I knew F2). I don't want to know where such a function is written or not, it's like ctrl+F. I want the sequence of the statements which are executed from the beginning of the program until end. You can also read prior posts as well.

In Visual Studio 2017 when I code in C++, I put the cursor on the first statement of the main function and press Ctrl + F10 (Run to Cursor). And by pressing F10 (for executing a statement) and F11 (for going into the body of a function), it goes through the statements in the same way as they are executed by the compiler. So I will be aware of the process being done from start (where I pressed ctrl + F10) until end.

Since I'm rather new in Qt, for being able to understand the program correctly, I need to know how the whole program runs.
I hope I've made it clear now what I'm looking for.

J.Hilk

@tomy mmh, ist that just a fancy way of setting a breakpoint and hitting F5 ? That you can do in QtCreator as well as in VS, even same short cuts.

mrjj

Ah you ment while debugging.
Just place break point and the call trace window will show the complete call tree.
http://doc.qt.io/qtcreator/creator-debug-mode.html
section Viewing Call Stack Trace

tomy

OK, I want to go through a program line-by-line or instruction-by-instruction. For that apparently I can use the debugger. For that the first thing is I think going to Window > Views. But Views is grayed out there!

I also went to main.cpp and tried to trace the instructions by F10 and F11. This way, I only could go into the constructor by F11 on IconEditor iconEditor;. I still don't know how those several functions in iconeditor.cpp are called/used!