【花雕学编程】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);
}
复制代码

这段代码的核心功能是 模拟两个不同速率的进度条，分别使用 红色和蓝色，让它们以不同的充电速度加载，并实时显示百分比数值。

代码结构
1️⃣ 初始化屏幕
• 使用 Adafruit_GC9A01A 控制 TFT 显示屏，设定黑色背景。
2️⃣ 绘制双进度条
• drawRect() 创建 白色矩形外框，表示进度条边界。
• fillRect() 让 红色进度条和蓝色进度条分别填充，模拟充电过程。
3️⃣ 显示百分比数值
• print() 方法实时计算 当前进度百分比，显示在进度条旁边。
4️⃣ 不同速率加载
• progressRed += SPEED_RED; 让 红色进度条充电更快。
• progressBlue += SPEED_BLUE; 让 蓝色进度条充电较慢，形成对比。
• 进度满格后 重置为 0，形成循环动画。


最终效果
红蓝双进度条分别以不同速率加载，并显示实时百分比
充电过程流畅，直观展现速度差异
黑色背景 + 白色边框 + 红色/蓝色进度条 + 百分比数值，提高视觉清晰度

实验场景图  动态图