QML TIMER

Madesh R

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}
        }
    }
}

}

ODБOï

@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
        }
    }
}

Madesh R

Thank You LeLev