Create Simple GUI with Matplotlib Sine Wave

Introduction

In this lab, you will learn how to create a simple GUI using Matplotlib's Button widget. The GUI will allow you to modify a sine wave by changing the frequency using the Next and Previous buttons.

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 matplotlib(("`Matplotlib`")) -.-> matplotlib/BasicConceptsGroup(["`Basic Concepts`"]) matplotlib(("`Matplotlib`")) -.-> matplotlib/PlottingDataGroup(["`Plotting Data`"]) matplotlib(("`Matplotlib`")) -.-> matplotlib/InteractiveFeaturesGroup(["`Interactive Features`"]) matplotlib(("`Matplotlib`")) -.-> matplotlib/AdvancedTopicsGroup(["`Advanced Topics`"]) python(("`Python`")) -.-> python/DataStructuresGroup(["`Data Structures`"]) python(("`Python`")) -.-> python/FunctionsGroup(["`Functions`"]) python(("`Python`")) -.-> python/ModulesandPackagesGroup(["`Modules and Packages`"]) python(("`Python`")) -.-> python/ObjectOrientedProgrammingGroup(["`Object-Oriented Programming`"]) python(("`Python`")) -.-> python/AdvancedTopicsGroup(["`Advanced Topics`"]) python(("`Python`")) -.-> python/DataScienceandMachineLearningGroup(["`Data Science and Machine Learning`"]) matplotlib/BasicConceptsGroup -.-> matplotlib/importing_matplotlib("`Importing Matplotlib`") matplotlib/BasicConceptsGroup -.-> matplotlib/figures_axes("`Understanding Figures and Axes`") matplotlib/PlottingDataGroup -.-> matplotlib/line_plots("`Line Plots`") matplotlib/InteractiveFeaturesGroup -.-> matplotlib/interactive_backends("`Interactive Backends`") matplotlib/InteractiveFeaturesGroup -.-> matplotlib/widgets_sliders("`Widgets and Sliders`") matplotlib/AdvancedTopicsGroup -.-> matplotlib/event_handling("`Event Handling`") python/DataStructuresGroup -.-> python/lists("`Lists`") python/DataStructuresGroup -.-> python/tuples("`Tuples`") python/FunctionsGroup -.-> python/function_definition("`Function Definition`") python/ModulesandPackagesGroup -.-> python/importing_modules("`Importing Modules`") python/ModulesandPackagesGroup -.-> python/using_packages("`Using Packages`") python/ObjectOrientedProgrammingGroup -.-> python/classes_objects("`Classes and Objects`") python/ObjectOrientedProgrammingGroup -.-> python/encapsulation("`Encapsulation`") python/AdvancedTopicsGroup -.-> python/iterators("`Iterators`") python/DataScienceandMachineLearningGroup -.-> python/numerical_computing("`Numerical Computing`") python/DataScienceandMachineLearningGroup -.-> python/data_visualization("`Data Visualization`") python/FunctionsGroup -.-> python/build_in_functions("`Build-in Functions`") subgraph Lab Skills matplotlib/importing_matplotlib -.-> lab-48594{{"`Create Simple GUI with Matplotlib Sine Wave`"}} matplotlib/figures_axes -.-> lab-48594{{"`Create Simple GUI with Matplotlib Sine Wave`"}} matplotlib/line_plots -.-> lab-48594{{"`Create Simple GUI with Matplotlib Sine Wave`"}} matplotlib/interactive_backends -.-> lab-48594{{"`Create Simple GUI with Matplotlib Sine Wave`"}} matplotlib/widgets_sliders -.-> lab-48594{{"`Create Simple GUI with Matplotlib Sine Wave`"}} matplotlib/event_handling -.-> lab-48594{{"`Create Simple GUI with Matplotlib Sine Wave`"}} python/lists -.-> lab-48594{{"`Create Simple GUI with Matplotlib Sine Wave`"}} python/tuples -.-> lab-48594{{"`Create Simple GUI with Matplotlib Sine Wave`"}} python/function_definition -.-> lab-48594{{"`Create Simple GUI with Matplotlib Sine Wave`"}} python/importing_modules -.-> lab-48594{{"`Create Simple GUI with Matplotlib Sine Wave`"}} python/using_packages -.-> lab-48594{{"`Create Simple GUI with Matplotlib Sine Wave`"}} python/classes_objects -.-> lab-48594{{"`Create Simple GUI with Matplotlib Sine Wave`"}} python/encapsulation -.-> lab-48594{{"`Create Simple GUI with Matplotlib Sine Wave`"}} python/iterators -.-> lab-48594{{"`Create Simple GUI with Matplotlib Sine Wave`"}} python/numerical_computing -.-> lab-48594{{"`Create Simple GUI with Matplotlib Sine Wave`"}} python/data_visualization -.-> lab-48594{{"`Create Simple GUI with Matplotlib Sine Wave`"}} python/build_in_functions -.-> lab-48594{{"`Create Simple GUI with Matplotlib Sine Wave`"}} end

Import the necessary libraries

First, let's import the necessary libraries, including matplotlib.pyplot, numpy, and Button from matplotlib.widgets.

import matplotlib.pyplot as plt
import numpy as np
from matplotlib.widgets import Button

Set up the initial plot

Next, we will set up the initial plot. We will create a sine wave with a frequency of 2 Hz using numpy's arange function, and plot it using matplotlib.pyplot's plot function.

freqs = np.arange(2, 20, 3)
fig, ax = plt.subplots()
t = np.arange(0.0, 1.0, 0.001)
s = np.sin(2*np.pi*freqs[0]*t)
l, = ax.plot(t, s, lw=2)

Create the button callback functions

Now, we will create two callback functions for the Next and Previous buttons. These functions will update the plot with a new sine wave with a different frequency.

class Index:
    ind = 0

    def next(self, event):
        self.ind += 1
        i = self.ind % len(freqs)
        ydata = np.sin(2*np.pi*freqs[i]*t)
        l.set_ydata(ydata)
        plt.draw()

    def prev(self, event):
        self.ind -= 1
        i = self.ind % len(freqs)
        ydata = np.sin(2*np.pi*freqs[i]*t)
        l.set_ydata(ydata)
        plt.draw()

callback = Index()

Create the `Next` and `Previous` buttons

Now, we will create the Next and Previous buttons using matplotlib.pyplot's add_axes function, and assign the callback functions we created earlier to them using on_clicked.

axprev = fig.add_axes([0.7, 0.05, 0.1, 0.075])
axnext = fig.add_axes([0.81, 0.05, 0.1, 0.075])
bnext = Button(axnext, 'Next')
bnext.on_clicked(callback.next)
bprev = Button(axprev, 'Previous')
bprev.on_clicked(callback.prev)

Display the plot

Finally, we will display the plot using matplotlib.pyplot's show function.

plt.show()

Summary

In this lab, you learned how to create a simple GUI using Matplotlib's Button widget. You learned how to modify a sine wave by changing the frequency using the Next and Previous buttons.