Skip to main content
Version: 5.0

Splash Screen on TorizonCore

Introduction​

TorizonCore uses Plymouth splash screen running in user space. Plymouth is started from an initial minimal root file system (initramfs) very early during boot. Hence customizing the splash screen requires customizing the initramfs. TorizonCore ships with a script that allows adding a custom splash screen logo to the initramfs.

There are different phases of development with different methods for customizing the splash screen:

  • Evaluation and prototyping: you can use the convenient script ostree-customize-playmouth.sh provided in the TorizonCore image.
  • Development and production: you must use the TorizonCore Builder Tool.

This article complies to the Typographic Conventions for Torizon Documentation.

Limitations​

The Apalis iMX8 does not have a splash screen on HDMI. The splash screen is only present when using the Capacitive Touch Display 10.1" LVDS with the HDMI Device Tree Overlay disabled.

Prerequisites​

  • The custom splash screen needs to be a png file with a maximum size of your screen's resolution (-32 pixel in height for the waiting animation). Typically a resolution of around 600x400 is used. Currently, the background is always black.
  • A Toradex SoM with Torizon installed.
  • A TorizonCore image downloaded.

Evaluation: Add a Custom Splash Screen Directly from TorizonCore​

Since the initramfs is stored in OSTree, customizing the splash screen requires a new OSTree commit. TorizonCore ships with the ostree-customize-plymouth.sh script which does most of the work. It requires three parameters:

# ostree-customize-plymouth.sh [splash] [ostree ref] [new ostree branch]

Being:

  • splash: the path to the png image.
  • ostree ref: the reference to the base tree from OSTree.
  • new ostree branch: the name of a new branch to which you will commit the changes.
caution

you are advised to always start from a vanilla TorizonCore OSTree reference before running the tool for the second time.

Get the Current OSTree Reference​

To get the reference to the base tree (typically the current running tree) you can use ostree admin status to display the current reference:

# ostree admin status
* torizon e0d44cf2f894bf834f7d799abeccd4ad1e5226cd1caff2324179950ca3676990.0
Version: 4.0.0-devel-20200218+build.118
origin refspec: e0d44cf2f894bf834f7d799abeccd4ad1e5226cd1caff2324179950ca3676990

The value is displayed as origin refspec.

Create New OSTree Commit​

With the png in place and the base reference above a new OSTree commit with the customized initramfs can be created. See an example below that uses an image named fast-banana.png and creates a new branch named apalis-imx6/torizon/torizon-core-docker-customized:

# sudo ostree-customize-plymouth.sh fast-banana.png \
e0d44cf2f894bf834f7d799abeccd4ad1e5226cd1caff2324179950ca3676990 \
apalis-imx6/torizon/torizon-core-docker-customized

Deploy New OSTree Commit​

This new OSTree commit can be deployed using:

# sudo ostree admin deploy "apalis-imx6/torizon/torizon-core-docker-customized"
# sudo reboot

On reboot, you should be able to see the new splash screen showing up.

Revert to the Vanilla TorizonCore OSTree Reference​

The script ostree-customize-plymouth.sh "overwrites" the default splash screen by appending a new splash screen to the initramfs of the currently running root file system. This means that if the tool is used on an already customized root file system, the initramfs will append another splash screen, making the initramfs unnecessary larger.

Given the origin refspec from the previous example, run ostree admin switch [ostree ref] to revert to the vanilla TorizonCore OSTree reference:

# sudo ostree admin switch e0d44cf2f894bf834f7d799abeccd4ad1e5226cd1caff2324179950ca3676990
# sudo reboot

Development and Production: Add a Custom Splash Screen with TorizonCore Builder​

The TorizonCore Builder Tool is the recommended method for customizing TorizonCore.

Additional prerequisites​

Installing TorizonCore Builder​

To install TorizonCore Builder, read our statements on OS and shell compatibility, then follow the instructions below, in order.

Create and enter a working directory where your customization will be stored:

$ mkdir ~/tcbworkdir
$ cd ~/tcbworkdir

Use the setup script named tcb-env-setup.sh, available on the Toradex Github, to setup TorizonCore Builder:

$ wget https://raw.githubusercontent.com/toradex/tcb-env-setup/master/tcb-env-setup.sh
$ source tcb-env-setup.sh

For advanced usage, run source tcb-env-setup.sh -h, or see the project README.

If using Windows, you must pass extra parameters to the script when using the following commands:

tip

The setup script installs a bash completion script for TorizonCore Builder, making it possible to autocomplete commands and parameters by just pressing the TAB key.

Verify that the command torizoncore-builder is available:

$ torizoncore-builder --help
caution

Make sure to: (1) source the script, (2) every time you open a new terminal, (3) inside the working directory you have previously created. Otherwise, it will not work as intended and, most importantly, the torizoncore-builder alias will not be created properly.

Applying a Splash Screen to a Custom Image​

There are two possible approaches to apply the customization and generate a custom Toradex Easy Installer image, described in the next two sections Approach 1 and Approach 2. These approaches in some cases are interchangeable and in some not as described in the next sections.

To learn about TorizonCore Builder workflow and the different approaches to use the tool, with explanatory diagrams, please refer to the TorizonCore Builder - Workflow article.

danger

Both approaches generate a custom Toradex Easy Installer image as output, so the approaches should be followed alternatively and not in sequence.

Approach 1: Applying a Splash Screen to a Custom Image: Using the Build Command​

TorizonCore Builder build command generates a custom TorizonCore image with the splash screen, ready to be installed with Toradex Easy Installer, named torizon-core-docker-colibri-imx6-Tezi_5.3.0.CUSTOM in the example below. This is achieved using a configuration YAML file, tcbuild.yml as default.

This is the recommended approach on production programming and on CI/CD (continuous integration / continuous development) pipelines.

To learn about TorizonCore Builder workflow and the different approaches to use the tool, with explanatory diagrams, please refer to the TorizonCore Builder - Workflow article.

It requires a Toradex Easy Installer image of TorizonCore (preferably without containers), torizon-core-docker-colibri-imx6-Tezi_5.3.0+build.7.tar in this case, as input. The splash screen image is passed as customization: splash-screen.

tcbuild.yaml
# Sample configuration file:
input:
easy-installer:
local: images/torizon-core-docker-colibri-imx6-Tezi_5.3.0+build.7.tar
#Sample customization: insert a Splash Screen
customization:
# >> Splash screen:
splash-screen: splash.png
output:
easy-installer:
local: torizon-core-docker-colibri-imx6-Tezi_5.3.0.CUSTOM

The file splash.png should be available before running the build command. A demo image can be downloaded by clicking on the link below:

Example Splash Screen Image

Build The Custom Toradex Easy Installer Image​

Build The Custom Image​

To generate the TorizonCore image, run the command below, in the same directory where the tcbuild.yaml file is:

$ torizoncore-builder build

...
1091 metadata, 12741 content objects imported; 412.2 MB content written
Pulling done.
Deploying OSTree with checksum 58629613a342197c31c5911d0874aac1b0fcb46b68a63f59760c03bacc4df08a
Deploying done.
Copy files not under OSTree control from original deployment.
Packing rootfs...
Packing rootfs done.

=>> Build command successfully executed!

In case of using a configuration file with a different name than tcbuild.yaml, run the command specifying the configuration file name:

$ torizoncore-builder build --file <configuration_file_name>

Deploy The Custom Toradex Easy Installer Image​

To deploy the custom Toradex Easy Installer image to the board, click on the link below and choose between the available options.

Deploy The Custom Toradex Easy Installer Image

The output image can be deployed in three ways to the board:

  • Using Toradex Easy Installer, the recommended method for production programming.
  • Directly on the board through SSH, the recommended method during development.
  • Through Torizon Platform Services server, the recommended method to perform updates on a device already deployed to the field.
info

Despite the recommendations, it is also possible to use a different method, using the Torizon Platform Services method during development for example.

To learn more about when to use each method, please refer to the Deployment Methods Comparison section of the TorizonCore Builder - Workflow article.

Toradex Easy Installer​

Toradex Easy Installer Tool allows users to install an image into the internal flash memory of Toradex modules in an extremely simple way.

Copy the output image into a USB stick and follow the steps in the Toradex Easy Installer article linked above. The copy of the output image can be done with the command below:

$ cp -a torizon-core-docker-colibri-imx6-Tezi_5.3.0.CUSTOM /media/user/myUSBstick

Where, in my case, /media/user/myUSBstick is the path to USB stick mount point and torizon-core-docker-colibri-imx6-Tezi_5.3.0.CUSTOM is the directory containing the custom Toradex Easy Installer image.

Directly, through SSH​

In this case, before deployment the output image needs to be unpacked, using the command below:

$ torizoncore-builder images unpack torizon-core-docker-colibri-imx6-Tezi_5.3.0.CUSTOM

Change the argument torizon-core-docker-colibri-imx6-Tezi_5.3.0.CUSTOM to the directory containing your custom Toradex Easy Installer image.

For more details on how this command works, please check the images unpack command in the commands manual.

To deploy it directly to the board, through SSH, use the command below:

$ torizoncore-builder deploy --remote-host 192.168.1.117 --remote-username torizon --remote-password torizon --reboot

For more details on how this command works, please check the deploy command in the commands manual.

Change the arguments --remote-host,--remote-username and --remote-password to your board IP Address, username and password, respectively.

tip

From TorizonCore Builder 3.1.0 after, the default value of --remote-username and --remote-password is torizon, so if the username or the password is torizon the argument can be omitted.

caution

This way does not support the deployment of the pre-provisioned containers.

Torizon Platform Services​

In this case, before deployment the output image needs to be unpacked, using the command below:

$ torizoncore-builder images unpack torizon-core-docker-colibri-imx6-Tezi_5.3.0.CUSTOM

Change the argument torizon-core-docker-colibri-imx6-Tezi_5.3.0.CUSTOM to the directory containing your custom Toradex Easy Installer image.

For more details on how this command works, please check the images unpack command in the commands manual.

To deploy it to the Torizon Platform Update Service, use the command below:

$ torizoncore-builder platform push --credentials credentials.zip --package-name base-package --package-version base-package-1.0 base

For more details on how this command works, please check the platform push command documentation in the Commands Manual.

caution

This way does not support the deployment of the pre-provisioned containers, so their Docker Compose file will need to be deployed separately in the server.

To deploy the image from the Torizon Platform Remote Update Service to the board, please follow the steps in the OTA Web Interface article.

To obtain credentials (credentials.zip file) and to obtain more information on how to sign and securely deploy a custom image using Torizon Platform Updates, check the Signing and pushing the image to Torizon OTA article.

Approach 2: Applying a Splash Screen to a Custom Image: Using Standalone Commands​

In this second approach, instead of using a configuration YAML file and a one-step command, the generation of the custom TorizonCore with the splash screen is done using standalone commands, each performing one step towards this generation.

This approach is especially useful when making incremental changes, generating multiple images with different splash screens (or other customizations like different device tree overlays). As you will see, applying a splash screen to an image of TorizonCore that has other customizations is just a matter of performing the apply, merge and deploy stages.

To learn about TorizonCore Builder workflow and the different approaches to use the tool, with explanatory diagrams, please refer to the TorizonCore Builder - Workflow article.

To generate a custom Toradex Easy Installer image with the splash screen follow the sequence of steps below.

Unpack an Input Image​

You just need to execute this once. Then, you are ready to apply multiple changes to the image. For example, in addition to applying a splash screen, you can also apply an external kernel module, a new device tree, among other possibilities.

If you have not unpacked an image yet, download a base TorizonCore image (preferably without containers) inside the TorizonCore Builder working directory, then run the command below to unpack it. In the example below the torizon-core-docker-colibri-imx6-Tezi_5.3.0+build.7.tar image is used as a reference:

$ torizoncore-builder images unpack torizon-core-docker-colibri-imx6-Tezi_5.3.0+build.7.tar

If you want to change the TorizonCore base image, download the new image and run the images unpack command again, passing the new image as the argument.

For more details about the images unpack command, please check the images unpack command in the commands manual.

Instead of using the images unpack you can use the images download command. This command checks which is the connected Toradex SoM, downloads the compatible latest quarterly release of a TorizonCore image without containers, and unpacks this image.

$ torizoncore-builder images download --remote-host 192.168.1.117 --remote-username torizon --remote-password torizon

Change the arguments --remote-host,--remote-username and --remote-password to your board IP Address, username and password, respectively.

For more details on how the images download command works, please check the images download command in the commands manual.

Apply The Splash Screen​

To apply the splash screen file, in this case splash.png, to the custom Toradex Easy Installer image, run the command below:

$ torizoncore-builder splash splash.png

/storage/splash/usr/share/plymouth/themes/spinner/
splash screen merged to initramfs

A demo splash.png image can be downloaded by clicking on the button below:

Example Splash Screen Image

For more details about the splash command, please check the spash command in the commands manual.

Merge Changes​

Merge the splash screen (as well as other customizations like an external kernel module or a new device tree) into the base Toradex Easy Installer image of TorizonCore - use whatever branch name you want.

As an example, to commit changes into a branch named custom-branch use the command below, accordingly with the TorizonCore Builder version:

$ torizoncore-builder union custom-branch

Applying changes from STORAGE/dt.
Commit 58629613a342197c31c5911d0874aac1b0fcb46b68a63f59760c03bacc4df08a has been generated for changes and is ready to be deployed.
caution

We recommend that you switch to the latest version of TorizonCore Builder to enjoy its simpler and more consistent user interface besides other improvements and bug fixes.

For more details about the union command, please check the union command in the commands manual.

Deploy The Custom Toradex Easy Installer Image​

To deploy the custom Toradex Easy Installer image to the board, click on the link below and choose between the available options.

Deploy The Custom Toradex Easy Installer Image

The output image can be deployed in three ways to the board:

  • Using Toradex Easy Installer, the recommended method for production programming.
  • Directly on the board through SSH, the recommended method during development.
  • Through Torizon Platform Services server, the recommended method to perform updates on a device already deployed to the field.
info

Despite the recommendations, it is also possible to use a different method, using the Torizon Platform Services method during development for example.

To learn more about when to use each method, please refer to the Deployment Methods Comparison section of the TorizonCore Builder - Workflow article.

However, the commands have differences in comparison to the deploy in Approach 1.

Toradex Easy Installer​

Toradex Easy Installer Tool allows users to install an image into the internal flash memory of Toradex modules in an extremely simple way.

First, to generate a Toradex Easy Installer image, into the output directory torizon-core-docker-colibri-imx6-Tezi_5.3.0.CUSTOM, use the command below:

$ torizoncore-builder deploy custom-branch --output-directory torizon-core-docker-colibri-imx6-Tezi_5.3.0.CUSTOM

Change the arguments custom-branch to the branch where you merged the changes (with the union command).

Copy the output image into a USB stick and follow the steps in the Toradex Easy Installer Tool article linked above. The copy of the output image can be done with the command below:

$ cp -a torizon-core-docker-colibri-imx6-Tezi_5.3.0.CUSTOM /media/user/myUSBstick

Where /media/user/myUSBstick is, in my case, the path to USB stick mount point.

Directly, through SSH​

To deploy it directly to the board, through SSH, use the command below:

$ torizoncore-builder deploy custom-branch --remote-host 192.168.1.117 --remote-username torizon --remote-password torizon --reboot

Change the arguments custom-branch, --remote-host,--remote-username and --remote-password to the branch where you merged the changes (with the union command), your board IP Address, username and password, respectively.

tip

From TorizonCore Builder 3.1.0 after, the default value of --remote-username and --remote-password is torizon, so if the username or the password is torizon the argument can be omitted.

For more details on how this command works, please check the deploy command in the commands manual.

caution

This way does not support the deployment of the pre-provisioned containers.

Torizon Platform Remote Update Service​

To deploy it to the Torizon Platform Remote Update Service, use the command below:

$ torizoncore-builder push --credentials credentials.zip custom-branch

Change the argument custom-branch to the branch where you merged the changes (with the union command).

caution

This way does not support the deployment of the pre-provisioned containers, so their Docker Compose file will need to be deployed separately in the server.

To deploy the image from the Torizon Platform Remote Update Service to the board, please follow the steps in the OTA Web Interface article.

To obtain credentials (credentials.zip file) and to obtain more information on how to sign and securely deploy a custom image using Over-the-Air (OTA) updates, check the Signing and pushing the image to Torizon OTA article.

For more details on how this command works, please check the push command in the commands manual.

Verifying The New Custom Image On The Device​

After rebooting, in your target device's terminal, verify that your new custom image of TorizonCore is active on the device with the command below:

# sudo ostree admin status

Password:
* torizon 58629613a342197c31c5911d0874aac1b0fcb46b68a63f59760c03bacc4df08a.0
Version: 5.3.0+build.7-tcbuilder.20211008140217
origin refspec: tcbuilder:58629613a342197c31c5911d0874aac1b0fcb46b68a63f59760c03bacc4df08a
torizon 36ad904617b170339b6ded7b9dce87ed8cf0f76473b897fdd832d91e82eb1ddc.0 (rollback)
Version: 5.3.0+build.7
origin refspec: tcbuilder:36ad904617b170339b6ded7b9dce87ed8cf0f76473b897fdd832d91e82eb1ddc

Where 58629613a342197c31c5911d0874aac1b0fcb46b68a63f59760c03bacc4df08a is the OSTree commit hash and should be the same as:

  • The one in the output of the union command in the case of the standalone commands
  • The one in the "Deploying OSTree with checksum ..." part of the output of the build command.
Send Feedback!