当前位置：首页 > news >正文

ESP32-Arduino IDE的开发学习记录（二）显示屏

news 2026/5/31 12:57:51

记录ESP32-Arduino IDE的学习

关于ST7735驱动屏的显示

开发板：合宙ESP32C3

#include <Adafruit_GFX.h> #include <Adafruit_ST7735.h> #include <SPI.h> #include "image.h" //图像头文件 #include <U8g2_for_Adafruit_GFX.h> // 屏幕引脚定义 #define TFT_CS 4 #define TFT_DC 6 #define TFT_RST -1 // 创建TFT对象 Adafruit_ST7735 tft = Adafruit_ST7735(TFT_CS, TFT_DC, TFT_RST); U8G2_FOR_ADAFRUIT_GFX u8g2_for_adafruit_gfx; //显示图片 void showImage(const uint16_t* imageData, int width, int height) { int x = (tft.width() - width) / 2; int y = (tft.height() - height) / 2; for (int i = 0; i < height; i++) { for (int j = 0; j < width; j++) { int index = i * width + j; tft.drawPixel(x + j, y + i, imageData[index]); } } } void setup() { // 初始化屏幕 Serial.begin(115200); Serial.println("=== 测试程序 ==="); tft.initR(INITR_BLACKTAB); tft.setRotation(0); // 尝试不同的旋转值：0, 1, 2, 3 tft.fillScreen(ST77XX_WHITE); u8g2_for_adafruit_gfx.begin(tft); u8g2_for_adafruit_gfx.setFontMode(1); u8g2_for_adafruit_gfx.setFontDirection(0); u8g2_for_adafruit_gfx.setForegroundColor(ST77XX_BLACK); u8g2_for_adafruit_gfx.setFont(u8g2_font_wqy14_t_gb2312); u8g2_for_adafruit_gfx.setCursor(0, 0); u8g2_for_adafruit_gfx.print(""); // 空字符串，只是触发字体初始化 delay(100); // 短暂延迟确保初始化完成 } void displayText(uint16_t bgColor, uint16_t textColor, const uint8_t *font, const char *text, int16_t x, int16_t y) { tft.fillScreen(bgColor); u8g2_for_adafruit_gfx.setFontMode(1); u8g2_for_adafruit_gfx.setForegroundColor(textColor); u8g2_for_adafruit_gfx.setFont(font); u8g2_for_adafruit_gfx.setCursor(x, y); u8g2_for_adafruit_gfx.print(text); } void loop() { displayText(ST77XX_WHITE, ST77XX_BLACK, u8g2_font_wqy14_t_gb2312, "Hello！我是小美", 14, 14); //背景颜色，文字颜色，字体，文字，位置 delay(2000); tft.fillScreen(ST77XX_WHITE); showImage(image, IMAGE_WIDTH, IMAGE_HEIGHT); delay(2000); }

图片数据

//image.h const uint16_t image[0x5000] PROGMEM ={ 0xFFDC, 0xF7DC, 0xFFDC, 0xFFDC, 0xFFDC, 0xFFDB, 0xFFDA, 0xFFD9, 0xFFB6, 0xFFB5, 0xFFB5, 0xFFD4, 0xFFB4, 0xFFB5, 0xFFB5, 0xFFB6, // 0x0010 (16) 0xFFD8, 0xFFF9, 0xFFFA, 0xFFFB, 0xFFDC, 0xFFDC, 0xFFDC, 0xFFDB, 0xFFDA, 0xFFD9, 0xFFB7, 0xFF96, 0xFFB6, 0xFFB5, 0xFFB5, 0xFFB5, // 0x0020 (32) 0xFFB5, 0xFFB5, 0xFFB7, 0xFFD9, 0xFFDA, 0xFFDB, 0xFFBC, 0xFFDD, 0xFFBC, 0xFFDC, 0xFFDB, 0xFFB9, 0xFF97, 0xFF95, 0xFF94, 0xFFB5, // 0x0030 (48) 0xFFB5, 0xFFB6, 0xFF96, 0xFF97, 0xFFB8, 0xFFDA, 0xFFFB, 0xFFDB, 0xFFDC, 0xFFDC, 0xFFDC, 0xFFDC, 0xFFDB, 0xFFDB, 0xFFDB, 0xFFDA, // 0x0040 (64) 0xFFDB, 0xFFDB, 0xFFDB, 0xFFDC, 0xFFDC, 0xFFDC, 0xFFDC, 0xFFFC, 0xFFFC, 0xFFDB, 0xFFDA, 0xFFB9, 0xFF97, 0xFF76, 0xFF96, 0xFF96, // 0x0050 (80) 0xFFB5, 0xFFB5, 0xFFB6, 0xFF96, 0xFFB8, 0xFFFA, 0xFFFC, 0xFFDD, 0xFFDD, 0xFFDD, 0xFFDD, 0xFFDC, 0xFFDA, 0xFFD8, 0xFFB6, 0xFF95, // 0x0060 (96) 0xFFB5, 0xFFB5, 0xFFB5, 0xFFB6, 0xFFB6, 0xFFB7, 0xFFB8, 0xFFDA, 0xFFDB, 0xFFDC, 0xFFDD, 0xFFDD, 0xFFFC, 0xFFDC, 0xFFFB, 0xFFFA, // 0x0070 (112) 0xFF96, 0xFF95, 0xFFB5, 0xFFB5, 0xFFB4, 0xFFD5, 0xFFB6, 0xF7B6, 0xFFB8, 0xFFD9, 0xFFFB, 0xFFDB, 0xF7DB, 0xFFFC, 0xFFFB, 0xF7DB, // 0x0080 (128) 0xFFDC, 0xF7DC, 0xFFDC, 0xFFDC, 0xFFDC, 0xFFDB, 0xFFDA, 0xFFD9, 0xFFB6, 0xFFB5, 0xFFB5, 0xFFD4, 0xFFB4, 0xFFB5, 0xFFB5, 0xFF96, // 0x0090 (144) 0xFFD8, 0xFFF9, 0xFFFB, 0xFFFB, 0xFFDC, 0xFFDC, 0xFFDC, 0xFFDB, 0xFFDA, 0xFFD9, 0xFFB7, 0xFF96, 0xFFB5, 0xFFB5, 0xFFB5, 0xFFB5, // 0x00A0 (160) 。。。。 。。。。 }; int IMAGE_WIDTH = 128; int IMAGE_HEIGHT = 160;

使用ImageConverter565图片转换工具

点击Open image选择一个想要显示的图片，图片导进来之后选择Save保存转换好的数据，会生成一个.c文件，打开把数据复制到image.h里就可以使用

文字和图片都可以通过屏幕显示出来

查看全文

http://www.jsqmd.com/news/578738/