LCD

The M5Core screen is 320x240 pixels, with the upper left corner of the screen as the origin (0,0).

RGB565 Color

The following API uses the RGB565 color coding format

Color code.

begin

Syntax:

void begin();

Description:

• Initialize the LCD screen. Using M5.begin() will automatically call Lcd.begin() internally to initialize.

Parameters:

• null

Return:

• null

Example:

#include <M5Stack.h>

void setup() {
  M5.Lcd.begin();
}

void loop() {
}

sleep

Syntax:

void sleep();

Description:

• LCD switches to sleep mode

Parameters:

• null

Return:

• null

Example:

#include <M5Stack.h>

void setup() {
  M5.Lcd.begin();
  M5.Lcd.sleep();
}

void loop() {
}

clear

Syntax:

void clear()

Description:

• Clear the display.

Parameters:

• null

Return:

• null

Example:

#include <M5Stack.h>

void setup() {
  M5.Lcd.begin();
  M5.Power.begin();
  M5.Lcd.fillScreen(RED);
  delay(1000);
  M5.Lcd.clear();
}

void loop() {
}

wakeup

Syntax:

void wakeup();

Description:

• Wake up from sleep mode to restore the display.

Parameters:

• null

Return:

• null

Example:

#include <M5Stack.h>

void setup() {
    M5.Lcd.begin();
    M5.Power.begin();
    M5.Lcd.fillScreen(RED);
    delay(1000);
    M5.Lcd.sleep();
    delay(6000);
    M5.Lcd.wakeup();
}

void loop() {
}

hight

Syntax:

int16_t height(void);

Description:

• Return to Screen Height

Parameters:

• null

Return:

• int16_t:
  • Screen height px

Example:

#include <M5Stack.h>

void setup() {
  M5.begin(); 
  M5.Power.begin();
  M5.Lcd.print(M5.Lcd.height());
}

void loop() {
}

width

Syntax:

int16_t width(void);

Description:

• Returns the width of the screen

Parameters:

• null

Return:

• int16_t:
  • Screen width px

Example:

#include <M5Stack.h>

void setup() {
  M5.begin(); 
  M5.Power.begin();
  M5.Lcd.print(M5.Lcd.width());
}

void loop() {
}

getCursorX

Syntax:

int16_t getCursorX(void);

Description:

• Get the x coordinate of the current cursor. Note: Not applicable to drawNumber().

Parameters:

• null

Return:

• int16_t:
  • Current cursor x-coordinate

Example:

#include <M5Stack.h>

void setup() {
  M5.begin();
  M5.Power.begin();
  M5.Lcd.print("Hello");
  int X = M5.Lcd.getCursorX();
  M5.Lcd.print(X);
}

void loop(){
}

getCursorY

Syntax:

int16_t getCursorY(void);

Description:

• Get the y coordinate of the current cursor. Note: Not applicable to drawNumber().

Parameters:

• null

Return:

• int16_t:
  • Current y-coordinate of the cursor

Example:

#include <M5Stack.h>

void setup() {
  M5.begin();
  M5.Power.begin();
  M5.Lcd.print("Hello");
  int X = M5.Lcd.getCursorY();
  M5.Lcd.print(Y);
}

void loop(){
}

getRotation

Syntax:

uint8_t getRotation()

Description:

• Returns the direction of screen rotation

Parameters:

• null

Return:

• uint8_t:
  • screen rotation:
    • 0-3

Example:

#include <M5Stack.h>

void setup() {
  M5.begin();
  M5.Power.begin();
  M5.Lcd.print(M5.Lcd.getRotation());
}

void loop(){
}

getTextDatum

Syntax:

uint8_t getTextDatum(void);

Description:

• Get the current text alignment

Parameters:

• null

Return:

• uint8_t: Text Alignment

// These enumerate the text plotting alignment (reference datum point)
#define TL_DATUM 0  // Top left (default)
#define TC_DATUM 1  // Top centre
#define TR_DATUM 2  // Top right
#define ML_DATUM 3  // Middle left
#define CL_DATUM 3  // Centre left, same as above
#define MC_DATUM 4  // Middle centre
#define CC_DATUM 4  // Centre centre, same as above
#define MR_DATUM 5  // Middle right
#define CR_DATUM 5  // Centre right, same as above
#define BL_DATUM 6  // Bottom left
#define BC_DATUM 7  // Bottom centre
#define BR_DATUM 8  // Bottom right
#define L_BASELINE 9  // Left character baseline (Line the 'A' character would sit on)
#define C_BASELINE 10  // Centre character baseline
#define R_BASELINE 11  // Right character baseline

Example:

#include <M5Stack.h>

void setup() {
  M5.begin();
  M5.Power.begin();
  M5.Lcd.setTextDatum(MC_DATUM);
  M5.Lcd.drawString("hello", 160, 120, 2);
  M5.Lcd.print(M5.Lcd.getTextDatum());
}

void loop(){
}

setCursor

Syntax:

void setCursor(int16_t x, int16_t y);

Description:

• Set text cursor to (x,y) position

Parameters:

• int16_t x:
  • x-coordinate (px)
• int16_t y
  • y-coordinate (px)

Return:

• null

Example:

#include <M5Stack.h>

void setup() {
  M5.begin();           
  M5.Power.begin();
  M5.Lcd.setCursor(0, 30);
  M5.Lcd.printf("Hello M5");
}

void loop() {}

setRotation

Syntax:

void setRotation(uint8_t m);

Description:

• Setting the screen rotation direction

Parameters:

• uint8_t m:
  • 0-3

Return:

• null

Example:

#include <M5Stack.h>

void setup() {
  M5.begin();           
  M5.Power.begin();
  M5.Lcd.setRotation(2);
  M5.Lcd.fillEllipse(160, 100, 60, 100, YELLOW);
  delay(1000);
  M5.Lcd.setRotation(1);
  M5.Lcd.fillEllipse(160, 100, 60, 100, GREEN);
}

void loop() {}

setBrightness

Syntax:

void setBrightness(uint8_t brightness);

Description:

• Setting the screen brightness

Parameters:

• uint8_t brightness:
  • 0-255

Return:

• null

Example:

#include <M5Stack.h>

void setup() {
  M5.begin();
  M5.Power.begin();
  M5.Lcd.fillScreen(RED);
}
void loop() {
  M5.update();
  for(int i=0; i<255;i++){
    M5.Lcd.setBrightness(i);
    delay(10);
  }
  for(int i=255; i>0;i--){
    M5.Lcd.setBrightness(i);
    delay(10);
  }
}

alphaBlend

Syntax:

uint16_t alphaBlend(uint8_t alpha, uint16_t fgc, uint16_t bgc);

Description:

• Blend foreground and background colors, set transparency. Returns the new color value.

Parameters:

• uint8_t alpha:
  • transparency
• uint16_t fgc:
  • foreground color
• uint16_t bgc:
  • background color

Return:

• uint16_t:
  • Color values after blending

Example:

#include <M5Stack.h>

void setup() {
  M5.Lcd.begin();
  M5.Power.begin();
  M5.Lcd.fillScreen(M5.Lcd.alphaBlend(128, 0X00FF00, 0XFF0000));
}

void loop() {
}

loadFont

Syntax:

void loadFont(String fontName, fs::FS &ffs);

void loadFont(String fontName, bool flash);

Description:

• Loading VLW Font Files

Parameters:

• String fontName:
  • Font File Name
• bool flash / fs::FS &ffs:
  • File source

Return:

• null

Example:

#include <M5Stack.h>

void setup() {
  M5.begin();
  M5.Power.begin();
  M5.Lcd.loadFont("filename", SD);
}

void loop() {
}

unloadFont

Syntax:

void unloadFont(void);

Description:

• Unmount the current font mount

Parameters:

• null

Return:

• null

Example:

#include <M5Stack.h>

void setup() {
  M5.begin();
  M5.Power.begin();
  M5.Lcd.unloadFont();
}

void loop() {
}

fontsLoaded

Syntax:

uint16_t fontsLoaded()

Description:

• Returns the currently loaded font mask

Parameters:

• null

Return:

• null

Return:

• uint16_t:
  • Returns the hexadecimal value of the encoding of the display font

#ifdef LOAD_GLCD
    fontsloaded = 0x0002;  // Bit 1 set
#endif

#ifdef LOAD_FONT2
    fontsloaded |= 0x0004;  // Bit 2 set
#endif

#ifdef LOAD_FONT4
    fontsloaded |= 0x0010;  // Bit 4 set
#endif

#ifdef LOAD_FONT6
    fontsloaded |= 0x0040;  // Bit 6 set
#endif

#ifdef LOAD_FONT7
    fontsloaded |= 0x0080;  // Bit 7 set
#endif

#ifdef LOAD_FONT8
    fontsloaded |= 0x0100;  // Bit 8 set
#endif

#ifdef LOAD_FONT8N
    fontsloaded |= 0x0200;  // Bit 9 set
#endif

#ifdef SMOOTH_FONT
    fontsloaded |= 0x8000;  // Bit 15 set
#endif

Example:

#include <M5Stack.h>

void setup() {
  M5.begin();
  M5.Power.begin();
  M5.Lcd.print(M5.Lcd.fontsLoaded());
}

void loop() {
}

fillScreen

Syntax:

void fillScreen(uint32_t color);

Description:

• Fill the entire screen with the specified color

Parameters:

• uint32_t color:
  • color value

Return:

• null

Example:

#include <M5Stack.h>

void setup() {
  M5.begin();
  M5.Power.begin();
  M5.Lcd.fillScreen(RED);
}

void loop(){
}

invertDisplay

Syntax:

void invertDisplay(boolean i);

Description:

• invert the colors of the screen

Parameters:

• boolean i:
  • true:Turn on color inversion
  • false:Turn off color inversion

Return:

• null

Example:

#include <M5Stack.h>

void setup() {
  M5.begin();
  M5.Power.begin();
  M5.Lcd.fillScreen(RED);
}

void loop() {
  M5.Lcd.invertDisplay(1);
  delay(1000);
  M5.Lcd.invertDisplay(0);
}

color565

Syntax:

uint16_t color565(uint8_t r, uint8_t g, uint8_t b);

Description:

• RGB888->RGB565 conversion function.

Parameters:

• uint8_t r:

  • red

• uint8_t g:

  • green

• uint8_t b:

  • blue

• uint32_t color:

  • color value

Return:

• uint16_t:
  • RGB565 color

Example:

#include <M5Stack.h>

void setup() {
  M5.begin();
  M5.Power.begin();
  uint16_t colorvalue = 0;
  colorvalue = color565(255, 255, 255);
  M5.Lcd.fillEllipse(160, 100, 60, 100, colorvalue);
}

void loop() {}

Text

print

Syntax:

size_t print(const char str[]);

Description:

• Prints a string at the current position on the screen. (This API inherits from Print Class, and supports overloading functions with other parameter types)

Parameters:

• const char str[]:
  • string

Return:

• null

Example:

#include <M5Stack.h>

void setup() {
  M5.begin();
  M5.Power.begin();
  M5.Lcd.print("this is a print text function");
}

void loop() {
}

textWidth

Syntax:

int16_t textWidth(const String& string);

Description:

• Returns the width in pixels of the text

Parameters:

• const String& string:
  • string

Return:

• int16_t:
  • Text pixel width

Example:

#include <M5Stack.h>

void setup() {
  M5.begin(); 
  M5.Power.begin();
  String text = "hello  ";
  M5.Lcd.print(text);
  M5.Lcd.print(M5.Lcd.textWidth(text));
}

void loop() {}

setTextSize

Syntax:

void setTextSize(uint8_t s);

Description:

• Setting the size of the displayed text

Parameters:

• uint8_t s:
  • 1-7

Return:

• null

Example:

#include <M5Stack.h>

void setup() {
  M5.begin();
  M5.Power.begin();
  M5.Lcd.setTextSize(4);
  M5.Lcd.print("Hello M5Stack");
}

void loop() {
}

setTextColor

Syntax:

void setTextColor(uint16_t color);

void setTextColor(uint16_t color, uint16_t backgroundcolor);

Description:

• Sets the foreground color and background color of the displayed text. The default color for text is white. The default color of backgroundcolor is black.

Parameters:

• uint16_t color:
  • Text Color Value
• uint16_t backgroundcolor
  • Text background color value

Return:

• null

Example:

#include <M5Stack.h>

void setup() {
  M5.begin();
  M5.Power.begin();
  M5.Lcd.setTextColor(RED,BLACK);
}

void loop(){
}

setTextWrap

Syntax:

void setTextWrap(boolean wrapX, boolean wrapY);

Description:

• Setting up automatic line feed

Parameters:

• boolean wrapX:
  • Enable wrap in the x direction (default)
• boolean wrapY
  • Enable wrao in the y-direction

Return:

• null

Example:

#include <M5Stack.h>

void setup() {
  M5.begin(); 
  M5.Power.begin();
  M5.Lcd.setTextWrap(true, true);
    M5.Lcd.print("hello M5Stack hello M5Stack hello M5Stack hello M5Stack hello M5Stack hello M5Stack hello M5Stack hello M5Stack");
}

void loop() {}

setTextPadding

Syntax:

void setTextPadding(uint16_t x_width);

Description:

• Fill specified blank width (can help erase old text and numbers)

Parameters:

• uint16_t x_width:
  • Text fill width (px)

Return:

• null

Example:

#include <M5Stack.h>

void setup() {
  M5.begin();
  M5.Power.begin();
}

void loop() {
  M5.Lcd.drawString("Orbitron 32", 160, 60, 2);
  delay(2000);
  M5.Lcd.setTextPadding(M5.Lcd.width() - 20);
  M5.Lcd.drawString("Orbitron 32 with padding", 160, 60, 2);
  delay(2000);
}

setTextDatum

Syntax:

void setTextDatum(uint8_t datum);

Description:

• Sets the text alignment. Note: Not applicable to print().

Parameters:

• uint8_t datum:
  • Text Alignment (see definition below)

Return:

• null

// These enumerate the text plotting alignment (reference datum point)
#define TL_DATUM 0  // Top left (default)
#define TC_DATUM 1  // Top centre
#define TR_DATUM 2  // Top right
#define ML_DATUM 3  // Middle left
#define CL_DATUM 3  // Centre left, same as above
#define MC_DATUM 4  // Middle centre
#define CC_DATUM 4  // Centre centre, same as above
#define MR_DATUM 5  // Middle right
#define CR_DATUM 5  // Centre right, same as above
#define BL_DATUM 6  // Bottom left
#define BC_DATUM 7  // Bottom centre
#define BR_DATUM 8  // Bottom right
#define L_BASELINE 9  // Left character baseline (Line the 'A' character would sit on)
#define C_BASELINE 10  // Centre character baseline
#define R_BASELINE 11  // Right character baseline

Example:

#include <M5Stack.h>

void setup() {
  M5.begin();
  M5.Power.begin();
  M5.Lcd.setTextDatum(MC_DATUM);
  M5.Lcd.drawString("hello", 160, 120, 2);
}

void loop(){
}

Draw

drawFastHLine

Syntax:

void drawFastHLine(int32_t x, int32_t y, int32_t w, uint32_t color);

Description:

• Draw a horizontal line of length w at (X,Y).

Parameters:

• int32_t x:
  • y-coordinate
• int32_t y:
  • x-coordinate
• int32_t w:
  • Length of horizontal line segment
• uint32_t color:
  • color value

Return:

• null

Example:

#include <M5Stack.h>

void setup() {
  M5.begin();
  M5.Power.begin();
  M5.Lcd.drawFastHLine(3, 100, 255, GREEN);
}

void loop() {
}

drawFastVLine

Syntax:

void drawFastVLine(int32_t x, int32_t y, int32_t w, uint32_t color);

Description:

• Draw a vertical line of length w at (X,Y).

Parameters:

• int32_t x:
  • y-coordinate
• int32_t y:
  • x-coordinate
• int32_t w:
  • Length of vertical line segment
• uint32_t color:
  • color value

Example:

#include <M5Stack.h>

void setup() {
  M5.begin();
  M5.Power.begin();
  M5.Lcd.drawFastVLine(100, 0, 255, TFT_GREEN);
}

void loop(){
}

drawString()

Syntax:

int16_t drawString(const char *string, int32_t poX, int32_t poY, uint8_t font);

Description:

• Show string at (x,y)

Parameters:

• const char *string:
  • 字符串
• int32_t poX:
  • x-coordinate
• int32_t poY:
  • y-coordinate
• uint8_t font:
  • Font Index

Return:

• int16_t:
  • Pixel width occupied by the string

Example:

#include <M5Stack.h>

void setup() {
  M5.begin();
  M5.Power.begin();
  M5.Lcd.drawString("Hello M5", 160, 100, 2);
}

void loop(){
}

drawNumber

Syntax:

void drawNumber(long long_num, int32_t poX, int32_t poY);

Description:

• Print the integer at (x,y).

Parameters:

• long long_num:
  • Number
• int32_t poX:
  • x-coordinate
• int32_t poY:
  • y-coordinate

Return:

• null

Example:

#include <M5Stack.h>

void setup() {
  M5.begin();
  M5.Power.begin();
  M5.Lcd.drawNumber(99, 55, 100);
}

void loop(){
}

drawChar

Description:

• Display characters at (X,Y) in font font

Syntax:

int16_t drawChar(int16_t uniCode, int32_t x, uint16_t y, uint8_t font);

Parameters:

• int16_t uniCode:
  • character
• int32_t x:
  • x-coordinate
• uint16_t y:
  • y-coordinate
• uint8_t font:
  • Font Index

Return:

• int16_t:
  • Pixel width occupied by the character

Example:

#include <M5Stack.h>
void setup() {
  M5.begin();
  M5.Power.begin();
  M5.Lcd.drawChar('A', 160, 120, 2);
}
void loop(){
}

drawFloat

Syntax:

int16_t drawFloat(float floatNumber, uint8_t dp, int32_t poX, int32_t poY);

Description:

• Float number with dp decimal places at (X,Y) floatNumber

Parameters:

• float floatNumber:
  • float Number
• uint8_t dp:
  • Number of decimal places to be retained
• int32_t poX:
  • x-coordinate
• int32_t poY:
  • y-coordinate

Return:

• int16_t:
  • Pixel width of the displayed character

Example:

#include <M5Stack.h>

void setup() {
  M5.begin(); 
  M5.Power.begin();
  M5.Lcd.drawFloat(3.1415928,7,100,100);
}

void loop() {}

drawPixel

Syntax:

void drawPixel(int32_t x, int32_t y, uint32_t color);

Description:

• Draw the point at (x,y)

Parameters:

• int32_t x:
  • x-coordinate
• int32_t y:
  • y-coordinate
• uint32_t color:
  • color value

Return:

• null

Example:

#include <M5Stack.h>

void setup() {
  M5.begin();
  M5.Power.begin();
  M5.Lcd.drawPixel(22,22,RED);
}

void loop() {}

drawLine

Syntax:

void drawLine(int32_t x0, int32_t y0, int32_t x1, int32_t y1, uint32_t color);

Description:

• Draws a line from point (x0,y0) to point (x1,y1) in the specified color.

Parameters:

• int32_t x0:
  • x0-coordinate
• int32_t y0:
  • y0-coordinate
• int32_t x1:
  • x1-coordinate
• int32_t y1:
  • y1-coordinate
• uint32_t color:
  • color value

Return:

• null

#include <M5Stack.h>

void setup() {
  M5.begin();
  M5.Power.begin();
  M5.Lcd.drawLine(200, 0, 200,2000,GREEN);
}

void loop(){
}

drawRect

Syntax:

void drawRect(int32_t x, int32_t y, int32_t w, int32_t h, uint32_t color);

Description:

• Draw a rectangular wireframe with width and height at (x,y) in the specified color.

Parameters:

• int32_t x:
  • x-coordinate
• int32_t y:
  • y-coordinate
• int32_t w:
  • Rectangular width(px)
• int32_t h:
  • Rectangular height(px)
• uint32_t color:
  • color value

Return:

• null

Example:

#include <M5Stack.h>

void setup() {
  M5.begin();
  M5.Power.begin();
  M5.Lcd.drawRect(180, 12, 122, 10, BLUE);
}

void loop(){
}

fillRect

Syntax:

void fillRect(int32_t x, int32_t y, int32_t w, int32_t h, uint32_t color);

Description:

• Draw a filled rectangle with width and height at (x,y) in the specified color.

Parameters:

• int32_t x:
  • x-coordinate
• int32_t y:
  • y-coordinate
• int32_t w:
  • Rectangular width(px)
• int32_t h:
  • Rectangle height(px)
• uint32_t color:
  • color value

Return:

• null

Example:

#include <M5Stack.h>

void setup() {
  M5.begin();
  M5.Power.begin();
  M5.Lcd.fillRect(150, 120, 122, 10, BLUE);
}

void loop(){
}

drawRoundRect

Syntax:

void drawRoundRect(int32_t x, int32_t y, int32_t w, int32_t h, int32_t r, uint32_t color);

Description:

• in (x,y) at the drawing width and height were width, height of the rounded rectangular wireframe, rounded radius for radius, color for color

Parameters:

• int32_t x:
  • x-coordinate
• int32_t y:
  • y-coordinate
• int32_t w:
  • Rectangular width(px)
• int32_t h:
  • Rectangular height(px)
• int32_t r:
  • radius of a rounded corner
• uint32_t color:
  • color value

Return:

• null

Example:

#include <M5Stack.h>

void setup() {
  M5.begin(); 
  M5.Power.begin();
  M5.Lcd.drawRoundRect(55,55,30,50,10,GREEN);

void loop() {}

fillRoundRect

Syntax:

void fillRoundRect(int32_t x, int32_t y, int32_t w, int32_t h, int32_t r, uint32_t color);

Description:

• in (x,y) at the drawing width and height were width, height of the rounded rectangular wireframe, rounded radius for radius, color for color

Parameters:

• int32_t x:
  • x-coordinate
• int32_t y:
  • y-coordinate
• int32_t w:
  • Rectangular width(px)
• int32_t h:
  • Rectangular height(px)
• int32_t r:
  • radius of a rounded corner
• uint32_t color:
  • color value

Return:

• null

Example:

#include <M5Stack.h>

void setup() {
  M5.begin(); 
  M5.Power.begin();
  M5.Lcd.fillRoundRect(55, 55, 30, 50, 10, GREEN);
}

void loop() {}

drawCircle

Syntax:

void drawCircle(int32_t x0, int32_t y0, int32_t r, uint32_t color);

Description:

• Draw a color-coded circular wireframe at (x,y) with radius r

Parameters:

• uint32_t x0:
  • Center of circle x0
• int32_t y0:
  • Center of circle y0
• int32_t r:
  • radius
• uint32_t color:
  • color value

Return:

• null

Example:

#include <M5Stack.h>

void setup() {
  M5.begin(); 
  M5.Power.begin();
  M5.Lcd.drawCircle(100, 100, 50, RED);
}

void loop() {}

fillCircle

Syntax:

void drawCircle(int32_t x0, int32_t y0, int32_t r, uint32_t color);

Description:

• Draw a color-filled circle with radius r at (x,y).

Parameters:

• uint32_t x0:
  • Center of circle x0
• int32_t y0:
  • Center of circle y0
• int32_t r:
  • radius
• uint32_t color:
  • color value

Return:

• null

Example:

#include <M5Stack.h>

void setup() {
  M5.begin(); 
  M5.Power.begin();
  M5.Lcd.fillCircle(100, 100, 50, RED);
}

void loop() {}

drawEllipse

Syntax:

void drawEllipse(int16_t x0, int16_t y0, int32_t rx, int32_t ry, uint16_t color);

Description:

• Draw an elliptical wireframe with width and height rx,ry at (x,y).

Parameters:

• uint32_t x0:
  • Center of circle x0
• int32_t y0:
  • Center of circle y0
• int32_t rx:
  • width(px)
• int32_t ry:
  • hight(px)
• uint16_t color:
  • color value

Return:

• null

Example:

#include <M5Stack.h>

void setup() {
  M5.begin(); 
  M5.Power.begin();
  M5.Lcd.drawEllipse(160, 100, 60, 100, YELLOW);
}

void loop() {}

fillEllipse

Syntax:

void fillEllipse(int16_t x0, int16_t y0, int32_t rx, int32_t ry, uint16_t color);

Description:

• Draw a filled ellipse at (x,y) with width and height rx,ry respectively.

Parameters:

• uint32_t x0:
  • Center of circle x0
• int32_t y0:
  • Center of circle y0
• int32_t rx:
  • width(px)
• int32_t ry:
  • hight(px)
• uint16_t color:
  • color value

Return:

• null

Example:

#include <M5Stack.h>

void setup() {
  M5.begin();
  M5.Power.begin();
  M5.Lcd.fillEllipse(160, 100, 60, 100, YELLOW);
}

void loop() {}

drawTriangle

Syntax:

void drawTriangle(int32_t x0, int32_t y0, int32_t x1, int32_t y1, int32_t x2, int32_t y2, uint32_t color);

Description:

• Draw the triangle wireframe with (x1, y1) (x2, y2) (x3, y3) as the vertices

Parameters:

• int16_t x0:
  • x0-coordinate
• int16_t y0:
  • y0-coordinate
• int16_t x1:
  • x1-coordinate
• int16_t y1:
  • y1-coordinate
• int16_t x2:
  • x2-coordinate
• int16_t y2:
  • y2-coordinate
• uint16_t color
  • color value

Return:

• null

Example:

#include <M5Stack.h>

void setup() {
  M5.begin(); 
  M5.Power.begin();
  M5.Lcd.drawTriangle(30, 30, 180, 100, 80, 150, YELLOW);
}

void loop() {}

fillTriangle

Syntax:

void fillTriangle(int32_t x0, int32_t y0, int32_t x1, int32_t y1, int32_t x2, int32_t y2, uint32_t color);

Description:

• Drawing filled triangles with (x1, y1) (x2, y2) (x3, y3) as vertices

Parameters:

• int16_t x0:
  • x0-coordinate
• int16_t y0:
  • y0-coordinate
• int16_t x1:
  • x1-coordinate
• int16_t y1:
  • y1-coordinate
• int16_t x2:
  • x2-coordinate
• int16_t y2:
  • y2-coordinate
• uint16_t color
  • color value

Return:

• null

Example:

#include <M5Stack.h>

void setup() {
  M5.begin(); 
  M5.Power.begin();
  M5.Lcd.fillTriangle(30, 30, 180, 100, 80, 150, YELLOW);
}

void loop() {}

drawXBitmap

Syntax:

void drawXBitmap(int16_t x, int16_t y, const uint8_t *bitmap, int16_t w, int16_t h, uint16_t color);

Description:

• Drawing bitmap

Parameters:

• int16_t x:
  • x-coordinate
• int16_t y:
  • y-coordinate
• const uint8_t *bitmap:
  • image data
• int16_t w:
  • image width(px)
• int16_t h:
  • Image height(px)
• uint16_t color:
  • color value

Example:

• Github:M5Stack->Advanced->Display->drawXBitmap

drawBitmap

Syntax:

void drawBitmap(int16_t x0, int16_t y0, int16_t w, int16_t h, const uint16_t *data);

void drawBitmap(int16_t x0, int16_t y0, int16_t w, int16_t h, uint16_t *data);

void drawBitmap(int16_t x0, int16_t y0, int16_t w, int16_t h, const uint16_t *data, uint16_t transparent);

void drawBitmap(int16_t x0, int16_t y0, int16_t w, int16_t h, const uint8_t *data);

void drawBitmap(int16_t x0, int16_t y0, int16_t w, int16_t h, uint8_t *data);

Description:

• Drawing bmp image data

Parameters:

• int16_t x0:
  • x-coordinate
• int16_t y0:
  • y-coordinate
• int16_t w:
  • Image width(px)
• int16_t h:
  • Image height(px)
• const uint16_t *data:
  • bmp data
• transparent：
  • Transparent color

Return:

• null

drawBmpFile

Syntax:

void drawBmpFile(fs::FS &fs, const char *path, uint16_t x, uint16_t y);

Description:

• Reads a bmp image from a file and draws it

Parameters:

• fs::FS &fs:
  • file stream handle
• const char *path:
  • file path(SD 、SPIFFS)
• uint16_t x:
  • x-coordinate
• uint16_t y:
  • y-coordinate

Return:

• null

Example:

#include "FS.h"
//#include "SPIFFS.h"
#include <M5Stack.h>
void setup(){
    M5.begin(true, false, false, false);
  M5.Power.begin();
  M5.Lcd.drawBmpFile(SD, "/p2.bmp",0,0);
  //M5.Lcd.drawBmpFile(SPIFFS, "/p2.bmp", 0, 0);
}

We provide a script that can be used to convert jpg images -> .c files, which can be used to convert a number of images and draw them to the screen using the API above:.

• bin2code.py

drawJpg

Syntax:

void drawJpg(const uint8_t *jpg_data, size_t jpg_len, uint16_t x,uint16_t y, uint16_t maxWidth, uint16_t maxHeight,uint16_t offX, uint16_t offY, jpeg_div_t scale);

Description:

• Reads the JPEG image data from memory and draws it.

Parameters:

• const uint8_t *jpg_data:
  • jpg data pointer
• size_t jpg_len:
  • jpg data length
• uint16_t x:
  • x-coordinate
• uint16_t y:
  • y-coordinate
• uint16_t maxWidth:
  • Maximum display width
• uint16_t maxHeight:
  • Maximum display height
• uint16_t offX:
  • image x offset
• uint16_t offY:
  • image y offset
• jpeg_div_t scale:
  • JPEG_DIV_NONE: no care
  • JPEG_DIV_2: 1/2
  • JPEG_DIV_4: 1/4
  • JPEG_DIV_8: 1/8
  • JPEG_DIV_MAX: MAX

Return:

• null

Note:|1. Depending on the size and number of bits may not be able to expand
2. Need to pre-install Arduino ESP32 filesystem uploader in advance.

Example:

#include <M5Stack.h>
extern uint8_t tetris_img[];

void setup() {
  M5.begin();
  M5.Power.begin();
  M5.Lcd.drawJpg(tetris_img, 34215);
}
void loop(){
}

drawJpgFile

Syntax:

void drawJpgFiledrawJpgFile(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);

Description:

• Reads JPEG data from a file stream and draws it

Parameters:

• fs::FS &fs:
  • file stream handle
• const char *path:
  • file path
• uint16_t x:
  • x-coordinate
• uint16_t y:
  • y-coordinate
• uint16_t maxWidth:
  • Maximum display width
• uint16_t maxHeight:
  • Maximum display height
• uint16_t offX:
  • image x offset
• uint16_t offY:
  • image y offset
• jpeg_div_t scale:
  • JPEG_DIV_NONE: no care
  • JPEG_DIV_2: 1/2
  • JPEG_DIV_4: 1/4
  • JPEG_DIV_8: 1/8
  • JPEG_DIV_MAX: MAX

Return:

• null

progressBar

Syntax:

void progressBar(int x, int y, int w, int h, uint8_t val);

Description:

• Column showing the progress of the display

Parameters:

• int x:
  • x-coordinate
• int y:
  • y-coordinate
• int w:
  • width(px)
• int h:
  • hight(px)
• uint8_t val:
  • progress(0-100)

Return:

• null

Example:

#include <M5Stack.h>

void setup() {
  M5.begin();
  M5.Power.begin();
  M5.Lcd.progressBar(0, 0, 240, 20, 20);
}

void loop() {
}

qrcode

Syntax:

void qrcode(const char *string, uint16_t x, uint16_t y, uint8_t width, uint8_t version);

void qrcode(const String &string, uint16_t x, uint16_t y, uint8_t width, uint8_t version);

Description:

• Draws a QR code. When using it, please choose the appropriate version of QR code according to the number of input characters.

Parameters:

• const String &string:
  • coded string
• uint16_t x:
  • x-coordinate
• uint16_t y:
  • y-coordinate
• uint8_t width:
  • QR code width(px)
• uint8_t version:
  • QR code version:1-40

Return:

• null

Example:

#include <M5Stack.h>

void setup() {
  M5.Lcd.begin(); 
  M5.Power.begin();
  M5.Lcd.qrcode("http://www.m5stack.com", 50, 10, 220, 6);
}

void loop() {
}

Sprite

setColorDepth

Syntax:

void* TFT_eSprite::setColorDepth(int8_t b);

Description:

• Setting the canvas color depth, the color depth bit affects the amount of memory used to create the canvas.

Parameters:

• int8_t b:color depth(bit)
  • 1, 8, 16

Return:

• null

Example:

#include <M5Stack.h>
TFT_eSprite img = TFT_eSprite(&M5.Lcd);

void setup() {
    M5.begin();
    M5.Power.begin();
    img.setColorDepth(8);
    img.setTextSize(2);
    img.createSprite(320, 240);
}

void loop() {}

createSprite

Syntax:

void *createSprite(int16_t w, int16_t h, uint8_t frames);

Description:

• Creates a canvas of a specified width and height

Parameters:

• int16_t w:
  • Canvas width(px)
• int16_t h:
  • Canvas Height(px)
• uint8_t frames:
  • bytes occupied by bit depth:1/2

Return:

• void *:
  • Pointer to the canvas being created, if NULL then it was not created successfully.

Example:

#include <M5Stack.h>

TFT_eSprite img = TFT_eSprite(&M5.Lcd);

void setup() {
    M5.begin();
    M5.Power.begin();
    img.setColorDepth(8);  // Set the color depth to 8 bits.
    img.createSprite(320, 240);  //Create a 320x240 canvas.
    img.fillSprite(RED);         //Fill the canvas with red.
    img.pushSprite(0,0);  // Push the canvas to the screen at (0,0).
}

void loop() {}

fillSprite

Syntax:

void fillSprite(uint32_t color);

Description:

• Fill Sprite with the specified color

Parameters:

• uint32_t color:
  • color value

Return:

• null

Example:

#include <M5Stack.h>

TFT_eSprite img = TFT_eSprite(&M5.Lcd);

void setup() {
    M5.begin();
    M5.Power.begin();
    img.setColorDepth(8);  // Set the color depth to 8 bits. 
    img.createSprite(320, 240);  //Create a 320x240 canvas. 
    img.fillSprite(RED);         //Fill the canvas with red. 
    img.pushSprite(0,0);  // Push the canvas to the screen at (0,0). 
}

void loop() {}
}

void loop() {}

pushSprite

Syntax:

void pushSprite(int32_t x, int32_t y, uint16_t transparent);

Description:

• Push the canvas to the specified coordinates and set the pass-through color.

Parameters:

• int32_t x:
  • x-coordinate
• int32_t y:
  • y-coordinate
• uint16_t transparent:
  • penetrating color(option)

Return:

• null

Example:

#include <M5Stack.h>
TFT_eSprite img = TFT_eSprite(&M5.Lcd);

void setup() {
  M5.begin();
  M5.Power.begin();
  img.createSprite(320, 240);    
  img.fillSprite(RED);
  img.fillCircle(100,100,20,GREEN);
  img.pushSprite(0, 0, GREEN);
}

void loop() {}

width

Syntax:

int16_t width(void);

Description:

• Returns the width of the Sprite

Parameters:

• null

Return:

• int16_t:
  • Canvas width

Example:

#include <M5Stack.h>
TFT_eSprite img = TFT_eSprite(&M5.Lcd);

void setup() {
  M5.begin();
  M5.Power.begin();
  img.createSprite(320, 240);    
  img.fillSprite(RED);
  img.pushSprite(0, 0, WHITE);
  M5.Lcd.print(img.width());
}

void loop() {}

height

Syntax:

int16_t height(void);

Description:

• Returns the height of the Sprite

Parameters:

• null

Return:

• int16_t:
  • Canvas Height

Example:

#include <M5Stack.h>
TFT_eSprite img = TFT_eSprite(&M5.Lcd);

void setup() {
  M5.begin();
  M5.Power.begin();
  img.createSprite(320, 240);
  img.fillSprite(RED);
  img.pushSprite(0, 0, WHITE);
  M5.Lcd.print(img.height());
}

void loop() {}

deleteSprite

Syntax:

void deleteSprite(void);

Description:

• Delete canvas from memory

Parameters:

• null

Return:

• null

Example:

#include <M5Stack.h>
TFT_eSprite img = TFT_eSprite(&M5.Lcd);

void setup() {
  M5.begin();
  M5.Power.begin();
  img.deleteSprite();
}

void loop() {}