Unsolved 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 directoryYou 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. -
so now it works?
make sure u really rebuild all, include the resource file. -
-
@tomy said in Simple Qt Quick program:
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 soTransformation {}
if they are in the same folder as the qml file you are trying to use them (in your casemain.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.