关于LCD显示

LCD文档链接

屏幕以左上角为原点，320*240

常用函数表

M5.Lcd.setBrightness(i);//设置亮度0-255

M5.Lcd.setTextWrap(true, true);//设置横纵坐标自动换行

M5.Lcd.setTextSize(4);//设置字体大小1-7

M5.Lcd.print(M5.Lcd.textWidth(text));//返回字符串宽度

M5.Lcd.setTextColor(RED,BLACK);//设置前景色和背景色

M5.Lcd.setCursor(0,50); //设置光标处于(0,47)

M5.Lcd.setTextPadding(M5.Lcd.width() - 20);//设定指定的空白宽度，针对drawString

M5.Lcd.setTextDatum(MC_DATUM);//设置对齐方式，针对drawString

M5.Lcd.drawFastHLine(3, 100, 255, GREEN);//画长度是255的横线

M5.Lcd.drawFastVLine(100, 0, 255, TFT_GREEN);//画长度是255的竖线

M5.Lcd.drawString("Hello M5", 160, 100, 2);//最后一个参数是字体大小，从1到7

M5.Lcd.drawNumber(99, 55, 100); //在(55,100)显示99

M5.Lcd.drawChar('A', 160, 120, 2); //Display character A in font 2 at (160, 120)

M5.Lcd.drawFloat(3.1415928,7,100,100); //Display a floating point number with 7 digits after the decimal point at (100, 100) 3.1415928

M5.Lcd.drawLine(200, 0, 200,2000,GREEN); //Draw a straight line in green from point (200, 0) to point (200, 200)

M5.Lcd.drawRect(180, 12, 122, 10, BLUE);//用蓝色在(188，12)画一个宽122高10的矩形

M5.Lcd.fillRect(150, 120, 122, 10, BLUE);//画实心矩形

M5.Lcd.drawRoundRect(55,55,30,50,10,GREEN);//画圆角半径为10的圆角矩形

M5.Lcd.drawCircle(100, 100, 50, RED);//画半径50的圆

M5.Lcd.drawTriangle(30, 30, 180, 100, 80, 150, YELLOW);//画三角形

几个程序

从SPIFFS读取文件显示BMP位图

#include "SPIFFS.h"
#include 

void setup() {
  M5.Lcd.begin();
  SPIFFS.begin();
  File f = SPIFFS.open("/a.bmp",FILE_READ);
  if(f){
     M5.Lcd.drawBmpFile(SPIFFS, "/a.bmp",0,0);  
  }else{
    M5.Lcd.print("no such file");                               
  }
}

void loop(){
}

使用官方提供的arduino插件，向ESP32的flash memory写入要上传的内容（上传数据放在项目文件夹下data目录里，每次上传会清除原来的内容）

插件链接

显示JPEG图片

drawJpgFile(fs::FS &fs, const char *path, uint16_t x,uint16_t y,uint16_t maxWidth, uint16_t maxHeight, uint16_t offX,uint16_t offY, jpeg_div_t scale)

对于1张110*110的图片，如果调用draw函数，给出maxWidth和maxHeight，图像不会成比例缩小，只会截出那么大的画面出来；如果图像尺寸超过了屏幕，也不会比例缩小，只会截一部分。

显示PNG图片，同理调用drawPngFile()

#include "SPIFFS.h"
#include 

void setup() {
  M5.Lcd.begin();
  SPIFFS.begin();
  M5.Lcd.drawJpgFile(SPIFFS,"/a.jpg",0,0);
  M5.Lcd.progressBar(0, 120, 320, 20, 80);//屏幕中间显示一条长320高20进度为80%的进度条
}

void loop(){
}

Sprite 基本图形单位

网页提供了一些函数，但实测drawJpgFile()等函数无法用在sprite上

结合这篇随笔的几个函数做了个综合一点的程序

按下按钮切换显示图片，进度条随之变动

#include "SPIFFS.h"
#include 
char* paths[2] = {"/a.jpg","/b.jpg"};
char* msgs[2] = {"Clock","Music"};
int i = 0;
void setup() {
  M5.Lcd.begin();
  SPIFFS.begin();
  M5.Lcd.drawJpgFile(SPIFFS,paths[0],0,0);
  M5.Lcd.progressBar(0, 230, 320, 10, 50);//屏幕中间显示一条长320高20的进度条
  M5.Lcd.drawString(msgs[0],30,120,4);
}

void loop(){
   M5.update();  
   if(M5.BtnC.isPressed()){
    M5.Lcd.fillScreen(BLACK);
    M5.Lcd.drawJpgFile(SPIFFS,paths[(++i)%2],0,0);
    M5.Lcd.drawString(msgs[i%2],30,120,4);
    M5.Lcd.progressBar(0, 230, 320, 10, ((i%2)+1)*50);//屏幕中间显示一条长320高20的进度条
   }
   delay(100);
}

M5StackIOTBaseNB M5Stack

关于LCD显示

相关

标签