Adding Toolbars and Menus with PyQt5 Designer - PyQt5 GUI Thursdays #10

what's going on guys john elder here from cody.com and in this video we're going to look at menus and toolbars with pi qt5 and the qt designer all right guys like i said in this video we're going to look at menus and toolbars before we get started if you like this video you want to see more like it be sure to smash the like button below subscribe to the channel give me a thumbs up for the youtube algorithm and check out codeme.com we have dozens of courses with hundreds of videos that teach you to code use coupon code youtube1 to get 30 off membership it's all my courses videos and books for one time fee just forty nine dollars which is insanely cheap okay so like i said in this video we're gonna look at menus and toolbars and if we come up here to form and preview you see we get this little app and it's got some drop down menus there's some things in it there's some icons here we've got a toolbar here with some icons they don't actually do anything yet but we're going to build all of this stuff out in this video so i'm going to go ahead and close this i'm going to start over so head over to our git bash terminal and i'm in my c pi qt5 directory i've got my virtual environment turned on so let's just run the designer and we can do it like this and that should pop up and now we want a main window so i'll click create okay so here we have just our basic layout and if you see right up here at the top it already has a menu built for us and you can see also down here at the bottom there's a status bar sort of down here with a little grippy thing we're not going to talk about that in this video but just pointing out the things that come with this when they first start and we can come up here and just double click this and start typing so we want one that says file maybe here we want one that says edit whatever here i don't know help whatever and then come down here and click on one of these and then just click the next thing and start typing so we can go open and then maybe we want a new and save i don't know save as and it's just that easy so same thing here just come to the next one cut copy paste whatever and here we might go about something like that doesn't matter you get the idea super easy find find next just playing here replace the common things you see in these menus and it's just that easy so now let's talk about the toolbar toolbar is a little bit harder and if you come through here and look at all the different widgets and things i've got these all minimized for some weird reason but if you look through all of here all of these there aren't any toolbar widgets so there's nothing to drag over here what you have to do is actually come over here and right click and do add toolbar when you do you see boom this thing pops up now what we need is the let me actually resize this a bit so we can get into here we need the action editor and it's down here right here and if it's not appearing here just come over to your views and hit action editor you see boom now it's gone come back action editor bring it back and inside of here these are the different actions we can do and you can see there's already some things listed here for new save save as cut copy paste those things we added here right those are all listed here already and you can play around with them but what we want to do is add something here so come down here to our action editor and let's click this little guy right here that says new and this thing pops up and we can i don't know put anything we want here i'm going to type in home now you can come down here and just click this and pick choose file this box will pop up and you can pick any file you want to add your icons now we're going to talk about icons in just a second but for now let me go to my c gui directory it's where i keep all my kinder images i've got a few button looking pngs so i don't know let's just grab one and we can click ok and you can see now here it is action home and we can just grab this click your mouse drag it up here and you can see a little red thing appears boom pop it right in and that that's it so we can go to form uh preview and you can see this is a button we can click it it does its stuff doesn't do anything but just that easy to create these things all these guys here appear very cool so we can also drag this up into the menu bar too so if we want to put this in i don't know right here boom there it is and we can change this if we want uh play i don't know whatever and now that thing appears in there so very cool and just that easy so this is pretty easy with the designer it's a little tricky if you don't know what you're doing and hey what's this action editor thing but as soon as somebody points out you're like oh that's easy now you're gonna wanna this is just a png that i use and it works fine but you're probably going to want to use some sort of icons you know like windows icons so there's a website let me show you real quick and i'll put a link to this in the description it's p dot yusuke kami yamin right this dude has this fugue icon set you know it's completely free under the creative commons attributions license which means you have to give attribution you have to say hey i got this from this guy somewhere but or you could pay for it but use any icons that you want so we come down here to the free link click this save this and i'm going to save this in my pi qt folder i've also got a folder called images and inside of there i've got a folder called icon so let me just save it in the images folder it's a zip file so we need to unzip it so i'm on firefox my my downloads are up here in this little arrow if you're on chrome they're going to be down here in the bottom left hand corner wherever your downloads are click this thing you can see there it is we want to click it come up here to extract all this box pops up pick where you want this to extract we've got it saved in images but i want to extract it into the icons folder that i created i put that icons folder there and you would just click select folder and then click extract and that will extract them i've already done that so i don't need to do that again but you can see after it extracts it all we can go back here and let me just delete this i don't need it anymore if i look in my icons folder then we can see this icons directory and inside of here there's just like a zillion icons right and they're all pretty cool so you just sort of come through here and find the one you want so for instance if i wanted a bell i could type in bell here click next and there's some bells that show up right so very cool and now we can use these in our designer so come back over here and let's create some let's create some icons now let me get rid of this one because i don't want to use an image like that i want to use an icon so we can come over here to our action editor come up here click this i'm just going to call this bell we already looked at bell and come down to our icon click this little guy choose the file same as before this time navigate to our pi qt directory or wherever you installed those icons click on images icons inside of here icons and then we can search right here so i could go bell search boom here's a bunch of options maybe this bell plus i kinda like that okay there it is we can grab it drop drop it over there boom we've got a bell just that easy very cool so let's add a couple more just for fun here let's come through here and i don't know just choose a file it still says bell here let's get rid of that so let's go back here and we don't want to search result let's just kind of look through here find something we want or you know what let's grab a print guy it was like a good print so we could go print find something we like basic printer double click it and up here let's call this print click ok there it is now we can drag it over boom just that easy very cool let's do one more why not just for fun it's by qt thursday choose file come through here let's close this and we want to go back oop it's a weird thing to pop up oh i guess p so what else do we got sushi a blue folder with a smiley face on it that's weird [Music] maybe an edit list order thing call this edit list i don't know click okay grab this bring it up boom okay so just that easy to create a menu like that to add icons to the menu we got this play button right here and to create a toolbar and add icons like i said it's not really intuitive how to do this because there's no toolbar widget and you have to kind of come down here and finagle with this action editor which is kind of weird what's an action what do we care like ah and even right here when we try and add a new one if you click here the first thing listed is choose our resource we don't want a resource we don't know we're not going to use resource files we want to choose a file so don't get trapped into that always choose file there but other than that it's pretty simple and straightforward obviously these things don't do anything yet you're going to have to program them to do something on the back end like we've done earlier like we did last week with our calculator app but at least now they're on there and you can do whatever you're going to do with them in the future and that's pretty cool so that's all for this video if you like to be sure to smash the like button below subscribe to the channel give me a thumbs up for the youtube algorithm and check out codingme.com where you can use coupon code youtube wanted to get 30 off memberships you pay just 49 to access all my courses over 47 courses hundreds of videos in the pds of all my best-selling coding books join over 100 000 students learning to code just like you my name is john elder from coding.com and i'll see in the next video

Channel: Codemy.com

Views: 7,164

Keywords: pyqt5 menu bar, pyqt5 menu bar example, pyqt5 drop down menu, pyqt5 designer menu bar, pyqt5 designer menu, pyqt5 toolbar example, pyqt5 toolbar position, pyqt5 toolbar add separator, pyqt5 toolbar, qt designer toolbar, pyqt toolbar, pyqt5 designer toolbar icons, pyqt5 menu icons, pyqt5 toolbar icons, pyqt5 toolbar images, pyqt5 designer toolbar images, pyqt5 designer action editor, codemy.com, john elder, john elder pyqt5, pyqt5 tutorial #10, pyqt5 tutorial

Id: IWPIP_V_sFY

Length: 10min 1sec (601 seconds)

Published: Thu Mar 25 2021