Lesson 1.1. LCD. Graphics



  • This lesson focuses on the integrated LCD display. We consider the main functions for working with graphics M5Stack.

    Step 1. Learn the codes of the colors in the 565 format in figure 1;

    alt text
    Figure 1. Codes the main color in hexadecimal

    Step 2. Learn the functions for work with display in list 2;

    List 2. Functions for working with built-in LCD display

    • M5.Lcd.setBrightness(uint8_t brightness); Set the screen brightness
    • M5.Lcd.drawPixel(int16_t x, int16_t y, uint16_t color); Paint the pixel located at the X and Y coordinates (relative to the upper left corner of the screen) to a color from 0 to 65535
    • M5.Lcd.drawLine(int16_t x0, int16_t y0, int16_t x1, int16_t y1, uint16_t color); Draw a line from the point X0 and Y0 to the point X1 and Y1 with a color from 0 to 65535
    • M5.Lcd.fillRect(int16_t x, int16_t y, int16_t w, int16_t h, uint16_t color); Draw a rectangle with the points X0 and Y0 to the point X1 and Y1 with width W, height H and color from 0 to 65535
    • M5.Lcd.fillScreen(uint16_t color); Paint the whole screen with color 0 to 65535
    • M5.Lcd.drawCircle(int16_t x0, int16_t y0, int16_t r, uint16_t color); Draw a circle with center at the point X0 and Y0, with radius R and color from 0 to 65535
    • M5.Lcd.drawCircleHelper(int16_t x0, int16_t y0, int16_t r, uint8_t cornername,uint16_t color); Draw a quarter circle with the center at the point X0 and Y0, with radius R, and a quarter C, and a color from 0 to 65535
    • M5.Lcd.fillCircle(int16_t x0, int16_t y0, int16_t r, uint16_t color); Draw a filled circle with center at the point X0 and Y0, with radius R and color from 0 to 65535
    • M5.Lcd.fillCircleHelper(int16_t x0, int16_t y0, int16_t r, uint8_t cornername,int16_t delta, uint16_t color); Draw a filled quarter circle with the center at the point X0 and Y0, with radius R, the fourth from 0 to 255 and color from 0 to 65535
    • M5.Lcd.drawTriangle(int16_t x0, int16_t y0, int16_t x1, int16_t y1, int16_t x2, int16_t y2, uint16_t color); Draw a triangle with vertices X0 and Y0, X1 and Y1, X2 and Y2 and the color from 0 to 65535
    • M5.Lcd.fillTriangle(int16_t x0, int16_t y0, int16_t x1, int16_t y1, int16_t x2, int16_t y2, uint16_t color); Draw a filled triangle with vertices X0 and Y0, X1 and Y1, X2 and Y2 and the color from 0 to 65535
    • M5.Lcd.drawRoundRect(int16_t x0, int16_t y0, int16_t w, int16_t h, int16_t radius, uint16_t color); Draw a rectangle with the points X0 and Y0 of width W, height H, radius of the rounded corners R and the color from 0 to 65535
    • M5.Lcd.fillRoundRect(int16_t x0, int16_t y0, int16_t w, int16_t h, int16_t radius, uint16_t color); Draw a filled rectangle with the points X0 and Y0 of width W, height H, radius of the rounded corners R and the color from 0 to 65535
    • M5.Lcd.drawBitmap(int16_t x, int16_t y, const uint8_t bitmap[], int16_t w, int16_t h, uint16_t color); Draw bitmap with points X0 and Y0, the bit array of brightness from 0 to 255, width W, height H and color from 0 to 65535
    • M5.Lcd.drawRGBBitmap(int16_t x, int16_t y, const uint16_t bitmap[], int16_t w, int16_t h); Draw a colored bitmap from the point X0 and Y0, an array of the color bit from 0 to 65536, width W, height H
    • M5.Lcd.drawChar(uint16_t x, uint16_t y, char c, uint16_t color, uint16_t bg, uint8_t size); to Draw a character with points X0 and Y0, with the character code C, color from 0 to 65535, background color, from 0 to 65535 in size from 0 to 256
    • M5.Lcd.setCursor(int x, int y) Set the location of the cursor to the coordinates X and Y
    • M5.Lcd.setTextColor(uint16_t color); to Set the text color from 0 to 65535
    • M5.Lcd.setTextColor(uint16_t color, uint16_t backgroundcolor); Set the color of the text from 0 to 65535, and the background color behind it 0 to 65535
    • M5.Lcd.setTextSize(uint8_t size); to Set the size of text from 0 to 255
    • M5.Lcd.setTextWrap(boolean w); Use the wrap text to true or false
    • M5.Lcd.printf(); Display the text on the screen

    Step 2. Create a new sketch in the Arduino IDE. On the File menu, select New (Fig. 2);

    alt text
    Figure 2. Create a new sketch

    Step 3. Draw on the screen shaded in different colors on the circle (Fig. 3).

    alt text
    Figure 3. The sketch

    Step 4. Click the Upload button (Fig. 4) in order to flash the device;

    alt text
    Figure 4. Download the firmware to the device

    Step 5. When the device firmware is completed, the device screen will display a circle of different colors (Fig. 5 - 5.2).

    alt text
    Figure 5. The orange circle

    alt text
    Figure 5.1. The green circle

    alt text
    Figure 5.2. Blue circle