Columns and Frames are the elements provided in PySimpleGUI module to organize and group elements in a window. In this Tutorial on PySimpleGUI Column and Frame we will understand how to divide a window into columns and add elements to a frame to make it a unit with different groups of elements.
PySimpleGUI Column
A column can be understood as a container element appearing as a vertical section of a window. You can create as many columns as required in a window by adding the columns in the window layout. Each of these columns can be filled with a predefined layout.
Syntax
sg.Column(layout,[other attributes] )
The layout can be created as you have already created layout in the first PySimpleGUI Tutorial. Other attributes of Column element are –
background_color – String, to set the background color of the column
size-(Integer,Integer), is the size of the columns defined as pair of values representing width and height of the column.
pad– Integer, is the padding space you can specify of a specific column with respect to other elements.
scrollable– Boolean, set it true if you wish to add a scroll bar to the columns. Use it if the columns may get bigger content than its defined size.
key/K -String, the key assigned to combo element to identify this column in the values list returned by the window read() method.
Justification- String, defines how the column will be justified in the window. All the columns in one row will have the same justification.
element_Justification- String, defines how the elements in the columns will be justified. Allowed values are ‘left’, ‘right’ and ‘center’
grab –Boolean- defines whether you can grab the column with mouse and move to another location
expand_x, expand_y Boolean, Boolean – can be set to True if you want the column to grow horizontally and vertically when its contents exceed the original size of the column.
Code Example
columns example
import PySimpleGUI as sg
#set the theme for the screen/window
sg.theme("DarkTanBlue")
#define layout
sz=(10,20)
col1=[[sg.Text('Column1', background_color='red', size=sz)]]
col2=[[sg.Text('Column2', background_color='green', size=sz)]]
col3=[[sg.Text('Column3', background_color='yellow', size=sz)]]
col4=[[sg.Text('Column4', background_color='blue', size=sz)]]
layout = [[sg.Column(col1, element_justification='c' ), sg.Column(col2, element_justification='c')
, sg.Column(col3, element_justification='c'), sg.Column(col4, element_justification='c')]]
window =sg.Window("Column and Frame",layout)
event,values=window.read()
window.close() Output
PySimpleGUI Frame
A frame is a container element that contains other pySimpleGUI elements. The frame groups the elements such that they can be relocated as one unit. Elements in different frames belong to their respective frames. You can identify a frame in any GUI interface as a box with an outline/ border and having a caption on top left portion. The caption is called that title that usually is written to tell the users about the purpose of grouped elements in a frame.
Syntax
sg.Column(Title, layout,[other attributes] )
Title – String, is the text that you want to show so that a user knows about the context of the elements placed on a frame.
Layout – List, is the list of lists that defines the elements and their attributes. The other attributes that you define to set the appearance and working of a frame. You can use an existing layout to define the elements of the frame.
title_color –String, to set the color of the title text
title_location- ENUM, is used to set the location of Title text. The allowed values are defined by using string of 1 or 2 characters from the combination of e, s, n and w (east, south, north and west). Allowed values are e, en, es, n, ne, nw, s, se, sw, w, wn, or ws
background_color – String, to set the background color of the frame
border_width- Integer, to set the width of the border in pixels.
size-(Integer,Integer), is the size of the columns defined as pair of values representing width and height of the column.
pad– Integer – is the padding space you can specify for a frame with respect to other elements/frames.
font –String, to set the font family of the text
key/K -String, the key assigned to frame element to identify this frame in the values list returned by the window read() method.
element_Justification- String, defines how the elements in the frame will be justified. Allowed values are ‘left’, ‘right’ and ‘center’
visible -Boolean, to set the visibility of the frame at the runtime. If visible is False all the elements placed in the frames will also be not visible.
tooltip -String, the small text that appears when the user rests mouse cursor on the frame.
Code Example
import PySimpleGUI as sg
#set the theme for the screen/window
sg.theme("DarkTanBlue")
#define layout
options=[[sg.Frame('Choose your Bread',[[sg.Radio('Whole Wheat','rd_bread', key ='Whole Wheat'),
sg.Radio('Multigrain','rd_bread', key='Multigrain'),
sg.Radio('Normal','rd_bread', key='Normal'),
sg.Radio('Stuffed','rd_bread', key='Stuffed'),
sg.Radio('Healthy seeds','rd_bread', key='Healthy seeds')]],border_width=10)],
[sg.Frame('Choose your Toppings',[[sg.Checkbox('Pepperoni',key='Pepperoni'),
sg.Checkbox('Mushroom',key='Mushroom'),
sg.Checkbox('Corn',key='Corn'),
sg.Checkbox('Cherry Tomatoes',key='Cherry Tomatoes'),
sg.Checkbox('Olives',key='Olives')]], title_location='ne', background_color='white' )],
[sg.Frame('Choose your Sauces', [[sg.Checkbox('Onion',key='Onion Sauce'),
sg.Checkbox('Paprika',key='Paprika'),
sg.Checkbox('Schezwan',key='Schezwan'),
sg.Checkbox('Tandoori',key='Tandoori')]],title_color='yellow', border_width=3)],
[sg.Button('Submit', font=('Times New Roman',12))]]
choices = [[sg.Frame('Customise Your Pizza', layout= options)]]
items_chosen = [[sg.Text('You have Chosen')],
[sg.Text("", size=(50,3),key='options')]]
# Create layout with two columns using precreated frames
layout = [[sg.Column(choices, element_justification='c'), sg.Column(items_chosen, element_justification='c')]]
#Define Window
window =sg.Window("Column and Frame",layout)
#Read values entered by user
event,values=window.read()
#access all the values and if selected add them to a string
strx=""
for val in values:
if window.FindElement(val).get()==True:
strx=strx+ " "+ val+","
while True:
event, values = window.read() # Read values entered by user
if event == sg.WIN_CLOSED: # If window is closed by user terminate While Loop
break
if event == 'Submit':# If submit button is clicked display chosen values
window['options'].update(strx) # output the final string
#Close Window
window.close() Output
Note:- You can mix frames and columns to create an interface of your requirement.
Be First to Comment