Important: Please read the Qt Code of Conduct - https://forum.qt.io/topic/113070/qt-code-of-conduct

QML TIMER



  • Hi ,
    I was trying to implement timeout logic for the input text field.
    When the text field is edited , and if the enter is not pressed , within 10 seconds, then make background of textinput to blink for next 30 seconds(timer will be restarted if the textinput is edited again). Was trying this effect within state change by setting opacity values. But after the time lapse of 10 seconds, couldn't call or set states, I mean couldn't get the blinking effect. Please find the code snippet for the same below.

    Window {
    id:root
    visible: true
    width: 640
    height: 480
    title: qsTr("Timer")

    property bool blink:false
    signal tenSecondsCompleted;
    
    Timer
    {
        id: timer
    }
    
    function delay(delayTime, cb)
    {
        timer.interval = delayTime;
        timer.repeat = false;
        timer.triggered.connect(cb);
        timer.restart();
        console.log("Called!!!")
    }
    
    Timer
    {
        id:tenSecTimer
        interval: 500;running:true;repeat: true;
        onTriggered:
        {
            (signal.state === "VISIBLE")?signal.state="INVISIBLE":signal.state="VISIBLE";
        }
    }
    
    Timer
    {
        id:tenSecTimer2
    }
    
    Rectangle{
        id:signal
        width:200
        height: 50
        color: "white"
        border.color: "magenta"
        border.width: 3
        TextInput
        {
            anchors.fill: parent
            color:"#000000"
            font.pointSize: 10
            anchors.centerIn: parent
            onTextEdited: {
                console.log("Edited")
                timer.stop()
                delay(10000,function(){
                    //signal.state = "INVISIBLE";
                    // tenSecTimer.stop();
                    console.log("10 seconds elapsed");
                  root.blink=true;
                    signal.color="blue"
             signal.state = "INVISIBLE";
             tenSecTimer2.start();
    
                })
    
            }
    
            onEditingFinished:
            {
                console.log("Editing Completed");
            }
    
            states: [
                State {
                    name: "INVISIBLE"
                    PropertyChanges { target: signal; color: "blue";opacity:0}
                },
                State {
                    name: "VISIBLE"
                    PropertyChanges { target: signal; color: "blue";opacity:1}
                }
            ]
    
            transitions: Transition {
                from:"*" ;to:"*";
                PropertyAnimation
                {
                    target:signal;properties: "color"; easing.type: Easing.InOutQuad ;duration: 100}
            }
        }
    }
    

    }



  • @Madesh-R hi,

    import QtQuick 2.0
    import QtQuick.Controls 2.4
    
    TextField {
        id:tFied
        text: "test"
        onTextChanged: reset()
        function reset(){
            t.restart()
            blink=false
            back.color="white"
        }
        property int blinkAfterMs:3000
        property bool blink : false
        background: Rectangle{
            id:back
            color: "white"
            anchors.fill: parent
            ColorAnimation on color{
                from: "white"
                to: "blue"
                duration: 400
                running:blink
                loops: Animation.Infinite
            }
        }
        Timer{
            id:t
            running: tFied.focus
            repeat: false
            interval: blinkAfterMs
            onTriggered: {
                blink=true
            }
        }
    }
    
    


  • Thank You LeLev


Log in to reply