QtDesigner and PyQt5: The right and wrong way to use them together

all right greetings youtubers everywhere Python coders and PI cute users this is Allen d'amour I'm the author of mastering GUI programming with Python from pact publications a book that will guide you all the way through the PI cute library and how to create awesome gooeys using it now creating this video today because I've seen a lot of beginners especially on reddit about other places as well who are trying to use cute designer to create their gooeys and they're running into a lot of problems it's kind of the same problem the same basic mistakes and so I wanted to address that today kind of talk you through this and show you the right way to use cute designer to create a GUI so here we are on the shell let's go ahead and launch cute designer now when you launch cute designer you get this this dialog here and it asks you what you want to base your window on and we're going to just do a widget and that's going to be a cue widget which will see is important later but just remember we're going to do widget that's just the most basic kind of window here with no frills so real quick we're just gonna create like a basic login window alright so we're gonna come down here grab a label drag it up here login to all right stretch that out go ahead and set our layout style to a form layout okay stretch that back out across the whole thing and we'll edit some properties here so he will knock the font size up to maybe 16 make it bold and change the alignment to Center okay now every login it's gonna have user name and password so we'll add those items there we go it's not gonna cooperate here it's user name/password okay now one thing you definitely want to do when you're using cute designer is you want to rename all your inputs to something that you'll remember call that username edit this will be called ms word edit alright because when you do program when you do use this form your program you're going to need to refer to these things to get the data back out of them as we'll see in a minute alright last up we're gonna add a push button here I'll make justice a login we're gonna call that button and then we can adjust the size all right let's control our we'll test that out so we've got user and soups so that's a problem we don't want to see our password let's escape out of that that can be fixed here I'll go down to echo mode and change that to password alright let's control our yeah user and this login ok good alright so there we go we've got our thing let's go up here to save and we're gonna say that as login box and notice they don't hear the file types we have UI all right so it's dot UI let's go ahead and save that okay so that's all we can really do right now in queue designer so the rest of this we're gonna to go back to the shell so let's close out a cute designer alright so what we've got is this login box dot UI file what in the world is a dot ui file let's open it up well as you can see right here this is some kind of XML file okay it is an XML file and this XML file describes our GUI alright well that's not Python code obviously we're using PI Q we need Python code how did we get probably thought code all right let's close this so PI Q comes with a utility called PI UIC five which is short for Python ui compiler five what this is gonna do is it's gonna compile our UI file into Python code okay let's just look at the help for this real quick so as you can see the basic usage is we say pi u IC 5ad some options and then we give it a UI file one of our options is this output option which is gonna tell it what file to put it into so let's go ahead and run this PI u IC v we'll send the output to login box hi and we'll give it our you a clout here alright let's go ahead and run login box top hi hi ok nothing happened huh we would probably have expected that that would just launch our little login window but it did not okay well what do we got here okay let's look back at these options we've got this execute flag so generate extra code to test and display the class okay so let's rerun PI UIC 5 with the X flag all right Python login boxed up PI ah success all right there is our awesome login box ok of course it doesn't do anything so you might wonder at this point well what do I do to actually make this a program and so the natural thing for a lot of people to do is open up this Python file and let's take a look in here ok so scroll down here you can see what this does is it creates this class called UI form alright and inside this UI form class we have a function or method called setup UI and it generates that user interface that we made so you can see here is the password edit here's user name edit here's our submit button ok and all this font stuff is set here all these labels that we added and then down at the bottom we have a little if name equals main guard hopefully you've seen that before and it creates an application object it creates a queue widget ok remember that our form is based on cue widget it then creates an instance of our UI form class call set up UI on the forum class and shows the forum and then we run a px exec app dot exec well that sounds like the start of our program right so what a lot of people will do obviously is they'll start right here with this little code and they'll start editing it and that's your first mistake okay because I want you to look right here at this little thing here warning all changes made in this file will be lost now unfortunately a lot of people just kind of blow this away and say well nevermind that I'm just I'm just gonna keep this file and maybe we'll add some code here okay this is my awesome login box alright we'll save that go back to our terminal alright this is my awesome login box excellent mission accomplished close that out but then something happens okay then the boss comes in the room or the client comes in the room and they say you know I really need I really need a checkbox my lawyers have got with me and said you know we need the people to agree to the legalese before they can log in and you say well no problem I'll just open up designer here login box to you I all right we can just open that back up let's find a button check box drop that guy right there oops right there right there you'll say I agree to the legalese okay rename it legalese check box save it oops save it close out a cute designer all right now let's run our PI UI see again convert it to Python alright great we have our check box but oh what happened to our print statement let's see let's open login boxed up hi Emacs is telling me it's changed let's reload it my print statements gone why is it gone because this is generated code guys this was generated by by UIC v from our UI file so every time we go and edit that thing this code is gonna get overwritten now if you're smart you'll say wait a minute I could just write it out to another file and copy and paste the changes into my script and you can do that and that is a way to work but it is not a great way to work and it is certainly not the way that this program was designed to be used okay and I'm gonna show you how it was designed to be used but first we're just gonna blithely ignore that we're gonna be smart we're gonna say and when I say smart I mean too smart for our own good we're gonna be smart when I say no I'm just gonna copy and changes from here on out and I'm not gonna overwrite this file okay so we've got this thing we've got this class and we see down here okay well it creates a widget and does some magic here that we don't maybe understand but now I need my class to do something I need a callback method okay I need it to authenticate it's a login box so I want it to login right I want it to check a username and password so let's just write a basic function here let's write a basic method it well our function but wait a minute we can't just write a function because our authentication function is gonna need access to that password value and that username value that are in there okay so I guess we need to create a method where should we create a method well the obvious place is in this class right here because that's where our are logging widgets are so let's create a class we'll call it authentic eight okay and just for simplicity we'll say we'll get the username equals self dot username edit text get the password cell self dot password edit text all right and we'll say if username equals user and password equals pass okay so in this case we want to log them in for now tell you what let's just go ahead and show a little pop-up box will use queue message box that information so I typing malfunction their cue message box that information now the first argument we have to make in one of these message boxes is a parent widget so obviously the parent widget would be our login box so I guess self right that's our login box okay and then we'll say success you logged in pro or sis that's the case maybe alright so if it's not that we're gonna show an error message QT widgets a cute message box not critical again we need the parent widget to be self fail no login for you alright so the last thing we need to do is we want to connect that submit button when it's clicked we want to run our authenticate function so so you know we got to make that connection up here and set up UI that makes sense right sure submit button dot clicked doc connect Thank You Kate all right well masterful coding here let's try this out right sorry if I'm being a little snarky I'm just trying to point out where we're doing the wrong thing so those of you listening with one ear what I'm showing you right now is the wrong thing okay not the right thing all right so let's try this a user tab orders a little bit out of whack here but that's alright user pass login again nothing's happening here it's a little weird let's try something else let's try user and blah blah blah here again nothing happening so maybe I did something wrong here a self-taught authenticate there we go of course okay there we go I always check your your linter they're good practice okay sorry for that little detour let's go back again let's see user and pass and login uh-oh I killed it what happened here excuse me what happened here cutie widgets that cue message box that information self success information cue widgets argument one has unexpected type UI form okay so I'm I'm playing a bit here I know exactly what's happening and let me explain what's going on here so we kind of approach this with the impression that UI form is our window and that's not really correct if you'll take a look at this class definition UI form is subclass from object the generic default Python object it's not subclassed from qwidget it's not subclass from even queue object so it is not a QT thing at all are cute sorry it's not a cute object at all it's just a Python object this setup UI function is simply created to take some sort of Q widget here that would be form and it is meant to set up a UI on that form and we can see that down here at the bottom right here where we create a Q widget and pass it to set up UI form so if we want access to our parent widget here we can't do that inside of this class because the parent widget doesn't exist in this class okay now perhaps we could save a reference to form here somewhere and use that okay but that gets a little messy yeah now if you know cute and maybe you'll say wait we don't need a parent widget for these dialogues let's just set it to none okay let's do that and you'll see that solves our immediate problem and so let's go back here we'll say user pass okay you logged in so that worked but we still have problems here because let's say what we really ought to do from a login box is send a signal okay so let's define a signal right that's what we would do we should define a custom signal on this object so authenticated equals cute core thank you signal completion fail signal okay and then instead of showing a dialog box okay we're gonna omit that signal so self-medicated okay checker is just a little behind it all right okay now let's go back to our shell and try to log try to run this okay use your famous again Oh another error okay type UI form cannot be converted to PI cute Court queue object boy that's a very strange error what does that even mean okay so what's happening here you cannot emit signals from a class that's not subclass from queue object now any qwidget humain window most cute classes are subclass from queue object it's sort of the base class for most not all the most cute classes okay but this is not subclass from those this is just a regular Python object we cannot define signals on this okay so as you can see this is just a couple of examples of where we're just running into these problems okay we're tying ourselves in knots painting ourselves into a corner and it's just not going well all right let's let's close this so I'm gonna stop showing you the wrong way okay because this is just the way I've seen other people do this that is messed them up we're gonna rerun pi UIC five we're gonna skip the X cuz we don't really need that and we're gonna regenerate our login box library okay let's open it up okay so we just have the UI form alright good okay now I'm gonna show you how this should be used how this is meant to be used okay and I hope I've demonstrated the kind of knots you tie yourself in when you don't use it the right way so that you'll understand when I say the right way we're trying to save you trouble okay not trying to tell you how to write your code just trying to save you a lot of trouble so the correct way to do this is we're gonna actually create a second file okay we're gonna call it login box main hi you can call whatever you want it doesn't really matter and this is gonna be our main script okay that login boxed up high we're gonna treat like a library we're not gonna edit it we're not even we don't even really need to open it okay unless we need to refer to what's in it okay but we're gonna create a second script and import that other script okay now right away I know what some of you're thinking you're thinking I don't really want to create something that complicated I'm used to maybe just keeping everything in one file nice and simple one script I understand I completely understand I there's a big link between creating a Python script and a big Python application with lots of files okay and there's issues of code organization I get it but what I'm telling you is this is how this tool was designed to be used and if you're gonna use cute designer to make your gooeys and will later talk about whether that's a good idea or not if you're gonna use cute designer this is the way you need to use it okay so we're gonna import our file so from login box import UI form okay we're also going to import cute widgets so from my cute 5 import widgets and I like to a leus this as qtw it just saves a little space and we're gonna get cute core if you see just a space-saving thing okay so with any cute thing it's crazy if main will create our app you application passing an empty list and then we're gonna say after exec so what are we gonna create in here now in the other file they created a qwidget they assigned that created a UI form object and then ran the setup UI on the cute widget okay what we're gonna do here is we're gonna create a new class and this class is gonna be then our main login window okay we're gonna call this login window and it's going to be based on Q widget now remember at the very beginning of this video when we created our widget and we created it based on Q widget or widget was just the thing in the menu the other options were like main window or dialogue whatever you chose there is what you need to subclass here okay so we chose widget so we need a subclass of Q widget okay so then we're gonna override the init method I'm gonna do arcs and keyword args the first thing you always need to do when you overriding it and a cute object is to run super init and we're just going to pass along those args and there's keyword arts sorry so what that does is all that's doing is passing along any arguments that were passed in so that this still behaves in every way like a queue idjit okay and then we're just gonna add functionality but just to make sure let's say widget equals login window widget show okay so now if we run this box mein right we should see just a regular qwidget with nothing in it very good that's what we see now we got to get our UI form in there the one that we designed in cute designer so what we're gonna do is we're gonna create an instance of this UI form object and we're gonna sign it to self dot UI then we call the setup UI method I call the setup UI method and we pass in self so self is this login window object the qwidget we're gonna pass that into setup UI and what setup UI is gonna do is it's going to build that GUI that we designed onto this Q widget okay let's see that in action okay let's go back to our terminal write a thing and here we go we've got our login box very good good of course it doesn't do anything yet so where do we add those methods that we want the callbacks for well we add them right here on our login window that is totally the appropriate place so authenticate so so now we can say we need to case a if username equals user and password equals pass aw they're cute message box message box nation now we can call information we can use self we can use our login window as a parent widget because it is a widget okay success logged in all right else do the critical so they'll log in now I haven't got username password yet and I want to show you so to access those widgets okay how do we get to those well they are part of that UI object okay they have preferences there so we can say self that UI that username edit dot text okay and that will be where we get username and password likewise is self dot UI dot user oops password edit text okay and to make our connection let's go back up to an it to connect our our button to our callback we will say self dot UI dots submit button dot clicked not connect self dot indicate all right now let's go back here let's try it again user yes again you're logged in user gibberish login you did not log in awesome so that works so just a review the takeaway points here alright so when you use cute designer do not edit this file that is generated that is number one do not edit this file okay so if I were to go back and edit my UI file in cute designer and regenerate this file it wouldn't change anything okay as long as I didn't rename user name and password it wouldn't change anything I would not have to copy and paste code or anything like that I would just have to edit this to take advantage of whatever new functionality I added okay so don't edit this file instead you're gonna subclass your widget or main window or whatever you based your UI on and you're going to add your functionality your callbacks your signals your slots all that stuff is gonna go in this class okay now there's another way to do this that you can do if you don't like the idea of all your your your inputs and things being under this UI namespace if you want it just to be like self dot user name edit there's another way to do this you can actually do multiple inheritance with UI about that little keyboard glitch you can add UI form here and then just run self dot setup UI self okay tell you both let's go ahead and see that in action and if you do that you can get rid of this dot UI business see if that actually works yeah okay user pass good okay so that might be a little cleaner if you don't like having that UI business it's a little more esoteric and implied it's not as explicit but there you go that is the proper way to use that now before I go I just want to address the question is Q designer really good for a beginner to use when working with pi q I really don't think it is okay Q designer and more specifically PI UIC 5 was designed to help people who are working on large programs to use designer and to use it efficiently ok that's why it generates this kind of weird abstract class here okay rather than actually generating a widget like you would expect it to the reason it does things the way it does is because it's designed to help people creating large applications we're gonna have to go back and edit those things again and again and again and it's a brilliant design it's a great design I'm not knocking the design but if you're someone who's just starting out and you want to keep things simple and intuitive it's a little unintuitive and it certainly creates an extra layer of code that you have to understand it creates some confusion and it kind of hides what's going on okay so like I have to just know that submit button exists in my UI form I just have to know that user name it it exists in there it's not explicit here in this code alright and that's a little abstract sometimes for a beginner who's just trying to wrap their around how do we create gooeys in cute okay and to be honest it really doesn't save you a lot of work it saves you knowing a few things it might save you a few trips to the documentation well it may be a wash actually by the time you actually understand this but I don't really think it saves you much work and I've been ridiculed for this point of view I've had people tell me look it's current year and nobody hand codes beauties well I'm telling you you're wrong plenty of people including me hand code gooeys in this tool kit in HTML in whatever even in 2019 and they'll be doing it in 2020 and 2021 and you know probably for several years after that okay because it's not that hard it's really not that much effort to just hand code it and when the alternative is you know doing all the stuff we were doing in designer clicking this button and clicking this and finding the property and then editing that and then moving this here and you know you do all that it's not that much less effort than just coding okay so if you're a beginner and your desire is to just say I want to keep this all in one file you don't like the idea of it being multiple files and having to do imports between files you just want to keep it simple and straightforward by all means just do that by but do it by hand coding don't do it by messing around with designer and creating this weird class and having to go back in and you know or messing yourself up by editing this file or anything like that just write it okay it's really not that much work so something to think about and as always do check out my book it goes through all this stuff it does teach you how to use designer it also teaches you how to hand code these things so that you can get a handle on that and if you have any questions feel free to leave them below I'm gonna leave you some links in the description hope you enjoyed this video hope you learned something from it and gave me something to think about best wishes god bless y'all

Channel: Alan D Moore Codes

Views: 96,946

Keywords: Python, PyQt5, QtDesigner, GUI Programming, Qt5, PySide, Packt, WYSIWYG GUI

Id: XXPNpdaK9WA

Length: 37min 15sec (2235 seconds)

Published: Wed Aug 28 2019

Reddit Comments

[u/domstyle]

You can skip the .ui → .py conversion entirely:

from PySide2 import QtUiTools

uiLoader = QtUiTools.QUiLoader()
window = uiLoader.load('main.ui')
window.loginButton.clicked.connect(doLogin)

[u/jiejenn]

I like your teaching style, much better than mine since on my channel, I focus on building practical applications instead of going into the fundamentals. I personally prefer dealing with ui file directly since it is easier to import to other platform, but convert ui to py file has its own advantages. Really wish you wouldn't go with Packt though since after working with that publisher, I found them to be quiet pushy and cheap.

Just few things I think it might help if you decided to make more videos in the future:

1. Increase your text editor font size.
2. See if you can get a better microphone, there are some static noise in the background.
3. 1080p is the standard now.

[u/AnotherEuroWanker]

I'd have read a text file, but a 40 minute video is much less useful imo.

[u/lykwydchykyn]

Hi folks! I created this video to help people learn to use QtDesigner and PyQt together the right way. Enjoy!

[u/radhaanu_26]

Hi, can you please suggest how to use Pyside with ros? I'm trying to View the rosbag on a pie chart. This has to be GUI based.