SquareLine风扇显示(1)
217.3.16 SquareLine风扇显示(1)
本节只演示工程导入、Keil 编译后容量统计工具、成品硬件效果，以及 SquareLine 界面的前半段制作；视频结束时尚未导出或讲解 C 源码。配套工程里已经存在的 PWM、DHT11 和 UI 业务代码属于后续课程内容，因此本节不提前收录源码。
一、任务信息资源导图
本节以“温湿度风扇控制系统”为综合练习，任务可以分成四部分：
- 补充上一课略过的 SquareLine 旧工程导入方法；
- 给 Keil 工程配置编译后自动显示 Flash、RAM 占用率的小工具；
- 认识 DHT11、直流电机驱动板、LED、风扇与开发板之间的连接关系；
- 新建
21SQL_DHT11界面工程，完成顶部标题栏和第一个仪表盘的第一层圆弧。
本课只完成界面的第一阶段。第二个仪表盘、数值标签、按钮、滑块、导出代码和单片机业务逻辑都不属于本视频的操作范围。
任务的数据流可概括为：
DHT11 采集温湿度 → STM32 读取数据 → LVGL 更新两个仪表盘
风扇控制链路则是：
触摸滑块 → STM32 改变 PB5 的 PWM 占空比 → 电机驱动板给直流电机供电 → 风扇转速变化
这里必须区分“控制信号”和“负载电源”：PB5 只输出逻辑/PWM 信号，电机的工作电流由驱动板和外部电源提供，不能把电机直接接在 STM32 GPIO 上。
二、SquareLine Studio
上一课已经介绍过 SquareLine Studio 的基本操作，本节先补充已有工程的导入流程：
- 启动 SquareLine Studio，在启动页选择 Import Project；
- 定位到旧工程目录，选择工程文件
19sql_test.spj； - 等待工程载入后再继续编辑；
- 编辑过程中经常按
Ctrl+S保存，关闭软件前也要再保存一次。
原始笔记中的 “n port project”、scroll 和 .spg 都是识别错误，正确名称分别是 Import Project、SquareLine Studio 和 .spj。
.spj 是 SquareLine 的项目入口文件。导入时应选它，而不是选生成后的 .c 文件、图片资源或整个文件夹。
提醒：如果导入的是别人打包的工程，先确认素材路径和目标 LVGL 版本是否仍然有效。本课工程使用 LVGL 8.3.11，不能不经核对就按其他大版本的 API 或导出模板处理。
三、实验演示与硬件连线
3.1 小插件使用
本课使用的工具文件名是 Keil5_disp_size_bar.exe。它在 Keil 编译结束后读取构建结果，以进度条形式显示 Flash 和 RAM 的已用容量；它只是辅助查看工具，不会被烧录进单片机，也不会改变程序的存储占用。
课堂把上一工程复制成新的 Keil 工程，并命名为 22STM32_Lvgl_DHT11。编号 21 留给本节新建的 SquareLine 工程 21SQL_DHT11，因此这里从 20 跳到 22 并不是漏号。
配置步骤如下：
- 将
Keil5_disp_size_bar.exe复制到 Keil 工程目录； - 打开 Keil，点击工具栏中的“魔术棒”进入 Options for Target；
- 打开 User 页；
- 在 After Build/Rebuild 区域勾选第一个 Run 选项；
- 浏览并选择当前工程目录中的
Keil5_disp_size_bar.exe； - 重新编译工程，构建完成后工具会自动弹出统计结果。
课堂本次构建显示：
| 存储区 | 已用比例 | 已用/总量 | 剩余量 |
|---|---|---|---|
| RAM1 | 96.17% | 61.55 KB / 64.00 KB | 2512 B |
| FLASH1 | 36.22% | 185.45 KB / 512.00 KB | 334392 B |
原始笔记把这里统称为 “ROM” 不够准确：课堂工具窗口明确显示的是 FLASH1 和 RAM1。其中 RAM1 只剩约 2.45 KiB，余量已经很小，后续继续增加大数组、图片解码缓存或 LVGL 控件时要特别留意链接结果和运行时栈/堆空间。
如果工程目录被复制、移动或重命名，Keil 中保存的工具命令可能仍指向旧的绝对路径。此时应重新浏览并选择新目录中的 EXE，否则编译可以成功，但统计工具不会正常启动。
3.2 温湿度风扇实验
成品实验把温湿度显示、触摸输入、LED 和直流风扇组合到同一个 LVGL 界面中。视频先展示最终效果，再回到 SquareLine 从头制作界面。
3.2.1 电机驱动接线方式
视频口头把小红色电机驱动板称作 “L298N”，但画面中的板形、Type-C 接口以及“电源 2～10 V、输入信号 1.8～7 V”等标注，更符合常见的 MX1508 类双 H 桥小板，并不是通常所说的 ST L298/L298N 模块。实际接线必须以手中模块的丝印和规格为准，不能拿另一种 L298N 板的引脚图直接套用。
课堂只使用双路驱动板的 A 通道，经过视频画面、配套工程和引脚配置交叉核对后，接线如下：
| 模块/器件端子 | 连接位置 | 作用 |
|---|---|---|
驱动板电源 + / VCC | 外部 Type-C 电源正极 | 给电机功率级供电；课堂使用的是 5 V 类 USB 电源 |
驱动板电源 - / GND | 外部电源地，并与 STM32 GND 共地 | 建立 PWM 信号的共同电平参考 |
驱动板 IN1 | STM32 PB5 | 接收 TIM3_CH2 输出的 PWM，控制 A 路方向与平均功率 |
驱动板 IN2 | GND | 固定为低电平，使 A 路按单一方向受 IN1 控制 |
驱动板 MOTOR-A 两端 | 风扇直流电机的两根线 | 给电机输出 H 桥驱动电压 |
DHT11 VCC | STM32 3V3 | 给传感器供电 |
DHT11 DAT | STM32 PA8 | 单总线双向数据线 |
DHT11 GND | STM32 GND | 传感器地 |
两个重要纠错：
- 思维导图一处把
IN1标成了PB4，老师随后口头纠正为PB5；配套 STM32 工程也把 TIM3_CH2 重映射到 PB5，因此应以 PB5 为准。 - 原始笔记把 DHT11 数据脚写成
PE8，转写里又出现了P18。视频接线图和配套 DHT11 驱动均使用 PA8，因此正确引脚是 PA8。
电机两根线交换后仍能转动，只是旋转方向会相反，所以“无需区分正负”只表示不会因此失去转动能力，不表示极性完全没有影响。对于有固定风向或扇叶方向的风扇，应在断电后交换两根线，使风向正确。
还要注意以下硬件安全事项：
- STM32 GND、驱动板 GND 与外部电源负极必须共地，否则 PB5 的高低电平没有可靠参考，电机会失控或不动作；
- 电机启动电流和换向噪声较大，不要从普通 GPIO 直接供电；
- 外部电源电压必须同时满足电机和实际驱动板的规格，不能只因为接口是 Type-C 就接入任意快充电压；
- 接线或交换电机线前先断电，避免短路和反电动势造成异常；
- 若模块或电机发热明显、堵转或有异味，应立即断电检查。
当 IN2=0、IN1 输入 PWM 时，驱动板周期性地给电机加电。改变 PWM 占空比会改变一个周期内的平均驱动功率，从而改变转速。占空比太低时，平均功率可能不足以克服静摩擦，所以界面数值已经大于零，电机也可能暂时不启动；这属于直流电机的正常启动特性。
3.2.2 实验演示与硬件连线
最终演示界面包含以下功能：
- 左、右两个圆形仪表盘分别显示温度和湿度；
- 触摸 DHT11 后，人体温度和湿气会使测量值变化，仪表盘圆弧和中央数字随之更新；
- 触摸 LED 按钮，可以切换 PE5 上第二个板载 LED 的亮灭；
- 拖动滑块可以改变 PB5 的 PWM 占空比，从而改变风扇转速；
- PB5 同时连接到板载低电平点亮的 LED0，因此滑块变化时还能看到第一个 LED 的亮度变化。
风扇与 LED0 对同一 PWM 的视觉反应方向相反：
- PWM 高电平占比增大时，电机获得的平均功率增加，风扇更快；
- 板载 LED0 是低电平有效，高电平时间越长，LED 导通时间反而越短，因此逐渐变暗；
- PWM 接近满占空比时，风扇最快，而 LED0 几乎熄灭。
这里的 LED0 只是利用开发板现有连接观察 PWM，并不是电机驱动必需器件。PE5 上由按钮切换的另一个 LED 与风扇速度控制也是两条不同的控制链路，不要混为一谈。
3.2.3 界面制作
本项目的界面由多个基础控件叠加构成，而不是一张完整的仪表盘图片。Panel 负责分区，Arc 绘制圆环，Label 显示标题和数值，后续再加入按钮与滑块。这样做便于程序分别更新温度、湿度和风扇控制状态。
3.2.3.1 温湿度示例项目
本节的重点不是一次完成所有业务代码，而是熟悉从目标效果反推控件层级与样式参数的方法：
- 先确定屏幕整体背景和顶部标题栏；
- 再为每个仪表盘建立独立 Panel 容器；
- 在容器中逐层叠加 Arc、内部圆形和 Label；
- 界面完成后再导出代码，与 DHT11 采集和 PWM 控制逻辑连接。
采用容器的好处是，移动 Panel 时，其真正的子控件会一起移动，后续复制另一套温湿度仪表也更方便。Arc 若只是视觉上放在 Panel 上方、却没有进入其层级，移动 Panel 时就不会跟随，因此要通过左侧层级树确认父子关系。
3.2.3.2 界面制作过程
在 SquareLine Studio 启动页选择 Create，按课堂配置新建工程：
| 配置项 | 本课设置 | 说明 |
|---|---|---|
| Platform/Board | Desktop → Eclipse with SDL for development on PC | 课堂转写中的 “ellipse” 是 Eclipse 的识别错误 |
| 工程目录 | uint3code/21SQL_DHT11 | 先新建并进入该文件夹，再把它选为工程位置 |
| 工程文件 | 21sql_DHT11.spj | .spj 是 SquareLine 工程文件扩展名 |
| Resolution | 480 × 320 | 与目标 LCD 分辨率一致 |
| Rotation | 0° | 不在设计器中额外旋转 |
| Offset | X=0，Y=0 | 不设置显示偏移 |
| Shape | Rectangle | 屏幕为矩形 |
| Color depth | 16 bit swap | 从默认 32 bit 改为适合本项目显示配置的 16 位字节交换格式 |
| LVGL version | 8.3.11 | 与 STM32 工程使用的 LVGL 版本一致 |
| Theme | Light | 使用课堂所选主题 |
| Multilanguage | Disable | 本项目不启用多语言 |
确认路径和参数后点击 Create。尤其要在文件夹选择窗口中真正进入 21SQL_DHT11 再确认；若只选中上一级目录，项目文件会生成到错误位置。
“16 bit swap”表示 16 位颜色数据的两个字节按目标显示链路需要交换顺序，它不等于改变屏幕分辨率。若实际 LCD 驱动的字节序不同，应以显示驱动配置为准，否则常见现象是颜色异常。
四、界面制作
本节从空白 Screen1 开始，依次完成全局背景、顶部状态栏、标题 Label、第一个仪表盘容器和第一层 Arc。
4.1 背景颜色修改
选中左侧层级树中的 Screen1，在右侧 Style settings → Background 中将背景色改为：
#4B4B55
该颜色是偏灰的深色，作为整个 480×320 页面未被控件覆盖区域的底色。输入十六进制颜色时，# 后应有 6 位十六进制数字，不能把字母 B、数字 8 或 0 混淆。
4.2 添加顶层状态栏
从控件区加入一个 Panel，工程中对应 Panel1。设置如下：
| 属性 | 数值 |
|---|---|
| Width | 480 px |
| Height | 40 px |
| Align | TOP MID |
| Background color | #14191E |
TOP MID 表示相对父对象顶部居中：480 px 宽度正好覆盖整块屏幕，40 px 高度形成顶部标题栏。原始笔记中的 #141911 是识别错误，视频与工程中的正确值是 #14191E。
如果面板仍有主题默认的边框、圆角或内边距，界面可能与视频略有差异；本节操作重点是尺寸、对齐和背景色，后续可再按实际效果统一样式。
4.3 添加label
添加一个 Label，并把它移动到顶部状态栏的中央区域。课堂输入的文本是：
Temperature & Humility Control System
设置文字颜色为 #FFFFFF，字体选择 Montserrat 18。#FFFFFF 是白色，#000000 才是黑色；原笔记把“全 F”和“全 0”的含义写混了。
课堂文本中的 Humility 意为“谦逊”，从项目含义看应当写成 Humidity（湿度）。若要求完全复现视频，就保留 Temperature & Humility Control System；若制作正式界面，建议改为：
Temperature & Humidity Control System
视频中的层级树显示 Label 与 Panel1 都直接位于 Screen1 下方，Label 只是被手动摆到 Panel 的视觉中央，并没有明确成为 Panel 的子对象。因此：
- 按课堂复现时，可保持二者为同级并手动对齐；
- 若希望标题随 Panel 一起移动，可以把 Label 设为 Panel 的子对象，但要重新核对相对坐标和裁剪效果。
4.4 添加第一个仪表盘
再添加一个 Panel 作为第一个仪表盘的容器，工程中对应 Panel2：
| 属性 | 数值 |
|---|---|
| Width | 180 px |
| Height | 180 px |
| Background color | #4B4B55 |
| 位置 | 页面左半区，为右侧第二个仪表盘预留空间 |
Panel 本身是方形容器，之后会在其中叠加多个圆形控件。把它设成与屏幕相同的背景色，可以弱化容器边界，让观众主要看到内部仪表盘。
调整属性前要先在画布或层级树中选中 Panel2。如果误选 Screen1 或后面的 Arc，修改会作用到错误对象，这是可视化编辑时最常见的问题之一。
4.5 仪表盘内添加arc
从控件区添加 Arc。为了让它真正成为 Panel2 的子对象，应在左侧层级树中把 Arc 拖到 Panel2 名称上，看到层级缩进后再释放；仅在画布上把两个控件重叠，并不能保证父子关系正确。
第一层 Arc 的基础参数为：
| 属性 | 数值 |
|---|---|
| Width | 150 px |
| Height | 150 px |
| Align | CENTER，相对 Panel2 居中 |
| Background radius | 150 px |
| Background color | #1E232D |
| Padding left/right/top | 6 px |
| Padding bottom | 0 px，课堂未修改 |
| Background arc color | #000000 |
这里有三个容易误解的概念：
- Background radius 是控件矩形背景的圆角半径，不是 Arc 圆环的几何半径。150×150 的方形背景在圆角值足够大时会显示成圆形。
- Padding 是内容与控件边界之间的内边距。课堂把 left、right、top 设为 6 px，原始笔记中的 “pending” 是 OCR 错误。
- Arc 通常包含背景轨道、指示弧和旋钮等部分。本节末尾改成
#000000的是背景圆弧轨道；彩色指示弧仍保留当前样式，不能把二者当成同一个颜色属性。
课堂视频就在设置第一层 Arc 的黑色背景轨道后结束。本课完成状态应当是：顶部标题栏已经出现，左侧存在一个 180×180 的仪表盘容器，其中居中放置了 150×150 的第一层 Arc。第二个仪表盘和其余内部控件留到下一课继续制作。
4.6 本课核对清单
- SquareLine 旧工程入口扩展名为
.spj，不是.spg； - 新界面工程目录是
21SQL_DHT11，Keil 演示工程是22STM32_Lvgl_DHT11； - DHT11 数据脚为 PA8；
- 电机 PWM 控制脚为 PB5，驱动板、外部电源与 STM32 必须共地；
- 顶栏颜色为
#14191E，不是#141911； - Label 字体为 Montserrat 18，课堂英文里的
Humility是拼写/用词问题； Panel2为 180×180，第一层 Arc 为 150×150；- Arc 的 Background radius 为 150，left/right/top padding 为 6，背景轨道为黑色；
- 本课未导出、调用或讲解任何 C 源码。