【花雕学编程】Arduino TFT 之动态绘制线条和三角形

在这里插入图片描述

Arduino是一个开放源码的电子原型平台,它可以让你用简单的硬件和软件来创建各种互动的项目。Arduino的核心是一个微控制器板,它可以通过一系列的引脚来连接各种传感器、执行器、显示器等外部设备。Arduino的编程是基于C/C++语言的,你可以使用Arduino IDE(集成开发环境)来编写、编译和上传代码到Arduino板上。Arduino还有一个丰富的库和社区,你可以利用它们来扩展Arduino的功能和学习Arduino的知识。

Arduino的特点是:
1、开放源码:Arduino的硬件和软件都是开放源码的,你可以自由地修改、复制和分享它们。
2、易用:Arduino的硬件和软件都是为初学者和非专业人士设计的,你可以轻松地上手和使用它们。
3、便宜:Arduino的硬件和软件都是非常经济的,你可以用很低的成本来实现你的想法。
4、多样:Arduino有多种型号和版本,你可以根据你的需要和喜好来选择合适的Arduino板。
5、创新:Arduino可以让你用电子的方式来表达你的创意和想象,你可以用Arduino来制作各种有趣和有用的项目,如机器人、智能家居、艺术装置等。

在这里插入图片描述
Arduino TFT 是指与 Arduino 开发板兼容的薄膜晶体管(Thin - Film - Transistor)液晶显示屏,以下是其主要特点、应用场景及注意事项的详细介绍:

一、主要特点
1、高分辨率显示:TFT 显示屏通常具有较高的分辨率,能够提供清晰、细腻的图像和文字显示效果。这使得它可以展示复杂的图形界面、丰富的色彩以及详细的信息,满足各种应用对显示质量的要求。
2、快速响应速度:TFT 技术能够实现快速的像素切换,响应速度比传统的液晶显示屏更快。这意味着在显示动态图像或进行交互操作时,不会出现明显的拖影或延迟,提供流畅的视觉体验。
3、宽视角:具有较宽的可视角度,无论从哪个方向观看显示屏,都能获得清晰的图像和一致的色彩表现。这使得在不同角度下观察显示屏时,都能保证信息的准确传达,方便多人同时查看或在不同位置操作设备。
4、丰富的色彩表现:能够呈现出丰富、鲜艳的色彩,具备较高的色彩饱和度和对比度。可以准确地显示各种颜色,使图像和界面更加生动逼真,适用于需要展示彩色图像或进行视觉交互的应用。
5、易于控制:通过 Arduino 开发板可以方便地对 TFT 显示屏进行控制。借助相应的库函数和代码,能够轻松实现图像绘制、文字显示、触摸交互等功能,降低了开发难度,即使对于没有深厚显示技术背景的开发者也较为友好。

二、应用场景
1、人机交互界面:在各种电子设备中,如智能仪器仪表、智能家居控制系统、工业自动化控制面板等,作为人机交互的窗口,用于显示菜单、参数设置界面、实时数据监测以及操作提示等信息,方便用户与设备进行交互。
2、教育领域:可用于制作教育实验设备、电子学习工具等。例如,在教学机器人中作为显示屏,展示机器人的状态信息、任务指令以及互动内容;在电子积木等教育玩具中,显示图形化的编程界面或游戏画面,增加学习的趣味性和互动性。
3、便携式设备:如手持游戏机、电子书阅读器、便携式多媒体播放器等。其高分辨率、宽视角和丰富的色彩表现能够为用户提供良好的视觉享受,同时快速响应速度也适合处理游戏中的动态画面和多媒体内容的播放。
4、物联网应用:在物联网项目中,作为节点设备的显示屏,用于展示传感器采集的数据、设备状态信息以及远程控制界面等。例如,在环境监测系统中,显示温度、湿度、空气质量等数据;在智能农业中,展示农田的灌溉状态、作物生长信息等。

三、需要注意的事项
1、电源管理:TFT 显示屏通常需要稳定的电源供应,并且其功耗相对较高。在与 Arduino 连接时,要确保电源能够满足显示屏的需求,避免因电源不稳定导致显示屏出现闪烁、显示异常或损坏等问题。同时,要合理设计电源电路,考虑节能措施,特别是在电池供电的设备中,以延长设备的续航时间。
2、接口兼容性:不同型号的 Arduino 开发板和 TFT 显示屏可能具有不同的接口类型和通信协议。在选择和使用时,要确保两者之间的接口兼容,并且正确连接引脚。有些 TFT 显示屏可能需要额外的驱动电路或转接板才能与 Arduino 顺利连接,需要仔细阅读产品说明书并进行相应的配置。
3、显示内存限制:虽然 TFT 显示屏能够显示丰富的内容,但 Arduino 的内存资源有限。在绘制复杂图像或显示大量数据时,可能会遇到内存不足的问题。因此,需要合理规划显示内容,优化图像和数据的存储方式,避免因内存耗尽导致程序崩溃或显示异常。
4、驱动程序和库的使用:为了实现 TFT 显示屏的各种功能,需要使用相应的驱动程序和库。不同的显示屏可能需要不同的库,并且这些库可能会不断更新和改进。在使用过程中,要及时关注官方文档和社区资源,获取最新的驱动程序和库,并了解其使用方法和注意事项。同时,要注意库与 Arduino IDE 版本的兼容性,避免出现编译错误或运行时问题。
5、电磁干扰:在一些电磁环境较为复杂的场合,TFT 显示屏可能会受到电磁干扰,导致显示出现噪点、闪烁或颜色异常等问题。此时,需要采取相应的抗干扰措施,如合理布线、使用屏蔽线、添加滤波电容等,以确保显示屏的稳定工作。

在这里插入图片描述

一、主要特点

  1. 动态性与实时更新
    动态绘制:
    动态绘制的核心在于实时更新屏幕内容。通过编程控制线条或三角形的位置、长度、角度、颜色等属性,实现动画效果。
    支持逐帧渲染,能够呈现流畅的动画效果(如线条延伸、三角形旋转)。
    灵活性与参数化:
    线条和三角形的属性(如起点、终点、边长、填充颜色)可以通过变量动态调整,适应不同的需求。
    参数化的绘图方式便于实现复杂的运动轨迹和变换效果。
  2. 多维度表现
    线条:
    线条可以用来表示路径、趋势、边界等信息。
    支持多种样式(如实线、虚线)和宽度设置,增强视觉表达力。
    三角形:
    三角形是一种基础的二维图形,常用于构建复杂形状(如多边形、网格)。
    支持填充颜色和边框样式,适合展示区域划分或几何关系。
  3. 低资源占用与高效性
    在资源受限的嵌入式设备中,使用简单的几何图形(如线条和三角形)代替复杂纹理,显著降低内存和 CPU 的开销。
    利用 TFT_eSPI 库优化绘图性能,支持部分刷新技术,减少不必要的屏幕重绘。
  4. 模块化设计与可扩展性
    动态绘制的功能通常采用模块化设计,便于添加新特性(如旋转、缩放、渐变色)。
    可根据需求扩展为更复杂的图形(如多边形、三维投影)。

二、应用场景

  1. 数据可视化
    在工业监控、环境监测等场景中,动态线条可以用来表示趋势变化(如温度曲线、电压波动)。
    示例:气象站显示温度变化曲线,利用动态线条展示实时数据。
  2. 艺术装置与创意设计
    在艺术装置中,动态线条和三角形可以构成抽象图案或动态效果,吸引观众注意力。
    示例:互动展览中的几何图形动画,随着用户动作生成动态线条或旋转三角形。
  3. 教育与教学工具
    在教学或实验中,动态绘制可以帮助学生理解几何原理、坐标系概念以及算法逻辑。
    示例:课堂上的几何图形演示程序,动态绘制三角形并计算其面积和周长。
  4. 游戏与娱乐设备
    在小型游戏中,线条和三角形可以用作游戏元素(如路径、障碍物、角色)。
    示例:迷宫游戏中动态绘制路径,玩家需要沿着线条移动以完成任务。
  5. 交互设计与用户界面
    在智能设备中,动态线条和三角形可以用作进度条、指示器或菜单导航。
    示例:智能家居助手的进度条用动态线条表示任务完成度,三角形箭头指向当前选项。

三、需要注意的事项

  1. 硬件性能与屏幕分辨率
    屏幕分辨率与绘图效率:
    高分辨率屏幕可能增加绘图负担,需优化绘图算法(如局部刷新而非全屏重绘)。
    动态绘制时避免频繁清屏,减少闪烁现象。
    帧率控制:
    过高的帧率可能导致硬件过载,过低则显得卡顿。
    使用 millis() 函数实现非阻塞式动画控制,确保稳定的帧率。
  2. 动画流畅性与视觉舒适度
    线条绘制速度:
    线条延伸或移动的速度应适中,避免过快导致视觉疲劳或过慢显得拖沓。
    三角形旋转与缩放:
    旋转和缩放过程应平滑,避免突兀的变化影响用户体验。
    可使用插值算法(如线性插值)实现自然过渡。
  3. 代码优化与内存管理
    减少资源占用:
    在资源有限的 Arduino 中,需注意内存使用,避免因复杂动画导致内存溢出。
    使用数组或结构体存储图形数据,并定期清理无效变量。
    模块化设计:
    将线条和三角形绘制功能封装为独立模块,便于维护和扩展。
  4. 交互设计与用户体验
    响应灵敏性:
    如果涉及用户输入(如触摸屏或传感器),需确保动画响应迅速且准确。
    示例:通过手势控制线条延伸方向或三角形旋转角度时,延迟过高会降低用户体验。
    视觉表达清晰性:
    线条和三角形的颜色、粗细、透明度等属性应与背景协调,避免视觉干扰。
    示例:使用对比色突出重要信息(如红色线条表示警告)。
  5. 环境适应性与电源管理
    亮度与可视性:
    在户外或强光环境下,需选择高亮度屏幕或增加遮光设计,确保图形清晰可见。
    功耗优化:
    对于电池供电设备,需优化背光控制和动画频率,延长运行时间。
  6. 扩展性与兼容性
    支持更多特效:
    设计时需考虑未来扩展需求,例如添加更多的图形样式(如虚线、渐变填充)或复杂动画(如多边形分解)。
    跨平台兼容性:
    确保代码结构清晰,便于移植到其他硬件平台(如 ESP32 或 Raspberry Pi)。

在这里插入图片描述
1、ESP32驱动TFT屏动态绘制红绿线条

#include<TFT_eSPI.h> 
TFT_eSPI tft = TFT_eSPI();
 
void setup() { 
    tft.init();
    tft.setRotation(1);
    tft.fillScreen(TFT_BLACK);
} 
 
void loop() { 
    for (int x = 0; x < tft.width(); x += 10) {
        tft.drawLine(0, 0, x, tft.height(), TFT_RED);
        delay(100);
    } 
    for (int y = 0; y < tft.height(); y += 10) {
        tft.drawLine(0, 0, tft.width(), y, TFT_GREEN);
        delay(100);
    } 
    delay(2000);
    tft.fillScreen(TFT_BLACK);
}

要点解读:
硬件配置:该程序基于ESP32-WROOM-32模块与2.8寸TFT屏(分辨率240×320)的组合,利用TFT_eSPI库实现图形渲染。
动态效果实现:通过双重循环结构控制线条的绘制位置,每次循环后延迟100ms形成动态渐变效果。外层循环结束后延迟2秒清屏,实现循环动画。
显示控制:setRotation(1)将屏幕顺时针旋转90度,fillScreen(TFT_BLACK)用于清屏,确保动画连续性。

2、Arduino控制OLED屏绘制动态三角形

#include <Adafruit_GFX.h>
#include <Adafruit_SSD1306.h>
 
#define SCREEN_WIDTH 128
#define SCREEN_HEIGHT 64
Adafruit_SSD1306 display(SCREEN_WIDTH, SCREEN_HEIGHT, &Wire, -1);
 
void setup() {
    if (!display.begin(SSD1306_I2C_ADDRESS, 0x3C)) {
        for (;;);
    }
    display.clearDisplay();
}
 
void loop() {
    for (int i = 0; i <= 64; i += 5) {
        display.clearDisplay();
        display.fillTriangle(32, 64 - i, 64, i, 96, 64 - i, SSD1306_WHITE);
        display.display();
        delay(100);
    }
}

要点解读:
硬件配置:采用I2C接口的0.96寸OLED屏(分辨率128×64),通过Adafruit_GFX库与SSD1306驱动实现图形绘制。
动态效果实现:通过调整三角形顶点坐标,在垂直方向形成动态移动效果。每次迭代清屏后重新绘制,配合100ms延迟实现平滑动画。
显示控制:clearDisplay()确保每次迭代前屏幕重置,fillTriangle()的三个参数分别对应三角形三个顶点的坐标和颜色。

3、ESP32驱动TFT屏绘制动态填充三角形

#include "SPI.h"
#include "Adafruit_GFX.h"
#include "Adafruit_GC9A01A.h"
 
#define TFT_DC 2
#define TFT_CS 4
Adafruit_GC9A01A tft(TFT_CS, TFT_DC);
 
void setup() {
    tft.begin();
    tft.setRotation(3);
    tft.fillScreen(GC9A01A_BLACK);
}
 
void loop() {
    for (int i = 0; i <= 120; i += 5) {
        tft.fillScreen(GC9A01A_BLACK);
        tft.fillTriangle(60, 240 - i, 120, i, 180, 240 - i, GC9A01A_RED);
        delay(100);
    }
}

要点解读:
硬件配置:基于ESP32与1.28寸TFT屏(分辨率240×240)的组合,采用SPI接口与GC9A01A驱动实现高分辨率显示。
动态效果实现:通过调整三角形顶点坐标,在垂直方向形成动态收缩效果。每次迭代前清屏后重新绘制,配合100ms延迟实现平滑动画。
显示控制:setRotation(3)将屏幕设置为横向显示,fillTriangle()的三个参数分别对应三角形三个顶点的坐标和颜色。

在这里插入图片描述
4、动态绘制随机线条

#include <Adafruit_GFX.h>
#include <Adafruit_ST7735.h>

// 定义TFT引脚
#define TFT_CS     10
#define TFT_RST    9
#define TFT_DC     8
Adafruit_ST7735 tft = Adafruit_ST7735(TFT_CS, TFT_DC, TFT_RST);

// 线条绘制间隔时间
const int drawInterval = 500;
unsigned long previousDrawMillis = 0;

void setup() {
  Serial.begin(9600);
  tft.initR(INITR_BLACKTAB);
  tft.setRotation(1);
  tft.fillScreen(ST7735_BLACK);
}

void loop() {
  unsigned long currentMillis = millis();

  if (currentMillis - previousDrawMillis >= drawInterval) {
    previousDrawMillis = currentMillis;
    drawRandomLine();
  }
}

void drawRandomLine() {
  int x1 = random(0, tft.width());
  int y1 = random(0, tft.height());
  int x2 = random(0, tft.width());
  int y2 = random(0, tft.height());
  uint16_t color = randomColor();

  tft.drawLine(x1, y1, x2, y2, color);
}

uint16_t randomColor() {
  return tft.color565(random(0, 256), random(0, 256), random(0, 256));
}

要点解读:
库和引脚设置:引入Adafruit_GFX和Adafruit_ST7735库用于驱动 TFT 屏幕,定义 TFT 引脚并在setup函数中初始化屏幕。
时间控制:利用millis()函数实现非阻塞延时,每隔drawInterval时间绘制一条新的随机线条。
随机线条绘制:drawRandomLine函数随机生成线条的起点(x1, y1)和终点(x2, y2),并通过randomColor函数随机生成线条颜色,然后使用tft.drawLine函数绘制线条。
随机颜色生成:randomColor函数使用tft.color565将随机的 RGB 值转换为 TFT 屏幕支持的 16 位颜色值。

5、动态绘制旋转的三角形

#include <Adafruit_GFX.h>
#include <Adafruit_ST7735.h>
#include <math.h>

// 定义TFT引脚
#define TFT_CS     10
#define TFT_RST    9
#define TFT_DC     8
Adafruit_ST7735 tft = Adafruit_ST7735(TFT_CS, TFT_DC, TFT_RST);

// 三角形中心坐标
const int centerX = 120;
const int centerY = 120;
// 三角形半径
const int radius = 50;
// 旋转角度增量
const float angleIncrement = 0.05;
float currentAngle = 0;

// 绘制间隔时间
const int drawInterval = 20;
unsigned long previousDrawMillis = 0;

void setup() {
  Serial.begin(9600);
  tft.initR(INITR_BLACKTAB);
  tft.setRotation(1);
  tft.fillScreen(ST7735_BLACK);
}

void loop() {
  unsigned long currentMillis = millis();

  if (currentMillis - previousDrawMillis >= drawInterval) {
    previousDrawMillis = currentMillis;
    drawRotatingTriangle();
    currentAngle += angleIncrement;
    if (currentAngle >= 2 * PI) {
      currentAngle = 0;
    }
  }
}

void drawRotatingTriangle() {
  tft.fillScreen(ST7735_BLACK);

  int x1 = centerX + radius * cos(currentAngle);
  int y1 = centerY + radius * sin(currentAngle);
  int x2 = centerX + radius * cos(currentAngle + 2 * PI / 3);
  int y2 = centerY + radius * sin(currentAngle + 2 * PI / 3);
  int x3 = centerX + radius * cos(currentAngle + 4 * PI / 3);
  int y3 = centerY + radius * sin(currentAngle + 4 * PI / 3);

  tft.fillTriangle(x1, y1, x2, y2, x3, y3, ST7735_RED);
}

要点解读:
旋转逻辑:通过不断增加currentAngle的值实现三角形的旋转,当角度达到2 * PI时,将其重置为 0,形成循环。
三角形顶点计算:利用三角函数cos和sin根据当前旋转角度计算三角形三个顶点的坐标。
绘制更新:每次绘制前清屏,然后使用tft.fillTriangle函数填充三角形,实现旋转动画效果。

6、动态绘制移动的线条和闪烁的三角形

#include <Adafruit_GFX.h>
#include <Adafruit_ST7735.h>

// 定义TFT引脚
#define TFT_CS     10
#define TFT_RST    9
#define TFT_DC     8
Adafruit_ST7735 tft = Adafruit_ST7735(TFT_CS, TFT_DC, TFT_RST);

// 线条移动速度
const int lineSpeed = 2;
int lineX = 0;

// 三角形闪烁间隔时间
const int triangleBlinkInterval = 500;
unsigned long previousTriangleBlinkMillis = 0;
bool triangleVisible = true;

// 绘制间隔时间
const int drawInterval = 20;
unsigned long previousDrawMillis = 0;

void setup() {
  Serial.begin(9600);
  tft.initR(INITR_BLACKTAB);
  tft.setRotation(1);
  tft.fillScreen(ST7735_BLACK);
}

void loop() {
  unsigned long currentMillis = millis();

  if (currentMillis - previousDrawMillis >= drawInterval) {
    previousDrawMillis = currentMillis;
    drawMovingLine();
    lineX += lineSpeed;
    if (lineX > tft.width()) {
      lineX = 0;
    }
  }

  if (currentMillis - previousTriangleBlinkMillis >= triangleBlinkInterval) {
    previousTriangleBlinkMillis = currentMillis;
    triangleVisible = !triangleVisible;
  }

  drawBlinkingTriangle();
}

void drawMovingLine() {
  tft.fillScreen(ST7735_BLACK);
  tft.drawLine(lineX, 0, lineX, tft.height(), ST7735_BLUE);
}

void drawBlinkingTriangle() {
  if (triangleVisible) {
    int x1 = tft.width() / 2;
    int y1 = 20;
    int x2 = tft.width() / 2 - 30;
    int y2 = 80;
    int x3 = tft.width() / 2 + 30;
    int y3 = 80;
    tft.fillTriangle(x1, y1, x2, y2, x3, y3, ST7735_YELLOW);
  }
}

要点解读:
线条移动:通过不断增加lineX的值实现线条的水平移动,当线条超出屏幕宽度时,将其重置到屏幕左侧。
三角形闪烁:利用triangleVisible布尔变量控制三角形的显示和隐藏,每隔triangleBlinkInterval时间切换一次状态。
绘制逻辑:drawMovingLine函数清屏后绘制移动的线条,drawBlinkingTriangle函数根据triangleVisible的值决定是否绘制三角形。

注意,以上案例只是为了拓展思路,仅供参考。它们可能有错误、不适用或者无法编译。您的硬件平台、使用场景和Arduino版本可能影响使用方法的选择。实际编程时,您要根据自己的硬件配置、使用场景和具体需求进行调整,并多次实际测试。您还要正确连接硬件,了解所用传感器和设备的规范和特性。涉及硬件操作的代码,您要在使用前确认引脚和电平等参数的正确性和安全性。

在这里插入图片描述

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

驴友花雕

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值