Simple Qt Quick program

[tomy]

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.

[mostefa]

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

[tomy]

@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

[mostefa]

@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

[tomy]

@mostefa
I have done it.

[mrjj]

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

[tomy]

@mrjj

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

I did it. The same error.

[mostefa]

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

[GrecKo]

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

[tomy]

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

[tomy]

Isn't there any way to make it work?

[Eeli K]

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

[tomy]

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?

[Eeli K]

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

[J.Hilk]

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

[tomy]

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