Python Progress Bar, Spin and Slider with PySimpleGUI

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()
Python Progress Bar, Spin and Slider Example output

2 Comments

  1. MC said:

    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?

    May 11, 2021
    Reply
    • admin said:

      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)

      May 12, 2021
      Reply

Leave a Reply

Your email address will not be published. Required fields are marked *