企业官网建设流程全解析

serial-display-module图片显示完全教程：用show_pic快速切换屏幕图片ID

【免费下载链接】serial-display-module源师兄扩展项目: 串口屏模块 | 由源师兄组织创建项目地址: https://gitcode.com/yuanshixiong/serial-display-module

源师兄的 serial-display-module 串口屏模块，让你通过串口轻松控制外接显示屏，实现文字与图片显示。本文以图片显示为核心，手把手教你用show_pic函数快速切换屏幕图片 ID，只需两个参数、三步积木操作，新手也能一次点亮串口屏。

一、串口屏模块能做什么？

serial-display-module 是源师兄生态下的一个扩展模块，定位非常清晰：通过串口控制显示屏显示图片和文字（见模块配置 config.json）。

它支持两大常用场景：

整个模块文件结构一目了然：

serial-display-module/ ├── library/ │ └── screen_extend.py # 核心串口通信库（图片/文字/页面/按键） ├── blocksdef.js # 图形化积木块定义 ├── category.json # 积木分类与默认参数 └── config.json # 模块元信息

二、show_pic 怎么用？两个参数就搞定

show_pic的完整实现在核心库 screen_extend.py 中，函数签名只有两个参数：

show_pic(bid, pid)

• bid（控件ID）：屏幕上"图片显示控件"的位置编号，即图片显示在哪里
• pid（图片ID）：要显示的图片编号，即显示哪张图片

💡 简单理解：bid 管位置，pid 管内容。把 pid 换成另一个数字，图片就瞬间切换，这就是"快速切换屏幕图片"的全部秘密。

调用后模块会自动生成如下串口指令代码（来自积木代码生成器 blocksdef.js）：

from screen_extend import show_pic from screen_extend import SUART suart_1 = SUART(1) suart_1.write(show_pic(1, 1)) # 控件ID=1 显示图片ID=1

三、积木编辑器里 3 步配置图片显示

在积木分类"串口屏 → 基础"中，找到端口外接屏幕 | 控件ID → 显示图片ID积木（默认参数定义见 category.json）：

第 1 步：选择屏幕端口

下拉菜单可选 P1、P2、P5、P8、P11～P16 或"硬串口"，决定模块通过哪条串口与屏幕通信。

第 2 步：填写控件 ID

输入屏幕设计工具中图片显示控件的 ID 编号。

第 3 步：填写图片 ID

输入目标图片的 ID 编号，即可切换显示对应图片。

三个参数填齐后，串口屏就会按指令刷新出新图片 ✅

四、图片 ID 支持多大？ID 编码机制详解

细心的同学会发现 screen_extend.py 中定义了四组字节表pos_num_1 ~ pos_num_4：

• 第 1 组：0～9
• 第 2 组：10～19
• 第 3 组：20～29
• 第 4 组：30～40

⚠️ 也就是说，bid 和 pid 的有效范围是 0～40。超出这个范围，编号将无法正确编码，屏幕也不会响应——这是新手最容易踩的坑之一。

五、切换不同屏幕端口：SUART 软串口

如果屏幕没接在默认串口上，可以通过软串口切换。SUART函数定义见 screen_extend.py，其tx参数指定发送引脚（如SUART(8)表示 8 号脚发送），积木下拉菜单中的 P1～P16 选项正是对应不同引脚组合，按实际接线选择即可。

六、常见问题速查（FAQ）

七、延伸：和这些积木配合更好用

• 显示文字：show_text积木可在图片旁同步输出说明文本
• 页面跳转：go_to_page积木可在 N 秒后跳转到指定页面，实现图片轮播效果
• 按键检测：get_button_state、get_button_press_num等积木（见 screen_extend.py）可读取用户触摸操作，让图片显示互动起来

掌握show_pic(bid, pid)这两个参数，你就完成了串口屏图片显示的核心功。配合页面跳转与按键读取，一个简单的图文交互小屏就能快速搭建出来 🎉

【免费下载链接】serial-display-module源师兄扩展项目: 串口屏模块 | 由源师兄组织创建项目地址: https://gitcode.com/yuanshixiong/serial-display-module