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

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.