How to repaint QWidget encapsulated in QDeclarativeItem in QML?

Chillax

I work in a C++/QML environment and I use Qt 4.8 with QtQuick 1.0.

I have a QWidget derivated class, QCustomPlot, and I encapsulated it in a custom QDeclarativeItem derived class. I use a QGraphicsProxyWidget to embed the QWidget, and it appears nicely upon creation. I would like to update the chart periodically, but I simply cannot, no matter what I do it stays however I initiated it in the constructor.

I think I am missing a command from the C++ code that would notify the QML code that the Item should be updated.

Here is the code (somewhat simplified) I have:

flowgrafik.h:

class FlowGrafik : public QDeclarativeItem
{
    Q_OBJECT
public:
    explicit FlowGrafik(QDeclarativeItem *parent = 0);
    ~FlowGrafik();

    void addFlow(double flow);

signals:

public slots:

private:
    QCustomPlot * customPlot;
    QGraphicsProxyWidget * proxy;
    QVector<double> x, y;

};

flowgrafik.cpp:

FlowGrafik::FlowGrafik(QDeclarativeItem *parent) : QDeclarativeItem(parent)
{
    customPlot = new QCustomPlot();
    proxy = new QGraphicsProxyWidget(this);
    proxy->setWidget(customPlot);
    this->setFlag(QGraphicsItem::ItemHasNoContents, false);
    customPlot->setGeometry(0,0,200,200);

    /* WHAT I WRITE HERE WILL BE DISPLAYED */

    // pass data points to graph:
    customPlot->graph(0)->setData(x, y);

    customPlot->replot();


}

FlowGrafik::~FlowGrafik()
{
    delete customPlot;
}

void FlowGrafik::addFlow(double flow)
{
    //THIS PART DOES NOT GET DISPLAYED
    for (int i=0; i<99; ++i)
    {
      y[i] = y[i+1];
    }
    y[99] = flow;
    customPlot->graph(0)->setData(x, y);
    customPlot->replot();
    this->update();
}

mainview.qml:

Rectangle {
    id: flowGrafik
    objectName: "flowGrafik"
    x: 400
    y: 40
    width: 200
    height: 200
    radius: 10
    FlowGrafik {
        id: flowGrafikItem
    }
}

I would really appreciate if anyone could tell me why my QCustomPlot QWidget does not replot.

p3c0

Hi @Chillax,

Does the addFlow function gets called internally ?

Chillax

Hi @p3c0 !

Yes, it gets called 10 times every second, I even checked that with qDebug().

p3c0

@Chillax Usually paint method is used to draw something. The update will force the Item to re-paint by calling the paint method.

Chillax

@p3c0 The problem is that I am new to QtQuick and I probably misunderstand something essential. This is how I think things work:

The customPlot->replot(); updates the underlying QWidget
The QGraphicsProxyWidget does the painting of the QDeclarativeItem everytime update is called. But if I call the paint method instead of update I get a compile error, because QDeclarativeItem::paint() is virtual

p3c0

@Chillax

But if I call the paint method instead of update I get a compile error, because QDeclarativeItem::paint() is virtual

Yeah it is not supposed to be called by user. It is called when a re-paint is requested using update. But since QGraphicsProxyWidget is in picture here the re-implementing paint is not required.

Have you tried to call addFlow from the QML ? This will ensure that the addFlow is called when the FlowGrafik Item is ready.

Chillax

@p3c0 I created a timer in my QML item, which calls this function periodically:

void FlowGrafik::refresh()
{
    qDebug() << "refreshed";
    customPlot->replot();
    customPlot->repaint();
    this->update();
}

addFlow still gets called from the C++ code periodically and changes the plot values.

The weird thing is that whatever I write in the constructor of FlowGrafik gets displayed perfectly. I even tried to delete all internal objects of FlowGrafik in the addFlow function, like QGraphicsProxyWidget and customPlot, and I created new ones, but the results are the same. Only the code I write in the constructor gets displayed, and my QML Item never gets updated.

Could the root of the problem be the fact that I load the QML code from a QmlApplicationViewer?

main.cpp:

QmlApplicationViewer flowView;
flowView.setSource(QUrl("qrc:///qml/qml/FlowView.qml"));

FlowView.qml:

import QtQuick 1.1
import FlowGrafik 1.0

Rectangle {
    id: flowGrafik
    objectName: "FlowGrafikRect"
    x: 0
    y: 0
    width: 200
    height: 200
    radius: 10
    Timer {
        interval: 500; running: true; repeat: true
        onTriggered: flowGrafikItem.refresh()
    }
    FlowGrafik {
        id: flowGrafikItem
        objectName: "FlowGrafik"
    }
}

p3c0

@Chillax Did you check by adding the code which changes plot values (same as addFlow) inside refresh ?

p3c0

@Chillax After having a quick look at the QCustomPlot's API, I found QCustomPlot has toPainter method which accepts a QCPPainter as an argument. This QCPPainter in turn accepts a QPaintDevice argument which can be a QImage or QPixmap which means the QCustomPlot can be rendered onto an image or pixmap.
So after rendering this QCustomPlot's data into an image/pixmap you can periodically call update and re-paint this image/pixmap inside the re-implemented paint method and which will definitely updated on the QML side.

Chillax

@p3c0 Thank you so much for the tip! We are getting really close!
So I reimplemented the paint method of my custom QDeclarativeItem, FlowGrafik, like this:

void FlowGrafik::paint(QPainter* painter)
{
    if (customPlot)
    {
        qDebug() << "paint";
        QPixmap picture(200,200);
        QCPPainter qcpPainter(&picture);

        customPlot->replot();
        customPlot->toPainter(&qcpPainter);

        painter->drawPixmap(QPoint(), picture);
    }
}

Unfortunately the results are the same, but I found out that the paint method never gets called! (I didn't see the "paint" at the application output). I tried calling it in the refresh() function like this: this->paint(new QPainter);, and then I saw the "paint" at the application output, but the graph still did not replot. Any ideas on how to move on?

p3c0

@Chillax As said earlier to call paint you need to call update. So what you can do is call a C++ function from QML periodically which will update the plot values and then call update.

Chillax

@p3c0 Yes, I call update periodically, but that does not call paint

void FlowGrafik::refresh()
{
    qDebug() << "refresh";
    customPlot->replot();
    customPlot->repaint();
    this->update();
}

I see "refresh" at the application output, but I don't see "paint". The question is why doesn't update call paint?

p3c0

@Chillax It should actually.
http://doc.qt.io/qt-4.8/qgraphicsitem.html#painting

Depending on whether or not the item is visible in a view, the item may or may not be repainted

Well I guess the Item is visible.

Chillax

@p3c0 FML :D The item is indeed visible. But it didn't help to hide it before the update and then show it again.

I saved the pixmap to a jpg file, and it looks just as I expect it to look like. So the problem is that the QML won't repaint the QDeclaretiveItem, because it is visible... Can you think of a better solution for displaying my QCustomPlot Qwidget? I am pretty sure this is possibe in QML, and it shouldn't be this hard.

p3c0

@Chillax

So the problem is that the QML won't repaint the QDeclaretiveItem, because it is visible...

No. It's useless painting invisible objects.

Can you try following ?

On the QML side specify width and height for FlowGrafik item. May be this could be the reason the item is not painted i.e having width and height as 0 is close to having an invisible item.
Create a very minimal project with QDeclarativeItem and without using QCustomPlot and keeping rest the same. This is to make sure if paint method is invoked atleast in this case. I dont have Qt 4.8 at hand so I can't test. Have moved to Qt5 long time back :)

Chillax

@p3c0 Unfortunately specifying with and height did not solve the issue.

I created a minimal project (with QtQuick Application template). It is using QCustomPlot and everything works fine. But this is a Desktop version, and if I am not mistaken it is using Qt 5.3, but I need it to work on my embedded linux Qt 4.8 version.
The embedded linux version uses qmlapplicationviewer to load QML files with this comment on top:

# This file was generated by the Qt Quick Application wizard of Qt Creator.
# The code below adds the QmlApplicationViewer to the project and handles the
# activation of QML debugging.

the desktop version uses qtquickapplicationviewer:

# This file was generated by the Qt Quick 1 Application wizard of Qt Creator.
# The code below adds the QtQuick1ApplicationViewer to the project.

I'm not sure if the applicationviewer or the qt version difference causes my problem.

p3c0

@Chillax
qtquickapplicationviewer was a helper class added back then which calls other in-built functions to load QML files. It also provided some extra functions for ease. You can also directly use QQuickView or QQmlApplicationEngine to load the QML files depending upon the root object. This is all Qt 5.x related.
Similarly qmlapplicationviewer is an helper class. If you look into its source you can see it is actually subclassed from QDeclarativeView which actually loads and displays the QML files.

I'm not sure if the applicationviewer or the qt version difference causes my problem.

AFAIK definitely not applicationviewer but may be Qt version.

Also did you try running same application with Qt 4.8 on desktop ? I think you should try that too to rule out the system problem if any.

Chillax

@p3c0 So I spent the last couple of hours trying to find out how to install Qt version 4.8 on Ubuntu, but it turns out that only the versions newer than 5.0 support linux. So I installed Qt Creator and Qt version 4.8 on Windows and it works there as well :)

Chillax

@p3c0 Interesting news: Until now, my QmlApplicationViewer flowView was just a new window on top of the GUI I was using until now. But if I show only flowView in fullscreen and nothing else, it works (updates/repaints).

qmlRegisterType<FlowGrafik>("FlowGrafik",1,0,"FlowGrafik");
QmlApplicationViewer flowView;
flowView.setSource(QUrl("qrc:///qml/qml/FlowView.qml"));
flowView.showFullScreen();

Chillax

@p3c0 What's more interesting: If I call addFlow from QML, it works (replots). But if I call it from C++, it updates the QWidget, but not the QML Item. Even if I call refresh() from QML right after it, which should replot and repaint the QML Item too. Any explanation to this? Why is there a difference between changing the QWidget in the C++ code and asking for a replot from QML and doing everything in QML? As if the QML Item and the C++ QDeclarativeItem were two independent objects.

So now my plan is to give the flow value from C++ to the FlowGrafik QML item, and then call addFlow from QML. That should work.