Create a GUI app with Tkinter - Step by Step Tutorial

[Music] hi everybody today we're going to build a fully functional python app from scratch we're going to build a graphic user interface with kinter where we'll extract text out of pdf files and this time we are not going to use google colab or jupyter notebook we are finally using a proper code editing software so if you guys don't have one just yet i highly recommend getting atom because it's 100 free and that's the software i'll be using for this lesson so this tutorial is perfect for intermediate developers and beginners because the only three modules we'll be using are pi pdf 2 tinter and pillow and that's it so you can imagine that this is not a very difficult project but it sure is handy and before we begin make sure you guys download the starter files from the description of the video and these files will include a png logo and two different pdf files which we'll use to test our program and if you guys are ready you can go ahead and open your favorite code editor and as you can see i already have atom opened um and we'll start a brand new file with file new file and i'm gonna close the rest of these tabs because they are annoying and i don't need them at all and we're going to start from importing the three different modules we'll be using for our app so the first one would be kinter so import kinter stk the second one would be pi pdf2 so import pi pdf two two and lastly we are going to import pillow because we would like to include a logo so we need a module to process our images so from pill aka pillow import image and image tk which is a tinter image okay and once we are ready we can save this as a python file we'll just go to save as and we will navigate to the exact same folder where we saved our starter files so i'm just going to copy the url and i'm going to name this file app dot p y so once we hit save we can see a pop of color in our code which is exactly what we were looking for but how do we access this file from our terminal let's quickly add a print statement so print is this working and save the file with ctrl s and let's go ahead and open our terminal in my case that would be anaconda because i've used anaconda to um to install my python and since i'm using anaconda i'll need to activate my environment so activate main but the next step is relevant to all terminals so what we're going to do is we're going to access the exact same folder where we saved our python file and we'll do this with cd which is current directory and in my case that would be documents python you will probably have a different folder make sure that you're in the exact same folder you need so actually skipped one folder so let's do cd once again current directory skinter and once we reach the desired folder we are going to type python and then the name of our file which is app dot py hit enter and you can see that our print statement was printed into the terminal which means that our file is working so first we'll create a window object which will hold all the future elements of our interface for this we will need to get rid of the print statement and we'll simply type root equals tk dot tk with a capital t this time and closing brackets so this command indicates the beginning of our interface but we will also need an and command and this command would be root dot main loop so basically all the elements we are going to create will be within these two lines of code if we'll try to create them above the root command or below the main loop command these elements will not appear inside your window object because they are outside of it so let's go ahead and save this file with ctrl s and we'll try to rerun it again inside our terminal and here we don't really need to type anything we'll just hit on the up arrow which will present us with the most recent command we typed and then we hit enter and we get to see our window object but this window is way too small for my app so let's enlarge it with the help of the canvas command so what we're going to do is we're going to close this window and once we do that we can see that our terminal becomes available again and we'll go back to our code and create a brand new variable which we'll call canvas we will set this variable to tk dot canvas with a capital c and inside the round brackets the first parameter is root which is our window object and then the second parameter would be width which i will set as 600 and height which i'll set to uh 300 sounds like a good number in order to initialize this canvas object we are going to type canvas dot grid and i think i'm gonna go for a three column design and we can do this by uh specifying column span equals three so this attribute is basically going to split our canvas into three identical invisible columns where we can place all our elements with a lot of precision and if we save this with ctrl s and we will rerun our terminal again so the up arrow and enter we can see that our canvas is larger and is in fact 600 pixels by 300 pixels so we can move on with placing our logo first i'm going to load our logo as a pillow image for this i'll create a new comment logo and i'll create a new variable also logo which will equal to image with a capital i dot open and inside the round brackets we will specify the url of our image in my case it's going to be simply logo.png because my app file is in the exact same folder as my logo okay so let's just type it here then we are going to convert this pillow image into a kinter image and we'll do this by typing logo equals image tk in camel case dot photo image and inside the round brackets we are going to call our logo variable and now we are going to place this image inside a label widget so in the next line we are going to type logo label equals tk dot label with a capital l again and inside the round brackets we'll say image equals logo but in order for this to work we will need to add another command so in the next line we'll type logo label dot image equals to logo and even though it looks like we're just paraphrasing the code from above you cannot skip this line of code it is absolutely necessary and the last thing we'll do in regards to our logo is place it inside our window object so we can do this with grid again we'll type logo label dot grid and inside the round brackets we'll set the column to be 1 which is our center column and the row to be 0 which is our first row okay and once we're ready we'll save this file we'll go back to our terminal we'll hit the up arrow and enter and of course i have a typo so let's just go back to our code and say column and not column okay save it again and rerun it oh wow what a beautiful logo good job maria good job and once i'm done patting myself on the shoulder it's time to add some instructions to our app and again we are going to use a label widget for that so let's create a brand new comment instructions and underneath we'll create a variable also instructions [Music] and we are going to set it to tk dot label with a capital l and the first parameter is always the root folder and the second parameter would be text okay so our text will say select a pdf file on your computer to extract all its text and if you guys are just as picky as i am you can select your favorite font so you can type font equals and then any font you have on your computer is going to work here so i'm going to go for railway which is my favorite font and i'm going to place this label on my grid in the next slide so we'll type instructions dot grid and because we are looking at a very big chunk of text i would like it to span across all three of my columns so i'm going to specify column span equals three okay and that means that i will place this element on column zero this time but on row one because i want it to be underneath our logo and now we can safely save this file with ctrl s and we can move on to our terminal press up arrow enter and it worked cool we can move on with our browse button we'll add another comment this time browse button so there's two things i would like this button to do the first one is obviously opening a browse dialog box the second one would be changing the text from browse to loading depending on the state of my app to do this we will store our text in a special variable which we will call browse text and this equals to tk dot string var in camera case and once we do that we can specify this variable inside our button widget okay so in the next line we are going to initialize it with browse btn equals tk dot button with a capital b and you guys already know the drill we start with our root object and then we are going to set our text variable to browse text and because i am very ocd i'm going to also specify a font and this will be ray railway again and once we do that we can move on with setting our browse text and we do this just as it sounds we'll just type browse text dot set inside the round brackets we will just say that the initial text we want is browse and the only thing left to do is placing this button inside our grid you already know how to do this we'll type browse btn dot grid we will place it in column one which is our center and on row two which is right below the instructions okay and if you're ready just save this file and go back to your terminal up enter awesome here we see our browse button but i'll be honest with you guys this is one of the ugliest apps i've ever seen we will need to stylize it a bit so it looks acceptable so what i'm going to tackle is the uneven gaps between my elements vertically and i'm also going to change the appearance of my brows button and make it slightly more attractive okay so let's close this window and we'll go back to our code so first we'll account for the uneven gaps and we can simply do this by initializing a rose pen so we'll just add a row span to our canvas widget and we will set it to three as well because we have items on row zero items on row one and items on row two cool and now we can tackle the button so we will just add a few more parameters here so i would like to set um a background color to my button which will equal to bg and i will set it to the turquoise um color you see inside our logo so that would be 20 bb i will also like to change the font color to white and we can do this with fg equals white and i also would like to enlarge this button so i'll give it a height value of 2 and i'll give it a width value of let's say 15. it looks good we will save it and we will rerun our app again and our button looks much much nicer so the only thing i would like to add here is a little bit of a margin uh between our browse button and the end of our app okay so let's close this window and there are a few ways to do this but i'll just do it the lazy way i'm going to copy our canvas variable and the grid command from underneath and i'm going to paste it in the very end of our window so the only changes i applied to this code is switching this to 250 instead of 300 and deleting the row span and now if we save this rerun the cell sorry rerun the app i'm used to use notebooks awesome so now it looks more like a traditional app but it still doesn't have any functionality because if we press on the browse button nothing happens and that's because we did not connect a command that's associated with our button press event i hope it makes sense and that's what we're going to do in the next step so let's close this window and go back to our code and we can do this with the help of a function so what we're going to do is create a brand new function so def and we'll call it open file okay and first i'm going to check if our function works so i will print is this working and we can attach this function to our button widget by typing command equals lambda open file and that should do the work so let's save this file once again and rerun it inside our terminal and now when we click on browse we can see that we have um we have a print statement inside our terminal and if you want to make sure that it works again you can keep pressing it more and more times and once we figure that out let's modify our function and go back to our code so let's close this window back to atom and the first thing i'm going to do inside this function is change my button text from browse to loading so let's just select this print statement we will type browse text dot set and we will type here loading three dots and now we can safely open our browse dialog window but we will need the help of an extra function to do that so we'll go back to our imports and we are going to import uh from kinter dot file dialog import ask open file and back in our function we are going to create a new variable for our file we'll call it file and we'll set it to ask open file and the first parameter is going to be um the parent which is our root window the second parameter is going to be our mode which we'll set to rb read only we will set the title to choose a file and we will set the file type to equal to square brackets round brackets pdf file and the second part of our tuple is going to be the pdf extension which we'll write with asterisk dot pdf and then if we indeed selected a file we can type if file equals equals true or if file um we are going to print that file was so success fully loaded okay and let's rerun our app we will browse for a file on our computer and i'm going to select the test files that i've created so let's do a test file number one and we can see that our print statement occurred now let's store this file inside a variable we are going to type we're going to delete this print statement and instead of it we'll type read pdf and this will equal to pi p d f 2 dot p d f file reader in camel case and inside the round brackets we just specify our file and if we're already here let's also extract the first page of our pdf with uh page equals read pdf dot get page and we would like the first page so we'll type zero and now we can extract all the text content of our page with page dot extract text with a capital t and we're going to assign it to a variable called page content and let's check if it worked by printing this page content inside our terminal so print page content [Music] let's save it and re-run our app let's browse our computer select the pdf file and we can see that we have some text here so i need to extract all the text from this file but blah blah blah blah blah and if you open the file on your end you will see that it's an exact match so great success but our user is not going to look at the terminal our user is going to look at the app so we will need to display this text on the app okay so what we're going to do is store the page content inside a text widget which is slightly different from a label widget um so what i'm going to do is i will um i will create a new comment saying text box and i'm going to create a new variable as usual text box okay and i will set it to tk.text with a capital t the first parameter is root as usual and here i'm going to set height and width to my box and the height would be 10 lines of text and the width would be 50 characters i believe and i'm also going to add some padding so pad x equals let's say 15 and pad y equals 15 okay and this will initialize my text box but this text box doesn't have any content yet we will need to insert our content into it so we'll just type text box dot insert and inside around brackets the first parameter is 1.0 a floating point and the second parameter is our page content variable and if we would like to display it on the page we will need to place it inside our grid and we can do this with text box dot grid but this time we will place it on column one and on row three so it's gonna be right underneath our browse button okay so let's save it and let's rerun our app and let's select our file again perfect and you can see that our text is now appearing inside the app rather than inside our terminal and actually the more i look at it the more i want to justify the text to the center so let's do that we'll just go back to our code and we will go back to our text box and right underneath the insert command we will type text box once again but this time we will type tag configure and here the parameters would be center as well as justify center but there's more okay on the next line we will type text box once again tag add and inside these round brackets we will write center again and we will write 1.0 again and lastly we are going to type the string and that's pretty much it that should do the work so let's save the file let's rerun our app let's browse again let's select our test file and our text is justified to the center and the last thing we'll need to do is set our loading text back to browse and then our app works like a charm so let's just close it let's go back to our open file function and in the very end of it we will type browse text dot set browse okay so i believe our app is finished and let's run it again and we'll test it across both our test files so let's hit on browse let's select our first test file works like a charm hit browse again select our second test file perfect awesome now you guys know how to build your own gui congratulations but this is not really the end of this project i'm actually planning to build it up in the next few lessons and to add some more functionality to it so the end goal will be a pdf extract software that is not only extracting text but also images and it also has the ability to save those images on your computer so if you guys want to give it a try on your own you can definitely do that but i must warn you it's much more difficult than it sounds so if you guys want to see more of this type of videos please make sure to subscribe leave a like or a comment i always appreciate your feedback and your support it's just amazing to me that so many people around the world care about what i have to say i never imagined that i'll be in this type of situation so thank you from the bottom of my heart you guys are amazing and hopefully i'll get to see you here next week and until then have a happy halloween and yeah bye

Channel: Python Simplified

Views: 251,599

Rating: 4.9281731 out of 5

Keywords: python, python programming, tkinter, gui, graphic user interface, application, app, gui app, gui application, PyPDF2, Pillow, PIL, PDF, extract text from PDF, create gui, build gui, create python gui, atom, anaconda, python file, command prompt, gui program, gui software, codealong, code-along, code along, python project, python project for beginners, build a gui, tk, browse dialog box, mainloop

Id: itRLRfuL_PQ

Length: 23min 55sec (1435 seconds)

Published: Fri Oct 30 2020