BMET2922 Computational Analysis for Biomedical Signals - Laboratory : Graphical User Interfaces
Laboratory
Graphical User Interfaces
1 Introduction
To be able to access computer functionality some sort of user interface is required. Traditionally, this was a text-based interface. In some applications the text interface is still preferred and can be extremely powerful. In the majority of applications, from smart phones to medical instruments to industrial control systems, a Graphical User Interface (GUI) is often preferred.
2 Objective
The objective of this laboratory is to gain skills and confidence in using the capabilities of the pySuimpleGUI graphical user interface package (the call reference page is a handy reference).
3 Materials
You will need the following materials for this lab. 1. A computer with Python3 installed
The microcontroller board is not required for this lab.
4 PySimpleGUI
4.1 pySimpleGui
pySimpleGUI is a Python package to support the simple creation of complex GUIs which can easily interact with Python code. It is cross platform with the package available for Windows, Linux, Mac, and Android. Detailed information about the package is available @ https://pysimplegui.readthedocs.io/en/latest/
The TkInter package, which ships as a standard part of the Python distribution, provides a Python- friendly interface to a cross platform programming language and GUI toolkit, called Tcl/Tk.
pySimpleGUI interworks with TkInter to provide a programmatically simple to easily create powerful and flexible GUIs. It is claimed that pySimpleGUI requires “1/2 to 1/10th the amount of code as underlying frameworks” if they were access directly. This means more time and effort can be spent on building the “right” GUI, rather than writing reams of code.
pySimplGUI provides a rich set of “elements” which include Text boxes, Sliders, Buttons / Radio buttons, Progress bars, Tables, tabs, panes and more.
4.1.1 Layout
The layout is a list of row definitions. Each row definition is also a list, even I there is only a single element in that row. i.e. elements in a single row are comma separated, and enclosed in square brackets.
Figure 2 - pySimpleGUI Layout declaration
4.1.2 Event Loop
The Event loop is an infinite loop which repetitively calls window.read(), with an optional timeout specified, to obtain the most recent event (e.g. button push) and a dictionary of values associated with elements in the window.
Using this information actions (e.g. button pushes) in the GUI can be detected and acted on, data can be read from the GUI, and using the dictionary window data can also be written to the GUI. Based on
Implementing GUIs using pySimpleGUI is comprised of two main parts: 1) creating the window
including a “layout” declaration, and 2) continuously reading from the window using an “event
Figure 1 - pySimpleGUI layered package approach provides GUI portability
Loop”.
knowledge of GUI events and values code to implement any required behaviours is implemented in, or called form the event loop.
Note that the event sg.WIN_CLOSED (equal to None) in the example above is returned when the window is closed by the user.
The calling reference documentation for each of the elements is available @ https://pysimplegui.readthedocs.io/en/latest/call%20reference/. This describes each of the elements, and all of the associated options. Note that most options have useful default values. A first cut of a GUI can typically leave options at their default values.
A “cookbook” of examples is available @ https://pysimplegui.readthedocs.io/en/latest/cookbook/.
5 Exercises
In this lab, as series of programming exercises will be undertaken and functions written to create GUIs of varying complexity and functionality. For each of the exercises, the following are provided:-
- The docstring for your functions which describes the code to be written is provided (more below)
- An example window
- Sample output
For each exercise you should write a single function that produces the specified window, behaviour and output.
File header – For each file that you create in this lab, please include a header (ie literally the first few lines of the file) of the following format: note the triple “”” to start and finish it are important and must be included:
Function header – and for each function, include the header that is provided for that exercise (again, is should literally be the first few lines within the function):
import mod as mod
print(mod.__doc__) # prints file/module info print(mod.func.__doc__) # prints function info
5.1 Investigate Themes
Create a python file that includes your function for this task. Here is the docstring to go in your function:
The default is 4.
Hint: the following code may be of assistance. Note that this exercise does not require a Layout or Event Loop.
sg.theme_previewer() # creates a window showing all themes themes=sg.theme_list() # returns a list of all themes
Output
Black BrightColors Dark2 DarkBlack1 DarkBlue10 DarkBlue13 DarkBlue16 DarkBlue3 DarkBlue6 DarkBlue9 DarkBrown2 Etc...
BlueMono
BrownBlue
DarkAmber
DarkBlue
DarkBlue11
DarkBlue14
DarkBlue17
DarkBlue4
DarkBlue7
5.2 Simple Window
Docstring to go in your function for this task: “””
5.3 Button Window
Docstring to go in your function for this task: “””
5.4 Multi-Button Window
Create a new python file containing a single function for this task. It requires adding multiple buttons to the first row of the window layout. Here is the docstring for your function:
5.5
Button pressed was Button 0 Button pressed was Button 2 Button pressed was Button 4 ...
Checkpoint 2 Reached: call you tutors to mark it off
Multi-Slider Window
Create a new python file containing a single function for this task. It will require reading and understanding the slider element, described here. Scan through the arguments and their descriptions to figure out how to get your desired display and behaviour. Hint: setting the enable_events argument to True in the slider function will make the sliders trigger events whenever they are moved. Here is the docstring for your function:
5.6
Slider0 moved to 2.0 Slider0 moved to 3.0 Slider0 moved to 4.0 Slider1 moved to 2.0 Slider1 moved to 4.0 Slider1 moved to 5.0 Slider1 moved to 6.0 Slider1 moved to 7.0 Slider2 moved to 2.0 Slider3 moved to 2.0 Slider3 moved to 3.0 Slider3 moved to 4.0 Slider3 moved to 5.0 Slider3 moved to 6.0 Slider3 moved to 7.0 Slider3 moved to 8.0 Slider3 moved to 9.0
Listbox Window
Create a new python file containing a single function for this task. It requires including a listbox element on the first row of the layout, and an exit button on the second row. Again, scan through the arguments for the listbox element and their descriptions to figure out how to get your desired display and behaviour:
5.7 Matplotlib GUI
Create a new python file containing only your function for this task. Here is the docstring for your
There are also some modules you need to import after your docstring, and before your function:
from tkinter import *
from random import randint
from matplotlib.backends.backend_tkagg import FigureCanvasTkAgg, FigureCanvasAgg
from matplotlib.figure import Figure
import tkinter as Tk
This function must be called after the window is created.
The axes (ax) support methods including plot(), set_xlabel("...") , etc can then be applied to the ax object returned by addPlot(). Finally the plot can be displayed using the figAgg object returned by addPlot(), in the following way:
figAgg.draw() # refresh the canvas
