The 100 best digital picture frames on amazon
The 100 best digital picture frames on amazon
The 100 best digital picture frames on amazon
The 100 best digital picture frames on amazon

How I added cross­fad­ing slide tran­si­tions to my dig­i­tal pic­ture frame using Pi3D

-

Build­ing a great dig­i­tal pic­ture frame is not just about putting togeth­er a mini­com­put­er, a dis­play, and a frame. The cru­cial part is the soft­ware, espe­cial­ly the image view­er.

The image view­er soft­ware con­trols the type of tran­si­tions between your pic­tures. And the kind of tran­si­tion makes the dif­fer­ence between a good and a bad dig­i­tal pic­ture frame.

I have tried many types of tran­si­tions until I final­ly found the one that I whole­heart­ed­ly rec­om­mend. It is based on soft­ware called Pi3D and in this arti­cle, I will describe in detail how you can install Pi3D to build an excel­lent dig­i­tal pic­ture frame.

Note: The recent intro­duc­tion of the Rasp­berry Pi 4 and Rasp­bian Buster have intro­duced some changes in the graph­ics engine. Pi3D and this arti­cle have been updat­ed to reflect these changes, so this works with the Rasp­berry Pi 2, 3, and 4. Please use the lat­est Rasp­bian Buster oper­at­ing sys­tem with your Rasp­berry Pi for this tuto­r­i­al.

Although Pi3D also works with a Pi Zero, we found that it becomes very unsta­ble as soon as you have oth­er appli­ca­tions run­ning at the same time. This is why we do not rec­om­mend it any longer for this use case.

A world of dif­fer­ence

The stan­dard image view­er on Lin­ux is a pack­age called feh. It is a light­weight image view­er that many tuto­ri­als on self-made dig­i­tal pic­ture frames sug­gest to use. I do not rec­om­mend this approach.

When I built my first dig­i­tal pic­ture frame, I ini­tial­ly used feh for the lack of some­thing bet­ter. But the prob­lem with feh is that it offers no tran­si­tions between images. It can only do a hard cut between images.

This may be fine for out­door adver­tis­ing, but it is unsuit­ed for any social set­ting.

The hard cuts between pho­tos cause quite a dis­tur­bance, espe­cial­ly with a larg­er screen. There may be a sud­den change in bright­ness which is uncom­fort­able, some­thing which dis­tracts and doesn't feel right. And it gets bor­ing quick­ly.

I have test­ed many types of tran­si­tion effects for over 12 years now. Cross­fad­ing tran­si­tion effects with the right set­tings of tran­si­tion dura­tion are the key to dig­i­tal pic­ture frame heav­en.

You may say, a stan­dard image hard cut image view­er is good enough. But then you would be miss­ing out on some­thing mag­i­cal. A lack of tran­si­tions means that there is no emo­tion, noth­ing that touch­es you.

Here is an exam­ple of a 10 sec­onds cross­fade tran­si­tion effect (comes with soft piano music):

I will explain this in more detail in my arti­cle "5 essen­tial tips I learned from build­ing dig­i­tal pic­ture frames".

This is where Pi3D comes to res­cue.

Tak­ing the Rasp­berry Pi's graph­i­cal capa­bil­i­ties up a few notch­es

Back in 2014, I had post­ed in the Eng­lish Rasp­berry Pi forum that I was look­ing for an image tran­si­tion soft­ware.

One guy sug­gest­ed that I take a look at 2D/3D ren­der­ing soft­ware that came with many demo appli­ca­tions. There was one demo that got my atten­tion in par­tic­u­lar: Slide­Tran­si­tion. It built a slideshow of all files in a direc­to­ry with four tran­si­tion options.

Among them was cross­fad­ing. The one I was look­ing for.

The "guy" from the forum turned out to be Pad­dy Gaunt who togeth­er with Tim Skill­man and Tom Ritch­ford had writ­ten Pi3D, a Python Open GL ES 2.0 library for the Rasp­berry Pi.

The soft­ware dra­mat­i­cal­ly sim­pli­fies writ­ing 3D in Python while giv­ing access to the pow­er of the Rasp­berry Pi GPU. What that means in layman's terms is that this soft­ware ful­ly exploits the graph­i­cal capa­bil­i­ties of the small Rasp­berry Pi.

Pad­dy showed inter­est in my dig­i­tal pic­ture frame project and offered to write a Python script that would pro­duce beau­ti­ful and cus­tomiz­able image tran­si­tions for my exact pur­pose: PictureFrame.py was born.

Let's install Pi3D first and then go into the details of the script.

Installing Pi3D on your Rasp­berry Pi 2, 3, and 4

The fol­low­ing instruc­tions assume that you have pre­pared your Rasp­berry Pi along with the instruc­tions in the arti­cle "How to set up your Rasp­berry Pi for your dig­i­tal pic­ture frame".
If you haven't done yet, please read that arti­cle first.

Make espe­cial­ly sure that you have down­loaded the "Rasp­bian Buster with Desk­top" Image. "Rasp­bian Buster Lite" does not include some soft­ware pack­ages that you will need.

There are some spe­cial set­tings for the Rasp­berry Pi 2 and 3 based on a dif­fer­ence in the graph­ics dri­ver. The spe­cial set­tings are high­light­ed in orange.

Open Ter­mi­nal and con­nect to your Rasp­berry Pi via ssh

ssh pi@IP-of-your-Raspberry-Pi (e.g. 192.178.134.79)

Then enter:

sudo apt update && sudo apt upgrade -y

The fol­low­ing set­tings refer to the graph­ics engine.

sudo raspi-config

Make the fol­low­ing changes:

For the Rasp­berry Pi 4:

  • Under 3: Boot Options - B1 Desktop/CLI - choose B2 Con­sole Autolo­gin
  • Under 7: Advanced Options - A3 Mem­o­ry Split - set to 128 MB
  • Under 7: Advanced Options - A7 GL Dri­ver - set to G2 (Fake KMS)

For the Rasp­berry Pi 2 and 3:

  • Under 3: Boot Options - B1 Desktop/CLI - Choose B4 Desk­top Autolo­gin
  • Under 7: Advanced Options - A3 Mem­o­ry Split - Set val­ue to 128 MB
  • Under 7: Advanced Options - A7 GL Dri­ver - Choose G1 (Lega­cy)

After the reboot, enter in Ter­mi­nal:

sudo pip3 install pi3d
wget https://github.com/pi3d/pi3d_demos/archive/master.zip && unzip master.zip && rm master.zip && mv pi3d_demos-master pi3d_demos

You're done. Pi3D, the most impor­tant pro­gram for your dig­i­tal pic­ture frame project, is now installed on your Rasp­berry Pi.

You can test the pro­gram by enter­ing (make sure you have a mon­i­tor con­nect­ed to your Rasp­berry Pi):

For the Rasp­berry Pi 4:

cd pi3d_demos
sudo xinit /usr/bin/python3 /home/pi/pi3d_demos/Earth.py :0 -- -s off -dpms -s noblank

For the Rasp­berry Pi 2 and 3:

cd pi3d_demos
python3 Earth.py

If you see a rotat­ing globe, your instal­la­tion has been suc­cess­ful. If not, check your set­tings in sudo raspi-con­­fig.

Hit "ESC" to stop the globe.

Now we need to look at the Python script for our dig­i­tal pic­ture frame use case.

PictureFrame.py for smooth cross­fades

The script that con­trols the dis­play of your images is PictureFrame.py. It is a Python script which you will find in the pi3d_demos fold­er.

Open PictureFrame.py in an edi­tor (e.g., Sub­lime Text).

In the script you will see a sec­tion called "these vari­ables are con­stants". This is where you con­fig­ure Pi3D for your dig­i­tal pic­ture frame. I have added some com­ments to make it easy for you.

#####################################################
# these variables are constants
#####################################################
PIC_DIR = '/home/pi/Pictures' # top directory of your images
FPS = 30 # set to 30 on the Pi 4 and 3, and to 20 for the Pi 2.
FIT = False # "True" means that the image is shown in its maximum size. This may lead to pillar- or letterboxing if the aspect ratio is different. Set to "False" if you want the image to fill the entire screen
EDGE_ALPHA = 0.0 # see background colour at edge. 1.0 would show reflection of image
BACKGROUND = (0.2, 0.2, 0.2, 1.0)
RESHUFFLE_NUM = 1 # This means that every time that your images have been shown once, they are being shuffled.
FONT_FILE = '/home/pi/pi3d_demos/fonts/NotoSans-Regular.ttf' # do not change
CODEPOINTS = '1234567890ABCDEFGHIJKLMNOPQRSTUVWXYZ., _-/' # limit to 49 ie 7x7 grid_size # do not change
USE_MQTT = False # This activates control via MQTT; set to "False" unless you are using MQTT.

I will explain the MQTT con­trol of Pi3D in an upcom­ing arti­cle, there are some great pos­si­bil­i­ties includ­ing voice con­trol­ling Pi3D with Alexa.

In the sec­tion below "these vari­ables can be altered using mqtt mes­sag­ing" you define the play­back options.

#####################################################
# these variables can be altered using mqtt messaging
#####################################################
time_delay = 10.0 # time between slides in seconds
fade_time = 3.0 # length of the transition effect
shuffle = True # shuffle on reloading
date_from = None # do not change
date_to = None # do not change
quit = False # do not change
paused = False # do not change
 
delta_alpha = 1.0 / (FPS * fade_time) # delta alpha - do not change

For res­i­den­tial pic­tures frames, I rec­om­mend a time_delay of 200 sec­onds and a fade_time of 10 which makes for inter­est­ing tran­si­tion effects. Just fig­ure out what works best for you.

By default, Pi3D will briefly dis­play the file names. To sup­press this func­tion, we have to com­ment out four com­mands.

Scroll fur­ther down to "# set the file name as the descrip­tion" and put a "#" right in front of text.regen() and text.draw(), like this:

# set the file name as the description
textblock.set_text(text_format="{}".format(tidy_name(iFiles[pic_num])))
#text.regen() # comment out the file name display
 
if a < 1.0:
a += delta_alpha
slide.unif[44] = a
# this sets alpha for the TextBlock from 0 to 1 then back to 0
textblock.colouring.set_colour(alpha=(1.0 - abs(1.0 - 2.0 * a)))
#text.regen() # comment out the file name display
 
slide.draw()
 
else:
textblock.set_text("NO IMAGES SELECTED")
textblock.colouring.set_colour(alpha=1.0)
#text.regen() # comment out the file name display
 
#text.draw() # comment out the file name display

Before you can test Pi3D, you have to upload a few images to your Rasp­berry Pi Pic­tures fold­er (or what­ev­er fold­er you spec­i­fied) via file shar­ing and check if every­thing works.

In the ter­mi­nal win­dow enter:

For the Rasp­berry Pi 4:

cd pi3d_demos
sudo xinit /usr/bin/python3 /home/pi/pi3d_demos/PictureFrame.py :0 -- -s off -dpms -s noblank

For the Rasp­berry Pi 2 and 3:

cd /home/pi/pi3d_demos
python3 PictureFrame.py

The slideshow should start after a few sec­onds.

You can man­u­al­ly stop the slideshow by hit­ting "CTRL+C" or "ESC" if you have a key­board con­nect­ed to your Pi.

Auto­mat­i­cal­ly start the Pi3D slideshow at boot

Cre­ate a new file

cd ~
sudo nano start_slideshow.sh

and paste the fol­low­ing text into the file:

For the Rasp­berry Pi 4:

#!/bin/bash
cd pi3d_demos
sudo xinit /usr/bin/python3 /home/pi/pi3d_demos/PictureFrame.py :0 -- -s off -dpms -s noblank

For the Rasp­berry Pi 2 and 3:

#!/bin/bash
cd pi3d_demos
python3 /home/pi/pi3d_demos/PictureFrame.py

Save it (CTRL+O), exit (CTRL-X) and make the file exe­cutable.

sudo chmod +x start_slideshow.sh

Open the crontab

crontab -e

and add this line

@reboot /home/pi/start_slideshow.sh

Save (CTRL+O), exit (CTRL-X), and

sudo reboot

Pi3D will now launch auto­mat­i­cal­ly at boot.

Con­clu­sion

Pro­vid­ed every­thing works as expect­ed, you can now upload your full image col­lec­tion to your pho­to fold­er. Con­grat­u­la­tions!

Thanks again to Pad­dy and his col­leagues for such an out­stand­ing con­tri­bu­tion and the fast adap­ta­tion to the Rasp­berry Pi 4. I have yet to find a sim­i­lar pro­gram which makes such beau­ti­ful tran­si­tions on the Rasp­berry Pi pos­si­ble.

You can read more about Pi3D here.