Raspberry Pi Digital Picture Frame (Picture frame, websocket controlled, and more)

To see Part 2 of this project click here

Inside the Pi Frame

In my search (hours upon hours upon days..) through the many picture frame pi tutorials I didn't quite find one that was fine tuned for what I wanted.  I wanted to control it with my phone (upload, change , remove, and modify images).  I tried the following (Pros/Cons):

•  FBI, Frame Buffer Imageviewer. 
• Pro: easy to setup and had slideshow modes.
• Cons:
• No layering if you wanted to put a clock or temperature on the top.
• Took lots of ram to buffer all the images up.
• No web interface.
• Pygame:
• Pros:
• Python based, and I like python, which could give you a web interface. 
• Can do layering (add a clock layer.
• Interface with web
• Cons:
• Slow
• Not great for animations
• HTML5 Web page Kiosk with Slideshow frontend and websocket server backend.
• Pros:
• Python websocket API for connecting Phone Apps and web apps
• Quick animations
• Layering upon layers upon layers
• Easy programming
• Connect it to other things (Weather, Home Automation,etc...)
• Cons:
• Takes lots of RAM.

So I took a bit of the FBI, and used some Raspberry Pi kiosk tutorials (can't think of which ones I used, just google some to find it) and mixed it into the mighty HTML5 one!!. Here's the parts list if this is your first RPicFrame:

• LCD Screen with either Video or HDMI (Ebay/Amazon)
• A Picture frame the you can attach your screen to. (May be difficult to find)
• I luckily had a philips 10" digital picframe that I found at a garage sale for $15, gutted the lcd driver board and ordered one compatible with the lcd screen. (not always going to work) Also found the 7" digital picture frame at goodwill and gutted it and found a compatible driver (which barely fit with the Model A+).
• Some people are skilled with woodworking as I've seen in other rpi pictureframe tutorials. You may be also.
• Temperature Sensor (DS18B20)
• I always add these to my pi, very handy, cheap, and gives me an idea of the temperature of that room.
• Resistive Touch screen.
• This may be included with your ebay purchase 
• A Raspberry Pi, Model A, B, B+, A+, and Rpi 2 B.
• Ok this doesn't have to be a Pi and  use another awesome embedded platform sucha as a Minnowboard Max or  Beagle Board. As long as you can hook up the screen to it and run some Linux code. (Kudo's to my bro's Blog and his intel edison projects)

Steps of creation:

sudo apt-get update && sudo apt-get upgrade -y

sudo apt-get install python-dev python-pip fbi mplayer matchbox libjpeg-dev

sudo pip install autobahn[twisted]

sudo pip install -I pillow

mkdir ~/.config

Now we are going to be creating the booting sequence:

Boot screen: follow tutorial here but replace the fbi cli to this appending mplayer underneath.

/usr/bin/fbi -T 30 -noverbose -a /etc/fbiImage.png & 

/usr/bin/mplayer /etc/pilogo.gif -speed .5 -loop 2 -fs -vo fbdev &

**This will add this spinning raspberry pi to your screen. (you'll need to save this gif to /etc/pilogo.gif)

The fbiImage.png is whatever you want to show after this gif finishes and the kiosk hasn't loaded. I just had a solid black image for mine. 

Controlling the frame with your mobile device

Ok... A couple more things and we're almost there. Create a file called go.sh and refernce it in your rc.local file:

go.sh:

#/bin/bash

# Disable DPMS / Screen blanking
 xset -dpms
 xset s off
 xset s noblank

while true; do
 sudo matchbox-window-manager -use_cursor no -use_titlebar no &
 sudo -u pi epiphany-browser -a --profile ~/.config http://localhost/index.html
 sleep 2s
done;

Append this before exit 0 in your rc.local:

sudo python /home/pi/piframe/piframestreamer.py &
sleep 5s
sudo -u pi xinit /home/pi/go.sh &

Here we are booting matchbox-window-manager as our desktop with epiphany our pictureframe webpage in an app kiosk mode with no title bar.

Now get the git clone of my webpage/websocket stuff and fill the pics folder with your images.
You'll need to make thumbnails to view the image selecting menu on the webpage:

git clone https://github.com/SimplyAutomationized/piframe.git
cd piframe 
python thumbMaker.py www/pics www/thumb

After that it should be ready to roll. I just make a piframe image for the sd card. Let me know if that is what some of you would like. Enjoy!!!
To see Part 2 of this project see here

The ones below are the 10" digital picture frame I can control my lights with. Along with having a raspberry pi camera in it.