Tutorial on GUI with Python using DearPyGUI(0.8) — part 1

source

Hello everyone! Today I am going to talk about a library in python that you can use to make cool looking GUI easily. The library I’ll talk about is called DearPyGui. It is a simple yet powerful library that has a multitude of features. So let’s get started.

Installation

pip install dearpygui

As simple as that. If you use a Mac, you will have python 2 installed by default so you might want to type “pip3 install dearpygui”. Or if you have multiple versions of python 3 then you can specify the version you want to install in by typing “pip3.x install dearpygui”.

Introduction

If you have read my old blogs, then you might know that I am a rocket enthusiast. So I am going to give an example of an application that defines a rocket motor. You can easily tweak the code once you get the basics. I am going to make a simple program which you can use to define a rocket motor. Then you can show them in a list. This will allow you to get the basics of dearpygui and after that the documentation will make much more sense. I am using version number 0.8.41. So let’s get started.

Usage

Let’s start off by running this code:

from dearpygui.dearpygui import *
setup_viewport()
start_dearpygui()

This will result in a window like this:

The window is called the viewport. On this you will have all your widgets. You can change the size of the viewport by using set_viewport_height() and set_viewport_width(). Both of them will take an integer as input.

First let’s make a really simple class to define a motor:

class Motor:
    def __init__(self, burntime, thrust, totalMass, propellantMass):
        self.burntime = burntime
        self.thrust = thrust
        self.totalMass = totalMass
        self.propellantMass = propellantMass

I’ll define a dictionary which will hold the motor data:

motorList = {
    "Name": [],
    "Motor": []
}

There are definitely more neater ways to do this. For example, the name defined could have been the keys and the values could have the Motor object. Or I could have also simply included a self.name atribute. But this is fine too.

Let’s define the input window:

with window(label="Define Motor", height=200, width=500):
    pass

Let’s run this:

As you can see the widget heading is the label parameter and height and width is set accordingly. Let’s change the height and width of the view port and let’s add another window beside the original one.

with window(label="Motors", height=200, width=300, pos=[500, 0]):
    pass
setup_viewport()
set_viewport_height(400)
set_viewport_width(1000)
start_dearpygui()

Output:

Let’s add input fields in the first window:

with window(label="Define Motor", height=200, width=500):
    name = add_input_text(label="Name")
    burntime = add_input_float(label="Burn Time")
    thrust = add_input_float(label="Thrust")
    totalMass = add_input_float(label="Total Mass")
    propellantMass = add_input_float(label="Propellant Mass")
    add_button(label="Save", callback=defineMotor, user_data=[name,
               burntime, thrust, totalMass, propellantMass])

“name = add_input_text(label=”Name”)” will store the unique id of that widget in the variable “name” so that we can access the widget from anywhere in the code. The same thing is with all the others. The callback argument in add_button takes the name of a function which will execute everytime you press that button. “user_data” is the input you want to give to the button everytime its pressed. We still haven’t defined the function yet, so let’s do that:

def defineMotor(sender, data, user_data):
    motorList["Name"].append(get_value(user_data[0]))
    motorList["Motor"].append(Motor(get_value(user_data[1]),
              get_value(user_data[2]), get_value(user_data[3]),
              get_value(user_data[4])))

Great. Now we have updated the motorList dictionary with new data. So let’s show the names of the motors we have defined in the second window. Instead of the pass statement under the with block, we will enter:

motor = add_listbox(items=motorList["Name"], label="Motors")

“motor” stores the unique id of this widget so that it can be accessed from anywhere. However, this won’t be enough. If you run the program now, everything will appear normal but nothing would be displayed in the list even after you click the save button.

To do this you will need to configure the widget to update with new data in the defineMotor function. So let’s add one more line of code in the function:

configure_item(motor, items=motorList["Name"])

This will allow the list to update. Here is the final result:

As you can see that its scrollable! Both the windows are resizable and can be collapsed and closed. If you don’t like that, then simply add no_close=True, no_collapse=True, and no_resize=True in the arguments for the window command. Additionally, you can also implement some checks so that the same motor name is not used again. You can add a text widget above the save button and set it to “” and when you have detected an error(you can implement the error checking code in the defineMotor function itself), you configure the value of the text widget to “Alert: Can’t use the same name for different motors” or something like that. to change this though you will need to store the id of the widget which can be done by assigning the widget to a variable.

Here is the entire code:

Conclusion

So that’s it for today! I hope you enjoyed this and get to learn something from this. Dearpygui is still in development so new features are constantly being added. You can check the sub reddit and the documentation for much more. I’ll also be posting a part 2 which talks about more features dearpygui provides.

If you liked this article then follow me here. I write blogs on programming and on space. So if that’s what you are interested in, you are in the right place.

Thanks for reading!