驴友花雕 发表于 2025-4-17 20:12:12

【花雕学编程】Arduino动手做（249）--GC9A01完整的模拟时钟




驴友花雕 发表于 2025-4-17 20:13:28

【花雕学编程】Arduino动手做（249）--GC9A01完整的模拟时钟




驴友花雕 发表于 2025-4-17 20:15:06

【花雕学编程】Arduino动手做（249）--GC9A01完整的模拟时钟




驴友花雕 发表于 2025-4-17 20:16:12

【花雕学编程】Arduino动手做（249）--GC9A01完整的模拟时钟

【Arduino】189种传感器模块系列实验（资料代码+仿真编程+图形编程）
实验二百四十九：1.28寸圆形彩色TFT显示屏 高清IPS 模块 240*240 SPI接口GC9A01驱动
项目之一百零八：ESP32+GC9A01之完整的模拟时钟，包含刻度、指针和动态时间更新

实验开源代码

/*
【Arduino】189种传感器模块系列实验（资料代码+仿真编程+图形编程）
实验二百四十九：1.28寸圆形彩色TFT显示屏 高清IPS 模块 240*240 SPI接口GC9A01驱动
项目之一百零八：ESP32+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 <TFT_eSPI.h> // 引入 TFT_eSPI 库，用于驱动 TFT 显示屏

#define TFT_GREY 0x5AEB // 定义灰色作为背景颜色

TFT_eSPI tft = TFT_eSPI(); // 初始化 TFT 屏幕对象

// 定义指针的坐标变量
float sx = 0, sy = 1, mx = 1, my = 0, hx = -1, hy = 0;// 用于存储时、分、秒针的旋转坐标
float sdeg=0, mdeg=0, hdeg=0; // 用于存储时、分、秒针的角度
uint16_t osx=120, osy=120, omx=120, omy=120, ohx=120, ohy=120;// 旧坐标值，用于擦除指针
uint16_t x0=0, x1=0, yy0=0, yy1=0; // 刻度线坐标
uint32_t targetTime = 0;// 定义时间变量，每秒更新一次

// 获取编译时间（仅用于初始化时钟）
static uint8_t conv2d(const char* p); // 预声明转换函数
uint8_t hh = conv2d(__TIME__);      // 解析当前小时
uint8_t mm = conv2d(__TIME__ + 3);    // 解析当前分钟
uint8_t ss = conv2d(__TIME__ + 6);    // 解析当前秒数

bool initial = true;// 标记是否为初始化状态

void setup(void) {
    tft.init();// 初始化屏幕
    tft.setRotation(0);// 设置屏幕旋转方向
    tft.fillScreen(TFT_GREY);// 填充背景颜色

    tft.setTextColor(TFT_WHITE, TFT_GREY);// 设置文字颜色，背景颜色自动清除旧文字

    // **绘制时钟表盘**
    tft.fillCircle(120, 120, 118, TFT_GREEN);// 绘制外层绿色圆形
    tft.fillCircle(120, 120, 110, TFT_BLACK);// 绘制内层黑色圆形（表盘主体）

    // **绘制 12 个刻度线**
    for (int i = 0; i < 360; i += 30) {
      sx = cos((i - 90) * 0.0174532925);// 计算角度偏移
      sy = sin((i - 90) * 0.0174532925);
      x0 = sx * 114 + 120;// 外端坐标
      yy0 = sy * 114 + 120;
      x1 = sx * 100 + 120;// 内端坐标
      yy1 = sy * 100 + 120;
      tft.drawLine(x0, yy0, x1, yy1, TFT_GREEN);// 绘制绿色刻度线
    }

    // **绘制 60 个分钟标记**
    for (int i = 0; i < 360; i += 6) {
      sx = cos((i - 90) * 0.0174532925);
      sy = sin((i - 90) * 0.0174532925);
      x0 = sx * 102 + 120;
      yy0 = sy * 102 + 120;
      tft.drawPixel(x0, yy0, TFT_WHITE);// 绘制白色像素点

      // **绘制四个主刻度点**
      if (i == 0 || i == 180) tft.fillCircle(x0, yy0, 2, TFT_WHITE);
      if (i == 90 || i == 270) tft.fillCircle(x0, yy0, 2, TFT_WHITE);
    }

    // **绘制中心点**
    tft.fillCircle(120, 121, 3, TFT_WHITE);

    // **在屏幕底部绘制文字**
    tft.drawCentreString("Time flies", 120, 260, 4);// 居中显示文字

    targetTime = millis() + 1000;// 设置目标时间，每秒更新一次
}

void loop() {
    // **每秒更新时间**
    if (targetTime < millis()) {
      targetTime += 1000;
      ss++;// 秒数递增
      if (ss == 60) {
            ss = 0;
            mm++;// 分钟递增
            if (mm > 59) {
                mm = 0;
                hh++;// 小时递增
                if (hh > 23) {
                  hh = 0;
                }
            }
      }

      // **计算指针角度**
      sdeg = ss * 6;// 秒针：0-59 -> 0-354
      mdeg = mm * 6 + sdeg * 0.01666667;// 分针：包含秒钟偏移
      hdeg = hh * 30 + mdeg * 0.0833333;// 时针：包含分钟偏移
      hx = cos((hdeg - 90) * 0.0174532925);
      hy = sin((hdeg - 90) * 0.0174532925);
      mx = cos((mdeg - 90) * 0.0174532925);
      my = sin((mdeg - 90) * 0.0174532925);
      sx = cos((sdeg - 90) * 0.0174532925);
      sy = sin((sdeg - 90) * 0.0174532925);

      // **擦除旧指针**
      if (ss == 0 || initial) {
            initial = false;
            tft.drawLine(ohx, ohy, 120, 121, TFT_BLACK);
            ohx = hx * 62 + 121;
            ohy = hy * 62 + 121;
            tft.drawLine(omx, omy, 120, 121, TFT_BLACK);
            omx = mx * 84 + 120;
            omy = my * 84 + 121;
      }

      // **绘制新指针**
      tft.drawLine(osx, osy, 120, 121, TFT_BLACK);// 擦除旧秒针
      osx = sx * 90 + 121;
      osy = sy * 90 + 121;
      tft.drawLine(osx, osy, 120, 121, TFT_RED);// 绘制新秒针
      tft.drawLine(ohx, ohy, 120, 121, TFT_WHITE);// 绘制时针
      tft.drawLine(omx, omy, 120, 121, TFT_WHITE);// 绘制分针
      tft.drawLine(osx, osy, 120, 121, TFT_RED);// 绘制秒针

      // **绘制中心点**
      tft.fillCircle(120, 121, 3, TFT_RED);
    }
}

// **字符串转换为数字**
static uint8_t conv2d(const char* p) {
    uint8_t v = 0;
    if ('0' <= *p && *p <= '9')
      v = *p - '0';
    return 10 * v + *++p - '0';
}


驴友花雕 发表于 2025-4-17 20:18:05

【花雕学编程】Arduino动手做（249）--GC9A01完整的模拟时钟

这段代码绘制了一个模拟时钟，并且 实时更新指针位置 来显示当前时间。
代码结构

1️⃣ 初始化屏幕

[*]使用 TFT_eSPI 驱动 GC9A01 显示屏，设定 灰色背景。

2️⃣ 绘制时钟表盘

[*]fillCircle() 绘制 绿色外圈 和 黑色表盘。

[*]drawLine() 画 12 个小时刻度，确保时钟准确性。

[*]drawPixel() 画 60 个小刻度，增强细节表现。

3️⃣ 计算指针角度

[*]秒针：sdeg = ss * 6，秒数直接映射到角度。

[*]分针：mdeg = mm * 6 + sdeg * 0.01666667，确保秒钟影响分针。

[*]时针：hdeg = hh * 30 + mdeg * 0.0833333，包括分钟偏移。

4️⃣ 指针动态旋转

[*]每秒更新 时针、分针、秒针，并擦除旧位置，确保流畅动画。

[*]红色秒针动态变化，形成真实时钟效果。

5️⃣ 持续刷新

[*]millis() 计算时间，每 1 秒更新 指针位置，保持流畅动画。



最终效果
屏幕上显示模拟时钟，时针、分针、秒针动态更新
表盘美观，增强视觉体验
秒针移动流畅，使时间显示真实

驴友花雕 发表于 2025-4-17 20:23:29

【花雕学编程】Arduino动手做（249）--GC9A01完整的模拟时钟

实验场景图动态图




驴友花雕 发表于 2025-4-17 20:25:59

【花雕学编程】Arduino动手做（249）--GC9A01完整的模拟时钟


页: [1]
查看完整版本: 【花雕学编程】Arduino动手做（249）--GC9A01完整的模拟时钟