Working with Computer Vision is super fun. And there are some scenarios where display the step by step of the processing of an image is the best way to present this.
In most of my scenarios I use OpenCV, however for a more detailed presentation I needed to search and learn a GUI framework in Python. That’s how I get to PySimpleGUI (see references).
Note: As a long time C# dev, I’m missing XAML a lot !
PySimpleGUI is very simple (as you can expect!), and with a few lines of code we can create an UI like this one:
Let’s display the camera feed and a gray scale view of the camera feed
Super easy !
Let’s take a look at the code
- Lines 16-34. This is the main window definition. The Window have 2 rows.
- 1st row have 2 columns with the 2 cameras, each camera have their own element key
- 2nd row have an image to display a bottom
- Line 30. This is the final merge of the 2 rows
- Lines 32-34. This is the window definition. We can define title, transparency, etc.
- Lines 37-40. Window Event management, I’ll write more about this for sure. Right now, I’m only checking for window close to exit the loop.
- Lines 51-53. Transform the camera frame to a byte array, based on the PNG format and assign the array to the 1st camera viewer.
- Lines 55-60. Transform the camera frame to Gray Scale frame. Then transform the gray scale frame to a byte array, based on the PNG format and assign the array to the 2nd camera viewer.