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.

COLOR	HEX	R	G	B
BLACK	0x0000	0	0	0
NAVY	0x000F	0	0	128
DARKGREEN	0x03E0	0	128	0
MAROON	0x7800	128	0	0
PURPLE	0x780F	128	0	128
OLIVE	0x7BE0	128	128	0
LIGHTGREY	0xC618	192	192	192
DARKGREY	0x7BEF	128	128	128
BLUE	0x001F	0	0	255
GREENYELLOW	0xB7E0	180	255	0
GREEN	0x07E0	0	255	0
YELLOW	0xFFE0	255	255	0
ORANGE	0xFDA0	255	180	0
PINK	0xFC9F	255	255	16
CYAN	0x07FF	0	255	255
DARKCYAN	0x03EF	0	128	128
RED	0xF800	255	0	0
MAGENTA	0xF81F	255	0	255
WHITE	0xFFFF	255	255	255

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

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 "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

TFT_eSprite Usage Notes

TFT_eSprite and M5Display are both inherited from [In_eSPI.h - TFT_eSPI Class]( https://github.com/m5stack/M5Stack/blob/master/src/utility/In _eSPI.h), so the above API for Lcd is also applicable to TFT_eSprite. When using TFT_eSprite, you need to create a canvas by createSprite function, and then push it to the screen by pushSprite function after finishing the pattern drawing. Using this method can effectively reduce the number of screen refresh, so that the screen changes more smoothly.

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() {}

1. Arduino Setup

4. Program & Upload

2. API & Examples

M5Core

M5Core2

M5CoreS3

M5Tough

M5Atom

M5AtomS3

M5Dial

M5Capsule

M5Cardputer

M5Paper

M5CoreInk

M5StickC

M5StickC Plus

M5StickCPlus2

M5TimerCAM

M5NanoC6

3. M5Unified & M5GFX

M5Unified

M5GFX

LCD

RGB565 Color

begin

sleep

clear

wakeup

hight

width

getCursorX

getCursorY

getRotation

getTextDatum

setCursor

setRotation

setBrightness

alphaBlend

loadFont

unloadFont

fontsLoaded

fillScreen

invertDisplay

color565

Text

print

textWidth

setTextSize

setTextColor

setTextWrap

setTextPadding

setTextDatum

Draw

drawFastHLine

drawFastVLine

drawString()

drawNumber

drawChar

drawFloat

drawPixel

drawLine

drawRect

fillRect

drawRoundRect

fillRoundRect

drawCircle

fillCircle

drawEllipse

fillEllipse

drawTriangle

fillTriangle

drawXBitmap

drawBitmap

drawBmpFile

drawJpg

drawJpgFile

progressBar

qrcode

Sprite

setColorDepth