Using Entry Boxes On Canvas - Python Tkinter GUI Tutorial #149

what's going on guys john elder here from codingmate.com and in this video i'm going to show you how to use entry boxes on canvases with kinter and python all right guys like i said in this video we're going to look at using entry boxes on top of canvases but before we get started if you like this video you want to see more like it be sure to smash the like button below subscribe to that channel give me a thumbs up for the youtube algorithm and check out konami.com where i have dozens of courses with hundreds of videos that teach you to code use coupon code youtube1 to get 30. membership that's all my courses videos and books for one-time fee it's just 49 which is insanely cheap okay in the last few videos we've been working with the canvas a lot uh dealing with like resizing background images and resizing other things as well and i've been getting a lot of questions about how do you use other widgets on top of canvases so entry boxes we've looked at buttons a little bit in text a little bit uh but entry boxes are a big one text boxes other things like that so in this video i'm going to show you how to use entry boxes on a canvas so we're gonna make this little fake login screen here i've got a little background image we've got some entry boxes when we click it it disappears a login button when we click it everything disappears this isn't actually logging into anything it's just sort of a fake little thing to show you how to do this okay so i've got a file called canvas underscore entry dot pi it's our same basic kenter starter code that we always use i'm using the spline text editor and then get bash terminal as always so i've i set our app size to 323 by 576 it just happens to be the size of the little picture i'm going to use for the background so i've imported pill up here so we can use image tk and image we don't necessarily need to do that because we're not going to be resizing anything in this video because i showed you how to do that in the last video in this video we're just going to look at using entry boxes with canvases so we don't necessarily need this but we've been using it for the last few videos to deal with image things so i figured we'll just leave it there so the first thing let's define our background i'm going to call this bg and this is going to be an image tk that's a lowercase k in there and it's going to be a photo image and we can set the file equal to and i've got my background sitting in images slash app slash bg.png and you saw it earlier this little tree picture and this images folder is sitting inside of our gui directory so we can use a relative path here because this file is also sitting in the gui directory otherwise we'd have to do something like c gui whatever but we don't have to do that we can use a relative path so okay that's that so now let's create our canvas let's go my underscore canvas and this is a canvas we want to put it in root and we want the width to be 323 and the height to be let's see 576 which was just the same dimensions of our app right and we can go my underscore canvas dot pack to pack this guy onto the screen we want to fill equals both and we want to expand equals true so that the canvas fills out to the entire size of the app even though we set the width and height we still need to expand it otherwise it won't actually expand and fill everything so okay that looks good so okay now let's put the image on the canvas so let's go my underscore canvas dot create underscore image and we looked at this in the last couple of videos how to do this this should be uh old hat by now if you didn't see those videos check the link in the comment section below for the playlist and we want to set our background image to bg which is this guy right here all right we also want to anchor this in the northwest corner okay so let's go ahead and save this and run it just to make sure that looks okay and we get this now you'll notice there's sort of a white border around this maybe you want that maybe you don't i'm going to go ahead and take that off and we can do that by coming up here where we define our canvas and set the border to zero and we also want a highlight thickness let's set that equal to zero we save this and run it now we don't get that sort of border around there looks more sort of sleek and stylish as an app normally would so okay looking good now let's create our entry boxes and i'm just going to put two entry boxes uh i'm going to call this one username entry and this one will be password underscore entry and like i said we're making a fake login screen so that's what we'll call those and this is going to be an entry box we want to put it in root and we want the font to equal and let's do our normal helvetica and i'm going to make this like size 24 so the font's nice and big right off the bat i'm also going to set the width to 14 and the foreground color to let me just paste this in 336 d92 which is sort of the uh one of the highlight colors of our background image right so when the text when we type the text into the text box it'll have that sort of light blue color which is what this is i just got that from photoshop and the color picker thing there and i'm also going to give this a border of zero so our entry boxes won't have a border they'll just be flat i think that probably looks a little bit nicer so okay let's go ahead and just copy this whole thing and let's paste it in again okay now we want to add the entry boxes to the canvas and this is where the rub of this video comes in so how do you put entry boxes on a canvas how do you use them with a canvas well with most widgets except for the text that we looked at in the last video buttons entry things most widgets a good number of them at least you create a window and then you put the the widget in the window and then you put the window in the canvas and we looked at this with buttons in the last video same exact concept so i'm going to create a username window and a password window those kind of correspond to the names we picked here for username entry and password entry i'm just calling them window and that's going to be a my underscore canvas dot create underscore window now we can place this wherever we want on the screen so give it x y coordinates i'm going to put this at 34 and 290. so over 34 and down to 90. i also want to anchor this i guess sort of northwest give it a reference point and now we give this a window of what well we want to put this entry widget in there so we just place it right there right so okay pretty simple i'm just going to copy this and paste it again so same thing create window we want to change these numbers uh we'll keep it at over 34 but we want to put it down 370 i think that's probably a good number and instead of viewing entry as our window we want this to be password entry so let's go ahead and save this make sure that looks okay so okay we've got some stuff looks good notice the text is that sort of light blue color there's no border around this roughly centered i just kind of eyeballed it and we're looking good so okay so now for fun let's just create a button i'm going to call this a login underscore button and this is going to be a button we want to put it in root we want the text to equal log in and likewise i'm going to give this a font let's go helvetica and a size of 20. i also want to give this a width of 15 that'll stretch it to the size of our entry boxes and i also want to give this a foreground color of the same thing we gave this i'm going to use this same color keep a nice theme throughout here now to add the button we do the same thing we did up here so i'm gonna create this i'm gonna call this login underscore btn underscore window and this is gonna be my well actually let's just go ahead and copy this whole thing paste it in again so my canvas dot create window let's put this at 36 by 470 i think that should push it down a bit and for the window we want login button so we could just paste that in all right let's go ahead and save this and around let's see if that looks okay okay pretty good so we got this button that stretches to the size of these things and that's all there is to it so strictly speaking we're done this is how you put entry boxes onto a canvas very very easy we can play around with this and have some fun we can maybe uh let's have this say the username and let's have like i don't know stars come up here but let's put some placeholder text in first so password we'll have it say password until you type and which point it will turn into stars that would be fun right so let's see where we defined our entry boxes let's go un underscore entry dot insert we want to insert into the zeroth position and let's put this as username let me just copy this this will be password entry and we'll have this say password save this and run it make sure that looks okay okay that's fine now when we click on this i want this this text to disappear right i don't want to have to hit delete to get rid of this so whenever we mouse click on this i want that to disappear so let's do that that'll be fun let's come down here and let's do a quick binding let's go bind the entry boxes so let's go un underscore entry dot bind and we want something and let's call the function entry clear we haven't created that yet we'll create that in just a second so we need two of these we need one for the password entry and one for the regular entry now what do we want to do whenever the button clicks on the entry field we want something to happen we want this function to run so what is the binding for that that is button dash one we've looked at this before just like that so okay paste that in there so now let's go ahead and create this function so define entry clear function so let's define it we need to pass in an e for an argument right so whenever this is clicked we want un underscore entry to delete whatever's in there at the zeroth thing from zero to end so let's go ahead and copy this we'll do the same thing for password now this will work as we'll see but there's a problem with it and we'll look at that in just a second so let's run this and see so it says username password now when i click on it boom that disappears and i can type my username but then when i come down here and click on this to type my password boom it disappears again which we can't have that so let's fix that we can fix that real quick with just a basic little if statement so inside of here let's go if you in underscore entry dot get get whatever's in there if that equals username or our password underscore entry field dot get equals password so we can run this if statement if those things are true if it says username or if the password field says password then delete these things otherwise don't so let's go ahead and save this and run see if that worked fun with entry boxes so now i can click on this i can enter a codeme my username then i can come down here and i can type the password but when i type this stuff it shows up we don't really want that this is a password field we would want like stars to show up so how do we do that super easy go back to that same function and just inside of here let's go let's change text to stars we can go password underscore entry dot config and we want to set the show equals to that the star so this will show a star whenever we type anything into our password entry field so let's go ahead and save this and run it so here we go we type stuff in it comes in as stars we can type in our password okay so looking good now we click this nothing happens let's knock out a little function for that just for fun because hey it's tuesday we're having fun on tuesday so let's come back to our button and where we defined it let's give it a command of let's call this welcome right and we haven't actually created that so create welcome screen maybe let's define welcome and what do we want to do here we want to clear the screen for once so let's un entry dot destroy that guy get rid of that box and then password underscore entry dot we'll get rid of that one too we can destroy that and let's get rid of our buttons so that was login underscore button dot destroy and then maybe we want to uh add a welcome message so we can my underscore canvas dot create underscore text we looked at this in the last video and let's put this at position 160 by 450. so over 160 down 450. let's give it a text of welcome i don't know right we can give this a font of let's go our trusty helvetica let's give this a size like 40 make it nice and big and let's give it a fill equals white to make the color white all right so let's go ahead and save this run it one more time uh-oh welcome is not defined so we put the welcome in the wrong spot so i'm gonna go ahead and just copy all of this it needs to be above our button now let's just put it up here anywhere above the button will work because the function has to exist before the button exists otherwise when you press the button nothing will happen because it doesn't know where the function is so we can click this boom now it says welcome and we're good to go so okay what else can we do well we've got this maximize and we can resize it and we didn't do the functionality to resize all these things maybe we'll do that later but in this video i want to keep this non-resizable so let's get rid of the function that allows us to resize our app so we can head back over here and just up here at the top we can just give this a root dot resizable and we can set the width to false and we can set the height to false also so go ahead and save this and let's just comment this uh make sure app can't be resized save this run it one more time you'll notice this box up here is grayed out you can't click it if we come down here and try and grab there's nothing to grab so we can't resize it we can enter our thing type in a password click this boom and we're good to go so uh just a silly app that doesn't actually do anything this isn't actually connecting to any authentication system but you could do that if you want on the back end slap a sqlite database on there or whatever and uh do your thing you probably know how to do that already if you haven't you can watch past videos where we went into database stuff but that's pretty much all there is to it so entry boxes on canvas very easy to do most things on canvas will work that way you create a window you put the window in the canvas and then you assign the widget to the window like we did with these entry boxes and it's pretty simple so that's all for this video if you like to be sure to smash the like button below subscribe to the channel give me a thumbs up for the youtube algorithm and check out codeme.com where you can use coupon code youtube1 to get 30 memberships to pages 49 taxes all my courses over 47 courses hundreds of videos in the pds of all my best-selling coding books join over a hundred thousand students learning to code just like you my name is john elder from codingme.com and i'll see in the next video

Channel: Codemy.com

Views: 20,322

Keywords: tkinter entry on canvas, tkinter canvas entry box, how to put an entry box on a canvas tkinter, python tkinter entry canvas, python tkinter entry box canvas, tkinter canvas text, tkinter canvas python, tkinter canvas widget, tkinter canvas image, tkinter canvas entry, tkinter password entry, tkinter password field, tkinter password entry box, tkinter resize, tkinter resizable false, john elder, john elder tkinter, tkinter john elder, codemy, codemy.com, tkinter.com, python gui

Id: 32v2rdQnXvQ

Length: 16min 36sec (996 seconds)

Published: Tue Dec 01 2020