用ESP32+GC9A01圆形屏幕做一个小挂件

起因是因为水群的时候有个老哥问我可不可以把阿宅徽章做到屏幕上并且能更换,我就去找了找合适的屏幕,结果发现GC9A01这块1.28英寸240*240的圆形屏幕刚好适合,但是本人小白一个,于是就找了两天的教程,由于SD卡模块还在路上,所以先用自带的flash试了试,下一步就是把屏幕和ESP32集成到一小块PCB上,再打印一个外壳然后做成背包挂件,成本估计60不到的样子
PCB上我没画USB转TTL电路,所以Type-C接口只能供电,烧录文件的话我在PCB上预留了串口


现已开源
项目开源和bom表在这里:https://github.com/Myzhazha/ESP-32_GC9A01_JPG
PCB文件开源地址:https://oshwhub.com/Myzhazha/1-28tft-esp32
播放视频使用这个项目:https://github.com/Myzhazha/ESP-32_GC9A01_JPG/tree/main/Video_Demo
播放视频预览:https://www.bilibili.com/video/BV1DV411q7rG/
交流群:636426429


原链接:https://giltesa.com/en/2021/01/05/photographic-album-using-esp32-and-gc9a01-round-screen


成品预览:


1.jpg
2.jpg
3.jpg
加上外壳

PCB:


0.jpg

所需材料:

GC9A01圆形屏幕(¥40包邮)


GC9A01

ESP32模块,我这里用的是带有外围电路的开发板(¥19包邮)


ESP32模块

Micro SD卡模块(¥1.78 可以在买ESP32模块的店里购买)


Micro SD卡模块

一张小于2G的内存卡,需要格式化成FAT32格式(Micro SD卡模块官方说只支持小于等于2G的内存卡,但是我用8G的测试也可以)

母对母杜邦线13根


所需软件:

Arduino IDE 下载链接https://www.arduino.cc(下载后安装)

Arduino_GFX库 链接https://github.com/moononournation/Arduino_GFX/releases/tag/v1.0.5
(下载后解压至C:\Users\用户名\Documents\Arduino\libraries\目录)

JPEGDEC库https://github.com/bitbank2/JPEGDEC
下载后解压至C:\Users\用户名\Documents\Arduino\libraries\目录)


打开Arduino IDE选择文件>首选项>附加开发板管理器网址 右侧的小图标

填入https://dl.espressif.com/dl/package_esp32_index.json

截图1

然后选择工具>开发板>开发板管理器


截图2

等它下载完索引之后在搜索框输入ESP32然后安装


截图3

安装完之后重启一下ArduinoIDE


打开ArduinoIDE新建一个项目,把以下代码复制进去然后保存为ESP32_GC9A01.ino

#include 
#include "JpegClass.h"
#include 
#include 
#include 


#define MISO     2
#define SCLK    14  //SCL
#define MOSI    15  //SDA
#define SD_CS   13
#define TFT_CS   5
#define TFT_BLK 22
#define TFT_DC  27
#define TFT_RST 33


Arduino_DataBus *bus = new Arduino_HWSPI(TFT_DC, TFT_CS, SCLK, MOSI, MISO, true);
Arduino_GC9A01  *gfx = new Arduino_GC9A01(bus, TFT_RST, 0, true);
static JpegClass jpegClass;


void setup()
{
    Serial.begin(115200);


   //Init MicroSD
    SPI.begin(SCLK, MISO, MOSI, SD_CS);
    if( !SD.begin(SD_CS) )
    {
        Serial.println("Card Mount Failed");
        gfx->println(F("ERROR: Card Mount Failed!"));
        return;
    }

    uint8_t cardType = SD.cardType();
    if( cardType == CARD_NONE )
    {
        Serial.println("No SD card attached");
        gfx->println(F("ERROR: No SD card attached"));
        return;
    }

    Serial.print("SD Card Type: ");
    switch( cardType )
    {
        case CARD_MMC:  Serial.println("MMC");  break;
        case CARD_SD:   Serial.println("SDSC"); break;
        case CARD_SDHC: Serial.println("SDHC"); break;
        default:        Serial.println("UNKNOWN");
    }


    //Init Display
    gfx->begin();
    gfx->fillScreen(BLACK);

    #ifdef TFT_BLK
      pinMode(TFT_BLK, OUTPUT);
      digitalWrite(TFT_BLK, HIGH);
    #endif
}



void loop()
{
    unsigned long start = millis();

    File root = SD.open("/img");
    printDirectory(root, 0);

    Serial.printf("Time used: %lu\n", millis() - start);
}



void printDirectory(File dir, int numTabs)
{
    while( true )
    {
        File entry =  dir.openNextFile();
        if( !entry )
        {
            //No more files. Return to the first file in the directory
            dir.rewindDirectory();
            break;
        }

        for( uint8_t i=0 ; iwidth(), gfx->height());
            delay(5000); //图片显示时长,单位ms
        }
    }
}




static int jpegDrawCallback(JPEGDRAW *pDraw)
{
    gfx->draw16bitBeRGBBitmap(pDraw->x, pDraw->y, pDraw->pPixels, pDraw->iWidth, pDraw->iHeight);
}

然后在ino工程同目录新建一个.h工程,把以下代码复制进去(也可以用记事本,保存后把.txt扩展名改成.h)

/*******************************************************************************
 * JPEGDEC Wrapper Class
 *
 * Dependent libraries:
 * JPEGDEC: https://github.com/bitbank2/JPEGDEC.git
 ******************************************************************************/
#ifndef _JPEGCLASS_H_
#define _JPEGCLASS_H_

#include 

class JpegClass
{
public:
    void draw( File f, JPEG_DRAW_CALLBACK *jpegDrawCallback, bool useBigEndian, int x, int y, int widthLimit, int heightLimit )
    {
        _jpeg.open(f, jpegDrawCallback);

        // scale to fit height
        int _scale;
        int iMaxMCUs;
        float ratio = (float)_jpeg.getHeight() / heightLimit;
        if (ratio <= 1)
        {
            _scale = 0;
            iMaxMCUs = widthLimit / 16;
        }
        else if (ratio <= 2)
        {
            _scale = JPEG_SCALE_HALF;
            iMaxMCUs = widthLimit / 8;
        }
        else if (ratio <= 4)
        {
            _scale = JPEG_SCALE_QUARTER;
            iMaxMCUs = widthLimit / 4;
        }
        else
        {
            _scale = JPEG_SCALE_EIGHTH;
            iMaxMCUs = widthLimit / 2;
        }
        _jpeg.setMaxOutputSize(iMaxMCUs);
        if (useBigEndian)
        {
            _jpeg.setPixelType(RGB565_BIG_ENDIAN);
        }
        _jpeg.decode(x, y, _scale);
        _jpeg.close();
    }

private:
    JPEGDEC _jpeg;
};

#endif // _JPEGCLASS_H_

然后保存为JpegClass.h文件


Arduino IDE打开保存的ESP32_GC9A01.ino文件
选择工具>开发板>ESP32 Arduino>ESP32 Dev Module
把你的ESP32用数据线连到电脑USB接口(请提前安装驱动)
在设备管理器里会看到有个COM口,记住COM后面的那个数字
在Arduino IDE>工具>端口选择你的开发板所在的端口
然后点击Arduino IDE>项目>上传
此时Arduino IDE会编译文件,等到下方窗口出现Connecting........的时候按下ESP32开发板上的BOOT按钮


截图4

此时代码开始写入
等到显示“上传成功”


截图5

拔掉开发板开始连接屏幕和SD卡模块

屏幕连接开发板引脚

屏幕GND对应开发板GND
屏幕VCC对应开发板3.3
屏幕SCL对应开发板D14
屏幕SDA对应开发板D15
屏幕RES对应开发板D33
屏幕DC对应开发板D27
屏幕CS对应开发板D5
屏幕BLK引脚留空不连


Micro SD卡模块连接开发板引脚(MOSI和SCK引脚是和屏幕共用的)

SD卡GND对应开发板GND
SD卡VCC对应开发板VIN
SD卡MISO对应开发板D2
SD卡MOSI对应开发板D15(和屏幕共用)
SD卡SCK对应开发板D14(和屏幕共用)
SD卡CS对应开发板D13


把SD卡用读卡器连接电脑,格式化成FAT32格式,在SD卡根目录创建img文件夹,把需要显示的图片用软件裁剪更改为240*240分辨率的jpg图片然后放到img文件夹里
拔出读卡器把SD卡插到SD卡模块上把ESP32通电就行了

图片更换的时长在ESP32_GC9A01.ino的delay()里更改,单位毫秒,默认显示时长为5000毫秒(5秒)

1.jpg

实际显示效果要好很多

你可能感兴趣的:(用ESP32+GC9A01圆形屏幕做一个小挂件)