回到首页 返回首页
回到顶部 回到顶部
返回上一页 返回上一页

【花雕学编程】Arduino动手做(249)---ESP32+GC9A01之蓝色背景白色文本的向上滚动显示 简单

头像 驴友花雕 2025.05.07 8 0

00 (2).jpg
02.jpg
03.jpg

10 (1).jpg
12.jpg
15.jpg

【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 库**
#include <SPI.h>

TFT_eSPI tft = TFT_eSPI();  // **初始化 TFT 屏幕**
const char* text = "ESP32 + GC9A01 Display Test";  // **需要显示的文本**
int y = 120;  // **文本起始 Y 坐标**
int scrollSpeed = 2;  // **滚动速度**

void setup() {
    tft.init();
    tft.setRotation(2);  // **适配 GC9A01 圆形显示**
    tft.fillScreen(TFT_BLUE);  // **设置蓝色背景**
    tft.setTextColor(TFT_WHITE, TFT_BLUE);  // **白色字体,带蓝色背景**
    tft.setTextSize(2);  // **设置字体大小**
}

void loop() {
    tft.fillScreen(TFT_BLUE);  // **清屏**
    tft.drawString(text, 20, y, 2);  // **绘制文本**

    y -= scrollSpeed;  // **向上滚动**

    // **如果文字完全离开屏幕顶部,则重置位置**
    if (y < -20) {  
        y = 190;  
    }

    delay(50);  // **控制滚动速度**
}

代码简单解读

这段代码在 GC9A01 圆形 TFT 屏幕 上实现了 蓝色背景 + 白色文本的向上滚动显示,核心逻辑如下:

1. 初始化
✅ tft.init(); → 启动 GC9A01 屏幕
✅ tft.setRotation(2); → 旋转屏幕,适配圆形显示
✅ tft.fillScreen(TFT_BLUE); → 设置蓝色背景
✅ tft.setTextColor(TFT_WHITE, TFT_BLUE); → 白色字体,带蓝色背景
✅ tft.setTextSize(2); → 调整字体大小

2. 文字滚动
✅ y -= scrollSpeed; → 让文本不断向上移动
✅ drawString(text, 20, y, 2); → 绘制字符串,显示文本
✅ 清屏 → fillScreen(TFT_BLUE); 避免残留的旧字符

3. 循环滚动
✅ if (y < -20) y = 120; → 当文本滚出屏幕顶部后,重新从底部开始滚动
✅ delay(50); → 控制滚动速度,让动画流畅

这个代码让 GC9A01 屏幕不断滚动显示文本,形成向上移动的动画效果。

实验场景图 动态图

95-1 (1).jpg
95-1 (2).jpg
00126--.gif

评论

user-avatar
icon 他的勋章
    展开更多