Python Curses Tutorial #4 - User Input and Textboxes

Key Takeaways

hello everybody and welcome to the fourth video in this python curses tutorial series in this video i'm going to be showing you how to get input from the user so how to get key strokes as well as the characters that they type so let's go ahead and get started [Music] all right so the first thing i want to show you is just how to get the keystrokes from the user and then i will show you how to actually implement a text box and some more advanced things so you can see here that we have std scr dot get ch now this is a method we've been using a ton and all this does is wait for the user to type something in and then give us the value of what they typed in so also note here that i'm in the same example i was in all the other videos i've just cleared everything other than the colors so what i'm going to do is say key is equal to and then this line here now this is again going to wait for the user to type something and then give us the ordinal value of what they typed now the ordinal value is going to be the number that represents the character they typed now if you don't want the ordinal value instead you want to get the actual key name then you can use getkey now this will give you like a if you type in a it will give you like shift or like left underscore shift if you hit that key there's a bunch of kind of weird names for all of the i guess controls on your keyboard other than just the regular characters but hopefully you get the idea so what i'm going to do here is i'm going to allow the user to type something in and then i'm just going to show it on the screen so i'm going to say let's go std scr.ad string and then let's add an f string and let's say key colon and then we'll go with key like this inside of here and we can place this at like five five that's fine okay then we'll refresh the screen so let's say refresh and then we will wait for the user to type something in except this time i don't care what they type in so i'm just going to use get ch like that and this will just mean we aren't going to immediately exit the program we have to enter or some other key before we continue okay so let's run this and let's just see what happens so i'm going to run python tutorial 4 okay i'm going to type in h and then no notice when i type in h it shows key and then h okay so let's get out of this let's run it again let's try hitting escape notice it gives me this key apparently that's the key that escape represents or that represents escape okay let's continue let's go to something like three it's gonna give me 3 okay let's try this again let's go with l okay it gives me l you get the idea it gives us the keystroke that the user typed in now the thing is here it's waiting for the user to type something that's fine we can wait for the user to type something a lot of times we want to do that but sometimes we just want to kind of be listening for the user to type in any key and if they hit any key we're going to respond to it so now i'm going to change this example a little bit and i'm going to listen for the arrow keys and if the user hits an arrow key i want to kind of move something around the screen so this will be a bit more of an advanced example but i think this is fine to go through so let's get rid of all of this right now and let's set up a wall i'm going to say while true and inside of here what i'm going to do is i'm going to get the key that the user types so i'm going to say std scr dot get and then this is going to be key we're going to store this in key then what i want to do is i want to check if this key is one of the arrow keys so i actually have to look at what the name of the arrow keys are let me look for those and i'll be right back okay so it looks like they're pretty straightforward it's just going to be key like this underscore left so this is an underscore story and then up right and down that's what the name is for the arrow keys so what i'm going to do here is say if key is equal to this then we'll do something we'll say alif key is equal to then this will be key underscore right then we'll do something so pass and then we'll say l if key is equal to k underscore up then we'll do something pass and then we'll say l if key is equal to key underscored down then we'll do something now what i'm actually going to do is i'm going to say my x comma y is equal to 0 0 and if i hit the key left i'm going to say x minus equals 1. if i hit the key right i'm going to say x plus equals 1. if i hit the key up i'm going to say y minus equals 1. remember if we go up we are subtracting from the y and then i'm going to say y plus equals 1 if we hit down then i'm going to draw let's just go with like a 0 or something on the screen and we'll move it around based on us pressing the arrow keys so i'm going to say std scr and then i'm going to place this at y comma x and i'm just going to place let's go with a 0 like this and we don't need to color it's fine we can just have a 0. so the idea here is oh what am i doing i'm going to say add string sorry is that we're going to draw the zero at the x and y and we will then change the x and y based on what the arrow key is and that will allow us to kind of move this around the screen this is something you might do if you're trying to make a game then i need to of course clear the screen and update it so let's first go with refresh and then at the top of the while loop here i will clear the screen so std screen dot clear and in fact i actually don't want to do it up here i want to do it right before i add this because remember this is going to wait for us to type in a key so if i were to clear it at the top then we would actually never see this moving because what would happen is we would draw this we would refresh then we would immediately clear and then we would wait this way we're going to wait for the key then we're going to clear the screen so we'll see the key or we'll see the zero while we're waiting for the keystroke then we'll clear it and then we'll move it okay hopefully that is clear let us run this now and see if this works okay so let me try to move the arrow key so i'm moving this over so i'm going to the right i'm going down i can go left and up now if i try to go too far upper left we're going to get an error because we can't draw this on the screen but we don't really need to worry about that for right now the point is we can kind of move this around very nicely there you go we now have a way to actually use the arrow keys to change what is on the screen okay so let's get out of this i actually didn't make a way to get out of it so let me just crash that is the way that we can look for certain keystrokes all right so now that we've looked at that example i want to quickly show you how we can make it so this line right here is not going to hang our program now what i mean by that is right now we need to type something for something to happen if i don't type something then we're just going to be waiting on this line because this line waits for the user to give some input now a lot of times what i want to happen is i want to handle the user's key press as soon as they press it but i don't want to be waiting for them to press something i want to still be able to say move something around the screen or handle something else i don't want to have to wait for them to press something so i'm going to show you how we can handle that now the way we do that is we actually say i pasted in the wrong command but it's going to be std like this scr dot no delay true so when you set this to true you're saying i don't want this to delay which means that it's just going to not delay if you don't type something in what's actually going to happen is you're going to get an error but we can handle the error so let me show you what i mean here i've just set this no delay equal to true and now if i go here and i run this notice we get a problem or an error that says no input at this line so the issue is since we're not waiting for the user to type something in we're still trying to get what they typed in and if they don't type something in that gives us an exception so what i need to do here is just say try and then i'm going to say accept like this and i'm just going to say key is equal to none okay so what this is going to do is try this line if it results in an exception so we didn't hit something then we're just going to say key equals none so that way this doesn't crash and we still have access to a key variable so let me run this now and notice that i can now press the arrow keys and it works the exact same way as it did before except i'm not waiting or delaying on the user to press something now to prove that to you we actually need to implement something else let me just crash this program here because right now this doesn't look any different than what we had previously so now that we've implemented this node delay i'm going to start moving some text on the screen so i'm going to say let's go with what do we even want here stdscreen.add string and let's just go with hello world let me just make some variable here let's call this string x is equal to zero and every iteration i'm just going to increment this string x plus equals one and what i'm going to do is say zero and then string x like that and we'll actually i'm trying to think how i can make this not move super fast you know what for now this is fine so what this is going to do is it's going to move this string but i actually realize i need to do this right before i clear the screen otherwise we're never going to see it so we're going to increment the string x and we're just going to continually move this string while this while loop runs so let's try this and notice that it just zips right off of the screen that's what i was trying to avoid i don't really want to add a time delay here uh so to fix this i'm going to say plus equals 1 and then i'm just going to divide this into divide this by 50 just so that i have to increment this 50 times before this moves over one pixel or one character okay let's try this now and let's run this and notice that hello world is moving even though i didn't type something and while i'm hitting the key i'm still able to move this while this is moving on the screen now if i get rid of the no delay which i'll show you now oh that's kind of cool and it moved to the next line that was interesting but if i get rid of the no delay so let's just comment this out you're going to see that this string doesn't move so actually notice nothing's happening and as soon as i hit a key then hello world's actually able to start moving let me see if i can get it to move once i need to get this count up to 50 okay so you can see it moves once but the problem is we're waiting for me to hit a key so it's not moving whereas when i put the no delay true then we're able to move even if i'm not pressing a key okay hopefully that makes sense let's crash the program now what i will show you is how to actually get user input so how to allow the user to type in say you know like a paragraph and then to get that paragraph and handle it okay so let's clear everything that we have so far let's get rid of all of this and let me now talk to you about something called text box so it turns out i already imported the stuff that i needed i was messing around with this before the tutorial you can see we have from curses.txtpad import textbox and rectangle so you need to import both of these things we're just going to use a rectangle to draw it on the screen and kind of make an outline for our text box anyways now that we have that imported the first thing i want to show you is how we draw a rectangle on the screen this is pretty easy but i'm going to say rectangle like this and then i'm going to put where i want to draw it so i'm going to draw it on the screen and then i need to put the x y position so i'm going to go 2 2 so this is the top left hand corner of the rectangle and then i need to put the bottom right hand corner of the rectangle so i'm going to go with 10 and then 20 like that okay so that should draw a rectangle so now i could say std screen dot refresh like that okay so this hopefully should draw a rectangle let's see if this is gonna work so tutorial four and it did draw a rectangle and it just very quickly crashed on us or stopped because we didn't have the line that we need which is this okay so let me run this reminder this gives you the ordinal value the other one gives you the key value so what i'm going to do here is run this and notice we get a beautiful rectangle on our screen and if i hit enter then we exit so that's how you draw a rectangle now one thing because i realized i didn't really cover this in the last kind of section here as i was saying getch gives you the ordinal getkey is giving you the actual key value now the key value it's kind of hard to check for the function keys or the shift key or the backspace key if you want to find those i actually have a list right here it just went off my screen let me see if i can find it this is the documentation for curses i'm going to try to find where this list was it was literally just on my screen and then it messed up okay so here we are we have like keymin keybray key down keyright key backspace so i'll leave a link to this in the description and it shows you literally everything that i'm covering in this video what all of the different kind of key names are and how you access them okay hopefully that's helpful anyways that will be linked in the description for now though you can see that we drew a rectangle now my rectangle is a bit big so i'm going to make it a little bit smaller i'm just going to only make it three rows high so now let's run this and what happened there okay we got our rectangle showing up that is what i want so now what i'm going to do is i'm going to put a text box inside of this rectangle by creating a new window so i'm going to make a new window up here i'm going to say win is equal to and then this will be curses dot new win now for my window i actually forget exactly what i need i think i need the whip height and then top left hand corner position let me look at my little cheat sheet here to see what we need to do um yes it looks like we're going to go with height and then top corner position so for the width i want the width to be let's go with uh 18. the reason i'm going to go with 18 is because this is 2 and 20 and so the width of my rectangle is going to be 18 so that's why i'm putting 18 here for the height i'm going to go with 3 and then for the top corner position i'm going to go with 2 2 so it starts exactly where this rectangle is okay so that's our window now i'm going to place a text box in this window so that's why i'm making the window the exact size of what the text box is going to be so now i will make my text box now to do that i'm going to say box is equal to text box and then i'm going to put this on my win okay and then if we go here you can see we're importing text box right okay so let's just run this here and see what we're getting okay notice we're getting our box and actually really nothing has changed now let me quickly explain what this text box actually does so this text box is going to give you kind of a text editing area again you're putting it inside of a window so it's going to take up the size of the entire window and it's going to give you emac like commands so emacs is a text editor it's kind of like a console terminal text editor very very old anyways it has a bunch of keyboard shortcuts and you can use those same shortcuts inside of this text box so for example if you want to get out of the text box you have to use control g okay really weird but this is the keyboard shortcut you have to use to say okay i'm done editing the text box you do ctrl g so what i'm going to do here is i'm now going to say box dot edit but i need to make sure i do that after i refresh the screen so let's do it right here and actually let me see if that's even the correct place to do it uh yes that looks like that is fine okay so what i'm doing here is i'm creating a window i'm creating a text box that's going to be on that window i'm then creating the rectangle that's going to kind of cover the the text box i'm then refreshing the screen so all that's going to show up and then i'm going to edit the box now when i say box dot edit this will now take my cursor inside of the text box and let the user start editing the box and then they have to hit ctrl g to get out all right so let's run this and see what the text box looks like and how it works okay so it's a little bit messed up i actually think i know the problem but if i start typing you can see that i can type and of course i've messed up the dimensions here but anyways to get out of this i'm going to hit ctrl g so it brings my cursor out of the text box and then i can hit enter and i get out now let me fix this because i realize what i did here so when i was picking the width of the text box i accidentally put that where the height is so i need to swap this so this is 3 and 18 and now this should hopefully be better we might also have to mess around with the window and where we're drawing the rectangle because i think the rectangle might have to be just outside of the text box so that we're actually able to show everything properly anyways let's give this a shot here and let's see what this looks like so python tutorial four okay there we go so i've now placed the rectangle slightly outside the text box uh just so that uh what he called we're actually able to see the entire text box because i guess what was happening is the window that's containing the text box was being drawn over top of the rectangle anyways now i can say hello world my name is tim and this is a text box and i can't type any further than this because i've reached the end of the text box now to get out i can hit ctrl g now my cursor goes right underneath the text box i can hit enter and then i'm done sweet now what i want to do is show you how we actually get the text from inside of this box so the way we do that is we say text is equal to box dot and then this is going to be gather now gather just gathers the contents of the box so now we can do is add this text to the screen so let's say what is this even called anymore okay this dot add string let's add text and let's add it at like uh oh i don't know how far we want to go maybe like 10 and we'll go like 40 just to make sure that we can see it okay so let's now run this and let's see what we get okay so let's say hello world my name is tim okay now ctrl g and notice when i do that it places my text over here now it's kind of messed it up a little bit i don't know why it's kind of going off the screen i'm not going to worry about that oh the reason why it's going off the screen sorry guys just realized here is because we have a new line after the name right so since e is on a new line what happened here is i put the text and then we saw a new line character which means that we're going to automatically move this text story down to the next line so that's why this is happening it's intentionally being brought down to the next line because from the text box it was on another line okay now let me show you how we can actually get rid of that because it's kind of annoying sometimes we just want the text all on one line we don't want it to automatically go to the next line okay so what i can actually do to get rid of these new line characters here is when i use my gather i can say dot and then replace so let's go like this and i can replace the new line character which is backslash n it's an invisible character that tells us to go the next line with nothing okay this just means now we're not going to have this in our string i'm also going to say dot strip here now what dot strip is going to do is remove any leading or trailing white spaces from our string so let's just try this now and see if it works okay let's go hello world my name is tim okay and now let us hit ctrl g and then notice we get this all on one line it removed all of the back slash ends okay there you go that is how you can get text now of course you can also get text by just reading in one character at a time by using the get ch or the get key functions or methods that i showed you you just have to store all of those characters in a list or a string or whatever you want to use to store them but this is a better way to use some type of text box okay so that said that's pretty much all i need to show you in this video in the next video i'm just going to go through a few kind of more advanced things that we can do how we can say style the rectangle that we just drew and show you a few other cool methods that you might want to know with that said if you enjoyed the video make sure to leave a like subscribe to the channel and i will see you in another one [Music] you