The power of open source – Creating a GUI with Python and guizero

This isn’t going to be a guide about how to program a GUI (graphical user interfaces) using guizero (hopefully I’ll add some instruction on that in future), but it does explain which I chose guizero, some of the concepts I used and a bit of an insight into this open source software library.

This article is about my contribution to the guizero python library for creating GUIs. For more details about how you can create your own Gui applications see Tutorial on creating a GUI in Python using guizero.

Adding GUIs was too hard – until now …

The story starts about a month ago, when I decided that I wanted to add a GUI to my Network Quiz Challenge. I actually wanted to add a GUI a year ago, but decided it would take too long back then and it got pushed to the back-burning until now. I already had most of the code in place (it involves a Raspberry Pi running Python talking to a Arduino using PySerial), but it was command line only.

I have some experience of writing code for graphical user interfaces on a variety of platforms, but generally it is the most difficult and time consuming part of any programming project. For anyone that is starting out in programming it can also be an incredibly steep learning curve just trying to get started in GUI programming. I have created a program before using Python and tkinter (which is the default GUI library for Python) but the code created is quite complex – see NeoPixel GUI for Raspberry Pi.

After looking around a bit I came across a couple of Python libraries that are trying to make the experience of learning a GUI easier, and in the end I settled on guizero. It’s mission “The aim of guizero is to make the process of creating simple GUIs quick, accessible and understandable for children.”

Contributing to the Python guizero library

I started work on the GUI version, but came across a couple of issues. One is that there was a bug in the provided example code which had the x and y values the wrong way around, which I was able to work through and submit the correct details back to the maintainers. The second issue was due to a lack of column and rowspan feature in the grid layout. The grid layout arranges the widgets into a grid going across and down. This is best visualized by thinking about a spreadsheet. If you wanted a header to go across multiple columns in a spreadsheet then you would merge multiple cells together, this is the same using grid layout where columnspan merges them horizontally and rowspan vertically. This is something that tkinter supports (which guizero uses behind the scenes), but because it needed to be configured when creating the widgets it was not possible to use this except by updating the guizero library. I raised this on the GitHub issues page. Fortunately guizero is under active development at the moment so I got a response straight away. We discussed different ways of implementing it and I was able to contribute the code to add that feature. I also updated the document showing an example of how the gridlayout can be used to arrange photos as shown below, which is something that was not possible using the grid layout before.

The code is now in the main code so can be used by anyone else. This is an example of how open source code can benefit the wider community as the things that I implemented for my own requirement will benefit others, in the same way that I was able to build on code that others had done (after all guizero would not exist at all without the contributions of others).

Creating the GUI for the quiz

I only had a short time to create the GUI, as it was needed for January I didn’t start until after I’ve finished studying for my Master’s degree in the December. This was also through the Christmas period where I’ve been incredibly busy with my family and other volunteer activities. So I didn’t have much time to explore different ways of creating the GUI and fell back onto an old tried and tested hack of using almost invisible images to set the column widths. This is an old technique that used to be popular with websites before we had CSS.

It’s a bit of a hack, but it did the job. I may look at alternatives in future which may work better, but as far as a usable GUI it worked well. For this reason I probably won’t be using this code as a teaching example, it’s also quite complicated for learning from as I have used object orientation throughout the code (something that I think is good, but perhaps a bit advanced for the kids that guizero is primarily aimed at). You can see an example of how it looks in the screenshot below. I think it looks OK, not as good as some applications, but considering it was done in a short timeframe then all the main functionality is there.

Another “cheat” is that the speedometer shown in the screenshot above is actually a static image. I created three different images and an appropriate one is shown depending upon the score.

Using guizero and tkinter side by side

One other thing that I needed to do was to use some native tkinter widgets as well as those through guizero. In particular I wanted a File Open dialog, but that is not yet implemented. This is one of the flexibilities of guizero in that in some cases even where something is not yet implemented in guizero it’s possible to just call the tkinter code directly.

Contributing to open source software

Although almost all the code that I write is open source it is normally something I write for myself, either to meet a requirement that I have or as a way to learn something new. I have contributed to some other projects, but as with my contribution to guizero that has been only fairly small. Much of this is due to time as it can take a long time to get familiar with existing code to the point where you can provide a bigger contribution. Much of my time is spent on my family, other volunteer activities (including Scouting and STEM Ambassador), my personal projects (writing and programming) and until recently studying for another Master’s degree.

I’ve now completed my degree so I do have a little more time available, so I would like to contribute more to
a more established project, but I’m not sure what yet. I do think that these GUI frameworks are useful including guizero and pygamezero (similar concept but for creating games rather than regular applications).

It can be difficult when there is already an active team developing the code and you don’t want to get in the way of other development. In this case there was different ways that the span could be implemented, so I was able to discuss it with the existing developers first so that it was consistent with their ideas as well.

Summary

This post is more about the advantages of open source software. Open Source software benefits from the collective contributions of many people and it can bring additional rewards in knowing that you helped someone else. The fact that I could update the library in time to complete my project was much better than if this was closed source.

So if you see an opportunity to fix some code then take a look at how you can help.

Creating a Python gui in guizero

See the following video for more details about creating a GUI using guizero.