Building a simple facial recoginition application with PyQt5 (Part 1 - The UI)

At the webinar, Temi gave us a fantastic overview of the mathematics and intuition of facial recognition, and I talked us through building the 'Employee sign in App'. I appreciate that it would have been a lot of information to digest in such a short time, and so in this series of articles, I will be taking us through the process of developing the application in more detail.

The application we will be developing is called the emplyee app. It enables people whose faces are recognised to sign in and out of the app.

In this article, I will be taking us through putting the user interface together.

Below is a screenshot of the user interface we will be building.

Preview of the user interface we will be building.

Without further ado, let's jump right in.

House Keeping

First, a little bit of housekeeping.

You should have Qt Creator or Qt Designer installed.

We can build the entire UI using python, but I want us to get used to building user interfaces with Qt Creator as it makes things easier expecially as applications become more complex.

brew cask install qt-creator

Setting up your project

Now let's set up our project.

Create a new folder in your documents folder, and name it after the project.

If you want to feel like a hacker, you can use

on linux/macOS

mkdir ~/Documents/webinar_project

and on windows (assuming you're in your home directory)

mkdir \Documents\webinar_project

In my case I just navigated to my documents folder using my file explorer, and created a folder called webinar_project. YMMV.

The User Interface

Just as web developers like to harp on about the front end, and back end of their websites/webapps, you also have that consideration to make. The Qt development framework includes a lot of user interface elements, which can be put together to create quite fantastic applications.

You could write the user interface entirely in Python using PyQt5, however if you want to build anything even remotely complex, it's best you use the Qt Creator application. Our project is relaively simple, but we will be using Qt Creator so we can get used to its interface, and understand its quirks and features.

• Start the Qt Creator application

• Select File > New File or Project

Follow the new project wizard, and under files and classes, select Qt, and select Qt Designer Form.

It asks you to select a template, and there you should select a Main Window template.

• Continue, and you can name your ui file. Leave it as mainwindow.ui.

• Select the directory where the file should be saved.

Make sure to save it in the webinar_project directory we created. Continue to the summary and click done.

The process is shown below.

You should have in front of you now a pretty unremarkable canvas. But this is great, because now you can be picasso.

In the middle of your window you should have your canvas which shows you how the ui elements you place will be laid out.

To the left of this canvas you have your widget box, where you can drag and drop ui elements from.

On the top right you have a object inspector, which shows you what widgets have been placed in your main window.

Below that you have the property inspector, which is where you alter the properties of your placed widgets.

On the object inspector (top right), you should see a MainWindow, and nested within it you should see the central widget, menubar object, and statusbar. Delete the menubar and statusbar as we dont need them.

We keep the central widget however, as it is going to be the container that holds all our other widgets. All this is illustrated in the nicely marked up screenshot below.

Labelled user interface of Qt Creator.

When building applications, you always want to take the layout of your ui elements into account. Qt widgets provides layout elements, which maintain the relationship between your widgets and ensures that they are properly spaced especially when your window is resized.

Let's start placing widgets into the central widget.

The Buttons

From the widget box on the left, drag two push puttons onto the canvas. Use the property inspector to rename the buttons object names to sign_in_button and sign_out_button. These are the names by which we will refer to the buttons in the python back end code.

You should also use the property inspector to change the text displayed on the buttons.

Next, we select both buttons, right click them and choose layout > Lay out Horizontally. Laying them out this way maintains their positions and spacing even when the window is resized.

Below is a visual guide.

List Widget and Video Feed

Next we want a list widget that will hold the names of employees who have signed in. Drag a list widget onto the canvas, and rename it as employee_listwidget in the property inspector.

Giving your widgets descriptive names is good practice so you know exactly what you are referencing in the python code.

The label widget in Qt is able to display images. Since our video is really a bunch of images displayed in quick succession, we can use a label to display our video feed.

Drag a label onto the canvas and rename it video_label.

Change the label text to "Loading video feed". This text will be displayed while our application is initializing before the video feed begins.

Select the list widget and the label only in the object inspector, right click and select layout > Lay out Horizontally.

Tie it together

If you observe in the object inspector, the central widget has a red stop sign on it. This is because the central widget in Qt always expects to have a general layout. Grouping our buttons together in a layout, and the list widget and video feed label in a second layout enables us to set a vertical central layout in the central widget.

This will place our list widget and video feed just above our buttons.

On the canvas, outside any of the elements we have placed, right click, and select layout > Lay out Vertically. Your canvas should look like below.

Final UI Layout.

That's pretty much it. You have a simple user interface ready for you to breathe some life into. Stylising our application will come later. Always remember to build before optimising.

In conclusion...

There you have it, we have used Qt Creator to build our very own employee app user interface.

We are one step closer to building our amazing employee facial recognition application. In part 2 of this series, I will be taking us through connecting our UI to the python back end which controls it.

Let me know via social media how you get on.

Speak soon.