Tkinter Calculator - Python Basics with Sam

okay oh hey everybody this is sam uh from python basics doing our bi-weekly streams so today we're going to be looking at tkenter and building a little t-kenter calculator so is anyone uh familiar with what a gui is has anybody ever heard that term gui so it's graphical user interface and all that is is how are we going to interact with a user and take input and put it on the screen and have it be visual so we just aren't uh using command line things and things like that so all right let's go ahead and just get after it all right uh and jan if you have anything that is getting out of hand because i think you are a moderator as well if i recall i think i hope they gave you access because i don't see cardinal here because i think he did it two weeks ago okay so let's just go ahead and get after it so one of the gui modules in with from python is tkinter and it is literally just like this i think one time i heard uh tktk enter but i know i know it as tkenter so all right i just saw a comment about the volume is is the volume not that great all right this is the first time okay volume's okay all right oh okay jan i thought we gave you admin we'll we'll talk we'll talk on uh discord after this i don't see cardinal yet all right okay so tkenter let's just get into it so we bring in t kenter and we know all the little tricks well we're going to use some aliasing because i don't want to type to a lot like like normal all right so i do der and i do tk and here are all of my functions and methods that i use um to get things going and the first the very first step is this tk capital t capital k so let's look and see what in the world this does so i'm going to just we're just going to walk through it we're going to get a lot a few few little learning things out of the way and then we're going to jump onto the calculator and uh you have to forgive me if i sound um if i mumble a little bit today i have i had some mouth some some dental things done and it's i'm not completely recovered so well let's not get ahead of ourselves so let's look at help tk capital t capital k so all right it's a lowercase k now look how big this all of this is so let's bring this over so it's going to make a whoa screen so i got some optional arguments here but it's going to make a object top level widget and all that is is a fancy way to say i've made an i've made an object and we can do a tremendous amount of things with this but this is our building block this is our actual window then we can do things to that and inside of that window so tk now i'm going to show you that you can get this to work but this is not best practice right here this is not best practice to do i will show you best practice let's close this down so we can see so we're actually going to create our window object this is i just got it going but it's we're not in control of it right now it's just there so now now we're having a little bit more control and i have a now let's look and tcanter objects begin to layer very quickly so i want to show you now that now i have an object that then now has a tremendous amount of items that we can do oh yes everybody jan awesome thank you this is now our 11th video in this series so we've done we've done a lot of basics we've done a little bit of problem solving we've looked i think the only thing that i need to add to today that um we haven't done is we're going to look at um the evaluate function that's about the only thing i don't think we have touched on but um yes you can use idle the reason why the reason why i use this is specifically for beginners this everything that i'm doing is really based around somebody who has never used python so these are the tools that you get and everybody can use them i do i use others but i don't want you i want you to find something that works for you but everything that we do here you can do an idle you have this script editor which is fine which gets the job done and of course then you have the interpreter shell so it's it's fine it's a great starting place and you can do everything here you don't have to worry about um importing and environments you don't have to deal with any of that that's why we're doing this so okay now let's find something called main loop let's see if i can do my alphabet very well but the next thing is that we are controlling this but it's not really quite controlled let's see there i didn't want to embarrass myself anymore main loop right here this is how we actually control and have best practice where i'm literally controlling everything and then now i close it okay so now let's start getting into some more controls of this window so i've just assigned my tk object into a variable when then i take my win object and i run my main loop on it so we didn't even look at that when dot main loop but again if you are new here great we're glad to have you here make sure you're supporting free code camp wonderful organization i've gotten to know quincy and bo over the past few months and uh their team is doing some wonderful things to ensure and i've had my youtube channel if you're interested in seeing any of these things down in the description below is a link to my channel everything that i've done on here has micro videos over there so if you like long format great here we are if you get overwhelmed and you want shorter format you can jump over there and i have little micro videos but i believe in what uh quincy is wanting to do and uh that's why i'm spending my time here and giving you guys some really good info best practice and some pretty good skills so all right main loop call the main loop tk okay that's pretty self-explanatory now now let's look at how to control the window because right now python and tkenter are just doing what they know showing where what size to be no information and nothing else so let's see let's run der on when see what we get should be no title is that something that we can do okay here we go i can have a title so let's look and see how this works so help when dot title okay automatically defaults to none set the title for this widget or for our window the term widget is a term that's been around for decades it's an indiscriminate way to describe an object here's an object and then i'm sure you've seen it on your phones now it's pretty pretty much adopted everywhere what's up cardinal thanks for joining us today all right cardinals are admin we need to make sure cardinal remind me to uh let's get jan um admin i thought i sent that off to free code camp to to beau um help me remember because i don't want you getting overwhelmed but yes we have two awesome uh or we will have two awesome i don't think uh yeah it's supposed to be the wrench okay yeah so something went wrong but uh all right glad to have everybody here uh let's get after it so when dot title and what did we learn right here oh and look at this we bring in a we pass in a string calculator let's see if i spell right get all of my things so boom okay now let's see it automatically or default it's it's default argument goes to a certain size so let's see what other tools because i can shrink this and here we go so that's not very handy that this just comes out and is of a it's not that if i start putting buttons here the so one i at least want to be able to see calculator so guess what python and t cantor have solved this for us and there's two ways we can do this help not win dot configure [Music] all right so now this can take multiple arguments we're going to look at a couple of them so when dot config ear and so we got width 300 height 300 so now i'm starting to control the size okay so here we are right now now you can also pass in a background we're not going to go into all of them but you have a tremendous amount of control over your window oops i think i spelled background wrong and i got me an n forgot an n boom there we are so this is one way to control now i'm going to show you another way to control t-r-y if you're if you've been here a while you've heard me say that i am not a speller now this takes a string for the dimensions so we're going to pass in the exact amount and then i'm going to click over and i think my kids are right i think i do need a third yeah guys look the comments need to be uh python related and if we can have them be just specifically related to this tutorial because the mods have been instructed to um to just kick you because look we have a lot of because it it was um only member chat only but um had a chat with quincy and we wanted as many people to be involved as possible um so let this is your warning i want you if you want to be here to learn let's learn but the mods have been instructed to just kick you all right so the geometry so if we look right here okay so we got our 300 great whoopty do okay it's the same thing i can do it two ways now what i think is so cool about the geometry is that that method is now you can control where where it appears on the screen and we use the addition sign to control where it shows up so let's see let's do 200 and 200. zero zeros in the top corner uh x and y as they move down so if i make this 500 as you can see it moves over x y alright so now that we have a little bit of a few of those things out of the way now now let's get into uh i do want to show you some labels and then we'll get into the calculator more but i also want you to understand labels and buttons so and because we do need to look at packing so let's just do this so to do label and we are just scratching the surface of tk now also there is and i don't know if it's in this lesson that i go over as difference between because there's there's two um there's tk and then there's ttk running in in the uh also in the same library and one is a smoother rounding edges of buttons and things and it's just there's a little bit more there's a little bit more touch to it so if you are interested in having it be a little bit softer then this this piece of teekenter is very nice and we'll just go ahead and look at it so ttk dot label dot win so i want a label i want it associated with this object and then this is the text that i want this label whoops to display and we'll just go with the standard hello world close this out all right i forgot a very important part of this all right would i leave out ttk label for tkenter label dot pack shoot what am i missing let me check my notes all right okay i guess something is i could not believe that i've misplaced the notes on uh labels so we'll just go ahead and get into the calculator i guess i i could have sworn these are the right notes okay well i apologize tktk object when oh this is all capital i forgot that there we go and then there's not a lot of difference with um the the labeling but with buttons they have a little smoother edge to it so actually let's look at a button and i do want to show th this is an important lesson here about uh placement and order so i want to move this to show button when dot text text argument and we're going to learn a lot about arguments here in a little bit all different varieties of arguments that are already that are set so i run this i get my label but my butt my button didn't show up and it's because it did not get packed packaged all right uh so button dot pack so i want to show you i move this so i just moved button so let's see all right it didn't move it is how this is the order is by how this is packed so wherever it does not matter the arguments that you create the variables the arguments you create and the variable they're assigned to right that's what we do with our equal sign if we have some very very new individuals here it is the order in which they are packed packaged up all right that is probably the most important thing that you need to understand um yeah cardinal just uh i don't want you having a headache if uh look guys cardinal is here to partake and help um and also learn so if we if you guys yep we are going to be getting to grid we're going to we're going to get there we're going to get there i'm look everything i always do i assume there is someone here who has no experience with it and i want them to understand something i want everybody who's sitting here to never feel overwhelmed that's the point of all my videos and all my streams so there we go alright so we're packing is very important because if you do not do that doesn't happen now as someone was chatting about grid why don't you use grid well we are i want you to understand that you can have a very explicit control and how things come out all right so we got 30 i got about 36 minutes so let's just get after uh the calculator so this is i didn't show you guys this is i got this on the other screen so we're only going to see this is going to be our end result we're going to take button presses plus 5 boom so the only thing that we should not know in this example is the evaluation function i've gone over everything here all right so let's get after it so we have calculator we got some geometry let's see where we need to be and we're gonna have quite a few things to learn so we're gonna go slow and we're just gonna get them all all down all right let's see let's get in the right spot and see where we need to start but yeah i'm really glad to have everybody here i really enjoy doing this uh free code camp is a wonderful organization and i'm very grateful that i get to participate and do these streams and thank you everybody for showing up here i know my schedule keeps changing and i did not want to stop doing these so we've moved to every other week because i don't want to just say no but i can get it i can get enough stuff done and carve out uh an hour every two weeks but it was getting to the point where uh it was becoming more challenging so all right why don't we get the buttons and the layout on the screen and then because we have we have a tremendous amount to do and a lot of arguments so we got a lot of typing to do so let's let's just start there so like like somebody commented earlier why didn't we use why don't we use grid well we are because when when you have buttons and you're using coordinates and it becomes a headache well tkenter and python had thought about this so why don't we do columns and span span is um uh base basically padding and then columns and rows sorry there we go let's get started so we have button and we're just going to name them button seven so we're gonna here let's get this up so we can have a so we don't have to think about it we can keep this up over here all right so we're going to do 7 an 8 9 and a crossed and then we're going to check it always check it and then go from there so button equals all right tktk button then where is it going it's going in our win it's text is going to be seven now here's we're not gonna do the commands yet we're gonna do we're just gonna get it we're just gonna get it to the screen so then basically a different type of packing button 7 dot grid and then where do we want this we want it on row one and column i hate the word column i can never spell it then call the moon column zero all right and we got lots of typing and we're not copying because i will make a mistake and i'm going to live ttk button i think when i did this on the video on my channel i i edited it out because i made so many mistakes all right when dot text dot eight and button underscore eight dot grid and we're going to move over so same row all right i haven't checked on chat everybody hanging in there everybody doing okay all right it's the same row different column all right all right jan cardinal anything i need to know about all right so then over one all right then button so we got seven eight nine just like our keyboard just like this now i like the phone does anybody ever notice that it's just upside down five is always in the middle i was a weird kid i noticed that when i was very young all right so the 9 equals ttk button button when text because we're going to have a dilemma here in a little bit that we're going to have to solve underscore nine dot grid row oops i think i'm changing something yep rows stay the same columns change row one i think i can shrink this and see both chat and okay the plus plus 500 plus 200 that is the location those are the coordinates on the screen x so to differentiate and this so the times is 300 by 300 pixels then the plus is telling tkenter i want that is now going to be i'm differentiating between um the dimensions the size and the placement so i wanted it at pixel 500 down and excuse me 500 over 200 down that was the plus great great great question all right because look i will also tell you guys if you have a question and if you're not sure please please please ask it because somebody else has that question or if it's something you just learned ask it and some or if you figured it out while you're watching it still ask it because somebody else doesn't have that information because sometimes when i'll be in having discussions i'll ask a question even if i know the answer because i know somebody else there doesn't know and then i might even ask it itself because that was one of the things about um what um quora and stack flow post a question you know the answer to that you just learned and then and then go from there so all right now oops i made a boo-boo these all need to be strings all right so here's my divisor sign so i'm moving across seven eight nine and in my divisor all right then button underscore d dot grid then row 1 column we may start copying i hate it but i don't i want to get i want to get through as much as possible sorry this is my other one let's run this see how we do all right so we're getting close so now the problem is with this one we do not need this size we're going to allow python to help us with the sizing all right so that's all we have that's all we need so boom i turned this off and i said python go ahead and just size this uh to what it need needs to be all right so we just came through and we did all these all right let's get going on our where'd our second one go did it kick it out do i think it did because i'm using the same interpreter okay so four five six four five six multiplication all right help me make sure i don't make a mistake here everybody all right so four we got a lot to cover four four nope see i already did it five five six six and then uh what do i do what do i do when i when i say for this one i think i did m for multiplication so now we got to get this right so this is four this is five yeah six and multiplication all right so let's kick that out let's test oops grid so now we're all down a row see we're all down a row columns are the same we're all down a row now let's check this out now i've left out something there's a huge huge important piece but i want to let's get this all to the screen and then we need to learn about some very important things in teacanter all right actually the original versions of uh youtube uh was was python and um uh django if i if i recall my reading correctly if i remember my python history same thing with pinterest if i remember all right so we got two rows let's keep going so we're doing we did very very good we didn't screw up too bad uh let's see our notes actually we need to look at our example feeling very feeling very nervous about our all right so we got one one two two three three then subtraction so let's get changing all this so 1 2 3 subtraction the subtraction sign all right close that save run let's see how we're doing all right i have missed something because what just happened so i have seven eight nine one two three i did not change my rows this is why i hate copying you will never ever ever okay i will never get everything correct on the first go round so we got seven eight nine one two three four five six seven eight nine so we have we have seven of the nut we have nine of the numbers and we have three of the multiplication so we have uh we still have a problem all right run this what are we missing okay we need a zero we need a decimal we need a clear sign we need a um addition sign and then we need an equal sign so let's let's go let's deal with let's deal with our fourth one here and then we have a problem right here that we need to deal with we got two actual pretty big problems and some issues with the whole screen right all right i think we're doing good we got 23 minutes so now we got let's see we got 0 0 we're just going to stay with our little format dot i guess i could have called that decimal but we're going to stick with dot just just keep my notes so when i mess something else up we'll see then we clear it our clear oops this is again a perfect example i just pasted and i started changing in the wrong spot one two three okay let's see yep okay so zero zero then dot dot but yeah what we're going to be doing next is we need to we're going to be able to solve the entry bar or excuse me the equal button but our entry we have an entry bar that has a lot of things that we can do with and we're going to need to solve that so now here's our addition sign and then and here's uh oops one two clear forgot clear and then yeah i'm reading the wrong and then a then we need to deal with our entry our equal sign in a minute yes uh up up above if you're not on full screen you can see uh playlist click on the playlist and beau has done a great job of organizing these all they're in sequential order and like uh jan and cardinal were saying this is the 11th 11th one so all right let's close this out let's see what we did nope missed one more thing row four columns are the same just changing our rows let's see how we did all right we are getting very very close so we need we need an entry bar an entry uh widget and then we need just one big button to go across and this is how we do it so we go then we're going to learn about a new just copy this i hate doing this guys i just don't want to bore you guys with everything so our equal sign all right so then this is going to be equals e so this is row five now instead of column three well here let's run this we're gonna have a problem okay we got our equal sign here but we want this to run the whole span so we have our padding right here this is as we can see python is handling our padding we can we can do more with that if we'd like but we had how many buttons going across one two three four so we we were telling python we have column zero one two three okay we understand that that's zero indexing that's four so here's a new argument column span and we're going to change this to four so hey here's a button here's a row take up four columns oops take up four columns and then there's one more little thing so hey go in the middle and then there's a little term forgot this one sticky which how far do you want me to go and these are directional the compass directional north south east and west north south east and west i love this this is probably one of the coolest things that i learned about tkenter i want you to stretch it take up four and go out in all directions boom now all right now we got into it shoot i got we got to keep moving okay now we got to learn and take on some a little bit of uh we got to get into some housekeeping up here okay we need to learn about an entry bar okay entry ttk dot capital and tree and if you've noticed most of these objects begin with a capital i had forgotten that all right so we get win we get now when we're going to employ what we just learned about so grid now where did i start my row i did this kind of on purpose so we wouldn't have to do anything silly so this is row 1 for our numbers so now we're going to do this this needs to be at the top so this is going to be row 0 so row 0 column span one day i promise i will learn how to spell a column so column span 4 and our sticky no i wish i knew another language i did do something and i hope i didn't offend everybody it was a while ago over on my channel but i think the top seven languages i went and um uh tried to say them if i say what if i say thank you in hindi if i can remem remember correctly danyavad how'd i do how'd i do with the accent um but i wish and actually i've thought about getting some people that i know to translate for me um was that pretty good i did do good okay well thank you all right so sticky north south east and west north south east and west i will tell you a silly thing and i heard my oldest say it not too long ago never eat soggy waffles that's the compass around so you know the direction it goes in all right okay so now we need to handle some commands here in a bit a minute to get this math to do it but it looks like we'll run a little bit over i have a little bit of a cushion but uh okay so let's run this okay now i'm going to show you a problem that we have to solve if this drives you nuts like it does me to have numbers come out and start over there and work their way backwards i hate that i think it should be over here but it defaults to go over there but guess what we have a way to handle this and we use the argument justify and we want i want this to the right all right let's see what i did and then we're going to need to handle so now boom boom okay all right but we don't we don't we got we got nothing we got not we don't have anything coming up right now so we need we need to start handling all of these things and the way that you do this is you create a function shoot am i am i in frame then moving around okay cool i didn't want to be all out of frame like this i remember i've seen some videos i think a few of my first i was i was all out of frame and it drove me nuts i think i'd talk like this i hated it okay but uh i was moving stuff around today but yeah hey guys don't forget to make sure we're uh buying some uh free code camp merch uh because they're doing a lot of great work okay i digress we gotta get this going uh here we go so we gotta we gotta start handling some things so we need to have a press definition a function and this is going to how we this is going to be how we get keys keys on the screen and we need to create a couple a couple little uh expression we need this to be an empty string of what because we're going to add to it and we're going to be moving in and out of functions so we're going to use the global keyword sticky was how where do you want it to go and i wanted it to go to all edges i wanted to go to the top of the uh row i wanted to go to the bottom of the row i wanted to go to the right of the row wanted to go to the left of the row so i took this and i literally stretched it out for my equal sign and um uh my my entry bar so i set had it spread in all four directions north south east and west all four great question thank you perfect it will span column in all directions boom all right so now we're going to take in this global because we're we need to be able to bring this in from outside the function and make it available outside it's going to pass through and through because it's going to be passed to another function here very shortly so our cursor which we'll deal with in just a second gets moved in and out all right then we need to handle oh and we need to look at text okay we need to do this too all right we need to create an object that is a string a t t kenter string object how t kenter handles strings and this is how it does it uh text tk dot string let me get that out of the way string var alright so this is how it grabs information that you're passing to it and that is going to be our cursor this is the equivalent of our cursor and what information is associated to it that's what we need to know right now so now as we press our expression is going to increment up by the string of whatever num we take in now there's another issue that each time we set we take in this information we need to re-assign i'm setting this object i'm adjusting it every time through this text object this object and you have to each time you have a new one this is how i want you to think about it this is how i told one student one time the reason why you need different objects is this is this is the present and this is the box so you could buy like you could go to a shelf and you wanted to buy a bunch of gifts that were the same but you wanted to give them to different people you would grab all of the same objects but you'd wrap them in different presents that they would do different things that's how you want to think about this so alright we got global we got global so now here is my press function but now i need to then link this ability this command to each button and each a button object has a argument called command so then i'm going to link these two together so whatever command or function activity i would like this button to do i use the argument i use the command argument and link that function to that command for that button all right i know this is a lot but we're going to keep going slow and then for button presses we're going to use the lambda all right then press and this is seven so that i want a seven to go so guess what we're going to copy a bunch of stuff i hate this so bear with me did i get that last one okay there we go so i need to copy this paste paste paste paste paste paste paste and we need to change a couple we gotta change a lot but the actual keys not the but not the numbers they get treated a little bit different they get they get the string and then we need to talk about the evaluation function ooh somebody didn't catch this all right 0 decimal [Music] c and addition so now let's just go ahead and start here so then this is the addition sign the addition function because excuse me the addition operator because we're going to throw this into an eval evaluation we'll deal with this clear in a minute because we're going to handle this differently all right then this is dot this is zero [Music] thank you for bearing with me guys i know me typing is just so exciting so hopefully i am keeping this moving pretty quickly all right and star ups wrong do six five four nine eight so let's try this let's run this and see if it crashes okay i've already missed one okay see what else crashes okay i've i've tremendously missed a lot of things we're probably about to copy copy something because i hate fixing oh string bar decanter it's thrown up on string var okay let's close that out and see if we get it okay and we are not adjusting that all right text is not defined let's see where i'm missing text dot ttk see what i'm missing oh anybody else see it staring str ring all right okay so i'm getting okay all right everybody doing good all right so now now we need to get this so we have all the we have a lot of the things associated but there's one important factor that is not done so there is a text argument so on a button there's a text argument and if you want information to be in the button you use the text argument now a variable we we've we create variables to be able to do something to them to change them right well same thing in tkenter so now we have a text variable argument because that entry bar not only will it take in input but it's going to change if we hit the equal sign so that's why we use the text variable argument because it can change all right let's see how we're doing okay all right so now but nothing happens when i hit equal nothing happens when i hit clear so now we need to handle the equal sign and the clear sign so let's do that right now let's go ahead and close this out and we need to look at eval right now so help dot eval this is about the only thing that we've not looked at so in our world we understand that this string this is what messed me up times i get oops i get six i get six sixes and if i do this plus i get 63 not 9. but if i use the evaluation function python understands that yes this is a string but this is also an integer in in the world of ascii so it understands that i can pass in a string of a math operation that then it will convert it to that answer i know that can seem a little odd but let that sit and because again python understands that and has been past those rules past those rules that this yes it's a string but this is also a number that is a string right now and if i then pass it a complete um operation it can it will understand those string representations as a as a math operation and then return back the answer all right okay we got to keep moving so now we need two more functions we need an equal function hang on let me get a let me get a drink guys in a cough drop all right okay so we have clear so we take in our global our expression then we're going to put the expression back to zero because we're clearing it right so we're resetting it and then as we do that then we take our text our string our string variable our string var and then set it back to expression all right that's part of it but now we need to do the equal global alright total so we just used our so this is going to so let's look so this comes out as an int it doesn't like that this is a text so we got to wrap this in our eval our expression then we do our text dot set dot total all right does that make sense i know i've gone through a lot of stuff here so this is here so now now i need to come down here and do my clear fun or my yeah my clear function command equals our clear clear function and then our equals needs to be our command equal all right let's see how we did all right everything looks good i'm here 2 plus 2 equals 4. clear that 9 times 2 equals 18 clear that let's check and make sure we can do some decimals um we're going to do simple math 2.3 plus 0.7 equals 3.0 you could handle this if you do not want any decimal form you know how to do that uh nine clear nine divided by three oops oh i think we got a problem nine divided by three yep our divided sign we missed that where's our divided okay boom boom all right close save run okay let's bring this over here 9 divided by 3 equals 3.0 okay let's do um oh and then you guys could add the power you could add a whole bunch of other functions over here all right we haven't done any multiplication yet two times three is six okay cool all right guys as always thank you so so very much for joining us please make sure you're hitting that like subscribe notification bell buying some uh free code camp merch hit heading over to my channel uh subscribing we got a discord going uh cardinals been doing a fantastic job over there uh being an admin but yeah i just absolutely love and i want to tell you guys thank you for spending time here i know time is the one resource we do not have a lot of but i truly enjoy doing this thank you so much for spending your time with me today i really truly hope you got something out of it and as always guys thanks for watching and we'll see you guys in two weeks all right thanks again bye guys

Channel: freeCodeCamp.org

Views: 25,253

Keywords:

Id: PkLwJicRI8s

Length: 61min 50sec (3710 seconds)

Published: Tue Oct 20 2020