【花雕学编程】Arduino动手做（249）---GC9A01模拟双进度条
本帖最后由 驴友花雕 于 2025-4-14 08:33 编辑【花雕学编程】Arduino动手做（249）---模拟双进度条
【花雕学编程】Arduino动手做（249）---GC9A01模拟双进度条
【花雕学编程】Arduino动手做（249）---GC9A01模拟双进度条
【Arduino】189种传感器模块系列实验（资料代码+仿真编程+图形编程）实验二百四十九：1.28寸圆形彩色TFT显示屏 高清IPS 模块 240*240 SPI接口GC9A01驱动
项目之八十六：GC9A01园屏之使用两个矩形进度条显示不同充电速度
实验开源代码
/*
【Arduino】189种传感器模块系列实验（资料代码+仿真编程+图形编程）
实验二百四十九：1.28寸圆形彩色TFT显示屏 高清IPS 模块 240*240 SPI接口GC9A01驱动
项目之八十六：GC9A01园屏之使用两个矩形进度条显示不同充电速度
*/
// GC9A01---------- 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"
#include "Adafruit_GFX.h"
#include "Adafruit_GC9A01A.h"
#define TFT_CS 4
#define TFT_DC 2
#define TFT_RST -1
Adafruit_GC9A01A tft = Adafruit_GC9A01A(TFT_CS, TFT_DC, TFT_RST);
#define SCREEN_WIDTH 240
#define SCREEN_HEIGHT 240
#define BAR_WIDTH 180// **进度条宽度**
#define BAR_HEIGHT 20// **进度条高度**
#define BAR_X 45// **进度条起始 X 位置**
#define BAR_Y1 90// **红色进度条 Y 位置**
#define BAR_Y2 120 // **蓝色进度条 Y 位置**
#define SPEED_RED 6// **红色进度条速度**
#define SPEED_BLUE 3// **蓝色进度条速度**
int progressRed = 0;
int progressBlue = 0;
void setup() {
Serial.begin(115200);
tft.begin();
tft.setRotation(2);
}
void loop() {
tft.fillScreen(tft.color565(0, 0, 0));
// **绘制进度条外框**
tft.drawRect(BAR_X, BAR_Y1, BAR_WIDTH, BAR_HEIGHT, tft.color565(255, 255, 255));
tft.drawRect(BAR_X, BAR_Y2, BAR_WIDTH, BAR_HEIGHT, tft.color565(255, 255, 255));
// **绘制红色进度条**
tft.fillRect(BAR_X, BAR_Y1, progressRed, BAR_HEIGHT, tft.color565(255, 0, 0));
// **绘制蓝色进度条**
tft.fillRect(BAR_X, BAR_Y2, progressBlue, BAR_HEIGHT, tft.color565(0, 0, 255));
// **显示百分比数值**
tft.setTextColor(tft.color565(255, 255, 255));
tft.setTextSize(2);
tft.setCursor(BAR_X + BAR_WIDTH + 10, BAR_Y1);
tft.print((progressRed * 100) / BAR_WIDTH);
tft.print("%");
tft.setCursor(BAR_X + BAR_WIDTH + 10, BAR_Y2);
tft.print((progressBlue * 100) / BAR_WIDTH);
tft.print("%");
// **更新进度**
progressRed += SPEED_RED;
progressBlue += SPEED_BLUE;
if (progressRed >= BAR_WIDTH) {
progressRed = 0;
}
if (progressBlue >= BAR_WIDTH) {
progressBlue = 0;
}
delay(100);
}
【花雕学编程】Arduino动手做（249）---GC9A01模拟双进度条
这段代码的核心功能是 模拟两个不同速率的进度条，分别使用 红色和蓝色，让它们以不同的充电速度加载，并实时显示百分比数值。代码结构
1️⃣ 初始化屏幕
• 使用 Adafruit_GC9A01A 控制 TFT 显示屏，设定黑色背景。
2️⃣ 绘制双进度条
• drawRect() 创建 白色矩形外框，表示进度条边界。
• fillRect() 让 红色进度条和蓝色进度条分别填充，模拟充电过程。
3️⃣ 显示百分比数值
• print() 方法实时计算 当前进度百分比，显示在进度条旁边。
4️⃣ 不同速率加载
• progressRed += SPEED_RED; 让 红色进度条充电更快。
• progressBlue += SPEED_BLUE; 让 蓝色进度条充电较慢，形成对比。
• 进度满格后 重置为 0，形成循环动画。
最终效果
红蓝双进度条分别以不同速率加载，并显示实时百分比
充电过程流畅，直观展现速度差异
黑色背景 + 白色边框 + 红色/蓝色进度条 + 百分比数值，提高视觉清晰度
【花雕学编程】Arduino动手做（249）---GC9A01模拟双进度条
实验场景图动态图【花雕学编程】Arduino动手做（249）---GC9A01模拟双进度条
页:
[1]