WouoUI-PageVersion实战：5分钟为你的STM32项目添加B站同款OLED动态菜单

WouoUI-PageVersion实战：5分钟为STM32项目打造B站风格OLED动态菜单

在嵌入式开发中，用户界面的设计往往成为项目落地的最后一道门槛。传统OLED菜单要么过于简陋，要么实现复杂，让不少开发者望而却步。今天我们要介绍的WouoUI-PageVersion，正是一款能让你在STM32上快速构建B站同款丝滑动画效果的OLED菜单框架。

1. 环境准备与快速入门

1.1 硬件选型建议

WouoUI-PageVersion专为128×64分辨率的OLED屏幕优化，以下是经过验证的硬件组合：

提示：虽然软件I2C也能工作，但会影响动画流畅度，建议优先使用硬件SPI接口

1.2 工程搭建步骤

1. 从GitHub获取最新源码包：

   git clone https://github.com/Sheep118/WouoUI-PageVersion

2. 将以下核心文件添加到你的Keil/IAR工程中：

   • oled_g.c(图形驱动层)
   • oled_ui.c(UI逻辑层)
   • 对应的头文件

3. 实现两个关键硬件抽象函数：

   // OLED初始化 void OLED_Init(void) { // 这里实现你的屏幕初始化代码 } // 显存刷新 void OLED_SendBuff(uint8_t buff[8][128]) { // 将帧缓冲区数据写入OLED }

2. 六大页面类型深度解析

2.1 基础页面对比

WouoUI-PageVersion提供了六种特色页面，每种都有独特的交互特性：

2.2 回调函数实战

所有页面都通过回调函数响应用户操作，下面是一个典型的回调实现：

void MainMenu_Callback(uint8_t page_id, Option* item) { switch(item->order) { case 0: // 第一个选项 OLED_UIJumpToPage(page_id, &settings_page); break; case 1: // 第二个选项 if(strcmp(item->text, "~ 温度设置") == 0) { current_temp = item->val; // 获取设置值 } break; } }

注意：RadioPage的回调中可以通过item->val获取单选结果，而WavePage则需要使用OLED_UIWaveUpdateVal()主动更新数值

3. 高级动画效果实现

3.1 波形图实时渲染

WavePage特别适合展示传感器数据，以下是心电图效果的实现方法：

// 在定时器中断中调用 void TIM3_IRQHandler(void) { static uint16_t wave_index = 0; Option ecg_option = {.order = 0}; // 生成模拟ECG数据 int16_t ecg_value = 30 * sin(wave_index*0.1) + 10 * sin(wave_index*0.5) + rand()%5; OLED_UIWaveUpdateVal(&ecg_option, ecg_value); wave_index++; }

3.2 镭射扫描动画优化

RaderPicPage的扫描效果可以通过这些参数微调：

// 在UI初始化时设置 ui_para.raderpic_scan_mode = False; // 是否只扫描亮部 ui_para.raderpic_scan_rate = 4; // 扫描速度(值越小越快) ui_para.raderpic_move_rate = 50; // 移动速度

4. 性能优化与调试技巧

4.1 内存占用分析

WouoUI-PageVersion经过精心优化，在STM32F103上的资源占用情况：

4.2 常见问题排查

• 动画卡顿：

  1. 检查SPI时钟是否≥8MHz
  2. 确保没有在中断中执行复杂运算
  3. 尝试降低ui_para.ani_param各参数值

• 显示错乱：

  1. 确认OLED_Init时序符合屏幕规格
  2. 检查帧缓冲区是否为8×128的二维数组
  3. 验证硬件连接稳定性

在实际项目中，我遇到最棘手的问题是RadioPage的选项异常。后来发现是option_array没有正确初始化text前缀。记住，单选项目必须以"= "开头，例如：

Option radio_items[] = { {.text = "= 模式A", .val = 0}, {.text = "= 模式B", .val = 1} };

这套框架最让我惊喜的是DigitalPage的数字滚动效果，只需调用OLED_DigitalPage_UpdateDigitalNumAnimation()就能获得极具质感的过渡动画，完全不需要自己处理绘图逻辑。对于需要频繁调整参数的工业HMI场景，这能大幅提升用户体验。