登录/ 注册
 找回密码
 立即注册
关闭

CSDN热搜

程序园 精品问答 技术交流 资源下载
返回列表 发新帖
首页 › 业界区 › 业界 ›ESP32+Arduino入门（四）：OLED屏随机显示古诗 ...

ESP32+Arduino入门（四）：OLED屏随机显示古诗

埤兆 4 天前
前言

我觉得去做一些简单又好玩的案例是入门很好的选择。
在实践的过程中会碰到很多需求很多问题在解决这些需求这些问题的过程就是在学习的过程。
今天我来分享一个随机显示古诗的案例，如果对此感兴趣可以跟我一起动手实践起来。
案例效果：
1.jpeg

拆解任务

现在我们先来拆解一下需求。
就是向一个web服务发送一个Get请求获取数据然后将数据显示在OLED屏上，为了效果更好采用分段显示。
2.png

首先我们的OLED屏需要连接到一个OLED屏，这个在教程（二）中写了。
ESP32+Arduino入门教程（二）：连接OLED屏
如何输出古诗或者其他内容呢？
需要创建一个Web服务，然后随便接入一个大模型，让其输出古诗或其他内容再返回。
就算你从来没有写过Web服务也没关系，这个教程使用Python来创建一个非常简单的Web服务，小白也能实现。
在Arduino中编写代码，ESP32连接WIFI然后发送一个Get请求获取结果，将结果分段显示在OLED屏上。
搭建开发环境在教程（一）中写了。
ESP32+Arduino入门（一）：开发环境搭建
创建Web服务

创建一个Python虚拟环境，安装一下flask与openai。
写一个app.py如下所示：
  1. from flask import Flask
  2. from openai import OpenAI
  4. app = Flask(__name__)
  6. client = OpenAI(api_key="你的api key",
  7.                 base_url="https://api.siliconflow.cn/v1")
  11. @app.route('/OutputClassicalPoetry', methods=['GET'])
  12. def output_classical_poetry():
  13.     response = client.chat.completions.create(
  14.     model="internlm/internlm2_5-20b-chat",
  15.     messages=[
  16.         {'role': 'user',
  17.         'content': "输出一句古诗。"}
  18.     ],
  19.     stream=False,
  20.     temperature=0.7
  21.     )
  22.     response_text = response.choices[0].message.content
  23.     return response_text
  25. if __name__ == '__main__':
  26.     app.run(host='0.0.0.0', debug=True)
复制代码
运行之后，查看一下自己的ip地址。
打开cmd输入ipconfig：
3.png

打开浏览器，输入http://你的ip地址:5000/OutputClassicalPoetry，即可看到如下的效果：
4.png

就说明这个简单的Web服务已经搞定了。
ESP32连接WIFI并发送Get请求

代码如下：
  1. #include <WiFi.h>
  2. #include <HTTPClient.h>
  3. const char* ssid = "你的WIFI名称";
  4. const char* password = "你的WIFI密码";
  5. const char* serverUrl = "上面的接口地址";
  6. void setup() {
  7.   Serial.begin(115200);
  8.   
  9.   // 连接WiFi
  10.   WiFi.begin(ssid, password);
  11.   Serial.print("正在连接到WiFi...");
  12.   
  13.   while (WiFi.status() != WL_CONNECTED) {
  14.     delay(500);
  15.     Serial.print(".");
  16.   }
  17.   
  18.   Serial.println("\nWiFi已连接");
  19.   Serial.print("IP地址: ");
  20.   Serial.println(WiFi.localIP());
  21. }
  22. void loop() {
  23.   // 确保WiFi保持连接
  24.   if (WiFi.status() != WL_CONNECTED) {
  25.     Serial.println("WiFi连接断开，尝试重连...");
  26.     WiFi.reconnect();
  27.     delay(2000);  // 等待重连
  28.     return;
  29.   }
  30.   HTTPClient http;
  31.   
  32.   Serial.println("\n正在发送GET请求...");
  33.   http.begin(serverUrl);
  34.   // 设置超时时间
  35.   http.setTimeout(10000);
  36.   
  37.   // 发送请求并获取状态码
  38.   int httpCode = http.GET();
  39.   
  40.   // 处理响应
  41.   if (httpCode > 0) {
  42.     Serial.printf("HTTP状态码: %d\n", httpCode);
  43.    
  44.     if (httpCode == HTTP_CODE_OK) {
  45.       String payload = http.getString();
  46.       Serial.println("响应内容:");
  47.       Serial.println(payload);
  48.     } else {
  49.       Serial.println("非200响应，完整响应头:");
  50.       Serial.println(http.getString());  // 输出错误信息
  51.     }
  52.   } else {
  53.     Serial.printf("请求失败，错误: %s\n", http.errorToString(httpCode).c_str());
  54.   }
  55.   
  56.   http.end();  // 必须释放资源
  57.   
  58.   delay(5000); // 等待5秒
  59. }
复制代码
电脑需要连接同一个WIFI。
烧录到ESP32运行。
现在打开串口监视器查看效果：
5.png

分段显示在OLED屏

代码如下：
  1. #include <WiFi.h>
  2. #include <HTTPClient.h>
  3. #include <U8g2lib.h>
  4. U8G2_SSD1306_128X32_UNIVISION_F_SW_I2C u8g2(U8G2_R0, 0, 1, U8X8_PIN_NONE);
  5. // WiFi配置
  6. const char* ssid = "你的WIFI名称";
  7. const char* password = "你的WIFI密码";
  8. const char* serverUrl = "上面的接口地址";
  9. // 显示相关变量
  10. uint8_t fontHeight;
  11. uint8_t yPos;
  12. const uint16_t screenWidth = 128;
  13. const unsigned long segmentDisplayTime = 2000;
  14. unsigned long lastSegmentChange = 0;
  15. int currentSegmentStart = 0;
  16. bool needFullCycleReset = false;  // 新增循环重置标志
  17. // 文本存储
  18. String receivedText = "";
  19. bool newTextReceived = false;
  20. // UTF-8字符测量
  21. int utf8CharBytes(char c) {
  22.   if ((c & 0x80) == 0) return 1;
  23.   else if ((c & 0xE0) == 0xC0) return 2;
  24.   else if ((c & 0xF0) == 0xE0) return 3;
  25.   else if ((c & 0xF8) == 0xF0) return 4;
  26.   return 1;
  27. }
  28. // 分段计算（增加循环重置检测）
  29. int getNextSegmentStart(const char* text, int startIndex, int maxWidth) {
  30.   if (!text || strlen(text) == 0 || startIndex >= strlen(text)) return 0;
  31.   
  32.   int bytePos = startIndex;
  33.   int segmentWidth = 0;
  34.   int lastValidPos = bytePos;
  35.   bool hasAdvanced = false;  // 检测是否前进过
  36.   
  37.   while (text[bytePos] != '\0') {
  38.     hasAdvanced = true;
  39.     int charBytes = utf8CharBytes(text[bytePos]);
  40.     char buffer[10] = {0};
  41.     for (int i = 0; i < charBytes; i++) buffer[i] = text[bytePos + i];
  42.    
  43.     int charWidth = u8g2.getUTF8Width(buffer);
  44.     if (segmentWidth + charWidth > maxWidth) break;
  45.    
  46.     segmentWidth += charWidth;
  47.     lastValidPos = bytePos + charBytes;
  48.     bytePos += charBytes;
  49.   }
  50.   
  51.   // 当没有前进且不是初始位置时，说明需要重置
  52.   if (!hasAdvanced && startIndex != 0) return 0;
  53.   return (text[bytePos] == '\0') ? 0 : lastValidPos;
  54. }
  55. // 显示处理
  56. void drawSegment(const char* text, int startIndex) {
  57.   if (!text || strlen(text) == 0) {
  58.     u8g2.clearBuffer();
  59.     u8g2.setCursor(0, yPos);
  60.     u8g2.print("无内容");
  61.     u8g2.sendBuffer();
  62.     return;
  63.   }
  64.   
  65.   u8g2.clearBuffer();
  66.   char segment[256] = {0};
  67.   int bytePos = startIndex;
  68.   int segmentWidth = 0;
  69.   int segIndex = 0;
  70.   
  71.   while (text[bytePos] != '\0') {
  72.     int charBytes = utf8CharBytes(text[bytePos]);
  73.     char temp[10] = {0};
  74.     for (int i = 0; i < charBytes; i++) temp[i] = text[bytePos + i];
  75.     int charWidth = u8g2.getUTF8Width(temp);
  76.    
  77.     if (segmentWidth + charWidth > screenWidth) break;
  78.    
  79.     for (int i = 0; i < charBytes; i++) segment[segIndex++] = text[bytePos + i];
  80.     segmentWidth += charWidth;
  81.     bytePos += charBytes;
  82.   }
  83.   segment[segIndex] = '\0';
  84.   
  85.   u8g2.setCursor(0, yPos);
  86.   u8g2.print(segment);
  87.   u8g2.sendBuffer();
  88. }
  89. // 数据获取
  90. void fetchTextFromServer() {
  91.   if (WiFi.status() != WL_CONNECTED) return;
  92.   
  93.   HTTPClient http;
  94.   http.begin(serverUrl);
  95.   Serial.print("[GET] 发送请求至: ");
  96.   Serial.println(serverUrl);
  97.   
  98.   int httpCode = http.GET();
  99.   if (httpCode == HTTP_CODE_OK) {
  100.     String newText = http.getString();
  101.     Serial.print("[GET] 接收结果: ");
  102.     Serial.println(newText);
  103.    
  104.     if (newText != receivedText) {
  105.       receivedText = newText;
  106.       newTextReceived = true;
  107.       needFullCycleReset = true;  // 标记需要完整循环
  108.     }
  109.   }
  110.   http.end();
  111. }
  112. void setup() {
  113.   Serial.begin(115200);
  114.   WiFi.begin(ssid, password);
  115.   Serial.print("连接WiFi: ");
  116.   Serial.println(ssid);
  117.   
  118.   while (WiFi.status() != WL_CONNECTED) delay(500);
  119.   Serial.println("WiFi连接成功");
  120.   
  121.   u8g2.begin();
  122.   u8g2.enableUTF8Print();
  123.   u8g2.setFont(u8g2_font_wqy12_t_gb2312);
  124.   
  125.   fontHeight = u8g2.getMaxCharHeight();
  126.   yPos = (32 + fontHeight) / 2;
  127.   drawSegment("等待数据...", 0);
  128.   fetchTextFromServer();
  129. }
  130. void loop() {
  131.   static unsigned long lastFetchTime = 0;
  132.   unsigned long currentTime = millis();
  133.   // 每60秒获取数据
  134.   if (currentTime - lastFetchTime >= 60000) {
  135.     lastFetchTime = currentTime;
  136.     fetchTextFromServer();
  137.   }
  138.   // 处理新文本
  139.   if (newTextReceived) {
  140.     newTextReceived = false;
  141.     currentSegmentStart = 0;
  142.     lastSegmentChange = currentTime;
  143.     drawSegment(receivedText.c_str(), currentSegmentStart);
  144.     needFullCycleReset = false;  // 重置标志
  145.   }
  146.   
  147.   // 分段切换逻辑
  148.   if (currentTime - lastSegmentChange >= segmentDisplayTime) {
  149.     int prevStart = currentSegmentStart;
  150.     currentSegmentStart = getNextSegmentStart(receivedText.c_str(), currentSegmentStart, screenWidth);
  151.    
  152.     // 完整循环后重置
  153.     if (currentSegmentStart == 0 && prevStart != 0) {
  154.       needFullCycleReset = true;
  155.     }
  156.    
  157.     // 执行实际切换
  158.     if (needFullCycleReset) {
  159.       currentSegmentStart = 0;
  160.       needFullCycleReset = false;
  161.       lastSegmentChange = currentTime;  // 重置计时器
  162.     } else {
  163.       lastSegmentChange = currentTime;
  164.     }
  165.    
  166.     drawSegment(receivedText.c_str(), currentSegmentStart);
  167.   }
  168.   
  169.   delay(100);
  170. }
复制代码
烧录到ESP32运行即可得到上面的效果。
  1. // 每60秒获取数据
  2.   if (currentTime - lastFetchTime >= 60000) {
  3.     lastFetchTime = currentTime;
  4.     fetchTextFromServer();
  5.   }
复制代码
这里可以更改获取数据的时间。

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

使用道具 举报
相关推荐
B Color Image Link Quote Code Smilies
您需要登录后才可以回帖 登录 | 立即注册
发帖
埤兆
4 天前

0

粉丝关注

9

主题发布

板块介绍填写区域，请于后台编辑
微信扫一扫