Simple Qt Quick program



  • Please take a look at this section. I created a Qt Quick Application (without ui.forum.qml), added two .cpp files named Transformation.qml and ClickableImage.qml. And populate them this way: (But how to use them in main.qml?)

    // ClickableImage.qml
    // Simple image which can be clicked
    
    import QtQuick 2.6
    
    Image {
        id: root
        signal clicked
    
        MouseArea
        {
            anchors.fill: parent
            onClicked: root.clicked
        }
    }
    
    // transformation.qml
    
    
    import QtQuick 2.6
    
    Item {
        // set width based on given background
        width: bg.width
        height: bg.height
    
        Image {  // nice background image
            id: bg
            source: "background.png"
        }
    
        MouseArea {
            id: backgroundClicker
         // needs to be before the images as order matters
         // otherwise this mousearea would be before the other elements
         // and consume the mouse events
            anchors.fill: parent
            onClicked: {
                  // reset our little scene
    
                circle.x = 84;
                box.rotation = 0
                triangle.rotation = 0
                triangle.scale = 1.0
            }
        }
    
        ClickableImage {
            id: circle
            x: 84; y: 68
            source: "/circle_blue.png"
            antialiasing: true
            onClicked: // increase the x-position on clicked
                x += 20
        }
    
        ClickableImage {
            id: box
            x: 164; y: 68
            source: "/box_green.png"
            antialiasing: true
            onClicked:  // increase the rotation on click
             rotation += 15
        }
    
        ClickableImage {
            id: triangle
            x: 248; y: 68
            source: "/triangle_red.png"
            antialiasing: true
            onClicked: { // several transformations
             rotation += 15
                scale += 0.05
        }
      }
    
        function _test_transformed() {
                circle.x += 20
                box.rotation = 15
                triangle.scale = 1.2
                triangle.rotation = -15
            }
    
        function _test_overlap() {
                circle.x += 40
                box.rotation = 15
                triangle.scale = 2.0
                triangle.rotation = 45
            }
    
    }
    

    main.qml:

    import QtQuick 2.6
    import QtQuick.Window 2.2
    
    Window {
        visible: true
        width: 640
        height: 480
        title: qsTr("Transformation")
    
    }
    

    Then added those three .png images into the folder of the project and also in qml.qrc.
    Now the program shows nothing on running. I know it's because we haven't used the qml files in main.qml. But how to do that? It hasn't been pointed to in that online book.



  • Hi @tomy

    On the top of your Transformation.qml

    you have to add

    import "ClickableImage.qml"
    

    And on the top of your main.qml, you have to add

    import "Transformation.qml"

    and then add the Transform component, your code should look to something like this:

    main.qml:

    import QtQuick 2.6
    import QtQuick.Window 2.2
    
    import "Transformation.qml"
    
    Window {
        visible: true
        width: 640
        height: 480
        title: qsTr("Transformation")
    
       Transformation
    {
           id: transformation
    .
    .
    .
    }
    }
    


  • @mostefa
    Thanks for the reply.

    import QtQuick 2.6
    import QtQuick.Window 2.2
    
    import "Transformation.qml"
    
    Window {
        visible: true
        width: 640
        height: 480
        title: qsTr("Transformation")
    
        Transformation {
            id: transitions
        }
    
    }
    
    

    I get this error:
    qrc:/main.qml:4 "Transformation.qml": no such directory



  • @tomy said in Simple Qt Quick program:

    @mostefa
    Thanks for the reply.

    import QtQuick 2.6
    import QtQuick.Window 2.2
    
    import "Transformation.qml"
    
    Window {
        visible: true
        width: 640
        height: 480
        title: qsTr("Transformation")
    
        Transformation {
            id: transitions
        }
    
    }
    
    

    I get this error:
    qrc:/main.qml:4 "Transformation.qml": no such directory

    You have to change the name of your qml file from

    transformation.qml to Transformation.qml

    In qml custom components , the first letter must be in uppercase

    http://doc.qt.io/qt-5/qtqml-documents-definetypes.html#defining-an-object-type-with-a-qml-file



  • @mostefa
    I have done it.

    0_1505637566779_Capture.PNG


  • Qt Champions 2016

    so now it works?
    make sure u really rebuild all, include the resource file.



  • @mrjj

    make sure u really rebuild all, include the resource file.

    I did it. The same error.



  • @tomy said in Simple Qt Quick program:

    @mrjj

    make sure u really rebuild all, include the resource file.

    I did it. The same error.

    What if you delete completely the build repository and then build again?



  • @mostefa said in Simple Qt Quick program:

    On the top of your Transformation.qml

    you have to add import "ClickableImage.qml"

    And on the top of your main.qml, you have to add import "Transformation.qml"

    No you don't.
    Just name them with an uppercase first letter and then you can just use them like so Transformation {} if they are in the same folder as the qml file you are trying to use them (in your case main.qml).



  • Thank you, it shows the images on the window but no action is done by clicking them! How to fix it? It seems it's because I haven't used Transformation.qml well in main.qml.

    Here is main.qml:

    import QtQuick 2.6
    import QtQuick.Window 2.2
    
    Window {
        visible: true
        width: 800
        height: 600
        title: qsTr("Transformation")
    
        Transformation {
            id: transformation
        }
    }
    
    

    How to do that and what are the raison d'ĂȘtre of those two functions and how to use them? Thanks



  • Isn't there any way to make it work?



  • @tomy I created a similar project and it works for me. Try copying the code once again into your files to make sure they are identical to the example code. You can also try adding some box_green.png file to assets, but other parts work without it for me.

    The functions are apparently for testing purposes :) You can use them for example in this way:

    import QtQuick 2.6
    import QtQuick.Window 2.2
    import QtQuick.Controls 2.0
    Window {
        visible: true
        width: 640
        height: 480
        Column{
            spacing: 10
            Button {
                onClicked: transformation._test_overlap()
            }
            Button {
                onClicked: transformation._test_transformed()
            }
    
            Transformation {
                id: transformation
            }
        }
    }
    


  • Thank you for the answer.
    I created another project that has this main.cpp:

    #include <QGuiApplication>
    #include <QQmlApplicationEngine>
    
    int main(int argc, char *argv[])
    {
        QGuiApplication app(argc, argv);
    
        QQmlApplicationEngine engine;
        engine.load(QUrl(QStringLiteral("qrc:/main.qml")));
        if (engine.rootObjects().isEmpty())
            return -1;
    
        return app.exec();
    }
    

    By right clicking on the / folder below the qml.qrc in Projects view of Qt Creator and choosing Add New, I added a new C++ source file named ClickableImage.qml. It was added by its first letter in small so by renaming I capitalised it to big C and pasted this:

    import QtQuick 2.8
    Image {
        id: root
        signal clicked
    
        MouseArea
        {
            anchors.fill: parent
            onClicked: root.clicked
        }
    }
    

    The same way for adding Transformation.qml with the code:

    import QtQuick 2.8
    Item {
        width: bg.width
        height: bg.height
    
        Image {
            id: bg
            source: "/background.png"
        }
    
        MouseArea {
            id: backgroundClicker
            anchors.fill: parent
            onClicked: {
                circle.x = 84
                box.rotation = 0
                triangle.rotation = 0
                triangle.scale = 1.0
            }
        }
    
        ClickableImage {
            id: circle
            x: 84; y: 68
            source: "/circle_blue.png"
            antialiasing: true
            onClicked: x += 20
        }
    
        ClickableImage {
            id: box
            x: 164; y: 68
            source: "/box_green.png"
            antialiasing: true
            onClicked: rotation += 15
        }
    
        ClickableImage {
            id: triangle
            x: 248; y: 68
            source: "/triangle_red.png"
            antialiasing: true
            onClicked: {
                rotation += 15
                scale += 0.05
            }
        }
    
        function _test_transformed() {
            circle.x += 20
            box.rotation = 15
            triangle.scale = 1.2
            triangle.rotation = -15
        }
    
        function _test_overlap() {
            circle.x += 40
            box.rotation = 15
            triangle.scale = 2.0
            triangle.rotation = 45
        }
    
    }
    

    Finally added four images with the prefix / to the resource.

    And since I'd capitalised the file names I did: clean all, run qmake, rebuild all. And ran the program.

    The images are shown with no reaction on clicking them. I'm rather astonished what the problem is that it works for you but not me!

    Please tell me what part do I have done wrong? And is this process exactly what you too have done?



  • @tomy You should add New File -> Qt -> QML file, not c++ file. But it shouldn't matter, I think, because the objects are visible when you run it. It sounds weird that graphics is well but not mouse clicks. But try again with QML file because it may mess up the project file. You can also show the contents of your .pro file.



  • @tomy you need to add brackets to function calls:

    //ClickableImage
    Image {
        id: root
        signal clicked()//added brackets
    
        MouseArea
        {
            anchors.fill: parent
            onClicked:{
                console.log("Clicked")//Added Console output
                root.clicked()//added brackets
            }
        }
    }
    


  • @J.Hilk
    Thank you. It solved the issue.


Log in to reply
 

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