Modern Graphical User Interfaces in Python

Summary

In this tutorial, viewers are guided on creating modern graphical user interfaces (GUIs) using Python with the Custom TKinter module. The video contrasts Custom TKinter with the basic TKinter, highlighting the ease of use and modern aesthetics of the former. Key steps include installing the module, setting appearance modes and color schemes, and constructing a sample login system GUI. The presenter demonstrates adding elements like labels, entries, and buttons, and shows how to switch between dark, light, and system modes, as well as different color themes. Examples from the Custom TKinter GitHub repository are also showcased, offering inspiration for building more complex and stylish interfaces.

Takeaways

• 😀 The video teaches how to create modern graphical user interfaces (GUIs) in Python.
• 🛠️ It utilizes an external Python module called 'custom TKinter' for building the GUIs.
• 🔧 The process is similar to using the core Python module 'tkinter', but with different class and function names.
• 💻 The video demonstrates how to install 'custom TKinter' using pip and import it into a Python script.
• 🎨 It shows how to set the appearance mode (system, dark, or light) and color themes (blue, green, or dark-blue) for the GUI.
• 🔑 The tutorial builds a simple login system interface as an example of a modern-looking GUI.
• 📝 The script covers creating a root element, defining a login function, and adding UI elements like labels, entries, and buttons.
• 📦 It introduces the use of 'ctk' objects from 'custom TKinter' for creating components like frames, labels, and buttons.
• 🔄 The video highlights the ease of changing the color scheme and appearance mode at runtime.
• 🌐 It encourages viewers to explore the 'custom TKinter' GitHub repository for more examples and inspiration.

Q & A

What is the main topic of the video?

The main topic of the video is teaching viewers how to build modern-looking graphical user interfaces in Python.

Which Python module is used in the video to create graphical user interfaces?

The video uses an external Python module called 'custom TKinter' to create graphical user interfaces.

What is the difference between 'custom TKinter' and the core Python module 'TKinter'?

The difference is that 'custom TKinter' is an external module that offers a more modern look and feel, while 'TKinter' is a core Python module used to build simple and basic graphical user interfaces.

How can one install the 'custom TKinter' module?

The 'custom TKinter' module can be installed using the command 'pip install customtkinter' in the command line.

What are the three appearance modes available in 'custom TKinter'?

The three appearance modes available in 'custom TKinter' are 'system', 'dark', and 'light'.

What are the color themes that can be set in 'custom TKinter'?

The color themes that can be set in 'custom TKinter' are 'blue', 'green', and 'dark-blue'.

What is the purpose of the 'login' function in the video's example?

In the video's example, the 'login' function is a placeholder that simply prints 'test'. It's meant to be connected to a button to demonstrate the functionality of the graphical user interface.

How is the 'remember me' functionality represented in the graphical user interface?

The 'remember me' functionality is represented by a checkbox with the text 'remember me' in the graphical user interface.

What is the significance of the 'pack' method used in the video?

The 'pack' method is used to add widgets like labels, entries, and buttons to the frame within the root element, specifying their padding and alignment.

How can the color scheme of the graphical user interface be changed?

The color scheme of the graphical user interface can be changed by setting the default color theme using 'customtkinter.set_default_color_theme' with the options 'blue', 'green', or 'dark-blue'.

Where can viewers find more examples of 'custom TKinter' interfaces?

Viewers can find more examples of 'custom TKinter' interfaces in the GitHub repository of 'custom TKinter' by searching for it on Google.

Outlines

00:00

💻 Introduction to Building Modern GUIs with Python

The video begins with an introduction to creating modern graphical user interfaces (GUIs) in Python. The presenter announces that they will use an external Python module called 'custom TKinter' to achieve this, which simplifies the process compared to the core Python module 'Tkinter'. The presenter suggests that viewers can refer to a 'Tkinter crash course' on their channel for foundational knowledge, but it's not a prerequisite. The focus is on the ease of use of 'custom TKinter', which is claimed to be similar to 'Tkinter' with minor differences in class and function names. The presenter guides viewers on how to install 'custom TKinter' via pip and import it into their Python scripts. They also explain how to set the appearance mode and color scheme for the GUI, offering options like 'system', 'dark', and 'light' modes, as well as color themes such as 'dark-blue', 'blue', and 'green'.

05:01

🔑 Constructing a Login System GUI

In this segment, the presenter demonstrates how to build a simple GUI for a login system using 'custom TKinter'. They start by defining the root element and setting its geometry to 500x350 pixels. A basic function for the login is created, which currently just prints 'test', but the presenter notes that this is where the actual login logic would be implemented in a real application. A frame is added to the root to contain all the GUI elements. Labels, entries for username and password, a login button, and a 'remember me' checkbox are created and packed into the frame with specific padding and alignment settings. The presenter also shows how to encode the password entry to hide the input. The focus remains on the GUI's appearance and structure rather than the backend functionality.

10:03

🎨 Customizing and Running the Modern GUI

The final part of the video script covers customizing the GUI's appearance and running the interface. The presenter shows how to change the color scheme on the fly to 'green' and switch between 'dark', 'light', and 'system' modes. They also demonstrate how the GUI elements, such as buttons and checkboxes, adapt to these changes. The presenter encourages viewers to explore the 'custom TKinter' GitHub repository for more examples and inspiration. They run a couple of example interfaces from the repository to showcase the capabilities of 'custom TKinter', including a complex UI with labels, buttons, combo boxes, check boxes, radio buttons, and sliders. The video concludes with a call to action for viewers to like, comment, subscribe, and turn on notifications for future videos, thanking them for watching.

Keywords

💡Graphical User Interface (GUI)

A Graphical User Interface (GUI) is a type of user interface that allows users to interact with electronic devices through graphical icons and visual indicators instead of text-based interfaces. In the context of the video, the presenter is teaching how to build modern-looking GUIs in Python, which is central to the theme of creating visually appealing and user-friendly applications.

💡Python

Python is a high-level, interpreted programming language known for its readability and简洁性. It is widely used for various applications, including web development, data analysis, artificial intelligence, and more. In the video, Python is the programming language used to demonstrate the creation of GUIs, highlighting its versatility and ease of use for such tasks.

💡Custom TKinter

Custom TKinter is an external Python module that extends the capabilities of the standard TKinter library, which is used for creating GUIs. The video mentions using Custom TKinter to build modern-looking interfaces with ease, indicating that it offers more contemporary and stylized components compared to the traditional TKinter.

💡Appearance Mode

In the context of the video, Appearance Mode refers to the visual theme or style of the GUI, such as 'system', 'dark', or 'light'. The presenter demonstrates how to set the appearance mode using Custom TKinter to ensure the GUI's aesthetic aligns with the user's system preferences or a specific design choice.

💡Color Scheme

A color scheme in GUI design refers to the set of colors used in the interface to create a visually cohesive look. The video script mentions setting a color scheme for the GUI using Custom TKinter, such as 'dark-blue', 'blue', or 'green', to give the application a consistent and appealing color palette.

💡Login System

A login system is a security feature that requires users to provide credentials, typically a username and password, to access a system or application. The video uses a login system as an example to demonstrate how to build a GUI with Custom TKinter, showing elements like text entries for username and password, and a login button.

💡Placeholder Text

Placeholder text is a hint that appears in an input field to guide the user on what information to enter. In the video, the presenter shows how to set placeholder text in text entry fields for a login system, such as 'username' and 'password', using Custom TKinter, which helps improve user experience by providing clear instructions.

💡Encoding Input

Encoding input in a GUI refers to the process of transforming user input, such as hiding characters in a password field for security purposes. The video script mentions encoding the input for the password field to ensure that it does not display in plain text, which is a common practice in login systems to protect sensitive information.

💡Remember Me Checkbox

A 'Remember Me' checkbox is a feature in login systems that allows users to stay logged in or have their credentials saved for future visits. The video includes a 'Remember Me' checkbox in the GUI example, demonstrating how to implement this feature using Custom TKinter, which can enhance user convenience.

💡Main Loop

The main loop in GUI programming is the event loop that listens for and handles user interactions, such as clicks and key presses. In the video, the presenter mentions 'root.mainloop()', which is the main loop in a TKinter-based application, necessary for running the GUI and making it interactive.

Highlights

Introduction to building modern graphical user interfaces in Python using the custom TKinter module.

Explanation of the similarities and differences between core Python's TKinter and custom TKinter.

Installation of the custom TKinter module using pip.

Setting the appearance mode of the application to system, dark, or light.

Customizing the color scheme with themes like dark-blue, blue, or green.

Creating a basic GUI structure for a login system.

Defining a simple login function that prints a test message.

Adding a frame to the GUI to contain the login elements.

Creating text entries for username and password with placeholder text.

Encoding the password entry for secure input.

Adding a login button and connecting it to the login function.

Including a 'Remember Me' checkbox in the login interface.

Running the GUI to display the modern-looking login interface.

Demonstrating the ability to change the color scheme and appearance mode dynamically.

Providing examples from the custom TKinter GitHub repository to showcase additional UI elements.

Exploring a complex UI example with labels, buttons, combo boxes, checkboxes, radio buttons, and sliders.

Conclusion and call to action for viewers to like, comment, subscribe, and turn on notifications for future videos.

Transcripts

what is going on guys welcome back in

today's video we're going to learn how

to build modern looking graphical user

interfaces in Python so let us get right

into it

[Music]

all right so we're going to build modern

looking graphical user interfaces in

this video today and for that we're

going to use an external python module

called custom TK inter which is very

easy to use if you have already worked

with a core python module TK inter which

is used to build simple basic graphical

user interfaces in core python so

without relying on external packages and

if you want to learn about TK enter

first before watching this video you can

go to my channel and check out the TK

enter crash course but you can also just

watch this video you don't need to

understand TK enter first the only thing

is that when you know how to build

graphical user interfaces with TK enter

it's basically the same process with

custom TK enter just with slightly

different class names and slightly

different function names so what we're

going to do first is we're going to open

up the command line and we're going to

say pip install custom

TK enter and once the module is

installed we're going to go into our

python script and we're going to import

it so import custom TK enter and just as

a reminder here if we're using TK intro

what we usually do is we say we have a

root element we call it TK enter dot TK

and then we Define stuff like label

equals TK enter dot label we set it to

the root element or we put it inside of

the root element then we set some text

some font size and all that and then we

do label dot pack for example and then

we Define buttons and entries and stuff

like that and this is how you do it in

TK enter now in custom TK enter it's

basically the same but instead of saying

TK enter.tk you say TK or you say custom

TK enter Dot ctk and custom TK enter.ctk

label but the rest is essentially the

same so we're going to start first by

defining some basic parameters we're

going to set the appearance mode and

we're going to set a color scheme and

for that we're going to say custom TK

enter dot set appearance mode and here

you have three choices you can go with

system you can go with dark and you can

go with light this is basically the way

your application will look if you go

with system it's just going to take the

setting of the system so my Windows

system is set to dark mode so the dark

mode will be the default setting for my

application but I can also provide the

light mode if I want to I'm going to go

with dark so that my application always

has the dark mode

um actually I think it's a lowercase D

uh but otherwise you would just pass

system uh or light

and then I'm also going to say custom TK

enter.set default color theme and here

we're going to say dark Dash blue in

this case you can also set blue and you

can also set green so you have blue

green and dark blue those are the three

themes that you can choose from and now

we can just do a very very basic

graphical user interface and for this

video I'm just going to have the idea of

a login system so we're just going to

build a simple graphical user interface

for a login system maybe you can combine

it with one of my recent videos where I

show you how to build a secure login

system you can connect this graphical

user interface to the code from this

video if you want to

um and what we're going to do here first

is we're going to say the root element

is going to be custom TK enter Dot ctk

and we're going to see that the geometry

of the root element is going to be

500 times 350 pixels

then we're going to Define a simple

function for the login now here you can

actually Implement an actual login

function all I'm going to do here is I'm

going to just print

um I don't know test or something so

this is just going to be some function

that we call of course if you're

building an actual login system with

functionality you would implement the

login logic in this case I'm just going

to do I'm just going to print test so

nothing too special we're just going to

connect this function to a button so

that we see it works the focus is on the

graphical user interface itself and what

we want to add here is we want to add a

frame into which we're going to put all

the stuff so we're going to say custom

TK enter dot ctk frame and the master of

this element is going to be the root

element

and then we're just going to say frame

dot pack we can also use grid but we're

going to use pack and we're going to say

that it has a vertical padding of 20 and

a horizontal padding of 60.

we're going to say fill equals both and

we're going to say expand equals true

so this is going to be the frame and now

we're going to add a label two entries

for username password and we're going to

add a button as well as a checkbox for

remember me into this Frame so we're

going to say now first that the label

is going to be equal to custom TK enter

dot ctk label

Master equals frame so not root we're

not adding it to root directly we're

adding it to the frame which is inside

of root

um and this the text is just going to be

a simple login system

and we're going to say the text font is

going to be equal to

Roboto

24. I'm not sure if I actually have this

font installed so maybe it's just going

to default to another font uh but you

can set the font that you like then

we're going to say label pack with a

padding

vertically of 12th and

horizontally of 10.

and then we can actually I mean we're

not going to copy that but I'm going to

now add two text entries so the username

and the password text entry for that

we're going to say entry one is going to

be equal to custom TK enter ctk entry

Master equals frame

the placeholder text so we're not going

to use the label for this one we're

going to just have a placeholder text

that is displayed when we don't have any

text inside of that entry this is going

to be username

and uh that's basically it for this one

we're going to then say entryone.pack

padding y12 padding x 10 again we're

going to copy this now

and we're going to say entry 2

um we'll have the placeholder text

password and we're going to also encode

uh the actual input so when you enter

your password you don't want to show it

in clear text so what we're going to do

here is we're going to say show equals

and then a star symbol

we're going to pack this as well then

the button the login button itself will

be a custom TK enter ctk button with the

master being equal to frame it will have

a text

which says login and we will connect it

to the command to the function login

and of course again if you're doing this

actually if you're actually building a

login system you would implement the

logic inside of this login function here

so then we're going to say button dot

pack as well padding Y is going to be 12

padding X is going to be 10. and then

finally we're going to say check box

is going to be a custom TK enter Dot ctk

checkbox

the master is going to be the for Ram

again the text is going to be remember

me or stay locked in or something like

that and then we're going to do the same

thing check box pack padding y12 padding

x 10 and finally root dot main Loop

that is it so this is a very simple

graphical user interface you can see

it's not a lot of lines of code so we

just have very repetitive type of

defining objects setting text setting

certain things and then adding them to

the frame and the frame itself is added

to the root then we have functions we

can connect to buttons using the command

keyword but this graphical user

interface this is very similar to just

writing it in TK intro we can replace

custom TK enter here with TK enter and

we can replace all these ctk things with

the same name without ctk and then we

would have a TK enter interface but it

wouldn't look like this so if I run this

now you can see this looks like a modern

UI so this is actually a cool UI we can

see we have the button here we can see

we have the checkbox here I can write

stuff you can see it's also encoded

um and we can also change now the color

scheme up here so I can go and say make

it green

I can run this again and you can see now

the button is green

um here we also have a green check box

and we can also make this a light Mode

app so I can say light

and then you can see this is now in

light mode and green so you can play

around with that you can also set it to

system I think it's is it capital S I'm

not sure

yeah so it's now system it's dark

because my system has the dark mode

enabled

um but what you can also do is you can

go to the GitHub repository of custom TK

enter so you can just Google custom TK

enter GitHub and you can go to the

repository to look at some examples I've

downloaded two of them just to show you

what's possible it's not too fancy here

but a simple example is this one it

shows off a couple of elements you can

see we have here labels buttons combo

boxes where you can choose options with

different styles we can also use the

check boxes here the radio buttons and

we can also use sliders that are

connected to other elements

so progress Bar connected with the

slider so we have in this uh code that

is provided in the GitHub repository you

can see that the slider has a command

which is a slider callback the slider

callback sets the progress BAR value to

the slider value so that's quite simple

thing

um and then we also have a complex UI so

we can run this as well this is also

from the examples and you can see that

this looks just way more modern and way

more interesting than the

um the basic TK inter style I think you

can easily make the TK inter style like

that but you would have to do everything

manually this is by default a modern

looking graphical user interface so we

can see here we can switch the modes

dark light system would stay dark

obviously

um I don't think we can change the color

theme Here

but you can see how it works you can see

how all these elements look and I think

we should be able to set this to Green

and then we see a green UI if you prefer

that

so yeah this is how you build modern

looking graphical user interfaces in

Python so that's it for today's video I

hope you enjoyed it and hope you learned

something if so let me know by hitting a

like button and leaving a comment in the

comment section down below and of course

don't forget to subscribe to this

Channel and hit the notification Bell to

not miss a single future video for free

other than that thank you much for

watching see you in the next video and

bye

thank you

[Music]