正点原子esp32s3连0.96寸oled屏幕

最新推荐文章于 2025-11-25 11:59:30 发布

原创最新推荐文章于 2025-11-25 11:59:30 发布 · 554 阅读

4 ·

CC 4.0 BY-SA版权

文章标签：

#物联网 #单片机 #esp32 #arduion #SPI #oled

单片机专栏收录该内容

20 篇文章

订阅专栏

注意：为了显示中文，使用了依赖olikraus/U8g2，在导入字库的时候，刚开始使用的是：

lib_deps = 
    olikraus/U8g2@^2.36.12

但是会报错，后来改为：

lib_deps = 
	olikraus/U8g2 @ ~2.36.12

就可以正常运行了。

platformio.ini配置如下：

[env:dnesp32s3]
platform = espressif32
board = dnesp32s3
framework = arduino
monitor_speed = 115200
upload_speed = 115200
debug_speed = 115200
test_speed = 115200
lib_deps = 
	adafruit/Adafruit SSD1306@^2.5.15
	adafruit/Adafruit GFX Library@^1.12.1
	olikraus/U8g2 @ ~2.36.12

代码如下：

#include <Arduino.h>
#include <U8g2lib.h>
#include <SPI.h>

// 屏幕引脚配置
#define OLED_CLK  12  // SCK
#define OLED_MOSI 11  // SDA
#define OLED_CS   7   // CS
#define OLED_DC   6   // DC
#define OLED_RST  5   // RES

// 使用硬件SPI初始化U8G2
U8G2_SSD1306_128X64_NONAME_F_4W_HW_SPI u8g2(
  U8G2_R0,              // 旋转方向
  OLED_CS,              // 片选
  OLED_DC,              // 数据/命令
  OLED_RST              // 复位
);

void setup() {
  Serial.begin(115200);
  
  // 初始化OLED
  u8g2.begin();
  u8g2.enableUTF8Print(); // 启用UTF-8支持
  
  // 使用更小的12像素字体
  u8g2.setFont(u8g2_font_wqy12_t_gb2312); 
  
  // 初始显示内容
  u8g2.clearBuffer();
  
  // 显示欢迎信息 - 调整布局适应小字体
  u8g2.drawUTF8(0, 12, "ESP32-S3 OLED");
  u8g2.drawUTF8(0, 24, "----------------");
  u8g2.drawUTF8(0, 36, "SPI接口测试");
  u8g2.drawUTF8(0, 48, "分辨率: 128x64");
  
  u8g2.sendBuffer();
  delay(2000);
}

void loop() {
  static int counter = 0;
  
  u8g2.clearBuffer();
  
  // 使用小号中文字体
  u8g2.setFont(u8g2_font_wqy12_t_gb2312);
  
  // 显示系统时间 (第1行)
  u8g2.drawUTF8(0, 12, "运行时间: ");
  u8g2.setCursor(u8g2.getUTF8Width("运行时间: "), 12);
  u8g2.print(millis() / 1000);
  u8g2.drawUTF8(u8g2.getCursorX(), 12, " 秒");
  
  // 显示滚动计数器 (第2行)
  u8g2.drawUTF8(0, 24, "计数器: ");
  u8g2.setCursor(u8g2.getUTF8Width("计数器: "), 24);
  u8g2.print(counter++);
  
  // 显示进度条 (第3行)
  int progress = counter % 100;
  u8g2.drawUTF8(0, 36, "进度: ");
  
  // 绘制进度条 - 位置下移
  int barX = u8g2.getUTF8Width("进度: ") + 5;
  u8g2.drawFrame(barX, 28, 60, 8);  // 外框
  int fillWidth = map(progress, 0, 100, 0, 60);
  u8g2.drawBox(barX, 28, fillWidth, 8); // 填充
  
  // 显示进度百分比
  u8g2.setCursor(barX + 65, 36);
  u8g2.print(progress);
  u8g2.print("%");
  
  // 显示滚动文本 (第4行)
  u8g2.drawUTF8(0, 48, "状态: ");
  u8g2.setCursor(u8g2.getUTF8Width("状态: "), 48);
  u8g2.drawUTF8(u8g2.getCursorX(), 48, counter % 2 ? "正常" : "运行中");
  
  // 添加分隔线提高可读性
  u8g2.drawHLine(0, 52, 128);
  
  // 添加更多信息 (第5行)
  u8g2.drawUTF8(0, 64, "刷新: ");
  u8g2.setCursor(u8g2.getUTF8Width("刷新: "), 64);
  u8g2.print(millis());
  u8g2.print("ms");
  
  // 更新显示
  u8g2.sendBuffer();
  
  delay(500); // 刷新间隔
}

关键函数 `u8g2.drawUTF8()` 参数详解：

u8g2.drawUTF8(x, y, "文本");

x 参数：水平起始位置（像素）
- 0 = 屏幕最左侧
- 示例：u8g2.drawUTF8(0,12,...) 从左侧开始显示
- 动态定位：u8g2.getUTF8Width("文本") 获取文本宽度后定位
y 参数：垂直起始位置（像素）
- 关键特性：表示文本基线位置（非顶部位置）
- 字体适配：对于12像素字体，推荐行间距12-15像素
- 分层布局：
  - 第1行：y=12（距顶部约2像素）
  - 第2行：y=24（+12像素）
  - 第3行：y=36（+12像素）
  - 第4行：y=48（+12像素）
  - 第5行：y=64（屏幕底部）

设计要点：

垂直布局：利用y坐标分层显示，每行间隔12像素（适配12px字体）
动态定位：
- getUTF8Width() 计算文本宽度
- setCursor() 设置后续内容位置
混合渲染：
- UTF-8文本：drawUTF8()
- 基本图形：drawFrame()/drawBox() 绘制进度条
- 数字内容：print() 直接输出
屏幕分区：
- 顶部：标题区
- 中部：动态数据（时间/计数器）
- 下部：状态信息
- 分隔线：增强可读性

坐标系统示意图：

text

(0,0) ┌───────────────────────────────┐
      │ ESP32-S3 OLED        (文本基线y=12) │ 
      │ ----------------     (y=24)       │
      │ SPI接口测试           (y=36)       │
      │ 分辨率: 128x64        (y=48)       │
      ├───────────────────────────────┤ <-- 分隔线(y=52)
      │ 刷新: 12345ms         (y=64)       │
      └───────────────────────────────┘

实际效果如下：