当前位置: 首页 > news >正文

玩转树莓派屏幕之五:自定义LCD屏幕显示

上一章节中已经完成了lvgl适配以及tslib的屏幕校准。自己要展示的内容还没有展示出来,还是使用玩转树莓派屏幕之二:自定义屏幕显示 中直接展示的文字,没有任何渲染。

lvgl中支持很多控件,屏幕展示的内容更加丰富。但是让自己去配置这些组件以及布局,搞不了搞不了。。。

还好现在有很多的GUI 设计工具可以使用。本次使用的是GUI Guider,也支持LVGL v9系列。不得不吐槽一下,lvgl不同系列代码api有很大变化,在网上的大部分教程在v9版本都不能适用。

一、使用Gui Guider设计GUI

  1. 选择新建 -> LVGL 9.2.1 -> 设备 simulator --> 模版为Empty UI,点击创建工程。
    image

  2. 工程名称自取,树莓派MHS色深选择16bit,屏幕选择480*320,点击创建
    image

  3. 界面介绍:

image

  1. 设计GUI界面:

image

  1. 点击模拟:

image

image

这也看不出来啥。。。。。

  1. 点击生成代码,选择C

image

  1. 查看生成文件:

    custom、generated是我们要的文件。

image

二、适配Gui Guider

3.1 目录移植

新建guider_gui目录,将生成的custom、generated放入其中。

├── CMakeLists.txt
├── LICENSE
├── Makefile
├── README.md
├── guider_gui
│   ├── custom
│   └── generated
├── lvgl
├── scripts
│   └── backend_conf.sh
├── src
│   ├── lib
│   ├── main.c
│   └── usr
├── toolchain.cmake
└── user_cross_compile_setup.cmake

3.2 配置CMake.txt

让项目编译过程中能够识别新增加的gui内容,需要配置CMake引入.c文件和.h文件。

# 包含 tslib 头文件(自动从 pkg-config 获取)
include_directories(${TSLIB_INCLUDE_DIRS})
link_directories(${TSLIB_LIBRARY_DIRS})# 重新生成了src/usr内容
#aux_source_directory(src/usr/)
include_directories(src/usr)
file(GLOB_RECURSE SRC_USR_ADD ${PROJECT_SOURCE_DIR}/src/usr/*.c)# 引入guider-gui生成内容
include_directories(${PROJECT_SOURCE_DIR}/guider_gui/generated)
include_directories(${PROJECT_SOURCE_DIR}/guider_gui/custom)
include_directories(${PROJECT_SOURCE_DIR}/guider_gui/generated/images)#aux_source_directory(${PROJECT_SOURCE_DIR}/guider_gui/custom/)
file(GLOB_RECURSE SRC_LVGL_GUIGUIDER ${PROJECT_SOURCE_DIR}/guider_gui/generated/*.c)
file(GLOB_RECURSE SRC_LVGL_IMG ${PROJECT_SOURCE_DIR}/guider_gui/generated/images/*.c${PROJECT_SOURCE_DIR}/guider_gui/generated/guider_fonts/*.c
)add_executable(lvglsim src/main.c ${LV_LINUX_SRC} ${LV_LINUX_BACKEND_SRC} ${SRC_LVGL_GUIGUIDER} ${SRC_USR_ADD}src/usr/NetTools.c ${SRC_LVGL_IMG})target_include_directories(lvglsim PRIVATE ${TSLIB_INCLUDE_DIRS})
target_link_libraries(lvglsim lvgl_linux lvgl PkgConfig::TSLIB dl pthread)

这里只放了新增的部分,其他使用的LVGL demo中自带的。具体其他细节可以看下面的github链接地址。

3.4 修改main文件

在src/main中引入头文件和定义,在while循环中定期去刷新屏幕内容,这里是设置了1s刷新一次。

#include "gui_guider.h"
lv_ui guider_ui;int main() {....setup_ui(&guider_ui);while (true){uint32_t start_tick = lv_tick_get();usleep(LVGL_TICK); /*Sleep for 5 millisecond*/lv_task_handler();lv_tick_inc(LVGL_TICK); /*Tell LVGL that 5 milliseconds were elapsed*/if (start_tick - last_update >= 1000) {// 每秒执行刷新动作}}
}

更改屏幕中的显示内容,可以通过直接设置label的text内容进行修改:

lv_label_set_text(guider_ui.screen_cpu_show_info, tempStr);

三、效果展示

Gui-Guider设置展示

image-20251007190202167

实物展示

image-20251007190226824

四、开源地址

已经将GuiGuider和LVGL的源码放到了github:

https://github.com/secoworld/RaspberryPi_LCD_Monitor

参考文档:

  • https://github.com/Temperature6/DevMonitor_for_Pis
http://www.hskmm.com/?act=detail&tid=26351

相关文章:

  • AtCoder ARC207 总结
  • 2025.10.7模拟赛
  • 详细介绍:ZLG ZCANPro,ECU刷新,bug分享
  • 好好学习, 天天向上
  • 2.洋葱开发法
  • OpenStack搭建
  • OpenStack实验过程
  • 2025.10.7+7
  • oppoR9m刷Linux系统:VCOM模式备份系统与基带IMEI/NVRAM/QCN
  • 两个开源中国象棋引擎的编译
  • 推荐一款Swift开发框架- Aquarius
  • 1.如何导入Aquarius开发框架
  • 课程作业(10月8日)
  • 帮宣——可控核聚变
  • 浅谈导数
  • 洛谷P5304 [GXOI/GZOI2019] 旅行者(二进制分类技巧)
  • 英语_阅读_AI Robot_待读
  • 【C++】AVL树的概念及完成(万字图文超详解)
  • 打造自主学习的AI Agent:强化学习+LangGraph代码示例
  • 关于二分
  • NKOJ全TJ计划——NP11721
  • 印度全球能力中心2030年展望与技术基建规划
  • NOI Linux 食用教程
  • 详细介绍:基于 Android 和 JBox2D 的简单小游戏
  • 基于深度学习的语音识别高效的系统设计与实现
  • CF2152H2 Victorious Coloring (Hard Version) 题解
  • 题解:P6162 [Cnoi2020] 四角链
  • 题解:P3301 [SDOI2013] 方程
  • # 20232321 2025-2026-1 《网络与系统攻防技术》实验一实验报告
  • 题解:CF1292E Rin and The Unknown Flower