LCD Screen

Screen pixels are 320x240, with the upper left corner of the screen as the origin (0,0)

Color code:

Definition	Hex Value	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()

Function:

Initialize for use

Syntax:

void begin()

Pay Attention:
1.If you don't want to use M5.begin() to initialize the LCD, please call this Function before using the display.

Example:

#include <M5Core2.h>

void setup() {
  M5.Lcd.begin();  //Initialize M5Stack
}

void loop() {
}

sleep()

Function:

Switch the display to energy saving mode

Syntax:

void sleep()

Example:

#include <M5Core2.h>

void setup() {
  M5.Lcd.begin();  //Initialize M5Core2
  M5.Lcd.sleep();    //Switch to sleep mode
}

void loop() {
}

clear()

Function:

Clear the content displayed on the screen.

Syntax:

void clear()

Example:

#include <M5Core2.h>

void setup() {
  M5.Lcd.begin();  //Initialize M5Core2
  M5.Lcd.fillScreen(RED);
  delay(1000);
  M5.Lcd.clear();    //Clear the content displayed on the screen.
}

void loop() {
}

wakeup()

Function:

Restore display from energy saving mode

Syntax:

void wakeup()

Example:

#include <M5Core2.h>

void setup() {
  M5.Lcd.begin();  //Initialize M5Core2
  M5.Lcd.wakeup();    //Restore display from energy saving mode
}

void loop() {
}

hight()

Function:

Return the height of the screen

Syntax:

void hight()

Example:

#include <M5Core2.h>

void setup() {
  M5.begin();   //Initialize M5Core2
  M5.Lcd.print(M5.Lcd.height());    //Display the height of the screen.
}

void loop() {
}

width()

Function:

Return the width of the screen

Syntax:

void width()

Example:

#include <M5Core2.h>

void setup() {
  M5.begin();   //Initialize M5Core2
  M5.Lcd.print(M5.Lcd.width());    //Display the width of the screen.
}

void loop() {
}

getCursorX()

Function:

Get the x coordinate at the end of the character

Syntax

int16_t getCursorX()

Pay Attention:
1.Not applicable to drawNumber()

Example:

#include <M5Core2.h>

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

void loop(){
}

getCursorY()

Function:

Get the y coordinate at the end of the character

Syntax

int16_t getCursorY()

Pay Attention:
1.Not applicable to drawNumber()

Example:

#include <M5Core2.h>

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

void loop(){
}

getRotation()

Function:

Return the rotation direction of the screen.

Syntax

uint8_t getRotation()

Example:

#include <M5Core2.h>

void setup() {
  M5.begin();  //Initialize M5Core2
  M5.Lcd.print(M5.Lcd.getRotation());    //Display screen rotation direction.
}

void loop(){
}

getTextDatum()

Function:

Return the text alignment (it is the number of the alignment in the list above)

Syntax

textdatum_t getRotation()

Example:

#include <M5Core2.h>

void setup() {
  M5.begin();  //Initialize M5Core2
  M5.Lcd.setTextDatum(MC_DATUM);    //Set the alignment of the text
  M5.Lcd.drawString("hello", 160, 120, 2);    //Print the string 'hello' in font 2 at (160, 120)
  M5.Lcd.print(M5.Lcd.getTextDatum());    //The text alignment obtained by screen printing
}

void loop(){
}

setRotation()

Function:

Rotate Screen

Syntax:

void setRotation(uint8_t m)

Function parameter:

Parameter	Description	Type
m	uint8_t	Rotate angle ( * 90°)

Pay Attention:
1.Rotate angle is a multiple of 90°
2.0-3 is clockwise rotation, 4-7 is counterclockwise rotation (default is 1)
3. Need to be set before display.

Example:

#include <M5Core2.h>

void setup() {
  M5.begin();             //Initialize M5Core2
  M5.Lcd.setRotation(2);  //Rotate the screen 180 degrees clockwise (2*90)
  M5.Lcd.fillEllipse(160, 100, 60, 100, YELLOW);    //Create a yellow ellipse at (160, 100) with the long axis and the short axis to 60 and 100 respectively.
  delay(1000);
  M5.Lcd.setRotation(1);  //Restore the screen to the default display state
  M5.Lcd.fillEllipse(160, 100, 60, 100, GREEN);
}

void loop() {}

SetLcdVoltage()

Function:

Set screen brightness

Syntax:

void SetLcdVoltage(uint16_t voltage)

Function parameter:

Parameter	Type	Description
voltage	uint16_t	Voltage value

Pay Attention:
1.Voltage range(2500-3300)

Example:

#include <M5Core2.h>

void setup() {
  M5.begin();
  M5.Lcd.fillScreen(RED);
}
void loop() {
  M5.update();
  for(int i=2500; i<3300;i++){
    M5.Axp.SetLcdVoltage(i);  //Set the voltage value every 10ms
    delay(10);
  }
  for(int i=3300; i>2500;i--){
    M5.Axp.SetLcdVoltage(i);
    delay(10);
  }
}

alphaBlend()

Function:

Set the transparency, foreground mix and background colors.

Syntax

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

Function parameter

Parameter	Description	Type
alpha	uint8_t	Transparency
fgc	uint16_t	Foreground color
bgc	uint16_t	Background color

Example:

#include <M5Core2.h>

void setup() {
  M5.Lcd.begin();  //Initialize M5Core2
  M5.Lcd.fillScreen(M5.Lcd.alphaBlend(128, 0X00FF00, 0XFF0000));
  //Set foreground、background color to 0X00FF00,0XFF0000 respectively and transparency to 128, and fill out the entire screen.
}

void loop() {
}

loadFont()

Function:

Load fonts from VLW files

Syntax:

void loadFont(String fontName, bool flash)

Function parameter:

Parameter	Type	Statement
fontName	String	Font name
flash	bool	File source

Example:

#include <M5Core2.h>

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

void loop() {
}

unloadFont()

Function:

Unload font

Syntax:

void unloadFont()

Example:

#include <M5Core2.h>

void setup() {
  M5.begin();  //Initialize M5Core2
  M5.Lcd.unloadFont();
}

void loop() {
}

fontsLoaded()

Function:

Return whether to load font

Return Value:

Return the Hex Value of the encoding of the displayed font

Example:

#include <M5Core2.h>

void setup() {
  M5.begin();  //Initialize M5Core2
  M5.Lcd.print(M5.Lcd.fontsLoaded());
}

void loop() {
}

fillScreen()

Syntax:

void fillScreen(uint32_t color)

Function:Fill the entire screen with the specified color

Function parameter

Parameter	Type	Description
color	uint32_t	Color value

Example:

#include <M5Core2.h>

void setup() {
  M5.begin();  //Initialize M5Core2
  M5.Lcd.fillScreen(RED);    //Fill the screen with red
}

void loop(){
}

invertDisplay()

Function:

Invert the screen color in a negative/positive way

Syntax:

void invertDisplay(boolean i)

Function parameter:

Parameter	Type	Statement
i	boolean	When it reverts, true

Example:

#include <M5Core2.h>

void setup() {
  M5.begin();  //Initialize M5Core2
  M5.Lcd.fillScreen(RED);    //Fill the screen with red
}

void loop() {
  M5.Lcd.invertDisplay(1);    //Turn on Invert
  delay(1000);
  M5.Lcd.invertDisplay(0);    //Turn off Invert
}

color565()

Function:

Change to the Color code used in the function（rgb 565）

Syntax:

color565(uint8_t red, uint8_t green, uint8_t blue)

Function parameter:

Parameter	Type	Description
red	uint8_t	RED
green	uint8_t	GREEN
blue	uint8_t	BLUE

Example:

#include <M5Core2.h>

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

void loop() {}

Text

print()

Function:

Print a string at the current position of the screen

Syntax:

size_t print()

Example:

#include <M5Core2.h>

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

void loop() {
}

textWidth()

Function:

Return the width of the text in pixels

Syntax:

int16_t textWidth(const String& string)

Function parameter:

Parameter	Type	Description
string	const String&	String

Example:

#include <M5Core2.h>

void setup() {
  M5.begin();   //Initialize M5Core2
  String text = "hello  ";
  M5.Lcd.print(text);
  M5.Lcd.print(M5.Lcd.textWidth(text));    //Print the pixel width of the string array ‘text’ on the Screen
}

void loop() {}

setTextSize()

Function:

Set the size of the displayed text

Syntax:

void setTextSize(uint8_t s)

Function parameter

Parameter	Type	Description
s	uint8_t	Font size (1-7)

Example:

#include <M5Core2.h>

void setup() {
  M5.begin();  //Initialize M5Core2
  M5.Lcd.setTextSize(4);    //Set the Text size to 4
  M5.Lcd.print("Hello M5Core2");
}

void loop() {
}

setTextColor()

Function:

Set the foreground color and background color of the displayed text

Syntax:

void setTextColor(uint16_t color)

void setTextColor(uint16_t color, uint16_t backgroundcolor)

Function parameter

Parameter	Type	Description
color	uint16_t	foreground color of the text
backgroundcolor	uint16_t	background color of the text

Pay Attention:
1.If the background color value is not given, the current background color is used.
2.If you do not set the color of the text, the default is white.

Example:

#include <M5Core2.h>

void setup() {
  M5.begin(); //Initialize M5Core2
  M5.Lcd.setTextColor(RED,BLACK);    //Set the front and Background colors of the text to red and black respectively.
  //M5.Lcd.setTextColor(RED);
}

void loop(){
}

setTextWrap()

Function:

Set text wrapping Function

Syntax:

void setTextWrap(boolean wrapX, boolean wrapY)

Function parameter:

Parameter	Type	Description
wrapX	boolean	X direction (enabled by default)
wrapY	boolean	Y direction

Example:

#include <M5Core2.h>

void setup() {
  M5.begin();   //Initialize M5Core2
  M5.Lcd.setTextWrap(true, true);    //Turn on automatic line wrapping for x and y axis
    M5.Lcd.print("hello M5Core2 hello M5Core2 hello M5Core2 hello M5Core2 hello M5Core2 hello M5Core2 hello M5Core2 hello M5Core2");
}

void loop() {}

setTextPadding()

Function:

Fill the specified blank width (helps to erase old text and numbers)

Syntax:

void setTextPadding(uint16_t x_width)

Function parameter

Parameter	Type	Description
x_width	uint16_t	Blank area width

Example:

#include <M5Core2.h>

void setup() {
  M5.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()

Function:

Set text alignment

Syntax:

void setTextDatum(uint8_t datum)

Function parameter:

Parameter	Type	Description
TL_DATUM (0)	uint8_t	Align upper left(default)
TC_DATUM (1)	uint8_t	Align center upward
TR_DATUM (2)	uint8_t	Align upper right
ML_DATUM (3)	uint8_t	Align left in center
MC_DATUM (4)	uint8_t	Center-aligned
MR_DATUM (5)	uint8_t	Align right in center
BL_DATUM (6)	uint8_t	Align bottom left
BC_DATUM (7)	uint8_t	Align center and bottom
BR_DATUM (8)	uint8_t	Align bottom right
L_BASELINE (9)	uint8_t	Left character baseline
C_BASELINE (10)	uint8_t	Middle character baseline
R_BASELINE (11)	uint8_t	Right character baseline

Pay Attention:
1.Not applicable to print()

Example:

#include <M5Core2.h>

void setup() {
  M5.begin();  //Initialize M5Core2
  M5.Lcd.setTextDatum(MC_DATUM);    //Set text alignment to center-aligned
  M5.Lcd.drawString("hello", 160, 120, 2);    //Print the string 'hello' in font 2 at (160, 120)
}

void loop(){
}

Draw

drawFastHLine()

Function:

Draw a color horizontal line with length w at (X,Y)

Syntax:

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

Function parameter

Parameter	Type	Function
x	int32_t	Coordinate X
y	int32_t	Coordinate Y
w	int32_t	Width (pixel)
color	uint32_t	Line color

Example:

#include <M5Core2.h>

void setup() {
  M5.begin();  //Initialize M5Core2
  M5.Lcd.drawFastHLine(3, 100, 255, GREEN);    //Draw a green horizontal line with a length of 255 at (3,100)
}

void loop() {
}

drawFastVLine()

Function:

Draw a color vertical line with length w at (X,Y)

Syntax:

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

Function parameter

Parameter	Type	Function
x	int32_t	Coordinate X
y	int32_t	Coordinate Y
w	int32_t	Width (pixel)
color	uint32_t	Line color（Optional）

Example:

#include <M5Core2.h>

void setup() {
  M5.begin();  //Initialize M5Core2
  M5.Lcd.drawFastVLine(100, 0, 255, TFT_GREEN);    //Draw a green vertical line with a length of 255 at (100,0)
}

void loop(){
}

drawString()

Function:

Display integer at (x,y)

Syntax:

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

Function parameter

Parameter	Type	Description
string	const char *	A String
poX	int32_t	X Coordinate
poY	int32_t	Y Coordinate
font	uint8_t	Font

Example:

#include <M5Core2.h>

void setup() {
  M5.begin();  //Initialize M5Core2
  M5.Lcd.drawString("Hello M5", 160, 100, 2);    //Display the string ‘Hello M5’ in font 2 at (160, 100)
}

void loop(){
}

drawNumber()

Function:

Display integer at (x,y)

Syntax:

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

Function parameter

Parameter	Type	Description
long_num	long	Number
poX	int32_t	X Coordinate
poY	int32_t	Y Coordinate

Example:

#include <M5Core2.h>

void setup() {
  M5.begin();  //Initialize M5Core2
  M5.Lcd.drawNumber(99, 55, 100);    //Display the integer 100 at (99,55)
}

void loop(){
}

drawChar()

Function:

Display characters in font at (X, Y)

Syntax:

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

Function parameter

Parameter	Type	Description
uniCode	int16_t	Character
x	int32_t	XCoordinate
y	uint16_t	YCoordinate
font	uint8_t	Font

Example:

#include <M5Core2.h>
void setup() {
  M5.begin(); //Initialize M5Core2
  M5.Lcd.drawChar('A', 160, 120, 2);    //Display character A in font 2 at (160, 120)
}
void loop(){
}

drawFloat()

Function:

At (X, Y), the floating number floatNumber with dp digits after the decimal point is displayed

Syntax:

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

Function parameter:

Parameter	Type	Description
floatNumber	float	Displayed floating number
dp	uint8_t	Decimal places
poX	int32_t	Show at x
poY	int32_t	Show at y

Example:

#include <M5Core2.h>

void setup() {
  M5.begin();   //Initialize M5Core2
  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
}

void loop() {}

drawPixel()

Function:

Draw a pixel at (x,y)

Syntax:

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

Parameter	Type	Description
x	int32_t	X Coordinate
y	int32_t	Y Coordinate
color	uint32_t	Color

Example:

#include <M5Core2.h>

void setup() {
  M5.begin();  //Initialize M5Core2
  M5.Lcd.drawPixel(22,22,RED);    //Draw a red pixel at (22, 22)
}

void loop() {}

drawLine()

Function:

Draw a straight line from point (x0, y0) to point (x1, y1) in the specified color (color)

Syntax:

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

Parameter	Type	Description
x*	int32_t	XCoordinate
y*	int32_t	YCoordinate
color	uint32_t	Color

Example:

#include <M5Core2.h>

void setup() {
  M5.begin();  //Initialize M5Core2
  M5.Lcd.drawLine(200, 0, 200,2000,GREEN);    //Draw a straight line in green from point (200, 0) to point (200, 200)
}

void loop(){
}

drawRect()

Function:

Draw a rectangular with ‘width’ and ‘height’ in the specified color at (x, y)

Syntax:

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

Function parameter

Parameter	Type	Description
x	int32_t	X Coordinate
y	int32_t	Y Coordinate
w	int32_t	The width of the rectangular (unit: pixel)
h	int32_t	The height of the rectangular box (unit: pixel)
color	uint32_t	Color

Example:

#include <M5Core2.h>

void setup() {
  M5.begin();  //Initialize M5Core2
  M5.Lcd.drawRect(180, 12, 122, 10, BLUE);    //Draw a rectangular  with ‘width’ and ‘height’ of 122 and 10 in blue at (180,12)
}

void loop(){
}

fillRect()

Function:

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

Syntax:

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

Function parameter

Parameter	Type	Description
x	int32_t	X Coordinate
y	int32_t	Y Coordinate
w	int32_t	The width of the rectangular (unit: pixel)
h	int32_t	The height of the rectangular box (unit: pixel)
color	uint32_t	Color

Example:

#include <M5Core2.h>

void setup() {
  M5.begin();  //Initialize M5Core2
  M5.Lcd.fillRect(150, 120, 122, 10, BLUE);    //Draw a blue filled rectangle with a length of 122 and a width of 10 at (150,120)
}

void loop(){
}

drawRoundRect()

Function:

Draw a rounded rectangular with ‘width’ and ‘height’ at (x, y), the radius of the rounded corner is ‘radius’, and the color is ‘color’

Syntax:

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

Parameter	Type	Description
x	int32_t	The x coordinate of the upper left corner of the rectangle
y	int32_t	The y coordinate of the upper left corner of the rectangle
w	int32_t	Rectangle (pixel)
h	int32_t	The height of the rectangle
r	int32_t	Corner radius f
color	uint32_t	Square line color

Example:

#include <M5Core2.h>

void setup() {
  M5.begin();   //Initialize M5Core2
  M5.Lcd.drawRoundRect(55,55,30,50,10,GREEN);    //At (55,55), draw a rounded rectangular with a width and height of 30 and 50 with a rounded corner radius of 10 and a green color

void loop() {}

fillRoundRect()

Function:

Draw a rounded rectangular with width and height at (x, y), the radius of the rounded corner is ’radius‘, and the color is ’color‘.

Syntax:

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

Function parameter:

Parameter	Type	Description
x	int32_t	The x coordinate of the upper left corner of the rectangle
y	int32_t	The y coordinate of the upper left corner of the rectangle
w	int32_t	Rectangle (pixel)
h	int32_t	The height of the rectangle
r	int32_t	Corner radius f
color	uint32_t	Square line color

Example:

#include <M5Core2.h>

void setup() {
  M5.begin();   //Initialize M5Core2
  M5.Lcd.fillRoundRect(55, 55, 30, 50, 10, GREEN);//Draw a green rounded rectangle with a width and height of 30, 50 and a rounded radius of 10 at (55, 55).
}

void loop() {}

drawCircle()

Function:

Draw a color circle with radius r at (x, y)

Syntax:

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

Parameter	Type	Description
x0	int32_t	X Coordinate of the circle center
y0	int32_t	Y Coordinate of the circle center
r	int32_t	Radius of the circle
color	uint32_t	Color of the circle

Example:

#include <M5Core2.h>

void setup() {
  M5.begin();   //Initialize M5Core2
  M5.Lcd.drawCircle(100, 100, 50, RED);   //Draw a red circle with a radius of 50 at (x,y)
}

void loop() {}

fillCircle()

Function:

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

Syntax:

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

Parameter	Type	Description
x0	int32_t	X Coordinate of the circle center
y0	int32_t	Y Coordinate of the circle center
r	int32_t	Radius of the circle
color	uint32_t	Color of the circle

Example:

#include <M5Core2.h>

void setup() {
  M5.begin();   //Initialize M5Core2
  M5.Lcd.fillCircle(100, 100, 50, RED); //Draw a filled red circle with a radius of 50 at (x,y)
}

void loop() {}

drawEllipse()

Function:

Draw an ellipse with width and height of rx, ry at (x, y)

Syntax:

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

Parameter	Type	Description
x0	int16_t	X Coordinate of the ellipse
y0	int16_t	Y Coordinate of the ellipse
rx	int32_t	Width (pixel) of the ellipse
ry	int32_t	Height(pixel) of the ellipse
color	uint16_t	Color of the ellipse

Example:

#include <M5Core2.h>

void setup() {
  M5.begin();   //Initialize M5Core2
  M5.Lcd.drawEllipse(160, 100, 60, 100, YELLOW);//Draw an ellipse contour line with a width and a height of 60,100 in yellow color at (160,100)
}

void loop() {}

fillEllipse()

Function:

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

Syntax:

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

Parameter	Type	Description
x0	int16_t	X Coordinate of the ellipse
y0	int16_t	Y Coordinate of the ellipse
rx	int32_t	Width (pixel) of the ellipse
ry	int32_t	Height(pixel) of the ellipse
color	uint16_t	Color of the ellipse

Example:

#include <M5Core2.h>

void setup() {
  M5.begin();  //Initialize M5Core2
  M5.Lcd.fillEllipse(160, 100, 60, 100, YELLOW);    //Draw a filled yellow ellipse with a width and a height of 60,100 at (160,100) in yellow color.
}

void loop() {}

drawTriangle()

Function:

Draw a triangular line frame with (x1, y1) (x2, y2) (x3, y3) as the vertex

Syntax:

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

Function parameter:

Parameter	Type	Description
x*	int32_t	X Coordinate of vertex x*
y*	int32_t	X Coordinate of vertex y*
color	uint32_t	Triangle color

Example:

#include <M5Core2.h>

void setup() {
  M5.begin();   //Initialize M5Core2
  M5.Lcd.drawTriangle(30, 30, 180, 100, 80, 150, YELLOW); //Draw a yellow triangle line frame with (30,30) (180,100) (80,150) as the vertex
}

void loop() {}

drawTriangle()

Function:

Draw a filled triangle with (x1, y1) (x2, y2) (x3, y3) as the vertex

Syntax:

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

Function parameter:

Parameter	Type	Description
x*	int32_t	X Coordinate of vertex x*
y*	int32_t	X Coordinate of vertex y*
color	uint32_t	Triangle color

Example:

#include <M5Core2.h>

void setup() {
  M5.begin();   //Initialize M5Core2
  M5.Lcd.drawTriangle(30, 30, 180, 100, 80, 150, YELLOW); //Draw a filled yellow triangle with (30,30) (180,100) (80,150) as the vertex
}

void loop() {}

drawXBitmap()

Function:

Draw bitmap

Syntax:

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

Function parameter

Parameter	Type	Description
x	int16_t	Coordinate X
y	int16_t	Coordinate Y
bitmap	const uint8_t	Displayed image
w	int16_t	Width (pixel)
h	int16_t	Height (pixel)
color	uint16_t	Color

Example:

See example sketch:M5Stack->Advanced->Display->drawXBitmap

drawBitmap()

Function:

Draw bitmap

Syntax:

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

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

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

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

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

Function parameter

Parameter	Type	Description
x0	uint16_t	Coordinate X
y0	uint16_t	Coordinate Y
w	int16_t	Width(Pixel)
h	int16_t	Height(Pixel)
data	uint16_t* / uint8_t*	Image number
transparent	uint16_t	Transparent color code

Pay Attention:
1.Color code is represented by a total of 16 digits: 5 digits for red, 6 digits for green, and 5 digits for blue at the top

Example:

See example sketch:M5Stack->games->Tetris

drawBmpFile()

Function:

Read the bitmap from the file and draw it

Syntax:

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

Function parameter

Parameter	Type	Description
fs	fs::FS	File stream
path	const char *	File path(SD 、SPIFFS)
x	int16_t	Coordinate X
y	int16_t	Coordinate Y

Pay Attention:
1.It may not be expanded depending on the size and number of bits.
2. Need to be pre-installed in advance Arduino ESP32 filesystem uploader

Example:

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

drawJpg()

Function:

Read picture data in JPEG format from memory and draw it

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

Function parameter

Parameter	Type	Description
jpg_data	uint8_t *	Data top
jpg_len	size_t	Data length
x	uint16_t	Coordinate X
y	uint16_t	Coordinate Y
maxWidth	uint16_t	Maximum Width(Pixel)
maxHeight	uint16_t	Maximum Height(Pixel)
offX	uint16_t	Offset X (pixel)
offY	uint16_t	Offset Y (pixel)
scale	jpeg_div_t	Scale

Specification(jpeg_div_t):

Definition	Function
JPEG_DIV_NONE	None
JPEG_DIV_2	1/2
JPEG_DIV_4	1/4
JPEG_DIV_8	1/8
JPEG_DIV_MAX	MAX

Pay Attention:
1.Depending on the size, number of bits and format (progressive, etc.), it may not be able to expand
2. tetris_img Download

Example:

#include <M5Core2.h>
extern uint8_t tetris_img[];    //Refer to the array of stored images, need to be placed in the same folder as xxx.ino in advance.

void setup() {
  M5.begin();  //Initialize M5Core2
  M5.Lcd.drawJpg(tetris_img, 34215);    //Read the jpeg file named 'tetris_img' from the memory
}
void loop(){
}

drawJpgFile()

Function:

Read JPEG data from file stream and draw it

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)

Function parameter

Parameter	Type	Description
fs	fs::FS	File stream
path	const char *	File path
x	uint16_t	Coordinate X
y	uint16_t	Coordinate Y
maxWidth	uint16_t	Max Width (pixel)
maxHeight	uint16_t	Max Height (pixel)
offX	uint16_t	Offset X (pixel)
offY	uint16_t	Offset Y (pixel)
scale	jpeg_div_t	Scale

Scale(jpeg_div_t):

Definition	Function
JPEG_DIV_NONE	no care.
JPEG_DIV_2	1/2
JPEG_DIV_4	1/4
JPEG_DIV_8	1/8
JPEG_DIV_MAX	MAX

Pay Attention:
1.Depending on the size and format (progressive, etc.), it may not be able to expand.

progressBar()

Function:

The bar which shows progress

Syntax:

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

Function parameter

Parameter	Type	Description
x	int	Coordinate X
y	int	Coordinate Y
w	int	Width(Pixel)
h	int	Height(pixel)
val	uint8_t	Progress(0-100%)

Pay Attention:
1.The progress bar will be displayed in blue

Example:

#include <M5Core2.h>

void setup() {
  M5.begin();  //Initialize M5Core2
  M5.Lcd.progressBar(0, 0, 240, 20, 20);    //Display a progress bar with a width of 240 and a 20% progress at (0, 0)
}

void loop() {
}

qrcode()

Function:

Create a QR code

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)

Function parameter

Parameter	Type	Description
val	string / String&	The string to embed the QR
x	uint16_t	Coordinate X
y	uint16_t	Coordinate Y
width	uint8_t	Width(Pixel)
version	uint8_t	QR code version

Pay Attention:
1.Please select the appropriate QR code version according to the number of characters.

Example:

#include <M5Core2.h>

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

void loop() {
}

Sprite

setColorDepth()

Function:

Set color depth

Syntax:

void* TFT_eSprite::setColorDepth(int8_t b)

Example:

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

void setup() {
    M5.begin();        // Init M5Core2.  初始化M5Core2
    img.setColorDepth(8); // Set color depth.  设置色深
    img.setTextSize(2);
    img.createSprite(320, 240);  //Create a 320x240 canvas. 创建一块320x240的画布
}

void loop() {}

createSprite()

Function:

Create a canvas with a specified width and height

Syntax:

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

Function parameter:

Parameter	Type	Description
x	int16_t	X Coordinate
y	int16_t	Y Coordinate
frames	uint8_t	Deep color [1~2, optional]

Example:

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

void setup() {
  M5.begin();  //Initialize M5Core2
  img.createSprite(320, 240);    //Create a 320x240 canvas
  img.fillSprite(RED);    //Fill the canvas with red
  img.pushSprite(0, 0, WHITE);    //Push the canvas to Screen(0,0) and set white as the penetration color
  M5.Lcd.print(img.height());    //Print canvas height on the screen    
}

void loop() {}

fillSprite()

Function:

Fill the Sprite with the specified color

Syntax:

void fillSprite(uint32_t color)

Function parameter:

Parameter	Type	Description
color	int32_t	filled color

Example:

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

void setup() {
  M5.begin();  //Initialize M5Core2
  img.createSprite(320, 240);    //Create a 320x240 canvas
  img.fillSprite(RED);    //Fill the canvas with red
  img.pushSprite(0, 0, WHITE);    //Push the canvas to Screen(0,0) and set white as the penetration color
}

void loop() {}

pushSprite()

Function:

Push the canvas to the specified Coordinate and set the penetration color

Syntax:

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

Function parameter:

Parameter	Type	Description
x	int32_t	XCoordinate
y	int32_t	YCoordinate
transparent	int16_t	Penetration color(Optional)

Example:

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

void setup() {
  M5.begin();  //Initialize M5Core2
  img.createSprite(320, 240);    //Create a 320x240 canvas
  img.fillSprite(RED);    //Fill the canvas with red
  img.fillCircle(100,100,20,GREEN);
  img.pushSprite(0, 0, GREEN);    //Push the canvas to Screen(0,0) and set white as the penetration color
}

void loop() {}

height()

Function:

Return the height of the Sprite

Example:

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

void setup() {
  M5.begin();  //Initialize M5Core2
  img.createSprite(320, 240);    //Create a 320x240 canvas
  img.fillSprite(RED);    //Fill the canvas with red
  img.pushSprite(0, 0, WHITE);    //Push the canvas to Screen(0,0) and set white as the penetration color
  M5.Lcd.print(img.height());    //Print canvas height on the screen    
}

void loop() {}

deleteSprite()

Function:

Delete sprite from memory

Example:

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

void setup() {
  M5.begin();  //Initialize M5Core2
  img.deleteSprite();    //Remove canvas from memory
}

void loop() {}

Hint:
LCD. img. are inherited from this file In_eSPI.h , and the usage is similar