DIY Smart Picture Frame & Calendar Using Raspberry Pi 3 – PART 1

DIY Smart Picture Frame & Calendar Using Raspberry Pi 3 – PART 1

smart picture frame

smart picture frame

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

  • Computer: Lenovo T420 Windows 10
  • MicroSD Card: Kingston MicroSDHC 8GB w/ SD Adapter
  • Microprocessor: Raspberry Pi 3 Model B (1GB)
  • Monitor: HannsG HL161 16inch Monitor
  • VGA Adapter: Generic HDMI Input to VGA Adapter Converter For PC
  • Power Supply: Generic Powered USB 2 4-port HUB
  • Cables: USB Type-A / Micro-B; and USB Type-A / Type-B
  • Keyboard: Generic USB Keyboard
  • Mouse: Generic USB Mouse
  • WiFi Router: Generic WiFi Router

SOFTWARE

  • SD Formatter v4
  • Win32 Disk Imager 0.9
  • Raspbian Jessie Pixel

ADD-ONS

  • overGrive
  • Feh
  • xprintidle
  • unclutter

EXTERNAL RESOURCES

  • Google Account
    1. Google Drive
    2. Google Calendar

From idea to development

There are many steps in the development of a project from concept to deployment.

smart picture frame

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?!

smart picture frame

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)

smart picture frame

C. Startup the RPi, Configure, & Update

smart picture frame

1) The Raspberry Pi (RPi) boots directly into Raspbian PIXEL GUI.

smart picture frame

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.

smart picture frame

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

smart picture frame

II. Set Your Timezone

smart picture frame

III. Set Your Keyboard

smart picture frame

IV. Set Your WiFi Country

smart picture frame

5) System will ask to reboot upon completion

smart picture frame

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

smart picture frame

4) Select the Calendar icon from the drop-down list

smart picture frame

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

smart picture frame

4) Select the Drive icon from the drop-down list

smart picture frame

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

smart picture frame

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

smart picture frame

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.

smart picture frame

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 ]

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]

smart picture frame

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

smart picture frame

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]

smart picture frame

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

smart picture frame

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!

smart picture frame

© 2015 Google Inc. All rights reserved. Google and the Google Logo are registered trademarks of Google Inc.