【花雕学编程】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. Arduino TFT 绘制矩形
    主要特点
    绘制方法简单直接:在 Arduino 环境中,借助 Adafruit_GFX 等图形库,绘制矩形仅需指定矩形的左上角坐标、宽度和高度等参数。例如,使用fillRect(x, y, width, height, color)函数就能快速绘制一个填充颜色的矩形,drawRect(x, y, width, height, color)函数可绘制空心矩形,这种简单的调用方式便于开发者操作。
    灵活性高:能够灵活控制矩形的位置、大小和颜色。开发者可以根据实际需求动态调整这些参数,从而绘制出不同大小、不同位置和不同颜色的矩形,以满足多样化的设计要求。
    绘制效率较高:矩形的绘制算法相对简单,计算机处理起来较为高效,在屏幕刷新频率较高或者需要频繁更新矩形显示时,能保证较好的性能。
    应用场景
    界面布局:在设计 TFT 屏幕的用户界面时,矩形常用于划分不同的功能区域。比如,在一个智能家居控制系统的界面中,用不同颜色的矩形框出温度显示区、开关控制区等,使界面结构清晰,用户易于操作。
    图形绘制基础:矩形是构成复杂图形的基础元素之一。通过组合多个矩形,可以绘制出更复杂的图形,如房屋、汽车等,为实现更丰富的图形显示效果提供支持。
    进度条显示:进度条通常可以看作是一个动态变化的矩形。在文件下载、程序加载等场景中,通过改变矩形的宽度来直观地显示进度,让用户实时了解操作的进展情况。
    需要注意的事项
    坐标范围:要确保矩形的坐标和尺寸在 TFT 屏幕的有效范围内,否则可能会导致部分或全部矩形超出屏幕显示区域,影响显示效果。
    颜色深度和对比度:不同的 TFT 屏幕支持不同的颜色深度,在选择矩形颜色时,要考虑屏幕的实际显示能力。同时,要注意矩形颜色与背景颜色的对比度,以保证矩形内容清晰可读。
    刷新频率:如果需要动态改变矩形的大小、位置或颜色,要合理控制刷新频率。过高的刷新频率可能会导致屏幕闪烁,而过低的刷新频率则会使动态效果不流畅。

  2. Arduino TFT 绘制圆形
    主要特点
    具有平滑的曲线:圆形的独特形状使其在视觉上给人一种柔和、流畅的感觉,与矩形的棱角分明形成鲜明对比。在图形设计中,圆形能够增加画面的美感和亲和力。
    参数相对较少:绘制圆形时,通常只需要指定圆心坐标和半径这两个主要参数。例如,使用fillCircle(x, y, radius, color)函数可绘制填充颜色的圆形,drawCircle(x, y, radius, color)函数可绘制空心圆形,简单的参数设置便于开发者快速实现圆形的绘制。
    对称性强:圆形具有高度的对称性,这种特性在一些需要体现平衡、和谐的设计中非常有用,能够增强图形的稳定性和视觉效果。
    应用场景
    图标设计:许多图标采用圆形的形状,如播放按钮、暂停按钮等。圆形图标简洁明了,易于识别,能够在有限的空间内传达清晰的信息。
    数据可视化:在一些数据可视化场景中,圆形可用于表示数据点或数据范围。例如,在一个温度监测系统中,用不同大小或颜色的圆形表示不同区域的温度值,使数据更加直观易懂。
    装饰元素:圆形可以作为装饰元素添加到界面中,起到美化界面的作用。比如,在一个艺术风格的界面中,使用多个不同颜色和大小的圆形作为背景装饰,增加界面的艺术感。
    需要注意的事项
    圆心定位:圆心的坐标定位要准确,否则圆形可能会偏离预期的位置,影响整体的布局和显示效果。
    半径计算:半径的大小直接影响圆形的大小,要根据实际需求合理计算半径值。同时,要注意半径不能过大,以免圆形超出屏幕显示范围。
    抗锯齿处理:由于 TFT 屏幕的像素是离散的,绘制圆形时可能会出现锯齿现象。在对显示效果要求较高的场景中,可能需要进行抗锯齿处理,以提高圆形的平滑度。但抗锯齿处理会增加计算量,可能会影响绘制效率,需要在效果和性能之间进行权衡。

在这里插入图片描述

1、基础矩形与圆形绘制

#include <Adafruit_GFX.h>    
#include <Adafruit_ST7735.h> 
#include <SPI.h>
 
#define TFT_CS 10
#define TFT_RST 9
#define TFT_DC 8
 
Adafruit_ST7735 tft = Adafruit_ST7735(TFT_CS, TFT_DC, TFT_RST);
 
void setup() {
    
    
  tft.initR(INITR_BLACKTAB);
  tft.fillScreen(ST7735_BLACK);
 
  // 绘制矩形
  tft.drawRect(10, 10, 50, 30, ST7735_GREEN);
  tft.fillRect(70, 10, 50, 30, ST7735_YELLOW);
 
  // 绘制圆形
  tft.drawCircle(100, 40, 20, ST7735_RED);
  tft.fillCircle(150, 40, 20, ST7735_BLUE);
}
 
void loop() {
    
    }

要点解读
库文件依赖:使用Adafruit_GFX和Adafruit_ST7735库实现图形绘制,需通过Arduino库管理器安装。
硬件连接:TFT屏幕的CS、RST、DC引脚需正确连接至Arduino对应引脚。
函数功能:
drawRect(x, y, w, h, color):绘制矩形边框。
fillRect(x, y, w, h, color):填充矩形区域。
drawCircle(x, y, r, color):绘制圆形轮廓。
fillCircle(x, y, r, color):填充圆形区域。
颜色定义:使用库内置颜色常量(如ST7735_GREEN)。

2、动态圆形动画

#include <Adafruit_GFX.h>    
#include <Adafruit_ST7735.h> 
#include <SPI.h>
 
#define TFT_CS 10
#define TFT_RST 9
#define TFT_DC 8
 
Adafruit_ST7735 tft = Adafruit_ST7735(TFT_CS, TFT_DC, TFT_RST);
 
int radius = 10;
int direction = 1;
 
void setup() {
    
    
  tft.initR(INITR_BLACKTAB);
  tft.fillScreen(ST7735_BLACK);
}
 
void loop() {
    
    
  tft.fillCircle(64, 80, radius, ST7735_BLACK); // 清除旧圆
  radius += direction;
  if (radius > 20 || radius < 10) direction *= -1; // 半径范围控制
  tft.fillCircle(64, 80, radius, ST7735_GREEN); // 绘制新圆
  delay(100);
}

要点解读
动态效果:通过循环改变圆形半径实现放大缩小动画。
清除旧图形:在绘制新图形前,用相同颜色填充原位置以“擦除”旧图形。
边界控制:通过if语句限制半径范围,避免图形超出屏幕。

3、圆形时钟指针模拟

#include <Adafruit_GFX.h>    
#include <Adafruit_ST7735.h> 
#include <SPI.h>
#include <math.h>
 
#define TFT_CS 10
#define TFT_RST 9
#define TFT_DC 8
 
Adafruit_ST7735 tft = Adafruit_ST7735(TFT_CS, TFT_DC, TFT_RST);
 
void drawClockHand(int len, int angle, uint16_t color) {
    
    
  float rad = angle * PI / 180.0;
  int x = 64 + len * cos(rad - PI / 2);
  int y = 80 + len * sin(rad - PI / 2);
  tft.drawLine(64, 80, x, y, color);
}
 
void setup() {
    
    
  tft.initR(INITR_BLACKTAB);
  tft.fillScreen(ST7735_BLACK);
}
 
void loop() {
    
    
  static unsigned long previousMillis = 0;
  unsigned long currentMillis = millis();
  if (currentMillis - previousMillis >= 1000) {
    
    
    previousMillis = currentMillis;
    tft.fillScreen(ST7735_BLACK);
 
    // 模拟时钟指针
    drawClockHand(40, (hour() % 12) * 30, ST7735_WHITE);
    drawClockHand(60, minute() * 6, ST7735_BLUE);
    drawClockHand(80, second() * 6, ST7735_RED);
  }
}

要点解读
数学计算:使用三角函数计算指针终点坐标,角度转换为弧度后应用cos和sin函数。
时间获取:通过hour()、minute()、second()函数获取当前时间(需Arduino时间库支持)。
屏幕刷新:每秒清除屏幕并重新绘制指针,避免残影。

在这里插入图片描述

4、动态变化的矩形和圆形

#include <SPI.h>
#include <Adafruit_GFX.h>
#include <Adafruit_ILI9341.h>

#define TFT_CS 10
#define TFT_DC 9

Adafruit_ILI9341 tft = Adafruit_ILI9341(TFT_CS, TFT_DC);

int rect_width = 20;  // 矩形宽度
int circle_radius = 10;  // 圆形半径

void setup() {
    
    
    tft.begin();
    tft.fillScreen(ILI9341_BLACK);  // 黑色背景
}

void loop() {
    
    
    tft.fillScreen(ILI9341_BLACK);  // 清屏

    // 绘制矩形
    int x1 = 50, y1 = 50;
    tft.drawRect(x1, y1, rect_width, rect_width, ILI9341_RED);
    tft.fillRect(x1 + 1, y1 + 1, rect_width - 2, rect_width - 2, ILI9341_BLUE);

    // 绘制圆形
    int cx = 180, cy = 80;
    tft.drawCircle(cx, cy, circle_radius, ILI9341_GREEN);
    tft.fillCircle(cx, cy, circle_radius - 5, ILI9341_YELLOW);

    // 更新尺寸
    rect_width += 2;
    circle_radius += 1;

    // 边界检查
    if (rect_width > 100 || circle_radius > 50) {
    
    
        rect_width = 20;
        circle_radius = 10;
    }

    delay(100);  // 控制刷新频率
}

要点解读
动态变化
矩形和圆形的尺寸随时间动态变化,模拟动画效果。
使用drawRect()和drawCircle()绘制外框,fillRect()和fillCircle()填充颜色。
清屏与重绘
每次循环调用fillScreen()清除屏幕内容,避免图形叠加。
边界控制
当矩形或圆形尺寸超过设定范围时,重置为初始值,形成循环动画。
颜色搭配
使用不同颜色(如红色边框、蓝色填充)增强视觉效果。
延时控制
delay(100)控制刷新频率,确保动画流畅且不占用过多资源。

5、按钮控制的矩形和圆形切换

#include <SPI.h>
#include <Adafruit_GFX.h>
#include <Adafruit_ILI9341.h>

#define TFT_CS 10
#define TFT_DC 9
#define BUTTON_PIN 2

Adafruit_ILI9341 tft = Adafruit_ILI9341(TFT_CS, TFT_DC);

bool draw_rectangle = true;  // 是否绘制矩形

void setup() {
    
    
    tft.begin();
    tft.fillScreen(ILI9341_BLACK);  // 黑色背景
    pinMode(BUTTON_PIN, INPUT_PULLUP);
}

void loop() {
    
    
    // 检测按钮按下
    if (digitalRead(BUTTON_PIN) == LOW) {
    
    
        draw_rectangle = !draw_rectangle;  // 切换状态
        delay(200);  // 防抖延迟
    }

    tft.fillScreen(ILI9341_BLACK);  // 清屏

    if (draw_rectangle) {
    
    
        // 绘制矩形
        tft.drawRect(50, 50, 100, 50, ILI9341_WHITE);
        tft.fillRect(51, 51, 98, 48, ILI9341_RED);
    } else {
    
    
        // 绘制圆形
        tft.drawCircle(120, 80, 40, ILI9341_WHITE);
        tft.fillCircle(120, 80, 38, ILI9341_GREEN);
    }
}

要点解读
按钮交互
使用物理按钮切换绘制矩形或圆形,实现用户交互功能。
防抖处理
在检测按钮按下后添加delay(200),防止误触发。
状态切换
使用布尔变量draw_rectangle记录当前绘制状态,便于切换逻辑。
清屏与重绘优化
每次切换状态后清屏并重新绘制,确保屏幕内容清晰。
硬件集成
将按钮输入与TFT显示结合,展示软硬件协同工作的能力。

6、仪表盘进度条与加载动画

#include <SPI.h>
#include <Adafruit_GFX.h>
#include <Adafruit_ILI9341.h>

#define TFT_CS 10
#define TFT_DC 9

Adafruit_ILI9341 tft = Adafruit_ILI9341(TFT_CS, TFT_DC);

int progress = 0;  // 进度条变量

void setup() {
    
    
    tft.begin();
    tft.fillScreen(ILI9341_BLACK);  // 黑色背景
}

void loop() {
    
    
    tft.fillScreen(ILI9341_BLACK);  // 清屏

    // 绘制进度条背景
    tft.drawRect(20, 50, 200, 20, ILI9341_WHITE);

    // 绘制进度条填充
    tft.fillRect(21, 51, progress * 2, 18, ILI9341_CYAN);

    // 绘制加载动画圆圈
    int radius = 20 + progress / 5;
    tft.drawCircle(120, 120, radius, ILI9341_MAGENTA);

    // 更新进度
    progress += 5;

    // 边界检查
    if (progress > 100) {
    
    
        progress = 0;
    }

    delay(100);  // 控制刷新频率
}

要点解读
进度条模拟
使用矩形绘制进度条背景,并通过fillRect()动态填充进度条。
加载动画
使用动态变化的圆形半径模拟加载动画,提升视觉效果。
多图形组合
结合矩形和圆形实现复杂的UI效果,适用于加载界面或仪表盘。
动态更新
通过变量progress控制矩形填充和圆形半径的变化,形成动态效果。
刷新频率控制
使用delay(100)平衡动画流畅性和系统性能。

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

在这里插入图片描述