Template: 1.28inch Touch LCD Arduino use

From Waveshare Wiki
Revision as of 06:14, 2 September 2023 by Waveshare-admin (talk | contribs) (Text replacement - "https://www.waveshare.com/w/upload/" to "https://files.waveshare.com/upload/")
(diff) ← Older revision | Latest revision (diff) | Newer revision → (diff)
Jump to: navigation, search

Arduino User Guide

Arduino IDE Installation Tutorial

Hardware Connection

Module Pin Arduino uno
VCC 5V
GND GND
MISO 12
MOSI 11
SCLK 13
LCS_CS 10
LCS_DC 7
LCS_RST 8
LCS_BL 9
TP_SDA SDA
TP_SCL SCL
TP_INT 3
TP_RST 4

Run the Demo

Click to download the demo, and then decompress it. The demo is in 1.28-inch Touch LCD Arduino\LCD_1inch28_Touch.
1.28inch Touch LCD Arduino01.jpg
Insall Arduino IDE and then run LCD_1inch28_Touch.ino file.
Open the demo, and select the development board as Arduino UNO.
1.9inch LCD Module Arduino11.jpg
Select the corresponding COM port.
1.9inch LCD Module Arduino12.jpg
And then click compile and download.
1.28inch Touch LCD Arduino04.jpg

Demo Description

File Introduction

Open ..\1.28inch Touch LCD Arduino\LCD_1inch28_Touch directory:
1.28inch Touch LCD Arduino01.jpg
Among which:
LCD_1inch28_Touch.ino: Open it with Arduino IDE.
LCD_Driver.cpp(.h): the LCD driver demo.
Touch_Driver.cpp(.h): the driver demo for the touch screen.
DEV_Config.cpp(.h): the hardware interface definition, package the pin level of reading and writing, SPI data transmission, and the pin initialization.
font8.cpp, font12.cpp, font16.cpp, font20.cpp, font24.cpp, font24CN.cpp, fonts.h: different font sizes.
image.cpp(.h): image data, with Img2Lcd (download in #Resource), you can convert any BMP picture to 16-bit real RGB picture arrays.
The demo includes the bottom hardware interface, middle layer LCD driver, and the upper application.

Bottom Hardware Interface

In DEV_Config.cpp(.h), these two files define the hardware interface and package functions such as the reading and writing pin level, delay, SPI transmission, and I2C transmission.

Write Pin Level

void DEV_Digital_Write(int pin, int value)

The first parameter is a pin, the second one is the voltage level.

Read Pin Level

int DEV_Digital_Read(int pin)

The parameter is a pin and the return value is the voltage level of the read pin.

Delay

DEV_Delay_ms(unsigned int delaytime)

Millisecond level delay.

SPI Data Output

DEV_SPI_WRITE(unsigned char data)

The parameter is char, occupying 8 bits.

I2C Reading and Writing Data

void DEV_I2C_Write_Byte(UBYTE DevAddr, UBYTE RegAddr, UBYTE value)
UBYTE DEV_I2C_Read_Byte(UBYTE DevAddr, UBYTE RegAddr)
void DEV_I2C_Read_nByte(UBYTE DevAddr,UBYTE Cmd, UBYTE *data, UBYTE num)

Upper Application

For the screen, if you need to draw pictures, display Chinese and English characters, display pictures, etc., you can use the upper application to do, and we provide some basic functions here about some graphics processing in the directory STM32\STM32F103RB\User\GUI_DEV\GUI_Paint.c(.h)
Note: Because of the size of the internal RAM of STM32 and Arduino, the GUI is directly written to the RAM of the LCD.
LCD rpi GUI22.jpg
The character font on which GUI dependent is font*.cpp(h)file.
LCD rpi Font23.jpg

  • New image properties: Create a new image property, this property includes the image buffer name, width, height, flip Angle, and color.
void Paint_NewImage(UWORD Width, UWORD Height, UWORD Rotate, UWORD Color)
Parameters:
    Width: image buffer Width;
    Height: the Height of the image buffer;
    Rotate: Indicates the rotation Angle of an image
    Color: the initial Color of the image;
  • Set the clear screen function, usually call the clear function of LCD directly.
void Paint_SetClearFuntion(void (*Clear)(UWORD));
parameter:
    Clear: Pointer to the clear screen function, used to quickly clear the screen to a certain color;
  • Set the drawing pixel function.
void Paint_SetDisplayFuntion(void (*Display)(UWORD,UWORD,UWORD));
parameter:
    Display: Pointer to the pixel drawing function, which is used to write data to the specified location in the internal RAM of the LCD;
  • Select image buffer: the purpose of the selection is that you can create multiple image attributes, an image buffer can exist multiple, and you can select each image you create.
void Paint_SelectImage(UBYTE *image)
Parameters:
    Image: the name of the image cache, which is actually a pointer to the first address of the image buffer
  • Image Rotation: Set the selected image rotation Angle, preferably after Paint_SelectImage(), you can choose to rotate 0, 90, 180, 270.

Rotation-lcd.png

void Paint_SetRotate(UWORD Rotate)
Parameters:
    Rotate: ROTATE_0, ROTATE_90, ROTATE_180, and ROTATE_270 correspond to 0, 90, 180, and 270 degrees respectively;
  • Image mirror flip: Set the mirror flip of the selected image. You can choose no mirror, horizontal mirror, vertical mirror, or image center mirror.
void Paint_SetMirroring(UBYTE mirror)
Parameters:
    Mirror: indicates the image mirroring mode. MIRROR_NONE, MIRROR_HORIZONTAL, MIRROR_VERTICAL, MIRROR_ORIGIN correspond to no mirror, horizontal mirror, vertical mirror, and about image center mirror respectively.
  • Set points of display position and color in the buffer: here is the core GUI function, processing points display position and color in the buffer.
void Paint_SetPixel(UWORD Xpoint, UWORD Ypoint, UWORD Color)
Parameters:
    Xpoint: the X position of a point in the image buffer
    Ypoint: Y position of a point in the image buffer
    Color: indicates the Color of the dot
  • Image buffer fill color: Fills the image buffer with a color, usually used to flash the screen into blank.
void Paint_Clear(UWORD Color)
Parameters:
    Color: fill Color
  • Image buffer part of the window filling color: the image buffer part of the window filled with a certain color, generally as a window whitewashing function, often used for time display, whitewashing on a second.
void Paint_ClearWindows(UWORD Xstart, UWORD Ystart, UWORD Xend, UWORD Yend, UWORD Color)
Parameters:
    Xstart: the x-starting coordinate of the window
    Ystart: indicates the Y starting point of the window
    Xend: the x-end coordinate of the window
    Yend: indicates the y-end coordinate of the window
    Color: fill Color
  • Draw points: In the image buffer, draw points on (Xpoint, Ypoint), you can choose the color, the size of the point, and the style of the point.
void Paint_DrawPoint(UWORD Xpoint, UWORD Ypoint, UWORD Color, DOT_PIXEL Dot_Pixel, DOT_STYLE Dot_Style)
Parameters:
    Xpoint: indicates the X coordinate of a point
    Ypoint: indicates the Y coordinate of a point
    Color: fill Color
    Dot_Pixel: The size of the dot, providing a default of eight size points
        typedef enum {
            DOT_PIXEL_1X1   = 1 	// 1 x 1
            DOT_PIXEL_2X2   		// 2 X 2
            DOT_PIXEL_3X3   	 	// 3 X 3
            DOT_PIXEL_4X4   	 	// 4 X 4
            DOT_PIXEL_5X5   		// 5 X 5
            DOT_PIXEL_6X6   		// 6 X 6
            DOT_PIXEL_7X7  		// 7 X 7
            DOT_PIXEL_8X8  		// 8 X 8
        } DOT_PIXEL;
    Dot_Style: the size of a point that expands from the center of the point or from the bottom left corner of the point to the right and up
        typedef enum {
            DOT_FILL_AROUND  = 1,
            DOT_FILL_RIGHTUP,
        } DOT_STYLE;
  • Line drawing: In the image buffer, a line from (Xstart, Ystart) to (Xend, Yend), you can choose the color, line width, and line style.
void Paint_DrawLine(UWORD Xstart, UWORD Ystart, UWORD Xend, UWORD Yend, UWORD Color, LINE_STYLE Line_Style, LINE_STYLE Line_Style)
Parameters:
    Xstart: the x-starting coordinate of a line
    Ystart: indicates the Y starting point of a line
    Xend: x-terminus of a line
    Yend: the y-end coordinate of a line
    Color: fill Color
    Line_width: The width of the line, which provides a default of eight widths
        typedef enum {
            DOT_PIXEL_1X1   = 1 	// 1 x 1
            DOT_PIXEL_2X2  		// 2 X 2
            DOT_PIXEL_3X3  		// 3 X 3
            DOT_PIXEL_4X4  		// 4 X 4
            DOT_PIXEL_5X5  		// 5 X 5
            DOT_PIXEL_6X6  		// 6 X 6
            DOT_PIXEL_7X7  		// 7 X 7
            DOT_PIXEL_8X8  		// 8 X 8
        } DOT_PIXEL;
    Line_Style: line style. Select whether the lines are joined in a straight or dashed way
        typedef enum {
            LINE_STYLE_SOLID = 0,
            LINE_STYLE_DOTTED,
        } LINE_STYLE;
  • Draw a rectangle: In the image buffer, draw a rectangle from (Xstart, Ystart) to (Xend, Yend), you can choose the color, the width of the line, and whether to fill the inside of the rectangle.
void Paint_DrawRectangle(UWORD Xstart, UWORD Ystart, UWORD Xend, UWORD Yend, UWORD Color, DOT_PIXEL Line_width, DRAW_FILL Draw_Fill)
Parameters:
        Xstart: the starting X coordinate of the rectangle
        Ystart: indicates the Y starting point of the rectangle
        Xend: X terminus of the rectangle
        Yend: specifies the y-end coordinate of the rectangle
        Color: fill Color
        Line_width: The width of the four sides of a rectangle. Default eight widths are provided
            typedef enum {
                DOT_PIXEL_1X1   = 1      	// 1 x 1
                DOT_PIXEL_2X2   		// 2 X 2
                DOT_PIXEL_3X3   		// 3 X 3
                DOT_PIXEL_4X4   		// 4 X 4
                DOT_PIXEL_5X5   		// 5 X 5
                DOT_PIXEL_6X6   		// 6 X 6
                DOT_PIXEL_7X7   		// 7 X 7
                DOT_PIXEL_8X8   		// 8 X 8
            } DOT_PIXEL;
        Draw_Fill: Fill, whether to fill the inside of the rectangle
            typedef enum {
                DRAW_FILL_EMPTY = 0,
                DRAW_FILL_FULL,
            } DRAW_FILL;
  • Draw circle: In the image buffer, draw a circle of Radius with (X_Center Y_Center) as the center. You can choose the color, the width of the line, and whether to fill the inside of the circle.
void Paint_DrawCircle(UWORD X_Center, UWORD Y_Center, UWORD Radius, UWORD Color, DOT_PIXEL Line_width, DRAW_FILL Draw_Fill)
Parameters:
    X_Center: the x-coordinate of the center of a circle
    Y_Center: Y coordinate of the center of a circle
    Radius: indicates the Radius of a circle
    Color: fill Color
    Line_width: The width of the arc, with a default of 8 widths
        typedef enum {
            DOT_PIXEL_1X1  = 1	        // 1 x 1
            DOT_PIXEL_2X2   		// 2 X 2
            DOT_PIXEL_3X3  		// 3 X 3
            DOT_PIXEL_4X4  		// 4 X 4
            DOT_PIXEL_5X5   		// 5 X 5
            DOT_PIXEL_6X6   		// 6 X 6
            DOT_PIXEL_7X7   		// 7 X 7
            DOT_PIXEL_8X8   		// 8 X 8
        } DOT_PIXEL;
    Draw_Fill: fill, in whether to fill the inside of the circle
        typedef enum {
            DRAW_FILL_EMPTY = 0,
            DRAW_FILL_FULL,
        } DRAW_FILL;
  • Write Ascii character: In the image buffer, at (Xstart Ystart) as the left vertex, write an Ascii character, you can select Ascii visual character library, font foreground color, and font background color.
void Paint_DrawChar(UWORD Xstart, UWORD Ystart, const char Ascii_Char, sFONT* Font, UWORD Color_Foreground, UWORD Color_Background)
Parameters:
    Xstart: the x-coordinate of the left vertex of a character
    Ystart: the Y coordinate of the font's left vertex
    Ascii_Char: indicates the Ascii character
    Font: Ascii visual character library, in the Fonts folder, provides the following Fonts:
        Font8: 5*8 font
        Font12: 7*12 font
        Font16: 11*16 font
        Font20: 14*20 font
        Font24: 17*24 font
    Color_Foreground: Font color
    Color_Background: indicates the background color
  • Write English string: In the image buffer, use (Xstart Ystart) as the left vertex, write a string of English characters, can choose Ascii visual character library, font foreground color, and font background color.
void Paint_DrawString_EN(UWORD Xstart, UWORD Ystart, const char * pString, sFONT* Font, UWORD Color_Foreground, UWORD Color_Background)
Parameters:
    Xstart: the x-coordinate of the left vertex of a character
    Ystart: the Y coordinate of the font's left vertex
    PString: string, string is a pointer
    Font: Ascii visual character library, in the Fonts folder, provides the following Fonts:
        Font8: 5*8 font
        Font12: 7*12 font
        Font16: 11*16 font
        Font20: 14*20 font
        Font24: 17*24 font
     Color_Foreground: Font color
     Color_Background: indicates the background color
  • Write Chinese string: in the image buffer, use (Xstart Ystart) as the left vertex, and write a string of Chinese characters, you can choose GB2312 encoding character font, font foreground color, and font background color.
void Paint_DrawString_CN(UWORD Xstart, UWORD Ystart, const char * pString, cFONT* font, UWORD Color_Foreground, UWORD Color_Background)
Parameters:
    Xstart: the x-coordinate of the left vertex of a character
    Ystart: the Y coordinate of the font's left vertex
    PString: string, string is a pointer
    Font: GB2312 encoding character Font library, in the Fonts folder provides the following Fonts:
        Font12CN: ASCII font 11*21, Chinese font 16*21
        Font24CN: ASCII font24 *41, Chinese font 32*41
    Color_Foreground: Font color
    Color_Background: indicates the background color
  • Write numbers: In the image buffer, use (Xstart Ystart) as the left vertex, and write a string of numbers, you can choose Ascii visual character library, font foreground color, or font background color.
void Paint_DrawNum(UWORD Xpoint, UWORD Ypoint, double Nummber, sFONT* Font, UWORD Digit, UWORD Color_Foreground, UWORD Color_Background)
Parameters:
    Xpoint: the x-coordinate of the left vertex of a character
    Ypoint: the Y coordinate of the left vertex of the font
    Nummber: indicates the number displayed, which can be a decimal
    Digit: It's a decimal number
    Font: Ascii visual character library, in the Fonts folder, provides the following Fonts:
        Font8: 5*8 font
        Font12: 7*12 font
        Font16: 11*16 font
        Font20: 14*20 font
        Font24: 17*24 font
    Color_Foreground: Font color
    Color_Background: indicates the background color
  • Write numbers with decimals: At the left vertex of (Xstart Ystart), write a string of numbers with decimals. You can select Ascii Visual Character library font foreground color font background color.
void Paint_DrawFloatNum(UWORD Xpoint, UWORD Ypoint, double Nummber, UBYTE Decimal_Point, sFONT* Font, UWORD Color_Foreground, UWORD  Color_Background);
Parameters:
           Xstart: the x-coordinate of the left vertex of a character
 	   Ystart: the Y coordinate of the font's left vertex
 	   Nummber: The number displayed here is saved as a double
           Decimal_Point: Display the number after the decimal point
 	   Font: Ascii visual character font library, the following Fonts are provided in the Fonts folder
 	 	font8:5*8 font
 	 	font12:7*12 font
 	 	font16:11*16 font
 	 	font20:14*20 font
 	 	font24:17*24 font
 	Color_Foreground: font color
 	Color_Background: background color
  • Display time: in the image buffer, use (Xstart Ystart) as the left vertex, display time, you can choose Ascii visual character font, font foreground color, or font background color.
void Paint_DrawTime(UWORD Xstart, UWORD Ystart, PAINT_TIME *pTime, sFONT* Font, UWORD Color_Background, UWORD Color_Foreground)
Parameters:
    Xstart: the x-coordinate of the left vertex of a character
    Ystart: the Y coordinate of the font's left vertex
    PTime: display time, here defined as a good time structure, as long as the hour, minute, and second bits of data to the parameter;
    Font: Ascii visual character library, in the Fonts folder, provides the following Fonts:
        Font8: 5*8 font
        Font12: 7*12 font
        Font16: 11*16 font
        Font20: 14*20 font
        Font24: 17*24 font
    Color_Foreground: Font color
    Color_Background: indicates the background color
  • Display image: At (Xstart Ystart) is the left vertex, an Image of W Image width and H Image height is displayed.
void Paint_DrawImage(const unsigned char *image, UWORD xStart, UWORD yStart, UWORD W_Image, UWORD H_Image)
Parameters:
 	image: Image address, which points to the image information you want to display
 	Xstart: The left vertex X coordinate of the character
 	Ystart: The left vertex Y coordinate of the character
 	W_Image: image width
 	H_Image: image height