How to trigger an animation qml when a value from C++ change? - c++

Question

I have an application which use C++ and QML.
In my C++ : I read the value and i send it to QML in order to show it in a slider.
My value change when i press in my hardware.
My problem is in the QML part:
In QML :
I need to trigger an animation for few seconds when this value change. I only need to show this animation when the value from c++ part Change.
if someone could help ?
I already tried the QML timer but not showing animation when value changed ?
Some code in QML part for the animation :
VolumeRemote.QML
Rectangle {
id: item1
width: 550
height: 110
color: "#0a0a07"
border.color: "#ffffff"
opacity: 1
SliderComponent{
id:slider
x: 34
y: 79
width: 466
height: 5
minimumValue: 0
//here i give the value from C++ to my slider
//Controller is a global Qobject where i define some stuff
value: Controller.volume_radio
onValueChanged: {
animation.running=true;
}
PropertyAnimation {
id:myanimation
running: true
target:item1
property: 'visible'
to: false
duration: 10000
}
}
Text {
id: text1
x: 93
y: 16
width: 170
height: 41
color: "#ffffff"
text: qsTr("Radio Volume :")
verticalAlignment: Text.AlignVCenter
horizontalAlignment: Text.AlignHCenter
font.pixelSize: 24
font.family: regular.name
}
Text {
id: valeurslider
x: 277
y: 16
// x: 618
//y: 45
width: 24
height: 41
color: "#ffffff"
text: slider.value
verticalAlignment: Text.AlignVCenter
horizontalAlignment: Text.AlignHCenter
opacity: 0.45
font.pixelSize: 30
font.family: regular.name
}
Image {
id: image1
x: 34
y: 16
width: 44
height: 41
source: "assets/ic_sound_popup_on.png"
}
}

Answer 1

You have two options
A local property and its change signal
readonly property qreal valueFromCpp: Controller.volume_radio
onValueFromCppChanged: // trigger animation
A Connections element
Connections {
target: Controller
onNameOfThePropertyNotifySignal: // trigger animation
}

Answer 2

if you use this in the C++ part: Q_PROPERTY(int RadioVolume READ getval NOTIFY val_signal ), you have to add a write function to change RadioVolume. Tha is to say:
Q_PROPERTY(int RadioVolume READ getval WRITE setVal NOTIFY val_signal ) and in the function setVal(), you have to change the RadioValume variable value and you have to emit the val_signal everytime the value changes. Instead of setting the value directly, call the setVal() function everywehre you set RadioVolume value and then in the QML part you have to put this: onVal_Signal: put the animation here
If you have any question regarding my answer do not hesitate to ask. If you have the code, i will be glad to help you change it

Answer 3

I use #Beloqui and #KevinKrammar second answer :
1 - Declare simple animation with property visible
2 - SliderCompenent and give the value : Controller.volume_radio
3 - use of connections in order to get the signal notified from C++ : OnVolumesignal
Then i can trigger the animation when signal is emitted from c++ part
Here a small piece of code :
import QtQuick 2.0
import QtQuick 2.0
import Controllers 1.0
import "Logic.js" as Controller_Js
Rectangle {
id: item1
width: 550
height: 110
color: "#0a0a07"
border.color: "#ffffff"
opacity: 1
visible: Controller.stateVol
SliderComponent{
id:slider
x: 34
y: 79
width: 466
height: 5
minimumValue: 0
maximumValue: 100
value: Controller.volume_radio
NumberAnimation {
id: animation
target: item1
property: "visible"
duration: 1000
easing.type: Easing.InOutQuad
}
//gestion du signal
Connections{
target:commodo
onVolumesignal:{
if (commodo.RadioVolume !==100){
Controller.stateVol=true
animation.start();
console.log("state of controller :", Controller.stateVol)
} else if (commodo.RadioVolume>100){
animation.stop();
Controller.stateVol=false
console.log("state", Controller.stateVol)
}
}
}
Cobntroller.stateVol is defined to false in my controller.qml
Thanks guys, it really helped me.