I am building a C++ application based on QML.
To make it simple :
In my main QML file, I have a button (Rectangle) calling a JavaScript function (defined in an external JS file) when clicked:
// My JS file linked to the main QML window
[...]
function actionOnButtonClicked()
{
var x = 0;
var y = 0;
for(var i = 0; i < 3; i++)
{
createObject(x, y);
x = x + 10;
y = y + 10;
}
}
As you can see, in this function, I call n (= 3 here) times another JS function to dynamically create several QML objects to add to the scene:
function createObject(xPosition, yPosition)
{
ponent = Qt.createComponent("Symbol.qml");
ponent.createObject(windowApp, {"x": xPosition, "y": yPosition});
}
This is working fine. But the created object (Symbol) appears in the windowApp with a translation animation (around 1sec.), and I would like to wait for the first object's animation to plete before creating the second one...
As we cannot use setTimeOut() JavaScript function in QML, I wonder how I could achieve this. I do not see how I could make use of the QML Timer object or even PauseAnimation...
Does somebody know how to add a delay between 2 QML JavaScript operations ?
I am building a C++ application based on QML.
To make it simple :
In my main QML file, I have a button (Rectangle) calling a JavaScript function (defined in an external JS file) when clicked:
// My JS file linked to the main QML window
[...]
function actionOnButtonClicked()
{
var x = 0;
var y = 0;
for(var i = 0; i < 3; i++)
{
createObject(x, y);
x = x + 10;
y = y + 10;
}
}
As you can see, in this function, I call n (= 3 here) times another JS function to dynamically create several QML objects to add to the scene:
function createObject(xPosition, yPosition)
{
ponent = Qt.createComponent("Symbol.qml");
ponent.createObject(windowApp, {"x": xPosition, "y": yPosition});
}
This is working fine. But the created object (Symbol) appears in the windowApp with a translation animation (around 1sec.), and I would like to wait for the first object's animation to plete before creating the second one...
As we cannot use setTimeOut() JavaScript function in QML, I wonder how I could achieve this. I do not see how I could make use of the QML Timer object or even PauseAnimation...
Does somebody know how to add a delay between 2 QML JavaScript operations ?
Share Improve this question edited Jul 11, 2012 at 13:06 Benoit asked Jul 11, 2012 at 12:44 BenoitBenoit 6801 gold badge6 silver badges17 bronze badges3 Answers
Reset to default 3I think this QML Timer type can help you achieve what you want.
import QtQuick 2.0
Item {
Timer {
interval: 500; running: true; repeat: true
onTriggered: time.text = Date().toString()
}
Text { id: time }
}
You could probably do it so that you only create one "Symbol" from your button action and trigger a new symbol on some event in the new object. Perhaps the animation ending triggers an event that you could use ?
Its been a while, I have missed QML. But let me try to suggest a solution. I guess this might work, if you are calling that translationAnimation.running = true
in Component.onComlpeted
event. I have posted a stupid answer before. Now I replace it with a lazy/ugly way to do this. This is probably not the right way to do it, though this code may help your use case.
CreateObject.js
.pragma library
var objects = null;
var objectCount = 0;
var i = 0;
var mainWin;
var x = 0;
var y = 0;
function calledOnbuttonAction(parentWindow)
{
if(objects === null)
{
mainWin = parentWindow;
x = 0;
y = 0;
objects = new Array();
createObject(x,y);
}
else
{
if(x <= mainWin.width)
x = x + 28;
else
{
x = 0;
if(y <= mainWin.height)
y = y + 28;
else
{
console.debug("Exceeded window area!")
return;
}
}
createObject(x,y);
}
}
function createObject(xPos, yPos)
{
i++;
var ponent = Qt.createComponent("Object.qml");
objects[objectCount++] = ponent.createObject(mainWin, {"x": xPos, "y": yPos});
}
main.qml
import QtQuick 1.1
import "CreateObjects.js" as CreateObject
Rectangle {
id: mainWindow
width: 360
height: 360
Text {
text: qsTr("Click inside window")
anchors.centerIn: parent
font.pixelSize: 18
}
MouseArea {
anchors.fill: parent
onClicked: {
CreateObject.calledOnbuttonAction(mainWindow); //passing the parent window object
}
}
}
Object.qml //Symbol in your case
//The Symbol
import QtQuick 1.1
import "CreateObjects.js" as CreateObject
Rectangle {
id: obj
width: 25
height: 25
gradient: Gradient {
GradientStop {
position: 0
color: "#d11b1b"
}
GradientStop {
position: 1
color: "#ea4848"
}
}
property alias animationStatus: pletedAnimation
NumberAnimation {
id: pletedAnimation;
target: obj;
property: "opacity";
duration: 800;
from: 0;
to: 1.0;
onRunningChanged: {
if(!running && CreateObject.i < 900) // Decrease or increase the value according to the number of objects you want to create
{
CreateObject.calledOnbuttonAction();
}
}
}
Component.onCompleted: pletedAnimation.running = true;
}