Introduction

This product provides Raspberry Pi, STM32, Arduino, ESP32 and Pico examples.

Specifications

• Operating voltage: 3.3V/5V (Please ensure that the supply voltage and logic voltage are consistent; otherwise, it may result in the device not working properly.)
• Interface: SPI
• LCD type: IPS
• Driver: NV3030B
• Resolution: 240(H)RGB x 280(V)
• Display size: 30.197 x 35.230 mm
• Pixel size: 0.126 × 0.126mm
• Dimension: 33 × 40 mm

Interface Description

The 1.83-inch LCD uses a GH1.25 8PIN interface. Please refer to the pin connection table according to the specific hardware. (Connect according to the pin definition table; the wire colors in the diagram are for reference only, actual colors may vary).

Raspberry Pi hardware connection

The demo we provide is based on Raspberry Pi 4B, and the connection method corresponds to the pins of the Raspberry Pi 4B. If there is a need to port the program, please connect according to the actual pinout.

As shown below:

STM32 hardware connection

The provided example is based on the XNUCLEO-F103RB development board, and the connection method corresponds to the pins of the STM32F103RBT6. If there is a need to port the demo, please connect according to the actual pinout.

The connection diagram is as follows (click to enlarge):

Arduino hardware connection

The provided example is based on the ATmega328P development board, and the connection method corresponds to the pins of the Arduino UNO R3. If there is a need to port the program, please connect according to the actual pinout.

The connection diagram is as follows (click to enlarge):

ESP32 hardware connection

The provided example is based on the ESP32-S3-WROOM-1-N8R8 development board, and the connection method corresponds to the pins of the ESP32-S3. If there is a need to port the demo, please connect according to the actual pinout.

The connection diagram is as follows (click to enlarge):

Pico hardware connection

The provided example is based on the Raspberry Pi Pico, and the connection method corresponds to the pins of the Raspberry Pi Pico. If there is a need to port the demo, please connect according to the actual pinout.

For example, the connection diagram for the Pico is as follows (click to enlarge):

LCD and the controller

This LCD utilizes an internal controller, the NV3030B, which is a 240 x RGB x 320 pixel LCD controller. However, the LCD itself has a resolution of 240 (H) RGB x 280 (V) pixels. Additionally, since the initialization control allows for both landscape and portrait orientations, not all of the LCD's internal RAM is fully utilized.
The LCD supports color formats for input per pixel: 8-bit, 9-bit, 16-bit and 18-bit. These formats include RGB444, RGB565 and RGB666 three color formats. This example program uses the RGB565 color format, which is commonly used.
Communication with the LCD is achieved via a four-wire SPI interface. This approach significantly reduces the GPIO usage and also ensures relatively fast communication speed.

Communication Protocol

Note: Different from the traditional SPI protocol, the data line from the slave to the master (MISO) is hidden since the device only has display requirement.

• RESX is the reset pin, when the module is powered on, pull it down, usually set to 1.
  
• CSX is slave chip select, when CS is low, the chip is enabled.
  
• D/CX is data/command control pin, when DC = 0, write command, when DC = 1, write data.
  
• SDA is the data pin for transmitting RGB data, it works as the MOSI pin of SPI interface;
  
• SCL is the communication clock of SPI.
  
• SPI communication has data transfer timing, which is combined by CPHA and CPOL.
  
• CPHA determines whether data is collected at the first clock edge or at the second clock edge of serial synchronous clock; when CPHL = 0, data is collected at the first clock edge.
  
• CPOL determines the level of the serial synchronous clock at idle state. When CPOL = 0, the level is Low.
  
• As can be seen from the figure, when SCLK begins to transmit data at the first falling edge, 8bit data is transmitted in one clock cycle, SPI0 is used, and the transmission is bit by bit, with the high in the front and the low in the back.

Working with Raspberry Pi

Enable SPI interface

• Open the Raspberry PI terminal, use the following command to enter the configuration interface.
  

sudo raspi-config
Choose Interfacing Options -> SPI -> Yes to enable SPI interface

And reboot Raspberry Pi.

sudo reboot

Please make sure the SPI is not occupied by other devices, you can check in the middle of /boot/config.txt.

Install Library

If you use bookworm system, only the lgpio library is available, bcm2835 and wiringPi libarary cannot be installed or used. Please note that the python library does not need to install, you can directly run the demo.

BCM2835

#Open the Raspberry Pi terminal and run the following command
wget http://www.airspayce.com/mikem/bcm2835/bcm2835-1.71.tar.gz
tar zxvf bcm2835-1.71.tar.gz 
cd bcm2835-1.71/
sudo ./configure && sudo make && sudo make check && sudo make install
# For more, you can refer to the official website at: http://www.airspayce.com/mikem/bcm2835/

WiringPi

#Open the Raspberry Pi terminal and run the following command
cd
sudo apt-get install wiringpi
#For Raspberry Pi systems after May 2019 (earlier than that can be executed without), an upgrade may be required:
wget https://project-downloads.drogon.net/wiringpi-latest.deb
sudo dpkg -i wiringpi-latest.deb
gpio -v
# Run gpio -v and version 2.52 will appear, if it doesn't it means there was an installation error

# Bullseye branch system using the following command:
git clone https://github.com/WiringPi/WiringPi
cd WiringPi
. /build
gpio -v
# Run gpio -v and version 2.70 will appear, if it doesn't it means there was an installation error

lgpio

wget https://github.com/joan2937/lg/archive/master.zip
unzip master.zip
cd lg-master
sudo make install 
#for more details, you can refer to https://github.com/gpiozero/lg

Python

#python2
sudo apt-get update
sudo apt-get install python-pip
sudo apt-get install python-pil
sudo apt-get install python-numpy
sudo pip install RPi.GPIO
sudo pip install spidev
#python3
sudo apt-get update
sudo apt-get install python3-pip
sudo apt-get install python3-pil
sudo apt-get install python3-numpy
sudo pip3 install RPi.GPIO
sudo pip3 install spidev

Download Examples

Open the Raspberry Pi terminal and run the following command:

sudo apt-get install unzip -y
sudo wget https://files.waveshare.com/wiki/1.83inch-LCD-Module/LCD_1.83_Code.zip
sudo unzip ./LCD_1.83_Code.zip
cd LCD_1.83_Code/RaspberryPi/

Run the demo codes

Please go into the RaspberryPi directory (demo codes) first and run the commands in the terminal, otherwise, the directory cannot be indexed.

C codes

• Re-compile the demo codes.
  

cd c
sudo make clean
sudo make -j 8

• The test demo of all screens can be called directly by entering the corresponding size:

sudo ./main Screen Size

Depending on the LCD, one of the following commands should be entered:

#0.85inch LCD Module
sudo ./main 0.85
#0.96inch LCD Module
sudo ./main 0.96
#1.14inch LCD Module
sudo ./main 1.14
#1.28inch LCD Module
sudo ./main 1.28
#1.3inch LCD Module
sudo ./main 1.3
#1.47inch LCD Module
sudo ./main 1.47
#1.5inch LCD Module
sudo ./main 1.5
#1.54inch LCD Module
sudo ./main 1.54
#1.8inch LCD Module
sudo ./main 1.8
#1.83inch LCD Module
sudo ./main 1.83
#2inch LCD Module
sudo ./main 2
#2.4inch LCD Module
sudo ./main 2.4

python

• Enter the Python program directory and run the command ls -l.
  

cd python/examples
ls -l

Test programs for all screens can be viewed, sorted by size:

0inch85_LCD_test.py     0.85inch LCD test program
0inch96_LCD_test.py     0.96inch LCD test program
1inch14_LCD_test.py	1.14inch LCD test program
1inch28_LCD_test.py	1.28inch LCD test program
1inch3_LCD_test.py	1.3inch LCD test program
1inch47_LCD_test.py	1.47inch LCD test program
1inch5_LCD_test.py	1.5inch LCD test program
1inch54_LCD_test.py	1.54inchLCD test program
1inch8_LCD_test.py	1.8inch LCD test program
1inch83_LCD_test.py	1.83inch LCD test program
2inch_LCD_test.py	2inch LCD test program
2inch4_LCD_test.py	2.4inch LCD test program

• Just run the program corresponding to the screen, the program supports python2/3.

# python2
sudo python 0inch85_LCD_test.py
sudo python 0inch96_LCD_test.py
sudo python 1inch14_LCD_test.py
sudo python 1inch28_LCD_test.py
sudo python 1inch3_LCD_test.py
sudo python 1inch47_LCD_test.py
sudo python 1inch5_LCD_test.py
sudo python 1inch54_LCD_test.py
sudo python 1inch8_LCD_test.py
sudo python 1inch83_LCD_test.py
sudo python 2inch_LCD_test.py
sudo python 2inch4_LCD_test.py
# python3
sudo python3 0inch85_LCD_test.py
sudo python3 0inch96_LCD_test.py
sudo python3 1inch14_LCD_test.py
sudo python3 1inch28_LCD_test.py
sudo python3 1inch3_LCD_test.py
sudo python3 1inch47_LCD_test.py
sudo python3 1inch5_LCD_test.py
sudo python3 1inch54_LCD_test.py
sudo python3 1inch8_LCD_test.py
sudo python3 1inch83_LCD_test.py
sudo python3 2inch_LCD_test.py
sudo python3 2inch4_LCD_test.py

The RaspberryPi series can share a set of programs, because they are all embedded systems, and the compatibility is relatively strong.
The program is divided into bottom-layer hardware interface, middle-layer LCD screen driver, and upper-layer application;

Hardware Interface

We have carried out the low-level encapsulation, for the reason the hardware platform and the internal implementation are different. If you need to know the internal implementation, you can open DEV_Config.c(.h) to see definitions, which in the directory RaspberryPi\c\lib\Config.

1. There are three ways for C to drive: BCM2835 library, WiringPi library and Dev library respectively
2. We use Dev library by default. If you need to change to BCM2835 or WiringPi libraries, please open RaspberryPi\c\Makefile and modify lines 13-15 as follows:  

• Data type:

#define UBYTE      uint8_t
#define UWORD      uint16_t
#define UDOUBLE    uint32_t

• Module initialization and exit processing.

void DEV_Module_Init(void);
void DEV_Module_Exit(void);
Note: 
Here are some GPIO processing before and after using the LCD screen.

• GPIO read and write:

void 	DEV_Digital_Write(UWORD Pin, UBYTE Value);
UBYTE 	DEV_Digital_Read(UWORD Pin);

• SPI write data:

void DEV_SPI_WriteByte(UBYTE Value);

Upper application

If you need to draw pictures, display Chinese and English characters and display pictures, we provide some basic functions here about some graphics processing in the directory RaspberryPi\c\lib\GUI\GUI_Paint.c(.h).

The fonts can be found in RaspberryPi\c\lib\Fonts directory.

• Create Image Properties: Create a new image property, this property includes the image buffer name, width, height, flip angle and color.
  

void Paint_NewImage(UBYTE *image, UWORD Width, UWORD Height, UWORD Rotate, UWORD Color)
Parameters:
      Image: the name of the image buffer, which is actually a pointer to the first address of the image buffer;
      Width: the width of the image buffer;
      Height: the height of the image buffer;
      Rotate: indicates the rotation angle of the image;
      Color: the initial color of the image;

• Select image buffer: The purpose of the selection is that you can create multiple image attributes, there can be multiple images buffer, you can select each image you create.
  

void Paint_SelectImage(UBYTE *image)
Parameters:
       Image: the name of the image buffer, which is actually a pointer to the first address of the image buffer;

• Image Rotation: Set the rotation Angle of the selected image, preferably after Paint_SelectImage(), you can choose to rotate 0, 90, 180 or 270 degrees.
  

void Paint_SetRotate(UWORD Rotate)
Parameters:
        Rotate: ROTATE_0, ROTATE_90, ROTATE_180, and ROTATE_270 correspond to 0, 90, 180 and 270 degrees.

[Note] With different selection angles, the starting pixel points corresponding to the coordinates vary. Here, take 1.14 as an example, four pictures are 0°, 90°, 180° and 270° in order. For reference only:

• 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 image center mirror respectively.

• Set points of the 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 the point in the image buffer
        Ypoint: the Y position of the 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

• The fill color of a certain window in the image buffer: the image buffer part of the window filled with a certain color, usually used to fresh the screen into blank, often used for time display, fresh the last second of the screen.

void Paint_ClearWindows(UWORD Xstart, UWORD Ystart, UWORD Xend, UWORD Yend, UWORD Color)
Parameters:
        Xstart: the x-starting coordinate of the window
        Ystart: the y-starting coordinate of the window
        Xend: the x-end coordinate of the window
        Yend: the y-end coordinate of the window
        Color: fill Color

• Draw point: In the image buffer, draw a point 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, the demo provides 8 size pointss by default.
              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 style 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;

• Draw line: In the image buffer, draw a line from (Xstart, Ystart) to (Xend, Yend), you can choose the color, the width and the style of the line.
  

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: the y-starting coordinate of the a line
        Xend: the x-end coordinate of a line
        Yend: the y-end coordinate of a line
        Color: fill Color
        Line_width: The width of the line, the demo provides 8 sizes of width by default.
              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 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: the starting Y coordinate of the rectangle
	Xend: the x-end coordinate of the rectangle
        Yend: the y-end coordinate of the rectangle
	Color: fill Color
	Line_width: The width of the four sides of a rectangle. And the demo provides 8 sizes of width by default.
		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 with Radius as the radius and (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 the circle
	Y_Center: the y-coordinate of the center of the 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, 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, use (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 left vertex of a character
	Ascii_Char: indicates the Ascii character
	Font: Ascii visual character library, in the Fonts folder the demo 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: background color

• Write English string: In the image buffer, use (Xstart Ystart) as the left vertex, write a string of English characters, you 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 left vertex of a character
	PString: string, string is a pointer
	Font: Ascii visual character library, in the Fonts folder the demo 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: background color

• Write Chinese string: in the image buffer, use (Xstart Ystart) as the left vertex, write a string of Chinese characters, you can choose GB2312 encoding 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 left vertex of a character
	PString: string, string is a pointer
  	Font: GB2312 encoding character Font library, in the Fonts folder the demo provides the following Fonts:
     		Font12CN: ASCII font 11*21, Chinese font 16*21
     		Font24CN: ASCII font 24*41, Chinese font 32*41
	Color_Foreground: font color
	Color_Background: background color

• Write numbers: In the image buffer, use (Xstart Ystart) as the left vertex, write a string of numbers, you can choose Ascii visual character library, font foreground color and font background color.

void Paint_DrawNum(UWORD Xpoint, UWORD Ypoint, int32_t Nummber, sFONT* Font, UWORD Color_Foreground, UWORD Color_Background)
Parameters:
        Xstart: the X coordinate of the left vertex of the character
 	Ystart: the Y coordinate of the left vertex of the character
 	Nummber: the number displayed, here stored in 32-bit int type and can be displayed up to 2147483647
 	Font: Ascii visual character library, in the Fonts folder the demo 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: background color

• Write numbers with decimals: In the image buffer, use (Xstart Ystart) as the left vertex, write a string of numbers with decimals, you can choose Ascii visual character library, font foreground color and 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 the character
 	Ystart: the Y coordinate of the left vertex of the character
 	Nummber: the number displayed, here stored in double type and enough for common needs
        Decimal_Point：displays the number after the decimal point
 	Font: Ascii visual character library, in the Fonts folder the demo 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: 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 and 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 the character
 	Ystart: the Y coordinate of the left vertex of the character
	PTime: display time, A time structure is defined here, as long as the hours, minutes and seconds are passed to the parameters;
	Font: Ascii visual character library, in the Fonts folder the demo 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: background color

• Read the local bmp image and write it to the buffer.

For Linux operating systems such as Raspberry Pi, you can read and write pictures. For Raspberry Pi, in the directory: RaspberryPi\c\lib\GUI\GUI_BMPfile.c(.h).

UBYTE GUI_ReadBmp(const char *path, UWORD Xstart, UWORD Ystart)
parameter:
       path: the relative path of the BMP image
       Xstart: the X coordinate of the left vertex of the image, generally 0 is passed by default
       Ystart: the Y coordinate of the left vertex of the image, generally 0 is passed by default

Python (for Raspberry Pi)

Works with python and python3.
For python, this calls are not as complicated as C.
Raspberry Pi: RaspberryPi\python\lib\

lcdconfig.py

• Module initialization and exit processing.

def module_init()
def module_exit()
Note:
1. Here are some GPIO processing before and after using the LCD screen.
2. The module_init() function is automatically called in the INIT () initializer on the LCD, but the module_exit() function needs to be called itself.

• GPIO read and write:

def  digital_write(pin, value)
def  digital_read(pin)

• SPI write data:

def spi_writebyte(data)

• xxx_LCD_test.py (xxx indicates the size, if it is a 0.96inch LCD, it is 0inch96_LCD_test.py, and so on)

python is in the following directory:
Raspberry Pi: RaspberryPi\python\examples\

If your python version is python2 and you need to run the 0.96inch LCD test program, re-execute it the following in linux command mode:

sudo python 0inch96_LCD_test.py

If your python version is python3 and you need to run the 0.96inch LCD test program, re-execute the following in linux command mode:

sudo python3 0inch96_LCD_test.py

About Rotation Settings

If you need to set the screen rotation in the python program, you can set it by the statement im_r= image1.rotate().

im_r= image1.rotate()

The rotation effect, take 1.14 as an example, the order is 0°, 90°, 180°, 270°:

GUI Functions

Python has an image library PIL official library link, it does not need to write code from the logical layer like C and can directly call the image library for image processing. The following will take a 1.54-inch LCD as an example, we provide a brief description of the demo.

• It needs to use the image library and install the library.

sudo apt-get install python3-pil  

And then import the library.

from PIL import Image,ImageDraw,ImageFont.

Among them, Image is the basic library, ImageDraw is the drawing function library, and ImageFont is the font library.

• Define an image buffer to facilitate drawing, writing and other functions on the picture.

image1 = Image.new("RGB", (disp.width, disp.height), "WHITE")

The first parameter defines the color depth of the picture, defined as "RGB" means RGB888 color image, the second parameter is a tuple, defines the width and height of the picture, the third parameter defines the default color of the buffer, defined as "WHITE".

• Create a drawing object based on Image1, on which all drawing operations will be performed.

draw = ImageDraw.Draw(image1)

• Draw a line.

draw.line([(20, 10),(70, 60)], fill = "RED",width = 1)

The first parameter is a 4-element tuple that draws a straight line with (20, 10) as the start point and (70, 60) as the end point. fill="RED" means that the line is red, and width=1 means that the line is 1 pixel wide.

• Draw a rectangle.

draw.rectangle([(20,10),(70,60)],fill = "WHITE",outline="BLUE")

The first parameter is a tuple of four elements. (20,10) is the coordinate value in the upper left corner of the rectangle, and (70,60) is the coordinate value in the lower right corner of the rectangle. "fill = WHITE" means white inside, outline="BLUE" means the color of the outline is blue.

• Draw a circle.

draw.arc((150,15,190,55),0, 360, fill =(0,255,0)

Draw an inscribed circle in the square, the first parameter is a tuple of 4 elements, with (150, 15) as the upper left corner vertex of the square, (190, 55) as the lower right corner vertex of the square, specifying the level median line of the rectangular frame is the angle of 0 degrees, and the angle becomes larger clockwise; the second parameter indicates the starting angle; the third parameter indicates the ending angle, and fill =(0,255,0) indicates that the color of the line is green.
If you are not using the square, what you draw will be an ellipse, which is a drawing of an arc.
Besides the arc function, you can also use the ellipse function for drawing a solid circle.

draw.ellipse((150,65,190,105), fill = (0,255,0))

The essence is the drawing of the ellipse. The first parameter specifies the enclosing rectangle. fill = (0,255,0)) means that the inner fill color is green. If its enclosing rectangle is a square, the ellipse is a circle.

• Write a character.

The ImageFont module needs to be imported and instantiated:

Font1 = ImageFont.truetype("../Font/Font01.ttf",25)
Font2 = ImageFont.truetype("../Font/Font01.ttf",35)
Font3 = ImageFont.truetype("../Font/Font02.ttf",32)

You can use the fonts of Windows or other fonts which is in ttf format.
Note: Each character library contains different characters; If some characters cannot be displayed, it is recommended that you refer to the encoding set to use.
To draw English characters, you can directly use the fonts; for Chinese characters, you need to add a symbol "u":

draw.text((40, 50), 'WaveShare', fill = (128,255,128),font=Font2)
text= u"微雪电子"
draw.text((74, 150),text, fill = "WHITE",font=Font3)

The first parameter is a tuple of 2 elements, with (40, 50) as the left vertex, the font is Font2, and the fill is the font color. You can directly make fill = "WHITE", because the regular color value is already defined, of course, you can also use fill = (128,255,128), the values in () correspond to the values of the three RGB colors so that you can precisely control the color you want. The second sentence shows 微雪电子, using Font3 and it font color is white.

• Read local image

image = Image.open('../pic/LCD_1inch28.jpg')

The parameter is the image path.

• Other functions.

For more information, you can refer to https://pillow.readthedocs.io/en/stable/.

STM32 Software Description

Note: The example demos have been tested on the XNUCLEO-F103RB development board. If you intend to use a different model of STM32, you will need to verify whether the pin connections are correct on your own.

Run the Demo

Download the demo, and then unzip it, the STM32 demo is at ~/STM32.
Open STM32CubeIDE and select a folder as your workspace, you can follow these steps:

After closing the Information Center page, import the project from the source code.

Take the 1.83inch LCD as an example, open the corresponding STM32 source code directory:

Open main.c, you can see all the test demos. Simply remove the comments in front of the test demo corresponding to the screen, then recompile it.

After successful compilation, a programming file named LCD_demo.elf will be generated in the Debug or Release directory of the source code directory. You can use STM32CubeProgrammer for flashing. Load the programming file and connect the device for flashing.

Click to download after successful connection:

Bottom Hardware Interface

• Data type:

#define UBYTE   uint8_t
#define UWORD   uint16_t
#define UDOUBLE uint32_t

• Module initialization and exit:

void DEV_Module_Init(void);
void DEV_Module_Exit(void);
Note:
1. Here are the GPIO handling processes before and after using the LCD screen:
2. The DEV_Module_Exit function turns off the LCD when used;

• GPIO reads & writes:

void 	DEV_Digital_Write(UWORD Pin, UBYTE Value);
UBYTE 	DEV_Digital_Read(UWORD Pin);

• SPI writes data

void    DEV_SPI_WRITE(UBYTE _dat);

Upper Layer Application

For the screen, tasks such as drawing, displaying Chinese and English characters, and displaying images are typically handled by upper-level applications. About graphic processing, here we provide some basic functionalities in GUI_Paint.c(.h).
You can find GUI functions in the following directory: STM32\User\GUI_DEV\GUI_Paint.c(.h).
Note: Due to the limited internal RAM size of STM32 and Arduino, GUI operations directly write to the LCD's RAM.

In the following directory are the character fonts that the GUI depends on, in the directory: STM32\User\Fonts.

• Create Image Properties: Create a new image property, including the name of the image buffer, width, height, rotation angle and color.

void Paint_NewImage(UWORD Width, UWORD Height, UWORD Rotate, UWORD Color);
Parameter:
 	Width: The width of the image buffer
 	Height: The height of the image buffer
 	Rotate: The rotation angle of the image
 	Color: The initial color of the image 

• Set up a clear screen function, usually by directly invoking the clear function of the LCD.

void Paint_SetClearFuntion(void (*Clear)(UWORD));
Parameter:
 	Clear: A pointer to the clear screen function, used for quickly clearing the screen to a specific color.

• Set up a function for drawing pixels, typically by directly calling the LCD's DrawPaint function.

void Paint_SetDisplayFuntion(void (*Display)(UWORD,UWORD,UWORD));
Parameter:
 	Display: A pointer to the function for drawing pixels, used to write data to specified positions in the LCD's internal RAM.

• Select Image Buffer: Selecting an image buffer allows you to create multiple image properties. Multiple image buffers can exist, and you can choose each image you create.

void Paint_SelectImage(UBYTE *image)
Parameter:
 	image: The name of the image buffer is essentially a pointer to the starting address of the image buffer.

• Image Rotation: Set the rotation angle for the selected image. It's best to use this function after calling Paint_SelectImage(). You can choose rotation angles of 0, 90, 180 or 270 degrees.

void Paint_SetRotate(UWORD Rotate)
Parameter:
 	Rotate: You can select the rotation angle for the image. Options include ROTATE_0, ROTATE_90, ROTATE_180, and ROTATE_270, corresponding to 0, 90, 180 and 270 degrees, respectively.

【Note】Under different rotation angles, the starting pixel points corresponding to the coordinates vary. Here, taking 1.14 as an example, four images are provided in order of 0°, 90°, 180° and 270°. This is for reference only.

• Image Mirroring: Set the mirror flip for the selected image. Options include no mirroring, horizontal mirroring, vertical mirroring and mirroring about the center of the image.

void Paint_SetMirroring(UBYTE mirror)
Parameter:
 	mirror: The mirroring options for the image include MIRROR_NONE, MIRROR_HORIZONTAL, MIRROR_VERTICAL, and MIRROR_ORIGIN, which respectively correspond to no mirroring, horizontal mirroring, vertical mirroring and mirroring about the center of the image.

• Set points of the 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: the 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

• The fill color of a certain window in the image buffer: the image buffer part of the window filled with a certain color, usually used to fresh the screen into blank, often used for time display, fresh the last second of the screen.

void Paint_ClearWindows(UWORD Xstart, UWORD Ystart, UWORD Xend, UWORD Yend, UWORD Color)
Parameters:
        Xstart: the x-starting coordinate of the window
        Ystart: the y-starting coordinate of the window
        Xend: the x-end coordinate of the window
        Yend: the y-end coordinate of the window
        Color: fill Color

• Draw point: In the image buffer, draw a point 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 the point.
        Ypoint: indicates the Y coordinate of the point.
        Color: fill Color
        Dot_Pixel: The size of the dot, the demo provides 8 size points by default.
              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 style 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;

• Draw line: In the image buffer, draw a line from (Xstart, Ystart) to (Xend, Yend), you can choose the color, the width and the style of the line.
  

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 the line
        Ystart: the y-starting coordinate of the line
        Xend: the x-end coordinate of a line
        Yend: the y-end coordinate of a line
        Color: fill Color
        Line_width: The width of the line, the demo provides 8 sizes of width by default.
              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: the starting Y coordinate of the rectangle
	Xend: the x-end coordinate of the rectangle
        Yend: the y-end coordinate of the rectangle
	Color: fill Color
	Line_width: The width of the four sides of a rectangle. And the demo provides 8 sizes of width by default.
		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 with Radius as the radius and (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 the circle
	Y_Center: the y-coordinate of the center of the 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, 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, use (Xstart Ystart) as the left vertex, and 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 left vertex of a character
	Ascii_Char: indicates the Ascii character
	Font: Ascii visual character library, in the Fonts folder the demo 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: background color

• Write English string: In the image buffer, use (Xstart Ystart) as the left vertex, and write a string of English characters, you 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 left vertex of a character
	PString: string, string is a pointer
	Font: Ascii visual character library, in the Fonts folder the demo 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: 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 left vertex of a character
	PString: string, string is a pointer
  	Font: GB2312 encoding character Font library, in the Fonts folder the demo provides the following Fonts:
     		Font12CN: ASCII font 11*21, Chinese font 16*21
     		Font24CN: ASCII font 24*41, Chinese font 32*41
	Color_Foreground: font color
	Color_Background: background color

• Write numbers: In the image cache, use (Xstart Ystart) as the left vertex, write a string of numbers, you can choose Ascii visual character library, font foreground color and font background color.

void Paint_DrawNum(UWORD Xpoint, UWORD Ypoint, int32_t Nummber, sFONT* Font, UWORD Color_Foreground, UWORD Color_Background)
Parameters:
        Xstart: the X coordinate of the left vertex of the character
 	Ystart: the Y coordinate of the left vertex of the character
 	Nummber: the number displayed, here stored in 32-bit int type and can be displayed up to 2147483647
 	Font: Ascii visual character library, in the Fonts folder the demo 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: background color

• Write numbers with decimals: In the image cache, use (Xstart Ystart) as the left vertex, write a string of numbers with decimals, you can choose Ascii visual character library, font foreground color and 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 the character
 	Ystart: the Y coordinate of the left vertex of the character
 	Nummber: the number displayed, here stored in double type and enough for common needs
        Decimal_Point：displays the number after the decimal point
 	Font: Ascii visual character library, in the Fonts folder the demo 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: 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 and 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 left vertex of a character
	PTime: display time, a time structure is defined here, as long as the hours, minutes, and seconds are passed to the parameters;
	Font: Ascii visual character library, in the Fonts folder the demo 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: background color

Arduino Software Description

Note: The demos are all tested on Arduino uno. If you need other types of Arduino, you need to determine whether the connected pins are correct.

IDE Installation

Template: Arduino IDE Installation Steps

Run program

Download the demo on the #Resource or directly download the program, and then unzip it. The Arduino program is located at ~/Arduino/…

Please select the corresponding 1.83 demo according to the LCD screen model to open:

Open the demo and select the development board model Arduino UNO: 
Select the corresponding COM port:

Then click to compile and download.

Program Description

Document Introduction

Take Arduino UNO controlling a 1.83-inch LCD as an example, open the Arduino\LCD_1inch83 directory:

Of which:
LCD_1inch83.ino: open with Arduino IDE;
LCD_Driver.cpp(.h): is the driver of the LCD screen;
DEV_Config.cpp(.h): is the hardware interface definition, which encapsulates the read and write pin levels, SPI transmission data and pin initialization;
font8.cpp, font12.cpp, font16.cpp, font20.cpp, font24.cpp, font24CN.cpp and fonts.h: fonts for characters of different sizes;
image.cpp(.h): is the image data, which can convert any BMP image into a 16-bit true color image array through Img2Lcd (downloadable in the development data).
The program is divided into bottom-layer hardware interface, middle-layer LCD screen driver and upper-layer application.

Bottom Hardware Interface

The hardware interface is defined in the two files DEV_Config.cpp(.h), and functions such as read and write pin level, delay and SPI transmission are encapsulated.

• Write pin level:

void DEV_Digital_Write(int pin, int value)

The first parameter is the pin, and the second is the high and low level.

• Read pin level:

int DEV_Digital_Read(int pin)

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

• Delay:

DEV_Delay_ms(unsigned int delaytime)

millisecond level delay.

• SPI output data:

DEV_SPI_WRITE(unsigned char data)

The parameter is char type, occupying 8 bits.

The 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 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.

The fonts used by the GUI all depend on the font*.cpp(h) files under the same file.

• Create 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: the width of the image buffer;
    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 drawing pixel 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, there can be multiple image buffers, 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 or 270 degrees.

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;

【Note】 Under different selection angles, the coordinates correspond to different starting pixel points, here take 1.14 as an example, four pictures, in the order of 0 °, 90 °, 180 ° and 270 °. Just for reference:

• 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 the point in the image buffer
    Ypoint: the Y position of the 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_ClearWindows(UWORD Xstart, UWORD Ystart, UWORD Xend, UWORD Yend, UWORD Color)
Parameters:
    Xstart: the X starting coordinate of the window
    Ystart: the Y starting coordinate of the window
    Xend: the x-end coordinate of the window
    Yend: the y-end coordinate of the window
    Color: fill Color

• Draw point: In the image buffer, draw a point 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 style 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;

• Draw line: In the image buffer, draw 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: the Y starting point of a line
        Xend: the X-end coordinate 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 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: the Y starting coordinate of the rectangle
        Xend: the X-end coordinate of the rectangle
        Yend: 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 with Radius as the radius and (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: the 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, 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, use (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 left vertex of a character
        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: background color

• Write English string: In the image buffer, use (Xstart Ystart) as the left vertex, write a string of English characters, you 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 left vertex of a character
        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: background color

• Write Chinese string: in the image buffer, use (Xstart Ystart) as the left vertex, 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 left vertex of a character
        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 font 24*41, Chinese font 32*41
                Color_Foreground: font color
                Color_Background: background color

• Write numbers: In the image buffer, use (Xstart Ystart) as the left vertex, write a string of numbers, you can choose Ascii visual character library, font foreground color and font background color.

void Paint_DrawNum(UWORD Xpoint, UWORD Ypoint, int32_t Nummber, sFONT* Font, UWORD Color_Foreground, UWORD Color_Background)
Parameters:
        Xpoint: the X coordinate of the left vertex of the character
        Ypoint: the Y coordinate of the left vertex of the character
        Nummber: the number displayed, here stored in 32-bit int type and can be displayed up to 2147483647
        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: background color

• Write numbers with decimals: use (Xstart Ystart) as the left vertex, write a string of numbers with decimals, you can choose Ascii code visual character font, font foreground color and font background color

void Paint_DrawFloatNum(UWORD Xpoint, UWORD Ypoint, double Nummber, UBYTE Decimal_Point, sFONT* Font, UWORD Color_Foreground, UWORD Color_Background);
parameter:
         Xstart: the X coordinate of the left vertex of the character
         Ystart: the Y coordinate of the left vertex of the character
         Nummber: the displayed number, which is saved in double type here
         Decimal_Point: Displays the number of digits after the decimal point
         Font: Ascii code 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 and 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 left vertex of a character
        PTime: display time, here defined a time structure, as long as the hour, minute and second bits of data are passed to the parameters;
        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: background color

• Display image: use (Xstart Ystart) as the left vertex, display an image whose width is W_Image and height is H_Image;

void Paint_DrawImage(const unsigned char *image, UWORD xStart, UWORD yStart, UWORD W_Image, UWORD H_Image)
parameter:
       image: image address, pointing to the image information you want to display
       Xstart: the X coordinate of the left vertex of the character
       Ystart: the Y coordinate of the left vertex of the character
       W_Image: Image width
       H_Image: Image height

Pico Software Description

Note: The example demo has been tested on the Raspberry Pi Pico. If you intend to use a different model of Raspberry Pi Pico, you will need to verify whether the pin connections are correct on your own.

Run the Demo

Download the demo, unzip it and the pico demo is at ~/Pico.

C

Note that the C tutorials are designed for operation on the Raspberry Pi. While it's possible to compile them successfully on a PC due to CMake's multi-platform and portable nature, the operations might differ slightly. You'll need to make your judgments in such cases. To compile, make sure you are in the ~/Pico/c directory:

cd  Pico/c

Open main.c to select the corresponding module:

sudo nano main.c 

Create and enter the build directory, and add the SDK. If the build directory already exists, simply enter it.
The SDK directory ../../pico-sdk should be replaced with the actual path to your SDK directory.

mkdir build
cd build
export PICO_SDK_PATH=../../pico-sdk

Execute cmake to automatically generate a Makefile file:

cmake ..

Execute make to generate the executable file. The initial compilation might take a while.

make -j

Once the compilation is complete, a uf2 file will be generated.
Press and hold the button on the Pico board, then connect the Pico to the Raspberry Pi's USB port using a micro USB cable. Release the button after connecting.
Upon connection, the Raspberry Pi will automatically detect a removable disk labeled "RPI-RP2". Copy the main.uf2 file from the build directory to this removable disk (RPI-RP2).

cp main.uf2 /media/pi/RPI-RP2/

Python

1): Press and hold the button on the Pico board, then connect the Pico to your computer's USB port using a micro USB cable. Release the button after connecting. Once connected, your computer will automatically detect a removable disk labeled "RPI-RP2".
2): Copy the pico_micropython_20220117.uf2 file from the python directory to the recognized removable drive (RPI-RP2).

3): Update Thonny IDE:

 sudo apt upgrade thonny       

4): Open Thonny IDE (Click on Raspberry Pi logo -> Programming -> Thonny Python IDE).
Select Tools -> Options... -> Interpreter
Select MicroPython (Raspberry Pi Pico and ttyACM0 port:

5): Open the python/RP2040-LCD-1.83.py file on Thonny IDE: Then just run the current script (the little green triangle).

Low-level Hardware Interface

We have encapsulated the low-level functionalities. However, since hardware platforms vary, the internal implementations differ accordingly. If you need to understand the internal implementation, you can refer to the corresponding directory for details.
You can see many definitions in DEV_Config.c(.h) in the directory: ~/Pico/c/lib/Config:

• Data type:

#define UBYTE   uint8_t
#define UWORD   uint16_t
#define UDOUBLE uint32_t

• Module initialization and exit:

void DEV_Module_Init(void);
void DEV_Module_Exit(void);
Note:
Here are the GPIO handling processes before and after using the LCD screen.

• GPIO read & write:

void 	DEV_Digital_Write(UWORD Pin, UBYTE Value);
UBYTE 	DEV_Digital_Read(UWORD Pin);

• SPI writes data:

void DEV_SPI_WriteByte(UBYTE Value);

Upper Application

For the screen, tasks such as drawing, displaying Chinese and English characters, and showing images are typically handled by upper-level applications. Many users have asked about graphic processing, and here we provide some basic functionalities. You can find GUI functions in the following directory: ~/c/lib/GUI/GUI_Paint.c(.h).

In the following directory are the character fonts that the GUI depends on, in the directory: RaspberryPi\c\lib\Fonts.

• Create Image Properties: Create a new set of properties for an image, including the name of the image buffer, width, height, rotation angle and color.

void Paint_NewImage(UWORD Width, UWORD Height, UWORD Rotate, UWORD Color);
Parameter:
        image: The name of the image buffer, actually a pointer to the first address of the image buffer;
 	Width: The width of the image buffer;
 	Height: The height of the image buffer;
 	Rotate: The rotation angle of the image;
 	Color: The initial color of the image;

• Select Image Buffer: the purpose of the selection is that you can create multiple image properties, there can be multiple image buffers, you can select each image you create.

void Paint_SelectImage(UBYTE *image)
Parameter:
 	image: The name of the image buffer is essentially a pointer to the starting address of the image buffer.

• Image Rotation: Set the rotation angle for the selected image. It's best to use this function after calling Paint_SelectImage(). You can choose rotation angles of 0, 90, 180 or 270 degrees.

void Paint_SetRotate(UWORD Rotate)
Parameter:
 	Rotate: You can select the rotation angle for the image. Options include ROTATE_0, ROTATE_90, ROTATE_180, and ROTATE_270, corresponding to 0, 90, 180 and 270 degrees, respectively.

【Note】Under different rotation angles, the starting pixel points corresponding to the coordinates vary. Here, taking 1.14 as an example, four images are provided in order of 0°, 90°, 180° and 270°. This is for reference only.

• Image Mirroring: Set the mirror flip for the selected image. Options include no mirroring, horizontal mirroring, vertical mirroring, and mirroring about the center of the image.

void Paint_SetMirroring(UBYTE mirror)
Parameter:
 	mirror: The mirroring options for the image include MIRROR_NONE, MIRROR_HORIZONTAL, MIRROR_VERTICAL and MIRROR_ORIGIN, which respectively correspond to no mirroring, horizontal mirroring, vertical mirroring and mirroring about the center of the image.

• Set points of the 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: the 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

• The fill color of a certain window in the image buffer: the image buffer part of the window filled with a certain color, usually used to fresh the screen into blank, often used for time display, fresh the last second of the screen.

void Paint_ClearWindows(UWORD Xstart, UWORD Ystart, UWORD Xend, UWORD Yend, UWORD Color)
Parameters:
        Xstart: the x-starting coordinate of the window
        Ystart: the y-starting coordinate of the window
        Xend: the x-end coordinate of the window
        Yend: the y-end coordinate of the window
        Color: fill Color

• Draw point: In the image buffer, draw a point 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, the demo provides 8 size pointss by default.
              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 style 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;

• Draw line: In the image buffer, draw a line from (Xstart, Ystart) to (Xend, Yend), you can choose the color, the width and the style of the line.
  

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 the line
        Ystart: the y-starting coordinate of the line
        Xend: the x-end coordinate of the line
        Yend: the y-end coordinate of the line
        Color: fill Color
        Line_width: The width of the line, the demo provides 8 sizes of width by default.
              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 rectangle: In the image buffer, draw a rectangle from (Xstart, Ystart) to (Xend, Yend), you can choose the color, the width of the line, 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: the starting Y coordinate of the rectangle
	Xend: the X-end coordinate of the rectangle
        Yend: the Y-end coordinate of the rectangle
	Color: fill Color
	Line_width: The width of the four sides of a rectangle. And the demo provides 8 sizes of width by default.
		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 with Radius as the radius and (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 the circle
	Y_Center: the y-coordinate of the center of the 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, 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, use (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 left vertex of a character
	Ascii_Char: indicates the Ascii character
	Font: Ascii visual character library, in the Fonts folder the demo 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: background color

• Write English string: In the image buffer, use (Xstart Ystart) as the left vertex, and write a string of English characters, you 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 left vertex of a character
	PString: string, string is a pointer
	Font: Ascii visual character library, in the Fonts folder the demo 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: 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 the 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 left vertex of a character
	PString: string, string is a pointer
  	Font: GB2312 encoding character Font library, in the Fonts folder the demo provides the following Fonts:
     		Font12CN: ASCII font 11*21, Chinese font 16*21
     		Font24CN: ASCII font 24*41, Chinese font 32*41
	Color_Foreground: font color
	Color_Background: 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 and 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 the character
	Ypoint: the Y coordinate of the left vertex of the character
	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 the demo 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: 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 and 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 the character
 	Ystart: the Y coordinate of the left vertex of the character
	PTime: display time, A time structure is defined here, as long as the hours, minutes, and seconds are passed to the parameters;
	Font: Ascii visual character library, in the Fonts folder the demo 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: background color

ESP Software Description

Note: The example demos were tested on the ESP32-S3-WROOM-1-N8R8. If using a different model of ESP32, ensure that the connected pins are correct.

Arduino IDE Installation Guide

• Arduino IDE installation

Run the demo

Download the demo, and extract it. The path of ESP32 demo is ~/ESP32/…

Please open the demo corresponding to the LCD model:

It is possible to view all the test demos for screen sizes, categorized by size:
For example, a 1.83-inch LCD Module. Open the LCD_1inch83 folder and run the LCD_1inch83.ino file.
Enter the program, and select "ESP32S3 Dev Module". 

Select the corresponding COM port: 

Demo Remarks

File Introduction

Take ESP32-S3 controlling 1.83inch LCD as an example, open the ESP32\LCD_1inch83 directory:

Among them:

• LCD_1inch83.ino: Open it using the Arduino IDE.
  
• LCD_Driver.cpp(.h): The driver demo for the LCD screen.
  
• DEV_Config.cpp(.h): Hardware interface definitions, encapsulating pin level reading/writing, SPI data transmission and pin initialization.
  
• font8.cpp, font12.cpp, font16.cpp, font20.cpp, font24.cpp, font24CN.cpp, fonts.h: Font modules for different character sizes.
  
• image.cpp(.h): Contains image data. Use Img2Lcd (available for download in the development resources) to convert any BMP image into a 16-bit true-color image array.
  

The program is divided into the hardware interface at the bottom, the LCD screen driver in the middle and the upper-layer applications.

Bottom Hardware Interface

The hardware interface is defined in the two files DEV_Config.cpp(.h) and encapsulates the functions to read and write pin levels, delays, SPI transfers, and so on.

Write Pin Level

void DEV_Digital_Write(int pin, int value)

The first parameter is the pin, and the second parameter is the level.

Read Pin Level

int DEV_Digital_Read(int pin)

The parameter is the pin, and the returned value is the level of the actual pin.

Delay

DEV_Delay_ms(unsigned int delaytime)

Millisecond level delay.

SPI Output Data

DEV_SPI_WRITE(unsigned char data)

The parameter is char type, 8 bits.

The Upper Application

For the screen, if you need to draw, display Chinese and English characters, display pictures, and so on, which is performed by the upper application. As most users have asked about the graphics processing, we provide some basic functions - GUI_Paint.c(.h).
Note: As the internal RAM size of the ESP32 and Arduino is limited, the GUI is used to write directly into the LCD's RAM. 
The fonts used by the GUI all depend on the font*.cpp(h) file under the same file.

• 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: the width of the image buffer;
    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, usually call the DrawPaint function of LCD directly.

void Paint_SetDisplayFuntion(void (*Display)(UWORD,UWORD,UWORD));
parameter:
    Display: Pointer to the drawing pixel 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, there can be multiple image buffers, you can select each image you create.

void Paint_SelectImage(UBYTE *image)
Parameters:
    Image: the name of the image cache, which is 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 or 270 degrees.

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;

【Note】Under different rotation angles, the starting pixel points corresponding to the coordinates vary. Here, taking 1.14 as an example, four images are provided in order of 0°, 90°, 180° and 270°. This is for reference only.

• 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: the 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: the Y starting coordinate of the window
    Xend: the x-end coordinate of the window
    Yend: the y-end coordinate of the window
    Color: fill color

• Draw point: In the image buffer, draw a point 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 style of a point that expands from the center of the point or the bottom left corner of the point to the right and up;
        typedef enum {
            DOT_FILL_AROUND  = 1,
            DOT_FILL_RIGHTUP,
        } DOT_STYLE;

• Draw line: In the image buffer, draw 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 the line
    Ystart: the Y starting coordinate of the line
    Xend: the X-end coordinate of the line
    Yend: the Y-end coordinate of the 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 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 X starting coordinate of the rectangle
        Ystart: the Y starting coordinate of the rectangle
        Xend: the X-end coordinate of the rectangle
        Yend: 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, in 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 with Radius as the radius and (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: the 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, 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, use (Xstart Ystart) as the left vertex, write an Ascii character, you can select the 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 left vertex of a character
    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: 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 left vertex of a character
    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: 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 left vertex of a character
    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 font 24*41, Chinese font 32*41
    Color_Foreground: font color
    Color_Background: 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 and font background color.

void Paint_DrawNum(UWORD Xpoint, UWORD Ypoint, int32_t Nummber, sFONT* Font, 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 a character 
    Nummber: the number displayed, here stored in 32-bit int type and can be displayed up to 2147483647
    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: background color

• Write Numbers with Decimals: In the image buffer, use (Xstart Ystart) as the left vertex, and write a string of numbers with Decimals, you can choose Ascii visual character library, font foreground color and font background color.

void Paint_DrawFloatNum(UWORD Xstart, UWORD Ystart, double Number, UBYTE Decimal_Point, sFONT* Font, UWORD Color_Foreground, UWORD Color_Background);
Parameters:
          Xstart: X-coordinate of the top-left vertex of the character
          Ystart: Y-coordinate of the top-left vertex of the character
          Number: The number to display, stored as a double type
          Decimal_Point: Number of digits after the decimal point to display
          Font: ASCII visual character library. Available fonts in the Fonts folder:
                font8: 5x8 font
                font12: 7x12 font
                font16: 11x16 font
                font20: 14x20 font
                font24: 17x24 font.
          Color_Foreground: Font color.
          Color_Background: Background color.

• Display time: in the image buffer, use (Xstart Ystart) as the left vertex. For display time, you can choose Ascii visual character font, font foreground color and 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 left vertex of a character
    PTime: display time, here defined as a 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: background color

• Display Image: Show an image with a width of W_Image and height of H_Image, starting at the (Xstart, Ystart) coordinates as the top-left vertex.

void Paint_DrawImage(const unsigned char *image, UWORD xStart, UWORD yStart, UWORD W_Image, UWORD H_Image)
Parameters:
          image: Address of the image, pointing to the image data to be displayed
          xStart: X coordinate of the top-left vertex of the image
          yStart: Y coordinate of the top-left vertex of the image
          W_Image: Width of the image
          H_Image: Height of the image

Resource

Drawing

• 1.83inch LCD Module 3D Drawing
• 1.83inch LCD Module 2D Drawing PDF

Document

• Schematic
• NV3030B

Demo

• Demo

Software

• Zimo221
• Image2Lcd
• Image Extraction Guide
• Ink Screen Font Library Tutorial

FAQ

Support

Monday-Friday (9:30-6:30) Saturday (9:30-5:30)

Mobile: +86  13434470212

Email: services01@spotpear.com