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.
Without further ado, let's jump right in.
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.
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
and on windows (assuming you're in your home directory)
In my case I just navigated to my documents folder using my file explorer, and created a folder called
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
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.
UI file creation process.
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.
Widgets is just another word for ui elements such as buttons, text boxes, list views et cetera.
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.
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.
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
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.
Laying out our sign in and sign out buttons.
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
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.
Placing the label for the video feed and the list widget.
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.
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.
There you have it, we have used Qt Creator to build our very own employee app user interface.
Here is a challenge for you. We want a label just above the employee list widget that says
is so that anyone using our app knows that the names which show up in the list widget refer to the names of employees.
Can you do that before jumping in to part 2?
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.