My Raspberry Pi Photo Frame Project

The Finished Project

We recently got new furniture for our living room and I was looking for an electronic photo frame to fill the blank space above our new chair.  In my search, I kept finding solutions that involved a Raspberry Pi computer and a display panel.

The Raspberry Pi with NOOBS (the little card)

The 16:9 monitor

The Raspberry Pi computer is cheap:  $35.99, including an 8GB microSD card with adapter and NOOBS (The Operating System) pre-installed.  As for a display panel, my dad gave me an old 16:9 computer monitor that he wasn't using anymore.

Once I got the monitor I realized that it didn't have an HDMI port on it, so I found an HDMI to DVI cable on Amazon for $6.99.  In the same Amazon Prime shipment I added a $7.99 USB wi-fi adapter to pull images from the Internet without more wires.  I already had a USB keyboard, mouse and USB power adapter with a micro USB cable, all required to get the computer up and running.

As for the actual photo frame itself, I had leftover baseboards that had been sitting in the garage since we've lived here that I thought would work.  I looked into using posterboard as a matte, but I didn't have the tools to cut it.  I ended up bringing the monitor into a craft store (40% off coupon in-hand) and had a matte board and glass cut for this project (~$25).

One of my goals for the display was to have it pull images from a photo set from flickr or another photo-sharing site.  I found many resources, and used bits and pieces from a few different sites.  The most useful site I referenced was found on instructables, written by Steven Landon.  This gave a step-by-step guide on how to program the computer to run a media panel, which could pull photos from DropBox, 500px and flickr.  This software also made it possible to specify a URL or upload a single photo to display.  Another site I used was Making A Digital Picture Frame by Fredrik Hubbe, which leaded me in the right direction to make the frame for the panel.  When I got stuck, I headed over the the raspberry pi forums and found some answers there.

Here are the steps that I used to complete my Raspberry Pi photo frame project:

1)  The first thing I needed to do was set up the Raspberry Pi.  Since I bought the computer kit with Raspbian pre-installed on a 8GB microSD card, I was able to configure it right away.  After inserting the microSD card, connecting the monitor, plugging in the USB wi-fi dongle and bluetooth USB dongle, I plugged in the power and saw the "Raspberry Pi Software Configuration Tool."  The changes I made were:
a.  Expand the Filesystem
b.  Change the Password
c.  Enable Boot to Desktop
d.  In Advanced Options, I changed my hostname so my network would recognize my Pi on the Network.
e.  Then in Advanced Options, I enabled SSH so I can access my Pi from a computer on my network. f.  Lastly, I selected finish which restarted my Pi.

2)  Then I configured my wi-fi dongle to work with my wi-fi router by editing a file in the command-line terminal:
a. To edit the file, I typed in the terminal:

sudo nano /etc/wpa_supplicant/wpa_supplicant.conf

Then I made the file that was there look like this:

ctrl_interface=/var/run/wpa_supplicant
network={

proto=RSN

scan_ssid=1

key_mgmt=WPA-PSK

pairwise=CCMP TKIP

group=CCMP TKIP

ssid="your network ID in quote marks"

psk="your network password in quote marks"

}

update_config=1

b. To save the file I pressed ctrl + x,  then Y to confirm, and then pressed Enter to save the edited file.
c.  Then I restarted the Pi by entering:

sudo reboot

3.  Once the Pi rebooted and I was connected to the Internet, it was time to update it to the latest software.

a.  To get the latest updates, I entered the following command into the Terminal:

sudo apt-get update

Y to confirm and then Enter to get the updates.

b.  Then, to get the upgrade, I entered:

 sudo apt-get upgrade

Then I pressed Y and then Enter to install the upgrades (This took about 5 minutes to install)

4.  Then I installed and configured a browser that would display the media panel properly.
a.  To install the IceWeasel browser, I typed in the terminal:

sudo apt-get install iceweasel

b.  Then I configured the IceWeasel browser to display the Media Panel:
i.  I typed in about:config in the address field and then hit enter.
ii.  Next I found the "browser.sessionstore.resume_from_crash" line and double clicked it  to change it to false.

5.  For the display panel to pull photos from flickr, I needed the browser to point to the website mPanel.
a.  But first, I configured mpanel to work with my flickr account at:

http://designelemental.net/mpanel/

b.  After I was done tweaking mpanel, I had to set IceWeasel's home page to mpanel by editing the preferences in the edit menu.

c.  I then hit the F11 key to go full screen, then ctrl + Q to exit the browser.

d.  I want IceWeasel to start automatically, so in the terminal I type:

sudo nano /etc/xdg/lxsession/LXDE/autostart

then, I add

@iceweasel

to the list, typed ctrl + X then Y and Enter to save the changes.

5.  To have the mouse arrow disappear when not in use, I installed Unclutter by typing into the Terminal:

sudo apt-get install unclutter

6.  I had some trouble getting the computer not to go to sleep after 10 minutes.  I tried many different methods, and finally I found one that worked.  I ended up installing a screensaver, enabling it, and then setting the screensaver never go to sleep by typing the following into the Terminal:

sudo apt-get install xscreensaver

Then, in the menu of xscreensaver, I clicked on Mode and then clicked "Disable Screen Saver."

Now that I had the Raspberry Pi up and running, I realized that there were significant "Black Bars" on the left and right sides, as well as the top and bottom of the monitor.  Because it was using the DVI input, I could not change the size of the picture that was being displayed.  I decided to use an older monitor than the one that was given to me, it was a 19 inch 4:3 aspect ratio monitor.  When I hooked it up, the black bars were gone and the 4:3 aspect ratio is more like a typical photograph than a 16:9 display.

You're Done :D

Now it’s all setup you can plug it in to your wall mounted monitor and turn it all on.
If something stops working just unplug the pi then plug it back in, hey presto she starts again. Unfortunately my spare HDMI monitor does not have the screw holes for a wall mount bracket. I have decided to use an old VGA monitor I had laying around, just have to wait for the HDMI to VGA converter.

Building the frame:

I decided to not to take apart the monitor and use just the display for two reasons:  If I used the monitor as-is, I could use a VESA mount to attach it to the wall and (2) I had never taken apart a monitor before, and really didn't want to make a mistake and ruin it.

Before starting on the frame, I went to a craft store to get glass and a matte cut.  To do this, I brought the monitor in and had them cut a two inch matte around the 19 inch monitor, then a piece of glass was cut to match the outer edge of the matte.

I then got a four pack of flat corner braces, which came in a pack with screws (~$2 at Home Depot).  As stated before, we already had the baseboards that were in the garage that I was going to use for the frame itself.

The Square

The first step in making the frame was to use a "square" to draw the 45 degree angles on the boards.

After I drew the 45 degree angles, I measured and cut them using a hand-held battery-powered circular saw.

Since the boards themselves weren't even, it was hard for the corners to line up correctly after the cut. I then realized that the screws that came with the corner braces were too long, and went right through the frame.  I decided to use glue to connect the corners together, using the flat corner braces and clamps to hold together the corners.

I wasn't very happy with the gluing results.  The glue seeped through the cracks and I was left with something that I wouldn't want if our living room.  So, after this failed first attempt, I thought that I'd try it again (did I mention that we have  A LOT of baseboards?)

I then decided to "Screw It, Not Glue It."  I used smaller screws to connect the corners, which resulted in a much sturdier frame.  Then I used some 3M hanging hooks (the ones that are mostly used for hanging keys on the wall) to hold the matte and glass in place.

I cut some 1x3 inch wood to create brackets for the frame to attach to the monitor.  The square foam tape seen in the photo is to raise the right side of the frame so it will be even on both sides.

Next I hung the monitor using a VESA mount from Amazon ($10).  I first hung it in the garage before bringing it into the house to make sure everything was square and up-and-running.

Then I attached the frame and made sure it was working.

Then I realized that the middle of the VESA mount was NOT in the middle of the frame.  I decided to use the old frame that I built as a template for where I should drill the holes in the living room.  After finding the stud, I had Mandy tell me where she thought the frame should go, then I made a pencil mark in the middle of the hole and drilled some pilot holes where the mount was (with the aid of a Post-It note).

The VESA mount was square after I drilled into the wall.

The monitor after hanging it.

The hanging picture frame.

The photo frame after hooking up the Raspberry Pi.

My "setup" to try to fix the screensaver problem.

Now it was time to get rid of those hanging wires.  I found an in-wall speaker cable kit a few months ago for $5.  It included the drill bit, the pull-through system and some speaker wire (which I won't be using).

I then pulled the power cord through the wall and near an outlet.

And that's it!  The Raspberry Pi Photo Frame is complete (for now!)  In the above photo, the frame is crooked.  The mount from Amazon is fully articulating, so it's an easy 1 minute fix.  I did find one problem:  It needs to be turned on when someone's in the room, and off when nobody is (to save electricity).  I think I found a solution for this, and I'll update when I've fixed it.