Hi !

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.

Done !

	# Bruno Capuano 2020
	# display the camera feed using OpenCV
	# display the camera feed with grayscale using OpenCV
	import time
	import cv2
	import PySimpleGUI as sg
	# Camera Settings
	camera_Width = 320 # 480 # 640 # 1024 # 1280
	camera_Heigth = 240 # 320 # 480 # 780 # 960
	frameSize = (camera_Width, camera_Heigth)
	video_capture = cv2.VideoCapture(0)
	time.sleep(2.0)
	# init Windows Manager
	sg.theme("DarkBlue")
	# def webcam col
	colwebcam1_layout = [[sg.Text("Camera View", size=(60, 1), justification="center")],
	[sg.Image(filename="", key="cam1")]]
	colwebcam1 = sg.Column(colwebcam1_layout, element_justification='center')
	colwebcam2_layout = [[sg.Text("Camera View GrayScale", size=(60, 1), justification="center")],
	[sg.Image(filename="", key="cam1gray")]]
	colwebcam2 = sg.Column(colwebcam2_layout, element_justification='center')
	colslayout = [colwebcam1, colwebcam2]
	rowfooter = [sg.Image(filename="avabottom.png", key="-IMAGEBOTTOM-")]
	layout = [colslayout, rowfooter]
	window = sg.Window("El Bruno – Webcams and GrayScale with PySimpleGUI", layout,
	no_titlebar=False, alpha_channel=1, grab_anywhere=False,
	return_keyboard_events=True, location=(100, 100))
	while True:
	start_time = time.time()
	event, values = window.read(timeout=20)
	if event == sg.WIN_CLOSED:
	break
	# get camera frame
	ret, frameOrig = video_capture.read()
	frame = cv2.resize(frameOrig, frameSize)
	# if (time.time() – start_time ) > 0:
	# fpsInfo = "FPS: " + str(1.0 / (time.time() – start_time)) # FPS = 1 / time to process loop
	# font = cv2.FONT_HERSHEY_DUPLEX
	# cv2.putText(frame, fpsInfo, (10, 20), font, 0.4, (255, 255, 255), 1)
	# # update webcam1
	imgbytes = cv2.imencode(".png", frame)[1].tobytes()
	window["cam1"].update(data=imgbytes)
	# # transform frame to grayscale
	gray = cv2.cvtColor(frame, cv2.COLOR_BGR2GRAY)
	# # update webcam2
	imgbytes = cv2.imencode(".png", gray)[1].tobytes()
	window["cam1gray"].update(data=imgbytes)
	video_capture.release()
	cv2.destroyAllWindows()

view raw PySimpleGui2camview.py hosted with ❤ by GitHub

Resources

• GitHub, PySimpleGUI
• PySimpleGUI, Read the Docs