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, 4, and Zero. Please use the lat­est Rasp­bian Buster oper­at­ing sys­tem with your Rasp­berry Pi for this tuto­r­i­al.

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, 4, and Zero

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, 3, and Zero 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, 3, and Zero:

  • 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, 3, and Zero:

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 and Pi Zero.
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, 3, and Zero:

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, 3, and Zero:

#!/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.