How to Dynamically Generate a GUI with Python and CustomTkinter
Python is a great choice when it comes to fast implementing your idea. Even creating a graphical user interface (GUI) is simple to achieve with tkinter. If you want to have something more modern in design, have a look at CustomTkinter.
When you want to create a GUI which has multiple input widgets you will quickly find yourself writing a lot of lines of code. Recently I was exactly facing this and thought of creating my GUI dynamically according to a JSON file.
Below is an example of my dynamically generated GUI (Figure 1) based on the file ‘medium-shop.json’ (Code 1).
I have to admit that my GUI at this stage does not look very nice and it is also not very user friendly. In order to explain the principle it should be fine.
Before we start looking at the code, let us understand the idea about how the GUI will be created.
Structure of the file ‘medium-shop.json’ (Code 1):
- there are two main elements at root: “shop” and “products”
- “shop” has one key element “shopName” and a nested object “address”
- “address” contains multiple key elements to define the address
- “products” contains an array of nested objects where each object represents a “product”
- every “product” contains multiple key elements to describe the product
- the first “product” in the array with the name “Brezel” additionally contains an array which holds the ingredients
If we now look again at the GUI in Figure 1, we can clearly see the structure of the file ‘medium-shop.json’ (Code 1) reflected. Every blue highlighted box represents a key which has sub elements.
Let us now have a look on how to create the GUI dynamically with Python.
The full code can be found below (Code 3). It is separated in multiple sections:
Function ‘main’
In the ‘main’ function we set up the window, read the JSON file we want to use for creating the GUI, call the function to create the elements for the GUI (‘createGUI’) and add a button for a function we will explain later.
Remark: we will not read the values of the ‘medium-shop.json’ file and add them as initial values to the GUI. In this example there will be no initial values, everything will be empty.
Function ‘addHeading’
The ‘addHeading’ function is used to create a heading represented by a label. In the GUI this function creates the blue boxes with the white text inside.
Function ‘addLabelWithEdit’
The ‘addLabelWithEdit’ function creates an input field and the corresponding label as a description. In the GUI this is for example the shopName label and the corresponding input field.
Function ‘createGUI’
‘createGUI’ is the core function to build the GUI dynamically. It loops through the content of the JSON file and creates the required elements. It uses the previously defined functions ‘addHeading’ and ‘addLabelWithEdit’. ‘createGUI’ is called recursively to simplify the logic.
Function ‘readValues’
The ‘readValues’ function is just a demonstration of how the content of the dynamically created GUI can be read again. The function is bound to the button which was created in the ‘main’ function. For simplicity ‘readValues’ is printing the result to the console. If some values are added to the input fields in the GUI, then a result can look like shown below in Code 2. For every element ‘readValues’ prints the name and the content or the label text of the element. If available it prints all the parents up to the root element and also prints out if the element belongs to an array with a certain index.
Summary
We have discussed how to dynamically create a GUI with Python and CustomTkinter based on a JSON file. The code uses a recursive function to create the GUI. Additionally all elements of the GUI can be accessed and the values can be read.
