Use a Drag & Drop Editor to Make Tkinter Python GUI Applications!

applications were made with python using keychainter and routine the designer which makes it faster to create applications than it takes to figure it out how to do it in Python by making use of the drag and drop interface and frigma and then automatically converting the design to code in this video I'll show you how to create this dashboard with Dynamic tags input widgets and buttons that are fully functional TK enter so you can spend time making better applications instead of figuring out how to make your widgets look better to get started we first need to download it from the GitHub page we can directly download it here and extract it look at the files [Music] we will then open the folder in a code editor and to use teaching the designer we will need to install all the requirements listed here to do that open up a domino that's navigated to this folder the vs code terminal here automatically navigates into it already we will then run the command type install requirements.txt to install all of the requirements we also need to create a figma account to design the interface with their drag and drop editor mine is mainly used to design more comps and wireframes but we'll be using it the design of peaking the widgets to get started create a new design file and click this icon or press F and drag over the canvas this creates a frame which will be the window of the application and its dimensions are over here [Music] you can also set this background color here or manually set the dimensions I'll make my 700 by 550 pixels we can create basic shapes by clicking on this drop down create a header at the top select the rectangle press R and drag it across we can also change its field Corner over here [Music] as a side note if you want to move around the canvas you can hold on hold on this bar and your left Mouse button then drag it to move the canvas you can also press Ctrl and plus to zoom in or Ctrl and minus to zoom out let's add some text by clicking on this icon or pressing key and dragging it to create a text box [Music] you can change the text form here to make sure it is a font that you have installed as well aside from the font size the font's width color and Alignment can also be changed here before we move on we need to make sure we give our layers appropriate names so teaching the designer knows one wishes to convert them to later on or leave a link in the description to the documentation here with the layer names that you should use for example if you wanted a layer to be a functional and true widget with click enter we need to rename it to text box and if you want tags and framework to be a text to GMP candle we can leave it as a student's teaching the designer can already identify it as a text layer so rename the right language layer here to be a rectangle widget in PJ Intel next up we will create this dashboard metrics let's create another rectangle this time I'll make its Corners rounded by changing the value over here [Music] I'll also change this fill color to the slight yellow color one of the benefits of using frigma is that you can also add effects such as a drop shadow by clicking on this icon feel free to experiment with other effects such as adding an inner Shadow as well but I will stick with just the drop shadow for now we don't want to rename this to be a rectangle if not the widget will not have the rounded corners and the drop shadow that we added when converted to a kitchen application so we will instead make it an image widget I will add some text for the heading giving it the font size of 12 and a darker fill color let's do something similar for the moment here but the fifth one side is often for the same field color [Music] another useful feature of advice that we can easily duplicate this by selecting everything here holding out and dragging it I will make this metric for the expense and give it a really fill color [Music] and for the last metric I'll make it for the palette then give it a green full color I will also extend it to take a few extra space here we can also add images to the frame by dragging it over and resizing it and find this image in the GitHub link below make sure to rename it as well so teaching the designer knows what to convert it through later on for the form over here let's first create the editing text I'll give my phone size of 16 pixels and reuse the same blue color as the header let's duplicate it to create the label below [Music] and we can change the fuse opacity here as well all then also made labels font size chart pixels for the text entry Fields you create a grave example I will pick this shade of gray make it rounded and we should also rename it the text box according to the documentation this ensures that the user will go to type internet later on I will duplicate this to create another field this time for the amount of the expense [Music] and just to Showcase another featuring Sigma we can make this a gradient feel by changing the stability now I will use the same yellow and red colors that were previously used in the document make sure to drag this to the end so the color is visible and feel free to experiment with using other colors we can also track this part to change the rotation of the gradient and then add the summit tags we can make use of these buttons to Center the text I will also make it 20 pixels and use the same dark red color to make this a functional button let us group both of these two layers by selecting them both by holding shift we will then right click and group The Selection renaming it to Button as well [Music] as a side note if you're having trouble coming up with the design for the widgets in your application you can take advantage of how you make UI kits there are many free and paid UI kits available for football allowing you to Simply copy over the ones you need and customizing them this can save you even more time when designing new applications I'll leave links to a few useful ones below before we convert this design we can also make use of plugins such as thread icons we can use plugins by clicking on this button going to the plugins Tab and I recommend searching for this icon save plugin the plugin allows us to search for icons and also to change their colors make sure to select the frame first before adding the icon I'll place it here and rename it as well if your icons layer is not within the frame you can track it appear inside and this is just to ensure that everything we have should be placed in the window when converted to code there are also a bunch of other free fictional plugins you can make use of for both design and for inspiration now to convert our design to python code go to the files downloaded for teaching the designer and find a folder called GUI and run the GUI dot Pi file we need to fill in a few details here the first will be token ID which we can do by going back to the files here and under your account settings add a personal access token for teaching the designer to be able to access your design give it a name and copy the token over make sure you save the token somewhere else as well now we'll go back and copy the URL of the design also ensure only is on within the frame since if they aren't in the same frame they won't be in the same window when converted we can then specify the output half of where we want the generated code to replace that I'll Place mine the simplification to design a folder finally we can click generate and wait for it to do its magic you can view the current progress and any error messages here in console and while we're just generating Code 4 and the interface will be unresponsive which is perfectly fine once that is done you'll find a new build folder wherever you specifying your portfolio to be at in my case it is the same this is the designer folder this contains everything you need for the ticket application within it you'll find four different assets and within that begin the design has released images and converted the button to animation as well so that we have the same design as the one you created we also have a python for the widgets such as tags and images being created in position using the same content names we have in fact the Windows size and color are also the same as the ones we entered if we run it we can see that we have the same application that we created in the sigma designed in a few minutes and the button has a function hooked up to the details called whenever the button is clicked as an example this one we have is ultimately still a ticket application hippos and charts can still be implemented and I'm working on a video that shows us how to create this so subscribe if you want to get notified when it comes out one common problem with kitchen designer if you are using rounded buttons and it displays against a colored background or an image is that there will be white buttons around the button when it is converted since buttons need to be a rectangle when teaching them to fix this simply create a new rectangle resize it to fit the button and use the same color as the background or alternatively duplicate the layout if you are using an image using Ctrl ft and copied to fit the button in both cases you then need to group all players and rename it to button this makes the button rectangular but also ensures that it is wrong there how you can work with the widgets here we'll make it so that when the user has a new expense it updates the expenses labor here to do that we'll first store the current expense as a variable and we will create a function that access a submit Handler for the new expense form in this function we will first get the expense and then using the get method on the entry widget just like how we could do in any other teach in the application which in this case is assigned to the entry that is called tool variable you could rename this broker to make it more descriptive without different assets make sure to convert it to a float battery version and add it to the current expenses [Music] and modify the expense robot will also need to indicate that we are referring to the global variable we'll then need to display the new expands since the expense text is shown by using the create text method on the canvas created here we will first need to start the ID written by it we can then pass in the item config method on the canvas and passing the ID to update text to the new expense value finally we can replace the example function generated by teaching the designer with our Summit Handler function [Music] and now we've run it we are able to complete the expense value in our application let's also edit all the sign at the start using an F string [Music] as a side note you can also find this finish code in the link below besides that that's about all for this video if you're interested about making more than two applications using Peak Intel you'll probably be interested in this video as well if this video has helped you please consider possibly liking it and subscribing to my channel for more such content [Music]

Channel: TurbineThree

Views: 101,732

Keywords: Tkinter Designer, Tkinter Designer Tutorial, Python GUI Drag and Drop, Tkinter Drag and Drop, Python Drag and Drop Tutorial

Id: oLxFqpUbaAE

Length: 11min 16sec (676 seconds)

Published: Sun May 07 2023