DF创客社区
发现
DF创客商城
教程
产品资料库
搜索
热门搜索
人工智能
视觉传感器
AI 人工智能
行空板
主控板
二哈识图
热门活动
关闭
DF创客社区
发现
DF创客商城
教程
产品资料库
【花雕学编程】Arduino动手做(249)--GC9A01模拟三色圆饼图
2025-04-14
1421
驴友花雕
UID: 1737
2964
文章
157
粉丝
1.1万
获取喜欢
0
0
AI 快速预览
详细
收起
本文介绍了如何使用Arduino和GC9A01显示屏模拟三色圆饼图。通过详细的代码示例和图片展示,读者可以轻松完成这个项目。适用于DIY项目和数据可视化。
创作许可协议
本项目采用
None(不开放任何权利,保留所有权利)
进行许可。
其他主题
Arduino
添加到合集
0
0
相关推荐
我的Q&A问答专栏
陈德熹
2
0
BLE Arduino开发神器 Bluno Beetle开启免费试用啦!
Ash1
2.3万
0
DF创客社区2014年度编辑选择奖 项目篇
Ash1
4.3万
3
评论(6)
驴友花雕
作者
回复
驴友花雕
作者
实验场景图 动态图
回复
驴友花雕
作者
这段代码的核心功能是 动态圆饼图,它会根据数据变化调整不同颜色的扇形区域,同时在图表上 显示百分比数值,形成动态的可视化效果。
代码结构
1️⃣ 初始化屏幕
• 使用 Adafruit_GC9A01A 控制 TFT 显示屏,并设置黑色背景。
2️⃣ 绘制圆饼图扇形区域
• 使用 drawSector() 方法,利用 fillTriangle() 绘制 多个扇形块,形成完整的饼图。
• 通过 cos() 和 sin() 计算扇形角度,确保图形正确绘制。
3️⃣ 显示数值百分比
• print() 方法在每个扇形内显示 对应百分比数值,提高数据可视化效果。
4️⃣ 动态更新数据
• 每次循环 数据随机变化,影响扇形大小,使饼图不断更新。
• delay(2000); 让数据变化有明显视觉效果,并保持平滑动画。
最终效果
屏幕上显示红、绿、蓝三色圆饼图,不断变化,模拟动态数据更新
百分比实时显示,使数据更直观易懂
黑色背景 + 三色扇形块 + 白色数值,提高视觉清晰度
回复
驴友花雕
作者
【Arduino】189种传感器模块系列实验(资料代码+仿真编程+图形编程)
实验二百四十九:1.28寸圆形彩色TFT显示屏 高清IPS 模块 240*240 SPI接口GC9A01驱动
项目之八十九:GC9A01园屏之动态模拟三色百分比圆饼图
实验开源代码
[code]/*
【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);
}[/code]
回复
驴友花雕
作者
回复
驴友花雕
作者
回复
- 没有更多了 -
驴友花雕
UID: 1737
2964
文章
157
粉丝
1.1万
获取喜欢
创作许可协议
本项目采用
None(不开放任何权利,保留所有权利)
进行许可。
相关推荐
我的Q&A问答专栏
陈德熹
2
0
BLE Arduino开发神器 Bluno Beetle开启免费试用啦!
Ash1
2.3万
0
DF创客社区2014年度编辑选择奖 项目篇
Ash1
4.3万
3
代码结构
1️⃣ 初始化屏幕
• 使用 Adafruit_GC9A01A 控制 TFT 显示屏,并设置黑色背景。
2️⃣ 绘制圆饼图扇形区域
• 使用 drawSector() 方法,利用 fillTriangle() 绘制 多个扇形块,形成完整的饼图。
• 通过 cos() 和 sin() 计算扇形角度,确保图形正确绘制。
3️⃣ 显示数值百分比
• print() 方法在每个扇形内显示 对应百分比数值,提高数据可视化效果。
4️⃣ 动态更新数据
• 每次循环 数据随机变化,影响扇形大小,使饼图不断更新。
• delay(2000); 让数据变化有明显视觉效果,并保持平滑动画。
最终效果
屏幕上显示红、绿、蓝三色圆饼图,不断变化,模拟动态数据更新
百分比实时显示,使数据更直观易懂
黑色背景 + 三色扇形块 + 白色数值,提高视觉清晰度
实验二百四十九:1.28寸圆形彩色TFT显示屏 高清IPS 模块 240*240 SPI接口GC9A01驱动
项目之八十九:GC9A01园屏之动态模拟三色百分比圆饼图
实验开源代码
[code]/*
【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);
}[/code]