An introduction to tkinter + demo app

all right so let's get started with tkinter and already I want to start by making one app that is going to be very simple but it is going to look something like this in here we are converting miles to kilometers we have an entry field we can type any kind of number and if you convert it you get the output in kilometers a very simple app but it is going to cover all of the basics of tkinter although let's talk about these Basics first to make any kind of appendicular you need three major components the first one is called widgets if I show the app again a widget for example could be a button it could be some text it could be an entry field all of these are widgets tkinter has quite a few of them you're going to learn all of them although for now I am only going to cover three different ones text an entry field a button and another bit of text besides that we have layout this one determines how the widgets are arranged on the window for example in the app you can see here we have a top-down Arrangement where we have three different rows and then inside of the middle one in here we have two different columns one for the entry field and one for the button this would be a very simple layout obviously you can make much more complex ones finally we have Style style for example determines the color of the button the font of the text the size of this text and so on we could also set the background color and lots of different things all of this is inside of the style if you understand these three main components you are going to have a fairly easy time designing whatever kind of app you want to create until counter that being said each of these parts can be quite extensive and I have lots of videos on every single one of them and to understand them in detail it is going to take you some hours now to get started with this app here I am going to skip over a lot of the details that I will cover in future videos so let me explain how you can follow along for this video there are three ways you can approach this I would recommend you to follow along is to download the code and then just play around with the code and follow along as I create this app from scratch that way you're not going to get too lost and you just play around and change some individual values and see what happens besides that you can also follow from scratch and don't worry too much about the details because at this stage you don't really need to understand every single bit you just need to have a very basic overview of how tikente works with all of the individual bits finally you can also skip this video and go straight into the separate parts you are not going to miss anything although I guess if you follow this video you have a tiny bit of a head start to see how the different parts connect with each other but just to emphasize for this video you don't have to understand every single bit of tkinter I am just going to cover the really Basics and over the next couple of videos we're going to flesh out all of this in a lot of detail so just relax follow along and if you understand even 10 you already have a really good start so let's jump in and let's create an app here I have a completely empty python file and to get started I want to import tkinter and this is usually abbreviated STK besides that I also want from tkinter import ttk inside of ttk we have all of the widgets that we actually want to use while TK gives us the basic logic once we have that we can create a window or the main window we put everything else on this we create with TK and then TK this we have to call is going to return an object that I want to store inside of a window variable for this one you do want to be careful here with what letters are uppercase and lowercase basically everything is lowercase besides the second t with this we have a window although if I run the app now nothing is going to happen although we don't have a crash that's usually a good start we actually see something we have to call what is called the main Loop let me add another section here called run and I want to call the main Loop method on the object we just created now if I run this we have a basic window and on this window we can already make some changes for example I can get the window and set a title this is just a string let me call it demo if everyone is now in the top left we have demo besides that we can also set the size of this window this we do with window dot geometry in here again we're going to need a string this string wants a width and a height separated by an X for example in my case I want the app to be 300 pixels wide and a 150 pixels high if everyone is now we have a much smaller app next up I want to create the first widget this let me add another section here called title and the widget I want to create is called a label this label I want to store in a variable let me call it title label label in tkinter is just a fancy word for text and this label we create with ttk dot label in here we need a couple of arguments a really important one is we need to set a master and the master is basically the parent which in our case is going to be the window the way you want to think about it is that this label needs to be in some kind of container and the only container we have right now is the main window after that I want to create some text so the actual text this label is going to display in my case I want to display Milds to kilometers and with that we have a label widget although if I run the app now we cannot see any kind of text the reason for that is that we need another kind of method to place this label on this window decanter has quite a few of those but I'm going to use the simplest one it's called pack now if I run this again we can see miles to kilometers although what I am quite unhappy about is the font size this one we can also change by adding another font named argument and in here we need a string then we need the font and the font size the font size in my case is 24 and the font I want to use is called calibri now for once again we have a much larger piece of text what you can also do is add something like bold in here that one would give me bold text next up I want to create the input field if I run the app again the input field is going to be this area here for this one I want to have an entry field next to a button although what is really important here is that both of these widgets are inside of a larger container so essentially we have to create three different widgets here but let's go through it step by step first of all I want to create what is called a let's call it input brain this is going to be ttk and frame this like the label is going to need a parent or a master which again is going to be the window which means I want to set the master to window besides that the frame doesn't need anything else now I have a frame that I can put witches into and I want to put an entry inside of this Frame and a button the entry we create with ttk and entry this one now also needs a master but the master now is going to be this input frame which means input frame in here Order button I want to have ttk and button and once again the master is going to be the input frame although the button is going to need a second argument and that is going to be the text let me call this one convert this will be the text the button is going to display what we now have to do is take both of these widgets place them inside of the frame and then place the frame itself inside of the window and that is going to happen the same way we have placed the label using the pack method which means I want to get my entry widget and I want to pack it or place it with the pack method this I also want to do with the button which means button dot pack with that we have these two widgets inside of the input frame finally I want to get the input frame and pack it on the main window if I run this now we can see we have an entry field and a convert button let me move this a bit to the side and the way you have to understand this this input frame here is a frame around these two widgets and this we have placed using the pack method and what pack does is it places widgets below each other we first have the title label this is the first one here and then we have the frame this is the second one here and inside of the frame we have these widgets here we have an entry widget and we have a convert button since those are also placed with the pack method here they are on top of each other I hope that makes sense once again if you don't understand this don't worry too much about it I will explain all of this in a lot more detail although now I have a problem I want this entry widget and this button next to each other for that we can add an argument inside of pack and this I want to do for both the entry widget and the button the argument I want to add is called side and the side here is going to be left if I run this now we have the widgets right next to each other what you can also do in here is set some padding so pad X could be 10 pixels for example and if I run this now we have a bit of a gap between the entry field and the button this area here a similar thing I want to do to the input frame in here I'm going to set padding for the y-axis this one could be let's say 10 pixels and now we have a bit more space on the top and the bottom because of this pad white 10 pixels here we have a bit more space above and below this Frame now finally we need one more widget and that is going to be the output in here I want to have an output label this like the title label is going to be ttk and label this one is going to be inside of the window container which means the master is going to be the window and for now I'm going to set some text let me call it output this output label we now have to pack on the window so we can see it and there we go we have output all the way at the bottom although for this one I don't really like how small the font is as a consequence I'm going to steal the font from the title label and paste it in here and remove the Bold part with that we have output that looks kind of similar to the title except a bit less bold for this pack method I want to set a bit more vertical padding let's say 5 pixels and with that we have our basic app now I can add a number in here and click on the button but nothing is going to happen for that we have to add a bit of functionality the most important one is inside of this button whenever a user is pressing the button I want something to happen and for that we want to add the command argument this one wants to have a function let me call it convert this is going to be a function and this function we have to create I want to Define convert it doesn't need any arguments and then here we could for example print convert if I now run this again and I click on convert we can see convert in the bottom because of this print statement here what you really want to be careful here is that you only want to pass a function in here you do not want to call this function the function is going to be called by the button itself so be careful with that one next up whenever I'm pressing the button I want to get the content of this entry field and there are two ways of getting this the first one the easier one is we can get the entry widget itself and then run the get method if I run this again I can type some text in here let's say 10 and now if I click on convert we get 10. that's a pretty good start but that's not usually the method you want to use to get values from a widget it's not particularly efficient you will learn later why instead what you want to do is create a separate variable that holds the value of this entry widget and tkinder has specific objects for that for example in my case I want to create an entry integer this accurate with TK and int VAR and make sure to call this one this is going to create a separate variable that can store and update values and this I want to connect to this entry widget using the text variable which I want to set to entry integer anything we're adding inside of this entry field will be stored inside of this entry integer also whenever we're updating this entry integer we're going to update the content of this entry field although this isn't what we are going to do for this video once you have that you can inside of the convert method instead of Entry I want to get the entry integer although the get method still works just fine if I run this again I can type a number in here I can click on convert and we're going to have the same result so far this wasn't particularly useful but where this system becomes much more powerful is labels can also have their own variable for example since I want to change the output label to the result of this conversion I want to create another taken that variable this I called the output string and this I create with TK and string VAR again don't forget to call it now this variable is going to work kind of like the invariable except it is going to store a string instead of an integer also I just realized I kind of messed up the naming convention here this shouldn't be entry in like this there should be entry int like so let me fix this right away I want to have entry in here and enter it all the way at the top but back to the output label now we have a variable that can store the data for a label this I want to connect to this output label once again for that we need a text variable the text variable here is going to be the output string and let me put all of this over multiple lines so it's a bit easier to see like so now if I run this you will already see some difference and that is let me scroll down a tiny bit when we created this output label we have set a text but after assigning this text variable here we cannot see any more text inside of the app the reason for that is that the text variable overwrites whatever text is inside of the label and this we can use to update the label dynamically for example when I am pressing the button I want to get the output string and I want to set a new value the new value could be let's say test for now if I run this again and I click on the convert button we now have testing here with that we are able to get data and update the widgets so now we can combine all of that to actually make the app work first of all I want to get the mile input this is what we're getting from the entry widget so this line here I can just copy it in here like so with that we have the miles this I want to convert to kilometers let me call it km output to turn miles into kilometers we need the miles itself so mile input and multiply it with 1.61 one mile is always 1.61 kilometers and this kilometer we want to Output in the label like so and now if I run this again I can type in a 10 in here convert this and we get 16.1 I can do this multiple times let's say a 2 and we get 3.22 I can also add large numbers in here this is still going to work just fine let's try one more time and again this is looking really good and with that we have some basic functionality so with about 37 lines of code we have a functioning app that at the very least does a basic thing although if I run this again this doesn't look very good right now the problem for tkinter is that the default starting methods are very limited but to account for that tkhinter has external modules that you can work with the one that I'm going to use I want to import with ttk and bootstrap this is another module that you have to install and that is going to happen either in the terminal or on the Powershell for example if you are on Windows you want to type pip install ttk bootstrap and run this again in my case this isn't going to do anything because I already have this installed and on Mac OS you would type pip3 install ttk bootstrap you would have the same result with that we can use all of this and the way you will use this is you are importing ttk bootstrap as ttk basically what's going to happen is that ttk bootstrap takes all of the ttk widgets and adds more styling options which means I can simply comment out this one here we can already see an update if I type A Tenon here we can convert and this entire thing already looks much better that's a really good start what we can also do instead of setting the window with tk.tk we can get ttk dot window run this again and now we have to expand the window a tiny bit and we get the same kind of styling although what we can do now is we can set a theme name and in here we have a lot of different themes we could choose from for example the one you have seen earlier is called Journal if I run this again and expand the app we're going to fix this later now we have a different kind of app and while most of what you see is a different button color but the rest works just fine a dark color you could use here would be called Darkly and this one is going to look something like this although this doesn't change any kind of functionality there we go this is still looking pretty good and with that we have a basic tkinter app we have covered styling we have covered widgets we have covered layouts and we have covered functionality all of the basics of T Kinder although over the next couple of videos I will flesh out all of this in a lot of detail and we're going to start by talking about all of the widgets that you have available I'll see you there

Channel: Atlas

Views: 24,515

Keywords:

Id: OfAqWspoBb4

Length: 20min 21sec (1221 seconds)

Published: Thu Dec 01 2022