Simple GUI Calculator in Python

[Music] what is going on guys welcome back in today's video we're going to build a graphical user interface calculator with python so let us get right into it all right guys so we're going to build something that looks like this this is a graphical user interface calculator written in python and when we have this we can just press some buttons for example 12 plus three times and then parentheses five minus two for example so this would be three times three is nine plus twelve should be twenty one as you can see this is the result we can clear that we can type some nonsense here and then clear that as well we can start with eight times nine plus eight minus six i don't know we don't need the parentheses here uh and of course we can try to do something like eight divided by zero and we're going to get an error here so uh those exceptions are also handled and this is we're going to build in today's video using python uh and the only module that we're going to need for that is tk enter which is part of the core python stack so it's not going to be too complicated we're going to say import tk enter stk and we're going to have a basic calculation string so we're going to build this in the following way we're going to have a calculation string which is going to be an empty string at first and then we're going to have three functions and one function is going to be add to calculation um and we're going to have a symbol as a parameter we're going to pass for now we're going to have evaluate calculation which is going to just call the eval function and then do the necessary tk inter operations and then we're going to have the clear field function and for now we're going to pass on all of those um now before we do anything with those functions here we're going to have to build a basic uh window or a basic graphical user interface so that we can actually say okay we want to have a text field and we want to get the values from that text field uh we want to clear that text field and so on so the first thing we're going to do down here is we're going to say uh root equals let me just look at my code here on the second screen our root equals tk.tk and then of course we're going to define the basic stuff like the geometry of the of the windows so the dimensions and so on and in the end we're going to call root.mainloop so this is everything in between is going to be the graphical user interface uh but those are the two endpoints so we create the object and we run the main loop so next we're going to say root dot geometry uh and i chose for this project something like 300 times 275 and i think if we run this code we should already see a graphical user interface even though it's not going to do anything but this is what we see already so we have this window here in the in the proper size and the first thing we're going to do is we're going to add a text field for the result so we're going to call this text underscore result it's going to be tk.text and it's going to be part of the root it's going to have a height of 2 and it's going to have a width of 16 and the font is going to be arial and 24 and of course we're going to say text result dot grid because we're going to use a grid here and we're going to say column span column span equals five so we're going to have this grid structure where we have five columns and the text uh the text field should go across all the five columns so we're going to run this and we can actually see that we already have this down here is no text field up here we have a text field uh so this seems to work and actually i think we can already start with the functions because the functions need to address this text field but they don't need to address any of the buttons so we're going to start with the functions right away and the first thing we want to do is we want to say okay calculation is going to be a global variable so that we can actually manipulate it inside of the function and then we're just going to say calculation is going to be plus equal string of the symbol so no matter if it's an integer or not it's going to be type casted into a string add it to the calculation string and then we're going to say text result which is what we have down here uh and we're going to delete everything and the notation here is a little bit confusing we have to specify 1.0 here for the start and the end is specified with the string end so this is how we delete the whole content of the text result field and then we're going to say text result dot insert again 1.0 as the index where we insert the string and the string itself is going to be the calculation so this is quite a simple function uh and the next function is going to be the evaluate calculation function so let's say we have a string like 10 plus 3 times 4 minus 2 in parenthesis and so on this string can now be evaluated using the eval function so this is just a python function that evaluates python statements the function just looks like that eval and then you pass a string now the problem with that function is that it is not only for evaluating calculations it can also evaluate python code and the problem with that is of course theoretically someone could inject some code so of course in this case this is a graphical user interface calculator that you're just going to use for fun so you're going to build this project in order to learn uh graphical user interface programming you're not going to build it and put it online somewhere and connect it to your sensitive files but theoretically just be aware that this is a security issue because people can inject code into your um into your program and then maybe do something with it just keep that in mind that you don't get used to you using the eval function um so what we're going to do here again is we're going to say global calculation and then we're going to try we're going to try because uh sometimes we're going to get an error for example if we try to divide by zero and we're going to catch that exception with the accept keyword um and in that case we're going to pass and up here we're going to say result equals string of the evaluated outcomes so we're going to evaluate the calculation we're going to turn this into a string and we're going to save that as a result and then we're going to set calculation to nothing again so we're going to reset it basically um now you can also alternatively leave the result there so that the user can proceed right away maybe this is actually not stupid so i actually didn't do it in the previous project that i showed you in the beginning maybe we're going to do it here uh let's just proceed as uh in the prepared code but maybe we're going to change that later on uh but for now we can also say again text result dot delete from one to end and dot insert and we're gonna insert the result actually i think we can why not actually why not just say calculation equals that and do it right away i think that makes sense to be honest it's a little bit more intuitive and in the case that we have some error what we're going to do is we're first of all going to clear the field this is a function that we have not implemented yet but it's basically just this here um and then we're going to say text result or actually do we need that if we do it anyways in the function down below i don't think that so we're going to clear the field and then we're just going to say text result dot insert 1.0 and we're going to say error like that and in the clear field function this is going to be quite simple we're just going to say again global calculation just so that we can say calculation equals empty and we're going to say text result delete from 1.0 up until end there you go so what do we have here i think it's because we didn't specify yeah we didn't specify any specific exception but i don't want to do that for this video because we would have to think about all possible mistakes uh but those are the functions so the functionality is actually done the only thing that we now need to do is we need to add a bunch of buttons that do something uh and this is going to be a little bit tedious but maybe if you haven't worked so much with tk enter it's good to repeat the steps so what we basically need to do is we need to create the individual buttons so for example btn underscore one is going to be the button for the digit one and we're going to say tk button part of the root window so this is root what we defined up here and we're going to add this button to root and the button is going to have a text it is obviously going to be one and the button is going to have a command and as a command we're going to pass a lambda expression and we're going to do that because uh otherwise we would not be able to pass a parameter that easily so we're just going to say lambda uh and we're going to pass add to calculation 1. so why do we do it like that why don't we just do it like that the problem with this is that it would immediately call the function whereas lambda just refers to a function that does this if called so it's better to do it like that or not just better it wouldn't work the other way so we would have to we have to use a lambda expression here and besides that we say the width is going to be 5 and the font is going to be you can choose whatever you want but i'm going to go with ariel 14. so this is the button now we need to say btn 1 uh dot grid and here you need to specify where the button is going to be and of course it's going to be in the second row because the first row uh is occupied by the text field so we have one row five columns of the row are used by uh the text field here so the second row the first column is going to be the button so we're going to say row equals two and column equals one and the usual column span is just going to be one so what we're now going to do is we're going to copy this and we're going to do this all the time so we're going to do this for two we're just going to change button to uh button one to button two we're going to change the text to two we're going to change the parameter here to 2 so add to calculation 2. the rest stays the same and down here of course we need to place it in a different position so row 2 and column 2 for example so i'm going to show you what this looks like if we run this right now at the moment we have a text field up here and we have one two and when we have all the buttons it's going to be this is row two position one two three four five and we're gonna have a bunch of different columns here uh so let me end this and we're going to copy that again and we're going to paste it we have two already so let's paste it seven or eight times eight times there you go and we're going to change that we're going to say three three four four five five six six seven oh what did i do seven seven eight eight nine nine and zero zero so those are the buttons and of course we need to change everything here so we need to change this to three this to four this to five this to six this to seven as i said it's going to be a little bit tedious because we need to do a lot of repetitive work but this is what you need to do here in this case zero uh and of course also the parameter don't forget anything three four five six seven eight nine and zero and last but not least we need to think about the columns so we have row two column one two three uh no actually not four actually do we still we start the columns with one but we're going to not we're going to have the fourth one is going to be the plus so we're going to say this is again column one two three but of row three so we're going to say this is row three this is row four and this is going to be one two three is going to be four four uh and this one we're going to place this uh where did i place it before i think i placed it in between we're just going to place it at row five for now or what did i do i placed it row five column two so this should be fine let's see what this looks like now as you can see we have a basic numpad now here we would have uh or we would want to have uh the parentheses i guess so one here one here and then down below we would want to have the clear and the equal sign and here we would want to have plus minus uh multiplication and division and that should be it actually for a basic calculator so we're now going to copy this one more time and we're going to change this to actually plus and the text is not going to be 0 but a plus symbol and what we add to the calculation is going to be a string this time and it's going to be the plus string and we're going to place this at row 2 but in the fourth column so this should work let's see okay no we actually placed a zero at the wrong position why is that oh because i used zero here i need to say plus there you go and now we're going to copy this three times and we're going to change this to minus we're going to change this to minus as well we're going to change this to multiplication we're going to change this to multiplication we're going to change this to division and we're going to change this to division of course we're also going to change to symbols and we're going to change the rows and of course the parameter there you go so now four buttons are missing we need the parentheses and we need the um the clear and the equal sign and for this we're going to say um i think the parentheses are going to be pretty normal so we're going to just call them a button i'm going to call open and close so for opening parentheses like that which is going to add just an opening bracket and let me just think where was it we place it in the row four i think right because we have row four no it's not four it's row five but column one and three so we change this to one no actually we change this to five we change this to one we copy that we change this to close we change this to close we change this to column three and we change the text here to a closing bracket and we change the parameter to a closing bracket and now we should have everything except for clear and for equals and for those we're just going to make two more buttons we're going to say btn equals it's going to be a button with an equal sign and we're going to also add to the calculation equals sign and down here we're going to place this as uh at row six and we're going to place this at column one but we're going to place this uh with a column span of two because we don't have enough buttons to fill up the space so just so you see what that means this button is going to be oh actually we need to also change the width to 11 it's just a number that works with a layout so this is what it would look like then it's a little bit larger or twice as large as the other buttons but the equals sign is actually what i want to have at the right so we're going to say column equals three i'm going to copy that i'm going to paste it above this time uh we're going to have the button clear button clear and this is going to just be ac and it's going to call not the add to calculation but it's going to call the clear field function uh in this case since we don't take any parameters we can remove the lambda and we can remove the parentheses because now we're passing an actual function uh if we add the parentheses we're calling the function we don't want to call the function we want to pass the function as an entity so this works with parameters we have to use lambda expression and down here we say evaluate so we change this as well to evaluate or what did i call it evaluate calculation without parentheses of course uh and now did we miss anything we have clear grids yes we need to change this to one obviously but the rest should be fine so let's see if it's done did i forget anything but that i don't think so so actually if i say 12 plus 8 equals no something does not work why doesn't it work what what is the problem here um evaluate calculation is the command this should actually work so what happens global calculation calculation is string evaluate calculation now let's see if that one thing that i made differently here or that i did in a different way here is going to be the problem and if not we're going to troubleshoot but i just want to make sure that i'm not overlooking anything obvious here so let's see if this would work 12 plus 8 no it still doesn't work so something is wrong with the button or with the function we have the button equals tk button command is evaluate calculation um and i did it in the same way in the prepared code so what could be the problem here we say global calculation result is the evaluation of the calculation uh let's just print let's just print what we have in the calculation before we delete it so let's say print calculations so for troubleshooting here okay this doesn't even trigger that's a problem for at least does it actually execute this function not sure okay so it doesn't print anything so this button doesn't seem connected okay obviously i have the lamba here could have seen that i didn't so now it should work 12 plus 8 equals 20 there it works so it should also work by the way now the way we had it before with calculation calculation being that and also this year being calculation let's see so 12 plus let's say 3 times 8 minus 3 so 15 basically plus 12 should be 27 there you go and now plus 9 should be 36 there you go and divided by zero should be error and clear okay everything seems to work that's fine uh this is how you build a basic graphical user interface calculator in python all right so that's it for today's video hope you enjoyed i hope you learned something if so let me know by hitting a like button leaving a comment in the comment section down below and of course 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 very much for watching see you next video and bye [Music] you

Channel: NeuralNine

Views: 61,663

Keywords: python, gui, python gui, tkinter, calculator, graphical user interface, tutorial, python gui tutorial, python tkinter tutorial, python gui calculator, gui calculator

Id: NzSCNjn4_RI

Length: 22min 51sec (1371 seconds)

Published: Sun Jul 25 2021