【花雕学编程】Arduino动手做（249）---GC9A01电量WiFi指示器

  【Arduino】189种传感器模块系列实验（资料代码+仿真编程+图形编程）
  实验二百四十九：1.28寸圆形彩色TFT显示屏 高清IPS 模块 240*240 SPI接口GC9A01驱动
  项目之八十八：GC9A01园屏之WiFi信号强度与电池电量的状态指示器

实验开源代码

/*
  【Arduino】189种传感器模块系列实验（资料代码+仿真编程+图形编程）
  实验二百四十九：1.28寸圆形彩色TFT显示屏 高清IPS 模块 240*240 SPI接口GC9A01驱动
  项目之八十八：GC9A01园屏之WiFi信号强度与电池电量的状态指示器
*/

//       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电源）

// 引入SPI通信库，用于与TFT屏幕进行SPI通信
#include "SPI.h"
// 引入Adafruit图形库，提供图形绘制的基础功能
#include "Adafruit_GFX.h"
// 引入Adafruit GC9A01A屏幕驱动库，用于控制GC9A01A型号的TFT屏幕
#include "Adafruit_GC9A01A.h"

// 定义TFT屏幕的片选引脚
#define TFT_CS 4
// 定义TFT屏幕的数据/命令选择引脚
#define TFT_DC 2
// 定义TFT屏幕的复位引脚，-1表示不使用该引脚
#define TFT_RST -1

// 创建Adafruit_GC9A01A对象，用于控制TFT屏幕
Adafruit_GC9A01A tft = Adafruit_GC9A01A(TFT_CS, TFT_DC, TFT_RST);

// 定义屏幕的宽度
#define SCREEN_WIDTH 240
// 定义屏幕的高度
#define SCREEN_HEIGHT 240
// 定义图标（如电池、WiFi信号图标）的大小
#define ICON_SIZE 50
// 定义显示文本的大小
#define TEXT_SIZE 3
// 定义状态更新的时间间隔，单位为毫秒
#define UPDATE_SPEED 1000

// 定义电池电量变量，初始值为100%
int batteryLevel = 100;
// 定义WiFi信号强度变量，初始值为5
int wifiStrength = 5;

// 初始化函数，在程序开始时执行一次
void setup() {
    // 初始化串口通信，波特率为115200，用于调试信息输出
    Serial.begin(115200);
    // 初始化TFT屏幕
    tft.begin();
    // 设置TFT屏幕的旋转方向为2，即旋转180度
    tft.setRotation(2);
}

// 循环函数，程序开始后会不断循环执行
void loop() {
    // 用黑色填充整个屏幕，清除上一帧的显示内容
    tft.fillScreen(tft.color565(0, 0, 0));

    // 绘制电池图标
    drawBatteryIcon();
    // 绘制WiFi信号图标
    drawWiFiIcon();
    // 显示电池和WiFi的状态数值
    displayStatusText();

    // 更新电池电量和WiFi信号强度
    updateStatus();

    // 延迟一段时间，控制状态更新的速度
    delay(UPDATE_SPEED);
}

// 绘制电池图标的函数
void drawBatteryIcon() {
    // 绘制电池的外框，矩形的左上角坐标为(70, 40)，宽和高为ICON_SIZE，颜色为白色
    tft.drawRect(70, 40, ICON_SIZE, ICON_SIZE, tft.color565(255, 255, 255));
    // 计算电池电量对应的宽度，电池电量每3%对应1个像素宽度
    int batteryWidth = batteryLevel / 3;
    // 绘制电池内部的电量进度条，矩形的左上角坐标为(75, 45)，宽度为batteryWidth，高度为ICON_SIZE - 10，颜色为绿色
    tft.fillRect(75, 45, batteryWidth, ICON_SIZE - 10, tft.color565(0, 255, 0));
}

// 绘制WiFi信号图标的函数
void drawWiFiIcon() {
    // 循环绘制WiFi信号的圆圈，根据WiFi信号强度绘制不同数量的圆圈
    for (int i = 0; i < wifiStrength; i++) {
        // 计算每个圆圈的圆心坐标，x坐标为150 + (i * 8)，y坐标为65
        // 圆圈的半径为10 + i * 2，颜色为蓝色
        tft.fillCircle(150 + (i * 8), 65, 10 + i * 2, tft.color565(0, 0, 255));
    }
}

// 显示状态数值的函数
void displayStatusText() {
    // 设置文本颜色为白色
    tft.setTextColor(tft.color565(255, 255, 255));
    // 设置文本大小为TEXT_SIZE
    tft.setTextSize(TEXT_SIZE);

    // 设置文本的起始坐标为(10, 106)，显示电池电量信息
    tft.setCursor(10, 106);
    tft.print("Battery: ");
    tft.print(batteryLevel);
    tft.print("%");

    // 设置文本的起始坐标为(40, 160)，显示WiFi信号强度信息
    tft.setCursor(40, 160);
    tft.print("WiFi: ");
    tft.print(wifiStrength);
    tft.print("/5");
}

// 更新状态的函数
void updateStatus() {
    // 随机减少电池电量，减少的范围为1到4
    batteryLevel -= random(1, 5);
    // 如果电池电量小于等于0，则将电池电量重置为100%
    if (batteryLevel <= 0) batteryLevel = 100;

    // 随机生成WiFi信号强度，范围为1到5
    wifiStrength = random(1, 6);
}    
复制代码

这段代码的核心功能是 动态状态指示器，通过图标和数值显示电池电量和 WiFi 信号强度，并随着时间变化进行实时更新。

代码结构1️⃣ 初始化屏幕

• 使用 Adafruit_GC9A01A 控制 TFT 显示屏，设置黑色背景。
  
  

2️⃣ 绘制电池图标

• drawRect() 创建 白色矩形外框，表示电池边框。
  
• fillRect() 绘制 绿色充电进度条，随着电量下降而变化。
  
  

3️⃣ 绘制 WiFi 信号图标

• 使用 fillCircle() 生成 多个蓝色圆点，表示 WiFi 信号强度，信号越强圆点越多。
  
  

4️⃣ 显示状态数值

• print() 实时显示 电池电量百分比 和 WiFi 信号强度，让信息更加直观。
  
  

5️⃣ 动态更新数据

• batteryLevel 变量 随机下降，模拟电池电量消耗，并在耗尽后重置为满格。
  
• wifiStrength 变量 随机变化，模拟 WiFi 信号的波动。
  
  

最终效果屏幕上实时显示电池电量和 WiFi 信号强度
图标和数值不断更新，模拟真实状态变化
黑色背景 + 白色边框 + 绿色/蓝色图标 + 数值显示，提高视觉对比度

实验场景图  动态图