Adding transitions for custom Item - c++

Question

I have a simple QML code like this:
GridView {
id: viewId
anchors.fill: parent
delegate: delegateId
cellWidth: 100
cellHeight: 100
}
Component {
id: delegateId
Rectangle {
id: rectId
width: 100
height: 100
MyCystomItem {
id: imageId
anchors.centerIn: parent
height: parent.height
width: parent.width
myCustomProperty: myCustomRole
}
}
}
In delegate I use MyCustomItem which is defined on c++ side of my project.
When MyCustomItem::paint() is called for the first time I paint some 'wait' indicator,
and using value passed to myCustomProperty I begin some calculations on a thread.
When calculations are done, I call MyCustomItem::update() and I paint result of calculations.
I'd like to experiment with QtQuick's transitions to make the grid more alive so I though
about adding some transition between 'wait' and 'final result` states. It is not important which one,
the problem is I do not know what would be the right way of doing this.
I'd like to avoid any timer based attempts in my c++ code. I'd like to place transitions
directly in qml file so I can easliy experiment with various effects.
Next step would be to add transitions to item when 'wait' state is active.
What would be the most qml-like approach for this?

Answer 1

It's not entirely clear what exactly you want to animate. But I'll try to give some idea's
Option 1
You could expose the internal state of the custom item, with properties like waiting (or better working) and done. In QML you can bind to these properties in State objects and Transition objects:
MyCystomItem {
id: imageId
anchors.centerIn: parent
height: parent.height
width: parent.width
myCustomProperty: myCustomRole
states: [
State {
name: "working"
when: imageId.working && !imageId.done
//you could set properties
},
State {
name: "done"
when: !imageId.working && imageId.done
//you could set properties
}
],
transitions: [
Transition {
from: "*"
to: "working" //here goes the name from the state
NumberAnimation {
properties: "x,y";
easing.type: Easing.InOutQuad;
duration: 200;
}
}
]
}
Option 2
Depending on what the calculations are you could add one or more properties that represent the results and use Behavior objects. Since you id'd the custom item imageId, I don't think you are really interested in this option, but just putting it here for completenes.
Note also, that this option exposes a bit of an issue with mixed responsibilities (see wikipedia); The calculations are done in the same class as the representation. So in the code below I'm assuming the MyCustomItem is only doing the calculation (as soon as it's instantiated)
Rectangle {
id: tempView
anchors.centerIn: parent
height: parent.height
width: parent.width
color: imageId.working ? "transparent"
: imageId.temperature < 20 ? "blue" : "red"
Behavior on color { ColorAnimation { duration: 500 } }
MyCystomItem {
id: imageId
}
}
Option 3
Lastly, you could make the grid a bit more alive with ProgressBars. For this it is needed to have an idea on how far the calculation is, and of course expose that value
import QtQuick.Controls 2.3
MyCystomItem {
id: imageId
anchors.centerIn: parent
height: parent.height
width: parent.width
ProgressBar {
anchors.left: parent.left
anchors.right: parent.right
anchors.bottom: parent.bottom
value: imageId.progress
visible: imageId.progress < 100
}
}
Conclusion
I think the most valuable part in this answer it to expose your internal calculation state to the QML side with Q_PROPERTY's. Since you can only control what is visible.