Raspberry Pi — Social Photo Frame

Raspberry Pi — Social Photo Frame

Summary

The concept is simple, family members post photos to Twitter with a predefined hashtag and a digital picture frame updates on regular intervals to pull down new images. Using the Raspberry Pi, Wi-Pi and an inexpensive LCD display we built a prototype picture frame for a family member as a Christmas gift. While the first iteration of this project only works with Twitter, we intend to add additional support for Instagram and Facebook. The primary hurdle with adding additional social support, is finding a way to overcome duplication as many people automatically post to all 3 networks.

Hardware

Steps

  1. Disassemble the display. This requires a bit of patience. If you have a nylon pry bar I would suggest using that rather than a screw driver. Start by prying the face plate off beginning at the logo on the bottom. Be careful not to destroy any cables or the controller board in the foot of the display.
  2. Splice the car charger into the power cable for the display between the power supply and the monitor. You will need to break open the car charger and solder the power to it. The center wire of the power cable will need to be soldered to the joint connected to the tip of the car charger. The outer wire of the power supply will need to be soldered to the joint that is connected to the outer part of the car charger. After this, you will need to reconnect the power supply’s plug. Use the heat shrink to reinforce the wire joints. Assemble everything in the smaller project box and plug in the USB wire that will power the Raspberry Pi.
  3. 2fde6dfa4cd611e2bccc22000a1f8cda_7

    Testing assembled components.

    Assemble the components in the larger project box using the screw and bolt kit. This includes the Raspberry Pi and display controller. If you have a 1st gen Raspberry Pi you will need to get a little creative as it does not have mount holes.

  4. Fitting display into frame.

    Fitting display into frame.

    Framing the display will be a little difficult because the display itself is about 2cm too large for the frame. I used a small chisel to notch out enough space for the frame. You will need to cut the mat to fit the frame leaving enough of a border to cover the gap between the top of the display and the top of the frame.

  5. Wire up the power to the display controller and Raspberry Pi. Then run the HDMI from the DVI adapter to the Raspberry Pi. You will also need to rewire any display cables that were unplugged during disassembly.
  6. Securing the display in the frame.

    Securing the display in the frame.

    Before completing the frame assembly, you will need to complete the software setup. Once everything is in the frame, some of the edges will no longer be visible. After you have completed the software setup, place the display and mat in the frame secure it with the strip of particle board. I secured the project boxes to the particle board using hot glue.

Software

Steps

  1. Setup SD card
  2. Setup Raspbian
    sudo apt-get update
    sudo apt-get install chromium-browser unclutter
    mkdir /home/pi/.config/lxsession/
    mkdir /home/pi/.config/lxsession/LXDE/
    sudo nano /home/pi/.config/lxsession/LXDE/autostart
    
    @chromium-browser --kiosk -a http://www.domain.com/twitter-gallery
    @unclutter
    
    sudo nano /etc/lightdm/lightdm.conf
    
    [SeatDefaults]
    xserver-command=X -s 0 dpms
    
  3. Clone the gallery repo and upload to your web server.
  4. Reboot and cross your fingers

References

https://github.com/nathanaelnsmith/twitter-gallery
http://elinux.org/RPi_Easy_SD_Card_Setup
http://www.raspberrypi.org/
http://www.raspberrypi.org/phpBB3/viewtopic.php?f=41&t=924&start=25

Short URL: http://bit.ly/10ADMaF
  • Posted On: 27th December 2012
  • By:
  • Under: DIY

8 Comments

  1. Raspberry Pi — Picture Frame Concept · February 1, 2013 Reply

    […] Fix Drupal 7 Permissions Social Photo Frame […]

  2. Rich · March 11, 2013 Reply

    Hi, cool project. Thanks for sharing. Did you get the Facebook/Instagram part working? Please let me know if you did. I’d like to set up something like this as well. Can’t decide if I should do what you did with chromium or the frame buffer (FBI). Also, it’s an LCD monitor that you have, not an LED monitor.

  3. dsmith · March 11, 2013 Reply

    Thanks. We were not happy with the result produced by using Twitter. Even using the largest size image that Twitter has available the resolution isn’t high enough for the screen size we are using. Image compression is noticeable up close. Instagram would have the same problem. I like the idea of using Flickr because of the image size options. The problem with Flickr is that it makes group sharing more difficult which was the original purpose of this project.

    At the moment I’m considering either using Facebook or Flickr. If neither of those end up being good options, I may just start using a smaller screen.

    Chromium is working well for now but using framebuffer may yield better performance with less overhead. This would probably be a better option in the long run.

    LED typo fixed. I copied it from Amazon which had it incorrect at the time of the original post.

  4. Dave · May 11, 2013 Reply

    Great article – I’m about to attempt something similar. I have been wondering about pixelation / compression factors in 72dpi images usually found on the web – I assumed they’d be pixelated when shown full screen, and there’s the compression artifacts too. I thought there’d be something that at least partly solved this in image processing algorithms / copying something out of photoshop to remove blur, pixelation etc when an image is enlarged.

    Have you explored this kind of thing much?

    • dsmith · May 15, 2013 Reply

      With a lower resolution display I don’t think the problem will be as noticeable. Unfortunately with the size of the display I used the compression can be seen up close. The problem is the resolution limitations of the photos once they are uploaded to Twitter. The best solution would be to use another source for images. Flickr looks like a good options but I haven’t had time to investigate. If you want to try post processing the image you could use GD or ImageMagick.

  5. Sean Scott · August 23, 2013 Reply

    Be great if you added a budget value to these projects as well so we can get an idea of scope. Keep them coming

  6. Kevin · October 18, 2014 Reply

    This is a fantastic guide, however it’s loading a blank page and I think the reason why is because the twitter api used in main.js is outdated.

    The new api seems significantly harder to set up. PHP required?

Leave a reply