ESP32上的U8G2实战：打造高颜值天气站界面
在嵌入式开发中，显示界面往往是连接硬件与用户的最后一步。传统的手册式API教学容易让人陷入枯燥的函数调用中，而本文将带你通过一个完整的天气站项目，探索U8G2图形库在ESP32上的实战应用。我们将从零开始构建一个包含温度、湿度数据和动态天气图标的显示界面，并分享几个提升显示效果的实用技巧。
1. 项目规划与硬件准备
在开始编码前，合理的项目规划能避免后期大量重构。我们的天气站需要显示以下核心信息：
- 当前温度和湿度（数值显示）
- 天气状态图标（晴/雨/云等）
- 时间日期信息
- 数据刷新按钮的UI反馈
硬件选型建议：
- ESP32开发板（任何型号均可，推荐带OLED接口的型号）
- 0.96寸OLED显示屏（I2C接口，128x64分辨率）
- BME280环境传感器（温湿度测量）
- 面包板和连接线若干
接线示意图：
ESP32 GPIO21 —— OLED SDA ESP32 GPIO22 —— OLED SCL ESP32 3.3V —— OLED VCC ESP32 GND —— OLED GND提示：如果使用SPI接口的OLED，需要修改初始化代码中的通信协议参数。大多数0.96寸OLED默认使用I2C，购买时请注意区分。
安装必要的库：
// 在Arduino IDE中安装以下库 #include <U8g2lib.h> #include <Wire.h> #include <Adafruit_Sensor.h> #include <Adafruit_BME280.h>2. U8G2初始化与基础配置
U8G2库的强大之处在于它对多种显示器的广泛支持。以下是针对SSD1306驱动的OLED初始化代码：
U8G2_SSD1306_128X64_NONAME_F_HW_I2C u8g2(U8G2_R0, /* reset=*/ U8X8_PIN_NONE); void setup() { u8g2.begin(); u8g2.setFont(u8g2_font_6x10_tf); // 设置默认字体 u8g2.setContrast(150); // 调节对比度，范围0-255 // 启用UTF-8支持以显示中文 u8g2.enableUTF8Print(); }关键参数解析：
U8G2_R0：屏幕旋转参数（R0无旋转，R1顺时针90度等）U8X8_PIN_NONE：硬件I2C无需复位引脚setContrast()：根据环境光线调整，值越大对比度越高
常见初始化问题排查：
- 白屏无显示：检查I2C地址（通常0x3C或0x78）
- 显示乱码：确认调用了
enableUTF8Print() - 屏幕闪烁：降低I2C时钟速度
u8g2.setBusClock(400000)
3. 构建天气站核心界面
我们将界面划分为三个功能区：顶部状态栏、中部天气图标、底部数据区。这种布局既美观又信息明确。
3.1 状态栏实现
状态栏显示时间和WiFi连接状态：
void drawStatusBar() { char timeStr[9]; sprintf(timeStr, "%02d:%02d:%02d", hour(), minute(), second()); u8g2.drawUTF8(0, 10, timeStr); // WiFi图标绘制 if(WiFi.status() == WL_CONNECTED) { u8g2.drawUTF8(110, 10, "☑"); } else { u8g2.drawUTF8(110, 10, "☒"); } }3.2 天气图标绘制技巧
使用U8G2的矢量绘图功能创建动态天气图标。以下是晴天图标的实现：
void drawSunIcon(int x, int y) { // 太阳主体 u8g2.drawDisc(x, y, 15, U8G2_DRAW_ALL); // 阳光射线 for(int i=0; i<360; i+=45) { float rad = i * PI / 180; int x1 = x + 20 * cos(rad); int y1 = y + 20 * sin(rad); u8g2.drawLine(x, y, x1, y1); } }其他天气状态可通过类似方式实现，建议将图标代码封装为独立函数方便调用。
3.3 数据可视化呈现
温湿度数据采用大字体突出显示，并添加趋势箭头：
void drawTempHumidity(float temp, float hum) { char tempStr[10], humStr[10]; sprintf(tempStr, "%.1f°C", temp); sprintf(humStr, "%.0f%%", hum); u8g2.setFont(u8g2_font_logisoso32_tn); u8g2.drawUTF8(15, 50, tempStr); u8g2.setFont(u8g2_font_logisoso24_tn); u8g2.drawUTF8(80, 50, humStr); // 趋势箭头（根据数据变化动态显示） if(temp > lastTemp) { u8g2.drawUTF8(60, 35, "↑"); } else if(temp < lastTemp) { u8g2.drawUTF8(60, 35, "↓"); } }4. 高级技巧与性能优化
4.1 双缓冲技术
U8G2默认使用单缓冲，可能导致画面撕裂。启用双缓冲可显著改善：
void setup() { u8g2.begin(); u8g2.setDoubleBuffer(1); // 启用双缓冲 } void loop() { u8g2.clearBuffer(); // 绘制代码... u8g2.sendBuffer(); // 一次性发送完整帧 }4.2 局部刷新策略
对于频繁更新的区域（如时间显示），可以只刷新特定区域：
void updateTimeOnly() { u8g2.setClipWindow(0, 0, 50, 12); // 限制刷新区域 drawStatusBar(); u8g2.setMaxClipWindow(); // 恢复全屏刷新 u8g2.sendBuffer(); }4.3 自定义字体集成
U8G2支持自定义字体，使用fontforge工具转换字体：
- 下载TTF字体文件
- 使用U8G2提供的转换工具生成字体数据
- 在代码中引用：
#include "my_custom_font.h" void setup() { u8g2.setFont(my_custom_font); }5. 完整项目集成
将各模块组合成完整项目，添加传感器数据读取：
Adafruit_BME280 bme; void setup() { Serial.begin(115200); u8g2.begin(); bme.begin(0x76); // 连接WiFi获取天气数据 WiFi.begin("SSID", "password"); } void loop() { float temp = bme.readTemperature(); float hum = bme.readHumidity(); u8g2.clearBuffer(); drawStatusBar(); drawWeatherIcon(getWeatherCondition()); drawTempHumidity(temp, hum); u8g2.sendBuffer(); delay(5000); // 5秒更新一次 }项目扩展建议：
- 添加按钮切换显示模式
- 实现历史数据曲线图
- 连接天气API获取预报数据
- 设计省电模式（降低刷新率）
6. 常见问题解决方案
显示闪烁问题：
- 确保每次刷新都调用
clearBuffer() - 减少不必要的全屏刷新
- 检查电源稳定性
内存不足：
- 使用
u8g2.getBufferSize()监控内存使用 - 精简自定义字体
- 避免大尺寸位图
性能优化：
// 禁用控制台输出可提升性能 #define U8G2_WITHOUT_OUTPUT_DISABLE通过这个项目，我们不仅掌握了U8G2的核心API使用，更学会了如何将技术文档中的函数转化为实际可用的产品界面。在嵌入式开发中，良好的用户界面同样重要，它能让硬件项目更具实用性和商业价值。
