LCD Screen

The screen pixel is 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

Function prototype:

void begin()

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

Example:

#include <M5Stack.h>

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

void loop() {
}

sleep()

Function:

Switch the display to energy saving mode

Function prototype:

void sleep()

Example:

#include <M5Stack.h>

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

void loop() {
}

wakeup()

Function:

Restore display from energy saving mode

Function prototype:

void wakeup()

Example:

#include <M5Stack.h>

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

void loop() {
}

hight()

Function:

Return the height of the screen

Function prototype:

void hight()

Example:

#include <M5Stack.h>

void setup() {
  M5.begin();   //Initialize M5Stack
  M5.Power.begin();
  M5.Lcd.print(M5.Lcd.height());    //Display the height on the screen
}

void loop() {
}

width()

Function:

Return the width of the screen

Function prototype:

void width()

Example:

#include <M5Stack.h>

void setup() {
  M5.begin();   //Initialize M5Stack
  M5.Power.begin();
  M5.Lcd.print(M5.Lcd.width());    //Display the width on the screen
}

void loop() {
}

getCursorX()

Function:

Get the x coordinate of the final character of the string

Function prototype

int16_t getCursorX()

Pay attention:
1.Not applicable to drawNumber()

Example:

#include <M5Stack.h>

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

void loop(){
}

getCursorY()

Function:

Get the y coordinate of the final character of the string

Function prototype

int16_t getCursorY()

Pay attention:
1.Not applicable to drawNumber()

Example:

#include <M5Stack.h>

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

void loop(){
}

getRotation()

Function:

Return the screen rotation direction

Function prototype

uint8_t getRotation()

Example:

#include <M5Stack.h>

void setup() {
  M5.begin();  //Initialize M5Stack
  M5.Power.begin();
  M5.Lcd.print(M5.Lcd.getRotation());    //Output the rotation direction of the screen on the screen
}

void loop(){
}

getTextDatum()

Function:

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

Function prototype

textdatum_t getRotation()

Example:

#include <M5Stack.h>

void setup() {
  M5.begin();  //Initialize M5Stack
  M5.Power.begin();
  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());    //Text alignment obtained by screen printing
}

void loop(){
}

setRotation()

Function:

Rotate the screen

Function prototype:

void setRotation(uint8_t m)

Function parameters:

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

Pay attention:
1.The rotation angle is a multiple of 90°
2. 0 to 3 rotate clockwise, 4 to 7 rotate counterclockwise (default is 1)
3. Need to be set before display

Example:

#include <M5Stack.h>

void setup() {
  M5.begin();             //Initialize M5Stack
  M5.Power.begin();
  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 a length and width of 60, 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() {}

setBrightness()

Function:

Set screen brightness

Function prototype:

void setBrightness(uint16_t voltage)

Function parameters:

parameter Description Type
brightness uint16_t Brightness (0: Off - 255:Full)

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);  //Set screen brightness every 10ms
    delay(10);
  }
  for(int i=255; i>0;i--){
    M5.Lcd.setBrightness(i);
    delay(10);
  }
}

alphaBlend()

Function:

Set the transparency,foreground mix and background colors.

Function prototype

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

Function parameters

parameter Description Type
alpha uint8_t transparency
fgc uint16_t foreground color
bgc uint16_t background color

Example:

#include <M5Stack.h>

void setup() {
  M5.Lcd.begin();  //Initialize M5Stack
  M5.Power.begin();
  M5.Lcd.fillScreen(M5.Lcd.alphaBlend(128, 0X00FF00, 0XFF0000));
  //Set the foreground and background colors to 0X00FF00 and 0XFF0000 respectively. The transparency to 128 and fill the entire screen.
}

void loop() {
}

loadFont()

Function:

Load fonts from VLW files

Function prototype:

void loadFont(String fontName, bool flash)

Function parameters:

Parameter Type Description
fontName String Font name
flash bool Document origin

Example:

#include <M5Stack.h>

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

void loop() {
}

unloadFont()

Function:

Uninstall font

Function prototype:

void unloadFont()

Example:

#include <M5Stack.h>

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

void loop() {
}

fontsLoaded()

Function:

Return whether to load own font

Return Value:

Return the hexadecimal value of the encoding of the displayed font

Example:

#include <M5Stack.h>

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

void loop() {
}

fillScreen()

Function prototype:

void fillScreen(uint32_t color)

Function:

Fill the entire screen with the specified color

Function parameters

Parameter Type Description
color uint32_t Color value

Example:

#include <M5Stack.h>

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

void loop(){
}

invertDisplay()

Function:

Invert the screen color in a negative/positive way

Function prototype:

void invertDisplay(boolean i)

Function parameters:

Parameter Type Explanation
i boolean when it reverts, true

Example:

#include <M5Stack.h>

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

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

color565()

Function:

Change to the color code used in the function(rgb 565)

Function prototype:

color565(uint8_t red, uint8_t green, uint8_t blue)

Function parameters:

Parameter Type Description
red uint8_t Red
green uint8_t Green
blue uint8_t Blue

Example:

#include <M5Stack.h>

void setup() {
  M5.begin();  //Initialize M5Stack
  M5.Power.begin();
  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 on the screen

Function prototype:

size_t print()

Example:

#include <M5Stack.h>

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

void loop() {
}

textWidth()

Function:

Return the width of the text in pixels

Function prototype:

int16_t textWidth(const String& string)

Function parameters:

Parameter Type Description
string const String& String

Example:

#include <M5Stack.h>

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

Function prototype:

void setTextSize(uint8_t s)

Function parameters

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

Example:

#include <M5Stack.h>

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

void loop() {
}

setTextColor()

Function:

Set the foreground color and background color of the displayed text

Function prototype:

void setTextColor(uint16_t color)

void setTextColor(uint16_t color, uint16_t backgroundcolor)

Function parameters

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

Pay attention:
1.If the backgroundcolor value of the function 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 <M5Stack.h>

void setup() {
  M5.begin(); //Initialize M5Stack
  M5.Power.begin();
  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 word wrap Function

Function prototype:

void setTextWrap(boolean wrapX, boolean wrapY)

Function parameters:

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

Example:

#include <M5Stack.h>

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

void loop() {}

setTextPadding()

Function:

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

Function prototype:

void setTextPadding(uint16_t x_width)

Function parameters

Parameter Type Description
x_width uint16_t Blank area width

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

Function:

Set text alignment

Function prototype:

void setTextDatum(uint8_t datum)

Function parameters:

Parameter Type Description
TL_DATUM (0) uint8_t Align Upper left(default)
TC_DATUM (1) uint8_t Align center up
TR_DATUM (2) uint8_t Align upper right
ML_DATUM (3) uint8_t Center Align Left
MC_DATUM (4) uint8_t Center Align
MR_DATUM (5) uint8_t Center Align Right
BL_DATUM (6) uint8_t Align bottom left
BC_DATUM (7) uint8_t Align center 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 <M5Stack.h>

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

void loop(){
}

Draw

drawFastHLine()

Function:

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

Function prototype:

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

Function parameters

Parameter Type Function
x int32_t Axis X
y int32_t Axis Y
w int32_t Width (pixels)
color uint32_t Line color

Example:

#include <M5Stack.h>

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

Function prototype:

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

Function parameters

Parameter Type Function
x int32_t Axis X
y int32_t Axis Y
w int32_t Width (pixels)
color uint32_t Line color(Optical)

Example:

#include <M5Stack.h>

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

Function prototype:

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

Function parameters

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

Example:

#include <M5Stack.h>

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

Function prototype:

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

Function parameters

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

Example:

#include <M5Stack.h>

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

void loop(){
}

drawChar()

Function:

Display characters in font at (X, Y)

Function prototype:

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

Function parameters

Parameter Type Description
uniCode int16_t Character
x int32_t X Axis
y uint16_t Y Axis
font uint8_t Font

Example:

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

drawFloat()

Function:

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

Function prototype:

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

Function parameters:

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

Example:

#include <M5Stack.h>

void setup() {
  M5.begin();   //Initialize M5Stack
  M5.Power.begin();
  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 point at (x,y)

Function prototype:

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

Parameter:

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

Example:

#include <M5Stack.h>

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

Function prototype:

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

Parameter Type Description
x* int32_t X Axis
y* int32_t Y Axis
color uint32_t Color

Example:

#include <M5Stack.h>

void setup() {
  M5.begin();  //Initialize M5Stack
  M5.Power.begin();
  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 wire frame with width and height in the specified color at (x, y)

Function prototype:

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

Function parameters

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

Example:

#include <M5Stack.h>

void setup() {
  M5.begin();  //Initialize M5Stack
  M5.Power.begin();
  M5.Lcd.drawRect(180, 12, 122, 10, BLUE);    //Draw a rectangular line frame 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)

Function prototype:

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

Function parameters

Parameter Type Description
x* int32_t XAxis
y* int32_t YAxis
w int32_t The width of the rectangular box (unit: pixel)
h int32_t The height of the rectangular frame (unit: pixel)
color uint32_t Color value

Example:

#include <M5Stack.h>

void setup() {
  M5.begin();  //Initialize M5Stack
  M5.Power.begin();
  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 line frame with width and height at (x, y), the radius of the rounded corner is radius, and the color is color

Function prototype:

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 upper left of the rectangle x Axis
y int32_t The upper left of the rectangle Y Axis
w int32_t Rectangle (pixels)
h int32_t The height of the rectangle
r int32_t Corner radius f
color uint32_t Square line color

Example:

#include <M5Stack.h>

void setup() {
  M5.begin();   //Initialize M5Stack
  M5.Power.begin();
  M5.Lcd.drawRoundRect(55,55,30,50,10,GREEN);    //At (55,55), draw a rounded rectangular line frame 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 line frame with width and height at (x, y), the radius of the rounded corner is ‘radius’, and the color is ‘color’

Function prototype:

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

Function parameters:

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

Example:

#include <M5Stack.h>

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

void loop() {}

drawCircle()

Function:

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

Function prototype:

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

Parameter:

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

Example:

#include <M5Stack.h>

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

Function prototype:

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

Parameter:

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

Example:

#include <M5Stack.h>

void setup() {
  M5.begin();   //Initialize M5Stack
  M5.Power.begin();
  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 elliptical line frame with width and height of rx, ry at (x, y)

Function prototype:

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

Parameter:

Parameter Type Description
x0 int16_t Center of ellipse X Axis
y0 int16_t Center of ellipse Y Axis
rx int32_t The width (pixels) of the ellipse
ry int32_t The height of the ellipse (pixels)
color uint16_t The color of the ellipse

Example:

#include <M5Stack.h>

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

Function prototype:

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

Parameter:

Parameter Type Description
x0 int16_t Center of ellipse X Axis
y0 int16_t Center of ellipse Y Axis
rx int32_t The width (pixels) of the ellipse
ry int32_t The height of the ellipse (pixels)
color uint16_t The color of the ellipse

Example:

#include <M5Stack.h>

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

void loop() {}

drawTriangle()

Function:

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

Function prototype:

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

Function parameters:

Parameter Description Type
x* int32_t The x Axis of Vertex X
y* int32_t The y Axis of Vertex X
color uint32_t Triangle color

Example:

#include <M5Stack.h>

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

Function prototype:

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

Function parameters:

Parameter Description Type
x* int32_t The x Axis of Vertex X
y* int32_t The y Axis of Vertex X
color uint32_t Triangle color

Example:

#include <M5Stack.h>

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

Function prototype:

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

Function parameters

Parameter Type Description
x int16_t Axis X
y int16_t Axis Y
bitmap const uint8_t Image shown
w int16_t Width (pixels)
h int16_t Height (pixels)
color uint16_t Color

Example:

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

drawBitmap()

Function:

Draw bitmap

Function prototype:

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 parameters

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

Pay attention:
1.The color code is represented by a total of 16 bits: 5 bits for red, 6 bits for green, and 5 bits for blue at the top

Example:

See example sketch:M5Stack->games->Tetris

drawBmpFile()

Function:

Read the bitmap from the file and draw it

Function prototype:

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

Function parameters

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

Pay attention:
1. It may not be expandable 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 <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 image->.c file, you can use it to convert some pictures, and use the above API to draw the image to the screen bin2code.py

drawJpg()

Function:

Read picture data in JPEG format from memory and draw it

Function prototype:

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 parameters

Parameter Type Description
jpg_data uint8_t * Data top
jpg_len size_t Data length
x uint16_t Axis X
y uint16_t Axis 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 <M5Stack.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 M5Stack
  M5.Power.begin();
  M5.Lcd.drawJpg(tetris_img, 34215);    //Read a jpeg file named tetris_img from memory
}
void loop(){
}

drawJpgFile()

Function:

Read JPEG data from file stream and draw it

Function prototype:

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 parameters

Parameter Type Description
fs fs::FS File Stream
path const char * File path
x uint16_t Axis X
y uint16_t Axis Y
maxWidth uint16_t Max Width (Pixel)
maxHeight uint16_t Max Height (Pixel)
offX uint16_t OffsetX (Pixel)
offY uint16_t OffsetY (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:

Show a bar showing progress

Function prototype:

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

Function parameters

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

Pay attention:
1. Progress Bar will be displayed in blue

Example:

#include <M5Stack.h>

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

void loop() {
}

qrcode()

Function:

Create a QR code

Function prototype:

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 parameters

Parameter Type Description
val string / String& The string to embed the QR
x uint16_t Axis X
y uint16_t Axis 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 <M5Stack.h>

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

void loop() {
}

Sprite

fillSprite()

Function:

Fill the Sprite with the specified color

Function prototype:

void fillSprite(uint32_t color)

Function parameters:

Parameter Type Description
color int32_t filled color

Example:

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

void setup() {
  M5.begin();  //Initialize M5Stack
  M5.Power.begin();
  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 the screen (0,0) and set white as the penetrating color
}

void loop() {}

pushSprite()

Function:

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

Function prototype:

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

Function parameters:

Parameter Type Description
x int32_t X Axis
y int32_t Y Axis
transparent int16_t Through color (optional)

Example:

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

void setup() {
  M5.begin();  //Initialize M5Stack
  M5.Power.begin();
  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);    //把画布推送到屏幕(0,0)处并设置绿色为穿透色
}

void loop() {}

createSprite()

Function:

Creates a canvas with the specified width and height

Function prototype:

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

Function parameters:

Parameter Type Description
x int16_t XAxis
y int16_t YAxis
frames uint8_t Deep color [1~2, optional]

Example:

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

void setup() {
  M5.begin();  //Initialize M5Stack
  M5.Power.begin();
  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 the screen (0,0) and set white as the penetrating color
  M5.Lcd.print(img.height());    //Print the height of the canvas    
}

void loop() {}

height()

Function:

Return the Height of the Sprite

Example:

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

void setup() {
  M5.begin();  //Initialize M5Stack
  M5.Power.begin();
  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 the screen (0,0) and set white as the penetrating color
  M5.Lcd.print(img.height());    //Print the height of the canvas    
}

void loop() {}

deleteSprite()

Function:

Delete sprite from memory

Example:

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

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

void loop() {}

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

On This Page