To make a Python GUI application interactive, you can use Python Progress Bar, Spin and Slider from PySimpleGUI Module. Before jumping ahead to how these elements can be implemented in a GUI interface, let’s quickly understand these elements and their attributes.
Progress Bar
Progress Bar is a GUI element which can be used when you want users to see how an activity or task is progressing to completion. If you have installed an application or downloading a document, you get to see a progress to see how much installation has been completed or what percentage of document has been downloaded. Most commonly it can is seen as a vertical or horizontal bar in which another bar keeps growing in one direction with the progress of the task.
Syntax
ProgressBar(max_value,[ other attributes])
Attributes
max_value- Integer, the maximum value that will be achieved when a Python Progress Bar increments and progresses to its end.
orientation String, a value that defines how the progress bar will be presented in the interface. Allowed values are ‘horizontal’ or ‘vertical’
size (Integer, Integer), integer values to define width and height of the Progress Bar.
bar_color (String,String) a tuple of two color names that defines the fore and background colors respectively of the Progress Bar. First color is the moving bar color and second color is the background of the Progress Bar.
style String, it is set to define the style of the progress bar. The options are ‘default’, ‘winnative’, ‘clam’, ‘alt’, ‘classic’, ‘vista’, ‘xpnative’
border_width Integer, to set the border width of the progress bar.
Key/K String, set the key that can be used to refer in coding for processing in the application
visible Boolean, to set the visibility of the Python Progress Bar.
Spin
Spin is another GUI element that allows you to select one option from the values added in form of a list. The complete list of values is not visible. It can be moved up or down to chose one option. The GUI control appears like a textbox with up and down buttons. On pressing these buttons you can move through the stored values and select one of these.
Syntax
Spin(values,[ other attributes])
Attributes
values, List or Tuple, of values that has to displayed in the spin element to give options to select from
initial_value, String/Integer, a value from Values list that you wish to display in the first go/ or make a default value of the Spin element
disabled Boolean, By default disabled is False, set it to True to make it enabled for user to interact
enable_events Boolean, by default it is set to False so that the Spin events are not triggered when the spin value is changed.
readonly Boolean, by default it is set to False, since you can read and even type a new value in the text area of the Spin. If it is set to True, its value can only be read. You cannot type a new value in the text area of the Spin.
size (Integer, Integer), integer values to define width and height of the Spin element.
font String, set a font name to define the font family of the text in the Spin.
background_color String, set a color name to set the color of the background of the Spin.
text_color String, set a color name to set the color of the text of the Spin.
Key/K String, Set the key that can be used to refer for processing in code of the application
tooltip String, the tooltip for the Spin element
visible Boolean, to set the visibility of the Spin.
Slider
Many user need to choose a value from a range of values. Such range can be represented as a Slider from a start and end value. The slider has a pair of slider buttons that can be moved and along with the movement the values keeps on changing. A final value chosen can be used for any kind of manipulation. For example if you are asked to change a value from 1 to 10 to show your agreement about an asked question. A slider can be vertically or horizontally aligned.
Syntax
Slider(range, [attributes])
Attributes
range, (Integer, Integer), two values that represent the two end points of the range of values to select from
default_value, Integer/Float, a value from range list that you wish to set in the first go/ or make a default value of the Slider.
resolution Integer/Float, a value by which the Slider will move.
tick_interval Integer/Float, an interval after by which the tick will happen for a slider increment.
orientation String, a value that defines how the Slider will be oriented in the interface. Allowed values are ‘horizontal’ or ‘vertical’
disable_number_display Boolean, set True so that the numbers are displayed with movement of the Slider.
border_width Integer, to set the border width of the Slider.
disabled Boolean, By default disabled is False, to make it enabled for user to interact.
enable_events Boolean, by default it is set to False so that the Slider events are not triggered when the spin value is changed.
size (Integer, Integer), integer values to define width and height of the Slider element.
font String, Set a font name to define the font of the text of the Slider.
background_color String, Set a color name to set the color of the background of the Slider.
text_color String, Set a color name to set the color of the text of the Slider.
Key/K String, Set the key that can be used to refer for processing in the application
tooltip String, the tooltip for the Slider element
visible Boolean, to set the visibility of the Slider.
Code Example Python Progress Bar, Spin and Slider
import PySimpleGUI as sg #set the theme for the screen/window sg.theme("LightBlue") #define layout layout=[[sg.Text("Enter start value",font='Lucida'), sg.Input(key='stVal',size=(3, 1)), sg.Text("Enter end value", font='Lucida'), sg.Input(key='enVal',size=(3, 1))], [sg.Slider(orientation ='horizontal', key='stSlider', range=(1,100)),sg.Slider(orientation ='horizontal', key='endSlider',range=(1,100))], [sg.ProgressBar(50, orientation='h', size=(20, 20), border_width=4, key='progbar',bar_color=['Red','Green'])], [sg.Spin( values =['January','February','March ','April ','May ','June '], key='spnMnt')], [sg.Submit(key='btnSubmit'), sg.Cancel()]] #Define Window window =sg.Window("Progress Bar and Slider Functioning",layout) #Read values entered by user event,values=window.read() window['stVal'].update(int(values['stSlider'])) window['enVal'].update(int(values['endSlider'])) event,values=window.read() i=int(values['stVal']) k=int(values['enVal']) window['btnSubmit'].set_focus() val=0 for i in range(k): event, values = window.read(timeout=100) # update prograss bar value val=val+100/(k-i) window['progbar'].update_bar(val) window.close()
import PySimpleGUI as sg
#set the theme for the screen/window
sg.theme(“LightBlue”)
#define layout
layout=[[sg.Text(“Enter start value”,font=’Lucida’),
sg.Input(key=’stVal’,size=(3, 1)),
sg.Text(“Enter end value”, font=’Lucida’),
sg.Input(key=’enVal’,size=(3, 1))],
[sg.Slider(orientation =’horizontal’, key=’stSlider’, range=(1,100)),sg.Slider(orientation =’horizontal’, key=’endSlider’,range=(1,100))],
[sg.ProgressBar(50, orientation=’h’, size=(20, 20), border_width=4, key=’progbar’,bar_color=[‘Red’,’Green’])],
[sg.Spin( values =[‘January’,’February’,’March ‘,’April ‘,’May ‘,’June ‘], key=’spnMnt’)],
[sg.Submit(key=’btnSubmit’), sg.Cancel()]]
#Define Window
window =sg.Window(“Progress Bar and Slider Functioning”,layout)
#Read values entered by user
event,values=window.read()
window[‘stVal’].update(int(values[‘stSlider’]))
window[‘enVal’].update(int(values[‘endSlider’]))
event,values=window.read()
i=int(values[‘stVal’])
k=int(values[‘enVal’])
window[‘btnSubmit’].set_focus()
val=0
for i in range(k):
event, values = window.read(timeout=100)
# update prograss bar value
val=val+100/(k-i)
window[‘progbar’].update_bar(val)
window.close()
press X button will cause an error which reads:
Traceback (most recent call last):
File “C:\Users\…\Python39\PySimpleGUI_CustomProgressBar2_SpinSlider.py”, line 21, in
window[‘stVal’].update(int(values[‘stSlider’]))
TypeError: int() argument must be a string, a bytes-like object or a number, not ‘NoneType’
Process finished with exit code 1
Any suggestion to fix this?
import PySimpleGUI as sg
#set the theme for the screen/window
sg.theme(“LightBlue”)
#define layout
layout=[[sg.Text(“Enter start value”,font=’Lucida’),sg.Input(key=’stVal’,size=(3, 1)),
sg.Text(“Enter end value”, font=’Lucida’), sg.Input(key=’enVal’,size=(3, 1))],
[sg.Slider(orientation =’horizontal’, key=’stSlider’, range=(1,100)),sg.Slider(orientation =’horizontal’, key=’endSlider’,range=(1,100))],
[sg.ProgressBar(50, orientation=’h’, size=(20, 20), border_width=4, key=’progbar’,bar_color=[‘Red’,’Green’])],
[sg.Spin( values =[‘January’,’February’,’March ‘,’April ‘,’May ‘,’June ‘], key=’spnMnt’)],
[sg.Submit(key=’btnSubmit’), sg.Cancel()]]
#Define Window
window =sg.Window(“Progress Bar and Slider Functioning”,layout)
#Read values entered by user
while True:
event,values=window.read()
if event == sg.WIN_CLOSED or event == ‘Exit’:
break
else:
window[‘stVal’].update(int(values[‘stSlider’]))
window[‘enVal’].update(int(values[‘endSlider’]))
event,values=window.read()
i=int(values[‘stVal’])
k=int(values[‘enVal’])
window[‘btnSubmit’].set_focus()
val=0
for i in range(k):
event, values = window.read(timeout=100)
# update prograss bar value
val=val+100/(k-i)
window[‘progbar’].update_bar(val)
window.close()
Use this code with changes to check the action done by user(click the X button)