【花雕学编程】Arduino动手做(249)---1.28寸 TFT 圆屏 GC9A01
【花雕学编程】Arduino动手做(249)---ESP32 GC9A01屏动态...
【Arduino】189种传感器模块系列实验(资料代码+仿真编程+图形编程)实验二百四十九:1.28寸圆形彩色TFT显示屏 高清IPS 模块 240*240 SPI接口GC9A01驱动
项目实验之四:放大与缩小的动态同心园
实验开源代码
/*
【Arduino】189种传感器模块系列实验(资料代码+仿真编程+图形编程)
实验二百四十九:1.28寸圆形彩色TFT显示屏 高清IPS 模块 240*240 SPI接口GC9A01驱动
项目实验之四:放大与缩小的动态同心园
*/
// GC9A010 -------- ESP32
// RST ------------ NC(复位引脚,此处未连接)
// CS ------------- D4(片选引脚,连接到ESP32的D4引脚)
// DC ------------- D2(数据/命令选择引脚,连接到ESP32的D2引脚)
// SDA ------------ D23 (green)(主数据输出引脚,连接到ESP32的D23引脚,绿色线)
// SCL ------------ D18 (yellow)(时钟信号引脚,连接到ESP32的D18引脚,黄色线)
// GND ------------ GND(接地引脚,连接到ESP32的接地端)
// VCC -------------3V3(电源引脚,连接到ESP32的3.3V电源)
#include "SPI.h" // 引入SPI库,用于与SPI设备通信
#include "Adafruit_GFX.h" // 引入Adafruit GFX库,用于图形绘制
#include "Adafruit_GC9A01A.h" // 引入GC9A01A显示屏驱动库
#define TFT_DC 2 // 定义TFT显示屏的DC引脚
#define TFT_CS 4 // 定义TFT显示屏的CS引脚
Adafruit_GC9A01A tft(TFT_CS, TFT_DC); // 创建GC9A01A对象,初始化显示屏
void setup() {
Serial.begin(9600); // 初始化串口通信,波特率为9600
Serial.println(" ");
Serial.println("GC9A01A Circle Animation Test!"); // 打印测试信息到串口
Serial.println(" ");
Serial.println("项目实验之四:放大与缩小的动态同心园");
tft.begin(); // 初始化显示屏
tft.setRotation(3); // 设置显示屏方向
tft.fillScreen(GC9A01A_BLACK); // 清屏,填充黑色背景
}
void loop() {
int centerX = tft.width() / 2;// 屏幕中心X坐标
int centerY = tft.height() / 2; // 屏幕中心Y坐标
int radius = 10; // 圆的初始半径
int step = 10; // 半径递增步长
bool increasing = true; // 控制半径增大或减小
// 循环画圆动画
for (int i = 0; i < 50; i++) {// 限制循环次数,防止死循环
tft.fillScreen(GC9A01A_BLACK); // 清屏,避免重叠
// 绘制当前圆
tft.drawCircle(centerX, centerY, radius, GC9A01A_WHITE);
// 控制半径的增大或减小
if (increasing) {
radius += step; // 增大半径
if (radius >= 100) { // 达到最大值后反转方向
increasing = false;
}
} else {
radius -= step; // 减小半径
if (radius <= 10) { // 达到最小值后反转方向
increasing = true;
}
}
delay(300); // 延迟0.3秒
}
}
【花雕学编程】Arduino动手做(249)---ESP32 GC9A01动态同...
代码解读:1、引入库文件
#include "SPI.h"
#include "Adafruit_GFX.h"
#include "Adafruit_GC9A01A.h"
SPI.h:提供SPI协议支持,SPI是一种快速的串行通信方式,用于Arduino与GC9A01A显示屏进行数据交换。
Adafruit_GFX.h:一个通用的图形库,支持绘制图形元素(如线条、圆形、矩形等)和显示文本。
Adafruit_GC9A01A.h:GC9A01A显示屏的特定驱动库,用于初始化和操作该型号的显示屏。
2、定义引脚与屏幕对象
#define TFT_DC 2
#define TFT_CS 4
Adafruit_GC9A01A tft(TFT_CS, TFT_DC);
TFT_DC:定义显示屏的数据/命令选择引脚(DC),用于区分发送的是指令还是数据。
TFT_CS:定义显示屏的片选引脚(CS),用于启用或禁用屏幕与控制器的通信。
tft:通过Adafruit_GC9A01A创建的对象,表示对GC9A01A显示屏的控制实例。
3、初始化显示屏(setup 函数)
void setup() {
Serial.begin(9600);
Serial.println("GC9A01A Test!");
tft.begin();
tft.setRotation(3);
tft.fillScreen(GC9A01A_BLACK);
}
串口通信初始化:
Serial.begin(9600) 设置波特率为9600,便于调试和查看输出信息。
Serial.println("GC9A01A Test!") 向串口输出测试信息,表明程序已启动。
显示屏初始化:
tft.begin() 完成屏幕的初始化工作,使其准备接受控制指令。
tft.setRotation(3) 设置屏幕的显示方向,3表示特定的旋转角度(通常是逆时针旋转270°)。
tft.fillScreen(GC9A01A_BLACK) 将屏幕背景填充为黑色(清屏操作)。
4、主循环逻辑(loop 函数)
void loop() {
int centerX = tft.width() / 2;
int centerY = tft.height() / 2;
int radius = 10;
int step = 10;
bool increasing = true;
for (int i = 0; i < 50; i++) {
tft.fillScreen(GC9A01A_BLACK);
tft.drawCircle(centerX, centerY, radius, GC9A01A_WHITE);
if (increasing) {
radius += step;
if (radius >= 100) {
increasing = false;
}
} else {
radius -= step;
if (radius <= 10) {
increasing = true;
}
}
delay(300);
}
}
主逻辑分解
屏幕中心点坐标计算:
centerX = tft.width() / 2:计算屏幕宽度的一半,获取X轴的中心位置。
centerY = tft.height() / 2:计算屏幕高度的一半,获取Y轴的中心位置。
圆的动态参数初始化:
radius = 10:初始半径设为10像素。
step = 10:每次循环半径变化的步长为10像素。
increasing = true:设置半径增长的初始方向为增大。
循环绘制圆动画:
tft.fillScreen(GC9A01A_BLACK):在每次绘制前清屏,防止圆形重叠。
tft.drawCircle(centerX, centerY, radius, GC9A01A_WHITE):以屏幕中心为圆心,绘制当前半径的白色圆形。
控制圆半径的增长与缩减:
如果increasing为true,半径增加,当达到最大值(100)时,改为减小方向。
如果increasing为false,半径减小,当达到最小值(10)时,改为增大方向。
动画节奏控制:
delay(300):每次绘制后延时300毫秒,控制画圆的速度,增强视觉效果。
5、总结
这段代码的功能是:
以屏幕的中心为原点,动态绘制半径逐渐增大或减小的圆形。
半径变化范围在10到100像素之间,形成“呼吸”式的动画效果。
每次绘制后清屏,避免圆形堆叠,保持屏幕画面整洁。
【花雕学编程】Arduino动手做(249)--ESP32 GC9A01动态同心园
实验串口返回情况【花雕学编程】Arduino动手做(249)--ESP32 GC9A01动态同心园
实验场景图动态图【花雕学编程】Arduino动手做(249)--ESP32 GC9A01动态同心园
【Arduino】189种传感器模块系列实验(资料代码+仿真编程+图形编程)实验二百四十九:1.28寸圆形彩色TFT显示屏 高清IPS 模块 240*240 SPI接口GC9A01驱动
项目实验之五:多色彩动态循环同心园
实验开源代码
/*
【Arduino】189种传感器模块系列实验(资料代码+仿真编程+图形编程)
实验二百四十九:1.28寸圆形彩色TFT显示屏 高清IPS 模块 240*240 SPI接口GC9A01驱动
项目实验之五:多色彩动态循环同心园
*/
// GC9A010 -------- ESP32
// RST ------------ NC(复位引脚,此处未连接)
// CS ------------- D4(片选引脚,连接到ESP32的D4引脚)
// DC ------------- D2(数据/命令选择引脚,连接到ESP32的D2引脚)
// SDA ------------ D23 (green)(主数据输出引脚,连接到ESP32的D23引脚,绿色线)
// SCL ------------ D18 (yellow)(时钟信号引脚,连接到ESP32的D18引脚,黄色线)
// GND ------------ GND(接地引脚,连接到ESP32的接地端)
// VCC -------------3V3(电源引脚,连接到ESP32的3.3V电源)
#include "SPI.h" // 引入SPI库
#include "Adafruit_GFX.h" // 引入Adafruit GFX库
#include "Adafruit_GC9A01A.h" // 引入GC9A01A显示屏驱动库
#define TFT_DC 2 // 定义TFT显示屏的DC引脚
#define TFT_CS 4 // 定义TFT显示屏的CS引脚
Adafruit_GC9A01A tft(TFT_CS, TFT_DC); // 创建GC9A01A对象
void setup() {
Serial.begin(9600); // 初始化串口通信
Serial.println("Multi-Circle Animation with Color Change!");
tft.begin(); // 初始化显示屏
tft.setRotation(3); // 设置显示屏方向
tft.fillScreen(GC9A01A_BLACK); // 清屏
}
void loop() {
int centerX = tft.width() / 2; // 屏幕中心X坐标
int centerY = tft.height() / 2; // 屏幕中心Y坐标
// 定义颜色数组用于动态颜色切换
uint16_t colors[] = {GC9A01A_RED, GC9A01A_GREEN, GC9A01A_BLUE, GC9A01A_YELLOW, GC9A01A_CYAN, GC9A01A_MAGENTA, GC9A01A_WHITE};
int colorCount = sizeof(colors) / sizeof(colors);
static int colorIndex = 0; // 当前颜色索引
static int radius1 = 10; // 第一个圆的半径
static int radius2 = 20; // 第二个圆的半径
static int radius3 = 30; // 第三个圆的半径
int step = 5; // 半径的变化步长
static bool increasing1 = true; // 控制第一个圆半径增减
static bool increasing2 = true; // 控制第二个圆半径增减
static bool increasing3 = true; // 控制第三个圆半径增减
// 清屏,绘制新一帧动画
tft.fillScreen(GC9A01A_BLACK);
// 绘制三个圆
tft.drawCircle(centerX, centerY, radius1, colors); // 圆1
tft.drawCircle(centerX, centerY, radius2, colors[(colorIndex + 1) % colorCount]); // 圆2
tft.drawCircle(centerX, centerY, radius3, colors[(colorIndex + 2) % colorCount]); // 圆3
// 更新第一个圆半径
if (increasing1) {
radius1 += step;
if (radius1 >= 115) { // 达到最大半径后反向
increasing1 = false;
}
} else {
radius1 -= step;
if (radius1 <= 10) { // 达到最小半径后反向
increasing1 = true;
}
}
// 更新第二个圆半径
if (increasing2) {
radius2 += step;
if (radius2 >= 115) {
increasing2 = false;
}
} else {
radius2 -= step;
if (radius2 <= 10) {
increasing2 = true;
}
}
// 更新第三个圆半径
if (increasing3) {
radius3 += step;
if (radius3 >= 115) {
increasing3 = false;
}
} else {
radius3 -= step;
if (radius3 <= 10) {
increasing3 = true;
}
}
// 更新颜色索引
colorIndex = (colorIndex + 1) % colorCount;
// 延时0.3秒,控制动画速度
delay(300);
}
【花雕学编程】Arduino动手做(249)--ESP32 GC9A01动态同心园
代码说明1、颜色变化:
定义一个颜色数组colors,包含多种颜色(红、绿、蓝等)。
每次循环通过增加颜色索引colorIndex,动态切换绘制的颜色。
2、多圆绘制:
绘制三个圆,分别使用不同的颜色索引,让每个圆的颜色不同。
每个圆的半径独立变化,通过不同的逻辑控制,形成丰富的视觉效果。
3、半径变化控制:
每个圆的半径在10到115像素之间变化,分别通过变量increasing1、increasing2和increasing3独立控制。
4、动态清屏:
每次循环用tft.fillScreen(GC9A01A_BLACK)清屏,保持画面整洁,仅显示当前的圆形动画。
5、可扩展性:
圆的数量和颜色可以轻松扩展,通过增加数组或变量即可实现更多效果。
效果描述
屏幕上会同时绘制三个动态圆,圆的半径在10到115像素之间往复变化。
每个圆的颜色随着时间循环变化,形成绚丽的动画效果。
三个圆独立控制半径变化,带来层次感和动态美感。
【花雕学编程】Arduino动手做(249)--ESP32 GC9A01动态同心园
实验场景图动态图【花雕学编程】Arduino动手做(249)--ESP32 GC9A01动态同心园
【花雕学编程】Arduino动手做(249)--ESP32 GC9A01动态同心园
实验记录视频(45秒)【【花雕学编程】Arduino动手做(249)---ESP32驱动1.28寸 TFT GC9A01圆屏之多色彩动态循环同心园】
https://www.bilibili.com/video/BV1EbosYJEc7/?share_source=copy_web&vd_source=371a292a55e5ca9be994cbb4a86cc987
https://www.bilibili.com/video/BV1EbosYJEc7/?share_source=copy_web&vd_source=371a292a55e5ca9be994cbb4a86cc987
【花雕学编程】Arduino动手做(249)--ESP32 GC9A01动态同心园
【Arduino】189种传感器模块系列实验(资料代码+仿真编程+图形编程)实验二百四十九:1.28寸圆形彩色TFT显示屏 高清IPS 模块 240*240 SPI接口GC9A01驱动
项目实验之六:最大半径120的多彩填充圆形
实验开源代码
/*
【Arduino】189种传感器模块系列实验(资料代码+仿真编程+图形编程)
实验二百四十九:1.28寸圆形彩色TFT显示屏 高清IPS 模块 240*240 SPI接口GC9A01驱动
项目实验之六:最大半径120的多彩填充圆形
*/
// GC9A010 -------- ESP32
// RST ------------ NC(复位引脚,此处未连接)
// CS ------------- D4(片选引脚,连接到ESP32的D4引脚)
// DC ------------- D2(数据/命令选择引脚,连接到ESP32的D2引脚)
// SDA ------------ D23 (green)(主数据输出引脚,连接到ESP32的D23引脚,绿色线)
// SCL ------------ D18 (yellow)(时钟信号引脚,连接到ESP32的D18引脚,黄色线)
// GND ------------ GND(接地引脚,连接到ESP32的接地端)
// VCC -------------3V3(电源引脚,连接到ESP32的3.3V电源)
#include "SPI.h" // 引入SPI库
#include "Adafruit_GFX.h" // 引入Adafruit GFX库
#include "Adafruit_GC9A01A.h" // 引入GC9A01A显示屏驱动库
#define TFT_DC 2 // 定义TFT显示屏的DC引脚
#define TFT_CS 4 // 定义TFT显示屏的CS引脚
Adafruit_GC9A01A tft(TFT_CS, TFT_DC); // 创建GC9A01A对象
void setup() {
Serial.begin(9600); // 初始化串口通信
Serial.println("Multi-Colored Filled Circle with Max Radius 120!");
tft.begin(); // 初始化显示屏
tft.setRotation(3); // 设置显示屏方向
tft.fillScreen(GC9A01A_BLACK); // 清屏
}
void loop() {
int centerX = tft.width() / 2;// 屏幕中心X坐标
int centerY = tft.height() / 2; // 屏幕中心Y坐标
// 定义颜色数组用于动态颜色切换
uint16_t colors[] = {GC9A01A_RED, GC9A01A_GREEN, GC9A01A_BLUE, GC9A01A_YELLOW, GC9A01A_CYAN, GC9A01A_MAGENTA, GC9A01A_WHITE};
int colorCount = sizeof(colors) / sizeof(colors);
static int colorIndex = 0; // 当前颜色索引
static int radius = 10; // 圆的初始半径
int step = 5; // 半径变化步长
int maxRadius = 120; // 最大半径设置为120
int minRadius = 10; // 最小半径
static bool increasing = true;// 控制半径增减方向
// 清屏
tft.fillScreen(GC9A01A_BLACK);
// 绘制填充圆
tft.fillCircle(centerX, centerY, radius, colors);
// 调整圆半径
if (increasing) {
radius += step; // 增加半径
if (radius >= maxRadius) {// 达到最大半径时反向
increasing = false;
}
} else {
radius -= step; // 减少半径
if (radius <= minRadius) {// 达到最小半径时反向
increasing = true;
}
}
// 更新颜色索引
colorIndex = (colorIndex + 1) % colorCount;
// 延时0.3秒
delay(300);
}
【花雕学编程】Arduino动手做(249)--ESP32 GC9A01动态同心园
代码解读:1、最大半径调整:
将最大半径maxRadius设定为120,保证圆形的大小动态变化达到指定值。
2、多彩填充效果:
使用tft.fillCircle绘制圆形填充,增强动画的视觉丰富度。
动态颜色切换通过颜色数组colors实现,每次循环绘制时自动更新颜色。
3、逻辑控制:
使用increasing变量控制半径的增减,确保圆形在最小半径10和最大半径120之间循环变化。
4、动画节奏:
延时delay(300)保证圆形绘制的节奏稳定且不失流畅。
5、效果描述
一个填充圆形在屏幕中央动态绘制,其半径从10像素逐渐增大到120像素,并往复变化。
每次绘制的圆形颜色都会在红、绿、蓝、黄、青、紫和白之间循环切换。
动画流畅且色彩丰富,具有较强的视觉吸引力。
【花雕学编程】Arduino动手做(249)--ESP32 GC9A01动态同心园
代码解读:1、最大半径调整:
将最大半径maxRadius设定为120,保证圆形的大小动态变化达到指定值。
2、多彩填充效果:
使用tft.fillCircle绘制圆形填充,增强动画的视觉丰富度。
动态颜色切换通过颜色数组colors实现,每次循环绘制时自动更新颜色。
3、逻辑控制:
使用increasing变量控制半径的增减,确保圆形在最小半径10和最大半径120之间循环变化。
4、动画节奏:
延时delay(300)保证圆形绘制的节奏稳定且不失流畅。
5、效果描述
一个填充圆形在屏幕中央动态绘制,其半径从10像素逐渐增大到120像素,并往复变化。
每次绘制的圆形颜色都会在红、绿、蓝、黄、青、紫和白之间循环切换。
动画流畅且色彩丰富,具有较强的视觉吸引力。
【花雕学编程】Arduino动手做(249)--ESP32 GC9A01动态同心园
实验场景图动态图【花雕学编程】Arduino动手做(249)--ESP32 GC9A01动态同心园
【花雕学编程】Arduino动手做(249)--ESP32 GC9A01动态同心园
【花雕学编程】Arduino动手做(249)--ESP32 GC9A01动态同心园
本帖最后由 驴友花雕 于 2025-3-25 16:41 编辑【花雕学编程】Arduino动手做(249)--ESP32 GC9A01动态同心园
【Arduino】189种传感器模块系列实验(资料代码+仿真编程+图形编程)实验二百四十九:1.28寸圆形彩色TFT显示屏 高清IPS 模块 240*240 SPI接口GC9A01驱动
项目实验之七:大小往复循环显示字母“OK”
实验开源代码
/*
【Arduino】189种传感器模块系列实验(资料代码+仿真编程+图形编程)
实验二百四十九:1.28寸圆形彩色TFT显示屏 高清IPS 模块 240*240 SPI接口GC9A01驱动
项目实验之七:大小往复循环显示字母“OK”
*/
// GC9A010 -------- ESP32
// RST ------------ NC(复位引脚,此处未连接)
// CS ------------- D4(片选引脚,连接到ESP32的D4引脚)
// DC ------------- D2(数据/命令选择引脚,连接到ESP32的D2引脚)
// SDA ------------ D23 (green)(主数据输出引脚,连接到ESP32的D23引脚,绿色线)
// SCL ------------ D18 (yellow)(时钟信号引脚,连接到ESP32的D18引脚,黄色线)
// GND ------------ GND(接地引脚,连接到ESP32的接地端)
// VCC -------------3V3(电源引脚,连接到ESP32的3.3V电源)
#include "SPI.h" // 引入SPI库
#include "Adafruit_GFX.h" // 引入Adafruit GFX库
#include "Adafruit_GC9A01A.h" // 引入GC9A01A显示屏驱动库
#define TFT_DC 2 // 定义TFT显示屏的DC引脚
#define TFT_CS 4 // 定义TFT显示屏的CS引脚
Adafruit_GC9A01A tft(TFT_CS, TFT_DC); // 创建GC9A01A对象
void setup() {
Serial.begin(9600); // 初始化串口通信
Serial.println("Display 'OK' Animation!");
tft.begin(); // 初始化显示屏
tft.setRotation(2); // 设置显示屏方向
tft.fillScreen(GC9A01A_BLACK); // 清屏
}
void loop() {
int centerX = tft.width() / 2; // 屏幕中心X坐标
int centerY = tft.height() / 2; // 屏幕中心Y坐标
static int textSize = 1; // 初始字号
int step = 1; // 字号变化步长
int maxSize = 5; // 最大字号
int minSize = 1; // 最小字号
static bool increasing = true; // 控制字号增减方向
// 清屏
tft.fillScreen(GC9A01A_BLACK);
// 设置文字属性
tft.setTextColor(GC9A01A_WHITE);
tft.setTextSize(textSize);
// 显示字母“OK”
tft.setCursor(centerX - (6 * textSize), centerY - (8 * textSize)); // 让“OK”居中
tft.print("OK");
// 调整字号
if (increasing) {
textSize += step; // 增加字号
if (textSize >= maxSize) { // 达到最大字号时反向
increasing = false;
}
} else {
textSize -= step; // 减小字号
if (textSize <= minSize) { // 达到最小字号时反向
increasing = true;
}
}
// 延时0.3秒
delay(300);
}
【花雕学编程】Arduino动手做(249)--ESP32 GC9A01动态同心园
代码说明1、字号大小控制:
通过textSize变量控制字号大小,字号在minSize(1)和maxSize(5)之间循环变化。
使用increasing变量控制字号增大或减小。
2、动态居中显示:
根据字号大小动态调整setCursor的起始位置,让“OK”始终显示在屏幕中心。
计算方式:centerX - (6 * textSize) 和 centerY - (8 * textSize),其中6和8为字符的像素基准值。
3、屏幕清屏:
每次绘制前调用tft.fillScreen(GC9A01A_BLACK)清屏,避免字符重叠。
4、动画节奏控制:
使用delay(300)设置每次循环间隔为0.3秒,确保动画效果平滑。
5、效果描述
屏幕中心将动态显示“OK”字符。
字符的字号从最小值(1)逐渐增大到最大值(5),再从最大值逐渐减小回最小值,循环往复。
“OK”字符始终保持居中,并具有动态变化的视觉效果。