ESP32+Arduino入门教程（二）：连接OLED屏

前言

文中视频效果可在此次观看：ESP32+Arduino入门教程（二）：连接OLED屏
接线

现在先来看看接线。
我的是0.91寸的4针OLED屏。
OLED引脚ESP32-S3引脚GNDGNDVCC3.3VSCL0SDA1接线完成之后如下所示：

安装库

连接OLED屏使用的是这个库：

GitHub地址：https://github.com/ThingPulse/esp8266-oled-ssd1306
介绍
基于 SSD1306 和 SH1106 的 128x64、128x32、64x48 像素 OLED 显示屏在 ESP8266/ESP32 上的驱动程序。
这是一个适用于 Arduino/ESP8266 & ESP32 和 mbed-os 平台的 SSD1306 和 SH1106 128x64、128x32、64x48 和 64x32 OLED 显示屏的驱动程序。可以使用 I2C 或 SPI 版本的显示屏。

安装成功之后打开示例：

运行示例

修改示例中的这个位置：

修改为：

也就是修改为SDA与SCL连接的引脚。
现在编译并烧录一下查看效果：
显示英文

现在成功运行了示例，就可以看示例进行学习。
先学着显示英文。
新建一个项目：

1. #include <Wire.h>               // Only needed for Arduino 1.6.5 and earlier
2. #include "SSD1306Wire.h"
4. // Initialize the OLED display using Arduino Wire:
5. SSD1306Wire display(0x3c, 1, 0, GEOMETRY_128_32);
7. void setup() {
8.   // put your setup code here, to run once:
9.   Serial.begin(115200);
11.   // Initialising the UI will init the display too.
12.   display.init();
14.   display.flipScreenVertically();
15.   display.setFont(ArialMT_Plain_24);
16.   display.drawString(0, 0, "hello world");
17.   display.display();
18. }
20. void loop() {
21.   
22. }

复制代码

效果：

比如现在我想要在显示"hello world"之后从1%到100%循环显示。
代码如下：

1. #include <Wire.h>               // Only needed for Arduino 1.5 and earlier
2. #include "SSD1306Wire.h"
3. // Initialize the OLED display
4. SSD1306Wire display(0x3c, 1, 0, GEOMETRY_128_32);
5. bool showHelloWorld = true;     // 初始显示 "hello world"
6. int percentage = 1;             // 从 1% 开始
7. unsigned long lastUpdate = 0;   // 记录上次更新时间
8. const int updateInterval = 200; // 更新间隔（毫秒）
9. void setup() {
10.   Serial.begin(115200);
11.   display.init();
12.   display.flipScreenVertically();
13.   display.setFont(ArialMT_Plain_24);
14.   
15.   // 初始显示 "hello world"
16.   display.clear();
17.   display.drawString(0, 0, "hello world");
18.   display.display();
19.   
20.   lastUpdate = millis(); // 记录初始时间
21. }
22. void loop() {
23.   unsigned long currentTime = millis();
24.   
25.   // 如果当前时间 - 上次更新时间 >= 间隔时间，则更新显示
26.   if (currentTime - lastUpdate >= updateInterval) {
27.     lastUpdate = currentTime;
28.    
29.     if (showHelloWorld) {
30.       // 显示 "hello world" 后，切换到百分比显示
31.       showHelloWorld = false;
32.     } else {
33.       // 更新百分比（1% ~ 100%）
34.       display.clear();
35.       display.drawString(0, 0, String(percentage) + "%");
36.       display.display();
37.       
38.       percentage++;
39.       if (percentage > 100) {
40.         percentage = 1; // 循环显示
41.       }
42.     }
43.   }
44. }

复制代码

滚动播放

代码如下：

1. #include <Wire.h>
2. #include "SSD1306Wire.h"
3. SSD1306Wire display(0x3c, 1, 0, GEOMETRY_128_32);
4. String longText = "This is a very long text that cannot fit on the screen at once. It will scroll horizontally.";
5. int textPosition = 0;  // 当前滚动位置
6. unsigned long lastScrollTime = 0;
7. const int scrollDelay = 150;  // 滚动速度（毫秒）
8. void setup() {
9.   Serial.begin(115200);
10.   display.init();
11.   display.flipScreenVertically();
12.   display.setFont(ArialMT_Plain_10);  // 使用小字体以显示更多内容
13. }
14. void loop() {
15.   if (millis() - lastScrollTime >= scrollDelay) {
16.     lastScrollTime = millis();
17.    
18.     display.clear();
19.     display.drawString(-textPosition, 0, longText);  // 负坐标实现左滚动
20.     display.display();
21.    
22.     textPosition++;  // 每次移动1像素
23.    
24.     // 如果文本完全滚出屏幕，重置位置
25.     if (textPosition > display.getStringWidth(longText)) {
26.       textPosition = 0;
27.     }
28.   }
29. }

复制代码

显示中文

显示中文需要安装额外的库：U8g2lib

代码：

1. #include <U8g2lib.h>
2. U8G2_SSD1306_128X32_UNIVISION_F_SW_I2C u8g2(U8G2_R0, /*SCL=*/0, /*SDA=*/1, /*RESET=*/U8X8_PIN_NONE);
3. void setup() {
4.   Serial.begin(115200);
5.   u8g2.begin();
6.   u8g2.enableUTF8Print();
7.   // 使用更紧凑的字体
8.   u8g2.setFont(u8g2_font_unifont_t_chinese2);
9.   // 获取字体实际高度并计算安全 Y 坐标
10.   uint8_t fontHeight = u8g2.getMaxCharHeight();
11.   uint8_t yPos = 32 - fontHeight; // 确保底部不超出屏幕
12.   Serial.print("Font Height: ");
13.   Serial.println(fontHeight);
14.   Serial.print("Y Position: ");
15.   Serial.println(yPos);
16.   u8g2.clearBuffer();
17.   u8g2.setCursor(0, yPos);
18.   u8g2.print("你好世界");
19.   u8g2.sendBuffer();
20.   
21.   delay(100);
22. }
23. void loop() {}

复制代码

效果：

水平滚动显示中文
代码如下：

1. #include <U8g2lib.h>
2. U8G2_SSD1306_128X32_UNIVISION_F_SW_I2C u8g2(U8G2_R0, /*SCL=*/0, /*SDA=*/1, /*RESET=*/U8X8_PIN_NONE);
3. // 要显示的中文长文本
4. const char *longText = "这是一个很长很长的中文文本，它将会在屏幕上水平滚动显示。";
5. // 滚动相关的变量
6. int16_t textWidth;        // 文本的实际宽度
7. int16_t scrollPosition = 0; // 当前滚动位置
8. unsigned long lastScrollTime = 0; // 上次滚动的时间
9. const unsigned long scrollInterval = 5; // 滚动间隔时间（毫秒）
10. uint8_t fontHeight;          //字体高度
11. uint8_t yPos;              //Y坐标
12. void setup() {
13.   Serial.begin(115200);
14.   u8g2.begin();
15.   u8g2.enableUTF8Print();
16.   // 使用更紧凑的字体，适合中文显示
17.   u8g2.setFont(u8g2_font_unifont_t_chinese2);
18.   // 获取字体实际高度并计算安全 Y 坐标
19.   fontHeight = u8g2.getMaxCharHeight();
20.   yPos = 32 - fontHeight; // 确保底部不超出屏幕
21.   Serial.print("Font Height: ");
22.   Serial.println(fontHeight);
23.   Serial.print("Y Position: ");
24.   Serial.println(yPos);
25.   // 计算文本的实际宽度
26.   textWidth = u8g2.getUTF8Width(longText);
27.   Serial.print("Text Width: ");
28.   Serial.println(textWidth);
29. }
30. void loop() {
31.   // 获取当前时间
32.   unsigned long currentTime = millis();
33.   // 检查是否需要滚动
34.   if (currentTime - lastScrollTime >= scrollInterval) {
35.     lastScrollTime = currentTime;
36.     // 更新滚动位置
37.     scrollPosition+=5;
38.     // 如果滚动到文本末尾，则重置滚动位置
39.     if (scrollPosition > textWidth) {
40.       scrollPosition = 0;
41.     }
42.     // 重绘屏幕
43.     drawScrollingText();
44.   }
45. }
46. // 绘制滚动文本的函数
47. void drawScrollingText() {
48.   u8g2.clearBuffer();
49.   // 计算绘制文本的起始 X 坐标（负数表示文本部分在屏幕外）
50.   int16_t xPos = 0 - scrollPosition;
51.   // 绘制文本
52.   u8g2.setCursor(xPos, yPos);
53.   u8g2.print(longText);
54.   u8g2.sendBuffer();
55. }

复制代码

感觉效果不是很好。
中文分段显示

代码如下：

1. #include <U8g2lib.h>
3. // 定义屏幕对象（根据实际使用的屏幕和接口调整构造函数参数）
4. U8G2_SSD1306_128X32_UNIVISION_F_SW_I2C u8g2(U8G2_R0, /*SCL=*/0, /*SDA=*/1, /*RESET=*/U8X8_PIN_NONE);
6. // 要显示的中文长文本
7. const char *longText = "这是一个很长很长的中文文本，它将会在屏幕上分段显示。";
9. // 显示相关的全局变量
10. uint8_t fontHeight;         // 字体高度
11. uint8_t yPos;               // 文本在 Y 轴上的显示位置
12. const uint16_t screenWidth = 128; // OLED 屏幕宽度
14. // 控制段显示的时间（毫秒）
15. const unsigned long segmentDisplayTime = 2000;  // 每段显示 2 秒
16. unsigned long lastSegmentChange = 0;            // 上一次切换段的时间
18. // 记录当前段在文本中的起始字节索引
19. int currentSegmentStart = 0;
21. // 用于测量 UTF-8 字符占用的字节数
22. int utf8CharBytes(char c) {
23.   if ((c & 0x80) == 0) return 1;          // ASCII
24.   else if ((c & 0xE0) == 0xC0) return 2;    // 2 字节
25.   else if ((c & 0xF0) == 0xE0) return 3;    // 3 字节
26.   else if ((c & 0xF8) == 0xF0) return 4;    // 4 字节
27.   return 1; // 默认返回 1
28. }
30. // 根据当前起始位置和屏幕宽度，计算下一段的起始位置
31. int getNextSegmentStart(const char* text, int startIndex, int maxWidth) {
32.   int bytePos = startIndex;
33.   int segmentWidth = 0;
34.   int lastValidPos = bytePos;
35.   
36.   // 累计添加字符直到超出屏幕宽度
37.   while (text[bytePos] != '\0') {
38.     int charBytes = utf8CharBytes(text[bytePos]);
39.     char buffer[10] = {0};  // 临时存放单个字符，最多支持 4 字节编码
40.     for (int i = 0; i < charBytes; i++) {
41.       buffer[i] = text[bytePos + i];
42.     }
43.     int charWidth = u8g2.getUTF8Width(buffer);
44.    
45.     // 如果再加当前字符会超过最大宽度，则退出循环
46.     if (segmentWidth + charWidth > maxWidth) {
47.       break;
48.     }
49.     segmentWidth += charWidth;
50.     lastValidPos = bytePos + charBytes;
51.     bytePos += charBytes;
52.   }
53.   
54.   // 如果到达文本末尾，则下次从0开始
55.   if (text[bytePos] == '\0') {
56.     return 0;
57.   }
58.   return lastValidPos;
59. }
61. // 将当前段字符提取并显示到屏幕
62. void drawSegment(const char* text, int startIndex) {
63.   u8g2.clearBuffer();
64.   char segment[256] = {0};  // 存放本段字符串，注意长度根据文本长度自行调整
65.   int bytePos = startIndex;
66.   int segmentWidth = 0;
67.   int segIndex = 0;
68.   
69.   // 逐字符读取，直到累计宽度超过屏幕宽度或遇到字符串终结符
70.   while (text[bytePos] != '\0') {
71.     int charBytes = utf8CharBytes(text[bytePos]);
72.     char temp[10] = {0};
73.     for (int i = 0; i < charBytes; i++) {
74.       temp[i] = text[bytePos + i];
75.     }
76.     int charWidth = u8g2.getUTF8Width(temp);
77.    
78.     // 达到最大宽度就停止
79.     if (segmentWidth + charWidth > screenWidth) {
80.       break;
81.     }
82.    
83.     // 将当前字符复制到 segment 中
84.     for (int i = 0; i < charBytes; i++) {
85.       segment[segIndex++] = text[bytePos + i];
86.     }
87.     segmentWidth += charWidth;
88.     bytePos += charBytes;
89.   }
90.   segment[segIndex] = '\0';  // 末尾加上结束符
91.   
92.   // 将段文本显示在屏幕上，Y 坐标保持之前计算的值
93.   u8g2.setCursor(0, yPos);
94.   u8g2.print(segment);
95.   u8g2.sendBuffer();
96. }
98. void setup() {
99.   Serial.begin(115200);
100.   u8g2.begin();
101.   u8g2.enableUTF8Print();
102.   
103.   // 设置支持中文的字体
104.   u8g2.setFont(u8g2_font_wqy12_t_gb2312);
105.   
106.   // 获取字体高度，计算 Y 坐标（确保文字不会超出屏幕）
107.   fontHeight = u8g2.getMaxCharHeight();
108.   //yPos = 32 - fontHeight; // OLED 分辨率 128x32
109.   yPos = (32 + fontHeight) / 2;
110.   Serial.print("Font Height: ");
111.   Serial.println(fontHeight);
112.   
113.   // 如果需要第一次直接显示部分文本，可在 setup 中调用 drawSegment()
114.   drawSegment(longText, currentSegmentStart);
115. }
117. void loop() {
118.   unsigned long currentTime = millis();
119.   
120.   // 判断是否到达切换段的时间
121.   if (currentTime - lastSegmentChange >= segmentDisplayTime) {
122.     lastSegmentChange = currentTime;
123.    
124.     // 根据当前段计算下段起始位置
125.     currentSegmentStart = getNextSegmentStart(longText, currentSegmentStart, screenWidth);
126.   }
127.   
128.   drawSegment(longText, currentSegmentStart);
129. }

复制代码

来源：程序园用户自行投稿发布，如果侵权，请联系站长删除
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！