【花雕学编程】Arduino动手做(249)---ESP32 1.28寸 TFT GC9A01屏之动态模拟三色百分比圆饼图

2025-04-1463
AI 快速预览详细 收起
本文介绍了如何使用ESP32和1.28寸TFT GC9A01屏绘制动态三色百分比圆饼图。通过初始化屏幕、绘制扇形区域、显示数值百分比,并实现数据的动态更新,最终效果是屏幕上显示红、绿、蓝三色圆饼图,不断变化,模拟动态数据更新。百分比实时显示,使数据更直观易懂。

00 (2).jpg
02.jpg
03.jpg
10 (1).jpg
12.jpg
15.jpg

  【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"
#include "math.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 CENTER_X SCREEN_WIDTH / 2
#define CENTER_Y SCREEN_HEIGHT / 2
#define RADIUS 80  // **饼图半径**
#define SPEED 5  // **数据变化速度**

int data1 = 40;  // **数据块 1**
int data2 = 30;  // **数据块 2**
int data3 = 30;  // **数据块 3**

void drawSector(int startAngle, int endAngle, uint16_t color) {
    for (int angle = startAngle; angle < endAngle; angle += 3) {
        float radian1 = angle * M_PI / 180;
        float radian2 = (angle + 3) * M_PI / 180;
        int x1 = CENTER_X + RADIUS * cos(radian1);
        int y1 = CENTER_Y + RADIUS * sin(radian1);
        int x2 = CENTER_X + RADIUS * cos(radian2);
        int y2 = CENTER_Y + RADIUS * sin(radian2);
        tft.fillTriangle(CENTER_X, CENTER_Y, x1, y1, x2, y2, color);
    }
}

void setup() {
    Serial.begin(115200);
    tft.begin();
    tft.setRotation(2);
}

void loop() {
    tft.fillScreen(tft.color565(0, 0, 0));

    int total = data1 + data2 + data3;
    int angle1 = (data1 * 360) / total;
    int angle2 = (data2 * 360) / total;
    int angle3 = (data3 * 360) / total;

    drawSector(0, angle1, tft.color565(255, 0, 0));  // **红色数据块**
    drawSector(angle1, angle1 + angle2, tft.color565(0, 255, 0));  // **绿色数据块**
    drawSector(angle1 + angle2, 360, tft.color565(0, 0, 255));  // **蓝色数据块**

    // **显示数值**
    tft.setTextColor(tft.color565(255, 255, 255));
    tft.setTextSize(2);
    tft.setCursor(CENTER_X - 30, CENTER_Y - 80);
    tft.print((data1 * 100) / total);
    tft.print("%");

    tft.setCursor(CENTER_X - 80, CENTER_Y + 20);
    tft.print((data2 * 100) / total);
    tft.print("%");

    tft.setCursor(CENTER_X + 40, CENTER_Y + 20);
    tft.print((data3 * 100) / total);
    tft.print("%");

    // **更新数据**
    data1 = random(20, 50);
    data2 = random(20, 50);
    data3 = random(20, 50);

    delay(2000);
}

这段代码的核心功能是 动态圆饼图,它会根据数据变化调整不同颜色的扇形区域,同时在图表上 显示百分比数值,形成动态的可视化效果。
代码结构
1️⃣ 初始化屏幕
• 使用 Adafruit_GC9A01A 控制 TFT 显示屏,并设置黑色背景。
2️⃣ 绘制圆饼图扇形区域
• 使用 drawSector() 方法,利用 fillTriangle() 绘制 多个扇形块,形成完整的饼图。
• 通过 cos() 和 sin() 计算扇形角度,确保图形正确绘制。
3️⃣ 显示数值百分比
• print() 方法在每个扇形内显示 对应百分比数值,提高数据可视化效果。
4️⃣ 动态更新数据
• 每次循环 数据随机变化,影响扇形大小,使饼图不断更新。
• delay(2000); 让数据变化有明显视觉效果,并保持平滑动画。
最终效果
📊 屏幕上显示红、绿、蓝三色圆饼图,不断变化,模拟动态数据更新 ⚡ 百分比实时显示,使数据更直观易懂 🎨 黑色背景 + 三色扇形块 + 白色数值,提高视觉清晰度

实验场景图  动态图

 

89-4 (1).jpg
89-4 (2).jpg
00108--.gif

创作许可协议

本项目采用 None(不开放任何权利,保留所有权利) 进行许可。

评论(0)
- 没有更多了 -