Part 1 of this tutorial will take you through the steps of building a Smart Picture Frame/Calendar that is connected to your Google account and will display a family calendar and family photos.
Please refer back to Raspberry Pi 3 Model B WiFi & Bluetooth Setup Guide
This project will be built using a Raspberry Pi 3 model B with the Raspbian Jessie operating system. I’ll take you through the necessary steps to configure the Raspberry Pi (RPi) and install the additional software to make this project work.
There are specific steps in every project to get from Concept to Deployment. Part 1 of this tutorial will get us to the Prototype phase. The next part will then go through testing and revisions till finally having a finished piece that’ll look great on any wall.
HARDWARE
SOFTWARE
ADD-ONS
EXTERNAL RESOURCES
From idea to development
There are many steps in the development of a project from concept to deployment.
STEP I – Concept
You’ve experienced this: every morning, there is an impromptu meeting around the breakfast table to go over the daily schedule of who’s where, when, and at what time. This routine has turned into a hodgepodge of everyone putting reminders in their phones and writing on a whiteboard on the wall. I’ve had the idea to put a calendar above the whiteboard so we’d be able to see our weekly schedule. Why not make it a Smart Calendar with a Raspberry Pi (RPi) and monitor? And since the calendar doesn’t need to be seen all the time, why not integrate a Picture Frame slideshow into it, and show some family photos?!
STEP II – Design
PART 1: Using Chromium, the RPi will boot into KIOSK mode and display a created Google Calendar. After a set amount of time a slideshow of images will launch in fullscreen over Chromium. These images will be downloaded and synced from Google Drive through an add-on program called overGrive.
PART 2: Using a PIP motion sensor, a script will be programmed to switch between the slideshow and the calendar when someone is directly in front of the display. The whole project will then be mounted in a frame and wired up to look like a picture frame.
STEP III – Prototype
A. Setting up the Disk Image (PC)
1) Download the “RASPBIAN JESSIE WITH PIXEL” Disk Image [ https://www.raspberrypi.org/downloads/raspbian/ ] and uncompress it to your hard drive.
2) Format a 8GB MicroSD Card. I use SD Formatter v4 [ https://www.sdcard.org/downloads/formatter_4/ ].
3) Write the downloaded Disk Image to the microSD Card. I use Win32 Disk Imager [ https://sourceforge.net/projects/win32diskimager/ ].
B. Assembling the the Raspberry Pi 3
1) Insert the microSD into the slot on the back of the RPi (see video)
2) Connect the keyboard & mouse to the USB ports (Blue)
3) Connect the Monitor to the HDMI adapter & plug it into the RPi (Black)
4) Connect the Powered USB Hub to the micro-b USB port on the RPi(Pink)
C. Startup the RPi, Configure, & Update
1) The Raspberry Pi (RPi) boots directly into Raspbian PIXEL GUI.
2) Click on the WiFi icon in the upper right of the menu bar to connect to you local router and the internet.
3) Change your RPi password by clicking on the RPi icon in the upper left of the menu bar and selecting Raspberry Pi Configuration under the Preferences menu item.
4) While your are in the Raspberry Pi (RPi) Configuration click on the Localization tab and configure the RPi to your area.
I. Set Your Locale
II. Set Your Timezone
III. Set Your Keyboard
IV. Set Your WiFi Country
5) System will ask to reboot upon completion
D. Sign in OR sign up with Google (on the RPi)
1) Open the Chromium web browser by clicking on the Blue Globe in the upper left of the menu bar
2) Type www.google.com into the browsing bar
3) Click the [Sign in] button on the screen
4) Sign in with your Google Account OR select [Create account], at the bottom of the page, if you don’t already have one.
E. Setup your Calendar (on the laptop)
1) Goto www.google.com
2) Sign in to your Google Account
3) Click on the box of 3×3 squares in the upper right
4) Select the Calendar icon from the drop-down list
5) Create and setup a Calendar for your family (see video)
F. Setup your Google Drive (on the laptop)
1) Goto www.google.com
2) Sign in to your Google Account
3) Click on the box of 3×3 squares in the upper right
4) Select the Drive icon from the drop-down list
5) Create and setup a folder for your photos (see video)
NOTE: Images for your slideshow should fit the monitor you are using. Consider images that are landscape over portrait to fit best.
G. Setup sync to your Google Drive folder (on the RPi)
1) Open a Terminal window by clicking on the RPi logo in the upper left corner
2) Select the [Terminal] application under [Accessories]
3) Type the following commands in to install the necessary program dependancies for overGrive.
I. sudo apt-get update #checks for Raspbian Jessie updates
II. sudo apt-get install gir1.2-appindicator3-0.1 indicator-application libappindicator1 libappindicator3-1 libdbusmenu-glib4 libdbusmenu-gtk3-4 libdbusmenu-gtk4 libindicator3-7 libindicator7 libnotify-bin lsb-release python-pip python-pkg-resources python-pyinotify python-setuptools #install overGrive dependancies
4) Open the Chromium web browser and goto this link to download the overGrive installer:
https://www.thefanclub.co.za/sites/default/files/public/overgrive/overgrive_3.2.3_all.deb
5) Once the file is downloaded install overGrive
6) Click on the Folder icon in the upper left of the menu bar
I. Click on the [File] menu and select [Create New…] -> [Folder]
II. Name the new folder “Google_Drive” #Linux doesn’t deal with spaces in files well so make sure to use the under_score
7) Click on the RPi icon in the upper left of the menu bar
I. Click on [Accessories] and select the [overGrive] app.
8) Click the [Change] button in the window and select the [Google_Drive] folder under the [Home] menu on the left.
9) Click the [Connect account] button in the window and follow the rest of the installation instructions here www.thefanclub.co.za/overgrive/installation-instructions-raspberrypi
NOTE: overGrive is a polished Google Drive API solution. It costs a one-time fee of $ 4.99 to purchase a license and has a 14 day trial available if you want to test it out first.
H. Setup the Slideshow program & start script(on the RPi)
1) Open a Terminal window by clicking on the RPi logo in the upper left corner
2) Select the [Terminal] application under [Accessories]
3) Type the following commands in to install the necessary programs for the slideshow
I. sudo apt-get install feh #follow prompts
II. sudo apt-get install xprintidle #follow prompts
III. sudo apt-get install xscreensaver #follow prompts
4) Type the following commands in Terminal to setup the slideshow script
I. cd /home/pi/Google_Drive/Picture_Frame #open Picture_Frame folder
II. sudo nano slideshow_start.sh #create script to start the slideshow
a. Copy & Paste the following code from J.A.McNaughton into the slideshow_start.sh script [ https://raw.githubusercontent.com/jamcnaughton/useful-linux-scripts/master/simplescreensaver/screensaverfull.sh ]
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 |
#!/bin/bash # screensaverfull.sh # url: ### # This script is licensed under GNU GPL version 2.0 or above # Uses elements from lightsOn.sh # Copyright (c) 2011 iye.cba at gmail com # url: https://github.com/iye/lightsOn # This script is licensed under GNU GPL version 2.0 or above # Description: #### # screensaverfull.sh needs xprintidle and feh to work. # HOW TO USE: Start the script with the number of seconds you want the checks # for fullscreen to be done. Example: # "./screensaver.sh 120" DIR=$( cd "$( dirname "$0" )" && pwd) delay=$1 # If argument empty, use 60 seconds as default. if [ -z "$1" ];then delay=60 fi # If argument is not integer quit. if [[ $1 = *[^0-9]* ]]; then echo "The Argument \"$1\" is not valid, not an integer" exit 1 fi IDLE_TIME=$(($delay*1000)) cd $DIR while sleep $((1)); do idle=$(xprintidle) if [ $idle -ge $IDLE_TIME ]; then feh -x -F -r -Y -Z -z -A slideshow -D 7 -d $DIR fi done exit 0 |
b. Exit & Save by pressing [Ctrl] + [x], then [y] for Yes, and finally [Enter] to write file
III. sudo chmod 775 /home/pi/Google_Drive/Picture_Frame/slideshow_start.sh #make this script executable
IV. sudo nano ~/.config/lxsession/LXDE-pi/autostart #open autostart file
a. Add the following line to the end of the file
@/home/pi/Google_Drive/Picture_Frame/slideshow_start.sh
b.Exit & Save by pressing [Ctrl] + [x], then [y] for Yes, and finally [Enter] to write the file
5) Turn off screen saver by clicking on the [Screensaver] app in the [Preferences] menu under the RPi logo in the upper left of the menu bar
Click on the [Mode:] option in the window and select [Disable Screen Saver]
NOTE: To exit the slideshow press [Esc]
I. Setup Chromium to load calendar (on the RPi)
1) Open the Chromium web browser and go to www.google.com
2) Click on the [Calendar] icon under the 3×3 square box
3) [Copy] the url for the calendar
4) Click on the line of 3 dots just to the right of the url window to access Custom Settings and Control
I. Select the [Settings] menu
a. Find the [On startup] heading and select the [Open a specific page or set of pages] radio button
b. Click on the blue [Set pages] at the end of the line
[Paste] the calendar url into the [Add a new page] box and click [OK]
II. Exit the Chromium browser
5) Launch the Chromium browser again to make sure the calendar page loads
NOTE: If Google prompts you log in with your name and password again check the [Stay signed in] box
6) sudo nano ~/.config/lxsession/LXDE-pi/autostart #open autostart file
I. Add the following line to the end of the file:
@/usr/bin/chromium-browser --noerordialogs --disable-session-crashed-bubble --disable-infobars --kiosk #open Chromium browser without error messages or dialog disabling crash bubbles and info bar in kiosk (full screen) mode
II. Exit & Save by pressing [Ctrl] + [x], then [y] for Yes, and finally [Enter] to write the file.
7) sudo apt-get install unclutter #to install program that removes the mouse cursor while in fullscreen mode
8) sudo nano ~/.config/lxsession/LXDE-pi/autostart #open autostart file
I. Add the following line to the end of the file @unclutter -idle 0.1 -root
II. Exit & Save by pressing [Ctrl] + [x], then [y] for Yes, and finally [Enter] to write the file.
STEP II – Testing
Now that we’ve gotten all the programs and code sorted out it’s time to shut down the RPi and reboot to make sure everything is auto starting properly (see video)
CONCLUSION
This project is off to a great start. Part 1 was all about getting the Raspberry Pi configured and setup to display the calendar and load the slide show. Part 2 is where we clean up the project: mount the Raspberry Pi behind the monitor, build a frame, and install the motion sensor.
Stay tuned for the next article!
© 2015 Google Inc. All rights reserved. Google and the Google Logo are registered trademarks of Google Inc.