Add a Custom boot animation

[rania]

hello i am trying to customize my image boot animation using plymouth here’s what i did already :
this is the video.script that suppose to ensure that my video keeps playing till the user interface appear :

import time
import animation

# Play the animation (loop if needed)
animation.play_animation("/usr/share/plymouth/themes/video-theme/308С_Intro_fix2_Preview.mp4")

# Keep showing the animation until the user-space takes over
while True:
    time.sleep(1)

this the video.plymouth :

[Plymouth Theme]
Name=Video Boot Animation
Description=A theme that plays a video as boot animation.
ModuleName=script

[script]
ImageDir=/usr/share/plymouth/themes/video-theme
ScriptFile=/usr/share/plymouth/themes/video-theme/video.script
BackgroundStartColor=0x000000
BackgroundEndColor=0x000000
HorizontalAlignment=.5
VerticalAlignment=.7

and this is the plymoyth_%bbappend.bb file :

FILESEXTRAPATHS:prepend := "${THISDIR}/files:"

SRC_URI += " \
    file://video.plymouth \
    file://video.script \
    file://308С_Intro_fix2_Preview.mp4 \
"

PACKAGECONFIG = "pango drm"

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

do_install:append () {
    # Install theme files
    install -d ${D}${datadir}/plymouth/themes/video-theme
    install -m 0644 ${WORKDIR}/video.plymouth ${D}${datadir}/plymouth/themes/video-theme/video.plymouth
    install -m 0755 ${WORKDIR}/video.script ${D}${datadir}/plymouth/themes/video-theme/video.script
    install -m 0644 ${WORKDIR}/308С_Intro_fix2_Preview.mp4 ${D}${datadir}/plymouth/themes/video-theme/308С_Intro_fix2_Preview.mp4
}

and this is the structure of the project :

plymouth
│   ├── files
│   │   ├── 308С_Intro_fix2_Preview.mp4
│   │   ├── video.plymouth
│   │   └── video.script
│   └── plymouth_%.bbappend

when i built the whole image and checked rootfs file the plymouth.default file shows that the default theme is spinner which is the old one so how can i change to mine through the recipe i checked this solution but i want make sure that it’s right before applying it

PREFERRED_THEME = "video-theme"

ROOTFS_POSTPROCESS_COMMAND += "set_plymouth_theme;"

set_plymouth_theme() {
    # Set the theme and rebuild initrd
    plymouth-set-default-theme video-theme --rebuild-initrd
}

can u please check my work and tell me if there is anything wrong i did and please tell me if the solution i found will set theme-video as the default one or not
thank u

[ToradexAI]

Hi, I’m the Toradex AI Assistant. The Toradex Support team will follow up with you shortly!

Did you like my answer?

---

Hello,

Your approach to setting a custom Plymouth theme in your Yocto build appears to be on the right track. Let’s review your steps and ensure everything is correctly configured:

1. Theme Files: Your video.plymouth and video.script files seem properly set up to define a custom video boot animation. Double-check that all paths and filenames are consistent with your build environment.

2. Yocto Recipe (plymouth_%.bbappend): Your recipe correctly includes the theme files and specifies their installation paths. Ensure the do_install:append function places the files in the correct directory structure within the root filesystem.

3. Setting the Default Theme:

   • The PREFERRED_THEME variable is not typically used for Plymouth themes. Instead, your use of ROOTFS_POSTPROCESS_COMMAND is appropriate. The set_plymouth_theme function should effectively set your theme and rebuild the initrd.

4. Verification:

   • After building the image, confirm that the theme files are in the expected directory on the target device.
   • Check the Plymouth configuration file (usually /etc/plymouth/plymouthd.conf) on the target to ensure it points to your custom theme.
   • Verify that the initrd is rebuilt with the new theme settings. You can manually inspect the initrd contents if necessary.

By following these steps, your custom theme should be set as the default. If you encounter any issues, ensure that the plymouth-set-default-theme command is executed correctly during the build process.

Best regards,
Toradex AI Assistant

Please, also check if these links can help you solve your problem:

Animated splash image for Linux

Dear, Following this instructions https://developer.toradex.com/knowledge-base/splash-screen-linux, I’ve successfully loaded my custom boot splash screen image. However, I would like to use kind of “animated splash screen” (e.g. gif file). Anyone achieved this already? Any suggestions or guides how to do it?

Issues Adding Custom Splash Screen Using Plymouth

Hello, Here is some information about my setup Board: imx8qxp-colibri-eval Image: Colibri-iMX8X_Reference-Multimedia-Image I have followed the tutorial here to add a custom splash screen but I am facing two issues First Issue When I create the recipe as mentioned in the tutorial above and run bitbake command to compile the image, I get the following error ERROR: plymouth-0.9.4-r0 do_configure: QA Issue: plymouth: configure was passed unrecognised options: --with-runtimedir [unknown-config…

Smooth display transition.

[rania]

does plymouth support mp4 or should i use gif instead i mean tell me what are the extensions supported by plymouth

[henrique.tx]

Hi @rania !

@rania

does plymouth support mp4 or should i use gif instead i mean tell me what are the extensions supported by plymouth

This was exactly what I was going to ask you… I see you tried to use a video (MP4), but from Plymouth’s documentation, I couldn’t see a way of using video.

On top of that, there are several projects on Github that convert a video to be used as an animation by Plymouth: from what I could understand, they extract a sequence of still frames from the video so Plymouth can display them. For instance: plymouth-boot-animations · GitHub Topics · GitHub (I didn’t try it myself)

Seems like this is Plymouth’s approach to display a “video”.

Related: this is an interesting repository with several Plymouth themes. Maybe this can be helpful/serve as an inspiration.

GitHub - adi1090x/plymouth-themes: A huge collection (80+) of plymouth themes ported...

Best regards,

[rania]

i worked with this repo GitHub - Techcrafter/Plymouth-Creator: A tool using GTK3 and Python to easily create your own plymouth boot animations from an .mp4 video or single .png files with a GUI.
and i can tell that it’s intresting it generates a .script a .plymouth a test.sh an install and uninstall bash scripts which is very useful i only took the .script and .plymouth and the generated frames

now my problem is in the bbappend recipe i am confused of the way to set my boot animation as the default theme besides rebuilding the initramfs to apply the changes

look at the recipe and tell me what do u think of it

FILESEXTRAPATHS:prepend := "${THISDIR}/files:"

SRC_URI += " \
    file://pixii.plymouth \
    file://pixii.script \
    file://images/ \
    file://test.sh \   
"

PREFERRED_THEME = "pixii"

PACKAGECONFIG = "pango drm"

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

# Install theme and related files
do_install:append() {
    # Install the Pixii Plymouth theme files
    install -d ${D}${datadir}/plymouth/themes/pixii
    install -m 0644 ${WORKDIR}/pixii.plymouth ${D}${datadir}/plymouth/themes/pixii/pixii.plymouth
    install -m 0755 ${WORKDIR}/pixii.script ${D}${datadir}/plymouth/themes/pixii/pixii.script

    # Install the images for the theme
    install -d ${D}${datadir}/plymouth/themes/pixii/images
    install -m 0644 ${WORKDIR}/images/* ${D}${datadir}/plymouth/themes/pixii/images/

    # Install the install and uninstall scripts
    install -m 0755 ${WORKDIR}/test.sh ${D}${datadir}/plymouth/themes/pixii/test.sh       
}

ROOTFS_POSTPROCESS_COMMAND += "set_plymouth_theme;"

set_plymouth_theme() {
   
    plymouth-set-default-theme pixii --rebuild-initrd
}

focus on last part please is it correct ?

[rania]

Window.SetBackgroundTopColor (0, 0, 0);
Window.SetBackgroundBottomColor (0, 0, 0);
for(i = 1; i <= 241; i++)
{
  image[i].image = Image("images/image-" + i + ".png").Scale(Window.GetWidth(), Window.GetHeight());
  image[i].sprite = Sprite(image[i].image);
  image[i].sprite.SetOpacity(0);
  image[i].x = Window.GetX() + Window.GetWidth() / 2 - image[i].image.GetWidth() / 2;
  image[i].y = Window.GetY() + Window.GetHeight() / 2 - image[i].image.GetHeight() / 2;
  image[i].sprite.SetPosition(image[i].x, image[i].y, 0);
}

index = 1;
fun boot_callback()
{
  if(index >= 241 + 1)
  {
    image[241].sprite.SetOpacity(1);
  }
  else
  {
    for(i = 1; i <= 241; i++)
    {
      if(index != i)
      {
        image[i].sprite.SetOpacity(0);
      }
      else
      {
        image[i].sprite.SetOpacity(1);
      }
    }
    index++;
  }
}

Plymouth.SetRefreshFunction(boot_callback);
Plymouth.SetQuitFunction(boot_callback);

this is .script file i don’t really like the scaling process it will take sooo long to load each time is there a way to optimize it for exemple to prefix the screen size for the images

[henrique.tx]

Hi @rania !

Sorry for the delay.

Actually we don’t have much experience with Plymouth scripting. So we can’t help you much.

Maybe you can get help from some forum/mailing list related to Plymouth? E.g.: plymouth Info Page

Best regards,