C++ to change QML object properties



  • I want to change QML objects properties using C++.
    I tried the “http://qt-project.org/doc/qt-5/qml-qtqml-qtobject.html”. I couldn’t get it working on QT5.3.
    If anyone could provided working example for QT5.3 would be great help either “QT Declarative” or “QTObject”.


  • Moderators

    Hi,

    Are you using QQuickView or QQmlApplicationEngine ?



  • Hi,
    I am using both. below my main.cpp code:

    @
    #include <QGuiApplication>
    #include <QQmlApplicationEngine>
    #include <QObject>
    #include <QtQuick/QQuickView>
    #include <QtQuick/QQuickItem>

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

    QQmlApplicationEngine engine;
    engine.load(QUrl(QStringLiteral("qrc:///main.qml")));
    
    QQuickView view;
    view.setSource(QUrl::fromLocalFile&#40;"main.qml"&#41;&#41;;
    

    // view.show();

    QQuickItem *item = view.rootObject()->findChild<QQuickItem*>("myRect");
    if (item)
        item->setProperty("color", QColor(Qt::yellow));
    
    return app.exec&#40;&#41;;
    

    }

    main.qml code:

    import QtQuick 2.1
    import QtQuick.Window 2.1

    //import QtQuick 2.0
    //import QtQuick.Window 2.0

    Window {
    visible: true
    width: 360
    height: 360

    MouseArea {
        anchors.fill: parent
        onClicked: {
            Qt.quit();
        }
    }
    
    Text {
        text: qsTr("Hello World")
        anchors.centerIn: parent
    }
    Item {
        width: 200; height: 200
    
        Rectangle {
            anchors.fill: parent
            color: "red"
            objectName: "myRect"
        }
    }
    

    }
    @

    I want the color to change.

    [edit: added missing coding tags @ SGaist]


  • Moderators

    Please encapulate your code in the code tags '@@' so that its easily readable to others.

    You should either use QQmlApplicationEngine or QQuickView not both.
    If using QQmlApplicationEngine you can try
    @
    QGuiApplication app(argc, argv);
    QQmlApplicationEngine engine;
    engine.load(QUrl(QStringLiteral("qrc:///main.qml")));
    QQuickItem item = engine.rootObjects().at(0)->findChild<QQuickItem>("myRect");
    if (item) {
    item->setProperty("color", QColor(Qt::yellow));
    }
    return app.exec();
    @



  • Hi,
    Thank you very much. It works fine.
    Is it possible to control animation using C++?

    I am testing code tags:
    @
    #include <QQmlApplicationEngine>
    //#include <QObject>
    //#include <QtQuick/QQuickView>
    #include <QtQuick/QQuickItem>

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

    QQmlApplicationEngine engine;
    engine.load(QUrl(QStringLiteral("qrc:///main.qml")));
    

    // QQuickView view;
    // view.setSource(QUrl::fromLocalFile("main.qml"));
    // view.show();

    QQuickItem *item = engine.rootObjects().at(0)->findChild<QQuickItem*>("myRect");
    if (item)
        item->setProperty("color", QColor(Qt::yellow));
    
    return app.exec();
    

    }
    @


  • Moderators

    In the same way as above you can set the "running" property of animation so that you can start or stop the animation or set other properties.



  • Hi,
    I try to change width and height of object, but I'm couldn't

    qml
    @
    Window {
    visible: true
    width: 360
    height: 360
    objectName: "myWindow"
    }
    @

    main.cpp
    @
    #include <QGuiApplication>
    #include <QQmlApplicationEngine>
    #include <QtQuick/QQuickItem>

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

    QQmlApplicationEngine engine;
    engine.load(QUrl(QStringLiteral("qrc:///main.qml")));
    

    // QQuickView view;
    // view.setSource(QUrl::fromLocalFile("main.qml"));
    // view.show();

    QQuickItem *item = engine.rootObjects().at(0)->findChild<QQuickItem*>("myWindow");
    if (item)
        item->setProperty("width", QWidth(Qt::560));
    
    return app.exec();
    

    }
    @

    Could you help.

    Thank you


  • Moderators

    Hi,

    There are multiple problems here,

    1. "Window":http://qt-project.org/doc/qt-5/qml-qtquick-window-window.html doesn't instantiate QQuickItem but QQuickWindow. So you can't cast it to QQuickItem.
    2. There's nothing like QWidth or Qt::560, just plainly use the number e.g 560
    3. Window is a top level, so you can get it directly instead of finding.

    To sum up, try this,
    @
    QQuickWindow *item = (QQuickWindow *)engine.rootObjects().first();
    if (item)
    item->setProperty("width", 1360);
    @



  • Hi,
    I tried to change QML Window to fullscreen using visibility via c++
    @
    QQuickWindow *W = (QQuickWindow *)engine.rootObjects().first();
    if (W)
    W->setProperty("visibility", "Fullscreen");
    @
    tried
    @
    W->FullScreen;
    @
    tried
    @
    W->visibility() = "Fullscreen";
    @

    none of them are working. Help please?



  • Hi,
    I got it working, it the spelling of the Fullscreen should be "FullScreen"
    @
    QQuickWindow *W = (QQuickWindow *)engine.rootObjects().first();
    if (W)
    W->setProperty("visibility", "FullScreen");
    @


  • Moderators

    For FullScreen you can use directly,

    @
    if (W)
    W->showFullScreen();
    @



  • Hi,
    I have objects window, text and mouse area to text in qml document and I want to implement in c++: when text area is clicked: if the window is not on fullscreen, it should become fullscreen and the text in the text are should change to "Window is Fullscreen" with a animated color chage to "white". Next time it clicked it should come out of fullscreen and chanege the text and color. Also console.log equivalent output of the this event along with screen resolution should be output from c++ (not via qml).

    main.qml :
    @
    import QtQuick 2.2
    import QtQuick.Window 2.1

    Window {
    id: window1
    visible: true
    width: 360
    height: 360
    color: "red"
    title: "MyWindow"

    Text {
        objectName: "myText"
        text: qsTr("Hello World!<br><i>I'm </i><b>not Fullscreen<i> Now</i></b>")
        font.bold: true
        horizontalAlignment: Text.AlignHCenter
        font.family: "Times New Roman"
        font.pointSize: 18
        anchors.centerIn: parent
        color: "steelblue"
    
        MouseArea {
            anchors.fill: parent
        }
    }
    

    }
    @

    main.cpp
    @
    #include <QGuiApplication>
    #include <QQmlApplicationEngine>
    #include <QtQuick/QQuickItem>
    #include <QtQuick/QQuickWindow>

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

    QQmlApplicationEngine engine;
    engine.load(QUrl(QStringLiteral("qrc:///main.qml")));
    

    //here I need function for
    //1 clicke event
    //check fullscreen value
    //2 text changing
    //3 animation
    //4 console.log output of Screen resolution and action
    //5 finaly Window : showMaximized(); or showFullScreen();

    return app.exec();
    

    }
    @

    Could you help me with this please?
    Thank you


  • Moderators

    You can,

    1. Create a QObject based class
    2. Create a SLOT in it
    3. Pass QQuickWindow pointer (which we obtained as shown above) to it
    4. Create a signal in your QML
    5. Do the connections
    6. In the created class cast the QObject pointer to QQuickWindow using qobject_cast
    7. Use this pointer to access/modify the properties of the QML window in the SLOT when the SIGNAL is fired from QML


  • Hi,
    I created QObject: called iobject.h
    @
    #ifndef IOBJECT_H
    #define IOBJECT_H

    #include <QObject>

    class iObject : public QObject
    {
    Q_OBJECT
    Q_PROPERTY(QString name READ name WRITE setName)
    public:
    explicit iObject(QObject *parent = 0);

    QString name() const;
    
        Q_INVOKABLE void nameChang();
    

    signals:
    void nameChanged(int newValue);

    public slots:
    void setName(const QString &name);

    private:
    QString m_name;
    };

    #endif // IOBJECT_H
    @

    iobject.cpp
    @
    #include "iobject.h"

    iObject::iObject(QObject *parent) :
    QObject(parent)
    {
    }
    QString iObject::name() const
    {
    return m_name;
    }
    iObject::setName(const QString &name){
    if(name != m_name)
    m_name = name;
    emit nameChanged(name);
    }
    @

    main.cpp
    @
    #include "iobject.h"
    #include <QGuiApplication>
    #include <QQmlApplicationEngine>

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

    qmlRegisterType<iObject>("myObject", 1, 0, "iObject");
    
    QQmlApplicationEngine engine;
    engine.load(QUrl(QStringLiteral("qrc:///main.qml")));
    
    return app.exec();
    

    }
    @

    main.qml
    @
    import QtQuick 2.2
    import QtQuick.Window 2.1
    import myObject 1.0

    Window {
    visible: true
    width: 360
    height: 360
    title: iObject.name

    MouseArea {
        anchors.fill: parent
        onClicked: {
            Qt.quit();
        }
    }
    
    Text {
        text: qsTr("Hello World!<br><i>I'm </i><b>not Fullscreen<i> Now</i></b>")
        horizontalAlignment: Text.AlignHCenter
        font.family: "Times New Roman"
        font.pointSize: 18
        anchors.centerIn: parent
        color: "steelblue"
    
        MouseArea {
            anchors.fill: parent
        }
    }
    

    }
    @

    At this point, It did not work. erros on main.cpp 'qmlRegisterType'
    what am I doing wrong?


  • Moderators

    Just create a the class and pass the QQuickWindow pointer. No need use qmlRegisterType.
    Something like this,
    main.cpp
    @
    QQmlApplicationEngine engine;
    engine.load(QUrl(QStringLiteral("qrc:///main.qml")));
    QQuickWindow *W = (QQuickWindow *)engine.rootObjects().first();
    iObject a(W);
    QObject::connect(engine.rootObjects().first(),SIGNAL(callCpp()),&a,SLOT(onCallCpp()));
    @

    No need of custom properties in the class.
    Remember to cast back QObject back to QQuickWindow in iObject and then you can modify QQuickWindow properties as shown earlier.



  • I'm getting error "main.obj:-1: error: LNK2019: unresolved external symbol "public: __cdecl iObject::iObject(class QObject *)" (??0iObject@@QEAA@PEAVQObject@@@Z) referenced in function main"


  • Moderators

    Have you included its corresponding header file (probably iobject.h) in main.cpp ?



  • Yes
    main.cpp
    @
    #include "iobject.h"
    #include <QGuiApplication>
    #include <QQmlApplicationEngine>
    #include <QtQuick/QQuickWindow>

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

    QQmlApplicationEngine engine;
    engine.load(QUrl(QStringLiteral("qrc:///main.qml")));
    
    QQuickWindow *W = (QQuickWindow *)engine.rootObjects().first();
    iObject a(W);
    QObject::connect(engine.rootObjects().first(),SIGNAL(callCpp()),&a,SLOT(onCallCpp()));
    
    return app.exec();
    

    }
    @


  • Moderators

    Can you post the new iobject.cpp and .h file ?



  • iobject.h
    @
    #ifndef IOBJECT_H
    #define IOBJECT_H

    #include <QObject>

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

    signals:

    public slots:

    };

    #endif // IOBJECT_H
    @

    iobject.cpp
    @
    #include "iobject.h"

    iObject::iObject(QObject *parent) :
    QObject(parent)
    {
    }
    @


  • Moderators

    Everything seems to be fine to me.
    Try to clean, run qmake and build the project again.
    Apart from that declare the SLOT onCallCpp in iObject class.



  • Still same error, the
    @
    iObject a(W);
    @

    Creates following errors:
    "main.obj:-1: error: LNK2019: unresolved external symbol "public: _cdecl iObject::iObject(class QObject *)" (??0iObject@@QEAA@PEAVQObject@@@Z) referenced in function main""
    And
    "debug\HEVC
    .exe:-1: error: LNK1120: 1 unresolved externals
    "
    I tried cleaning and rebuild it and created a new project and tried it, same error

    All the code in new project follows:
    main.qml
    @
    import QtQuick 2.2
    import QtQuick.Window 2.1

    Window {
    visible: true
    width: 360
    height: 360

    MouseArea {
        anchors.fill: parent
        onClicked: {
            Qt.quit();
        }
    }
    
    Text {
        text: qsTr("Hello World")
        anchors.centerIn: parent
    }
    

    }
    @

    main.cpp
    @
    #include <QGuiApplication>
    #include <QQmlApplicationEngine>
    #include <QtQuick/QQuickWindow>
    #include "iobject.h"

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

    QQmlApplicationEngine engine;
    engine.load(QUrl(QStringLiteral("qrc:///main.qml")));
    QQuickWindow *W = (QQuickWindow *)engine.rootObjects().first();
        iObject a(W);
        QObject::connect(engine.rootObjects().first(),SIGNAL(callCpp()),&a,SLOT(onCallCpp()));
    
    return app.exec();
    

    }
    @

    iobject.h
    @
    #ifndef IOBJECT_H
    #define IOBJECT_H

    #include <QObject>

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

    signals:

    public slots:
    void onCallCpp();

    };

    #endif // IOBJECT_H
    @

    iobject.cpp
    @
    #include "iobject.h"

    iObject::iObject(QObject *parent) :
    QObject(parent)
    {
    }
    @

    I went though several examples and foud ""Animated Tiles":http://qt-project.org/doc/qt-4.8/animation-animatedtiles.html" example. This one uses different library like QtWidgets, QtCore/qstate.h and main.moc. here not QML. This is an old version qt-4.8 as well.

    I'm now wondering, that am I using the right QT tool for my project, which uses 4K video playing, editing, analytics tools with the support of OpenGL to be implimented using Cpp.

    I chose QML, because of built in OpenGL, and Cpp and JS support. Now Qt Widgets, Qt Quick Application, Qt Quick UI and old version, new version are confusion to me.

    It would be great, If you could please help me with these.

    Thank you


  • Moderators

    Have the files iobject.cpp and .h included in the project structure from Qt Creator?
    I have created a small test app based upon the example.
    Here's the "Link":https://docs.google.com/file/d/0B3rkZH6q1E7ocTdnOFQwNVBDM2c/edit?pli=1
    Please check if it works.

    Also Animated Tiles is a completely different example. It doesnot use Qt Quick.
    Please do not go over to Qt 4.8 or less. It's lot different from Qt 5.3

    You can refer Qt 5 docs for more information.
    Following are good links
    "http://qt-project.org/doc/qt-5/qtqml-index.html":http://qt-project.org/doc/qt-5/qtqml-index.html
    "http://qt-project.org/doc/qt-5/qtqml-cppintegration-topic.html":http://qt-project.org/doc/qt-5/qtqml-cppintegration-topic.html

    Let me know if the Sample Application works.



  • Thanks, your sample works. I got main working after deleting the build folder. Some reason cleaning didn't work, even when I copy and pasted your code.

    I was thinking like this, creating object and connecting it to QML types:
    iObject A
    A.screenSize (connect to Window : visibility)
    A.textApped (connect to Text : text)
    A.animantionStart (connect to Animation : start)

    Then changing it in cpp and then emitting signal or even creating, changing & destroying QML types in cpp. Like JavaScript in HTML application.

    If you can provide this type of sample works on would be very grateful.

    *Note: I learn using simple working example rather than reading text with pieces of code, because of my DYSLEXIA.


  • Moderators

    You can also use "QMetaObject::invokeMethod":http://qt-project.org/doc/qt-5/qmetaobject.html#invokeMethod to call a javascript function inside a QML and in that function you can do the operations.
    For eg.
    Test.qml
    @
    Window {
    visible: true
    width: 400
    height: 400

    function changeColor() {
        rect.color="blue"
    }
    
    Rectangle {
        id: rect
        anchors.fill: parent
        color: "red"
    }
    

    }
    @

    and to call it from main.cpp

    @
    QMetaObject::invokeMethod(engine.rootObjects().first(), "changeColor");
    @

    You can also keep these calls in separate cpp methods of the iObject class.



  • Say I have following main.qml
    @
    Window {
    visible: true
    width: 400
    height: 400

    Rectangle {
    id: rect
    anchors.fill: parent
    color: "red"
    
        Text {
        id: mytext
        text: qsTr("<b>Hello World!</b>")
        color: "blue"
        }
        MouseArea {
        anchors.fill: parent
        onClicked: {
            Qt.quit();}
        }
    }
    

    }
    @

    How do I use this "const char * QMetaObject::className() const" to get Text object name.

    How do I use "QMetaProperty::write(QObject * object, const QVariant & value) const" to change text value

    Thank you


  • Moderators

    bq. How do I use this “const char * QMetaObject::className() const” to get Text object name.

    As shown earlier you can find the exact Item using findChild and then use "metaObject()":http://qt-project.org/doc/qt-5/qobject.html#metaObject to get it's corresponding metaObject and then use it to get "className()":http://qt-project.org/doc/qt-5/qmetaobject.html#className;

    bq. How do I use “QMetaProperty::write(QObject * object, const QVariant & value) const” to change text value

    This kind of bit tedious, you have to first findChild then get it's metaObject and then iterate over it to find the exact index of the "property":http://qt-project.org/doc/qt-5/qmetaobject.html#property which you want to set and then change the property for that particular index using "write":http://qt-project.org/doc/qt-5/qmetaproperty.html#write

    Alternatively you use more user friendly "setProperty":http://qt-project.org/doc/qt-5/qobject.html#setProperty to directly set it instead of first iterating,finding and then changing.



  • how do I fix the following issue
    @
    MouseArea {
    id: oneClick
    anchors.fill: parent
    onClicked: opacity_1.running = true;
    }
    MouseArea {
    id: twoClick
    anchors.fill: parent
    onDoubleClicked: window1.callCpp()
    }
    @

    Thank you



  • How do I use access mouse right click? I tried the following without success:
    @
    onClicked: {if(mouse.button == Qt.RightButton){if(menu.opacity == 0){opacity_1.running = true;}}}
    @
    and
    @
    onPressed: {if(mouse.button == Qt.RightButton){if(menu.opacity == 0){opacity_1.running = true;}}}
    @



  • Could you tell me how to set-up Git in QtCreator Option > Version Control: Configuration, Miscellaneous, Gitk and Repository Browser ?

    Thank you



  • What am I doing wrong here :
    I have included <QScreen>
    @
    QScreen *screen;
    qDebug() << "Information for screen:" << screen->name();
    qDebug() << " Available geometry:" << screen->availableGeometry().x() << screen->availableGeometry().y() << screen->availableGeometry().width() << "x" << screen->availableGeometry().height();
    qDebug() << " Available size:" << screen->availableSize().width() << "x" << screen->availableSize().height();
    qDebug() << " Available virtual geometry:" << screen->availableVirtualGeometry().x() << screen->availableVirtualGeometry().y() << screen->availableVirtualGeometry().width() << "x" << screen->availableVirtualGeometry().height();
    qDebug() << " Available virtual size:" << screen->availableVirtualSize().width() << "x" << screen->availableVirtualSize().height();
    qDebug() << " Depth:" << screen->depth() << "bits";
    qDebug() << " Geometry:" << screen->geometry().x() << screen->geometry().y() << screen->geometry().width() << "x" << screen->geometry().height();
    qDebug() << " Logical DPI:" << screen->logicalDotsPerInch();
    qDebug() << " Logical DPI X:" << screen->logicalDotsPerInchX();
    qDebug() << " Logical DPI Y:" << screen->logicalDotsPerInchY();
    @
    Help please


  • Moderators

    [quote author="Vignes" date="1406045743"]how do I fix the following issue
    @
    MouseArea {
    id: oneClick
    anchors.fill: parent
    onClicked: opacity_1.running = true;
    }
    MouseArea {
    id: twoClick
    anchors.fill: parent
    onDoubleClicked: window1.callCpp()
    }
    @

    Thank you[/quote]

    What is the problem ? You need to elaborate.

    bq. onClicked: {if(mouse.button == Qt.RightButton){if(menu.opacity == 0){opacity_1.running = true;}}}

    set acceptedButtons: Qt.LeftButton | Qt.RightButton for MouseArea

    bq.
    QScreen *screen;
    qDebug() << "Information for screen:" << screen->name();
    .
    .
    .

    @
    QScreen *screen = QGuiApplication::primaryScreen();
    qDebug() << screen->availableGeometry();
    @


  • Moderators

    [quote author="Vignes" date="1406047246"]Could you tell me how to set-up Git in QtCreator Option > Version Control: Configuration, Miscellaneous, Gitk and Repository Browser ?

    Thank you[/quote]

    May be "this":https://qt-project.org/doc/qtcreator-2.8/creator-version-control.html#using-version-control-systems and a youtube tutorial "here":http://www.youtube.com/watch?v=3Dr05-bFMbw help you. I have never used git from Qt Creator, so can't help you that much on it. I normally do it through command line.



  • I tried to add two mouse area function on main window: double clicked and a clicked like below:
    @
    MouseArea {
    id: oneClick
    anchors.fill: parent
    onClicked: opacity_1.running = true;
    }
    MouseArea {
    id: twoClick
    anchors.fill: parent
    onDoubleClicked: window1.callCpp()
    }
    @

    • Here only the last muse area function works. So I tried merging two and it works :
      @
      MouseArea {
      id: windowClicks
      anchors.fill: parent
      onClicked: if(menu.opacity == 0){opacity_1.running = true;}{opacity_1.running = true;}}}
      onDoubleClicked: window1.callCpp()
      }
      @

    I wanted a mouse area function for right mouse clicked, for this I tried the bellow:
    @
    onPressed: {if(mouse.button == Qt.RightButton){if(menu.opacity == 0){opacity_1.running = true;}}}
    @

    • Here it did not work, but if I change the "Qt.RightButton" to "Qt.LeftButton" it works

    Is there any other way to add multiple mouse event to one area?

    How do I use the Right click to run a function?

    Is it possible to add or modify or remove mouse event in cpp?

    Thanks


  • Moderators

    bq. Is there any other way to add multiple mouse event to one area?

    Yes. You just did it by adding onClicked and onDoubleClicked event handler to mousearea

    bq. How do I use the Right click to run a function?

    As I said earlier you need to set acceptedButtons
    @
    MouseArea {
    id: twoClick
    anchors.fill: parent
    acceptedButtons: Qt.LeftButton | Qt.RightButton
    onClicked: {
    if(mouse.button==Qt.RightButton) {
    console.log("Right Click")
    }
    }
    }
    @

    bq. Is it possible to add or modify or remove mouse event in cpp?

    You can set enabled property from C++ by finding child as shown earlier.



  • I want to open button that only opens "png" image file or "yuv or bin" video file and display it on fixed size stage (600 x 400).

    How do I add open function to a QML item?

    What library should I use?

    Is canvas best for fast video processing or image processing (e.g. splitting, applying filters .. ) ?

    Thank you


  • Moderators

    bq. How do I add open function to a QML item?

    You can use "FileDialog":http://qt-project.org/doc/qt-5/qml-qtquick-dialogs-filedialog.html to allow user to select a file and in return you get the file path. You can set "nameFilters":http://qt-project.org/doc/qt-5/qml-qtquick-dialogs-filedialog.html#nameFilters-prop to filter what kind of file you want to show.
    Then after getting the file path of for eg. image you can set it to "Image":http://qt-project.org/doc/qt-5/qml-qtquick-image.html element which will display the image.

    bq. Is canvas best for fast video processing or image processing (e.g. splitting, applying filters .. ) ?

    I have not used canvas so can't comment on that. May be someone with greater knowledge would.
    You can check "qmlvideofx":http://qt-project.org/doc/qt-5/qtmultimedia-video-qmlvideofx-example.html if it might help you in applying effects to videos.



  • One of the reason I chose Qt QML is "qmlvideofx" player example, But it uses "QtMultimedia 5.0" and it doesn't support "yuv" format. In terms of understanding the QML and Cpp, I'm way way off.

    @
    FileDialog {
    id: fileDialog
    title: "Please choose a file"
    nameFilters: ["Image File (*.png *.jpg *.bmp)"]
    onAccepted: {
    console.log("You chose: " + fileDialog.fileUrls)
    }
    onRejected: {
    console.log("Canceled")
    }
    }

    Rectangle {
        id: button
        width: 100
        height: 50
        color: "blue"
        anchors.right: parent.right
        anchors.top: parent.top
    
    
        MouseArea {
            anchors.fill: parent
            onClicked: {
                fileDialog.visible = true;
            }
        }
    }
    
    Image {
        id: imageViewer
        source: fileDialog.fileUrls
        width: parent.width
        height: parent.height/0.8
        anchors.bottom: parent.bottom
        anchors.left: parent.left
    }
    

    @

    How do I pass the file Urls to image source, because above code didn't work?

    Thanks


  • Moderators

    bq. In terms of understanding the QML and Cpp, I’m way way off

    I'd suggest you to read the concepts of QML and C++ integration instead of just directly going for examples.

    Going to the code, Image element just displays a single image at a time and hence it won't take URL's but just a single URL.
    So,
    @
    FileDialog {
    id: fileDialog
    title: "Please choose a file"
    nameFilters: ["Image File (*.png *.jpg *.bmp)"]
    onAccepted: {
    console.log("You chose: " + fileDialog.fileUrls)
    imageViewer.source = fileDialog.fileUrls[0]
    }
    onRejected: {
    console.log("Canceled")
    }
    }

    Image {
    id: imageViewer
    width: parent.width
    height: parent.height/0.8
    anchors.bottom: parent.bottom
    anchors.left: parent.left
    }
    @



  • I red "Integrating QML and C++" in the start and I red it again. Now it made more sense, because I have done few example and as I red I could connect them. However, I still need to do more to understand the where and what fits e.g. "Separate the user interface code from the application logic code, by implementing the former with QML and JavaScript within QML documents, and the latter with C++". With your help, I'll understand it.

    Now I have two issues in the following code
    @
    //Button.qml
    import QtQuick 2.2

    Rectangle {
    id: btn
    width: 100
    height: 62
    border.width: 2
    Text{
    id: btnLabel
    anchors.centerIn: parent
    text: btn.label
    }

    property string label: "Button Label"
    property color newColor: "lightblue"
    property color onHoverColor: "gold"
    property color borderColor: "black"
    property string gradColor : newColor
    property bool gradOn : false
    
    signal buttonClick()
    onButtonClick: {
        console.log(btnLabel.text + " clicked" )
    }
    
    MouseArea {
        id: btnMouseArea
        anchors.fill: parent
        onClicked: buttonClick()
        hoverEnabled: true
        onEntered: {parent.border.color = onHoverColor; gradColor = Qt.darker(gradColor, 1.1)}
        onExited:  {parent.border.color = borderColor; gradColor = Qt.darker(gradColor, 0.9)}
    

    // onPressed: {
    // console.log("pressed", pressed)
    // gradColor = Qt.darker(gradColor, 1.5)
    // }
    // onReleased: {
    //// gradColor = Qt.darker(gradColor, 2/3)
    // gradColor = newColor
    // }
    }
    //determines the color of the button by using the conditional operator
    color: btnMouseArea.pressed ? Qt.darker(newColor, 1.5) : newColor

    gradColor: btnMouseArea.pressed ? Qt.darker(newColor, 1.5) : newColor
    
    gradient: Gradient {
        GradientStop { position: 0.0; color: gradColor }
        GradientStop { position: 0.17; color: "#6A6D6A" }
        GradientStop { position: 0.77; color: gradColor }
        GradientStop { position: 1.0; color: "#6A6D6A" }
    }
    

    }
    @

    This code: "color: btnMouseArea.pressed ? Qt.darker(newColor, 1.5) : newColor" works but This code: "gradColor: btnMouseArea.pressed ? Qt.darker(newColor, 1.5) : newColor" doesn't works. Why?

    I was trying to put a if statement to around gradient: to switch on and off using "gradOn" custom property. It is not allowed. Any other way of doing this?

    Thank you


Log in to reply
 

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