Arduino实战进阶 -- 基于U8g2库的OLED中文动态菜单（IIC）

1. 从静态显示到动态菜单为什么我们需要一个交互界面如果你已经跟着网上的教程成功地在你的Arduino和那块小小的OLED屏幕上点亮了“你好世界”恭喜你你已经迈出了第一步但不知道你有没有和我一样的想法看着屏幕上那几行固定不变的文字总觉得有点……“呆板”。我们做硬件项目尤其是智能设备最终是要和人打交道的。一个温湿度计总不能每次都重新烧录代码来切换显示温度还是湿度吧一个音乐播放器总得有个菜单让我们选歌、调音量吧这就是我们今天要解决的问题。静态显示只是“展示”而动态菜单才是“交互”。想象一下你手头有一个用Arduino做的小型环境监测站你希望通过一个旋转编码器或者几个按键就能在屏幕上流畅地切换查看温度、湿度、气压、历史数据曲线甚至进行一些设置比如报警阈值。这个在屏幕上能上下滚动、有焦点反馈、能确认选择的列表就是我们说的“动态菜单”。它让我们的项目瞬间从“实验台玩具”升级为“可用的产品原型”用户体验的提升不是一星半点。而实现这一切U8g2库是我们的得力助手。相比早期的U8glibU8g2功能更强大对中文的支持也更友好内置了部分中文字体文档和社区资源也更丰富。它提供了丰富的绘图和字体API让我们能够以像素级的精度控制屏幕上的每一个点。基于它来构建菜单系统就像是有了强大的画笔和画布剩下的就是如何设计画面的逻辑了。我刚开始折腾这个的时候也走了不少弯路比如菜单状态管理混乱、刷新闪烁、操作不跟手等等。今天我就把这些年踩过的坑和总结的经验打包成一个清晰、可复用的解决方案手把手带你实现一个丝滑的中文动态菜单。2. 硬件准备与U8g2库的深度配置工欲善其事必先利其器。我们先来清点一下需要的家伙什儿并确保软件环境配置到位。2.1 硬件清单与连接这次项目我们需要以下几样核心硬件Arduino开发板一块。UNO、Nano、ESP8266、ESP32都可以我后面代码会以Arduino UNO为例其他板子引脚调整一下即可。OLED显示屏IIC接口一块。最常见的就是0.96寸或1.3寸的128x64分辨率OLED芯片通常是SSD1306。请务必确认你的模块是IICI2C接口的通常只有4个引脚VCC、GND、SDA、SCL。输入设备用于菜单交互。这里我强烈推荐使用一个旋转编码器它集成了旋转用于上下浏览和按下用于确认两种操作手感好成本低。如果手头没有用三个独立的按键上、下、确认也可以。杜邦线若干。接线非常简单遵循I2C的标准接法OLED VCC- Arduino5V(如果OLED是3.3V逻辑则接3.3V)OLED GND- ArduinoGNDOLED SDA- ArduinoA4(UNO的I2C SDA引脚)OLED SCL- ArduinoA5(UNO的I2C SCL引脚)对于旋转编码器通常有5个引脚VCC、GND、SW按键、DTB相、CLKA相。接线如下编码器 VCC- Arduino5V编码器 GND- ArduinoGND编码器 SW- Arduino引脚2(接外部中断引脚用于检测按下)编码器 DT- Arduino引脚3(接外部中断引脚用于检测旋转)编码器 CLK- Arduino引脚4(用于判断旋转方向)注意使用外部中断可以获得非常即时、不丢步的检测效果这对于菜单操作的跟手感至关重要。如果你使用的开发板不同请查阅其对应的外部中断引脚编号。2.2 U8g2库的安装与中文字体选择打开Arduino IDE点击“工具” - “管理库…”在搜索框中输入“U8g2”找到由olikraus提供的U8g2库点击安装。这个库体积不小因为它包含了全球上百种字体安装需要一点时间。安装成功后我们就可以在代码中引入它了#include U8g2lib.h。对于I2C接口的SSD1306 128x64屏幕初始化对象通常这样写U8G2_SSD1306_128X64_NONAME_F_HW_I2C u8g2(U8G2_R0, /* reset*/ U8X8_PIN_NONE);这里U8G2_R0表示屏幕不旋转U8X8_PIN_NONE表示我们的模块没有复位引脚大部分廉价模块都没有。核心挑战中文显示。U8g2库内置了许多西方字体但中文字体需要单独处理。有两种主流方法使用内置的有限中文字体U8g2自带了一些包含常用汉字的小字体集例如u8g2_font_wqy12_t_gb2312、u8g2_font_gb16st_t_2等。这些字体包含的汉字数量有限几百个但对于简单的菜单如“设置”、“返回”、“温度”、“开关”通常够用。优点是使用方便不占太多内存。自定义字库取模当内置字体没有你需要的字或者你需要特定大小的字体时就需要自己取模。方法和原始文章里类似使用PCtoLCD2002等软件将需要的汉字生成点阵数组。但这里有个重要技巧为了菜单的灵活性我们不应该为每个菜单项单独取模而是应该预先取好所有可能用到的汉字统一放在一个头文件如myFont.h里。每个汉字对应一个数组然后在代码里用数组名调用。虽然稍显繁琐但这是最可控、最兼容的方法。在我的项目里如果菜单文字不多我倾向于先用内置字体试试。如果不够再为缺少的个别字进行自定义取模补充。在setup()函数中使用u8g2.setFont()来设置字体。3. 设计一个可扩展的菜单数据结构这是整个动态菜单系统的“大脑”。一个糟糕的数据结构会让后面的代码变得难以维护和扩展。经过多次迭代我总结出一种清晰、好用的设计模式。菜单的本质是一个树状结构。有主菜单、子菜单、菜单项。每个节点菜单项都需要一些属性来描述它显示什么文字、它有什么动作是进入子菜单还是执行一个函数、它的子节点是谁、它的兄弟节点是谁等等。我们可以用一个结构体struct来定义菜单项struct MenuItem { const char* name; // 菜单项显示的文字 void (*action)(); // 选择该项后执行的函数指针如果为NULL则表示有子菜单 MenuItem* child; // 指向子菜单首项的指针 MenuItem* parent; // 指向父菜单的指针 MenuItem* next; // 指向同级下一个菜单项的指针 MenuItem* prev; // 指向同级上一个菜单项的指针 };这个结构体包含了菜单导航所需的所有信息。action是一个函数指针这是一个关键技巧。如果这个菜单项是最终的动作比如“打开LED”那么action就指向一个具体的函数。如果这个菜单项是进入一个子菜单比如“系统设置”那么action设为NULL我们通过判断action是否为NULL来决定是执行动作还是进入child指向的子菜单列表。接下来我们需要手动定义出整个菜单树。假设我们要做一个智能家居控制器的菜单结构如下主菜单状态查看温度湿度设备控制LED开关风扇调速系统设置亮度调节关于我们需要先为每个最终的动作编写函数void showTemperature() { /* 读取并显示温度传感器数据 */ } void showHumidity() { /* ... */ } void toggleLED() { /* ... */ } void setFanSpeed() { /* ... */ } void adjustBrightness() { /* ... */ } void showAbout() { /* ... */ }然后自底向上地定义菜单项数组。注意我们需要用取地址运算符来构建它们之间的指针关系// 第三级菜单项叶子节点有动作无子菜单 MenuItem menu_temp {温度, showTemperature, NULL, NULL, NULL, NULL}; MenuItem menu_humi {湿度, showHumidity, NULL, NULL, NULL, NULL}; MenuItem menu_led {LED开关, toggleLED, NULL, NULL, NULL, NULL}; // ... 其他叶子节点 // 第二级菜单项有子菜单 MenuItem subMenu_status[] {menu_temp, menu_humi}; // 状态查看的子菜单 MenuItem subMenu_control[] {menu_led, menu_fan}; // 设备控制的子菜单 MenuItem subMenu_settings[] {menu_bright, menu_about}; // 系统设置的子菜单 // 第一级菜单项主菜单 MenuItem mainMenu_status {状态查看, NULL, subMenu_status[0], NULL, NULL, NULL}; MenuItem mainMenu_control {设备控制, NULL, subMenu_control[0], NULL, NULL, NULL}; MenuItem mainMenu_settings {系统设置, NULL, subMenu_settings[0], NULL, NULL, NULL}; // 将主菜单项链接成列表 MenuItem mainMenu[] {mainMenu_status, mainMenu_control, mainMenu_settings}; // 手动设置同级指针(next/prev)和父指针(parent) // 这里为了清晰省略了详细的链表链接代码实际项目中需要写一个函数或仔细设置每个指针。定义好这个结构后我们只需要维护几个全局变量MenuItem* currentMenu指向当前显示的菜单列表首项MenuItem* selectedItem指向当前被选中的菜单项int8_t selectedIndex当前选中项在列表中的索引。通过操作这些指针和索引我们就能在菜单树中自由导航了。4. 核心逻辑状态机与用户输入处理有了数据结构我们还需要一个“引擎”来驱动它。这个引擎就是一个状态机它根据用户的输入旋转、按下改变菜单的状态选中项、当前菜单层级并触发相应的画面刷新和动作执行。4.1 读取旋转编码器输入我们使用外部中断来检测编码器的旋转和按键确保响应零延迟。在setup()中初始化中断pinMode(ENCODER_CLK, INPUT_PULLUP); // CLK引脚用于判断方向 pinMode(ENCODER_DT, INPUT_PULLUP); // DT引脚触发中断 pinMode(ENCODER_SW, INPUT_PULLUP); // SW引脚触发中断 attachInterrupt(digitalPinToInterrupt(ENCODER_DT), readEncoder, CHANGE); // DT变化时触发 attachInterrupt(digitalPinToInterrupt(ENCODER_SW), readButton, FALLING); // SW下降沿按下触发中断服务函数readEncoder()和readButton()要尽可能短小只做标记不在中断中进行复杂操作如刷新屏幕。volatile int8_t encoderDelta 0; // 旋转变化量-1表示逆时针1表示顺时针 volatile bool buttonPressed false; // 按键按下标志 void readEncoder() { // 简单的状态判断逻辑根据CLK和DT的相位关系确定方向 static uint8_t lastState 0; uint8_t state (digitalRead(ENCODER_CLK) 1) | digitalRead(ENCODER_DT); if (lastState 0x03 state 0x02) encoderDelta 1; if (lastState 0x03 state 0x01) encoderDelta -1; lastState state; } void readButton() { buttonPressed true; }4.2 菜单状态机主循环在loop()函数中我们不断检查encoderDelta和buttonPressed这两个标志并更新菜单状态。void loop() { // 处理旋转输入 if (encoderDelta ! 0) { selectedIndex encoderDelta; // 更新选中索引 // 处理边界循环滚动或限制在首尾 if (selectedIndex 0) selectedIndex currentMenuSize - 1; if (selectedIndex currentMenuSize) selectedIndex 0; // 根据selectedIndex更新selectedItem指针 updateSelectedItem(); // 标记需要刷新显示 needRedraw true; encoderDelta 0; // 清除标志 } // 处理按键输入 if (buttonPressed) { buttonPressed false; // 清除标志 if (selectedItem-action ! NULL) { // 如果该菜单项有动作函数则执行 selectedItem-action(); } else if (selectedItem-child ! NULL) { // 如果该菜单项有子菜单则进入子菜单 enterSubMenu(selectedItem); needRedraw true; } else { // 可能是一个返回或空项这里可以处理返回逻辑 // 例如如果selectedItem-parent不为空则返回上级菜单 returnToParentMenu(); needRedraw true; } } // 刷新显示 if (needRedraw) { drawMenu(); needRedraw false; } // 其他后台任务如传感器数据采集 // ... }这个状态机逻辑清晰地将输入、导航、执行分离开。enterSubMenu和returnToParentMenu函数负责更新currentMenu和selectedItem等全局指针实现菜单层级的切换。5. 让菜单“动”起来绘制与视觉优化逻辑通了最后一步就是让菜单在屏幕上好看又好用。绘制菜单不仅仅是把文字列出来还要有焦点反馈、滚动效果、甚至动画。5.1 基础绘制函数drawMenu()函数是核心。它需要完成以下工作清空缓冲区u8g2.clearBuffer()。计算当前菜单列表的显示范围。因为屏幕有限比如只能显示4行而菜单项可能很多。遍历当前需要显示的菜单项根据其是否为selectedItem来决定显示样式如反白、前面加“”符号。绘制滚动条或页码指示器可选但非常提升体验。将缓冲区内容发送到屏幕u8g2.sendBuffer()。一个简单的绘制片段如下void drawMenu() { u8g2.clearBuffer(); u8g2.setFont(u8g2_font_wqy12_t_gb2312); // 使用一个中文字体 int startIdx 0; // 计算当前屏幕应从第几个菜单项开始显示 int maxItemsOnScreen 4; // 一屏最多显示4项 if (selectedIndex maxItemsOnScreen) { startIdx selectedIndex - maxItemsOnScreen 1; } for (int i 0; i maxItemsOnScreen; i) { int itemIdx startIdx i; if (itemIdx currentMenuSize) break; MenuItem* item getMenuItemByIndex(itemIdx); // 一个辅助函数根据索引找到菜单项指针 int yPos 15 i * 15; // 计算Y坐标 if (item selectedItem) { // 绘制选中项背景反白 u8g2.drawBox(0, yPos - 10, 128, 12); u8g2.setDrawColor(0); // 设置绘制颜色为白色在黑色背景上画 u8g2.drawStr(5, yPos, item-name); u8g2.setDrawColor(1); // 恢复为黑色绘制 } else { // 绘制未选中项 u8g2.drawStr(5, yPos, item-name); } } u8g2.sendBuffer(); }5.2 高级视觉效果与优化基础绘制能工作但要让菜单感觉“丝滑”还需要一些优化避免闪烁U8g2的clearBuffer()和sendBuffer()之间如果计算量很大会导致屏幕短暂黑屏。确保绘制逻辑高效。更高级的做法是使用双缓冲但U8g2本身在sendBuffer前都是在内存操作所以主要瓶颈在绘制计算本身。平滑滚动当选中项超出屏幕时不要直接跳变可以尝试实现动画效果让列表逐像素滚动。这需要更精细的控制比如记录一个偏移量在每次loop中逐渐变化并重绘。图标与图形可以在菜单项前添加小图标使用drawXBMP让界面更直观。比如WiFi图标、齿轮图标等。焦点反馈除了反白还可以让选中项轻微左移右移或者增加一个闪烁的光标让焦点更明显。我在一个实际的项目中为了追求极致的流畅度甚至将菜单的绘制拆分为“全量刷新”和“局部刷新”。只有当菜单层级变化或大幅滚动时才全量重绘仅仅切换选中项时只擦除上一项和绘制当前项大大提升了刷新速度。6. 实战构建一个智能温湿度计菜单让我们把上面所有的知识串起来做一个能跑起来的完整例子。假设我们有一个DHT11温湿度传感器我们要做一个带菜单的显示器。第一步定义菜单结构和动作函数。#include U8g2lib.h #include DHT.h // 硬件引脚定义 #define DHTPIN 7 #define DHTTYPE DHT11 DHT dht(DHTPIN, DHTTYPE); // 菜单结构体定义同上略 // 动作函数声明 void showTempPage(); void showHumiPage(); void showMainPage(); void toggleBacklight(); // 定义菜单项简化版省略指针链接细节 MenuItem actTemp {当前温度, showTempPage, NULL, ...}; MenuItem actHumi {当前湿度, showHumiPage, NULL, ...}; MenuItem actBacklight {背光开关, toggleBacklight, NULL, ...}; MenuItem actBack {返回, showMainPage, NULL, ...}; MenuItem subMenuSensor[] {actTemp, actHumi, actBack}; MenuItem mainMenu1 {传感器数据, NULL, subMenuSensor[0], ...}; MenuItem mainMenu2 {显示设置, NULL, actBacklight, ...}; MenuItem topMenu[] {mainMenu1, mainMenu2};第二步实现动作函数。这些函数里可以任意操作硬件和屏幕。void showTempPage() { float t dht.readTemperature(); u8g2.clearBuffer(); u8g2.setFont(u8g2_font_gb24st_t_2); u8g2.setCursor(10, 40); u8g2.print(t); u8g2.drawStr(70, 40, C); u8g2.sendBuffer(); delay(3000); // 显示3秒后自动返回 returnToParentMenu(); needRedraw true; }第三步在setup()中初始化硬件、菜单全局变量。第四步在loop()中运行前面提到的状态机逻辑。烧录代码转动编码器你应该能看到一个可以上下选择、按下进入、执行特定功能如显示实时温度的中文菜单系统了。这只是一个起点你可以在此基础上增加更多的菜单项、更复杂的子菜单、设置参数保存使用EEPROM、甚至加入动画效果。7. 避坑指南与性能优化心得做到这里一个可用的动态菜单系统已经完成了。但根据我的经验还有一些细节问题会让你调试到头疼这里提前给你提个醒。内存管理是头号大敌。Arduino UNO的SRAM只有2KB当你定义了大量的菜单项结构体、中文字库数组后很容易内存不足导致程序行为异常。优化策略1) 尽可能使用PROGMEM将只读数据如菜单文字、字库存放在Flash中使用时再读取。U8g2的setFont函数和drawStr函数对PROGMEM字符串支持良好。2) 精简菜单结构避免过深的层级。3) 使用F()宏将串口打印的提示字符串也存到Flash中如Serial.println(F(Menu Initialized))。按钮防抖与中断冲突。机械编码器和按键一定有抖动如果不处理一次操作可能会被误判多次。虽然我们在中断服务函数里做了简单处理但更稳健的做法是结合状态机和millis()进行软件防抖。另外注意中断服务函数中不要调用delay()也不要进行复杂的屏幕操作或Serial打印这可能导致系统不稳定。屏幕刷新率与系统响应。菜单刷新太慢会感觉卡顿刷新太快又可能因为处理不过来而丢帧。我的经验是将屏幕刷新和传感器读取等耗时操作放在loop的不同周期中。例如设置一个unsigned long lastDrawTime控制每50ms才检查并刷新一次菜单界面其余时间处理输入和传感器。这样既能保证界面流畅又能让后台任务有机会运行。代码的可维护性。当菜单项越来越多手动链接那些next、prev、parent指针会是一场噩梦。我后来的做法是放弃完全的手动链接而是用一个菜单项数组配合索引计算来模拟树状结构。例如用一个全局的menuStack[]数组记录当前的菜单路径用currentLevel记录层级。导航时通过计算数组偏移来找到父菜单或子菜单省去了大量指针操作代码清晰很多。最后也是最重要的一点先让最简单的流程跑起来。不要一开始就追求完美的图标、动画和复杂的逻辑。先实现“上下滚动-选中-执行”这个最核心的闭环。在此基础上每次只添加一个功能比如返回键、保存设置并充分测试。这样能帮你快速定位问题保持信心。这个基于U8g2的动态菜单框架就像一块积木掌握了它你就能为你未来的无数个Arduino智能硬件项目赋予一个友好、专业的“面孔”。