Splash screen

Yocto Raspberry Pi

Custom Splash Screen with Progress Bar

Raspberry Pi with custom splash screen with progress bar

Normally, if you create your custom linux image with Yocto for a Raspberry Pi, you also want to show a custom splash screen with a progress bar.

This can be done with adding the package "psplash" to the project.


Docker crops/poky

First you need installation and settings of the docker environment crops/poky as described in Yocto build Raspberry Pi 4 in a docker environment.

Logo as transparent png file

Second, you need a transparent png file, e.g. your logo centered in a canvas of e.g. 1020 x 768 px.

Prepare splash screen image

Splash screen is handled by a recipe called "psplash" found under "/workdir/poky-honister/meta-raspberrypi/recipes-core" directory of the source tree.

Since "psplash" expects an image to be in header file format, first you need to convert your image into a header file format by using a script called "make-image-header.sh".

Clone psplash repository

To get the script, clone the yoctoproject psplash repository - in this case to the /workdir directory

git clone https://git.yoctoproject.org/psplash

In the psplash directory you'll find the script "make-image-header.sh".

Install library

The script needs "libgdk-pixbuf2.0-dev" to be installed in the system. You can do this in a second terminal window with:

docker exec -it --user=root crops-poky bash
apt-get install libgdk-pixbuf2.0-dev

Now you can use the script to convert your png file to .h-file

./make-image-header.sh <path-to-png>/psplash-ixlogo.png POKY

As result, you should get a file named "psplash-ixlogo-img.h". The header looks like:

/* GdkPixbuf RGBA C-Source image dump 1-byte-run-length-encoded */

#define POKY_IMG_ROWSTRIDE (4080)
#define POKY_IMG_WIDTH (1020)
#define POKY_IMG_HEIGHT (768)
#define POKY_IMG_BYTES_PER_PIXEL (4) /* 3:RGB, 4:RGBA */
#define POKY_IMG_RLE_PIXEL_DATA ((uint8*) \

If you want to change the background color of the splash screen, you can add the following line:

#define PSPLASH_BACKGROUND_COLOR 0x07,0x85,0x00

This sets the background color to a green.

Create custom meta layer

To include the created splash screen image, we need a custom meta layer.

First source to rpi-build.

source poky-honister/oe-init-build-env rpi-build

With "bitbake-layers" we create a new meta layer and add this meta layer to the conf/bblayers.conf of the current project.

bitbake-layers create-layer meta-interelectronix-rpi
bitbake-layers add-layer meta-interelectronix-rpi

After this copy the directory "psplash" from meta-raspberrypi/recipes-core to the new meta-layer:

mkdir meta-interelectronix-rpi/recipes-core
cp -r /workdir/poky-honister/meta-raspberrypi/recipes-core/psplash meta-interelectronix-rpi/recipes-core/

Copy psplash-ixlogo-img.h to meta-interelectronix-rpi/recipes-core/psplash/files/

cp <path-to-h-file>/psplash-ixlogo-img.h meta-interelectronix-rpi/recipes-core/psplash/files/

Finally edit "meta-interelectronix-rpi/recipes-core/psplash/psplash_%.bbappend" and change "psplash-raspberrypi-img.h" to "psplash-ixlogo-img.h".

Include psplash

In the last step, the psplash package must be added to the local.conf file of the project. To do this, edit the file /workdir/rpi-build/conf/local.conf

My local.conf looks like:

## systemd settings
DISTRO_FEATURES:append = " systemd"
VIRTUAL-RUNTIME:init_manager = "systemd"
VIRTUAL-RUNTIME:initscripts = ""

## enable some hardware
ENABLE_I2C = "1"

IMAGE_INSTALL:append = " psplash"
IMAGE_FEATURES += " splash "

Copyright License

Copyright © 2022 Interelectronix e.K.
This Project source code is licensed under the GPL-3.0 license.