【花雕学编程】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 <TFT_eSPI.h>

TFT_eSPI tft = TFT_eSPI();
#define SCREEN_WIDTH 240
#define SCREEN_HEIGHT 240
#define TEXT_HEIGHT 140  // 文本高度
#define SCROLL_SPEED 5  // 滚动速度（像素/步）
#define REFRESH_RATE 50 // 刷新速率（毫秒）

int scrollX = SCREEN_WIDTH;  // 初始滚动位置
String priceTag = "¥ 199.99"; // 价格标签

void setup() {
    tft.init();
    tft.setRotation(2);
    tft.fillScreen(TFT_BLACK);
    tft.setTextColor(TFT_WHITE, TFT_BLACK);
    tft.setTextSize(3);
}

void loop() {
    drawScrollingPrice();
    delay(REFRESH_RATE);
}

/**
 * 滚动价格标签
 */
void drawScrollingPrice() {
    tft.fillRect(0, SCREEN_HEIGHT - TEXT_HEIGHT, SCREEN_WIDTH, TEXT_HEIGHT, TFT_BLACK);
    
    tft.setCursor(scrollX, SCREEN_HEIGHT - TEXT_HEIGHT);
    tft.print(priceTag);

    scrollX -= SCROLL_SPEED;

    // 价格滚动到最左侧后，重新回到右侧
    if (scrollX < -tft.textWidth(priceTag)) {
        scrollX = SCREEN_WIDTH;
    }
}
复制代码

代码解读
这段代码在 ESP32 + GC9A01 TFT 显示屏 上实现 动态滚动价格标签，模仿电子价签的显示效果 。

核心逻辑
✅ 滚动文本 → 价格标签从右向左滚动，形成动态效果
✅ 自动循环 → 滚动到最左侧后，重新回到右侧，形成无限循环
✅ 自定义价格 → 价格可以动态更新，支持不同商品价签
✅ 可调滚动速度 → 通过 SCROLL_SPEED 控制滚动速度
✅ 刷新优化 → REFRESH_RATE 控制滚动流畅度

代码解析
1️⃣ 初始化屏幕

tft.init();
tft.setRotation(1);
tft.fillScreen(TFT_BLACK);
tft.setTextColor(TFT_WHITE, TFT_BLACK);
tft.setTextSize(3);
复制代码

设定屏幕方向、填充黑色背景、设置文本颜色和大小。

2️⃣ 价格滚动逻辑

tft.fillRect(0, SCREEN_HEIGHT - TEXT_HEIGHT, SCREEN_WIDTH, TEXT_HEIGHT, TFT_BLACK);
tft.setCursor(scrollX, SCREEN_HEIGHT - TEXT_HEIGHT);
tft.print(priceTag);

scrollX -= SCROLL_SPEED;

if (scrollX < -tft.textWidth(priceTag)) {
    scrollX = SCREEN_WIDTH;
}
复制代码

每次刷新向左移动，直到完全离开屏幕时，重置到右侧，让价格滚动循环显示。

最终视觉效果
屏幕上动态滚动的价格标签
价格标签循环滚动，不断刷新
可以更改价格、调整滚动速度、优化显示效果

实验场景图  动态图