Multi User Smart Mirror With Google Calendar

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

1. Select your image via the folder icon
2. Select your SD card via the dropdown
3. Click on write

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

1. Go to the SD card’s boot directory
2. Open the file "cmdline.txt"
3. Add ip=169.254.10.1 At the end of the long line of text separated with a space (on the same line).
4. Save the file.
5. 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.

1. Install Putty from https://www.putty.org/
2. Enter 169.254.10.1 in the IP box.
3. Make sure SSH is selected and port 22 is filled in.
4. Click open
5. Fill in the username: pi
6. 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

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

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.

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

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.

1. Click the Get your API key button on the dashboard on the righthand side. [Photo 1]
2. 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.

8 More Images

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.

1. Click ADD DOMAIN
2. Fill in your domain
3. It'll then ask to verify your domain. Click proceed.
4. Choose your Domain name provider. [Photo5]
5. Follow the process
6. 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]

1. 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.

1. Click add scope and search for calendar.
2. 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

3 More Images

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]

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.

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:

sudo systemctl daemon-reload

And we'll also enable the service to auto start on boot.

sudo systemctl enable mirror

Now we'll power off.

sudo poweroff

The final settings

Finally we need to remove our APIPA ip so it only works on WiFi.

1. Go to the SD card's boot directory on your PC.
2. Open the file "cmdline.txt"
3. Remove ip=169.254.10.1 At the end of the long line of text.

Visit the ip that’s on the mirror screen or if you have setup the google calendar fill in the domainname.

Now you'll be able to setup your mirror!

If you get a SSL error on your mirror you might want to add your certificates to the Chromium certificate store.