How to build a super-slim smart mirror

All tutorials
Smart mirror on a desk next to some mini cacti

Smart mirrors, or magic mirrors as they’re often called, have been around for several years and are nearly always near the top of any maker’s would-love-to-do list. Their popularity and appeal haven’t declined with time, and the idea of performing your morning ablutions in front of a mirror that displays your day’s schedule, monitors your home’s systems, and offers up a cheeky joke still sounds a bit like a scene out of a sci-fi movie.

The makers of early smart mirrors often had to remove a bulky computer monitor from its housing, which entailed dealing with power and wiring issues. As a result, a smart mirror was not usually a realistic project unless you were completely comfortable dealing with high-voltage electricity, not to mention having the DIY skills required to make a custom frame. Happily, display technology has advanced, and now is an excellent time to revisit this project using new low-voltage, ultra-slim displays. We’ll be building one into a frameless modern design using standard-sized parts and materials in order to minimise the DIY tools and skills required. Combine that with the power, size, and form factor of Raspberry Pi 3A+, and you have yourself a magic recipe.


How does it work?

Mr Bean under police interrogation behind a two-way mirror. He is not smart.
Mr Bean under police interrogation behind a two-way mirror

Smart mirrors all work around the same principle: they display an image on a screen mounted behind a two-way mirror that allows a small amount of light to pass through, letting you see the display, while still retaining the reflective properties of a mirror. Almost every police show or movie illustrates this when officers interrogate a suspect. While a mirror on the wall in the interrogation room appears to be a regular mirror, on the other side the cops are standing and looking through what appears to be a window.

For this project, we will be using a Raspberry Pi 3A+ connected to a disassembled ultra-thin 15.6-inch 1080p USB-C-powered monitor, mounted behind a specially manufactured piece of pre-cut A3-sized acrylic mirror. Additional tools and craft skills will be kept to an absolute bare minimum to make this project as uncomplicated as possible, but we will still produce a sleek and modern-looking smart mirror.


What you’ll need

Shopping list

Where we haven’t linked to a particular product for an item in this list, we’ve given its specification in such a way that copying and pasting it into the search box of your favourite online retailer should help you locate what you need.

Buying tip: the nylon spacers, nuts, and bolts listed above often come in kits, such as the one available here. This is likely to work out much more cheaply than buying the items individually.

Tools required

Optional item

Choosing the right Raspberry Pi and other parts

Raspberry Pi: this project works with all models of Raspberry Pi, but in order to maintain the intended slim look of our mirror we will be using a Raspberry Pi 3 Model A+, which requires a micro USB power supply. If you decide to use a Raspberry Pi 4, you’ll need a USB-C power supply and slightly larger M3 20mm standoffs to accommodate the larger board.

Power supplies: projects like these are often left powered for long periods of time, so it’s important to have a good quality power supply for your Raspberry Pi. We recommend the official USB-C and micro USB power supplies, as they are designed to provide a consistent +5.1V with captive (that is, attached) USB cable. Don’t be tempted to use an old spare phone charger you may have lying around, as it may not provide sufficiently reliable power.

This project will require two power supplies: one for your Raspberry Pi, plus a USB-C power supply for the display itself. An option is to have a single power supply and a single lead, such as the one available here, which splits to provide both micro USB and USB-C connectors. If you choose this option, ensure that your power supply is capable of providing sufficient power to both devices.

HDMI cable: the 90-degree angle in your HDMI cable should look similar to the photo below, so that it will lie flat against the monitor when connected:

a 90 degree HDMI cable on a black and white cutting board. You need one like this so the smart mirror can lay flat against the wall.

Display: the overall effect of your smart mirror will be determined by the quality of the display you use; more specifically, the more pronounced the contrast between light and dark, the better your build will look. When reviewing specifications for a suitable display, pay particular attention to its brightness, which you’ll find specified in units that might be unfamiliar to you: nits and cd/m². Cd/m², or candelas per square metre, is a unit that derives from a very old brightness metric based on whale oil candles. Meanwhile, the term “nit” is derived from the Latin word “nitere”, “to shine” (every day is a school day). Conveniently, 1 nit = 1 cd/m².

You’re looking for a nice bright display. Unfortunately, brighter is likely to mean more expensive, but it’s worth going as high as your budget permits for the best results, and certainly no less than 300 nits/300 cd/m².

For the initial setup, you’ll also need:

Another computer connected to your network. We’ll refer to this as “your usual computer”, to distinguish it from the Raspberry Pi computer that you are setting up for your smart mirror. We’re going to be accessing and controlling the Raspberry Pi via Wi-Fi from your usual computer, so there is no need for an additional keyboard, mouse, and display to be attached to your Raspberry Pi: this is called a headless setup.


Installing Raspberry Pi OS (32-bit)

We’re going to use Raspberry Pi Imager to install Raspberry Pi OS (32-bit) onto your microSD card. Raspberry Pi Imager is available for free for Windows, macOS, Ubuntu for x86, and Raspberry Pi OS. Download it to your usual computer here.

Raspberry Pi Imager running on macOS

Connect your microSD card to your usual computer, using an SD card adapter if you need one. We recommend a minimum storage size of 16GB. Open Raspberry Pi Imager, click CHOOSE OS, and select Raspberry Pi OS (32-bit) from the top of the list. This is the smaller-sized Raspberry Pi OS that includes a desktop environment but doesn’t come with unnecessary additional applications for this project.

CHOOSE STORAGE: Select your microSD card.

Press Ctrl-Shift-X to bring up the Raspberry Pi Imager advanced menu, or click the advanced menu cogwheel button in the bottom right corner:

Set a hostname of your choice; we’re using mirror for this tutorial. Check the Enable SSH (Secure Shell) box and set a username and password. You’ll need these details to access your Raspberry Pi later, so be sure to make a secure note of them. Configure your wireless LAN by checking the box, and replace XXXXXXX with your own SSID (network name) and password.

Click SAVE to close the advanced menu, and finally select WRITE to start the process of writing the operating system to the SD card, which will take a few minutes to complete.


Starting and updating your Raspberry Pi

There are some setup steps required for our Raspberry Pi itself before we build it into our smart mirror.

Insert your microSD card into your Raspberry Pi and connect to the mains power via a suitable power supply. Your Raspberry Pi will now boot for the first time and will connect to your Wi-Fi network automatically, as we have already given it all the credentials it needs.

Connect to your Raspberry Pi via SSH

Open a terminal session on your usual computer and run the following to access your Raspberry Pi via SSH, replacing “pi” and “mirror” with the username and hostname you chose:

$ ssh pi@mirror.local

The fist time you do this, confirm that you want to connect. When asked, use the password you created in Raspberry Pi Imager:

$ ssh pi@mirror.local
The authenticity of host 'mirror.local (2a00:23c8:3880:d801:34e0:2052:bc72:dd67)' can't be established.
ED25519 key fingerprint is SHA256:NjLggsBZzj6N99rABupQCwyhjNnGpeMT6T9jaoRShu8.
This key is not known by any other names
Are you sure you want to continue connecting (yes/no/[fingerprint])? yes
Warning: Permanently added 'mirror.local' (ED25519) to the list of known hosts.
pi@mirror.local's password:
Linux pihole 5.15.32-v7l+ #1538 SMP Thu Mar 31 19:39:41 BST 2022 armv7l

The programs included with the Debian GNU/Linux system are free software;
the exact distribution terms for each program are described in the
individual files in /usr/share/doc/*/copyright.

Debian GNU/Linux comes with ABSOLUTELY NO WARRANTY, to the extent
permitted by applicable law.
Last login: Tue Dec 20 12:17:17 2022 from 2a00:23c8:3880:d801:1c21:ea44:bec7:5113
pi@mirror:~ $

It’s best practice to run an update task for a fresh installation of Raspberry Pi OS, and it’s something that you should do regularly. You want to ensure the device is running with the very latest versions of all programs and security. Run the following two commands, typing y and hitting Enter when prompted to continue:

$ sudo apt update 
$ sudo apt full-upgrade

Reboot your device to allow any changes to take effect:

$ sudo reboot

Now that your Raspberry Pi is fully updated and ready to go, we’re ready to start building our mirror!


Constructing your smart mirror hardware

Disassembling your display

The first step is to prepare your display, which means separating it from its housing into its component parts. The display we’ve used for this tutorial is fairly generic and is often branded with different names. It comes apart with relative ease and is made up of only a metal front display surround, a metal rear housing, a driver board, a control board, and two speakers. We need to remove the metal front display surround which is held in place only by a small amount of glue.

This step is actually easier than it appears: with a plastic screen separation tool, or a similarly shaped object such as a credit card or plastic knife, prise the screen away from the surround and pull the frame away from the screen. You may find it useful to heat the frame gently with a hairdryer in order to loosen the small amount of glue holding it in place.

As soon as you have enough space to get between the surround and the screen, gently pull the surround away until it is completely separated. You may need to use the hairdryer again to heat the frame to help the process along.

Once you have removed the frame, you’ll be able to fold back the screen gently to reveal the contents of the rear housing. You’ll see two circuit boards: a larger driver board, and a smaller controller board. Be sure not to pull out any of the wires and flexes connecting everything; take particular care when handling the screen, as it will be connected to the driver board by a delicate ribbon cable. Again, it’s just glue holding the driver and control boards in place. They can be removed from the housing by heating and prying as we did earlier for the front display surround.

Detach the two flat speakers from the housing by removing two small Phillips head screws from each one. Finally, remove any pieces of tape that are holding cables in place. Set aside your display ready to install into your smart mirror later in the tutorial.

Preparing to assemble your smart mirror

Let’s take a moment to review the final assembly before we begin some of the construction steps. As the illustration above shows from left to right, there are:

The nylon nuts, bolts, and spacers are used to hold all of these pieces together to form our smart mirror.

The design of this smart mirror does not require any sawing or cutting of acrylic pieces, or even any frame-making skills whatsoever. All that’s required is to drill eight holes, make a cutout in the middle of the black card for the display, and mount the Raspberry Pi and display components to the back of the display before securing all the pieces together. That’s all there is to it.

Drilling the mounting holes

We need to make eight mounting holes in perfectly matching locations through the A3-sized acrylic and card pieces. The easiest way to do this is to drill through all three pieces at the same time into a suitable flat surface, such as a piece of engineered wood, using a general-purpose drill bit (any drill bit other than a masonry bit should work). Prepare the clear acrylic piece, black card, and two-way mirror for drilling by holding them together in alignment. Drill eight 3mm holes exactly 15mm in from the edges of the pieces, at each of the four corners and at the midway points down each of the sides, as shown in the diagram below:

Drilling guide

If you have a 3D printer, you can print our handy alignment jigs to simplify things. Alternatively, you can measure with a ruler and mark out where holes should be drilled. In order to avoid unnecessary scratches, we recommend keeping the protective covering on your acrylic pieces throughout the entire process:

3D-printed corner drill alignment jig

Mounting the display to the card

The display you are using is very unlikely to be exactly A3 in size, so we will need to give it a black border so that no light can penetrate through the back of the two-way mirror around the display and spoil the overall effect. This is where the A3 black card comes into play:

You should measure your display area and cut out an area approximately 1-2 mm smaller than your measurements in the dead centre of your card using a craft knife and a metal ruler. Keeping the cut-out just a little smaller than the display itself will make it much easier to mount the display in the next step.

Mounting the electronic parts to the display

Cover the back of the display with a single layer of 50mm duct tape. This serves two purposes: firstly providing a protective isolation layer between the printed circuit boards and the display, and secondly improving the appearance of the mirror. Add pieces of VHB double-sided heavy-duty foam tape to the backs of the driver, control, and Raspberry Pi boards, as well as to the two speakers. Ensure that each of these is attached to the back of the display such that their ports are still accessible from the edge. You might need to use the display control board to adjust brightness and contrast in your finished build, so if possible you should mount this board such that its controls remain fairly accessible from the edge too. Next, attach the display to your black card border using duct tape:

Flipping everything over shows the overall effect we are going for with the card and the display:

Final hardware assembly

Connect the mini HDMI to HDMI cable between the display control board and your Raspberry Pi. Connect the two USB power cables (or single split USB power cable) for the display and Raspberry Pi.

Now we can now assemble the smart mirror using nylon nuts, bolts, and spacers. Nylon rather than metal fasteners have been chosen to avoid accidental cracking of the acrylic materials if overtightened.

For each of the eight holes, push a bolt through from the front of the mirror and through the black card border, then screw it into a spacer. To hold everything in place, fit the matching hole in the back panel over the other end of the spacer, and tighten a nut onto the spacer.


Programming your smart mirror

In essence, programming a smart mirror consists of running a form of kiosk mode on your Raspberry Pi, which allows you to boot directly into a full-screen application without interacting with the computer. Kiosk mode is the foundation for a wide variety of projects where you wish to display information for a particular purpose. In airports, shops, hospitals, cafes, and museums, kiosk devices are often used to provide information or services like timetables, waiting times, product information, directions, self-check-in machines, etc.

You can set up your Raspberry Pi as a smart mirror in a number of different ways. Our favourite method, and the method we will use in this tutorial, is Magic Mirror², which was chosen by the Raspberry Pi community as the winner of The MagPi magazine’s 50th issue celebration feature.

Power up your Raspberry Pi and display, and then SSH in. You will now also see the desktop environment in action on the screen through the two-way mirror. For the best possible viewing experience, use the display’s native control panel to adjust the brightness and contrast to their maximum values and to disable any power-saving mode so the display doesn’t dim when we don’t want it to. Depending on where you stuck the display control board on the back of the display, you may have to use an implement, such as a pen, to access the controls.

Setting the display orientation

You’ll also notice that by default the desktop display will be in landscape orientation. If this is your preference then move on to the installation of Magic Mirror². If you’d prefer your mirror to be in portrait orientation, we can turn the display by editing the /usr/share/dispsetup.sh file by using the following command to open it in your preferred text editor, in our case nano:

$ sudo nano /usr/share/dispsetup.sh

Edit the contents of the file so it reads as follows:

#!/bin/sh
xrandr --output HDMI-1 --rotate right
exit 0

Press CTRL+X, then Y, then Enter to save the edited file. Lastly we need to reboot your Raspberry Pi for the settings to take effect:

$ sudo reboot

When your device reboots, the desktop display will now be in portrait mode. SSH back in to continue.

Installing the Magic Mirror² software

Installing the Magic Mirror² software takes just a few steps. The first is to run the following two commands to install Node.js, the open source server environment program used as the basis for this smart mirror project:

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

In the next steps, we will download the Magic Mirror repository, enter the directory, and install the application using the following three commands:

$ git clone https://github.com/MichMich/MagicMirror
$ cd MagicMirror/
$ npm run install-mm

We need to copy over the sample configuration file that we will use as a template for our display. We will modify it later to make it more personalised:

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

Finally, start the application with the following command:

$ npm run start

After a minute or so you will see the default Magic Mirror display start up. It will look similar to this:

Thanks smart mirror!

The Magic Mirror software will now display a sample mirror based on the configuration file we copied over a couple of steps earlier. Essentially, this file specifies what information to display on your screen, as well as where, when, and how. The default configuration contains a number of modules for it to display, including time, date, weather, US holidays, a news feed, and a compliments module. All of these can be adjusted to your liking.

However, as this is an open source modular smart mirror platform, you can display anything you want. Since the amazing Michael Teeuw created the original magic mirror, a community of enthusiasts has created hundreds of interesting modules. There’s one that lets you know when your local refuse collector is coming — or how about the one that keeps you up to date on the newest online cat videos? If you can’t find one you like, then you can write your own. The great thing about a project like this is that you can personalise it to suit your specific requirements.

We need to finish one more step before we can customise our mirror. The application is currently started and stopped from the command line over SSH, which isn’t very convenient. We’re going to add an autostart program that also gives you a few extra features you might find useful. Once it’s installed, all you have to do is power up your mirror’s Raspberry Pi and display.

Before we begin, we need to stop the application. Assuming you’re still in the MagicMirror/ folder (if you’ve navigated away, first navigate back again), type the following:

$ npm run stop

Autostarting your Magic Mirror using PM2

PM2 is a process manager for node.js applications like Magic Mirror – it lets us start, stop, maintain, and interact with it. Install it with the following command:

$ sudo npm install -g pm2

PM2 needs to be started on boot. Luckily, there’s built-in help for this. Execute the following command:

$ pm2 startup

After a short introduction, the response will be as follows:

[PM2] Init System found: systemd
[PM2] To setup the Startup Script, copy/paste the following command:
sudo env PATH=$PATH:/usr/bin /usr/lib/node_modules/pm2/bin/pm2 startup systemd -u pi --hp /home/pi

As these instructions tell us, we’ll copy and execute the command provided:

$ sudo env PATH=$PATH:/usr/bin /usr/lib/node_modules/pm2/bin/pm2 startup systemd -u pi --hp /home/pi

The next step is to create a small bash script that contains the commands required to start the Magic Mirror application that PM2 will handle for us:

$ cd 
$ sudo nano mm.sh

Assuming that we are still in the MagicMirror/ folder, the command cd takes us to our home folder, and then the second line creates a script called mm.sh and opens it in nano so we can edit it. Type or paste the following code into it:

cd ./MagicMirror
DISPLAY=:0 npm start

Press CTRL+X, then Y, then Enter to save the new file. Now enter the following command to make the file executable:

$ sudo chmod +x mm.sh

Now you can use PM2 to run your new bash script to start the Magic Mirror application with the following command:

$ pm2 start mm.sh

The mirror will display exactly as it did before, but PM2 controls the process now. This means that if we save PM2’s current state now, while the mirror is running, then if the power is turned off, PM2 will autostart when your Raspberry Pi is powered up again, PM2’s most recently saved state will be restored, and our magic mirror will once again start working. To save PM2’s state, type the following:

$ pm2 save

That’s all there is to PM2, except for the following useful commands:

$ pm2 restart mm
$ pm2 stop mm
$ pm2 logs mm
$ pm2 show mm

Most of these commands are self-explanatory, except for pm2 show mm, which requests the current status of your Magic Mirror application. We recommend that you familiarise yourself with these commands by experimenting with them.

Personalising your Magic Mirror

In order to begin our journey to a fully customised mirror, we will modify an existing module to meet our needs. We’ll also remove two default modules, and finally install a new module. Using the principles set out here you can create your own designs and ideas.

The Magic Mirror configuration file

Since the config.js file is where some of the magic happens, let’s take a closer look at it with our text editor of choice, nano:

$ sudo nano MagicMirror/config/config.js

The file is too large to show the whole of it here, so the following screenshot shows the first half of it:

The programming language here is JavaScript, which is commonly used for creating web applications; don’t worry if you’re not familiar with JavaScript, though, as much of it is written in readable English.

Any text preceded by a pair of forward slashes (//), or enclosed by single forward slashes (/) before and after it, is what’s known as a comment (nano conveniently displays these in blue, as you can see in the screenshot above). Comments are notes or explanations to help the human reader understand the code; they’re not part of the code itself, and they’ll be ignored when the program is run. So there’s a lot that you can understand, even if you’re completely unfamiliar with JavaScript, and it’s worth taking some time to take a look at this file.

Tip: as we go on, don’t be afraid of modifying and adding to your config.js file. It’s often as simple as looking at the existing code to see how something is done, and using trial and error to get it to do something different. The “error” part of “trial and error” means you’ll inevitably break things, so as you try things out, make regular backups of the file so it’s easy to go back and try again when something stops working.

Press CTRL+X to exit the nano text editor without making any changes this time. Whenever you make a successful change to your config.js file, type the following to make a backup of it:

$ sudo cp MagicMirror/config/config.js MagicMirror/config/config.jsBACKUP

Since we’ve given the backup file the made-up filename extension “.jsBACKUP”, the system will ignore it. However, if you make a change to the original file that causes an error and you’re unable to work out exactly what the problem is and fix it, you can simply replace your non-working config.js file with your working config.jsBACKUP file in order to go back to where you were before the changes and start again. To do this, use the following command:

$ sudo cp MagicMirror/config/config.jsBACKUP MagicMirror/config/config.js

It’s good practice to maintain multiple backups in order to document progress chronologically; you might like to number your backups, or you might like to add a date and time to the filename as you go. As you develop your magic mirror, you will become more and more grateful for backups as you become familiar with this dreaded error screen:

Configuring an existing module

Let’s return to our config.js file and modify one of the modules that appear on our mirror by editing the file (scroll back up to the beginning of the last section if you need a reminder of the command to open the file in nano). The last module in the file is the news feed module. This pulls news from an RSS feed — a way of distributing updated content from a website in a concise format — and you can find plenty of these online by searching.

For this tutorial, we’ll choose a feed that provides news local to Pi Towers. The only bits we need to change to get our news feed module to show content from a different feed are the title and the URL. Once we’ve done that, our file will look like this:

                 {
                        module: "newsfeed",
                        position: "bottom_bar",
                        config: {
                                feeds: [
                                        {
                                                title: "Cambridge Independent News",
                                                url: "https://www.cambridgeindependent.co.uk/_api/rss/cambridge_independent_news_feed.xml"
                                        }
                                ],
                                showSourceTitle: true,
                                showPublishDate: true,
                                broadcastNewsFeeds: true,
                                broadcastNewsUpdates: true
                        }
                },
        ]
};

/*************** DO NOT EDIT THE LINE BELOW ***************/
if (typeof module !== "undefined") {module.exports = config;}

Removing modules

Next, we’ll be removing the weather module which appears in the top right corner of our screen. It’s actually made up of two small modules, one for the current weather and one for a forecast. Here at Pi Towers it’s always sunny, and we’re in Cambridge, UK, not in New York, so we don’t need this weather forecast. Simply delete this entire section from the config file, making sure to remove everything from the first open curly bracket to the last closing curly bracket and comma:

                {
                        module: "weather",
                        position: "top_right",
                        config: {
                                weatherProvider: "openweathermap",
                                type: "current",
                                location: "New York",
                                locationID: "5128581", //ID from http://bulk.openweathermap.org/sample/city.list.json.gz; unzip the gz file and find your c>
                                apiKey: "YOUR_OPENWEATHER_API_KEY"
                        }
                },
                {
                        module: "weather",
                        position: "top_right",
                        header: "Weather Forecast",
                        config: {
                                weatherProvider: "openweathermap",
                                type: "forecast",
                                location: "New York",
                                locationID: "5128581", //ID from http://bulk.openweathermap.org/sample/city.list.json.gz; unzip the gz file and find your c>
                                apiKey: "YOUR_OPENWEATHER_API_KEY"
                        }
                },

You might have noticed that these modules weren’t working properly anyway, due to a requirement for a valid API key and location ID number. An API key is a unique identifier that’s used to authenticate data requests from one computer to another, in this case a request from your Raspberry Pi for a weather forecast from openweathermap.org. Explore that webpage for further information, including location IDs and how to get an API key, if you want to keep this module.

Once you are happy with the changes you’ve made to the file, press CTRL+X, then Y, then Enter. Then type the restart command for the Magic Mirror application to see the result:

$ pm2 restart mm

Assuming all goes well, your modified display will come to life. It’s advisable to make a backup of your config.js file before moving forward.

Adding new modules

Adding a new module involves two steps: firstly installing the module program, and secondly modifying the config.js file again to include the parameters for how the module should be displayed.

There are plenty of modules to choose from, but we’re going with one that will display an image of our choice where the weather modules used to be. This particular module is called MMM-EasyPix and was made by Mykle. To start we need to download it into our modules folder:

$ cd MagicMirror/modules/
$ git clone https://github.com/mykle1/MMM-EasyPix

Next, just as before, we need to add to our config.js file. This needs care, because pasting the code for the new module in the wrong place will break the code that’s already there.

Start by copying the following sample MMM-EasyPix configuration:

                {
                         module: "MMM-EasyPix",
                         position: "top_right",
                         config: {
                                 picName: "grid.jpg", // Enter the picture file name.
                                 maxWidth: "100%",        // Size picture precisely. Retains aspect ratio.
                        }
                },

The code above calls the MMM-EasyPix module and assigns some parameters for how to use it. These include positioning the picture in the top right corner of our display where the weather modules used to be, naming the picture we want to show (in this case grid.jpg, one of several demo images preloaded with the module and found in the folder ~/MagicMirror/modules/MMM-EasyPix/pix), and finally sizing the image to our liking.

Tip: positioning a module is as simple as selecting from the following list and typing or pasting your chosen location between the quotation marks in the position line:

top_bar bottom_bar top_left bottom_left top_center bottom_center top_right bottom_right upper_third middle_center lower_third

As we noted earlier, it’s critical to add the new code in the right place in the config.js file, or we’ll break the existing code. The easiest way to make sure you put the code in an appropriate place is to add it as the first module, immediately below the 'modules: [' line and above the alert module in your config.js file:

        modules: [
                {
                         module: "MMM-EasyPix",
                         position: "top_right",
                         config: {
                                 picName: "grid.jpg", // Enter the picture fi>
                                 maxWidth: "100%",        // Size picture pre>
                        }
                },
                {
                        module: "alert",
                },

It’s time to save the file and restart your magic mirror. You should now see a new image on the display:

Now everything in our new module is working, let’s replace that image with one of your own — or, in our case, the adorable Raspberry Pi logo. It’s essential to place your image in the same folder as the demo images, and the easiest way to get it there is to use SCP (Secure Copy). SCP is a protocol based on SSH (Secure Shell) that provides secure file transfers between two computers from the command line.

On your usual computer, find the full file path and file name of the image you want to use. In our case it’s on our desktop and is called logo.png. Open up a new terminal on your usual computer and type the following command, replacing the file path and name on the first line with those of your own image, making sure to enter the correct hostname for your Raspberry Pi, and replacing “logo.png” on the second line with the name you want for the new copy of your image:

$ scp /Users/MACBOOK/Desktop/logo.png  pi@mirror.local:/home/pi/MagicMirror/modules/MMM-EasyPix/pix/logo.png

When you press Enter, you will be prompted for your password, which is the same as the one you use to log in to your Raspberry Pi via SSH. Your image file will be copied to the appropriate folder in MMM-EasyPix.

All that remains is to edit the config.js file again to change grid.jpg to our logo.png image file and to resize it if necessary. Save the file and then restart your mirror:

Smart mirror interface

Extending the project

Start by checking out more of the wide variety of modules already made available by the community you’re now part of. They have done an amazing job and are sharing their hard work freely.

A favourite of ours is MMM-Remote-Control, which allows users to control their mirror via a web browser from any smart phone or tablet, freeing you from SSH on the command line and replacing it with a simple-to-use graphical interface.

Because we have retained the speakers and their connections from the original screen and used the Raspberry Pi HDMI connection, they will work without the need to do anything more. There are plenty of possibilities for using them with audio-related modules, like a smart speaker or an online radio player. With the addition of a camera and microphone, you could create a voice-activated smart mirror with facial recognition, and integrate it with smart home features you may already have.

Perhaps you have an idea that no one else has considered yet, which may lead you to develop your own module. The chance to make sci-fi a reality awaits you!