/Python GUI’s with PyQt5

Python GUI’s with PyQt5

Video: Python GUI’s with PyQt5


In this video I will be covering the basics of how to create GUI's in Python using PyQt5. I will demonstrate how to find the designer and basic usage, converting .ui to .py, running the output file and connecting buttons to methods. For this tutorial you will need Python 3.5 or above. First open up cmd and execute "python -m pip install PyQt5" to install PyQt5. Make sure it says it was sucessfully installed and solve bugs if it hasn't before you continue. Next execute "python -m pip install pyqt5-tools" and make sure it has installed sucessfully again. You should now be able to import PyQt5 in a python shell. You will now want to locate the designer executable that was added when you installed pyqt5 tools.

Open up a python shell and import site. Now print the result of site.getsitepackages(). This should print out a couple of paths; we can see it has provided the location of my python executable and the site-packages folder. Open up a file explorer and navigate to the site-packages folder. In this folder you then want to locate the pyqt5-tools folder and open it. In this folder you should find a few files, one named designer.exe. This is the program that we will use to make designing GUIs a lot easier. I recommend creating a shortcut to this on the Dekstop for easy access later. Run the program and you will be welcomed with a selection window; select "Main Window" and then click "Create". You will now be shown an empty window in the middle of the designer's window with widget options on the left and some other windows to the right. On the left you can drag widgets from the drop-downs onto the MainWindow object in the center. On the right in the Object Inspector you can see the current widgets in your window. Right below that is the Property Editor that allows you to modify the widget currently selected.

For this example, we will be just putting a button that prints "Hello World!" when pressed in the Window; soon we will work with a larger example when the basics are out of the way. First make your window a bit smaller by clicking and dragging the bottom right of the window. Now find the "Push Button" widget on the left and drag it into the window anywhere. You can double click on the button to rename the text in it; set it to "Print Message". Save this file to somewhere you will remember, I will save it on the desktop. Now that we have our .ui file, we need to convert it to Python code so we can modify and run it. To do this we need to locate pyuic5. pyuic5 converts .ui to .py in one simple command and is located in the 'Scripts' folder in your Python distribution. If you don't know where this is, open your python shell back up and import sys and os.

READ  Send & Receive Email on Your AT&T Trek 2 HD | AT&T

Then print the directory name of the python executable. You will be provided a path of where your python distribution is located; mine is at C:\Python36. Go to that folder and then open the scripts folder in that folder. pyuic5.exe should be in this folder, to run it we will need to first open up cmd. Now cd to the directory by typing cd and then pasting the current location in the file explorer using right click. Now if you type pyuic5 you should be given a small error; this is good. Type pyuic5 again but then add a dash x flag with the path of your .ui file and then add a dash o with the ouput file path. My .ui file is on my dekstop so I will put my python file on the desktop too; make sure you use full paths unless you know what you are doing. When executing this, it shouldn't take very long and provide no errors; the python script should now be on the dekstop.

Open this generated python script in IDLE and then run it and wait for the GUI to appear; the button currently doesn't work because we haven't made it do anything. Go back into the code for this GUI and look at the setupUi definition. You should see a class variable called self.pushButton which later has its text set to "Print Message" in the retranslateUi definition below; this is the object of our button that we need to make do something. First create a new class method called printMessage. You simply want to make this print "Hello World!". Now at the bottom of the setupUi we can call .clicked.connect() on the pushButton object passing the printMessage method, make sure not to put brackets for this method in here. Now when you run the script again, clicking on the button will print hello world.

READ  How to Speed Up Your PC – Windows 10 Disk clean up 💾 DIY in 5 Ep 43

Now that the basics are out of the way I'll show you how to put images in a GUI after asking the user for an image and how to add data to a table. Open the designer back up and create a new MainWindow. Now create and position a label, two push buttons, a list widget and and lineEdit widget as I have done. In this example, pressing the top button will open a window to select and image for us to set and pressing the button at the bottom will add the text in the input to the table. If you click on a widget, for example the button that will be selecting the image, the Property Editor on the right will display all the options for that object. In there you can edit things like the exact size or position, borders, tooltips and fonts. First edit the Label that is holding the image by clicking on it to open it up in the Property Editor.

Find "text" under the QLabel section and delete the text, this is the same as double clicking and removing the text. Now go to the QFrame heading and change "frameShape" to box, this will put a border around the image. Now set the text of the button that will add text to the table to "Add" and the button to open the image selector dialog to "Select Image". Click on the select image button and in the QWidget header go to "font". This has many options inside of this so play around to get a font you like. To help us later on, for each widget, change the objectName under QObject in the Property Editor so you can identify them in the code easier. The names that they're changed to will be the varaible names. Last time we edited self.pushbutton but this time it will be self.

whatever you named the widget; I recommend using the same names as I have for simplicity. Save this file as a .ui and then convert it to a python script like we did before. Make sure to remember to use full paths. Open the new script up in IDLE and run it. Once again the buttons won't work as we haven't made them do anything. If you go back into the editor, you will see that the names that you set the widgets have now become their varaible names in the code which is very helpful for identification. To link the image button, you will want to create a class definition called setImage. In this method we want to ask the user for an image using a dialog. If they provide a file, we then need to create a pixmap object and then set the pixmap object to the image label. Before we set it, it is ideal to scale the image to fit inside the label without stretching and aligning it to the centre.

READ  DIY 3G / LTE Signal Booster - Part 1

Now we need to attach the button to the definition. This can simply be done using the connect method we used previously; make sure to put it at the bottom of the setupUi definition like we did before. Run the script and make sure that your button works. Initially the label will be clear but each time you select a file it should change to the selected file. When selecting the file, you would have noticed that you could only select image files. If you want to remove this functionality, you need will need to remove the last string parameter from getOpenFileName. I also talk a bit about this in my article which is linked in the description. We will now need to create another class definition called addItem. In this method we need to get the value of the lineEdit object and then clear it. We can then simply add the value we just got to the listWidget.

And then like before, we need to connect the button to the method just under the last one we did. Running the script, you should now be able to type in the text edit item and then press add for the item to go into the list. All the code in this video including the .ui files can be found in the article for this video on my website which is linked in the description or at the end of this video. PyQt5 oviously contains a LOT more features and widgets that I have not covered. If you want to learn more about PyQt5 there are many tutorials linked though google and the documentation and stackoverflow questions are very helpful. If you have any questions put them in the comments and I will try my best to help you..