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 |
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() {
}
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() {
}
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() {
}
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() {
}
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() {
}
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() {
}
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(){
}
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(){
}
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(){
}
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(){
}
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() {}
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);
}
}
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() {
}
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() {
}
Function:
Unload font
Syntax:
void unloadFont()
Example:
#include <M5Core2.h>
void setup() {
M5.begin(); //Initialize M5Core2
M5.Lcd.unloadFont();
}
void loop() {
}
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() {
}
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(){
}
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
}
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() {}
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() {
}
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() {}
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() {
}
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(){
}
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() {}
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);
}
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(){
}
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() {
}
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(){
}
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(){
}
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(){
}
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(){
}
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() {}
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() {}
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(){
}
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(){
}
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(){
}
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() {}
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() {}
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() {}
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() {}
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() {}
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() {}
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() {}
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() {}
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
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
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);
}
We provide a script that can be used to convert jpg
image->.c
files, you can use it to convert some pictures, and use the above API to draw the image to the Screen
bin2code.py
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(){
}
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.
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() {
}
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() {
}
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() {}
The corresponding color depth should be set before creating the canvas
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() {}
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() {}
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() {}
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() {}
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