Countdown timer

melvynbr · September 24, 2021, 11:28am

Hi,

Can anyone please help in guiding me to create a countdown timer.

Thanks

Michael · September 24, 2021, 1:43pm

Here is the example countdown.pma (5.8 KB)

You can change count in the Timer inspector:

melvynbr · September 25, 2021, 7:42pm

Hi Michael,

I tested this and it seems like a numerical timer, is it possible to set this for a specific duration like say for 15 minutes ?

Regards,
Melvyn

Michael · September 26, 2021, 9:37am

You need to set the interval to 900000 (15 * 60 * 1000)

melvynbr · September 27, 2021, 8:14am

Hi Michael,

Thank you for your reply, one other question, while the backend is set according to your post above, how do we get the front end to display as a proper reducing timer (for eg. 15:00, 14:59, 14:58, 14:57, etc)

Also, I noticed is the timer widget a separate one you created that is not part of the ususal flipabit installation, I can seem to find it anywhere.

Regards,
Melvyn

Michael · September 27, 2021, 12:16pm

Timer is a built-in widget:

Here are two examples:

Using Actions only - countdown_timer.pma (6.2 KB)

Using QML/JavaScript code (based on this answer) - countdown_timer_javascript.pma (6.1 KB)

melvynbr · September 27, 2021, 12:46pm

Hi Michael,

Thank you for this. Really appreciate all your help.

Regards,
Melvyn

Ernor · December 2, 2024, 10:41am

Hi,

How do I edit this script to pause the timer when clicking the button again?

// Erik

Vladimir_PV · December 2, 2024, 3:44pm

Connections {
        target: widget.scriptAdaptor
        onEventItemClicked: {
            if (timer1.running) {
                timer1.stop(); // Останавливаем таймер
                widget.content.label = "Start timer"
            } else {
                timer = duration
                timer1.start(); // Запускаем таймер
                widget.content.label = "Stop timer"
            }
        }
    }

Ernor · December 3, 2024, 12:40pm

Awesome, now it stops! But when clicking start the second time it doesnt resume, it restarts. Can you please help me so that the countdown resumes instead?

I really appreciate your help!!!

Vladimir_PV · December 3, 2024, 4:58pm

import QtQuick 2.12

Item {
    property int duration: 60 * 5 // Длительность таймера в секундах (5 минут)
    property int timer 
    property string minutes
    property string seconds
    property bool isPaused: false  // Новая переменная для отслеживания паузы

    Connections {
        target: widget.scriptAdaptor
        onEventItemClicked: {
            if (timer1.running) {
                timer1.stop(); // Останавливаем таймер
                isPaused = true; // Устанавливаем флаг паузы
                widget.content.label = "Start timer"; // Изменяем текст на кнопке
            } else {
                if (isPaused) {
                    // Если таймер был на паузе, продолжаем с оставшегося времени
                    timer1.start(); // Запускаем таймер
                    widget.content.label = "Pause timer"; // Изменяем текст на кнопке
                    isPaused = false; // Сбрасываем флаг паузы
                } else {
                    timer = duration; // Сбрасываем таймер на начальную длительность
                    timer1.start(); // Запускаем таймер
                    widget.content.label = "Pause timer"; // Изменяем текст на кнопке
                }
            }
        }
    }
    
    Timer {
        id: timer1
        interval: 1000 // Срабатывает каждую секунду
        repeat: true
        running: false // Изначально таймер не запущен
        onTriggered: {
            minutes = parseInt(timer / 60, 10);
            seconds = parseInt(timer % 60, 10);
    
            minutes = minutes < 10 ? "0" + minutes : minutes;
            seconds = seconds < 10 ? "0" + seconds : seconds;
            
            if (--timer < 0) {
                timer1.stop();
                widget.content.label = "Timer finished"; // Изменяем текст на кнопке по окончании таймера
            }
            document.childByName("Text 1").content.scriptAdaptor.actionSetText(minutes + ":" + seconds);
        }
    }
}