Multi User Smart Mirror With Google Calendar

In this instructable we'll be creating a smart mirror integrated with Google Calendar. I made this project because I find smart mirrors really cool, they are a godsend in the morning. But I decided to make one myself from zero because all the others have 1 flaw. They are too advanced and cluttered. I decided to keep this simple.

Supplies

Before we’ll begin these are the things you’ll definitely need to build a Mirror like mine. These supplies will cost around 250 to 350 euros depending on your region and current prices.

Hardware

Sensors

One Wire Temperature sensor
RWCL 0516 (Microwave motion sensor)
Soft potentiometer (Touchstrip from Sparkfun)

Computing and IC’s

Speaker (3.2W at 4Ω OR 1.8W at 8Ω)
MCP3008
Adafruit I2S 3W Class D Amplifier Breakout - MAX98357A
Raspberry Pi 3 B+
SD card (8GB is fine)
Resistor 4.7K Ohm

Various

Jumperwires
Breadboard
Acryl Two Way Mirror (15% Lighttransmission)
IPS Monitor (Size depends on how big you want it)
HDMI cable
Wood

Software

PuTTY
Code editor (Notepad++ is enough)
Win32 Disk Imager
Raspbian OS image

Step 1: Setup

To get started we’ll first need to set up your Pi for the code I made.

You’ll need two things:

Win32 Disk Imager from https://sourceforge.net/projects/win32diskimager/...
Raspbian OS image from https://www.raspberrypi.org/downloads/raspbian/

Download the ZIP file and extract it to wherever you want.

The installation

Select your image via the folder icon
Select your SD card via the dropdown
Click on write

Now we’ll need to do some extra tinkering with some settings so we’ll be able to access the Pi.

Go to the SD card’s boot directory
Open the file "cmdline.txt"
Add ip=169.254.10.1 At the end of the long line of text separated with a space (on the same line).
Save the file.
Create a file named ssh with no extension in the same directory

Now you can eject the SD card and put it in your Pi.

Connecting

Now we will need to setup the software.

First plug in a LAN cable, one end in your desktop/laptop and the other in your Pi.

Now boot the Raspberry Pi.

Install Putty from https://www.putty.org/
Enter 169.254.10.1 in the IP box.
Make sure SSH is selected and port 22 is filled in.
Click open
Fill in the username: pi
Fill in the password: raspberry

Raspi-config

Open the Raspi-config utility by using:

sudo raspi-config

Enable the following options in the interfaces category

1-Wire
SPI

Choose your WiFi country via the localization category.

Next, disable the following options in the boot options category

Splash screen

Lastly set the Desktop/CLI setting in the boot options category to Desktop Autologin.

WiFi

For the mirror we need to have a wifi connection so make sure you have your wifi credentials close.

Go into root mode

sudo -i

Paste this line but make sure that the SSID and Password are both filled in

wpa_passphrase "SSID" "PASSWORD" >> /etc/wpa_supplicant/wpa_supplicant.conf

Enter the WPA Client.

wpa_cli

Select the interface

interface wlan0

Reload the config

reconfigure

Make sure you are connected correctly by typing...

ip a

...and seeing if you have an IP on the WLAN0 interfaces.

Packages

Now that we are connected to the internet we'll have to install some packages.

First we'll need to refresh the package lists for the latest one.

sudo apt update

Python

We'll force Raspbian to use Python 3

update-alternatives --install /usr/bin/python python /usr/bin/python2.7 1
update-alternatives --install /usr/bin/python python /usr/bin/python3 2

MariaDB

Paste the following line to install the database.

sudo apt install mariadb-server

Then we'll need to secure our installation.

mysql_secure_installation

It will ask us for current root password since we don't have one just press enter.

Next it's asking if we want a root password type in y since we want one.

For the next questions just enter Y.

Lastly we'll be creating a user that we'll be able to use for the mirror.

Enter the mysql shell by doing:

Elevate ourselves to root

sudo -i

Enter the mysql shell

mysql

Replace with your own username and the same with

grant all privileges on mirror.* to ''@'%' identified by '';

Now we flush the permissions table.

FLUSH PRIVILEGES;

Apache Webserver

To install the Webserver run the line below.

sudo apt install apache2 -y

Python packages

We're going to install these packages

Flask
Flask-Cors
Flask-MySQL
Flask-SocketIO
PyMySQL
Flask-talisman
Gevent
Gevent-websocket
Google-api-python-client
Google-auth
Google-auth-httplib2
Google-auth-oauthlib
Httplib2
Icalendar
Icalevents
Oauthlib
Python-socketio
Requests
Wsaccel
Ujson

By doing

pip install Flask Flask-Cors Flask-MySQL Flask-SocketIO PyMySQL Flask-Talisman gevent gevent-websocket google-api-python-client google-auth google-auth-httplib2 google-auth-oauthlib httplib2 icalendar icalevents oauthlib python-socketio requests wsaccel ujson

Speaker setup

curl -sS https://raw.githubusercontent.com/adafruit/Raspberry-Pi-Installer-Scripts/master/i2samp.sh | bash

Now we need to reboot so press y.

Rerun the script

curl -sS https://raw.githubusercontent.com/adafruit/Raspberry-Pi-Installer-Scripts/master/i2samp.sh | bash

Now we need to reboot a second time

sudo reboot

Screen (monitor)

Depending on how you want the oriëntation of your screen you may want to rotate the screen.

For rotating the screen we need to access the boot options by doing:

sudo nano /boot/config.txt

And then pasting one of these lines in the config file:

display_rotate=0

display_rotate=1

display_rotate=2

display_rotate=3

The first one, 0, is the normal configuration. 1 Will be 90 degrees, 2 is 180 degrees and the last one will be 270 degrees.

Then reboot.

sudo reboot

Step 2: Installing the Mirror

Now we'll setup a place to download my code.

cd /home/pi/
git clone https://github.com/nielsdewulf/Mirror MirrorProject
cd MirrorProject

Now we'll copy some folders to the correct destination

sudo cp -R frontend/mirror/ /var/www/html/mirror/
sudo cp -R frontend/dashboard/ /var/www/html/
Sudo cp -R backend/ /home/pi/Mirror/

Installing the database is a necessary step in making the project.

sudo mysql -u root -p << CREATEDATABASE.sql

Step 3: Configuration

The configuration file is located at:

sudo nano /home/pi/Mirror/resources/config.ini

Enter the MYSQL user and password.

This must be the mysql user we just made.

The other settings we'll be going over later this instructable.

Step 4: API's

Now we have finished installation of the Pi we'll cover some topics you may want to do.

Darksky

Create a Darsky API key via https://darksky.net/dev.

When you've registered you'll see your API key on the Dashboard.

Enter this key in the config file of the mirror project you installed before.

The Calendar

By default you will only be able to use ical urls to view your calendar from. But this part will be about how to link your mirror with the Google Ecosystem. This is a generally longer and more painfull process.

Things you'll definitely need

A domainname

These are the things we'll setup during this part

CloudFlare account
Google Developer Account
Google Developer Project
Setup the Calendar API

Step 5: The Calendar

Cloudflare

Setup a cloudflare account from https://cloudflare.com and follow the wizard to transfer your domainname to Cloudflare DNS.

No need to create an A record yourself that points to the raspberry pi. My Mirror code will do that for you. Since in most household wifi the IP's aren't static so after rebooting it may not work anymore. To have my code automatically update the ip it'll be needing your account API key.

Click the Get your API key button on the dashboard on the righthand side. [Photo 1]
Scroll down and view your Global API key. [Photo 2]

Enter this key in the config file of the mirror project you installed before.

SSL Certificate creation

Google requires us to have an SSL connection. To start this section make sure you have correctly setup the Cloudflare DNS.

First add the repository.

sudo add-apt-repository ppa:certbot/certbot

Update the packagelist.

sudo apt-get update

Install CertBot

sudo apt install python-certbot-apache

Start the certificate creation. Again you'll need to fill in the correct domain name.

sudo certbot --apache -d example.com -d www.example.com

After the creation it'll ask you if it should redirect all connections to SSL. Choose redirect.

Now it will tell you it has successfully created a certificate for your domain. Make sure to save the 2 paths it gives you.

/etc/letsencrypt/live/example.com/cert.pem
/etc/letsencrypt/live/example.com/privkey.pem

Now go to the folder with the certificates in via:

Make sure to change example.com to the right host.

cd /etc/letsencrypt/live/example.com/

Now let's copy those contents to our project folder.

cp cert.pem /home/pi/Mirror/resources/certs/cert.pem

And

cp privkey.pem /home/pi/Mirror/resources/certs/privkey.pem

Connect Apache with your domain

To configure Apache correctly with your domain we'll have to create a config file. Make sure to fill in your domain name for example funergydev.com.

sudo nano /etc/apache2/sites-enabled/example.com.conf

Then paste this into the file. Replace example.com with your domainname.

Make sure that your cert and private key are the correct path. Set them to the path that you saved earlier when we created then via certbot.

<VirtualHost *:443>
	DocumentRoot "/var/www/html/"
	SSLEngine on
	SSLCertificateFile /home/pi/Mirror/resources/certs/cert.pem
	SSLCertificateKeyFile /home/pi/Mirror/resources/certs/privkey.pem
	# Other directives here
</VirtualHost>
<Directory /var/www/html>
	Options Indexes FollowSymLinks
	AllowOverride All
	Require all granted
</Directory>

Now we need to enable some modifications and then force Apache to reload the config by doing:

sudo a2enmod ssl

sudo a2enmod rewrite

sudo systemctl reload apache2

Now you should be able to go via your domain name to your pi and see the default apache page.

Step 6: Google API

Go to the developer console via https://console.developers.google.com.

Part 1.

Create your first project by clicking next to the Google API logo and clicking on the NEW PROJECT button. Fill in an appropriate project name and click the create button. [Photo1]

Part 2.

Now you'll get to this page. Click the library button. [Photo2]

This is a big list of all API's you could use but we will be searching for the Google Calendar API. Click on it and press ENABLE. [Photo3]

You'll then reach an overview of the Calendar API. Click the Google APIs logo to go back to your project. [Photo4]

Part 3.

To setup everything correctly click on the credentials category and choose the Domain verification tab.

Here you'll have to verify your domain name.

Click ADD DOMAIN
Fill in your domain
It'll then ask to verify your domain. Click proceed.
Choose your Domain name provider. [Photo5]
Follow the process
Now you'll be able to add it to the Domain Verification List on the Google API Console like this. Make sure your domain is checked. [Photo6]

Part 4.

Now choose the OAuth consent screen tab. [Photo7]

Fill in the Application Name.

Next we'll be adding scopes to the consent screen. This means we'll be asking the user on the consent screen if they want to share their calendar info with the mirror.

Click add scope and search for calendar.
Check ../auth/calendar.readonly and press add. [Photo8]

Fill in an Authorised Domain. This should be the domain you just verified. [Photo9]

Now click the big save button below the form.

Part 5.

Lastly we need to create the credentials. Because we pressed
the save button we were redirected to the credentials tab. Click create credentials and choose OAuth Client ID. [Photo10]

Choose Application type: Web Application and give it a name.

Enter the following link in the Authorised Redirect URI's and fill in the correct domain.

https://example.com:5000/api/v1/setup/calendar/response

Click create. This will show you a popup just click OK. Now press the download button on the credentials you just made

Part 6.

Now open the JSON file and copy the contents.

sudo nano /home/pi/Mirror/resources/credentials/credentials.json

Paste them in here.

Part 7.

Now we need to define our domain in the config by doing:

sudo nano /home/pi/Mirror/resources/config.ini

Step 7: The Mirror Design

Designing your mirror depends on how you want it. Make accurate measurements of the LCD and leave a 2 centimeter gap on one side of the mirror since the Microwave motion sensor will be sitting there. It can't be behind any metal.

I connected 4 planks of wood together. These got milled to have a nice clean front of the mirror. On the top I also drilled a couple of holes to let the sound of the speaker go throught. The opposite side of the mirror, the bottom, I cut a small rectangle so I could easily do the electrical wiring. [Photo1]

These are 2 pieces of cheap wood where the monitor will be
resting on. Since I said we would need about a 2centimeter gap between the mirror and the case. I also added 3 little pieces of wood and screwed them in on those resting pieces. So the monitor would stay in place. [Photo2]

In the end it looked like this. I had about a 3mm gap
between those resting pieces and the front of the mirror case. Just enough so that I could put the 3mm thick Two way mirror in. [Photo3]

Step 8: Doing the Wiring

Make sure to properly follow one of these schemes.

Once I did the wiring I sticked it on the back of the screen with double sided tape. Since if I ever wanted to disassemble the mirror and use it for other projects I could easily remove it. If you are certain you can use a hot glue gun and glue it to the back of the mirror.

Step 9: Starting the Code

LXSession

Let's first create a couple of folders

mkdir -p /home/pi/.config/lxsession/LXDE-pi/

Now we'll create a file where we will specify a couple of startup parameters/commands.

sudo nano /home/pi/.config/lxsession/LXDE-pi/autostart

Paste the following into the file.

@lxpanel --profile LXDE-pi
@pcmanfm --desktop --profile LXDE-pi
@xscreensaver -no-splash
@point-rpi
@sh /home/pi/Mirror/init_mirror.sh
@xset s noblank
@xset s off
@xset -dpms

We'll update the start mirror screen script to match our host.

sudo nano /home/pi/Mirror/init_mirror.sh

Choose localhost if you aren't using google calendar and a domain.

#!/bin/bash
sleep 15
chromium-browser --incognito --kiosk http://localhost/mirror

If you are using it then fill in your host.

#!/bin/bash
sleep 15
chromium-browser --incognito --kiosk https://example.com/mirror

Service

Now we'll setup that the Mirror code automatically runs.

We'll be creating a service that automatically starts the code for us.

Go to:

sudo nano /etc/systemd/system/mirror.service

And paste this into the file

[Unit]
Description=Mirror Backend
After=network.target mariadb.service
[Service]
Type=simple
User=root
ExecStart=/bin/sh /home/pi/Mirror/init.sh
[Install]
WantedBy=multi-user.target

Now we'll have to reload the systemd daemon by doing: