esp32和RGB_tft屏幕(st7735)使用tft_espi库函数的简单小时钟(太空人)

        使用主控为esp32,驱动库为tft_espi,使用平台为vscode+platform。简单记录下自己的第一版简易小时钟。

        下面为画面效果:

小时钟

代码:

#include <SPI.h>
#include <Adafruit_I2CDevice.h>
#include <TFT_eSPI.h>
#include "gImage.h"
#include <WiFi.h>
#include <Update.h>
#include <WiFiManager.h>
#include <NTPClient.h>
#include <WiFiUdp.h>
#include <SPI.h>
#include <qrcode.h>

const char* ssid = "ssid_IP"; // 替换为你的WiFi SSID
const char* password = "password"; // 替换为你的WiFi密码

WiFiUDP ntpUDP;
NTPClient timeClient(ntpUDP, "pool.ntp.org");
TFT_eSPI tft = TFT_eSPI();
/******显示太空人函数********* */
void displayGIF(void)
{
    #define DELAY_TIME 100 // 延迟时间,单位为毫秒
    const int imageCount = 12;
    const int x = 65;
    const int y = 95;
    const int width = 64;
    const int height = 64;
    int8_t i=0;
    for( i =0; i < imageCount; i++) {
        tft.pushImage(x, y, width, height, gImageArray[i]);
        delay(DELAY_TIME);
        }
}
// void GUIstart(){


// }

void showProgressBar(int progress, int total) {
    float ratio = static_cast<float>(progress) / total; // 计算进度百分比
    int barWidth = tft.width() - 28; // 进度条宽度
    int barHeight = 10; // 进度条高度
    int cornerRadius = 5; // 圆角半径

    int filledWidth = static_cast<int>(ratio * barWidth); // 计算填充的宽度

    tft.fillRoundRect(10, 80, filledWidth, barHeight, cornerRadius,TFT_WHITE); // 绘制填充区域
    tft.drawRoundRect(10, 80, barWidth, barHeight, cornerRadius,TFT_WHITE); // 绘制进度条边框

    tft.setTextSize(1); // 设置字体大小
    tft.setTextColor(TFT_WHITE); // 设置字体颜色
    tft.setCursor(43, 40); // 设置字体位置
    tft.print("Progress"); // 显示连接WiFi的提示信息
}

void setup() {
   
    tft.init();
    tft.setRotation(0);  // 设置旋转角度
    tft.fillScreen(TFT_BLACK);  // 清屏
    tft.setTextSize(1); // 设置字体大小
    tft.setTextColor(TFT_WHITE); // 设置字体颜色
    tft.setCursor(10, 40); // 设置字体位置
    Serial.begin(115200);
    WiFi.begin(ssid, password);

    while (WiFi.status() != WL_CONNECTED) {
        delay(1000);
        //Serial.println("Connecting to WiFi...");
        tft.println("Connecting to WiFi");
    }
     delay(2000);
    tft.fillScreen(TFT_BLACK); 
    timeClient.begin();
    timeClient.setTimeOffset(28800); // 设置时区偏移量,这里设置为北京时间(UTC+8)
    int total = 100; // 总进度值
    for (int i = 0; i <= total; ++i) {
        showProgressBar(i, total); // 更新进度条    
        delay(100); // 暂停100毫秒
    }
    tft.fillScreen(TFT_BLACK);  // 清屏
     tft.setTextSize(1); // 设置字体大小
    tft.setTextColor(TFT_GOLD); // 设置字体颜色
    tft.setCursor(5, 5);
    tft.println("Hello, I am WC!");
    tft.setCursor(10, 80);
    tft.println("This is my oclock!");
}

void loop() {
    timeClient.update();
    tft.fillSmoothRoundRect(10, 30, 100, 15, 5, TFT_BLACK); // 绘制填充区域
    tft.setTextSize(2); // 设置字体大小
    tft.setTextColor(TFT_GREENYELLOW); // 设置字体颜色
    tft.setCursor(10, 30); // 设置字体位置
    tft.println(timeClient.getFormattedTime()); // 显示时间
    delay(10);
    displayGIF();
   

    
 
}

### 关于ESP32使用TFT_eSPI库的方法 #### 硬件连接 对于采用ST7789驱动器的显示屏,如TTGO 1.14英寸LCD屏,其与ESP32之间的接线方式较为固定。通常情况下,这些屏幕通过SPI接口通信,并且可能已经预焊接好排针以便直接插接到ESP32开发板上[^2]。 | SPI信号 | ESP32引脚 | | --- | --- | | SCK (串行时钟) | GPIO18 或其他指定为SCLK的GPIO | | MOSI (主输出/从输入数据线) | GPIO23 或者MOSI对应的GPIO| | CS (片选) | 可配置, 常见的是GPIO5 | | DC (数据/命令控制)| 可配置, 如GPIO16 | | RST (复位)| 可配置, 比如GPIO27 | 请注意实际产品可能会有所不同,具体应参照所使用的特定模块文档说明。 #### 安装TFT_eSPI库并初始化显示设备 为了使能对上述硬件的支持,在Arduino IDE环境中需安装`TFT_eSPI`库。这可以通过IDE内置的库管理工具完成。一旦安装完毕,则可以在项目源文件夹内找到名为`tft_config.h`的头文件;在此处定义具体的引脚分配以及其他必要的参数设置以匹配个人硬件环境[^1]。 ```cpp #include <TFT_eSPI.h> // Hardware-specific library TFT_eSPI tft = TFT_eSPI(); void setup() { Serial.begin(115200); // Initialize the display using default parameters defined in tft_config.h. tft.init(); } ``` 这段简单的代码展示了如何创建一个基于TFT_eSPI类的对象实例`tft`以及调用成员函数`.init()`来进行基本初始化操作[^4]。 #### 绘制图形文字到屏幕上 下面给出了一段用于测试目的的小例子——它会在启动之后清空整个画面再画一条彩虹渐变色带作为背景图案,最后居中打印一句问候语句: ```cpp void loop(){ // Fill screen with gradient colors as background uint16_t color; int y; for(y=0; y<TFT_HEIGHT; ++y){ color=tft.color565((uint8_t)(map(y,TFT_HEIGHT>>1,0,0,255)), (uint8_t)(map(y,0,TFT_HEIGHT>>1,0,255)), 0); tft.drawLine(0,y,TFT_WIDTH-1,y,color); } // Print text centered on top of rainbow bar String msg="Hello World!"; int16_t tbx,tby; uint16_t tw,th; tft.getTextBounds(msg.c_str(),0,0,&tbx,&tby,&tw,&th); tft.setTextColor(TFT_WHITE,TFT_BLACK); tft.setCursor((TFT_WIDTH-tw)/2,(TFT_HEIGHT-th)/2); tft.print(msg); while(true){} // Stop here after drawing once } ``` 此部分利用了`tft.draw...()`系列绘图API实现了视觉效果展示功能。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值