Simple Tkinter Demo

Summary

In this instructional video, the presenter guides viewers through the basics of creating a simple GUI calculator using the Tkinter library in Python. The tutorial covers importing Tkinter, setting up the main window, configuring window properties, and adding UI elements such as an entry box for numbers and buttons for digits 0-9, as well as basic operations. The focus is on the layout and design, with the functionality to be addressed in a subsequent session.

Takeaways

• 😀 The video is a tutorial on creating a simple GUI for a calculator using Tkinter, a Python frontend library.
• 🛠️ The prefix 'TK' is used to access Tkinter functions, though it can be customized.
• 🖥️ The 'main' window is configured first, setting up the basic structure for the GUI.
• 🔢 An 'entry' widget is created for displaying calculator input and output.
• 🎛️ The 'grid' system is used to place widgets in rows and columns, similar to a spreadsheet.
• 🔲 Number buttons are created using the 'button' widget and assigned to the grid with specific row and column indices.
• 🔄 The 'width' and 'height' attributes are used to size the buttons properly within the grid.
• ➕➖✖️➗ The basic arithmetic operation buttons (addition, subtraction, multiplication, and division) are added to the grid.
• 💡 An 'equals' button and a 'clear' button are also included, using specific symbols and text.
• 🔧 The tutorial emphasizes the importance of setting the correct attributes for each widget to ensure they display correctly.
• 📝 The final GUI is non-functional at this stage; functionality will be added in a subsequent tutorial.

Q & A

What is the purpose of the script?

The purpose of the script is to demonstrate the basics of creating a simple GUI for a calculator app using the Tkinter library in Python.

What is Tkinter and what role does it play in the script?

Tkinter is a frontend library for Python that allows for the creation of graphical user interfaces. In the script, it is used to build the calculator's GUI.

What is the prefix used to access Tkinter functions in the script?

The prefix used to access Tkinter functions in the script is 'TK'.

How is the main window variable named in the script?

The main window variable in the script is named 'M'.

What is the significance of the 'geometry' attribute in the script?

The 'geometry' attribute in the script is used to determine the size of the initial window of the calculator app.

What is an 'entry' widget in the context of the script?

An 'entry' widget in the script is used to create a box where the digits and numbers will be displayed when the calculator buttons are pressed.

How are the calculator buttons created and configured in the script?

The calculator buttons are created using the 'button' widget and configured with attributes like 'text' for the button label, 'width' and 'height' for sizing, and 'grid' for positioning within the window.

What is the role of the 'grid' system in arranging the calculator's UI elements?

The 'grid' system in the script is used to position and arrange the calculator's UI elements, such as buttons and the entry box, in a structured layout similar to a spreadsheet.

How are the buttons for numbers 1 to 9 created in the script?

The buttons for numbers 1 to 9 are created using the 'button' widget with a prefix 'B' followed by the number, and then assigned to specific rows and columns within the grid.

What additional buttons are mentioned in the script for the calculator?

The additional buttons mentioned in the script for the calculator include buttons for addition (+), subtraction (-), multiplication (*), division (/), equals (=), and clear (C).

What is the next step after creating the calculator's UI as described in the script?

The next step after creating the calculator's UI is to make the calculator functional, which will be covered in the next session as mentioned in the script.

Outlines

00:00

💻 Introduction to Tkinter for GUI Development

The speaker introduces the basics of Tkinter, a frontend library for Python, and sets the stage for creating a simple GUI for a calculator app. The tutorial focuses on importing Tkinter, setting up the main window, and configuring its properties such as title and geometry. The prefix 'TK' is used to access Tkinter's functions, and the main window is initialized and displayed using the 'TK' prefix. The speaker suggests following along to avoid confusion and ensures the main window is activated to appear when the program runs.

05:00

🔢 Setting Up the Calculator's Entry Box

The speaker proceeds to explain how to create an entry box for the calculator where numbers will be displayed. This involves using the 'entry' widget and assigning it to the main window. The entry box is then placed within the grid system of the Tkinter GUI, which requires understanding the concept of rows and columns. The speaker sets the width of the entry box to fill the window and demonstrates how to adjust the attributes of the button widgets to ensure they display correctly within the grid.

10:02

🎛️ Creating Number Buttons for the Calculator

The tutorial continues with the creation of number buttons for the calculator, ranging from 0 to 9. Each button is created using the 'button' widget and assigned to the main window. The speaker emphasizes the importance of placing these buttons within the grid system, explaining how to use rows and columns to position them. Attributes such as 'width', 'height', and 'text' are adjusted to ensure the buttons are displayed correctly and are visually appealing. The process is repeated for each button, incrementing the row and column indices as necessary.

15:04

➕➖✖️🔄 Adding Operators and Functional Buttons

In the final part of the script, the speaker adds the operator buttons for addition, subtraction, multiplication, division, and the equals and clear buttons. These are created in a similar manner to the number buttons, with the speaker demonstrating how to assign them to the grid system. The speaker ensures that the buttons are properly aligned and spaced, adjusting the grid configuration as needed. The tutorial concludes with a non-functional but visually complete calculator UI, with a promise to make it functional in the next session. The speaker encourages participants to create their own calculator and reach out for help if needed.

Keywords

💡Tkinter

Tkinter is a standard GUI (Graphical User Interface) library for Python. It is used to create windows, dialogs, buttons, and other graphical elements. In the video, Tkinter is introduced as the frontend library for creating a simple calculator GUI. The script demonstrates how to import Tkinter and use it to set up the main window and other UI components.

💡GUI

GUI stands for Graphical User Interface, which refers to the visual elements that users interact with on a computer screen. The video's theme revolves around creating a GUI for a calculator, showcasing how to use Tkinter to design and arrange buttons, an entry box, and other elements to form a user-friendly interface.

💡Entry widget

An Entry widget in Tkinter is used to display and input text. In the context of the video, the Entry widget is essential for the calculator's display where numbers and results are shown. The script details how to create and configure the Entry widget to fit within the calculator's window.

💡Button widget

Button widgets in Tkinter are used to create clickable buttons. The video script includes instructions on creating button widgets for the calculator's number keys and operations like addition, subtraction, multiplication, division, equals, and clear. Each button is configured with a text attribute to display its corresponding number or symbol.

💡Grid layout

The Grid layout in Tkinter is a way to organize widgets in rows and columns. The video explains how to use the grid layout to position the calculator's buttons and entry widget. It demonstrates assigning rows and columns to each widget to create a structured and visually appealing interface.

💡Main window

The main window is the primary window of a GUI application. In the video, the script shows how to create and configure the main window using Tkinter, setting its title and geometry to establish the initial appearance of the calculator application.

💡Prefix

In the context of the video, a prefix is used to avoid conflicts in naming when importing modules. The script suggests using 'TK' as a prefix for Tkinter functions, which is a common practice to make it clear that the variables and functions are related to the Tkinter library.

💡Configuration

Configuration in the video refers to the setup process of the GUI elements. It includes setting attributes such as the title, size (geometry), and other properties of the main window and widgets. The script provides a step-by-step guide on configuring the calculator's UI components.

💡Attribute

Attributes in Tkinter are properties that define the appearance and behavior of widgets. The video script discusses various attributes like 'width', 'height', and 'text' that are used to customize the calculator's buttons and entry widget to fit the desired design.

💡Functional

Although not explicitly detailed in the script, the term 'functional' implies that the next step after creating the UI will be to make the calculator operational. The video mentions that the current setup is nonfunctional, indicating that the buttons and entry widget are not yet linked to the calculator's logic for performing calculations.

💡Activity

The video concludes with an activity for the viewers, which is to create their own calculator using the instructions provided. This keyword highlights the educational aspect of the video, encouraging hands-on learning by applying the concepts discussed.

Highlights

Introduction to Tkinter as a frontend library for Python.

Creating a simple GUI for a calculator app with Tkinter.

Importing Tkinter and using 'TK' as a prefix for its functions.

Setting up the main window for the calculator GUI.

Configuring the window title and geometry for the initial size.

Creating an entry widget for displaying calculator digits.

Assigning the entry widget to the main window and placing it in the grid.

Adjusting the width attribute of the entry widget to fill the window width.

Creating number buttons using the Button widget in Tkinter.

Assigning buttons to the main window and placing them in the grid layout.

Understanding the rows and columns system of Tkinter's grid.

Setting up the attributes like width, height, and text for the buttons.

Adding the operator buttons for addition, subtraction, multiplication, and division.

Creating the equals and clear buttons for the calculator.

Adjusting the grid layout to properly display all calculator buttons.

Ensuring that the calculator's UI elements are aesthetically aligned.

Announcement of the next session focusing on making the calculator functional.

Invitation for participants to create their calculator and share it.

Offering assistance for any issues encountered during the coding process.

Transcripts

so hello CL uh I am here today to show

you the uh basics of tier so tier is

essentially a frontend library to python

so for today we will create a simple GUI

for a simple calculator app with the

numbers 0 to 9 the basic operations and

of course the equals and clear

buttons so for our first step we need to

to import tick so

first let's do that so it would look a

little bit like

this so This TK you can see here is the

prefix we will use to properly um access

the functions of our ticker Library you

can change it to anything you like but

for Simplicity sake we will use TK for

this video

so next is our um window

configuration so this is our

configuration for the window that will

act or that we will use to um display

our

DUI so first we will need a variable it

can be of any name uh you can name it

root main or josua if you would like but

for today's video we will name it M I

suggest you follow along so you don't

get um

confused so after we declare or we put

in the name of the variable we need to

make it the main window so to do that we

need to add or type in TK that is our

prefix here as you can see and then

do capital T small K and then

so that is our

um statement for our main window and of

course we need to make sure we put it or

we activate the main Lo so it actually

shows up when we run the program so

let's try if it

does yeah as you can see so that's our

basic um window configuration done for

now let's do a slight more a few more

Twix so let's add a title so what I'm

doing here is I'm um changing the

attributes of the main variable so we

will be changing the T the title of the

main window so for for now let's say

simple

calculator then the next important one

is the main.

geometry so this geometry is what we use

to determine the size of the initial

window so if you run this again

wait run this again as you can

see so since we haven't um created or

added functions that would

limit the window size you can still

change it fre but for now we wouldn't

worry about that since we have our uh

basic window setup here we'll be adding

the UI elements of the calculator itself

so first we need a box where the digits

of the numbers will show up when we

press on the buttons so for that we will

use an

entry so E1 uh equals entry one then to

create an entry we just use the prefix

do

entry so we need to assign it to our

main window like so and then we need to

put it in the um you can still run this

without putting it into the grid but it

will not show up so to put it into the

grid grid you need to assign it properly

so that would be e1. grid equals column

span this column span is a um attribute

of the grid itself um it's a bit

Advanced so for now just follow what I'm

doing so what this this does is it sets

the number of columns the

entry uh

object or the widget will

occupy that said we should probably

modify the width of this so it

properly um fills up the width of the

window so to do that we just use the

width attribute here and change it to

whatever we like so let's say 50

I think that's

40 uh around

45 never mind 50 was

perfect there we so that's our digit

box so it would look like that so for

now it looks looks a little bit simple

no so since that's the entry is done

next we will have to do our

buttons so for now let's do our number

buttons so that would be our b0 or

B1 B2 B3 B4 B5 B6 B7 B8 B9 and B 0 for

our numbers of 1 to Z so to create a

botton widget we just do this uh a

similar thing here so that's equals DK

that is our prefix and then our botton

object we need to assign it to our

window and then for now let's stop at

that now let's assign it to

everyone there

go as I said it would not show up if you

don't put it in the group

so for now let's put all of these into

the

grid so since we're using the

grid you will have to learn about the

rows and columns system of our tier grid

so what does does that look like so

imagine the or imagine this as a

spreadsheet or an Excel file no the rows

are the horizontal lines that you can

use so that would be equivalent to our

programming lines here so you can see uh

in this case we have 34 rows of code so

column is the

vertical um position of the

element so just imagine of it like a

spreadsheet similar to

this and you will probably be

fine again you will probably figure this

out as uh as you go experimenting with

ti so for now you have to follow my

lead so let's do row equals z or Row

one since we already have the entry

there then column

zero let's see if that pops up

as you can see it

does what's uh why does it look like

that because we didn't properly set up

the variable or the attributes of the

bottom so for now let's add a

WID say 15 is good enough too much I

think see no I think 15

should 15 let's add

height say

five and that should probably good

enough

so

then see if it

changes I I mean we still haven't

properly assigned them so since we have

our button now you can you can click it

now we need to have the number of the

bottom properly um the fure so to do

that we will use the text

attribute this is quite similar to the

width and the height uh the only

difference being the string um input

that you should put in there so for now

since this about one let's C in one and

check if it shows up as you can see it

does so we're going to have to do this

with every single one of the

buttons see here let's do that quickly

that should be pretty good so with that

um with these buttons that I mean we

should probably be just setting up the

G so so row column

one as you can see it is now on the

seven Colum

um cut down on this a

bit maybe 14 or

something four it's a little bit um f

right

now

check I think that's still a bit too fat

maybe 12 is the right number of

yeah check that should probably good

enough probably be good

enough so like I said this is the number

two bottom or bottom two is in the

second column

here or column one our B our button one

is in the column zero so it is the first

one here so if you want to place another

button on the right side of our button

two we will have to name it or set it as

column ex

so sure to properly set the botton name

so as you can

see still can't find the

right just check if properly this

it ah this doesn't support CL vales

unfortunately

13 just about for this 13 is

about let's have to change all of this

to 13

again so again you just have to copy or

copy I mean you have to do this so on

and so forth for each of the buttons so

in our case that's our bottom 1 two

z s 8

n so for every three buttons we will

have to

increment a row I

so

something wrong with the column because

it's number P other than number

and12 I need to modify the

rows R

three should be R check if this works

properly and as you can see it does as

our numerical numbers and the only thing

missing is our operators and

the equals and clear uh

buttons so for now we will be adding

that so let's let's do ba for button of

addition

uh then BS for

subtraction BM for multiplication BD for

division then be for equals and b c for

B button to clear so just copy paste

this addition is plus of

course minus multiplication is fosty and

division is a slash for equals of course

we use the equal sign and for Clear

let's just use a Capital

C so again this will not show up if you

don't properly assign it in our row

system or our grd system so let's add

addition and subtraction

first in the same column as number four

or number

zero and if run that should probably

show as you can

see let's do 500 so should show

properly then you just have to add all

of this add all of the stuff you added

so since you have the

M we change that to row five since it's

technically three items per row

no so BM for multiplication BD for

division and of course

equs for our equal

sign this don't have our C so we're

going to have to create a new r for it

like

so so these are

our botton declarations just to make it

clear and this is is there grid for grid

grid

declarations for the butons themselves

so if you run that there you go as you

can see all of the buttons are now

perfectly there

add a little bit

more height so you can see

properly try to make it just straight

just

stra of course you can also just

do six so it's

39 do

39 on equals bottom

actually do that will show up like this

because we didn't um fix it up so we're

going to have to switch c and e here see

how it looks like still doesn't or still

hasn't fixed

properly

so

say there we go

so that's basically or let's try 40

actually that's good enough so that's

how to create a simple or somewhat

simple UI using

theer for now we created a nonfunctional

calculator now uh in our next um session

we will make sure to make this

functional so for your activity this um

day you will have to create a calculator

and post it to us if there are any

problems you can um reach out to me on

messenger or on USM itself no if you

have problems with your VSC or problems

with the code you can message me at

so for now uh follow

the code that I showed here I will also

send this

code to your usern s so you can use it

as again so that's about it