Kivy Tutorial: How to create a Simple Timer in Kivy Python ~ For beginners #5 (Detailed Explanation)

Summary

In this tutorial, Petrina continues her Simple Clock App series by adding a timer feature. She walks through the process of setting up a new 'Timer' tab, arranging the layout with labels, text inputs, and buttons, and adding functionality for starting, pausing, and resetting the timer. Along the way, Petrina demonstrates the use of regular expressions to validate user input and explains how the timer works with Python's datetime and timedelta modules. Despite not being a professional programmer, Petrina's approachable teaching style makes this tutorial accessible for beginners.

Takeaways

• 😀 The video is part of a tutorial series on creating a simple clock app, focusing on adding a timer feature.
• 🛠️ The presenter is not a professional programmer but is teaching herself to code and shares her learning process.
• 📱 A tabbed panel item named 'timer' is added to the app, positioned between 'alarm' and 'world clock'.
• 🔢 A text input is implemented for users to enter time in a specific format: 'hhmmss' for hours, minutes, and seconds.
• 🎨 The text and font properties of the label and text input are customized, including setting the font size and style.
• 🔧 Regular expressions (re module) are used to validate the input, ensuring only numbers are entered and no letters are included.
• ⏲️ The 'timedelta' function from the 'datetime' library is utilized to calculate the countdown.
• 🔄 Functions are created for 'start', 'reset', and 'pause' to control the timer's operation.
• 🔔 A sound is played when the countdown reaches zero, and the user can choose a different sound file if desired.
• 🔀 A 'toggle' function is implemented to switch between starting and resetting the timer with a single button.

Q & A

What is the main focus of this tutorial video?

The main focus of this tutorial video is to add a timer functionality to a simple clock app.

What are the prerequisite videos recommended by Petrina before starting this tutorial?

Petrina recommends watching parts one, two, three, and four of her simple clock app tutorial series before this part.

What is the first UI component Petrina adds to the app for the timer feature?

The first UI component Petrina adds is a tabbed panel item called 'tab timer', which is placed between the alarm and world clock.

What layout does Petrina use for the timer tab and what are its properties?

Petrina uses a BoxLayout for the timer tab, setting its orientation to vertical, padding to 20, and spacing to 20.

How does Petrina set up the label for the timer input?

Petrina sets up a label with the ID 'show', adds text instructing to 'enter the time to count down', and sets the font to 'gothic bold' with a size of 17.

What is the purpose of the text input field in the timer feature?

The text input field is for users to enter the time in a specific format (HHMMSS) for the countdown timer.

How does Petrina ensure that the timer input only contains numbers?

Petrina uses regular expressions (importing the 're' module) to check that the input contains only numbers and no letters or empty strings.

What Python module does Petrina use to handle time calculations?

Petrina uses the 'datetime' module, specifically the 'timedelta' function, to perform time calculations for the timer.

How does Petrina handle the button clicks for the timer?

Petrina creates functions for 'start', 'pause', and 'reset' which are linked to the button clicks, allowing the user to control the timer.

What is the purpose of the 'running' variable in the timer functionality?

The 'running' variable is used to track whether the timer is currently active, helping to control the start, pause, and reset functionalities.

How does Petrina handle the timer's countdown and what happens when it reaches zero?

Petrina uses a scheduled interval to continuously update the timer's countdown. When the countdown reaches zero, a sound is played, and the timer resets.

Outlines

00:00

🕒 Introduction to the Clock App Tutorial Series

Petrina introduces part five of her simple clock app tutorial series, focusing on adding a timer feature. She provides links to previous parts in the series and emphasizes that she is a self-taught coder. The tutorial begins with the addition of a tabbed panel item called 'tab timer' between the alarm and world clock features. A box layout with vertical orientation, padding, and spacing is set up, followed by the addition of a label with instructions on entering the countdown time in a specific format. The label's text is set to bold using the 'gothic bold' font, and the font size is set to 17.

05:01

🛠️ Setting Up the Timer Interface

Petrina continues by adding a text input field for users to enter the countdown time. She creates a class rule for the text input to set the font size and alignment. A 'button box layout' is then created to house the start and pause buttons, using a class rule for consistency. The tutorial moves into the Python file to adjust the width to accommodate the new tab. The timer interface is displayed, but the buttons are non-functional as they lack assigned functions.

10:02

💻 Implementing Timer Functionality

The tutorial delves into coding the timer's functionality. Petrina creates a 'running' variable and a 'start' function to handle the countdown. She checks the input for validity using regular expressions to ensure only numbers are entered. The 'timedelta' function from Python's datetime library is introduced to calculate the countdown by subtracting the entered time from the current time. Conditional statements are set up to handle various input scenarios, such as empty strings or invalid formats.

15:03

🔧 Further Development of Timer Logic

Petrina extracts hours, minutes, and seconds from the input and converts them into integers. She creates a 'delta' variable using the 'timedelta' function to calculate the countdown. The 'running' variable is used to control the timer's state. Functions for starting, pausing, and resetting the timer are outlined, with conditions to change button texts and manage the timer's state.

20:04

🎵 Adding Sound and Final Touches

The tutorial concludes with the addition of a sound to the timer's functionality. Petrina demonstrates how to load and play a sound file when the countdown reaches zero. She also shows how to reset the timer and adjust the display to show leading zeros for a cleaner look. The final steps involve assigning functions to the buttons in the KV file and testing the timer's functionality.

25:07

🎉 Completion and Testing of the Timer Feature

Petrina wraps up the tutorial by testing the timer feature, demonstrating the start, pause, and reset functionalities. She encourages viewers to learn from mistakes and iterate on their projects. The video ends with a thank you and a teaser for the next video in the series.

Keywords

💡Tabbed Panel Item

A 'Tabbed Panel Item' in the context of the video refers to a UI component that allows users to switch between different views or pages within an application by selecting from a set of tabs. In the video, the tutorial is about adding a 'tab timer' to a simple clock app, which is a feature that will be accessed through a new tab in the app's interface, placed between the 'alarm' and 'world clock' tabs.

💡Box Layout

In the script, 'Box Layout' is a layout manager used in the app's design, which organizes child widgets in a single direction, either vertically or horizontally. The tutorial describes setting up a 'Box Layout' with vertical orientation and specific padding and spacing to hold the timer's components, demonstrating how to structure the user interface in a logical and visually appealing manner.

💡Label

A 'Label' in the video is a UI element used to display text. The script mentions creating a label with the ID 'show' and setting its text to instruct users on how to input time for the countdown timer. This label serves as a guide for users, indicating where they should enter the time in the correct format.

💡Text Input

In the context of the video, 'Text Input' is a UI component that allows users to enter text, such as numbers representing time. The tutorial includes adding a text input field where users can input the time for the countdown timer, emphasizing the importance of user interaction in app design.

💡Class Rule

A 'Class Rule' in the video refers to a styling rule defined in the app's styling language, which is used to apply consistent styles to multiple UI components. The script describes creating a class rule for 'text input' to set properties like font size and alignment, showcasing how to maintain a uniform look and feel across the app.

💡Button Box Layout

The 'Button Box Layout' mentioned in the script is a UI component that groups buttons together, typically used for organizing actions in an app. The tutorial adds a 'button box layout' to house the 'start' and 'pause' buttons for the timer, highlighting the importance of grouping related actions for ease of use.

💡Regular Expression

In the video, 'Regular Expression' is a tool used for pattern matching in strings. The script describes using a regular expression to validate user input, ensuring that only numbers are entered into the text input field for the timer. This is a practical application of regular expressions to control and validate user input in app development.

💡Time Delta

The 'Time Delta' in the script refers to a concept in programming used to represent a duration of time. The tutorial uses Python's 'timedelta' from the 'datetime' module to calculate the countdown timer's duration by subtracting the user-specified time from the current time, demonstrating how to manipulate time in a programming context.

💡Function

Throughout the video, 'Function' refers to a block of organized, reusable code that performs a single, related action. The script describes creating functions like 'start', 'reset', and 'pause' for the timer, illustrating the modular approach to programming where specific tasks are encapsulated in functions for clarity and reusability.

💡Schedule Interval

In the context of the video, 'Schedule Interval' is a method used to execute a function repeatedly at specified time intervals. The script mentions using 'clock.schedule_interval' to run the 'begin_cd' function, which updates the timer's display, showing how to implement timed, repeating actions in an app.

💡Toggle

The 'Toggle' in the video is a concept used to switch between two states. The script includes a 'toggle' function that switches the timer's state between running and paused, demonstrating how to create interactive UI elements that respond to user actions by changing states.

Highlights

Introduction to part five of the simple clock app tutorial series.

Adding a timer feature to the existing simple clock app.

Link to previous tutorial parts provided for context.

Disclaimer about the presenter's background in programming.

Adding a tabbed panel item named 'timer' between 'alarm' and 'world clock'.

Setting up a vertical box layout with padding and spacing.

Creating a label with an ID of 'show' for displaying instructions.

Instructions for time format input added to the label.

Styling the label text to be bold using 'gothic bold' font.

Adding a text input field for users to enter time.

Creating a class rule for the text input to set font size and alignment.

Designing a button box layout for 'start' and 'pause' buttons.

Adjusting the width of the app to accommodate the new timer tab.

Visual confirmation of the timer's placement and appearance.

Introduction to creating a function for the timer in the Python file.

Creating a 'running' variable to track the state of the timer.

Defining the 'start' function to handle timer start logic.

Using regular expressions to validate numeric input from the text field.

Importing 'timedelta' for time calculations within the timer function.

Extracting hours, minutes, and seconds from the input and converting them to integers.

Creating a 'delta' variable to calculate the countdown using 'timedelta'.

Scheduling the 'begin_cd' function to update the timer.

Defining the 'reset' function to stop and reset the timer.

Adding a 'pause' function to pause the timer.

Assigning 'on press' events to the 'start' and 'pause' buttons in the KV file.

Creating a 'begin_cd' function to decrement the timer.

Updating the display with the remaining time and handling time formatting.

Adding logic to play a sound when the timer reaches zero.

Defining a 'toggle' function to switch between starting, pausing, and resetting the timer.

Testing the timer functionality and making adjustments.

Conclusion and a thank you note to the viewers.

Transcripts

hey guys this is petrina and this is

part five of my simple clock app

tutorial series so in this video i'm

going to add a

timer to my simple clock app if you

haven't watched part one two three and

four

i'm just gonna put the links in the

description below so you can go and

check them out

i highly recommend you do so that you

can

follow along well

anyway i'm just gonna put a disclaimer

out there i'm not a professional

programmer i am just someone who's

trying to teach herself how to code okay

so the first thing we're gonna do is

we're going to add a tabbed panel item

and i'm going to put this step panel

item between the

alarm and world clock

so i'm just going to call this

tab timer

now i'm going to put the box layout

in this tab

and i'm going to set the orientation to

vertical

the padding to 20

spacing

to 20

okay now i'm gonna put a label in the

box layout

i'm going to give this an id of show so

show is going to be the id of this label

i'm going

[Music]

add some text to it and the text will be

enter the

time

to count

down

as

follows

oh let's just say in this time format

in this time

format

so

hh for our hour minute minutes and a

second second

and we're just gonna say new line for

example

we're gonna set the

text here to bold so we're just gonna

say gothic bold

so

font gets gothic bold

and we're just gonna put

the time format that we want

okay so that's it

now we're gonna set the font size

17

excuse me

so now

let's put a

text input

so we're gonna add a text input

and we're gonna give this

um id of text input

i don't know what else to put so i'm

just gonna put it like that

and we're gonna set the text inside

like this

so there you go

and

we're gonna set the font size okay so

i'm just going to go up here

and add a class rule for the text input

because i want to set the font size but

then

it's going to be similar to the one in

the alarm so might as well create a

class role

so we're going to create a classroom of

text input and we're going to say

multi-line

gets

false

and

font size we're going to set it to 50

and we're going to set the alignment

to center

okay now let me check the

alarm

just gonna remove this because it's

already

there in the classroom so i don't have

to write it again

okay so now we'll go and create another

box layout i want this box layout to be

like the bot button box layout where the

buttons inside so

i'm just gonna write button box layout

and it's up here

here

button box layout so i want all the

properties here to go inside

so yeah

i mean i want all the prop i want it to

have the same properties so yeah

okay so i'm gonna put rounded button as

well

i'm gonna put that um

use the class rule as well

and i'm gonna set the text to start

and rounded button one

i'm gonna set the text to

pause

okay so now we're just gonna go here

into our python file and we're gonna

change the length i mean the width the

width of it to 500 so it can take an

extra tab

okay so i'm just gonna run it and you're

gonna see

so there you go the timer is there

and there you go

the

time is in the middle then the buttons

are not working because they don't have

a function yet but yeah

this is the overall look of it

so yeah

okay it looks fine

okay

so the next thing we're gonna do is

we're gonna add a function

into this file here for the timer

before we do that let's

create a variable called running

and we're gonna set that to false

okay

now we're going to create a function

and we're going to call that functions

dot

so def start so

okay

so now we're gonna get the input and put

it

the text input whatever text is in this

um text input box and put it inside a

variable

so we're going to say self dot

we're going to say cd time

which is like countdown time

and we're gonna say

citytimegetself.self.ids.root.text

[Music]

input

dot text

okay

now we are going to create some if else

statement

so the first statement

um the ether statement they're just

going to check the inputs in the text

input box i want them to be just numbers

and i

don't want letters inside and i don't

want it to be an empty string and

and yeah

okay

so

next thing we're going to do is we're

going to have to input re

i'm gonna have to import

re

so this is a regular expression

i'm just going to go online

here

so we're just gonna go online and check

re

um i want to explain it but

i think online we're given a good

explanation so yeah there it is

so regular expressions

are essentially a tiny highly

specialized programming language

embedded inside python and made

available through the re module using

this little language you specify the

rules for the set of possible strings

that you want to match

this set might contain english sentences

or email addresses or anything you like

you can then ask questions such as does

this string match the pattern or is

there a match for the pattern anywhere

in this string you can also use

re's regular expressions to modify a

string to split it apart in various ways

so yeah that's the

explanation

so i'll be using this one to find

letters inside of the text input i don't

want people to answer enter like

letters inside i want them all to be

numbers so yeah that is why

i'm putting that in

okay so the next thing we're gonna put

is we're gonna say

we're gonna import

time delta

sorry about that

so for time delta

we're just gonna go online and we're

just gonna

see so python time delta function is

present on the daytime library which is

generally used for calculating

differences and dates and also can be

used for date manipulations in python it

is one of the easiest ways to perform

the date manipulations

so

i'm going to use this time delta to get

the current time and then minus the

hours and seconds and minutes from it so

yeah

okay

so now let's go down to our

code let's go into this function

so now we're gonna create another

variable and we're gonna call it check

and we're gonna say read dot find all

we're gonna put this in

we're gonna say a

sad a

that so this will find all the letters

inside and we're gonna say

cd time

so if there are letters inside it will

return true

so yeah inside the

text input box so so we're gonna put the

new statement here and we're gonna say

sorry excuse me

we're gonna say if cd time

is equal to an empty string or

length of cd time

is not equal to

8 or

check

so if this is true if there are letters

in there

and we say self dot

dot

ids dot text

that show dot text

is equal to

please enter

that time

like

this

okay

and then

i least cd time

is equal to zero

zero

zero then you say

clock

dot on schedule

self dot

cd

begin

cd

another if statement again

alif

self

dot

is dot

button

dot text

is able to

reset

then

self don't reset so this is a function

well i'll explain that later

also this spot here i'll explain it

later but what it does it is is it stops

a function from running so

yeah clocked on schedule will stop this

function being cd from running

so yeah there you go

and then you create the house

then you say else and then you say

self.

ideas

button

texts

to

reset

so when

the button the start button is clicked

the text on the button will change to

reset

um for this

one it will check if the but the text on

the bottom is button is reset

then it will stop

stop the

the clock

if it's equal to reset then it will stop

the clock but this will um

change the

text on it to reset

okay

okay so

now we'll just get each zeros two zeros

in

there so we're just gonna say age

h is shot for hour it's just a variable

so yeah

so we just say cd time

0 to 2

m

cd time

3 to 5

s

c time

six to eight

so

each will get the first two zeros and

we'll get the second two zeros and s

will get the

third to zero so we'll just convert

these zeros into an integer

so we're just gonna say like that

m

and it's m

s

and

s

so now we're going to create a variable

called delta so we're going to say salt

of delta

yes we're going to say self here because

we want to access

um

[Music]

this

variable here in another function so

and we're gonna say

daytime

dot now

plus times delta

hours

gets each

minutes

gets m

in seconds

gets s

so yeah

time delta will add

this

numbers here to the daytime don't know

to the highways and the minutes and the

seconds of

the current time

so yeah

so now we're going to say if not

self.

running

self dot

running

gets true

and clock

dot

schedule into wall gets

begin

cd so i'm just gonna say self

dot begin city

0.05 so this will run

the function self.begin city

okay

so now we create another function called

preset so we say def reset

so

now in this function we're going to say

self.

dot ids dot

button

dot

text gets start

so this will change the

text reset to start when it's the button

is pressed

so now the next thing is

self.wood.ids.show.text

will get exactly the same text here

i think i'm just gonna put the new line

[Music]

here okay and then we're just gonna say

self dot

word dot

ids dot

text input

dot

text gets

the zeros because it's resetting so it

has to show the zeros again

and now we're just gonna say

if self.running

self.

running

sequel to false

and clock

dot on schedule

yeah on schedule

begin

cd

okay we'll create another function now

and we're gonna call it pause so this is

going to pause the time

this one is going to reset the time to

it's

um

it's going to reset the time to 0 to its

normal state

you know when you started yeah

and this one is going to just pause it

so

so we're going to say def pause

self

and we're just going to copy this

and paste it here

okay now we're going to go into our kv

file and we're going to give the id

set the id of this one to button

and we're gonna say on press

later we're gonna send a function to

this one but for now let's just leave it

like that

and for this one we're just gonna assign

the plus function

so we're going to say app

dot pause

yeah

now we'll add another function called

begin

cd

we're gonna say self

and

we're gonna say cd start

this argument here is gonna be

accessed here you see

it will run by

this time here so that's a

time that it will add on when it runs

yeah okay now

we're gonna say self

the delta

gets

actually we're gonna create a variable

called delta

we're gonna say zelda delta

minus

daytime

dot now

so it will keep on minusing the time

until it goes to

zero

as long as this function is running

okay

when this schedule interval is still

on then it will keep on managing so now

we're going to change delta into a

string so we're going to say

delta

cancer cr

delta

and then

we're gonna say

self.root.ids.show.text

[Music]

we'll get

change the size to 50.

so i'm just going to add a zero in front

of

the original time

it's usually just five zeroes so i just

want to add a zero in front and make it

like six so it looks looks pretty so

yeah

you don't have to do that if you don't

want to but

i'll just add another zero in front

okay

now we're gonna see

if self

dot

delta

sorry we're just gonna say delta

0

7 is equal to

10.

we're going to add a zero on top so

we're gonna say

zero

plus delta

seven

and we're gonna play a sound so we're

gonna

get x do it exactly like the one up here

seeing that alone

right up here so we're just going to say

self.sound gets unloaded

you know so we're just going to copy

this in

here because

it's the same thing so just going to

copy this and paste it here

and we're going to say

it's not going to be the alarm clock wv

so i'm just gonna check

i want the

rusto one

see

so we're just gonna open file location

and i'm just gonna copy

the title it's very long

so i'm gonna go to properties and i'm

just

gonna go to properties

just copy this one here

i'm just gonna copy it

paste it here

and that's it and now i'm just gonna

say self.reset

so yeah it's gonna reset it

okay now i'm just gonna add another

function and say def

togal

sorry toggle

toggle

def toggle

we're gonna see if

self

dot running

self done reset

else

self.start

so now

sorry

so now we're just gonna put it here

and say i've got toggle

and that's it so now let's try and run

our

timer

oh

supposed to be like this

sorry my computer is a bit slow

i'll just go here

let's just try run it

oh

it's supposed to be self.root.ideas

[Music]

where is it

where is it

104

it's a little bit up there

okay let's try and see

it's okay to make mistakes you know you

learn from them so

it's okay

so there you go

oh yeah

i have to put um

self in front of that so

you say self

that begin city

okay

now let's run it again

okay

i'm just playing around with it for a

bit

start

pause

reset

if you want to use the mr crowing then

we'll just do it like this

yep

and that's it

so this is

my simple clock app

so there you go thank you for watching

and

i will see you in the next video