Pylab with Gtk4: Unleash the Power of Python Visualization

Introduction

In this lab, we will learn how to use pyplot to manage figure windows, but modify the GUI by accessing the underlying GTK widgets. We will create a figure with two plots and add a button to the toolbar and a label to the canvas. We will also add functionality to display the coordinates of the cursor when it moves over the plots.

VM Tips

After the VM startup is done, click the top left corner to switch to the Notebook tab to access Jupyter Notebook for practice.

Sometimes, you may need to wait a few seconds for Jupyter Notebook to finish loading. The validation of operations cannot be automated because of limitations in Jupyter Notebook.

If you face issues during learning, feel free to ask Labby. Provide feedback after the session, and we will promptly resolve the problem for you.

Skills Graph

%%%%{init: {'theme':'neutral'}}%%%% flowchart RL python(("`Python`")) -.-> python/BasicConceptsGroup(["`Basic Concepts`"]) matplotlib(("`Matplotlib`")) -.-> matplotlib/BasicConceptsGroup(["`Basic Concepts`"]) matplotlib(("`Matplotlib`")) -.-> matplotlib/PlottingDataGroup(["`Plotting Data`"]) matplotlib(("`Matplotlib`")) -.-> matplotlib/PlotCustomizationGroup(["`Plot Customization`"]) matplotlib(("`Matplotlib`")) -.-> matplotlib/AdvancedTopicsGroup(["`Advanced Topics`"]) python(("`Python`")) -.-> python/ControlFlowGroup(["`Control Flow`"]) python(("`Python`")) -.-> python/DataStructuresGroup(["`Data Structures`"]) python(("`Python`")) -.-> python/FunctionsGroup(["`Functions`"]) python(("`Python`")) -.-> python/ModulesandPackagesGroup(["`Modules and Packages`"]) python(("`Python`")) -.-> python/DataScienceandMachineLearningGroup(["`Data Science and Machine Learning`"]) python/BasicConceptsGroup -.-> python/comments("`Comments`") matplotlib/BasicConceptsGroup -.-> matplotlib/importing_matplotlib("`Importing Matplotlib`") matplotlib/BasicConceptsGroup -.-> matplotlib/figures_axes("`Understanding Figures and Axes`") matplotlib/PlottingDataGroup -.-> matplotlib/line_plots("`Line Plots`") matplotlib/PlotCustomizationGroup -.-> matplotlib/legend_config("`Legend Configuration`") matplotlib/AdvancedTopicsGroup -.-> matplotlib/event_handling("`Event Handling`") python/ControlFlowGroup -.-> python/conditional_statements("`Conditional Statements`") python/ControlFlowGroup -.-> python/for_loops("`For Loops`") python/DataStructuresGroup -.-> python/lists("`Lists`") python/DataStructuresGroup -.-> python/tuples("`Tuples`") python/DataStructuresGroup -.-> python/sets("`Sets`") python/FunctionsGroup -.-> python/function_definition("`Function Definition`") python/FunctionsGroup -.-> python/lambda_functions("`Lambda Functions`") python/ModulesandPackagesGroup -.-> python/importing_modules("`Importing Modules`") python/ModulesandPackagesGroup -.-> python/using_packages("`Using Packages`") python/DataScienceandMachineLearningGroup -.-> python/data_visualization("`Data Visualization`") python/FunctionsGroup -.-> python/build_in_functions("`Build-in Functions`") subgraph Lab Skills python/comments -.-> lab-48886{{"`Pylab with Gtk4 Sgskip`"}} matplotlib/importing_matplotlib -.-> lab-48886{{"`Pylab with Gtk4 Sgskip`"}} matplotlib/figures_axes -.-> lab-48886{{"`Pylab with Gtk4 Sgskip`"}} matplotlib/line_plots -.-> lab-48886{{"`Pylab with Gtk4 Sgskip`"}} matplotlib/legend_config -.-> lab-48886{{"`Pylab with Gtk4 Sgskip`"}} matplotlib/event_handling -.-> lab-48886{{"`Pylab with Gtk4 Sgskip`"}} python/conditional_statements -.-> lab-48886{{"`Pylab with Gtk4 Sgskip`"}} python/for_loops -.-> lab-48886{{"`Pylab with Gtk4 Sgskip`"}} python/lists -.-> lab-48886{{"`Pylab with Gtk4 Sgskip`"}} python/tuples -.-> lab-48886{{"`Pylab with Gtk4 Sgskip`"}} python/sets -.-> lab-48886{{"`Pylab with Gtk4 Sgskip`"}} python/function_definition -.-> lab-48886{{"`Pylab with Gtk4 Sgskip`"}} python/lambda_functions -.-> lab-48886{{"`Pylab with Gtk4 Sgskip`"}} python/importing_modules -.-> lab-48886{{"`Pylab with Gtk4 Sgskip`"}} python/using_packages -.-> lab-48886{{"`Pylab with Gtk4 Sgskip`"}} python/data_visualization -.-> lab-48886{{"`Pylab with Gtk4 Sgskip`"}} python/build_in_functions -.-> lab-48886{{"`Pylab with Gtk4 Sgskip`"}} end

Import the required libraries

import matplotlib
matplotlib.use('GTK4Agg')
import gi
import matplotlib.pyplot as plt

gi.require_version('Gtk', '4.0')
from gi.repository import Gtk

We import the required libraries including matplotlib, gi, pyplot, and Gtk. We set the backend of matplotlib to use GTK4.

Create the figure and plots

fig, ax = plt.subplots()
ax.plot([1, 2, 3], 'ro-', label='easy as 1 2 3')
ax.plot([1, 4, 9], 'gs--', label='easy as 1 2 3 squared')
ax.legend()

We create a figure with two subplots and plot two sets of data on them. We also add a legend to the plots.

manager = fig.canvas.manager
toolbar = manager.toolbar
vbox = manager.vbox

We access the toolbar and vbox attributes of the figure canvas manager.

button = Gtk.Button(label='Click me')
button.connect('clicked', lambda button: print('hi mom'))
button.set_tooltip_text('Click me for fun and profit')
toolbar.append(button)

We create a button with a label and a tooltip, and connect it to a function that prints a message to the console. We add the button to the toolbar.

Add a label to the canvas

label = Gtk.Label()
label.set_markup('Drag mouse over axes for position')
vbox.insert_child_after(label, fig.canvas)

We create a label and set its text. We add the label to the vbox after the figure canvas.

Update the label with cursor coordinates

def update(event):
    if event.xdata is None:
        label.set_markup('Drag mouse over axes for position')
    else:
        label.set_markup(
            f'<span color="#ef0000">x,y=({event.xdata}, {event.ydata})</span>')

fig.canvas.mpl_connect('motion_notify_event', update)

We create a function that updates the label with the x and y coordinates of the cursor when it moves over the plots. We connect the function to the motion_notify_event of the canvas.

Display the figure

plt.show()

We display the figure with the added button and label.

Summary

In this lab, we learned how to use pyplot to manage figure windows, but modify the GUI by accessing the underlying GTK widgets. We created a figure with two plots, added a button to the toolbar, and a label to the canvas. We also added functionality to display the coordinates of the cursor when it moves over the plots. This lab provides a basic understanding of how to customize the GUI of a matplotlib figure using GTK4.

Pylab with Gtk4 Sgskip