Interactive Countdown Timer Using Tkinter ttkbootstrap

Introduction

In this tutorial, we will build an interactive countdown timer using the ttkbootstrap library in Tkinter. The timer allows users to:

• Set a countdown duration using an interactive meter widget.
• Click the Start button to begin the countdown.
• See the remaining time dynamically update.
• Receive a "Time Over!" message when the countdown reaches zero.

Code Breakdown

1. Importing Required Libraries

# Import required libraries
import ttkbootstrap as tb

• ttkbootstrap: Enhances Tkinter with modern themes and interactive widgets.

2. Function to Start the Countdown

# Function to start countdown
def start_countdown():
    duration = int(meter.amountusedvar.get())  # Get value from meter
    
    if duration == 0:
        meter.configure(subtext="Set a value!", bootstyle="danger")
        return
    
    countdown(duration)  # Start countdown

• Retrieves the duration set in the interactive meter.
• If the value is 0, it displays an error message.
• Otherwise, it calls the countdown() function.

3. Countdown Logic Using after()

# Countdown function using after()
def countdown(remaining_time):
    if remaining_time >= 0:
        if root.winfo_exists():  # Check if window is open
            meter.configure(amountused=remaining_time, subtext=f"{remaining_time} sec remaining")
            root.after(1000, countdown, remaining_time - 1)
    else:
        meter.configure(subtext="Time Over!", bootstyle="danger")  # Show "Time Over"

• Uses after(1000, function) instead of time.sleep(1) to avoid blocking the UI.
• Updates the meter dynamically until it reaches zero.

4. Creating the Tkinter Window

# Create main window
root = tb.Window(themename="superhero")
root.title("Interactive Countdown Timer")

5. Adding the Meter Widget

# Interactive Meter Widget
meter = tb.Meter(root, bootstyle="warning", interactive=True, 
                 stripethickness=6, meterthickness=20, 
                 amountused=30, amounttotal=60, 
                 subtext="Set Time & Click Start")
meter.grid(row=0, column=0, padx=20, pady=20)

6. Adding the Start Button

# Start Button
start_button = tb.Button(root, text="Start", bootstyle="success", command=start_countdown)
start_button.grid(row=1, column=0, pady=10)

import ttkbootstrap as tb

# Function to start countdown
def start_countdown():
    duration = int(meter.amountusedvar.get())  # Get value from  meter
    
    if duration == 0:
        meter.configure(subtext="Set a value!", bootstyle="danger")
        return
    
    countdown(duration)  # Start countdown

# Countdown function using after()
def countdown(remaining_time):
    if remaining_time >= 0:
        if root.winfo_exists():  # Check if window is still open
            meter.configure(amountused=remaining_time, 
                subtext=f"{remaining_time} sec remaining")
            root.after(1000, countdown, remaining_time - 1)
        else:
            return  # Stop if window is closed
    else:
        meter.configure(subtext="Time Over!", bootstyle="danger")  # Show "Time Over"

# Create main window
root = tb.Window(themename="superhero") # change the themename 
root.title("www.plus2net.com Interactive Countdown Timer")


# Interactive Meter Widget
meter = tb.Meter(root, bootstyle="warning", interactive=True, 
                 stripethickness=6,meterthickness=20, 
                 amountused=33, amounttotal=60, 
                 subtext="Set Time & Click Start")
meter.grid(row=0, column=0, padx=20, pady=20)

# Start Button
start_button = tb.Button(root, text="Start", 
    bootstyle="success", command=start_countdown)
start_button.grid(row=1, column=0, pady=10)

# Run the application
root.mainloop()

🚀 Dynamic Bootstyle Update in Countdown Timer

This extension to the existing countdown timer dynamically updates the bootstyle (color) of the meter in real-time when:

• 💡 The user manually adjusts the timer before starting the countdown.
• ⏳ The countdown is running and time is decreasing.

🔹 get_bootstyle(value) - Function to Determine Bootstyle

This function selects the appropriate bootstyle based on the remaining time:

def get_bootstyle(value):
    if value <= 10:
        return "danger"  # Red (Critical)
    elif value <= 20:
        return "warning"  # Yellow (Caution)
    elif value <= 40:
        return "info"  # Blue (Normal)
    else:
        return "success"  # Green (Safe)

🔹 update_meter_style(*args) - Live Bootstyle Update

This function updates the meter’s bootstyle instantly when the user interacts with it.

def update_meter_style(*args):
    value = int(meter.amountusedvar.get())  # Get current meter value
    bootstyle = get_bootstyle(value)  # Get corresponding bootstyle
    meter.configure(bootstyle=bootstyle, subtext=f"{value} sec remaining")

🔹 Binding the Update Function to User Interaction

To ensure the bootstyle updates when the user moves the meter, we bind the function using:

meter.amountusedvar.trace_add("write", update_meter_style)

🎯 How This Enhancement Works?

1. 👆 User adjusts the meter manually → bootstyle updates immediately.
2. ⏳ When the countdown starts, the color updates dynamically.
3. 🎨 Different colors for different time ranges:
• 🔴 0 - 10 sec: Danger (Red)
• 🟡 11 - 20 sec: Warning (Yellow)
• 🔵 21 - 40 sec: Info (Blue)
• 🟢 41+ sec: Success (Green)

🚀 Final Result:

import ttkbootstrap as tb

# Function to determine bootstyle based on time value
def get_bootstyle(value):
    if value <= 10:
        return "danger"
    elif value <= 20:
        return "warning"
    elif value <= 40:
        return "info"
    else:
        return "success"

# Function to update meter style dynamically 
def update_meter_style(*args):
    value = int(meter.amountusedvar.get())  # Get current meter value
    bootstyle = get_bootstyle(value)
    meter.configure(bootstyle=bootstyle, subtext=f"{value} sec remaining")

# Function to start countdown
def start_countdown():
    duration = int(meter.amountusedvar.get())  # Get value from meter
    
    if duration == 0:
        meter.configure(subtext="Set a value!", bootstyle="danger")
        return
    
    countdown(duration)  # Start countdown

# Countdown function using after()
def countdown(remaining_time):
    if remaining_time >= 0:
        if root.winfo_exists():  # Check if window is still open
            bootstyle = get_bootstyle(remaining_time)
            meter.configure(amountused=remaining_time, 
                            subtext=f"{remaining_time} sec remaining", 
                            bootstyle=bootstyle)
            root.after(1000, countdown, remaining_time - 1)
        else:
            return  # Stop if window is closed
    else:
        meter.configure(subtext="Time Over!", bootstyle="danger")  # Show "Time Over"

# Create main window
root = tb.Window(themename="superhero")  # Change the themename
root.title("www.plus2net.com Interactive Countdown Timer")

# Interactive Meter Widget
meter = tb.Meter(root, bootstyle="success", interactive=True, 
                 stripethickness=6, meterthickness=20, 
                 amountused=33, amounttotal=60, 
                 subtext="Set Time & Click Start")
meter.grid(row=0, column=0, padx=20, pady=20)

# Bind the update function to mouse interaction (Fix: Use *args in function)
meter.amountusedvar.trace_add("write", update_meter_style)

# Start Button
start_button = tb.Button(root, text="Start", 
    bootstyle="success", command=start_countdown)
start_button.grid(row=1, column=0, pady=10)

# Run the application
root.mainloop()

Conclusion

This tutorial demonstrated how to create an interactive countdown timer using ttkbootstrap in Tkinter. The timer updates dynamically using after() and remains responsive, making it a great addition to GUI-based applications.

Integrating the Timer into Other Applications

To integrate this countdown timer into other applications, it is recommended to use threading so that the countdown runs independently without freezing the main application.

Example Use Cases

• Typing Test: Allow users to type in a text box while the countdown runs, and disable the text box when time is over.
  Type Speed Test using countdown timer »
• Quiz Timer: Set a time limit for answering questions in a quiz application.
• Workout Timer: Use the countdown to track exercise durations.
• Pomodoro Technique: Implement a productivity timer for focused work sessions.

By combining threading with the ttkbootstrap countdown timer, we can build responsive and time-dependent GUI applications in Python!