How to Add a Custom Splash Screen (Linux)

Introduction

The goal of this article is to guide you through the process of customizing your image using Yocto Project for integrating a custom splash screen into your system using the Plymouth application. By following this tutorial, you will be able to add/enhance the visual appeal of your boot process. With Plymouth's flexibility and support for various "splash" themes, you can create a unique and personalized experience tailored to your specific needs.

Plymouth Overview

Quoting Plymouth official documentation:

Plymouth is an application that runs very early in the boot process (even before the root filesystem is mounted!) that provides a graphical boot animation while the boot process happens in the background.

Its primary purpose is to provide a graphical boot animation while the actual boot process happens in the background. Designed specifically for systems equipped with DRM modesetting drivers, Plymouth ensures that the native mode for the computer is set at an early stage and remains consistent throughout the entire boot process, eliminating any flickering. In cases where DRM mode setting drivers are not available, Plymouth gracefully falls back to text mode, still maintaining a smooth boot experience. One notable aspect of Plymouth is its ability to occlude boot messages, whether in text or graphics mode. These messages are temporarily hidden but can be accessed by the user at any time during the boot up by simply pressing the escape key.

If you want to look at Plymouth's source code, refer to https://gitlab.freedesktop.org/plymouth/plymouth.

For more in-depth information, refer to the related Arch Linux documentation at https://wiki.archlinux.org/title/Plymouth.

Prerequisites

Setup the build environment for Yocto Project as described in Build a Reference Image with Yocto Project/OpenEmbedded

Adding a Custom Splash Screen

On the build directory, open the conf/local.conf file and proceed with the following addition:
conf/local.conf
```
CORE_IMAGE_EXTRA_INSTALL += "plymouth"
```
On the layers directory, create and configure a custom layer for adding your custom recipes with bitbake-layers or manually, at your will. If you have already set your custom layer up, you can skip this step.

Inside the custom layer, which will be called meta-custom in this article, create a recipes-core directory with a plymouth folder.

$ cd layers/meta-custom
$ mkdir recipes-core && mkdir recipes-core/plymouth
$ tree
.
├── conf
│   └── layer.conf
├── COPYING.MIT
├── README
└── recipes-core
    └── plymouth

Create a files folder with the image to be added as a splash screen and, inside /files, add the spinner.plymouth file:

$ tree
.
├── conf
│   └── layer.conf
├── COPYING.MIT
├── README
└── recipes-core
    └── plymouth
        └── files
           ├── spinner.plymouth
           └── torizonlogo-white.png

Create an append file (plymouth_%.bbappend) with the following content:

recipes-core/plymouth/plymouth_%.bbappend
FILESEXTRAPATHS:prepend := "${THISDIR}/files:"

SRC_URI += " \
    file://torizonlogo-white.png \
    file://spinner.plymouth \
"

PACKAGECONFIG = "pango drm"

EXTRA_OECONF += "--with-udev --with-runtimedir=/run"

do_install:append () {
    install -m 0644 ${WORKDIR}/torizonlogo-white.png ${D}${datadir}/plymouth/themes/spinner/watermark.png
    install -m 0644 ${WORKDIR}/spinner.plymouth ${D}${datadir}/plymouth/themes/spinner/spinner.plymouth
}

Make sure to properly edit the SRC_URI content with the desired splash theme.

After all the steps, the meta-custom layer might look simillar to this:

$ tree
.
├── conf
│   └── layer.conf
├── COPYING.MIT
├── README
└── recipes-core
    └── plymouth
        ├── files
        │   ├── spinner.plymouth
        │   └── torizonlogo-white.png
        └── plymouth_%.bbappend

Bitbake the image:
```
$ bitbake tdx-reference-multimedia-image
```
You can check if Plymouth was correctly installed on the image by adding the flag -e to bitbake:
```
$ bitbake -e tdx-reference-multimedia-image | grep plymouth
```
Deploy the image using Toradex Easy Installer.

How to Add a Custom Splash Screen (Linux)

Introduction​

Plymouth Overview​

Prerequisites​

Adding a Custom Splash Screen​

Introduction

Plymouth Overview

Prerequisites

Adding a Custom Splash Screen