How to Add a Custom Splash Screen (Linux)

Introduction

This article will guide you on how to add a custom splash screen to a Linux image built with Yocto using the Plymouth application. Plymouth supports several themes, allowing you to create a unique and personalized splash theme for your system. For information on further customization for your splash screen, refer to the Plymouth official documentation.

Plymouth Overview

Plymouth is an application that runs early in the boot process and displays a graphical animation while the kernel boots in the background. It is designed specifically for systems equipped with DRM modesetting drivers, and sets the native mode early to avoid flickering, but will fall back to test mode if DRM drivers are not available.

Prerequisites

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

Adding a Custom Splash Screen

1. On the build directory, open the conf/local.conf file and proceed with the following addition:

   conf/local.conf

   CORE_IMAGE_EXTRA_INSTALL += "plymouth"

2. 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.

3. 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

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

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

5. 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 \
   "
   
   PLYMOUTH_THEMES = "spinner"
   PACKAGECONFIG = "drm udev ${PLYMOUTH_THEMES} ${@bb.utils.filter('DISTRO_FEATURES', 'systemd', d)}"
   
   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:

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

6. 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

7. Deploy the image using Toradex Easy Installer.