Create GUI App with PyQt5 - PART 1

[Music] hello everybody today we'll create a trivia game with my all-time favorite gui library pi cutie 5. more specifically i will show you how to make all kinds of different widgets with lots of interactivity mostly in a form of mouse hover events as well as cursor adjustments now i will also show you how to create different frames for your application as well as how to switch between them continuously now in the first part of this project we will only focus on the design of our interface however in the upcoming second part we will actually load a database of trivia questions and we will bring this game to life so if you guys are ready for this detailed introduction to pie cutie 5 let's download the starter files and get going inside the starter files you guys will find two different logos as well as a oneprogrammer.py file if you guys will open this file with your favorite code editor you can see that i already took care of all the different pi qr5 imports for you first we will initialize our application with f equals q app location with capital q and capital a and inside the round brackets we will pass our command line arguments with sis.argb then we will create a window widget by typing window equals q widget followed by a set of empty ground brackets or as my american friends call it parentheses it's the exact same thing if we're already here we might as well set a few basic parameters to our window object and we'll begin with the title so we will type window dot set window title in camel case very important and inside the round brackets as you guess we will type who wants to be a programmer next we will set the width of our window by typing window dot set fixed width also in camera case and we will pick a width of 1000 pixels i think it's gonna look really really nice and i would also like to add a background color and we can easily do this with css so in the next line of code we'll type window dot set style sheet and inside a set of round brackets as well as a set of quotes we can begin typing our css commands more specifically i'll type background colon and then the color i would like to pick in my case it's going to be a very dark purple color almost black it's 1 6 1 2 1 9 and because we're writing some css code we will need to finish this statement with a semicolon and once we're done with all the basic settings we can display our window by typing window dot show and we will also need to terminate our application so right underneath we will type sys dot exit inside the round brackets we'll specify f dot e x e c and another set of empty round brackets to close it off and this should generate a really nice window object so let's save this file let's open our terminal if you guys are using anaconda activate your environment with activate and the name of your environment in my case main then we will navigate to the exact same folder where you saved your starter files we can do this by typing cd which stands for change directory and not current directory as i've been wrongly teaching you for the last few videos my apologies on that and in my case i saved it in the folder called python and trivia and once we're in the right folder we will type python programmer dot py and enter and here's our beautiful empty window so let's go ahead and set up a grid layout and place a few widgets inside it so right underneath our window settings we will initialize a grid by typing grid equals q grid layout and an empty set of round brackets and now we can apply this grid on our window by typing window set layout and as you can guess inside the brackets we will specify our grid and we will begin with a widget for our logo so let's separate everything with a comment um display logo we will select one of our logo files and we will assign it to a variable called image to select this image we will type q fix map and inside the round brackets the url of our logo in our case it's just logo dot tng next we will create a label widget and we can place this image inside it so we'll type logo equals q label and now we will place our logo inside this widget by typing logo set pixmap and inside the round brackets as you guess image which is our logo image and once we finished setting our widget we will need to place it on the grid we will type grid dot ed widget the first parameter here is always the widget that we would like to place in our case logo the second parameter is the row value in our case 0 and the column value which is also 0 because we don't have any other elements yet so let's save it and actually before we rerun this file let me add an extra setting to my window object i'll type window dot move and this command is going to position our window object in the x-coordinate of 2700 and the y-coordinate of 200. you obviously don't have to do this i'm just doing this for the sake of this video but if you do decide to use this positioning command please edit your x coordinate because this is not a very conventional size so let's go ahead and save this file and let's rerun it and now my screen is finally capturing the entire window object and we can see our beautiful logo on the left hand side of the window now i don't really want to leave it there i would like to center this logo so let's go back to our code and do this so right before placing our logo on the grid we will type logo dot set alignment qt core dot q t dot align center it's a long one but i forgive them and right underneath if we're already here we might as well add a little bit of a gap from the top part of the window and the logo we will do this with css again so we'll type logo dot set style sheet [Music] and this time we will specify margin top and let's say we would like 100 pixels of a gap from the top to the logo let's save it let's rerun our file boom we have our margins and the logo is in the center and now we can move on with creating a button widget we will initialize our button widget right underneath the logo we will add a comment button widget we will assign it to a variable called button and this will equal to cue push button and inside these round brackets we will specify the text of our button in our case play and now we can go ahead and add a few basic settings to this button widget i usually like to begin by setting the cursor from an arrow to a pointing hand just to indicate that this element is clickable we can do this by typing button set for store inside the round brackets we'll type q for store we will open another set of round brackets and inside them we'll type qt core qt pointing hand corsar all in camel case in the next line we will tackle the initial styling of our button we will obviously add on to it but it will be a good beginning so we will type button dot set style sheet so i would like my button to have a border of 4 pixels solid in the color of bc as in beautiful british columbia 0 0 6 c as in bright pink and yes we're doing pink for this gui and just to make sure that my head doesn't block this line of code i'm going to split it into a few lines and the way to do this is basically i'm concatenating a string so let's say this was our border we will add a plus character um and we will go to the next line where we'll begin another string and here i will set the border radius with border dash radius and in my case let's begin with 15 pixels let's see how it looks like and we can go from there um this will ensure that our button has rounded corners i would also like the text to be quite big so we will specify a font size and in my case that would be 35 pixels and of course don't forget the semicolons in the end of each of these commands like i forgot okay and we will add the very last line of styling at least for now and this would be the color of our text um in my case i would like this to be white and once we finished our basic styling let's place this widget on the grid we'll just copy this line of code and instead of logo we will change it to button and instead of row zero we will place it in row one okay let's save it let's rerun our file and it looks like i have a typo so let's go back to the code and see exactly what i did here okay set custer it's not what i wanted to write i wanted to write set poor sore i don't even know how i got to this spelling so let's go ahead and rerun it boom we have a button and no typos this time now this button is kind of ugly okay but if we um run our mouse over it you can see that the cursor is changing to a pointing hand but that's still not quite interactive enough i would like to add a hover event where the background of this button changes to pink each time that the mouse is pointing over it first we will make our button prettier and we will begin by adding some padding to it if you guys are not too familiar with css padding is the space inside the element margin is the space outside the element that's how we differentiate between the two and i would like to add a padding of 25 pixels on the top and the bottom of the button and no padding at all on the side of the button similarly we will also add margin to our button and this would be hundred pixels uh for the top and the bottom and 200 pixels for the left and the right side and since our button is much bigger now thanks to this uh padding that we added here i would also like to change the border radius from 15 to 45 because i would like my button to be as oval as possible and once our button is pretty enough we will tackle the hover event so right in the beginning of our string we will add an asterisk and a curly bracket in the very end of our concatenated string we will add a closing curly bracket and we will concatenate another string to it by typing plus and in the next line we'll begin with an asterisk a colon hover and we will open a set of curly brackets inside this set of curly brackets we will specify the css for our hover event in my case if you remember i would like my background to be bright pink we will just copy this color and we will paste it here and we will finish with a semicolon and we will add it to the rest of the commands where i forgot to add it and this should do the trick so let's go ahead and save this file let's rerun it boom look at this beautiful button and each and every time we're hovering above it it changes the color and this is exactly how the first frame of our trivia game is gonna look like now because we'll have more than just one frame it makes sense to put this frame inside a function and call it as needed so let's go back to our code and tackle this right above our display logo comment we will define a brand new function which we will call frame one and this function is not going to take in any parameters i will select all the lines of code up until the add widget command and we will indent those lines with a tab and now if we call frame one right underneath this function and we will save our file our app is going to look exactly the same now the reason why everything works perfectly is because we're only dealing with one frame once we'll begin to add more frames we will need to access our widgets on a global level right now they are very local okay because button and logo do not exist in the global scope for this we will go to the very very top of our code and we will create a brand new variable called widgets we will assign it to a dictionary where we can store our widget as key and value pairs so the first key will be logo and this key will equal to an empty list at least at first the next key would be button and it will also equal to an empty list at first and once we've initialized this global dictionary we can append our local widgets to it so let's go ahead and scroll down so right below our logo styling we will type widgets in the key of logo [Music] dot append logo and we will do the exact same thing for our button widget we will just scroll down a little bit we will type widgets which is our dictionary button which is our key dot append button and lastly instead of placing the local variables inside our grid we will place the global variables so we will copy our button widget and we will add an index of -1 to it which indicates the last item of the list now with pi cutie five index of minus one is gonna be your best friend because index zero doesn't always work so we'll just use minus one instead let's do the same thing for our logo widget we will type widgets in the key of logo in the index of -1 okay let's save it and let's have a look boom everything looks the same nothing changed that's exactly what we wanted okay so we are done with frame number one so let's get rid of it and let it rest until we figure out frame number two and we will begin defining our brand new frame i will call it frame two as you can guess the first element we'd like to add to our interface is our score we can store it inside a label widget by typing score equals q label and inside the round brackets let's say our score is 80. and this is just a placeholder for now we will tackle the functionality in part two of this video and i would like to place this score label in the right side of our window so we'll just scroll a bit up and we will copy this align command from our logo widget we will paste it right underneath and we will refactor logo to score as well as refactoring a center to right i will also quickly add some styling to this widget and if we're already here let's create another label widget which we will place right underneath the score and this will store the question so we will type question equals q label again and as text we will write place folder text will go here blah my head almost covered this line of code but it didn't this widget is going to be centered on our interface so we will just copy the logo set alignment command and we will adjust logo to question and because each question is going to have a different link to it some questions may take up one line some questions may take up two lines we will need to account for it with a word wrap value so we will simply type question dot set word wrap true and this will display all the long strings in several lines and lastly i will obviously add some styling to this question and once we are happy with the styling of these widgets let's go ahead and add them to our global list so we'll scroll up we will add another key of score which will also equal to an empty list and another key of question which is also an empty list we will scroll down we will append our score to the global list with widgets score dot append score we will copy this line of code we will do the same for our question and lastly we will place these two widgets on the grid by typing grid dot add widget and it's faster to copy this value from here and adjust it to score in the index of minus one and this time we will place it on row zero and on column one because it's going to be on the right hand side of our screen for the question widget we will just copy this entire line and we will refactor it to question as well as row number one column number zero now because our question element is always going to be very wide it would take up two different columns and not just one for this we will need to specify a rowspan and a column span which are optional parameters because they default to one so we will specify the rowspan with one and we will specify the column span with two because we need two different columns for this widget and lastly in order to display the frame we will simply call it right after the function frame two this time and actually before i run this program and get a typo error let's fix this typo over here so it's word wrap sorry guys and another thing i would like to fix is some of these parameters here i've originally created this application on a different computer i need to do some adjustments so let's save this file let's finally rerun it boom we have our score and we have our question now let's go ahead and add some buttons so right above our add widget commands we will type button equals cue push button and as a placeholder text for now we will type answer one and the first thing we will do is we will set the courser to a pointer so we'll just copy it from the first button element and we will also pre-define the width of this button by typing button dot set fixed width and i would like to have it at 485 pixels and since we're going to have four of these buttons it makes sense to wrap them up in a create buttons function just so we don't repeat all these long lines of code so right above the button definition we will wrap everything up in a function which we will call create underscore buttons and this function will take in one string which will represent the text of each of the buttons we will call this string answer and instead of passing answer number one as a placeholder text we will simply pass answer which would be our parameter now don't forget the colon and the proper indentation here and of course we will need to return this button in the very end of our function so we'll type re turn button and let's copy this function actually cut it and we will paste it at the very very top right in front of the first frame we'll fix the indentation and if we're already at the top of our code we might as well add our answer buttons to the global widgets dictionary and now we will scroll down all the way to our frame 2 function and we will initialize these widgets so button one equals create underscore buttons with the text of answer one now let's go ahead and copy this and right below we will append these buttons to our global list and now we can place these buttons on the grid let's save our file let's rerun it and the buttons are there they're just very very hard to see um our cursor is obviously detecting them so let's go ahead and add some styling so they can be visible to us we will scroll all the way up to our create buttons function and in the very end we will add a button dot set style sheet okay let's save it and let's have a look cool so our buttons are there but i would like to have a very big gap from the edge of the screen to the button in a very small gap between each of the buttons so let's tackle this with some parameters inside our button function so right after our answer parameter we will add l underscore margin and we will add r underscore margin and we will use these parameters inside our css commands so what we'll do is we will add an additional line of code here to represent margin left we will concatenate a string instance of l margin which is our parameter and we will end this with the x to indicate the pixels in a semicolon of course to this we will add another line we'll just copy this line and instead of margin left we will do margin right instead of l margin we will do our margin and lastly we will need to update our function call inside frame two so let's scroll down over there okay so instead of just keeping it at create buttons answer one we will add a left margin of 85 pixels and a right margin of 5 pixels to answer 1 and answer 3 and we will add the opposite margins which are 5 and 85 2 answers 2 and 4. let's save it let's rerun our code boom our buttons look much better but our score looks awful let me quickly fix it in the code and we can move on and it looks much better now i simply adjusted the padding and the border radius you might have to do this on your end as well so the last item we will add to this frame is a logo at the very bottom and to save some time we will just copy the previous logo we've initialized and we will refactor it slightly we'll paste it in the second frame fix the indentation instead of logo png we will say logo underscore bottom png which is the name of our second file and instead of margin top 100 we'll do 75 and we will add a button margin of 30 pixels and lastly we will need to place this widget on the grid as you guys already know and we will also need to specify a row span and a column span because this widget is going to take up two different columns so the row span is one and the column span is two cool let's save it let's rerun our file boom our beautiful logo is on a page and our second frame is complete now let's go ahead and learn how we can switch between the frames so right above our create button function we will define a brand new function called start underscore game and we will begin by removing our widgets off the page so for widget in widgets which is our global dictionary so if widgets widget is not equal to an empty list then we will remove this widget by typing widgets in the key of widget in the index of minus one dot hide round bracket and since we're not using these widgets anymore it also makes sense to remove them from the global dictionary so we will do this with another for loop so for i in range 0 to the length of widgets in the key of widget we will pop our list of widgets so we'll type widgets in the index of widget dot pop and after we remove these widgets from the interface and from the global dictionary we can safely call frame two and actually because this chunk of code has very useful functionality to us let's split it to another function so we'll just cut it and we will call this function clear widgets it will not take in any parameters we will paste everything inside this function fix the indentation and we'll simply call clear underscore widgets in the first line of our start game function okay and once we have this function ready we can go ahead and attach it to a click event of our button so let's scroll to frame one and right before we attach this button to our dictionary we will type button dot clicked dot connect inside the round brackets as you can guess would be our start game function okay so let's save it let's rerun our file let's click on the play button boom our second frame appears if you guys would like to see a continuous process let's quickly add a function to these buttons as well so let's close our interface scroll to the very top so let's call this function show frame 1 and we will call clear widgets in the first line of code in the second line of code we will attach frame one and we can go ahead and attach the click event to our button so button dot clicked dot connect and show frame one go ahead and run it play okay so we'll need to uh set a row and column span to frame one so this will take up one row and two columns as well as our button would take up one row and two columns okay let's rerun it this time it should work fine boom perfect so it doesn't matter on which of the four buttons you press it will trigger the exact same function so this is my favorite way of creating frame widgets in pi qt5 now obviously there are several ways you can do this and pi qt5 actually has a frame object which you can use if you guys want to learn more about it check out the link to the documentation in the description of the video and you can learn much more about this beautiful beautiful library thank you so much for watching if you guys found this video helpful please leave it a thumbs up and maybe a nice comment or if you want to be extra awesome you can share the video with your other programmer friends and this will help me grow the channel so much faster and the faster my channel grows the more time i have to create this beautiful project and the more frequent those videos will be posted so i hope you guys enjoy this video and if you have any questions definitely leave them in the comments below i will see you next time

Channel: Python Simplified

Views: 87,569

Rating: 4.9364629 out of 5

Keywords: python, python programming, gui, pyqt5, python gui, create interface, create gui, gui tutorial, python tutorial, trivia game, pyqt5 widget, create widget, make widget, widget, interactive ugi, change frames, switch frames, gui frame, button widget, style widget, design gui, design application, create app, create application, atom, anaconda, girl programmer, coding, coding tutorial, css, css styling, codealong, pyqt5 introduction, graphic user interface

Id: 9iZLDnW_vwU

Length: 30min 25sec (1825 seconds)

Published: Fri Mar 12 2021