Modern Terminal User Interfaces in Python

Key Takeaways

Today we're going to learn how to easily create modernlooking professional 2e applications in Python. So terminal user interface as opposed to graphical user interface 2 over guey which means something like open code something like cloud code where you have the user interface a good-looking user interface in the terminal. We're going to look at a couple of examples today. If you like this video let me know by hitting a like button and subscribing. But now let us get right into it. >> [music] >> All right, so we're going to get right into it. We're going to learn how to build professional and modern looking 2e applications in Python. And for this, we're going to use an external Python package called Bless. There are also other packages that we can use that accomplish the same thing, but this one is particularly simple and easy to use. So, I'm going to open up my terminal. I'm going to navigate to my tutorial directory. And now, the first thing we need to do is we need to install the package. So you can either do that with your system installation by saying pip or pip 3 install bless like this or if you're like me you want to use uv of course uv needs to be installed on your system for that you want to have an isolated environment you can say uv innit to create a new uv project and then uv bless to install it in that project. Now here to get auto completion I'm also going to source the virtual environment. So VNF bin activate here and then I'm going to create a file or in this case I'm going to use a file main py I'm going to start from scratch here and I want to give you a very basic hello world application so you see how this blessed package works. So we're going to start here by saying from bless import terminal that is going to be the application um itself. So we're going to create an instance of that term is equal to terminal and then we can start with a context. So we can say with term and now we can choose specific modes. For example, I can say full screen. Now this doesn't mean that the terminal window will become a full screen application. It just means that we're going to use the full space of the terminal window. So that is going to make it a full screen application within the terminal. Then we're also going to say term C break which basically means that we can access the key um key input directly. We don't have the buffering. We don't need to press enter. And then we're also going to say term dot hidden cursor to not see the cursor obviously. So these would be three modes here. Then we can just print stuff. For example, I can say print term.clear. What this does is it basically clears the full screen that we're using. So we have a full screen application. Printing term clears the whole screen. And then I can print hello world just as a basic text here. Now then of course I want to react to certain keybinds. To keep it simple here, I'm just going to add the Q key to terminate the application. So I'm going to say here while true. So endless loop basically. I'm going to say key is equal to term in key. Time out is equal to not the time time out is equal to 1. And then if the key is Q, we're just going to exit the application. So I'm going to say if key dot lower is equal to Q then we're just going to break out of the loop which is going to automatically exit the application. So that is the most simple hello world program that we have here. I'm just going to go and run this now. Run main py. And as you can see full screen means everything vanishes. We have the full terminal as a full screen application. I get hello world. I can click all sort of stuff. I can type all sort of stuff here. Nothing happens. But when I press Q it exits the application. That is the most simple basic 2E application that we can build with Bless. Now to show you the interactive nature a bit better, let me implement with you guys here a an example where we can move uh a character around like it's a game. So we have basically a full screen window and then we can just move some uh asterisk or something around by pressing different keys by pressing the arrow keys for example. So for that I'm going to get rid of most of this and I'm going to say up here that I have some starting coordinates. Let's say these are 10 and 10 for X and Y. So this is going to be the position of my asterisk symbol that I want to move around. And now I can do the same thing. We can print term.clear to start with a blank canvas. We can do while true to react to uh key presses in a loop here. And how we're going to do this is we're going to have we're going to constantly redraw the canvas. So we're going to move the cursor. We're going to draw something there. And when we press something, we're going to change these positions. And we're going to redraw the whole thing. So everything is going to be constantly redrawn. So I'm going to start here by doing term.clear. And actually maybe we don't even need that here. We can start directly with term.clear. And now we're going to move the cursor. So our plotting instance, so to say, our thing that actually writes stuff, we're going to move that to the position. So I'm going to say here, print term move yx. We need to enter the coordinates in reverse here. So this is basically going to print empty empty characters or space characters until we get there. And then we're going to do term.reverse. Reverse basically means we're just going to highlight. We're going to reverse the colors. And we're going to write the following string space asterisk space just so we have a rectangle with the asterisk in it. This is the thing that we're going to move around. And then we want to react to key presses. And then maybe to show you what we can also do is we can go and add some text here. So term.bold for example for a heading that is always there unmoved we can say simple 2 movement for example just so we have something constant and this thing is going to move around when we press the keys. So now we're going to say here again key is equal to term in key with a timeout of one. Same as before if the key lower is equal to Q we're going to exit the loop. We're going to break out of it and otherwise we're going to move. So we're going to say here otherwise key dot name is equal to and now the key is called key leftft that is going to be for left. What are we going to do in this case? We want to decrease um x. So want to go to the left. Now we don't want to go negative. So I'm going to use the max function here. Either zero or whatever happens when we decrease x by one. And then we can basically copy this. We can do the same thing for key right. Now here we need something else. We don't want to check for zero. We actually want to increase X. But we don't want to go beyond the border. So we want to use min and we want to use the terminal width as the maximum here. And then basically we can copy that as well. And we want to do here key up key down. And uh in this case now we're doing this with Y. So we need to say that y is equal to y is equal to and then here we want to when we go up we want to decrease y that's actually okay and then here we want to go with terminal height and we want to increase y and there you go that is actually it didn't make any mistakes this should run now and show us that we can move around in the terminal without any problems so I can just keep it pressed I can move around like this perfect okay so now what I want to do is I want to build an actually useful application We're going to build a to-do manager, and we're going to have it operate completely in the terminal. So, we're going to be able to add stuff. We're going to be able to delete to-dos, to check to-dos, and also to change the color of a to-do, maybe to represent categories. So, we're going to keep it simple, but we're also going to keep it interesting. So, for that, let's go into main py. We're going to keep the import. We're going to keep the terminal. We're going to also keep this here, but we're going to remove the loop because we need to define some things first. So, first of all, we're going to need an input buffer. That is going to be the thing that we can type text into. For example, to name a to-do, we're going to start this off with an empty string. Also, maybe even more important than that, we need to import the JSON module from Python. And we need to say that we have actually a to-dos file that we can use to persist the data. So, I'm going to say here to-dos is equal to JSON loads actually load. And we're going to have it open a file called to-dos. JSON. Let's maybe do this down here. Let me also do full screen. I like that a bit more. So, let's reorder some stuff. We want to have the to-dos here. We want to have the terminal input buffer. We also want to have colors because we want to rotate the colors. The idea is I can press certain keys to change the color back and forth. So, I'm going to have a constant list here. Colors. That's why I use uppercase here. And I'm going to use the terminal colors of the terminal theme. So, in my case, I have a one dark theme. It should just automatically use the colors that are provided by the terminal. term color I for I in range and then 1 to8. Then we need two more things. One is selected. This is going to be for keeping track of the to-do the line that I'm currently at. So if I go up and down, I want to be able to know which to-do I'm currently highlighting and focusing. That's going to be index zero by default. And then we also want to know if we are in at mode or edit mode. So the idea is that in one mode I'm going to press keys and it's going to choose stuff. It's going to uh the space key, for example, is going to be for checking a to-do. But when I'm in um or actually not edit mode, sorry, uh navigation mode or add mode because when I'm adding, I want to type names of to-dos. So maybe go for a walk where I need to press space to actually have a white space in there. But if I'm in navigation mode, space should be checking whether the to-do is done or not. So edit mode or at mode is going to be false by default. Then a simple helper function just for saving the to-dos. We're going to say here save or let's call it save to-dos. Maybe that's just going to open the to-dos JSON in writing mode as file f and we're going to say here JSON dump and we're going to dump the to-dos object that we're going to change and uh add stuff to with our loop down below. Um and we're going to write that to the file. All right, so that is the setup work. Now let us go back into our uh context here. I'm going to say while true to have an endless loop again. And then we're going to print some stuff like print term.clear to clear the screen again. Then I want to have a uh welcome message so to say, a message that tells me what controls I have to not have to type this. I already have this in my clipboard. This is nothing functional. This is just um basic design stuff. So what we do here is we do terminal bolt to set the text to bold. And we do to-do. Up down is move. Space is toggle. A is add. D is delete. Uh left right is color and then Q is quit. And then we go back into normal mode. And then we just have the separator. Uh that is as many dashes as we have the terminal width. So we have a full straight line. I just didn't want to type this because I have some symbols here that I don't know off the top of my head what code to use to type them. Now the interesting stuff is iterating over the to-dos to display them. So we're going to say here for I and to-do in enumerate to-dos. And then the line is going to be a formatted string. We want to start by choosing whether our checkbox is checked or not. So we're going to say here it's going to be an unchecked box or maybe I should start with a checked one. So it's going to be with an X in it essentially. Um if the item um or actually to-do is what we called it. If that to-do is done, we're going to display a check box. Otherwise, we're going to display an empty box, but of course is a string. Um, and then we want to have the text of the to-do. Let's just go with a space here. And the to-do name shall be displayed, but only if it fits into the terminal width. So, we're going to say here to-do and then the name of the to-do, but only if it fits into the terminal width. So, colon term.width minus one to leave some space. So, that is fine. Maybe we should change uh name to text. That's more fitting for the to-do. So this would be the individual line that we plot here. We now also need to choose the color for this to-do. So I'm going to say here color is going to be selected from colors. And it's going to be todo color. And since we're going to constantly increase and decrease that, we should use the modulo operation. Or maybe actually it makes sense to do it later on. But yeah, we're safe if we do the modulo operation. That's not going to be a problem. We're going to do that modulo length colors so that we always stay in the same loop. So we basically go in circles. Then if this is a selected line, we need to reverse. So we need to highlight. I'm going to say if I is equal to selected, then we need to say print term.reverse. And we're going to say end is equal to just an empty string. So we don't do a line break. And then down below we're going to print the actual line. So for this we need to say color first to make sure that the color is used, then the line, and then we want to go back to normal. So term normal. The idea is that this color, remember, is not just a color code. It's actually an instance of term color, which means that this actually uh changes the color of the text that comes afterwards. And we need to go back to normal to not have the color fill the rest of the text that we write here. Then we want to have another separator. So I'm going to go up here, copy that, paste this down below. And now we need to distinguish between at mode and navigation mode. So, I'm going to say here if we are in the at mode, I want to print that we can now enter um the name or the text for the to-do. So, we're going to say here print terminal bolt let's say and we're going to say at colon terminal normal. Then we want to uh do to present the input buffer and then the end is going to be again that and flush is going to be equal to true. Otherwise, if that's not the case, we want to print a dimmed message. go with uh less brightness. Term dim. We want to print the number of to-dos that we have. So for this we're going to use an fst string. We're going to say length of to-dos items or maybe we should say items like this. Then don't forget to always go back to normal otherwise this is persisted across the lines or across the print statements. We're going to do end here again. Flush here equals true. That's that. And now it's time to react to the key presses. So now we get to the interesting part. Key is going to be equal to terminal in key again time out equals 1. Now we can also say key string is equal to whatever the string version of the key is. This makes sense if you just want to get the content of the key. And now we will have a bunch of if statements. We're going to start by handling the ad mode. If I am in ad mode, I want to have certain key binds. For example, if I press escape, I want to get out of the ad mode to back to the uh navigation. I want to say here if key.name is equal to and then key_escape then the add mode and the input buffer shall be reset to false and to empty. So we want to also get rid of the text that is in the input buffer because we're dismissing it if we press escape. Now the interesting thing is what happens if I press enter. So if the keyname is equal to key enter that should use the content of the input buffer. So if I say key enter here, that should use the content and it should actually create a to-do and add it to to-do list and then also persist it to disk. So we're going to say here if the input buffer after stripping it, so after removing the white spaces and everything, if that contains something, so a normal if statement is enough to see if that returns true, then we're going to actually create this. So to-dos append and we want to create a dictionary object here with a to-do text which is going to be the input buffer after being stripped of course. Done is going to be initialized with false. And then the color I think the default color uh white should be color code six. Let me just double check. Yeah, it's six. So that would be just in my terminal. I'm not sure if that's the case in your terminal, but that's just a default color I want to use. You can just try it out and see if it works. And then we want to do safe to do. Now in both cases regardless of whether there was content or not we want to go back to uh the navigation mode. So we're going to copy this at mode input buffer is going to be false and empty again. Now also maybe you don't think about this immediately the deletion is also not just implemented in the 2 magically we need to handle that. So we need to say if the key name is backspace. So if it's what was the code key yeah actually backspace then we want to actually remove the last character of the buffer. So I want to say input buffer is input buffer but dismiss the last character. So up until negative one and then all other cases where the key is not escape not enter and not backspace we want to actually add the character that was pressed to the buffer. So in all other cases if the key string exists and it's also not the null terminating bite. So if the key string is not equal to back slash uh what was it x0 0 where's my backslash x0 0 and also it's not a key combination. So key is sequence. So if all this is true then we're going to just say input buffer plus equal to keystring and then we're going to just continue. So that would be handling the ad mode. Otherwise, if we are in a navigation mode, we need to handle the navigation keys. And that is actually quite easy to do. So, we're going to say here if key uh string is equal to Q or maybe we can go with lower again. So, if key string lower is equal to Q, we're going to do just a basic break again, but also we want to save the to-dos. So, we want to make sure the to-dos are saved. We want to break uh what else do we need to handle? We need to handle the arrow key. So up down should actually navigate it should change the selection. So I'm going to say here if keyname is equal to key up what I want to do is I want to decrease the selection if possible. So I want to say that the selection where the selected is actually um the maximum of zero and the selected minus one. And then we want to do the same thing as before just for the down key and with minimum. And we're going to go with the length of the to-dos. But I also want to make sure that um or actually we need to do length to-dos minus one. But I also want to make sure that we cannot go below zero. So I'm going to do min of max. So it's going to be min max zero length to-dos minus one's uh minus one. And that is going to be just increasing the selection. Then we're going to say for the left and right keys, let me paste this here. left is going to go um and select a color. So the color is going to be the color of the to-do. So maybe let's actually do this in two steps. We're going to say color index is going to be todos. Select it. So take the currently selected to-do. From this to-do, we want to get the color. Where is my key? Want to get the color. And if the color does not exist, we're going to just fall back to six, which is white in my case. So that's going to be our default assumption. And then we want to actually do something because we're pressing a key here. So we're going to say that the color that we're actually uh selecting needs to be decreased. So we're going to say color is equal to colors color index. But we need to do actually again such a or actually we don't need max and min. We just need to do color index minus one since we're pressing the left key. And that modulo the length of the color list like this. Or actually, let's do this in um two steps here. I'm going to say color index is equal to to-dos selected. So, what is the color of the selected to-do? So, we can do that with get. We can get the color if it exists. Otherwise, just fall back to six, which is white in my case. And then we can say that the to-dos selected that the color of this to-do here um shall be equal to whatever the color index is. We're going to decrease it by one because we're pressing left. And we're going to take that modulo um the length of colors which uh doesn't require min or max because we're just rotating all the time. So whether you go into the negatives, whether you go above the limit, doesn't matter because modulo will always get you into the correct range. And of course here again, don't forget to save the to-dos. So then for the right key, it's going to be basically the same just that we actually increase. So that's going to be the same as here, but with a plus. Then we also want to have the toggling. So if the key string, let's actually check for the key string. If that is equal to just a white space, then we want to toggle the state of the to-do. So, we're going to say to-dos uh selected done is going to be equal to not to-dos selected done. So, we're going to invert whatever the current state is followed by saving the to-dos again. And now, last but not least, we have two more keys. We have the A key. So, if the string is a, then we want to go into add mode. So, add mode and input buffer are going to be set to true and empty. And then uh finally if the key string is equal to deletion so to d we're going to pop the last or the selected element actually not the last element. So to-dos pop selected. This is going to remove it. We also want to save but in between we also want to make sure that the selection is updated because now we have to select a different to-do. So the selected one is going to be the one that is now highlighted which is going to be zero at least but also it's going to be the selected minus one if possible otherwise it's going to be the length of to-dos minus one. All right so if I didn't implement any mistakes this should now work. Let's see uv run main py I have a mistake because I do an lf with one. Yeah, obviously down here I'm using just a single equal sign for both these comparisons. This doesn't make a lot of sense. Also, we need to create a JSON file. Makes sense. So, let's just go and create it. Actually, we could also do that programmatically, but I'm just going to say now uh that we want to have an empty list here. We also have a problem here that I'm selecting. I'm I'm doing I equals selected while we don't have I because that of course has to be indented. This is not a callable. This is a boolean. Okay, I did a couple of mistakes here. So, let's remove these brackets. Yeah, and of course, if you're smart, you add the negation, too. We don't want it to be a sequence. We don't want it to require to be a sequence. That is the opposite. All right, let's try now. Walk uh 10 miles. That is a to-do. Let's do the dishes. Workout. All right. Now I can go up and down. That works. I can change the color. I can also check off to-dos and I can delete to-dos. Now let's quit the application. Run it again. And we still have our stuff here. I can add to-dos. I can change the colors. Perfect. So this is a two-way application. Now finally, I want to show you some of the examples that are provided by the repository itself. This is the GitHub repo. You can just go and clone it with HTTPS or SSH if you have it set up. We can say get clone and then this is going to pull the entire project onto my system. Then I can go into bless. Ignore the error message here in my case. And in the bin directory, we have a bunch of examples. So here if I list them, you can see we have a bunch of Python scripts. And I would recommend that if you want to go deeper into this, you just look at them and see how they work. Um one simple thing that we can do for example is um UV run keyboard animation. So that would be okay. This now pulls stuff. You can see this gets you this loading animation. That's a very simple thing. We also have uh the progress bar which shows you how to animate a progress bar. This goes back and forth until you stop it as you can see. So this is nice. Uh you can always quit with C. Uh what else did we have? We had the keyboard arrow paint. So this here allows me to paint with my keyboard arrows. Then we also have something like mouse paint which is also actually possible in the terminal. So we can use the mouse to paint in the terminal and we can even change the colors with a mouse wheel. So that's also fancy. Then we have bounds which is kind of a uh physics type of boundary simulation if you want. So for games that's actually quite interesting. We have a color picker that's based on X11. So I can actually uh use my arrow keys here to select a color and see the color code in real time. That's also fancy. Then we have plasma. I'm not sure what this is. This is just an animation. But you can see how the colors are animated here. And you get the FPS uh in the bottom right which my camera is blocking right now. Then we have Worms, which is basically a snake game if I was not. Yeah, there you go. Not that good at the game. But yeah, this is one thing. Then finally, there's also celestial, which is kind of this uh I'm not quite sure. This is like cellular automter. I'm not sure what exactly we're doing here, but we can uh yeah, look at a couple of cellular automter results. So yeah, that's it for this video today. I hope you enjoyed it, and I hope you learned something. If so, let me know by hitting a like button and leaving a comment in the comment section down below. Also, on my website, if you're interested, you will find a services tab and a tutoring tab. There you can contact me if you need help with a project, if you need a freelancer, if you need consulting, or if you want me to teach you something one-on-one. You will find a link to contact me via email or LinkedIn at the bottom. Besides that, 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 for watching. See you in the next video and bye.