Tutorial on GUI with Python using DearPyGui (0.8) — part 2

source

Hi everyone! Today I am going to continue with the second part for the tutorial on dearpygui. Last time we made a program that uses input fields and lists. This time I am going to show some more widgets like simple plots, plots, tooltips, and popups. I won’t be talking about the small things I talked about in my last blog, so if you haven’t read that, then make sure to check it out. So let’s get started.

Simple plots

Dearpygui provides us with a widget that allows us to make a simple plot. Why is it called a “simple” plot? Because we can use this widget to make quick graphs that do not require much modification. Let’s see an example. Like last time, I am going to make a window really quick and set its height to 600 and width to 800. If you don’t remember, we do this by first making a viewport and then specifying the width and the height.

This is the code for it:

from dearpygui.dearpygui import *
setup_viewport()
set_viewport_height(600)
set_viewport_width(800)
start_dearpygui()

This is the result:

Now I am going to make a sine curve. I’ll use numpy for this. For those who don’t know, numpy is another module that allows complex calculations. This is the code:

import numpy as np
x = np.linspace(0,2 * np.pi, 50) # np.sin deals in radians which is
                                 # why I used an array from 0 to
                                 # 2*np.pi
y = np.sin(x)

Now that we have our data let’s make a window to put our graph in:

with window(label="simple plot", height=300, width=400):
    pass

Result:

Now let’s understand how the simple plot widget works. In the simple plot widget, you first specify a label (optional). Then you use the “default_value” argument to specify the y values we calculated. And that’s it. The most simple plot ever. You might be thinking, “What happened to the x values?”. The simple plot widget uses the index values of the elements in the y array as the x values. Additionally, you wont’ get to resize the axes and some other functionality that the “plots” widget has to offer. According to me, one example where you would use simple plots is to show a trend without much detail.

Let’s apply the simple plot widget now:

with window(label="simple plot", height=300, width=400):
    add_simple_plot(label="Sine wave", default_value=list(y),
                    height=180, width=180)

Result:

The simple plot widget allows you to make histograms too. Just set the argument histogram to True:

This looks weird in a sine curve but hopefully, you get the idea:

Plots

The plot widget is a more advanced version of the simple plot widget as it is composed of many components. However, it’s slightly more tricky to implement than the simple plot. For the plot widget, we need to:

1. Define a plot
2. Define the axes for the plot
3. Define the series for every “y axis”

This is best understood with an example. Let’s start with an empty window:

I will plot the same sine curve. We had already made the numpy array for the x and the y axes. Let’s implement a plot:

with window(label="simple plot", height=400, width=500):
    with plot(label="Sine curve", height=300, width=400):
        pass

Output:

As you can see, with a single line of code, we can scale the axes(using scrollbar), move to any part of the graph(left mouse click), and zoom over any part of the graph(right mouse click and drag). Adding data is a little more complex.

Remember, in the simple plot, all we cared about was the y axis. Here we must define the x axis too:

add_plot_axis(mvXAxis, label="x")
add_plot_axis(mvYAxis, label="y", id="y_axis")

We need to define an id for the y axis as any series can be defined for every y axis in your plot. A series can be thought of as the type of graph. Hence, when you define the series, you need to enter the x and y values, but you need to mention for what y-axis it is. Now let’s add the data. I will use a simple line series. However, dearpygui offers a lot other series too. Here is an example:

source

add_line_series(x, y, label="Sine", parent="y_axis")

Output:

You can play around with graph of course just like I do in the gif above. Here is a cos graph alongside the sin graph:

And here is a cos graph with another y axis:

The formula for the cos graph is y = 2 * np.cos(x)

As you can see that the plot is very flexible and you can even make the widget plot data in real time! There are many other series available and the best way to get used to them is to try it out by yourself. The plot widget is fully customisable too which allows you to change the look of the table and add additional functionality.

Tooltips

Let’s go back to the sine curve using the simple plot. Let’s say I don’t want the label there. Instead, whenever my mouse hovers over the graph, I want a window to temporarily appear that says sine curve. For that let’s go back the code we had:

from dearpygui.dearpygui import *
import numpy as np
x = np.linspace(0,2 * np.pi, 50)
y = np.sin(x)
with window(label="simple plot", height=300, width=400):
    add_simple_plot(label="Sine wave", default_value=list(y),
                    height=180, width=180, histogram=True)
setup_viewport()
set_viewport_height(600)
set_viewport_width(800)
start_dearpygui()

Let’s set histogram to false and remove the label argument. The output is this now:

For a tooltip to appear, we need a id for the widget we want it to appear over. There are two ways to get the id of a widget.

1. variable_name = widget
2. widget(id = “widget_id”)

For the first method, every time you want to refer that widget, you can use that variable you assigned it to. For the second method, you can use the string you set as the id to refer back to the variable. For the tooltip, you need to tell it what widget its refering to. Using method 1:

with tooltip(variable_name):
    pass

With the method 2:

with tooltip("widget_id"):
    pass

In place of the pass statement, you can add whatever you want your tooltip to show. It can be anything! Here’s what I did:

with window(label="simple plot", height=300, width=400):
    graph = add_simple_plot(default_value=list(y), height=180,
                            width=180)
with tooltip(graph):
    add_text("Sine curve")

Result:

Popups

Let’s talk about popups. We all know what a popup is. A temporary window that appears after an action. Dearpygui offers a popup window too. To do this, let’s start with this code:

from dearpygui.dearpygui import *
import numpy as np
x = np.linspace(0,2 * np.pi, 50)
y = np.sin(x)
with window(label="simple plot", height=300, width=400):
    add_simple_plot(default_value=list(y), height=180, width=180)
setup_viewport()
set_viewport_height(600)
set_viewport_width(800)
start_dearpygui()

Output:

Now suppose I want the user to be able to right click on the graph and get a popup which says something like this is a graph. As usual, this is extremely simple with dearpygui. We just add a popup widget:

with popup(last_item()):
    add_text("This is a graph")

The “last_item()” in the popup widget, tells dearpygui what widget, when clicked on, should activate a popup. Because I have put last_item() there, it literally refers to the last item I have defined, the simple plot in my case. Here is the output when I right click on the graph:

Dearpygui also offers us the functionality to change the mouse click and let’s us define if we want out popup to be modal or not. If modal is set to true, then no other window will be clickable other than the popup. For closing the popup window, we must hide it. Here is an example:

with popup(last_item(), mousebutton=mvMouseButton_Left, modal=True)
              #this is on the same line as above       as modal_id:
    add_text("This is a popup")
    add_button(label="Close", callback=lambda:
               configure_item(modal_id, show=False))

That’s all! Popups are great and, in my opinion, serve as great warning windows.

One Last Widget

Let’s think about the main reason for using GUI: to see things move and change and stuff right? Dearpygui has a important widget called configure_item widget. The syntax is this: configure_item("widget_id", property_you_want_to_change = what_you_want_to_set_it_to) . The widget_id can be a variable or a string(if you have set the id when defining the widget). Using this widget, you can do things like make the plot widget plot data in realtime. I used this widget in the first part to update the listbox when I defined a motor.

Conclusion

Dearpygui is an amazing library. It has many features already and its still in development! Which means you can expect some other awesome features in the future. The developers have a sub reddit and a discord, so I encourage you to join in! For more information, you can see the github too.

Anyway, that’s it for today. I write blogs on programming and space news, so if that interests you, you are in the right place. If you enjoyed this article, do follow me here and leave a clap.

Thanks for reading!