11469浏览
查看: 11469|回复: 11

[ESP8266/ESP32] 零基础向:用Beetle ESP32 C3点亮TFT屏幕

[复制链接]
本帖最后由 伊娃老师 于 2023-5-27 14:48 编辑


很多好玩的项目离不开一个能显示各种内容的显示屏,我为了在esp32上点亮一个TFT屏幕,折腾了10小时才成功,为了让大家不要经历我这种苦难,我把踩过的坑总结给大家,零基础也能点亮TFT。


【准备器材】
1. 主控板:
Beetle ESP32 C3:相比一般的ESP32更加小巧,也能直接插在面包板连接TFT
或者
一般的ESP32

2. TFT屏幕:我使用的是ST7735s的驱动,分享的内容不限此驱动,适用大部分TFT

3. 其他:面包板、面包线

4. 库文件:下载附件TFT_eSPI.zip


零基础向:用Beetle ESP32 C3点亮TFT屏幕图1零基础向:用Beetle ESP32 C3点亮TFT屏幕图2


【点亮TFT步骤】

1. 在Arduino设置ESP32环境
管理器地址:
https://dl.espressif.com/dl/package_esp32_index.json
https://github.com/Bodmer/TFT_eSPI

2. 安装TFT_eSPI库

3. 连线
脚位对应:
TFT_SCLK:对应SCL
TFT_MOSI:对应SDA
TFT_RST        :对应RES   
TFT_DC        :对应DC            
TFT_CS        :对应CS
TFT_BL        :对应BL


4. 更改User_setup.h中的驱动与引脚设置

5. 上传代码

6. 点亮TFT


【测试代码】
  1. #include <TFT_eSPI.h>  // 引入 TFT_eSPI 库
  2. TFT_eSPI tft;  // 创建 TFT_eSPI 对象
  3. void setup() {
  4.   tft.init();  // 初始化 TFT 屏幕
  5.   tft.setRotation(0));           // 调整屏幕方向,根据需要选择合适的值(0、1、2、3)
  6.   tft.fillScreen(TFT_BLACK);    // 设置屏幕背景颜色为黑色
  7.   tft.setTextSize(1);           // 设置文本大小
  8.   tft.setTextColor(TFT_WHITE);  // 设置文本颜色为白色
  9. }
  10. void loop() {
  11.   tft.fillScreen(TFT_BLACK);  // 清空屏幕,将屏幕填充为黑色
  12.   // 绘制不同图形
  13.   // 绘制一个像素点,参数:x 坐标,y 坐标,颜色
  14.   tft.drawPixel(5, 5, TFT_RED);
  15.   // 绘制一条直线,参数:起点的 x 坐标,起点的 y 坐标,终点的 x 坐标,终点的 y 坐标,颜色
  16.   tft.drawLine(10, 20, 60, 20, TFT_GREEN);
  17.   // 第一行:矩形
  18.   // 绘制一个矩形边框,参数:左上角的 x 坐标,左上角的 y 坐标,矩形的宽度,矩形的高度,颜色
  19.   tft.drawRect(10, 40, 15, 10, TFT_BLUE);
  20.   // 绘制一个矩形填充,参数:左上角的 x 坐标,左上角的 y 坐标,矩形的宽度,矩形的高度,颜色
  21.   tft.fillRect(10, 40, 15, 10, TFT_YELLOW);
  22.   // 第二行:圆形
  23.   // 绘制一个圆形边框,参数:圆心的 x 坐标,圆心的 y 坐标,圆的半径,颜色
  24.   tft.drawCircle(65, 35, 7, TFT_MAGENTA);
  25.   // 绘制一个圆形填充,参数:圆心的 x 坐标,圆心的 y 坐标,圆的半径,颜色
  26.   tft.fillCircle(85, 35, 7, TFT_CYAN);
  27.   // 第三行:三角形
  28.   // 绘制一个三角形边框,参数:三个顶点的 x 坐标,三个顶点的 y 坐标,颜色
  29.   tft.drawTriangle(75, 80, 85, 70, 85, 80, TFT_ORANGE);
  30.   // 绘制一个三角形填充,参数:三个顶点的 x 坐标,三个顶点的 y 坐标,颜色
  31.   tft.fillTriangle(105, 80, 115, 70, 115, 80, TFT_PURPLE);
  32.   // 第四行:圆角矩形
  33.   // 绘制一个圆角矩形边框,参数:左上角的 x 坐标,左上角的 y 坐标,矩形的宽度,矩形的高度,圆角的半径,颜色
  34.   tft.drawRoundRect(10, 75, 20, 20, 5, TFT_PINK);
  35.   // 绘制一个圆角矩形填充,参数:左上角的 x 坐标,左上角的 y 坐标,矩形的宽度,矩形的高度,圆角的半径,颜色
  36.   tft.fillRoundRect(35, 75, 20, 20, 5, TFT_BLUE);
  37.   // 显示文本
  38.   tft.setCursor(10, 10);            // 设置文本光标位置,参数:x 坐标,y 坐标
  39.   tft.println("Hello, I am Eva!");  // 打印文本,参数:文本内容
  40.   delay(2000);  // 等待2秒钟
  41. }
复制代码


【黑客帝国特效】
  1. //黑客帝国画面特效
  2. #include <TFT_eSPI.h>
  3. TFT_eSPI tft = TFT_eSPI();  // 初始化 TFT_eSPI 对象
  4. const int dropDelay = 100;  // 每个雨滴的延迟时间(毫秒)
  5. const int maxDrops = 30;    // 最大雨滴数量
  6. int dropX[maxDrops];      // 雨滴的X坐标
  7. int dropY[maxDrops];      // 雨滴的Y坐标
  8. char dropChar[maxDrops];  // 雨滴显示的字符
  9. int dropSpeed[maxDrops];  // 雨滴的下落速度
  10. void setup() {
  11.   tft.init();                 // 初始化 TFT_eSPI
  12.   tft.setRotation(0);         // 旋转屏幕以适应不同的连接方式
  13.   tft.fillScreen(TFT_BLACK);  // 清空屏幕为黑色
  14.   randomSeed(analogRead(0));  // 使用模拟引脚0的值作为随机种子
  15.   // 初始化每个雨滴的初始值
  16.   for (int i = 0; i < maxDrops; i++) {
  17.     dropX[i] = random(0, tft.width());
  18.     dropY[i] = -random(0, tft.height());
  19.     dropChar[i] = randomChar(2);
  20.     dropSpeed[i] = random(1, 5);
  21.   }
  22.   tft.setTextColor(TFT_GREEN);  // 设置字符颜色
  23.   tft.setTextSize(1);           // 设置字符大小
  24. }
  25. void loop() {
  26.   // 更新每个雨滴的位置
  27.   for (int i = 0; i < maxDrops; i++) {
  28.     dropY[i] += dropSpeed[i];
  29.     // 如果雨滴超出屏幕底部,将其重置到屏幕顶部
  30.     if (dropY[i] > tft.height() + 8) {
  31.       dropY[i] = -8;
  32.       dropX[i] = random(0, tft.width());
  33.       dropChar[i] = randomChar(2);
  34.     }
  35.   }
  36.   // 清空屏幕
  37.   tft.fillScreen(TFT_BLACK);
  38.   // 绘制雨滴
  39.   for (int i = 0; i < maxDrops; i++) {
  40.     tft.setCursor(dropX[i], dropY[i]);
  41.     tft.print(dropChar[i]);
  42.   }
  43.   delay(dropDelay);  // 等待一段时间,控制雨滴的下落速度
  44. }
  45. // 随机生成可显示的字符
  46. char randomChar(int i) {
  47.   if (i == 1) {
  48.     int charIndex = random(0, 95);  // ASCII 32-126 可显示的字符范围
  49.     return char(charIndex + 32);
  50.   } else if (i == 2) {
  51.     int charIndex = random(0, 2);  // 生成随机数 0 或 1
  52.     return char(charIndex + '0');  // 将数字转换为对应的字符
  53.   }
  54. }
复制代码


【三维选择立方体】
  1. //旋转的立方体
  2. #include <TFT_eSPI.h>
  3. #include <math.h>
  4. TFT_eSPI tft = TFT_eSPI();  // 创建 TFT_eSPI 实例
  5. // 立方体的顶点坐标
  6. float vertices[8][3] = {
  7.   { -25, -25, -25 },  // 0
  8.   { 25, -25, -25 },   // 1
  9.   { 25, 25, -25 },    // 2
  10.   { -25, 25, -25 },   // 3
  11.   { -25, -25, 25 },   // 4
  12.   { 25, -25, 25 },    // 5
  13.   { 25, 25, 25 },     // 6
  14.   { -25, 25, 25 }     // 7
  15. };
  16. // 连接立方体顶点的边
  17. int edges[12][2] = {
  18.   { 0, 1 },
  19.   { 1, 2 },
  20.   { 2, 3 },
  21.   { 3, 0 },
  22.   { 4, 5 },
  23.   { 5, 6 },
  24.   { 6, 7 },
  25.   { 7, 4 },
  26.   { 0, 4 },
  27.   { 1, 5 },
  28.   { 2, 6 },
  29.   { 3, 7 }
  30. };
  31. // 画面中心坐标
  32. int centerX;
  33. int centerY;
  34. // 旋转角度
  35. float angle = 0.0;
  36. void setup() {
  37.   tft.begin();         // 初始化 TFT 显示屏
  38.   tft.setRotation(0);  // 设置显示屏方向,根据需要进行调整
  39.   centerX = tft.width() / 2;
  40.   centerY = tft.height() / 2;
  41. }
  42. void loop() {
  43.   tft.fillScreen(TFT_BLACK);  // 清空屏幕
  44.   // 更新旋转角度
  45.   angle += 1;
  46.   // 旋转角度取模
  47.   angle = fmod(angle, 360.0);
  48.   // 绘制立方体的线条
  49.   for (int i = 0; i < 12; i++) {
  50.     int v0 = edges[i][0];
  51.     int v1 = edges[i][1];
  52.     float x0 = vertices[v0][0];
  53.     float y0 = vertices[v0][1];
  54.     float z0 = vertices[v0][2];
  55.     float x1 = vertices[v1][0];
  56.     float y1 = vertices[v1][1];
  57.     float z1 = vertices[v1][2];
  58.     // 绕Y轴旋转
  59.     rotateY(&x0, &z0, angle);
  60.     rotateY(&x1, &z1, angle);
  61.     // 绕X轴旋转
  62.     rotateX(&y0, &z0, angle);
  63.     rotateX(&y1, &z1, angle);
  64.     drawLine(x0, y0, x1, y1);
  65.   }
  66.   delay(1);  // 稍微延迟一下,调整旋转速度
  67. }
  68. // 绘制线条
  69. void drawLine(float x0, float y0, float x1, float y1) {
  70.   tft.drawLine(centerX + x0, centerY + y0, centerX + x1, centerY + y1, TFT_WHITE);
  71. }
  72. // 绕Y轴旋转
  73. void rotateY(float *x, float *z, float angle) {
  74.   float rad = angle * PI / 180.0;
  75.   float new_x = (*x) * cos(rad) + (*z) * sin(rad);
  76.   float new_z = (*z) * cos(rad) - (*x) * sin(rad);
  77.   (*x) = new_x;
  78.   (*z) = new_z;
  79. }
  80. // 绕X轴旋转
  81. void rotateX(float *y, float *z, float angle) {
  82.   float rad = angle * PI / 180.0;
  83.   float new_y = (*y) * cos(rad) - (*z) * sin(rad);
  84.   float new_z = (*z) * cos(rad) + (*y) * sin(rad);
  85.   (*y) = new_y;
  86.   (*z) = new_z;
  87. }
复制代码



腿毛利小五郎  初级技匠

发表于 2023-6-1 10:32:28

来了来了!
回复

使用道具 举报

txm派瑞深山锹  高级技师

发表于 2023-6-27 11:02:11

好东西,大大的学习到力
回复

使用道具 举报

Amos Young  中级技师

发表于 2023-7-4 16:58:06

好东西,泰裤辣,学习到了。
回复

使用道具 举报

腿毛利小五郎  初级技匠

发表于 2023-7-17 09:31:08

取字模和图片的例程代码有吗
回复

使用道具 举报

三春牛-创客  初级技神

发表于 2023-7-28 22:26:58

厉害厉害!!
回复

使用道具 举报

三春牛-创客  初级技神

发表于 2023-7-28 22:28:03

赞赞赞赞赞!!!
回复

使用道具 举报

花生编程  中级技匠

发表于 2023-7-29 21:24:43

厉害厉害!!
回复

使用道具 举报

花生编程  中级技匠

发表于 2023-7-29 21:27:36

好教程!
回复

使用道具 举报

小鱼果果  见习技师

发表于 2023-8-5 17:09:51

ii
回复

使用道具 举报

派大星ym  初级技匠

发表于 2023-8-20 11:34:39

学习了   
回复

使用道具 举报

派大星ym  初级技匠

发表于 2023-8-20 11:37:58

        
回复

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

为本项目制作心愿单
购买心愿单
心愿单 编辑
[[wsData.name]]

硬件清单

  • [[d.name]]
btnicon
我也要做!
点击进入购买页面
上海智位机器人股份有限公司 沪ICP备09038501号-4

© 2013-2024 Comsenz Inc. Powered by Discuz! X3.4 Licensed

mail