Modern Graphical User Interfaces in Python

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]

Channel: NeuralNine

Views: 439,001

Keywords: python gui, python guis, python GUI, python graphical user interface, python modern gui, modern gui, modern ui, python tkinter, modern tkinter, customtkinter, python, gui

Id: iM3kjbbKHQU

Length: 11min 12sec (672 seconds)

Published: Mon Nov 21 2022