ESP32-S3 控制 OLED液晶显示

ESP32-S3 控制 OLED 液晶显示实验

OLED 液晶屏以高对比度、低功耗和小尺寸著称，广泛用于显示字符、图形或简单动画。

本文介绍如何用 ESP32-S3 控制 I2C 接口的 OLED 显示屏，实现字符显示、图形绘制和进阶演示效果。

---

一、实验名称

OLED 液晶显示实验

---

二、接线说明

OLED模块	ESP32-S3开发板
GND	GND
VCC	3.3V
SCL	21
SDA	47

注意事项：

1. OLED 模块电源必须为 3.3V，否则可能损坏屏幕。
2. I2C 总线上的 SDA 与 SCL 可以任意选择 ESP32-S3 支持的 GPIO，但需要在代码中一致设置。
3. 安装 OLED 库：esp8266-oled-ssd1306-master.zip，方法：项目 → 导入库 → 添加 .ZIP 库。

---

三、实验现象

程序下载成功后，OLED 屏显示字符信息、各种字体演示、文本对齐效果、矩形和圆形图形、进度条以及图片演示等效果。屏幕每隔几秒会自动切换演示模式，丰富了显示方式。

---

四、完整代码示例

#include "public.h"
#include "SSD1306Wire.h"        // OLED 控制库
#include "images.h"             // 图片数据

#define SCL   21
#define SDA   47
#define DEMO_DURATION 3000      // 演示切换间隔

typedef void (*Demo)(void);

int demoMode = 0;
int counter = 1;

SSD1306Wire display(0x3c, SDA, SCL);

// 字体演示
void drawFontFaceDemo() {
  display.setTextAlignment(TEXT_ALIGN_LEFT);
  display.setFont(ArialMT_Plain_10);
  display.drawString(0, 0, "Hello world");
  display.setFont(ArialMT_Plain_16);
  display.drawString(0, 10, "Hello world");
  display.setFont(ArialMT_Plain_24);
  display.drawString(0, 26, "Hello world");
}

// 文本对齐演示
void drawTextAlignmentDemo() {
  display.setFont(ArialMT_Plain_10);
  display.setTextAlignment(TEXT_ALIGN_LEFT);
  display.drawString(0, 10, "Left aligned");
  display.setTextAlignment(TEXT_ALIGN_CENTER);
  display.drawString(64, 22, "Center aligned");
  display.setTextAlignment(TEXT_ALIGN_RIGHT);
  display.drawString(128, 33, "Right aligned");
}

// 矩形绘制
void drawRectDemo() {
  display.drawRect(12, 12, 20, 20);
  display.fillRect(14, 14, 17, 17);
  display.drawHorizontalLine(0, 40, 20);
  display.drawVerticalLine(40, 0, 20);
}

// 圆形绘制
void drawCircleDemo() {
  for (int i = 1; i < 8; i++) {
    display.setColor(WHITE);
    display.drawCircle(32, 32, i * 3);
    if (i % 2 == 0) display.setColor(BLACK);
    display.fillCircle(96, 32, 32 - i * 3);
  }
}

// 进度条演示
void drawProgressBarDemo() {
  int progress = (counter / 5) % 100;
  display.drawProgressBar(0, 32, 120, 10, progress);
  display.setTextAlignment(TEXT_ALIGN_CENTER);
  display.drawString(64, 15, String(progress) + "%");
}

// 图片演示
void drawImageDemo() {
  display.drawXbm(34, 14, WiFi_Logo_width, WiFi_Logo_height, WiFi_Logo_bits);
}

// 演示数组
Demo demos[] = {
  drawFontFaceDemo,
  drawTextAlignmentDemo,
  drawRectDemo,
  drawCircleDemo,
  drawProgressBarDemo,
  drawImageDemo
};
int demoLength = sizeof(demos) / sizeof(Demo);
long timeSinceLastModeSwitch = 0;

void setup(){
  Serial.begin(115200);
  display.init();                  // 初始化 OLED
  display.flipScreenVertically();  // 垂直翻转屏幕
  display.setFont(ArialMT_Plain_24);
  display.drawString(0, 0, "Hello World"); // 显示文字
  display.display();               // 更新显示
}

void loop(){
  display.clear();
  demos[demoMode]();                // 执行当前演示
  display.setFont(ArialMT_Plain_10);
  display.setTextAlignment(TEXT_ALIGN_RIGHT);
  display.drawString(128, 54, String(millis())); // 显示运行时间
  display.display();                // 更新屏幕

  if (millis() - timeSinceLastModeSwitch > DEMO_DURATION) {
    demoMode = (demoMode + 1) % demoLength;    // 自动切换演示
    timeSinceLastModeSwitch = millis();
  }
  counter++;
  delay(10);
}

---

五、代码讲解

1. 初始化 OLED
   display.init() 用于启动 OLED 控制器，flipScreenVertically() 可翻转屏幕显示方向。

2. 显示文字与字体
   drawString(x, y, text) 在屏幕上显示文字，setFont() 设置字体大小，setTextAlignment() 设置对齐方式。

3. 绘制图形
   支持绘制矩形、圆形、像素、线条及图片，使用简单。

4. 演示模式切换
   主循环通过 DEMO_DURATION 控制演示模式切换，使屏幕动态展示各种效果。

---

六、实验效果

1. OLED 屏显示 Hello World。
2. 不同字体和文本对齐方式的展示。
3. 绘制矩形、圆形、线条以及进度条。
4. 图片显示，例如 Wi-Fi Logo。
5. 自动切换演示模式，演示丰富 OLED 功能。

---

七、进阶扩展

1. 实时数据展示
   结合温湿度传感器（DHT11、DS18B20）将采集数据显示在 OLED 上。

2. 小型仪表盘
   利用图形绘制仪表盘显示温湿度、亮度、风速等信息。

3. Web 控制界面
   ESP32-S3 可搭建 WebServer，将 OLED 显示状态同步到网页。

---

八、总结

本实验展示了 ESP32-S3 控制 I2C OLED 屏 的方法，学习了：

• OLED I2C 接线方式
• SSD1306 OLED 库的安装与使用
• 字符显示与字体管理
• 文本对齐与图形绘制
• 演示模式切换与动态显示

通过本实验，可为物联网界面显示、智能家居仪表盘等应用打下基础。