Smart Mirror Touchscreen (with FaceID) Tutorial – Raspberry Pi 4

The term Smart Mirrors could easily be dismissed as a Science Fiction fantasy. I mean, the idea of Magic Mirrors that displays useful information to the user does sound far-fetched.

Smart Mirror Touchscreen - Interacting with Face Recognition
Watch Full Youtube Tutorial on How to build a Touchscreen Smart Mirror

But what if I told you that we could make a Touchscreen Smart Mirror that could do exactly that and more.
Imagine a Smart mirror that could work as a central touchscreen interface for your home to control smart home appliances, provide the latest news, stocks, and features Face recognition.

Well, this is possible! In this article, you’re going to find out how. This project aims to build a touch screen smart mirror that is built on the back of the MagicMirror platform. We like to call this Smart Mirror AI (SMAI).

Goal: By the end of this article, you’ll be able to build a Touchscreen Smart Mirror with a face recognition module to interact with.

Download Demo: Download the Face Detection Raspbian Image on smartbuilds.io. Simply stand in front of your Camera module and trigger events.

Parts List – What you’ll need       

Smart Mirror Touchscreen - Part List
Parts List for Smart Mirror

Pre-requisite: Raspberry Pi 4 (RAM 2GB+) Recommended:


Main Parts (Hardware Components):

Amazon
Ebay

MagicMirror - Raspberry Pi 4
Raspberry Pi 4 Model B (2GB +)



MagicMirror - Raspberry Pi 4 Charger
Power Supply




Magic Mirror - Two Way Mirror
Two-Way Mirror



Magic Mirror - Two Way Mirror
Raspberry Pi Camera




Magic Mirror - Two Way Mirror
Micro SD




Magic Mirror - Image of HDMI Cable
HDMI Cable




MagicMirror - Monitor
Monitor



IR Frame
IR Frame


Software and Platforms

  • MagicMirror
  • Raspberry Pi Raspbian Buster
  • Alexa (Online Services)

Hardware Materials:

  • Fibreboard Wood
  • Hacksaw

Cost: The total cost would vary based on your own specification preference. Fortunately, Smart Mirror could be scaled down, and customized to your liking from small 7″ Touchscreen displays to 55″ large IR Frames. In this example, we’ll use a 32” IR Frame.


Hardware Assembly

Smart Mirror Touchscreen - Magic Mirror Setup
Smart Mirror Touchscreen – Hardware Configuration

The custom-cut two way-mirror was placed directly on top of the 32″ Monitor. In addition, the IR frame was used in order to add a touch interaction with the smart mirror. The IR frame uses a USB 3.0 peripheral to connect to the Raspberry Pi. Some IR frames also support multi-touch gestures on different Operating Systems e.g. Windows and Mac, this makes it useful for future projects.

Smart Mirror Touchscreen - IR Frame Response How it Works
IR Frame – LED inside

How IR Frame works

IR frames are based on light-beam interruption. Typically IR frames have LEDs on one side of the frame and Light detectors on the opposite side. Similar to an optical mouse USB peripheral, based on where you touch the frame a beam interruption occurs and the IR sensor is able to co-ordinate where you’ve touched. This information is relayed back to your Raspberry Pi corresponding to your display.

Smart Mirror Touchscreen - Mirror Frame Dimensions
IR Frame built from Fibreboard

Building Mirror Frame And Assembly of parts

A wooden frame was built In order to encase the 32 inch Monitor. (However, your build can be left to your creativity).

This was assembled using 1×4 Fiberwood from your local DIY store, and a hacksaw to cut the dimensions. Strong PVA (Gorilla) glue and nails were used to re-enforce the frame. The final mirror dimensions were W 47.6cm x L 77cm x H 7cm.

A monitor strap/ back support was added to secure the support of the Frame. An opening on the strap was made to allow space for HDMI ports on the monitor for the Raspberry Pi display input. An Interior varnish coat was added to the frame to give it a nice glossy finish.

LED Strips:

Smart Mirror Touchscreen - LED Glow
Smart Mirror – LED Strips Assembly

LED strips were added to give the mirror a nice ambient glow. The strips included an adhesive coat to the back which allowed us to peel and wrap the strips around the Monitor.

The LED strips also includes a remote for changing LED colours.

Looking from hindsight – We recommend a monitor with HDMI ports on the side of the Monitor


Installing Raspbian Buster

Smart Mirror Touchscreen - Balena Etcher
Etching Raspbian OS to MicroSD

The Raspbian OS was flashed onto the 32 GB Micro SD Card. You could find more information on how to install the latest Raspbian OS on the Raspberry Pi site. The YouTube tutorial equivalent also outlines this.

  1. Download and install The latest Raspbian OS which can be found on Raspberry Pi
  2. Download Etcher and install the application on your computer. (Compatible with Mac OS X and Windows)
  3. Plug your Micro SD card Adapter with your SD card to the computer.
  4. Open Balena Etcher and select extracted the image you’ve downloaded.
  5. Ensuring the correct disk has been selected click “Flash!” to begin writing the image to your SD Card. Note: This process could take 10-15 minutes
  6. Remove SD Card and plug in Pi. Whereby you could access Pi via VNC or Mouse and Keyboard

Installing Magic Mirror

Smart Mirror Touchscreen - Magic Mirror Installation
MagicMirror Installation on Raspberry Pi 4

MagicMirror is an open-source modular smart mirror platform developed by MichMich. It’s has a great community and support which makes this a solid project.

Upon boot-up of the Raspberry Pi, complete the remaining setup, and ensure you’re connected to the internet via LAN/Wi-Fi.

Head off to Magic Mirror for the full Installation & Usage Guide. For simplicity the main snippet has been quoted below:

Run the following commands in terminal

Note: The official support way of installation has been updated from single line command to manual installation. Fortunately, this is just as straightforward.

Smart Mirror Touchscreen - Terminal Command
Terminal – Adding MagicMirror Modules

Download and install the latest Node.js version:

curl -sL https://deb.nodesource.com/setup_10.x | sudo -E bash -
sudo apt install -y nodejs

Clone the repository and check out the master branch: 

git clone https://github.com/MichMich/MagicMirror 

Enter the repository:

 cd MagicMirror/

Install the application: 

npm install

Make a copy of the config sample file:

cp config/config.js.sample config/config.js

Start the application (Recommended for this setup): 

npm run start
For Server Only use:
npm run server 
.

Note: You could decrease the MagicMirror size of the font with CTRL + –


Auto Starting Magic Mirror – Installing PM2

Note: If you would like to have your MagicMirror working from start-up, we recommend installing PM2 a production process manager. You could do this by following the steps outlined on Auto Starting Magic Mirror.


Adding additional Modules

Smart Mirror Touchscreen - Smart Mirror Modules
Smart Mirror Modules – Including Spotify, Face Recognition and SmartTouch

Adding modules is a great way of customizing your mirror in a unique way. With over 400 modules ranging from Spotify, News to Face Detection customizing your mirror is much more interesting. Visit MagicMirror Third-Party Module


Installing Smart Touch – Touchscreen interactive

Smart Mirror Touchscreen - SmartTouch
Smart Mirror Touchscreen – SmartTouch Interaction

In this example, we’ll be adding a module we developed: MMM-SmartTouch

This module allows you to hide all your mirror modules transforming your mirror into a normal “Basic Mirror”. 

An additional side menu has been developed to safely Power Off / Reboot your pi without the need to pull your power cable. This can prevent SD card corruptions over long term use. If you like this, why not contribute to more features in the MMM-Smart Touch GitHub Repo.

Step 1 – Install the module

Open up the terminal on your Raspberry Pi and follow the below commands:

   cd ~/MagicMirror/modules
   git clone https://github.com/EbenKouao/MMM-SmartTouch.git
   cd MMM-SmartTouch
   npm install

Explanation: The above code clones the SmartTouch module to your git repo whereby npm install in the SmartTouch directory downloads the packages and dependencies.

Step 2 – Add files to the Config.js

Copy the following command to config.js

{
    module: 'MMM-SmartTouch',
    position: 'bottom_center',    // This can be any of the regions.(bottom-center Recommended)
    config: {
        // The config property is optional.
    	}
}

Note: Bottom Center is the preferred default of this module, for an aesthetic module.


Installing Face Recognition Module – Personalising your Mirror

Installing Face Detection Module

The Face detection module is a nice feature to complement the touch interaction. The use cases for this are endless spanning to home automation. In the below example the Face Detection module was used to trigger smart plugs to turn on the Kettle. You can manually install the face recognition libraries here.

Smart Mirror Touchscreen - Face ID
Installing Face Recognition Module
Smart Mirror Touchscreen - Face ID turning on IoT Home Appliances
Smart Mirror – Controlling home appliances (smart plug) with Face Recognition

Note: You can find the full face detection demo Raspberry Pi build on smartbuilds.io

You can find Face Detection Module: MMM-Face-Recognition-SMAI

The OpenCV face detection module is lightweight and responsive, which makes it ideal for the mirror to trigger other processes. Due to the scope, we’ll go into detail in future articles on how to control a home appliance. Specifically the TP-Link Smart Plug.

MMM-Face-recognition-SMAI module require a few dependencies before operating.

  • OpenCV Face Recognition by Ageitgey.
  • Raspberry Pi Camera Module
    • Ensure that the Camera has been enabled via sudo raspi-config
  • Raspberry Pi 4 2GB+ (Recommended)
    • You could possibly use the Pi 3B+ however you may receive a slower detection time

Dlib and face_recognition libraries would be required to be installed. We’ve linked to our post on How to install a face detection library on Raspberry Pi 4.

Step 1 – Install the module

In your MagicMirror directory:

   git clone https://github.com/EbenKouao/MMM-Face-Recognition-SMAI.git
   cd MMM-face-rec
   npm install

Step 2 – Add files to the Config.js

Here is an example for an entry in config.js

{
  module: "MMM-Face-Recognition-SMAI",
  position: "top_right",
  config: {
    //prompt: "Put in your own text"
  }
}

The face detection interacts with the Python script to recognise you and display your name. Since Python runs independently of the MagicMirror with a bit of programming you could program the face detection to trigger an event externally e.g. Turn on Smart lights.

How it works the face detection module works:

Here are the 3 main files you would need to understand:

1) SMAI-face-dection.py – OpenCV face detection Python script that constantly tries to identify persons based on the images already provided. (You’ll only need to program this if you wish to develop use cases beyond this project scope).

2) MMM-Face-Recognition-SMAI.js – Displays the profile image detected as well as the name

3) Sample.txt – Works as a temporary buffer. Stores the name of the identified person from SMAI-face-detection.py as a temporary variable and read to the Face-recognition-module.

Note: If you’re still unsure, we recommend downloading the already pre-packaged face detection to get an understanding of how it works.

Changing your profile image:

By default, the Profile Image is Tony Stark. However this could be changed to yours using the steps below:

2) Changing your profile:

  • The beta version of this module is restricted to only 1 user.

Go into the directory (preferably via GUI)

cd /home/pi/MagicMirror/modules/MMM-Face-Recognition-SMAI/public

Replace the two .png images with your desired face while keeping the same naming format.
Using the below naming convention.

  • face.png
    -id.png e.g Tony-id.png – The is what would be displayed on the display, being Tony.

Watch your faceID pop up on display every-time you’re detected. Using this you could build your own applications.


View Full Smart Mirror Touchscreen (With FaceID) using Raspberry Pi 4 Tutorial:



Next Steps: What will you make?

That’s not the end of this project. We’ve now been able to build the foundations of a smart mirror. Given the additional feature of face recognition and a new touchscreen interaction, the applications are endless:

  • Home automation
  • Multiple Profiles
  • Extension on UI Interaction

Conclusion

Looks like we’ve reached the end. That’s all folks!
You are now equipped to create your own Touchscreen Smart Mirror. But don’t stop here, it would be great to see what you could develop further with your own mirror. If you have any questions leave a comment below.

Leave a comment