Placing a custom ChartView object created in C++ into QML

z3dd

I'm creating a desktop app for plotting live data with ability to zoom, make snaps and whatnot. I've separated frontend from backend and everything works fine, but looking through all these docs and tutorials I feel lost because there seem to be a lot of different (and incompatible with each other) ways to perform simple tasks.

1 ) I've checked Zoom Line example, which employs widgets and plots the chart without any .qml files. I can subclass from QCharts and create custom ChartView but how to put it into exact place in my QML-based frontend?
Or maybe it is possible to add zoom-related stuff to already existing app?

2 ) The other problem I encountered is that according to this QML-C++ interaction doc there are 2 ways to load *.qml interface from main.cpp. But somehow I've been using the third one:

  QQmlApplicationEngine engine;
  QQmlContext *context = engine.rootContext();
  context->setContextProperty("core", &core); /* core is a custom class */
  engine.load(QUrl(QStringLiteral("main.qml")));

So what's the difference between the one above and this one?:

  QQmlEngine engine;
  QQmlComponent component(&engine, QUrl::fromLocalFile("main.qml"));
  QObject *object = component.create();
  QQmlContext *context = engine.rootContext();
  context->setContextProperty("core", &core);

I have to switch to the second one (in order to call object->findChild) but it gives me these errors:

main.qml:27:5: QML Connections: Cannot assign to non-existent property "onSetChartLims"
main.qml:28: ReferenceError: core is not defined

Referencing to this piece of code in main.qml:

Window{
    ...
    Connections {
        target: core
        onSetChartLims: { doingStuff();  }
    }
    ...
}

But core is accessible and onSetChartLims works when called, so what's up?

3 ) Last minor thing - is there any alternative to SplitView (with draggable separator) in QQuickControls2? According to Type Comparison Table there are none.

Thanks in advance, I will really appreciate any help or suggestions or advices!

dheerendra

This can happen if the core is not exposed before loading the qml. By looking at the code I don't see issue. Can you confirm whether you class is inherited from QObject ?

Here is the simple sample

class CoreTest : public QObject
{
Q_OBJECT
public:
explicit CoreTest(QObject *parent = 0);
signals:
void setChartLims();
public slots:
};

import QtQuick 2.7
import QtQuick.Window 2.2

Window {
visible: true
width: 640
height: 480
title: qsTr("Hello World")

function doingStuff() {

}
Connections {
    target: core
    onSetChartLims: { doingStuff();  }
}

}

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

CoreTest core;
QQmlApplicationEngine engine;
engine.rootContext()->setContextProperty("core", &core);
engine.load(QUrl(QStringLiteral("qrc:/main.qml")));

return app.exec();

z3dd

The Core object is inherited (Q_OBJECT in class declaration), and it works well if I load QML the way you did it, via QQmlApplicationEngine.

QGuiApplication app(argc, argv);
CoreTest core;
QQmlApplicationEngine engine;
engine.rootContext()->setContextProperty("core", &core);
engine.load(QUrl(QStringLiteral("qrc:/main.qml")));

return app.exec();

The error appears if I load QML interface this way (though the app works and I'm able to call core from QML):

    QApplication app(argc, argv);
    CoreTest core;
    QQmlEngine engine;
    QQmlComponent component(&engine, QUrl::fromLocalFile("main.qml"));
    QObject *object = component.create();
    QQmlContext *context = engine.rootContext();
    context->setContextProperty("core", &core);

z3dd

Solution to the first question:

    MouseArea {
        anchors.fill: parent
        hoverEnabled: true
        onPressed: {
            rubberBandRec1.x = mouseX; rubberBandRec1.y = mouseY; rubberBandRec1.visible = true;
            rubberBandRec2.x = mouseX; rubberBandRec2.y = mouseY; rubberBandRec2.visible = true;
            rubberBandRec3.x = mouseX; rubberBandRec3.y = mouseY; rubberBandRec3.visible = true;
            rubberBandRec4.x = mouseX; rubberBandRec4.y = mouseY; rubberBandRec4.visible = true;
        }
        onMouseXChanged: {
            rubberBandRec1.width = mouseX - rubberBandRec1.x;
            rubberBandRec2.width = rubberBandRec2.x-mouseX;
            rubberBandRec3.width = rubberBandRec3.x-mouseX;
            rubberBandRec4.width = mouseX - rubberBandRec4.x;
        }
        onMouseYChanged: {
            rubberBandRec1.height = rubberBandRec1.y - mouseY;
            rubberBandRec2.height = rubberBandRec2.y - mouseY;
            rubberBandRec3.height = mouseY - rubberBandRec3.y;
            rubberBandRec4.height = mouseY - rubberBandRec4.y;
        }
        onReleased: {
            var x = rubberBandRec4.x-(rubberBandRec4.width<0)*Math.abs(rubberBandRec4.width);
            var y = rubberBandRec4.y-(rubberBandRec4.height<0)*Math.abs(rubberBandRec4.height);

            if (Math.abs(rubberBandRec4.width*rubberBandRec4.height)>100)
                chartViewTop.zoomIn(Qt.rect(x, y, Math.abs(rubberBandRec4.width),
                                            Math.abs(rubberBandRec4.height)));
            rubberBandRec1.visible = false;
            rubberBandRec2.visible = false;
            rubberBandRec3.visible = false;
            rubberBandRec4.visible = false;
        }
    }
}