Skip to main content
Version: BSP 7.x.y

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​

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:

    $ tree
    .
    ├── 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 \
    "

    EXTRA_OECONF += "--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

  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.

Send Feedback!