技术贴|如何在ELF 2开发板中实现自定义开机动画原创

发布时间:2025-07-24 11:19:16
ELF2开发板 RK3588 静态logo 动态动画

在嵌入式Linux系统的启动过程中,默认的文本启动日志往往缺乏良好的用户体验。为了提升设备启动时的视觉效果,可以通过psplash工具实现图形化开机动画,支持静态logo或动态动画显示。

 

psplash是一个轻量级的启动屏幕程序,专为嵌入式Linux系统设计,具有以下核心特性:

  • 轻量高效:专为嵌入式设备设计,资源占用极低。

  • 图形化支持:支持静态图片或动态帧动画(通过快速切换连续图片实现)。

  • 高度可定制:可配置启动图像、进度条样式、显示时间等参数。

  • 跨平台兼容:支持多种嵌入式Linux发行版和硬件平台。

 

注:本次在ELF 2开发板上主要验证静态图片显示和动态logo动画功能,进度条功能暂未测试。

 

下面将详细介绍如何在ELF 2开发板Buildroot系统中配置psplash,实现自定义开机动画。

 

一、图片制作

1、创建工程文件夹

首先,我们需要在虚拟机中创建一个文件夹来保存相关工程文件。打开终端,执行以下命令:

elf@ubuntu:~mkdir -p psplash_logo/mp4_logo/

 

接着,将源码中的logo.mp4视频拷贝到刚刚创建的mp4_logo文件夹中。

 

2、安装FFmpeg

为了后续处理MP4视频,需要安装FFmpeg,在终端中执行以下命令:

elf@ubuntu:~cd psplash_logo/mp4_logo/elf@ubuntu:~/psplash_logo/mp4_logosudo apt-get updateelf@ubuntu:~/psplash_logo/mp4_logosudo apt-get install ffmpeg

 

3、创建图片存储文件夹

创建一个名为part0的文件夹,用于存储后续生成的图片:

elf@ubuntu:~/psplash_logo/mp4_logomkdir part0

 

4、 提取视频帧为图片

使用FFmpeg将视频文件logo.mp4按每秒7帧(7fps)的速率提取为一系列连续的PNG图片,并保存到part0/目录下。执行以下命令:

elf@ubuntu:~/psplash_logo/mp4_logoffmpeg -i logo.mp4 -f image2 -r 7 part0/%04d.png

 

5、查看生成的图片

执行以下命令查看part0文件夹中的图片内容:

elf@ubuntu:~/psplash_logo/mp4_logo$ ls part0/0001.png  0004.png  0007.png  0010.png  0013.png  0016.png  0019.png  0022.png  0025.png  0028.png  0031.png  0034.png  0037.png  0040.png  0043.png  0046.png  0049.png  0052.png0002.png  0005.png  0008.png  0011.png  0014.png  0017.png  0020.png  0023.png  0026.png  0029.png  0032.png  0035.png  0038.png  0041.png  0044.png  0047.png  0050.png  0053.png0003.png  0006.png  0009.png  0012.png  0015.png  0018.png  0021.png  0024.png  0027.png  0030.png  0033.png  0036.png  0039.png  0042.png  0045.png  0048.png  0051.png  0054.png

 

二、图片转换

1、检查图片分辨率

在将图片转换为.h文件之前,需要确保图片分辨率与屏幕分辨率一致。使用以下命令查看图片分辨率:

elf@ubuntu:~/psplash_logo/mp4_logofile part0/0001.png part0/0001.png: PNG image data, 640 x 3608-bit/color RGB, non-interlaced

可以看到图片分辨率是640x360,本次测试使用的是飞凌7寸MIPI屏,分辨率为1024x600,因此需要对图片进行分辨率转换。

 

2、创建相关文件夹

创建logo_h文件夹,并在其中分别创建h、logo_1024x600、master三个文件夹:

elf@ubuntu:~/psplash_logo/mp4_logomkdir logo_helf@ubuntu:~/psplash_logo/mp4_logocd logo_h/elf@ubuntu:~/psplash_logo/mp4_logo/logo_hmkdir h logo_1024x600 master

 

3、拷贝图片到master文件夹

将part0文件夹下的所有PNG格式的图片拷贝到master文件夹中备用:

elf@ubuntu:~/psplash_logo/logo_hcp ../part0/* ./master/

 

4、创建分辨率转换脚本

在master文件夹中创建fix_1024x600.sh脚本,用于进行分辨率转换。执行以下命令创建脚本:

elf@ubuntu:~/psplash_logo/mp4_logo/logo_hcd master/elf@ubuntu:~/psplash_logo/mp4_logo/logo_h/mastervi fix_1024x600.sh

 

脚本内容如下:

#!/bin/bashfor img in *.png; do        convert "$img" -resize 1024x600! "../logo_1024x600/$img"done

 

5、赋予脚本可执行权限

执行以下命令赋予脚本可执行权限:

elf@ubuntu:~/psplash_logo/logo_h/masterchmod +x fix_1024x600.sh

 

6、执行脚本

执行脚本进行分辨率转换:

elf@ubuntu:~/psplash_logo/logo_h/master./fix_1024x600.sh

 

7、验证转换结果

执行完毕后,使用以下命令查看logo_1024x600文件夹下转换好的图片文件的分辨率:

elf@ubuntu:~/psplash_logo/mp4_logo/logo_h/masterfile ../logo_1024x600/0001.png../logo_1024x600/0001.png: PNG image data, 1024 x 6008-bit/color RGB, non-interlaced

 

8、创建生成.h文件的脚本

在h文件夹中新建make-image-header.sh脚本,用于将图片转换为.h文件。执行以下命令创建脚本:

elf@ubuntu:~/psplash_logo/mp4_logo/logo_h/mastercd ../h/elf@ubuntu:~/psplash_logo/mp4_logo/logo_h/hvi make-image-header.sh

 

脚本内容如下:

#!/bin/sh# 指定图片目录和名称前缀img_dir="$1"name_prefix="$2"# 检查目录是否存在if [ ! -d "$img_dir" ]; then  echo "目录 $img_dir 不存在"  exit 1fii=0# 遍历目录中的所有 PNG 文件for img in "$img_dir"/*.png; do  # 检查是否找到了 PNG 文件  if [ ! -e "$img" ]; then    echo "没有找到 PNG 文件"    break  fi  imageh=`basename "$img" .png`-img.h#  name="${name_prefix}_${imageh}"        name="${name_prefix}_$(printf "%01d" "$i")_IMG"  # 生成 C 头文件  gdk-pixbuf-csource --macros "$img" > "$imageh.tmp"  sed -e "s/MY_PIXBUF/${name}/g" -e "s/guint8/uint8/g" "$imageh.tmp" > "$imageh" && rm "$imageh.tmp"  i=$(expr $i + 1)  echo "生成了 $imageh"done

 

9、赋予脚本可执行权限

执行以下命令赋予脚本可执行权限:

elf@ubuntu:~/psplash_logo/logo_h/hchmod +x make-image-header.sh

 

10、执行脚本

执行脚本将图片转换为.h文件:

elf@ubuntu:~/psplash_logo/logo_h/h./make-image-header.sh ../logo_1024x600 POKY生成了 0001-img.h生成了 0002-img.h生成了 0003-img.h生成了 0004-img.h生成了 0005-img.h生成了 0006-img.h生成了 0007-img.h生成了 0008-img.h生成了 0009-img.h生成了 0010-img.h生成了 0011-img.h生成了 0012-img.h.........

 

三、psplash源码修改

1、拷贝并解压psplash源码

请自行将psplash源码拷贝到psplash_logo/文件夹中并解压。

elf@ubuntu:~/psplash_logolsmp4_logo  psplash.zipelf@ubuntu:~/psplash_logounzip psplash.zip

 

2、修改Makefile文件

修改Makefile文件,将CC变量修改为ELF 2开发板上使用的交叉编译器。打开 Makefile文件,修改内容如下:

AUTOMAKE = ${SHELL} /home/wonhere/zhangqi/OMAP3530/psplash/missing --run automake-1.11AWK = gawk#CC = arm-none-linux-gnueabi-gccCC = /home/elf/aarch64-buildroot-linux-gnu_sdk-buildroot/bin/aarch64-linux-gccCCDEPMODE = depmode=gcc3CFLAGS = -g -O2CPP = arm-none-linux-gnueabi-gcc -E

 

3、创建logo文件夹并拷贝.h文件

创建logo文件夹,并将h文件夹中的*-img.h文件都拷贝到logo文件夹中:

elf@ubuntu:~/psplash_logomkdir logoelf@ubuntu:~/psplash_logocp mp4_logo/logo_h/h/* logo/

 

4、在psplash.c文件中添加引用

在psplash.c文件中添加对.h文件的引用:

#include "logo/0001-img.h"#include "logo/0002-img.h"#include "logo/0003-img.h"。。。。。。。。。#include "logo/0047-img.h"#include "logo/0048-img.h"#include "logo/0049-img.h"#include "logo/0050-img.h"#include "logo/0051-img.h"#include "logo/0052-img.h"#include "logo/0053-img.h"#include "logo/0054-img.h"

 

5、添加宏定义

添加宏定义,方便后续编写参数:

#define IMG_WIDTH(x) POKY_##x##_IMG_WIDTH#define IMG_HEIGHT(x) POKY_##x##_IMG_HEIGHT#define IMG_BYTES_PER_PIXEL(x) POKY_##x##_IMG_BYTES_PER_PIXEL#define IMG_RLE_PIXEL_DATA(x) POKY_##x##_IMG_RLE_PIXEL_DATA

 

6、在main函数中添加代码

在main函数中添加如下内容,用于绘制图片:

/* Draw the Myir logo  *//*   psplash_fb_draw_image (fb,                          (fb->width  - POKY_IMG_WIDTH)/2,                          ((fb->height * 5) / 6 - POKY_IMG_HEIGHT)/2,                         POKY_IMG_WIDTH,                         POKY_IMG_HEIGHT,                         POKY_IMG_BYTES_PER_PIXEL,                         POKY_IMG_RLE_PIXEL_DATA);*/       psplash_fb_draw_image (fb, (fb->width  - IMG_WIDTH(0))/2, (fb->height - IMG_HEIGHT(0))/2,IMG_WIDTH(0),IMG_HEIGHT(0),IMG_BYTES_PER_PIXEL(0),IMG_RLE_PIXEL_DATA(0));    usleep(50000);。。。。。。。。。        psplash_fb_draw_image (fb, (fb->width  - IMG_WIDTH(0))/2, (fb->height - IMG_HEIGHT(0))/2,IMG_WIDTH(0),IMG_HEIGHT(0),IMG_BYTES_PER_PIXEL(0),IMG_RLE_PIXEL_DATA(50));        usleep(50000);        psplash_fb_draw_image (fb, (fb->width  - IMG_WIDTH(0))/2, (fb->height - IMG_HEIGHT(0))/2,IMG_WIDTH(0),IMG_HEIGHT(0),IMG_BYTES_PER_PIXEL(0),IMG_RLE_PIXEL_DATA(51));        usleep(50000);        psplash_fb_draw_image (fb, (fb->width  - IMG_WIDTH(0))/2, (fb->height - IMG_HEIGHT(0))/2,IMG_WIDTH(0),IMG_HEIGHT(0),IMG_BYTES_PER_PIXEL(0),IMG_RLE_PIXEL_DATA(52));        usleep(50000);        psplash_fb_draw_image (fb, (fb->width  - IMG_WIDTH(0))/2, (fb->height - IMG_HEIGHT(0))/2,IMG_WIDTH(0),IMG_HEIGHT(0),IMG_BYTES_PER_PIXEL(0),IMG_RLE_PIXEL_DATA(53));        usleep(50000);

这里的IMG_WIDTH表示宽度,IMG_HEIGHT表示高度,IMG_BYTES_PER_PIXEL表示像素格式,IMG_RLE_PIXEL_DATA表示图片数据。由于宽度、高度和像素格式都相同,因此使用相同的参数,仅修改IMG_RLE_PIXEL_DATA图片数据的参数。

 

7、编译源码

执行以下命令进行编译:

elf@ubuntu:~/psplash_logomake

编译成功后,会在psplash_logo文件夹下生成psplash和psplash-write文件。将这两个文件通过U盘拷贝到ELF 2 开发板的/usr/bin/目录。

 

四、Linux系统配置

1、创建启动脚

在ELF 2 开发板的/etc/init.d/目录下新建S50weston_psplash脚本:

root@elf2-buildroot:~# vi /etc/init.d/S50weston_psplash

 

2、编写脚本内容

脚本内容如下:

#!/bin/sh### BEGIN INIT INFO# Provides:             psplash# Required-Start:# Required-Stop:# Default-Start:        S# Default-Stop:### END INIT INFOsleep 1/etc/init.d/S49weston stopcase "$1" in    start)        echo "Starting psplash..."        export TMPDIR=/mnt/.psplash        mkdir -p $TMPDIR        mount tmpfs -t tmpfs $TMPDIR -o,size=2M        rotation=0        if [ -e /etc/rotation ]; then            read rotation < /etc/rotation        fi        /usr/bin/psplash --angle $rotation &        ;;    stop)        echo "Stopping psplash..."        killall psplash        umount $TMPDIR        rmdir $TMPDIR        ;;    *)        echo "Usage: \$0 {start|stop}"        exit 1        ;;esacsleep 6pkill psplash/etc/init.d/S49weston start/etc/init.d/S50matrix-browser startexit 0

 

3、赋予脚本可执行权限

执行以下命令赋予脚本可执行权限:

root@elf2-buildroot:~# chmod +/etc/init.d/S50weston_psplash

 

4、注意事项

sleep 6这里要根据实际的播放时间进行配置。建议在动画播放到最后放一张黑色背景的图片,以防关机时看到最底层的动态logo图片。

 

五、验证效果

配置完成后,保存并重启开发板,即可看到自定义的开机动画。

 

其它推荐:

推荐阅读:

/* 53客服*/ /* 百度统计*/ /* 百度站长*/