<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom" xmlns:dc="http://purl.org/dc/elements/1.1/">
  <channel>
    <title>DEV Community: Makame Makame</title>
    <description>The latest articles on DEV Community by Makame Makame (@makame).</description>
    <link>https://dev.to/makame</link>
    <image>
      <url>https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https:%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F914159%2F63434ae9-608b-42f9-b55b-e079808377ad.png</url>
      <title>DEV Community: Makame Makame</title>
      <link>https://dev.to/makame</link>
    </image>
    <atom:link rel="self" type="application/rss+xml" href="https://dev.to/feed/makame"/>
    <language>en</language>
    <item>
      <title>Customize boot splash screen in Yocto</title>
      <dc:creator>Makame Makame</dc:creator>
      <pubDate>Tue, 23 Aug 2022 21:06:00 +0000</pubDate>
      <link>https://dev.to/makame/customize-boot-splash-screen-in-yocto-3bip</link>
      <guid>https://dev.to/makame/customize-boot-splash-screen-in-yocto-3bip</guid>
      <description>&lt;p&gt;My first wish as beginner in Yocto, once I managed to build my  first Linux image, was to to replace the Yocto logo on the boot splash  screen with my own logo. From this seemingly simple task I managed to learn a lot about Bitbake.&lt;/p&gt;

&lt;p&gt;The default Yocto splash screen is rendered with the help of a recipe called &lt;em&gt;psplash&lt;/em&gt;. This recipe is included in the Poky source directory and located at &lt;code&gt;meta/recipes-core/psplash&lt;/code&gt;.&lt;/p&gt;

&lt;p&gt;The rendered Yocto logo image is located in &lt;code&gt;meta/recipes-core/psplash/files/psplash-poky-img.h&lt;/code&gt; in as a header file.&lt;/p&gt;

&lt;p&gt;There are several ways to change the psplash logo. The following are some of them:&lt;/p&gt;

&lt;h3&gt;
  
  
  1. Replace the psplash-poky-img.h with a .png file
&lt;/h3&gt;

&lt;p&gt;You can achieve this by replacing the &lt;code&gt;psplash-poky-img.h&lt;/code&gt; image header file in the &lt;code&gt;files&lt;/code&gt; directory with a logo in &lt;strong&gt;png&lt;/strong&gt; format. Then add your logo path to the &lt;a href="https://docs.yoctoproject.org/ref-manual/variables.html?highlight=src_uri#term-SRC_URI"&gt;&lt;strong&gt;SRC_URI&lt;/strong&gt;&lt;/a&gt; through the &lt;strong&gt;SPLASH_IMAGES&lt;/strong&gt; by changing the variable assignment:&lt;/p&gt;

&lt;p&gt;From&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;SPLASH_IMAGES = "file://psplash-poky-img.h;outsuffix=default"
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;to&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;SPLASH_IMAGES = "file://my-logo-image.png;outsuffix=default"
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;&lt;em&gt;assuming that your image is named my-logo-image.png in this case&lt;/em&gt;.&lt;/p&gt;

&lt;p&gt;When the image is baked, the new logo will be added to the boot splash screen.&lt;/p&gt;

&lt;blockquote&gt;
&lt;p&gt;This approach is very simple, but the drawback is that the modifications are done in the Poky original source files which is not a good approach.&lt;/p&gt;
&lt;/blockquote&gt;

&lt;h3&gt;
  
  
  2. Create a recipe to extend psplash
&lt;/h3&gt;

&lt;p&gt;The proper alternative is to create a new recipe that will append the same changes mentioned in the first approach above using &lt;code&gt;.bbappend&lt;/code&gt; file.&lt;/p&gt;

&lt;p&gt;The recipe will include a &lt;code&gt;psplash_%.bbappend&lt;/code&gt; which in this case will contain&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;SPLASH_IMAGES:forcevariable = "file://my-logo-image.png;outsuffix=default"
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;blockquote&gt;
&lt;p&gt;&lt;strong&gt;:forcevariable&lt;/strong&gt; is important to prevent machine specific overrides from overriding your logo such as in case of raspberry pi layers.&lt;/p&gt;
&lt;/blockquote&gt;

&lt;p&gt;Furthermore, the logo image is placed in the &lt;code&gt;files&lt;/code&gt; directory located in the same folder as the &lt;code&gt;psplash_%.bbappend&lt;/code&gt; file. The files directory is then included to psplash's SRC_URI paths by adding the following line in the &lt;code&gt;psplash_%.bbappend&lt;/code&gt; file.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;FILESEXTRAPATHS:prepend := "${THISDIR}/files:"
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;blockquote&gt;
&lt;p&gt;Do not forget to make the layer containing this recipe with higher priority (using &lt;a href="https://docs.yoctoproject.org/ref-manual/variables.html?highlight=src_uri#term-BBFILE_PRIORITY"&gt;BBFILE_PRIORITY&lt;/a&gt; variable) than any other layer providing or overriding the psplash recipe.&lt;/p&gt;
&lt;/blockquote&gt;

&lt;h3&gt;
  
  
  3. meta-splash
&lt;/h3&gt;

&lt;p&gt;&lt;a href="https://github.com/hamzamac/meta-splash"&gt;meta-splash&lt;/a&gt; is a layer created using the second approach.&lt;/p&gt;

&lt;p&gt;Using &lt;a href="https://github.com/hamzamac/meta-splash"&gt;meta-splash&lt;/a&gt; all you need to do is:&lt;/p&gt;

&lt;ol&gt;
&lt;li&gt;&lt;p&gt;Clone &lt;a href="https://github.com/hamzamac/meta-splash"&gt;meta-splash&lt;/a&gt; layer in your Poky project: &lt;code&gt;git clone https://github.com/hamzamac/meta-splash.git&lt;/code&gt;&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;Replace the default logo.png image in &lt;code&gt;meta-splash/recipes-core/psplash/files&lt;/code&gt; with your logo image with name logo.png (the name can be customized in customize.bb)&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;Bake your image&lt;/p&gt;&lt;/li&gt;
&lt;/ol&gt;

&lt;p&gt;That is all&lt;/p&gt;

&lt;p&gt;To customize the colors and progress bar, check the meta-splash's &lt;a href="https://github.com/hamzamac/meta-splash"&gt;README&lt;/a&gt;&lt;/p&gt;

</description>
      <category>psplash</category>
      <category>yocto</category>
      <category>bitbake</category>
      <category>linux</category>
    </item>
  </channel>
</rss>
