How I added crossfading slide transitions to my digital picture frame using Pi3D


How I added crossfading slide transitions to my digital picture frame using Pi3D 1

Building a great digital picture frame is not just about putting together a minicomputer, a display, and a frame. The crucial part is the software, especially the image viewer.

The image viewer software controls the type of transitions between your pictures. And the kind of transition makes the difference between a good and a bad digital picture frame.

I have tried many types of transitions until I finally found the one that I wholeheartedly recommend. It is based on software called Pi3D and in this article, I will describe in detail how you can install Pi3D to build an excellent digital picture frame.

Note: The recent introduction of the Raspberry Pi 4 and Raspbian Buster have introduced some changes in the graphics engine. Pi3D and this article have been updated to reflect these changes, so this works with the Raspberry Pi 2, 3, and 4. Please use the latest Raspbian Buster operating system with your Raspberry Pi for this tutorial.

Although Pi3D also works with a Pi Zero, we found that it becomes very unstable as soon as you have other applications running at the same time. This is why we do not recommend it any longer for this use case.

A world of difference

The standard image viewer on Linux is a package called feh. It is a lightweight image viewer that many tutorials on self-made digital picture frames suggest to use. I do not recommend this approach.

When I built my first digital picture frame, I initially used feh for the lack of something better. But the problem with feh is that it offers no transitions between images. It can only do a hard cut between images.

This may be fine for outdoor advertising, but it is unsuited for any social setting.

The hard cuts between photos cause quite a disturbance, especially with a larger screen. There may be a sudden change in brightness which is uncomfortable, something which distracts and doesn’t feel right. And it gets boring quickly.

I have tested many types of transition effects for over 12 years now. Crossfading transition effects with the right settings of transition duration are the key to digital picture frame heaven.

You may say, a standard image hard cut image viewer is good enough. But then you would be missing out on something magical. A lack of transitions means that there is no emotion, nothing that touches you.

Here is an example of a 10 seconds crossfade transition effect (comes with soft piano music):

I will explain this in more detail in my article “5 essential tips I learned from building digital picture frames“.

This is where Pi3D comes to rescue.

Taking the Raspberry Pi’s graphical capabilities up a few notches

Back in 2014, I had posted in the English Raspberry Pi forum that I was looking for an image transition software.

One guy suggested that I take a look at 2D/3D rendering software that came with many demo applications. There was one demo that got my attention in particular: SlideTransition. It built a slideshow of all files in a directory with four transition options.

How I added crossfading slide transitions to my digital picture frame using Pi3D 2Among them was crossfading. The one I was looking for.

The “guy” from the forum turned out to be Paddy Gaunt who together with Tim Skillman and Tom Ritchford had written Pi3D, a Python Open GL ES 2.0 library for the Raspberry Pi.

The software dramatically simplifies writing 3D in Python while giving access to the power of the Raspberry Pi GPU. What that means in layman’s terms is that this software fully exploits the graphical capabilities of the small Raspberry Pi.

Paddy showed interest in my digital picture frame project and offered to write a Python script that would produce beautiful and customizable image transitions for my exact purpose: PictureFrame.py was born.

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

Installing Pi3D on your Raspberry Pi 2, 3, and 4

The following instructions assume that you have prepared your Raspberry Pi along with the instructions in the article “How to set up your Raspberry Pi for your digital picture frame“.
If you haven’t done yet, please read that article first.

Make especially sure that you have downloaded the “Raspbian Buster with Desktop” Image. “Raspbian Buster Lite” does not include some software packages that you will need.

There are some special settings for the Raspberry Pi 2 and 3 based on a difference in the graphics driver. The special settings are highlighted in orange.

Open Terminal and connect to your Raspberry 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 following settings refer to the graphics engine.

sudo raspi-config

Make the fol­low­ing changes:

For the Raspberry Pi 4:

  • Under 3: Boot Options – B1 Desktop/CLI – choose B2 Console Autologin
  • Under 7: Advanced Options – A3 Memory Split – set to 128 MB
  • Under 7: Advanced Options – A8 GL Driver – set to G2 (Fake KMS)

For the Raspberry Pi 2 and 3:

  • Under 3: Boot Options – B1 Desktop/CLI – Choose B4 Desktop Autologin
  • Under 7: Advanced Options – A3 Memory Split – Set value to 128 MB
  • Under 7: Advanced Options – A8 GL Driver – Choose G1 (Legacy)

After the reboot, enter in Terminal:

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 important program for your digital picture frame project, is now installed on your Raspberry Pi.

You can test the program by entering (make sure you have a monitor connected to your Raspberry Pi):

For the Raspberry Pi 4:

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

For the Raspberry Pi 2 and 3:

cd pi3d_demos
python3 Earth.py

If you see a rotating globe, your installation has been successful. If not, check your settings in sudo raspi-config.

Hit “CTRL+C” or “ESC” to stop the globe.

Now we need to look at the Python script for our digital picture frame use case.

PictureFrame.py for smooth crossfades

The script that controls the display of your images is PictureFrame.py. It is a Python script which you will find in the pi3d_demos folder.

Note: In November 2019, Paddy released a great update of Pi3D. The settings have been extended quite a bit and are explained in detail in my article “Great new fea­tures for your dig­i­tal pic­ture frame with the updat­ed Pi3D Image View­er (Nov 2019)“. For all the rest, this article is still up to date.

Open PictureFrame.py in an editor (e.g., Sublime Text).

In the script you will see a section called “these variables are constants”. This is where you configure Pi3D for your digital picture frame. In the file you will also see comments to make it easy for you.

#####################################################
# these variables are constants
#####################################################
PIC_DIR = '/home/pi/Pictures' #'textures'
#PIC_DIR = '/home/patrick/python/pi3d_demos/textures' #'textures'
FPS = 20
FIT = True
EDGE_ALPHA = 0.5 # see background colour at edge. 1.0 would show reflection of image
BACKGROUND = (0.2, 0.2, 0.2, 1.0)
RESHUFFLE_NUM = 5 # times through before reshuffling
FONT_FILE = '/home/pi/pi3d_demos/fonts/NotoSans-Regular.ttf'
#FONT_FILE = '/home/patrick/python/pi3d_demos/fonts/NotoSans-Regular.ttf'
CODEPOINTS = '1234567890ABCDEFGHIJKLMNOPQRSTUVWXYZ., _-/' # limit to 49 ie 7x7 grid_size
USE_MQTT = False
RECENT_N = 4 # shuffle the most recent ones to play before the rest
SHOW_NAMES = False
CHECK_DIR_TM = 60.0 # seconds to wait between checking if directory has changed
#####################################################
BLUR_EDGES = False # use blurred version of image to fill edges - will override FIT = False
BLUR_AMOUNT = 12 # larger values than 12 will increase processing load quite a bit
BLUR_ZOOM = 1.0 # must be >= 1.0 which expands the backgorund to just fill the space around the image
KENBURNS = False # will set FIT->False and BLUR_EDGES->False
KEYBOARD = False # set to False when running headless to avoid curses error. True for debugging

I will explain the MQTT control of Pi3D in an upcoming article, there are some great possibilities including voice controlling Pi3D with Alexa.

In the section below “these variables can be altered using mqtt messaging” you define the playback 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 residential pictures frames, I recommend a time_delay of 200 seconds and a fade_time of 10 which makes for interesting transition effects. Just figure out what works best for you.

Before you can test Pi3D, you have to upload a few images to your Raspberry Pi Pictures folder (or whatever folder you specified) via file sharing and check if everything works.

In the terminal window enter:

For the Raspberry Pi 4:

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

For the Raspberry Pi 2 and 3:

cd /home/pi/pi3d_demos
python3 PictureFrame.py

The slideshow should start after a few seconds.

You can manually stop the slideshow by hitting “CTRL+C” or “ESC” if you have a keyboard connected to your Pi.

Automatically start the Pi3D slideshow at boot

Create a new file

cd ~
sudo nano start_slideshow.sh

and paste the following text into the file:

For the Raspberry 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 Raspberry 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 executable.

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 automatically at boot.

Conclusion

Provided everything works as expected, you can now upload your full image collection to your photo folder. Congratulations!

Thanks again to Paddy and his colleagues for such an outstanding contribution and the fast adaptation to the Raspberry Pi 4. I have yet to find a similar program which makes such beautiful transitions on the Raspberry Pi possible.

You can read more about Pi3D here.

Wolfgang Männel

Photography has always been a passion of mine. Since 2005, I have looked at countless ideas on how to enjoy beautiful images digitally, making the experience entertaining, amusing, and stimulating. In my other life, I am an entrepreneur, consultant, and bicyclist based near Frankfurt am Main, Germany.

Recent Content