Analysing an icon editor application



  • 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.


  • Lifetime Qt Champion

    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.


  • Moderators

    @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);



  • @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!!


  • Lifetime Qt Champion

    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.



  • @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.



  • 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?


  • Moderators

    @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?



  • @jsulm

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

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


  • Qt Champions 2016

    @tomy

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

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



  • @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.


  • Qt Champions 2016

    @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.



  • @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.


  • Qt Champions 2016

    @J.Hilk

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



  • @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...


  • Qt Champions 2016

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



  • 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.



  • @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.


  • Qt Champions 2016

    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



  • 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!

    0_1509027707561_Capture.PNG


  • Qt Champions 2016

    @tomy

    • I still don't know how those several functions in iconeditor.cpp are called/used!

    Place break points in them and do the actions that triggers them.
    Then use F10/F11 to step around.
    Or use the Find Usage functions to see all places used.

    The debugger wont show you the functions call before they are actually executed.



  • @tomy for your last comment.

    I think that you might want to study the Qt Debugger a little longer.

    1. Set breakpoints.
    2. Press F5 to go directly to the breakpoint.
      If the breakpoint is not entering, then the app flow won't arrive there.
    3. You can enter you OWN function directly by using F11.
    4. Somewhat, rebuild and build your solution.

    Kind Regards

    Enrique



  • I put a break point on the first instruction of each function in iconeditor.cpp. Then went back to main.cpp on the line IconEditor iconEditor;, pressed F10.

    The result: It goes to the break point of the constructor and after returning from that by iconEditor.setIconImage(QImage(":/images/mouse.png"));it goes to the void IconEditor::setIconImage(const QImage &newImage) function body. And then after returning from that to main.cpp, by iconEditor.show();
    to QSize IconEditor::sizeHint() const function body. after that it returns to main.cpp and then neither F10 nor F11 does any action. By now I know how these two above functions are called but what about other functions!? :(



  • @tomy

    show function is the last function that you're calling...

    Don't know your implementation, but there is the possibility to have cascade calls from function. Use only F11 to see all the called functions.

    Kind Regards,

    Enrique



  • I've provided all three files contents in the first post here. Please copy and paste them onto a project on your Qt Creator to see whether it's possible to know how other functions are called.


  • Qt Champions 2016

    @tomy
    Hi
    It always possible.
    But a function like setWindowsTitle are from Qt and it wont step into that code as
    the actual code is not included in the installation. only the binary result.

    Maybe that is what confusing you ?

    Also as @Charlie_Hdz says, you are only calling
    iconEditor.setWindowTitle(QObject::tr("Icon Editor"));
    iconEditor.setIconImage(QImage(":/images/mouse.png"));

    so none of the other function are called, except those use by the 2 functions.



  • @mrjj
    Hi,
    Please take a look at the functions below. When I press ctrl+R, the programs starts and execute all functions including these ones too. Do you know how and where in the code the following functions are called?

       QColor penColor() const { return curColor; }
       QImage iconImage() const { return image; }
       int zoomFactor() const { return zoom; }
       void setPenColor(const QColor &newColor);
       void setZoomFactor(int newZoom);
    
       ~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;
    

  • Qt Champions 2016

    @tomy said in Analysing an icon editor application:

    ctrl+R,

    That is normal run. Not debug so no stepping or breakpoint active.

    QColor penColor() const { return curColor; } // called when setting property
    QImage iconImage() const { return image; } // called when asking for image
    int zoomFactor() const { return zoom; } // called when u click stuff
    void setPenColor(const QColor &newColor); / called when setting property
    void setZoomFactor(int newZoom); // called when u click stuff

    protected: // called on mouse use
    void mousePressEvent(QMouseEvent *event); // called by qt
    void mouseMoveEvent(QMouseEvent *event); // called by qt
    void paintEvent(QPaintEvent *event);// called by qt



  • @mrjj

    That is normal run. Not debug so no stepping or breakpoint active.

    I know that. Just said that to make the issue clear, as a bigger shape.
    I got the point for the functions except:

    QColor penColor() const { return curColor; } // called when setting property
    void setPenColor(const QColor &newColor); / called when setting property
    QImage iconImage() const { return image; } // called when asking for image

    Do you mean the three Q_PROPERTY used in the header file by "called when setting property"? If so, then how are they called when I don't use those Q_PROPERTYes? Because they seem useless, that is either I use or remove them the program runs and works well.

    And about "called when asking for image", in what line is there an instruction that asks for the image?


  • Qt Champions 2016

    @tomy
    well its part of a larger system and are very usefull with rest of Qt
    http://doc.qt.io/qt-5/properties.html

    iconImage() is an access function and it seem its not used.
    Its normal to make access function for data user might want to read.
    One could also make the image variable public but that is bad design.



  • @mrjj
    Thanks.

    very useful with rest of Qt

    I saw the page and found it a little advanced for me. In the case of this example, it's simply redundant but it's surely useful for the next stages of Qt when I study, if I've understood your talk above, correctly.

    That function is also useless here as of a few before-mentioned functions. I think the author has founded a right structure for uses like that but here has used only the needed functions.

    One question in this end, how do you know a method is called by Qt itself? By your experience or is there any clue?


  • Qt Champions 2016

    @tomy
    Yes, its not always you use all access function at once but its part of the design
    to better to cope with changes later on.

    Well when i dont know a function , i press F1 on it (help) and if there is help
    its Qt function.
    Also, you can ask Creator to show all functions in a file and its then easy to see if part of
    an object or must come from other place.



  • @mrjj

    and if there is help
    its Qt function.

    And no need for our calling; it's called by the system (Qt). Yeah?

    Also, you can ask Creator to show all functions in a file and its then easy to see if part of
    an object or must come from other place.

    Did you mean again, using 'Find Usages' which is another appearance of ctrl+F to me?


  • Moderators

    @tomy said in Analysing an icon editor application:

    how do you know a method is called by Qt itself?

    Well, it depends on the method. If you for example override an event handler in your own class derived from QWidget then it will be called by Qt. There is no simple answer to this question. Read Qt documentation and try to understand how Qt works. In general Qt can only call something it knows about (what belongs to Qt, like event handler) or what you connect to signals.


  • Qt Champions 2016

    @tomy said

    • And no need for our calling; it's called by the system (Qt). Yeah?
      Yes most likely.

    'Find Usages' which is another appearance of ctrl+F to me?

    Find Usage is is better than plain search but yeah, it just searching.



  • Thank you both very much.


Log in to reply
 

Looks like your connection to Qt Forum was lost, please wait while we try to reconnect.