1.83inch LCD Module Tutorial

The 1.83-inch LCD uses the GH1.25 8PIN interface. Please refer to the pin connection table according to different hardware (please connect according to the pin definition table. The color of the cable in the picture is for reference only, and the actual color shall prevail)

】Raspberry Pi hardware connection

The routines we provide are based on Raspberry Pi 4B, and the connection methods provided also correspond to the pins of Raspberry Pi 4B. If you need to transplant the program, please connect according to the actual pins.

Correspondence of Raspberry Pi connection pins
LCD	Raspberry Pi
LCD	BCM2835 encoding	Board physical pin number
VCC	3.3V	3.3V
GND	GND	GND
DIN	MOSI	19
CLK	SCLK	twenty three
CS	CE0	twenty four
DC	25	twenty two
RST	27	13
BL	18	12

The connection diagram is as follows:

】STM32 hardware connection

The routines we provide are based on the XNUCLEO-F103RB development board. The connection methods provided also correspond to the pins of STM32F103RBT6. If you need to transplant the program, please connect according to the actual pins.

STM32F103RBT6 connection pin correspondence
LCD	STM32
VCC	3.3V
GND	GND
DIN	PA7
CLK	PA5
CS	PB6
DC	PA8
RST	PA9
BL	PC7

The connection diagram is as follows:

】Arduino hardware connection

The routines we provide are based on the ATMEGA328P development board. The connection methods provided also correspond to the pins of Arduino UNO R3. If you need to transplant the program, please connect according to the actual pins.

Correspondence of Arduino UNO connection pins
LCD	UNO
VCC	5V
GND	GND
DIN	D11
CLK	D13
CS	D10
DC	D7
RST	D8
BL	D9

The connection diagram is as follows:

】ESP32 hardware connection

The routines we provide are based on ESP32-S3-WROOM-1-N8R8. The connection methods provided also correspond to the pins of ESP32-S3. If you need to transplant the program, please connect according to the actual pins.

Correspondence of ESP32-S3 connection pins
LCD	ESP32
VCC	3V3
GND	GND
DIN	IO11
CLK	IO12
CS	IO10
DC	IO46
RST	IO3
BL	IO8

The connection diagram is as follows:

】Pico hardware connection

The routines we provide are based on Raspberry Pi Pico, and the connection methods provided also correspond to the pins of Raspberry Pi Pico. If you need to transplant the program, please connect according to the actual pins.

Correspondence of Pico connection pins
LCD	Pico
VCC	3.3V
GND	GND
DIN	GP11
CLK	GP10
CS	GP9
DC	GP8
RST	GP12
BL	GP13

Taking Pico as an example, the connection diagram is as follows:

】LCD and its controller

[] The built-in controller used in this LCD is NV3030B, which is a 240 x RGB x 320 pixel LCD controller. The pixels of this LCD itself are 240 (H) RGB x 280 (V). At the same time, due to the initialization control, It is initialized to both horizontal and vertical screens, so the internal RAM of the LCD is not fully used.

[] The LCD supports 8-bit, 9-bit, 16-bit and 18-bit input color formats per pixel, namely RGB444, RGB565, and RGB666. This routine uses the RGB565 color format, which is also a commonly used RGB format.

[] LCD uses a four-wire SPI communication interface, which can greatly save GPIO ports and the communication speed will be faster.

】letter of agreement

Note: The difference from the traditional SPI protocol is that since it only needs to be displayed, the data line (MISO) sent from the slave to the host is hidden.
RESX is reset, pulled low when the module is powered on, and is usually set to 1;
CSX is the slave chip select, and the chip will be enabled only when CS is low.
D/CX is the data/command control pin of the chip. When DC = 0, write commands and when DC = 1, write data.
SDA is the transmitted data, that is, RGB data;
SCL is the SPI communication clock.
For SPI communication, data has a transmission timing, that is, the combination of clock phase (CPHA) and clock polarity (CPOL):
The level of CPHA determines whether the serial synchronization clock is on the first clock transition edge or the second clock The data on the transition edge is collected. When CPHA = 0, the data is collected on the first transition edge.
The level of CPOL determines the idle state level of the serial synchronization clock. CPOL = 0 is low level.
As can be seen from the figure, data begins to be transmitted when the first falling edge of SCLK begins. 8 bits of data are transmitted in one clock cycle. SPI0 is used to transmit bit by bit, with the high bit in front and the low bit in the back.

Raspberry Pi usage tutorial

】Open SPI interface

PS: If you are using the Bullseye branch system, you need to change "apt-get" to "apt". The Bullseye branch system only supports Python3.

Open the Raspberry Pi terminal and enter the following commands to enter the configuration interface

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

Then restart the Raspberry Pi:

sudo reboot

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

】Installation library

If you use the bookworm system, you can only use the lgpio library. bcm2835 and wiringPi cannot be installed and used.

BCM2835

#Open the Raspberry Pi terminal and run the following commands
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 information, please refer to the official website: http://www.airspayce.com/mikem/bcm2835/

wiringPi

#Open the Raspberry Pi terminal and run the following commands
cd
sudo apt-get install wiringpi
#For Raspberry Pi systems after May 2019 (you don’t need to execute it if it is earlier than before), you may need to upgrade:
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 does not appear, there is an installation error.

#Bullseye branch system uses 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 does not appear, there is an installation error.

lgpio

#Open the Raspberry Pi terminal and run the following commands
wget https://github.com/joan2937/lg/archive/master.zip
unzip master.zip
cd lg-master
sudo make install

# For more information, please refer to the official website: https://github.com/gpiozero/lg

Install Python function library

#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 program

Open the Raspberry Pi terminal and execute:

sudo apt-get install unzip -y
sudo wget https://www.waveshare.net/w/upload/6/6b/LCD_1.83_Code.zip
sudo unzip ./LCD_1.83_Code.zip
cd LCD_1.83_Code/RaspberryPi/

】Run the program

Please execute the following commands under RaspberryPi, otherwise the directory will not be indexed;

C language

Recompile, the compilation process may take a few seconds

cdc
sudo make clean
sudo make -j

The test programs for 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

You can view the test programs for all screens, classified 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

】Underlying hardware interface

We have carried out the underlying encapsulation. Since the hardware platforms are different, the internal implementation is different. If you need to know the internal implementation, you can check it in the corresponding directory.

You can see many definitions in DEV_Config.c(.h), in the directory: RaspberryPi\c\lib\Config

C language uses 3 ways to drive: BCM2835 library, WiringPi library and Dev library
By default, the Dev library is used for operation. If you need to use BCM2835 or WiringPi to drive, you can open RaspberryPi\c\Makefile and modify lines 13-15 as follows:

type of data:

#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);
Notice:
1. Here are some GPIO processing before and after using the LCD screen.

GPIO reading and writing:

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

SPI write data:

void DEV_SPI_WriteByte(UBYTE Value);

】Upper layer application

For the screen, what if you need to draw pictures, display Chinese and English characters, display pictures, etc. These are all done by upper-layer applications. Many friends have asked about some graphics processing. We provide some basic functions here. The GUI can be found in the following directory, in the directory: RaspberryPi\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 a new image attribute: Create a new image attribute. This attribute includes the name, width, height, flip angle, and color of the image cache.

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

Select image cache: Select image cache. The purpose of selection is that you can create multiple image attributes. Multiple image caches can exist. You can select each image you create.

void Paint_SelectImage(UBYTE *image)
parameter:
 	image: The name of the image cache, which is actually a pointer to the first address of the image cache;

Image rotation: Set the rotation angle of the selected image. It is best to use it after Paint_SelectImage(). You can choose to rotate 0, 90, 180, 270

void Paint_SetRotate(UWORD Rotate)
parameter:
 	Rotate: Image selection angle, you can choose ROTATE_0, ROTATE_90, ROTATE_180, ROTATE_270 corresponding to 0, 90, 180, 270 degrees respectively.

[Explanation] Under different selection angles, the coordinates correspond to different starting pixel points. Here, we take 1.14 as an example. The four pictures are in order 0°, 90°, 180°, and 270°. For reference only

Image flip: Set the mirror flip of the selected image. You can choose not to mirror, about horizontal mirroring, about vertical mirroring, about about image center mirroring.

void Paint_SetMirroring(UBYTE mirror)
parameter:
 	mirror: The mirroring method of the image. You can choose MIRROR_NONE, MIRROR_HORIZONTAL, MIRROR_VERTICAL, and MIRROR_ORIGIN, which correspond to no mirroring, horizontal mirroring, vertical mirroring, and image center mirroring respectively.

Set the position and color of the point in the cache: This is the core function of the GUI, and process the position and color of the point in the cache.

void Paint_SetPixel(UWORD Xpoint, UWORD Ypoint, UWORD Color)
parameter:
 	Xpoint: point X position in the image cache
 	Ypoint: The Y position of the point in the image cache
 	Color: The color of the point display

Image cache fill color: Fill the image cache with a certain color, usually used to whiten the screen

void Paint_Clear(UWORD Color)
parameter:
 	Color: fill color

Fill color of part of the image cache window: fill a certain part of the image cache window with a certain color, generally used as a window whitening function, often used for time display, whitening the previous second

void Paint_ClearWindows(UWORD Xstart, UWORD Ystart, UWORD Xend, UWORD Yend, UWORD Color)
parameter:
 	Xstart: X starting point coordinate of the window
 	Ystart: Y starting point coordinate of the window
 	Xend: X end coordinate of the window
 	Yend: Y end coordinate of the window
 	Color: fill color

Draw points: In the image cache, draw points on (Xpoint, Ypoint). You can choose the color, point size, and point style.

void Paint_DrawPoint(UWORD Xpoint, UWORD Ypoint, UWORD Color, DOT_PIXEL Dot_Pixel, DOT_STYLE Dot_Style)
parameter:
 	Xpoint: X coordinate of point
 	Ypoint: Y coordinate of the point
 	Color: fill color
 	Dot_Pixel: Dot size, providing 8 default dot sizes.
 	 	 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 the dot, whether the size expansion method is to expand with the dot as the center or with the dot as the lower left corner and expand to the upper right
 	 	typedef enum {
 	 	   DOT_FILL_AROUND = 1,		
 	 	   DOT_FILL_RIGHTUP,
 	 	} DOT_STYLE;

Line drawing: In the image cache, 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)
parameter:
 	Xstart: X starting point coordinate of the line
 	Ystart: Y start coordinate of the line
 	Xend: X end coordinate of the line
 	Yend: Y end coordinate of the line
 	Color: fill color
 	Line_width: The width of the line, providing 8 default 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 connected with straight lines or dotted lines.
 	 	typedef enum {
 	 	 	 LINE_STYLE_SOLID = 0,
 	 	 	 LINE_STYLE_DOTTED,
 	 	} LINE_STYLE;

Draw a rectangle: In the image cache, draw a rectangle from (Xstart, Ystart) to (Xend, Yend). You can choose the color, line width, 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)
parameter:
 	Xstart: X starting point coordinate of the rectangle
 	Ystart: Y starting point coordinate of the rectangle
 	Xend: X end coordinate of the rectangle
 	Yend: Y end coordinate of the rectangle
 	Color: fill color
 	Line_width: The width of the four sides of the rectangle, providing 8 default 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 rectangle
 	 	typedef enum {
 	 	 	 DRAW_FILL_EMPTY = 0,
 	 	 	 DRAW_FILL_FULL,
 	 	} DRAW_FILL;

Draw a circle: In the image cache, take (X_Center Y_Center) as the center and draw a circle with a radius of Radius. You can choose the color, line width, 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)
parameter:
 	X_Center: X coordinate of the center of the circle
 	Y_Center: Y coordinate of the center of the circle
 	Radius: the radius of the circle
 	Color: fill color
 	Line_width: The width of the arc, providing 8 default 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 characters: In the image cache, (Xstart Ystart) is the left vertex, write an Ascii character, you can choose the Ascii code visual character font 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)
parameter:
 	Xstart: X coordinate of the left vertex of the character
 	Ystart: Y coordinate of the left vertex of the font
 	Ascii_Char: Ascii character
 	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

Write an English string: In the image cache, (Xstart Ystart) is the left vertex, write a string of English characters, you can choose the Ascii code visual character font library, font foreground color, font background color

void Paint_DrawString_EN(UWORD Xstart, UWORD Ystart, const char * pString, sFONT* Font, UWORD Color_Foreground, UWORD Color_Background)
parameter:
 	Xstart: X coordinate of the left vertex of the character
 	Ystart: Y coordinate of the left vertex of the font
 	pString: string, string is a pointer
 	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

Write a Chinese string: In the image cache, (Xstart Ystart) is the left vertex, write a string of Chinese characters, you can choose the GB2312 encoded character font, font foreground color, font background color

void Paint_DrawString_CN(UWORD Xstart, UWORD Ystart, const char * pString, cFONT* font, UWORD Color_Foreground, UWORD Color_Background)
parameter:
 	Xstart: X coordinate of the left vertex of the character
 	Ystart: Y coordinate of the left vertex of the font
 	pString: string, string is a pointer
 	Font: GB2312 encoded character font library, the following fonts are provided in the Fonts folder:
 	 	font12CN: ascii character font 11*21, Chinese font 16*21
 	 	font24CN: ascii character font 24*41, Chinese font 32*41
 	Color_Foreground: font color
 	Color_Background: background color

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

void Paint_DrawNum(UWORD Xpoint, UWORD Ypoint, int32_t Number, sFONT* Font, UWORD Color_Foreground, UWORD Color_Background)
parameter:
 	Xstart: X coordinate of the left vertex of the character
 	Ystart: Y coordinate of the left vertex of the font
 	Number: The displayed number is saved as a 32-bit int type, which can be displayed up to 2147483647.
 	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

Write numbers with decimals: In the image cache, (Xstart Ystart) is the left vertex. You can write a string of numbers with decimals. You can choose the Ascii code visual character font library, font foreground color, and font background color.

void Paint_DrawFloatNum(UWORD Xpoint, UWORD Ypoint, double Number, UBYTE Decimal_Point, sFONT* Font, UWORD Color_Foreground, UWORD Color_Background);
parameter:
 	Xstart: X coordinate of the left vertex of the character
 	Ystart: Y coordinate of the left vertex of the font
 	Number: The displayed number. Double type storage is used here, which is enough for common needs.
        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 cache, (Xstart Ystart) is the left vertex. It is displayed for a period of time. You can choose the Ascii code visual character font library, 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)
parameter:
 	Xstart: X coordinate of the left vertex of the character
 	Ystart: Y coordinate of the left vertex of the font
 	pTime: The displayed time. A time structure is defined here. Just pass the digits of hours, minutes and seconds to the parameters;
 	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

Read the local bmp image and write it to the cache

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: relative path of BMP image
 	Xstart: X coordinate of the left vertex of the image, generally passed as 0 by default
 	Ystart: Y coordinate of the left vertex of the image, generally passed as 0 by default

】Python interface (for Raspberry Pi)

Works with python and python3

For python, its call is not as complicated as C

Raspberry Pi: RaspberryPi\python\lib\

lcdconfig.py

Module initialization and exit processing:

def module_init()
def module_exit()
 Notice:
 1. Here are some GPIO treatments before and after using the LCD screen.
2. The module_init() function will be automatically called in the init() initialization program of the LCD screen, but module_exit() needs to be called by itself.

GPIO reading and writing:

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

SPI write data:

def spi_writebyte(data)

xxx_LCD_test.py (xxx represents 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 in the linux command mode as follows:

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 it in the linux command mode as follows:

sudo python3 0inch96_LCD_test.py

About rotation settings

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

im_r= image1.rotate(270)

The rotation effect, taking 1.14 as an example, is 0°, 90°, 180°, 270° in order.

Drawing GUI

Since python has an image library pil official library link, it is very powerful. There is no need to write code from the logic layer like C. You can directly reference the image library for image processing. The following will take 1.54inch LCD as an example to use in the program. A brief description of

You need to use the image library and install the library

sudo apt-get install python3-pil installation library

Then import the library

from PIL import Image,ImageDraw,ImageFont

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

Define an image cache 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 image. Defined as "RGB", it means that it is an RGB888 color image. The second parameter is a tuple that defines the width and height of the image. The third parameter defines the default color of the cache. Define for "WHITE".

Create a drawing object based on image1, all drawing operations are on this object

draw = ImageDraw.Draw(image1)

draw line

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

The first parameter is a tuple of 4 elements, with (20, 10) as the starting point and (70, 60) as the ending point, draw a straight line, fill="RED" means the line is red, width=1 means Line width is 1 pixel.

picture frame

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

The first parameter is a tuple of 4 elements, (20, 10) is the coordinate value of the upper left corner of the rectangle, (70, 60) is the coordinate value of the lower right corner of the rectangle, fill="WHITE" means the interior is filled with black, outline="BLUE " means the outer border is blue.

draw a circle

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

Draw an inscribed circle within the square. The first parameter is a tuple of 4 elements. (150, 15) is the upper left corner vertex of the square, (190, 55) is the lower right corner vertex of the square, and specifies the level of the rectangular frame. The median line is an angle of 0 degrees, and the angle becomes larger clockwise. The second parameter indicates the starting angle, and the third parameter identifies the ending angle. fill = (0,255,0) indicates that the line is green

If it is not a square, what is drawn is an ellipse, which is actually the drawing of an arc.

In addition to arc, which can draw circles, there is also ellipse, which can draw solid circles.

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

The essence is to draw an ellipse. The first parameter specifies the circumscribed rectangle of the chord circle. fill = (0,255,0) means that the internal fill color is green. If the circumscribed matrix of the ellipse is a square, the ellipse is a circle.

write characters

Writing characters often requires writing characters of different sizes. You need to import the ImageFont module and instantiate it:

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

In order to have a better visual experience, free fonts from the Internet are used here. Other font files ending in ttf are also supported.

Note: Each font contains different characters; if some characters cannot be displayed, it is recommended to use them according to the encoding set used by the font.

You can use it directly when writing English characters. When writing Chinese, since the encoding is GB2312, you need to add a u in front:

draw.text((40, 50), 'WaveShare', fill = (128,255,128),font=Font2)
text= u"Weixue Electronics"
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 as Font2, and fill as the font color. You can directly let fill = "WHITE" because the regular color value has been defined. Well, of course you can also use fill = (128,255,128). The values in the brackets correspond to the three colors of RGB, so that you can accurately control the color you want. The second sentence shows Weixue Electronics, using Font3, and the font color is white.

Read local pictures

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

The parameter is the image path.

Other functions

Python's image library is very powerful. If you need to implement more functions, you can go to the official website to learn http://effbot.org/imagingbook pil. The official one is in English. If you feel it is not friendly to you, of course there are many in our country. Excellent blogs have explanations.

STM32 software description

Note: The routines were tested on the XNUCLEO-F103RB development board. If you need other models of STM32, you need to make sure the connected pins are correct.

】Run the program

Download the program in the data interface and unzip it. The STM32 program is located in ~/STM32.

Open STM32CubeIDE and select the folder as the workspace

After closing the information center page, import the project from the source code

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

Open main.c and you can see all the test programs. Remove the comments in front of the test programs on the corresponding screen and recompile.

After successful compilation, the burning file LCD_demo.elf will be generated in the Debug or Release directory under the source code directory. Use STM32CubeProgrammer to burn, load the burning file, and connect the device.

After the device is successfully connected, click Download

LCD_0in85_test() 0.85inch LCD test program

LCD_0in96_test() 0.96inch LCD test program

LCD_1in14_test() 1.14inch LCD test program

LCD_1in28_test() 1.28inch LCD test program

LCD_1in3_test() 1.3 inch LCD test program

LCD_1in47_test() 1.47 inch LCD test program

LCD_1in5_test() 1.5 inch LCD test program

LCD_1in54_test() 1.54inch LCD test program

LCD_1in8_test() 1.8inch LCD test program

LCD_1in83_test() 1.83inch LCD test program

LCD_2in_test() 2inch LCD test program

】Underlying hardware interface

type of data

#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);
Notice:
1. Here is the processing of some GPIO before and after using the LCD screen;
2. After using the DEV_Module_Exit function, the LCD display will be turned off;

GPIO read and write

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

SPI write data

void DEV_SPI_WRITE(UBYTE _dat);

】Upper layer application

Note: Due to the size of the internal RAM of STM32 and Arduino, the GUI is written directly into the RAM of the LCD.

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

Create a new image attribute: Create a new image attribute. This attribute includes the name, width, height, flip angle, and color of the image cache.

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

Set the screen clear function, usually directly call the LCD clear function

void Paint_SetClearFuntion(void (*Clear)(UWORD));
parameter:
 	Clear: Pointer to the screen clear function, used to quickly clear the screen to a certain color;

Set the picture pixel function, usually directly call the LCD's DrawPaint function

void Paint_SetDisplayFuntion(void (*Display)(UWORD,UWORD,UWORD));
parameter:
 	Display: Pointer to the picture pixel function, used to write data to the specified location in the LCD's internal RAM;

Select image cache: Select image cache. The purpose of selection is that you can create multiple image attributes. Multiple image caches can exist. You can select each image you create.

void Paint_SelectImage(UBYTE *image)
parameter:
 	image: The name of the image cache, which is actually a pointer to the first address of the image cache;

Image rotation: Set the rotation angle of the selected image. It is best to use it after Paint_SelectImage(). You can choose to rotate 0, 90, 180, 270

void Paint_SetRotate(UWORD Rotate)
parameter:
 	Rotate: Image selection angle, you can choose ROTATE_0, ROTATE_90, ROTATE_180, ROTATE_270 corresponding to 0, 90, 180, 270 degrees respectively.

Image flip: Set the mirror flip of the selected image. You can choose not to mirror, about horizontal mirroring, about vertical mirroring, about about image center mirroring.

void Paint_SetMirroring(UBYTE mirror)
parameter:
 	mirror: The mirroring method of the image. You can choose MIRROR_NONE, MIRROR_HORIZONTAL, MIRROR_VERTICAL, and MIRROR_ORIGIN, which correspond to no mirroring, horizontal mirroring, vertical mirroring, and image center mirroring respectively.

Set the position and color of the point in the cache: This is the core function of the GUI, and process the position and color of the point in the cache.

void Paint_SetPixel(UWORD Xpoint, UWORD Ypoint, UWORD Color)
parameter:
 	Xpoint: point X position in the image cache
 	Ypoint: The Y position of the point in the image cache
 	Color: The color of the point display

Image cache fill color: Fill the image cache with a certain color, usually used to whiten the screen

void Paint_Clear(UWORD Color)
parameter:
 	Color: fill color

void Paint_ClearWindows(UWORD Xstart, UWORD Ystart, UWORD Xend, UWORD Yend, UWORD Color)
parameter:
 	Xstart: X starting point coordinate of the window
 	Ystart: Y starting point coordinate of the window
 	Xend: X end coordinate of the window
 	Yend: Y end coordinate of the window
 	Color: fill color

Draw points: In the image cache, draw points on (Xpoint, Ypoint). You can choose the color, point size, and point style.

void Paint_DrawPoint(UWORD Xpoint, UWORD Ypoint, UWORD Color, DOT_PIXEL Dot_Pixel, DOT_STYLE Dot_Style)
parameter:
 	Xpoint: X coordinate of point
 	Ypoint: Y coordinate of the point
 	Color: fill color
 	Dot_Pixel: Dot size, providing 8 default dot sizes.
 	 	 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 the dot, whether the size expansion method is to expand with the dot as the center or with the dot as the lower left corner and expand to the upper right
 	 	typedef enum {
 	 	   DOT_FILL_AROUND = 1,		
 	 	   DOT_FILL_RIGHTUP,
 	 	} DOT_STYLE;

Line drawing: In the image cache, 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)
parameter:
 	Xstart: X starting point coordinate of the line
 	Ystart: Y start coordinate of the line
 	Xend: X end coordinate of the line
 	Yend: Y end coordinate of the line
 	Color: fill color
 	Line_width: The width of the line, providing 8 default 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 connected with straight lines or dotted lines.
 	 	typedef enum {
 	 	 	 LINE_STYLE_SOLID = 0,
 	 	 	 LINE_STYLE_DOTTED,
 	 	} LINE_STYLE;

Draw a rectangle: In the image cache, draw a rectangle from (Xstart, Ystart) to (Xend, Yend). You can choose the color, line width, 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)
parameter:
 	Xstart: X starting point coordinate of the rectangle
 	Ystart: Y starting point coordinate of the rectangle
 	Xend: X end coordinate of the rectangle
 	Yend: Y end coordinate of the rectangle
 	Color: fill color
 	Line_width: The width of the four sides of the rectangle, providing 8 default 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 rectangle
 	 	typedef enum {
 	 	 	 DRAW_FILL_EMPTY = 0,
 	 	 	 DRAW_FILL_FULL,
 	 	} DRAW_FILL;

void Paint_DrawCircle(UWORD X_Center, UWORD Y_Center, UWORD Radius, UWORD Color, DOT_PIXEL Line_width, DRAW_FILL Draw_Fill)
parameter:
 	X_Center: X coordinate of the center of the circle
 	Y_Center: Y coordinate of the center of the circle
 	Radius: the radius of the circle
 	Color: fill color
 	Line_width: The width of the arc, providing 8 default 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;

void Paint_DrawChar(UWORD Xstart, UWORD Ystart, const char Ascii_Char, sFONT* Font, UWORD Color_Foreground, UWORD Color_Background)
parameter:
 	Xstart: X coordinate of the left vertex of the character
 	Ystart: Y coordinate of the left vertex of the font
 	Ascii_Char: Ascii character
 	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

void Paint_DrawString_EN(UWORD Xstart, UWORD Ystart, const char * pString, sFONT* Font, UWORD Color_Foreground, UWORD Color_Background)
parameter:
 	Xstart: X coordinate of the left vertex of the character
 	Ystart: Y coordinate of the left vertex of the font
 	pString: string, string is a pointer
 	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

void Paint_DrawString_CN(UWORD Xstart, UWORD Ystart, const char * pString, cFONT* font, UWORD Color_Foreground, UWORD Color_Background)
parameter:
 	Xstart: X coordinate of the left vertex of the character
 	Ystart: Y coordinate of the left vertex of the font
 	pString: string, string is a pointer
 	Font: GB2312 encoded character font library, the following fonts are provided in the Fonts folder:
 	 	font12CN: ascii character font 11*21, Chinese font 16*21
 	 	font24CN: ascii character font 24*41, Chinese font 32*41
 	Color_Foreground: font color
 	Color_Background: background color

void Paint_DrawNum(UWORD Xpoint, UWORD Ypoint, int32_t Number, sFONT* Font, UWORD Color_Foreground, UWORD Color_Background)
parameter:
 	Xstart: X coordinate of the left vertex of the character
 	Ystart: Y coordinate of the left vertex of the font
 	Number: The displayed number is saved as a 32-bit int type, which can be displayed up to 2147483647.
 	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

void Paint_DrawFloatNum(UWORD Xpoint, UWORD Ypoint, double Number, UBYTE Decimal_Point, sFONT* Font, UWORD Color_Foreground, UWORD Color_Background);
parameter:
 	Xstart: X coordinate of the left vertex of the character
 	Ystart: Y coordinate of the left vertex of the font
 	Number: The displayed number. Double type storage is used here, which is enough for common needs.
        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

void Paint_DrawTime(UWORD Xstart, UWORD Ystart, PAINT_TIME *pTime, sFONT* Font, UWORD Color_Background, UWORD Color_Foreground)
parameter:
 	Xstart: X coordinate of the left vertex of the character
 	Ystart: Y coordinate of the left vertex of the font
 	pTime: The displayed time. A time structure is defined here. Just pass the digits of hours, minutes and seconds to the parameters;
 	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

Arduino Software Instructions

Note: The routines were tested on Arduino uno. If you need other models of Arduino, you need to make sure the connected pins are correct.

】arduino IDE installation tutorial

arduino IDE installation tutorial

】Run the program

Download the program in the data interface and unzip it. The Arduino program is located at ~/Arduino/LCD_1inch83.

Please select the corresponding program to open according to the LCD screen model 1.83

Open the program and select the development board model Arduino UNO

Select the corresponding COM port according to the actual situation

Then click compile and download

】Program description

Taking Arduino UNO to control a 1.83-inch LCD as an example, open the Arduino\LCD_1inch83 directory:

in:

LCD_1inch83.ino: Just open it with Arduino IDE;

LCD_Driver.cpp(.h): is the driver for the LCD screen;

DEV_Config.cpp(.h): It 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, fonts.h: font models for characters of different sizes;

image.cpp(.h): It is image data. This can convert any BMP image into a 16-bit true color image array through Img2Lcd (downloadable in the development materials).

The program is divided into bottom-layer hardware interface, middle-layer LCD driver, and upper-layer application;

】Underlying hardware interface

The hardware interface is defined in the two files DEV_Config.cpp (.h), and functions such as reading and writing pin levels, delays, 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 levels.

Read pin level

int DEV_Digital_Read(int pin)

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

delay

DEV_Delay_ms(unsigned int delaytime)

Millisecond level delay.

SPI output data

DEV_SPI_WRITE(unsigned char data)

The parameter is of char type, occupying 8 bits.

】Upper layer application

Note: Due to the size of the internal RAM of STM32 and Arduino, the GUI is written directly into the RAM of the LCD.

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

Create a new image attribute: Create a new image attribute. This attribute includes the name, width, height, flip angle, and color of the image cache.

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

Set the screen clear function, usually directly call the LCD clear function

void Paint_SetClearFuntion(void (*Clear)(UWORD));
parameter:
 	Clear: Pointer to the screen clear function, used to quickly clear the screen to a certain color;

Set the picture pixel function, usually directly call the LCD's DrawPaint function

void Paint_SetDisplayFuntion(void (*Display)(UWORD,UWORD,UWORD));
parameter:
 	Display: Pointer to the picture pixel function, used to write data to the specified location in the LCD's internal RAM;

Select image cache: Select image cache. The purpose of selection is that you can create multiple image attributes. Multiple image caches can exist. You can select each image you create.

void Paint_SelectImage(UBYTE *image)
parameter:
 	image: The name of the image cache, which is actually a pointer to the first address of the image cache;

Image rotation: Set the rotation angle of the selected image. It is best to use it after Paint_SelectImage(). You can choose to rotate 0, 90, 180, 270

void Paint_SetRotate(UWORD Rotate)
parameter:
 	Rotate: Image selection angle, you can choose ROTATE_0, ROTATE_90, ROTATE_180, ROTATE_270 corresponding to 0, 90, 180, 270 degrees respectively.

Image flip: Set the mirror flip of the selected image. You can choose not to mirror, about horizontal mirroring, about vertical mirroring, about about image center mirroring.

void Paint_SetMirroring(UBYTE mirror)
parameter:
 	mirror: The mirroring method of the image. You can choose MIRROR_NONE, MIRROR_HORIZONTAL, MIRROR_VERTICAL, and MIRROR_ORIGIN, which correspond to no mirroring, horizontal mirroring, vertical mirroring, and image center mirroring respectively.

Set the position and color of the point in the cache: This is the core function of the GUI, processing the position and color of the point in the cache;

void Paint_SetPixel(UWORD Xpoint, UWORD Ypoint, UWORD Color)
parameter:
 	Xpoint: point X position in the image cache
 	Ypoint: The Y position of the point in the image cache
 	Color: The color of the point display

Image cache fill color: Fill the image cache with a certain color, usually used to whiten the screen

void Paint_Clear(UWORD Color)
parameter:
 	Color: fill color

void Paint_ClearWindows(UWORD Xstart, UWORD Ystart, UWORD Xend, UWORD Yend, UWORD Color)
parameter:
 	Xstart: X starting point coordinate of the window
 	Ystart: Y starting point coordinate of the window
 	Xend: X end coordinate of the window
 	Yend: Y end coordinate of the window
 	Color: fill color

Draw points: draw points on (Xpoint, Ypoint), you can choose the color, point size, and point style

void Paint_DrawPoint(UWORD Xpoint, UWORD Ypoint, UWORD Color, DOT_PIXEL Dot_Pixel, DOT_STYLE Dot_Style)
parameter:
 	Xpoint: X coordinate of point
 	Ypoint: Y coordinate of the point
 	Color: fill color
 	Dot_Pixel: Dot size, providing 8 default dot sizes.
 	 	 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 the dot, whether the size expansion method is to expand with the dot as the center or with the dot as the lower left corner and expand to the upper right
 	 	typedef enum {
 	 	   DOT_FILL_AROUND = 1,		
 	 	   DOT_FILL_RIGHTUP,
 	 	} DOT_STYLE;

Line drawing: 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)
parameter:
 	Xstart: X starting point coordinate of the line
 	Ystart: Y start coordinate of the line
 	Xend: X end coordinate of the line
 	Yend: Y end coordinate of the line
 	Color: fill color
 	Line_width: The width of the line, providing 8 default 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 connected with straight lines or dotted lines.
 	 	typedef enum {
 	 	 	 LINE_STYLE_SOLID = 0,
 	 	 	 LINE_STYLE_DOTTED,
 	 	} LINE_STYLE;

Draw a rectangle: Draw a rectangle from (Xstart, Ystart) to (Xend, Yend). You can choose the color, line width, 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)
parameter:
 	Xstart: X starting point coordinate of the rectangle
 	Ystart: Y starting point coordinate of the rectangle
 	Xend: X end coordinate of the rectangle
 	Yend: Y end coordinate of the rectangle
 	Color: fill color
 	Line_width: The width of the four sides of the rectangle, providing 8 default 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 rectangle
 	 	typedef enum {
 	 	 	 DRAW_FILL_EMPTY = 0,
 	 	 	 DRAW_FILL_FULL,
 	 	} DRAW_FILL;

Draw a circle: With (X_Center Y_Center) as the center, draw a circle with a radius of Radius. You can choose the color, line width, 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)
parameter:
 	X_Center: X coordinate of the center of the circle
 	Y_Center: Y coordinate of the center of the circle
 	Radius: the radius of the circle
 	Color: fill color
 	Line_width: The width of the arc, providing 8 default 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 characters: (Xstart Ystart) is the left vertex, write an Ascii character, you can choose the Ascii code visual character font library, font foreground color, font background color

void Paint_DrawChar(UWORD Xstart, UWORD Ystart, const char Ascii_Char, sFONT* Font, UWORD Color_Foreground, UWORD Color_Background)
parameter:
 	Xstart: X coordinate of the left vertex of the character
 	Ystart: Y coordinate of the left vertex of the font
 	Ascii_Char: Ascii character
 	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

Write an English string: (Xstart Ystart) is the left vertex, write a string of English characters, you can choose the Ascii code visual character font library, font foreground color, font background color

void Paint_DrawString_EN(UWORD Xstart, UWORD Ystart, const char * pString, sFONT* Font, UWORD Color_Foreground, UWORD Color_Background)
parameter:
 	Xstart: X coordinate of the left vertex of the character
 	Ystart: Y coordinate of the left vertex of the font
 	pString: string, string is a pointer
 	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

Write a Chinese string: (Xstart Ystart) is the left vertex, write a string of Chinese characters, you can choose the GB2312 encoded character font, font foreground color, font background color

void Paint_DrawString_CN(UWORD Xstart, UWORD Ystart, const char * pString, cFONT* font, UWORD Color_Foreground, UWORD Color_Background)
parameter:
 	Xstart: X coordinate of the left vertex of the character
 	Ystart: Y coordinate of the left vertex of the font
 	pString: string, string is a pointer
 	Font: GB2312 encoded character font library, the following fonts are provided in the Fonts folder:
 	 	font12CN: ascii character font 11*21, Chinese font 16*21
 	 	font24CN: ascii character font 24*41, Chinese font 32*41
 	Color_Foreground: font color
 	Color_Background: background color

Write numbers: (Xstart Ystart) is the left vertex, write a string of numbers, you can choose Ascii code visual character font library, font foreground color, font background color

void Paint_DrawNum(UWORD Xpoint, UWORD Ypoint, int32_t Number, sFONT* Font, UWORD Color_Foreground, UWORD Color_Background)
parameter:
 	Xstart: X coordinate of the left vertex of the character
 	Ystart: Y coordinate of the left vertex of the font
 	Number: The displayed number is saved as a 32-bit int type, which can be displayed up to 2147483647.
 	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

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

void Paint_DrawFloatNum(UWORD Xpoint, UWORD Ypoint, double Number, UBYTE Decimal_Point, sFONT* Font, UWORD Color_Foreground, UWORD Color_Background);
parameter:
 	Xstart: X coordinate of the left vertex of the character
 	Ystart: Y coordinate of the left vertex of the font
 	Number: The number displayed, here it is saved in double type.
        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: (Xstart Ystart) is the left vertex, display for a period of time, you can choose the Ascii code visual character font library, font foreground color, font background color

void Paint_DrawTime(UWORD Xstart, UWORD Ystart, PAINT_TIME *pTime, sFONT* Font, UWORD Color_Background, UWORD Color_Foreground)
parameter:
 	Xstart: X coordinate of the left vertex of the character
 	Ystart: Y coordinate of the left vertex of the font
 	pTime: The displayed time. A time structure is defined here. Just pass the digits of hours, minutes and seconds to the parameters;
 	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 image: (Xstart Ystart) is the left vertex, display an image with a width of W_Image and a height of 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: X coordinate of the left vertex of the character
 	Ystart: Y coordinate of the left vertex of the font
 	W_Image: image width
 	H_Image: image height

Pico software description

Note: The routines were all tested on Raspberry Pi Pico. If you need other models of Raspberry Pi Pico, you need to make sure the connected pins are correct.

】Run the program

Download the program in the data interface and unzip it. The Pico program is located in ~/Pico.

Part C

Part C of the tutorial is operated on the Raspberry Pi. However, due to the multi-platform and portable features of cmake, it can also be successfully compiled on a PC. However, the operations are slightly different and you need to make your own judgment. To compile, please make sure it is in the ~/Pico/c directory:

cd Pico/c

Open main.c and select the corresponding module

sudo nano main.c

Create and enter the build directory, and add the SDK: where ../../pico-sdk is the directory of your SDK. If build exists, enter directly

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

Execute cmake to automatically generate Makefile files

cmake..

Execute make to generate an executable file. The first compilation takes a long time.

make -j

After compilation is completed, the uf2 file will be generated. Press and hold the button on the Pico board, connect the pico to the USB interface of the Raspberry Pi through the Micro USB cable, and then release the button. After connecting, the Raspberry Pi will automatically recognize a removable disk (RPI-RP2), and copy the main.uf2 file in the build folder to the recognized removable disk (RPI-RP2).

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

Python part

[] Press and hold the button on the Pico board, connect the pico to the USB interface of the computer through the Micro USB cable, and then release the button. After connecting, the computer will automatically recognize a removable disk (RPI-RP2)

[] Copy the pico_micropython_20220117.uf2 file in the python directory to the recognized removable disk (RPI-RP2)

[] Update Thonny IDE

sudo apt upgrade thonny

[] Open Thonny IDE (click on Raspberry logo -> Programming -> Thonny Python IDE)

Select Tools -> Options... -> Interpreter

Select MicroPython (Raspberry Pi Pico and ttyACM0 port

[] Open the python/RP2040-LCD-1.83.py file in Thonny IDE and run the current script (green triangle)

】Underlying hardware interface

You can see many definitions in DEV_Config.c(.h), in the directory: ~/Pico/c/lib/Config

type of data

#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);
Notice:
1. 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 layer application

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

Create a new image attribute: Create a new image attribute. This attribute includes the name, width, height, flip angle, and color of the image cache.

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

Select image cache: Select image cache. The purpose of selection is that you can create multiple image attributes. Multiple image caches can exist. You can select each image you create.

void Paint_SelectImage(UBYTE *image)
parameter:
 	image: The name of the image cache, which is actually a pointer to the first address of the image cache;

Image rotation: Set the rotation angle of the selected image. It is best to use it after Paint_SelectImage(). You can choose to rotate 0, 90, 180, 270

void Paint_SetRotate(UWORD Rotate)
parameter:
 	Rotate: Image selection angle, you can choose ROTATE_0, ROTATE_90, ROTATE_180, ROTATE_270 corresponding to 0, 90, 180, 270 degrees respectively.

Image flip: Set the mirror flip of the selected image. You can choose not to mirror, about horizontal mirroring, about vertical mirroring, about about image center mirroring.

void Paint_SetMirroring(UBYTE mirror)
parameter:
 	mirror: The mirroring method of the image. You can choose MIRROR_NONE, MIRROR_HORIZONTAL, MIRROR_VERTICAL, and MIRROR_ORIGIN, which correspond to no mirroring, horizontal mirroring, vertical mirroring, and image center mirroring respectively.

Set the position and color of the point in the cache: This is the core function of the GUI, and process the position and color of the point in the cache.

void Paint_SetPixel(UWORD Xpoint, UWORD Ypoint, UWORD Color)
parameter:
 	Xpoint: point X position in the image cache
 	Ypoint: The Y position of the point in the image cache
 	Color: The color of the point display

Image cache fill color: Fill the image cache with a certain color, usually used to whiten the screen

void Paint_Clear(UWORD Color)
parameter:
 	Color: fill color

void Paint_ClearWindows(UWORD Xstart, UWORD Ystart, UWORD Xend, UWORD Yend, UWORD Color)
parameter:
 	Xstart: X starting point coordinate of the window
 	Ystart: Y starting point coordinate of the window
 	Xend: X end coordinate of the window
 	Yend: Y end coordinate of the window
 	Color: fill color

Draw points: In the image cache, draw points on (Xpoint, Ypoint). You can choose the color, point size, and point style.

void Paint_DrawPoint(UWORD Xpoint, UWORD Ypoint, UWORD Color, DOT_PIXEL Dot_Pixel, DOT_STYLE Dot_Style)
parameter:
 	Xpoint: X coordinate of point
 	Ypoint: Y coordinate of the point
 	Color: fill color
 	Dot_Pixel: Dot size, providing 8 default dot sizes.
 	 	 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 the dot, whether the size expansion method is to expand with the dot as the center or with the dot as the lower left corner and expand to the upper right
 	 	typedef enum {
 	 	   DOT_FILL_AROUND = 1,		
 	 	   DOT_FILL_RIGHTUP,
 	 	} DOT_STYLE;

Line drawing: In the image cache, 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)
parameter:
 	Xstart: X starting point coordinate of the line
 	Ystart: Y start coordinate of the line
 	Xend: X end coordinate of the line
 	Yend: Y end coordinate of the line
 	Color: fill color
 	Line_width: The width of the line, providing 8 default 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 connected with straight lines or dotted lines.
 	 	typedef enum {
 	 	 	 LINE_STYLE_SOLID = 0,
 	 	 	 LINE_STYLE_DOTTED,
 	 	} LINE_STYLE;

Draw a rectangle: In the image cache, draw a rectangle from (Xstart, Ystart) to (Xend, Yend). You can choose the color, line width, 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)
parameter:
 	Xstart: X starting point coordinate of the rectangle
 	Ystart: Y starting point coordinate of the rectangle
 	Xend: X end coordinate of the rectangle
 	Yend: Y end coordinate of the rectangle
 	Color: fill color
 	Line_width: The width of the four sides of the rectangle, providing 8 default 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 rectangle
 	 	typedef enum {
 	 	 	 DRAW_FILL_EMPTY = 0,
 	 	 	 DRAW_FILL_FULL,
 	 	} DRAW_FILL;

void Paint_DrawCircle(UWORD X_Center, UWORD Y_Center, UWORD Radius, UWORD Color, DOT_PIXEL Line_width, DRAW_FILL Draw_Fill)
parameter:
 	X_Center: X coordinate of the center of the circle
 	Y_Center: Y coordinate of the center of the circle
 	Radius: the radius of the circle
 	Color: fill color
 	Line_width: The width of the arc, providing 8 default 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;

void Paint_DrawChar(UWORD Xstart, UWORD Ystart, const char Ascii_Char, sFONT* Font, UWORD Color_Foreground, UWORD Color_Background)
parameter:
 	Xstart: X coordinate of the left vertex of the character
 	Ystart: Y coordinate of the left vertex of the font
 	Ascii_Char: Ascii character
 	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

void Paint_DrawString_EN(UWORD Xstart, UWORD Ystart, const char * pString, sFONT* Font, UWORD Color_Foreground, UWORD Color_Background)
parameter:
 	Xstart: X coordinate of the left vertex of the character
 	Ystart: Y coordinate of the left vertex of the font
 	pString: string, string is a pointer
 	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

void Paint_DrawString_CN(UWORD Xstart, UWORD Ystart, const char * pString, cFONT* font, UWORD Color_Foreground, UWORD Color_Background)
parameter:
 	Xstart: X coordinate of the left vertex of the character
 	Ystart: Y coordinate of the left vertex of the font
 	pString: string, string is a pointer
 	Font: GB2312 encoded character font library, the following fonts are provided in the Fonts folder:
 	 	font12CN: ascii character font 11*21, Chinese font 16*21
 	 	font24CN: ascii character font 24*41, Chinese font 32*41
 	Color_Foreground: font color
 	Color_Background: background color

void Paint_DrawNum(UWORD Xpoint, UWORD Ypoint, double Number, sFONT* Font, UWORD Digit,UWORD Color_Foreground, UWORD Color_Background);
parameter:
 	Xstart: X coordinate of the left vertex of the character
 	Ystart: Y coordinate of the left vertex of the font
 	Number: The displayed number is saved as a 32-bit int type, which can be displayed up to 2147483647.
 	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
        Digit: Display the number of decimal places
 	Color_Foreground: font color
 	Color_Background: background color

void Paint_DrawTime(UWORD Xstart, UWORD Ystart, PAINT_TIME *pTime, sFONT* Font, UWORD Color_Background, UWORD Color_Foreground)
parameter:
 	Xstart: X coordinate of the left vertex of the character
 	Ystart: Y coordinate of the left vertex of the font
 	pTime: The displayed time. A time structure is defined here. Just pass the digits of hours, minutes and seconds to the parameters;
 	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

ESP32 Software Instructions

Note: The routines were tested on ESP32-S3-WROOM-1-N8R8 . If you need other models of ESP32-S3, you need to make sure the connected pins are correct.

】arduino IDE installation tutorial

arduino IDE installation tutorial

】Run the program

Download the program in the data interface and unzip it. The ESP32 program is located at ~/ESP32/LCD_1in83.

Please select the corresponding program to open according to the LCD screen model.

You can view the test programs for all screen sizes, classified by size:

For example, 1.83inch LCD Module. Open the LCD_1inch83 folder and run the LCD_1inch83.ino file.

Open the program and select the development board model ESP32S3 Dev Module

Select the corresponding COM port

Then click compile and download

】Program description

Taking ESP32-S3 to control a 1.83-inch LCD as an example, open the ESP32\LCD_1inch83 directory:

in:

LCD_1inch83.ino: Just open it with Arduino IDE;

LCD_Driver.cpp(.h): is the driver for the LCD screen;

DEV_Config.cpp(.h): It 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, fonts.h: font models for characters of different sizes;

image.cpp(.h): It is image data. This can convert any BMP image into a 16-bit true color image array through Img2Lcd (downloadable in the development materials).

The program is divided into bottom-layer hardware interface, middle-layer LCD driver, and upper-layer application;

】Underlying hardware interface

The hardware interface is defined in the two files DEV_Config.cpp (.h), and functions such as reading and writing pin levels, delays, 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 levels.

Read pin level

int DEV_Digital_Read(int pin)

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

delay

DEV_Delay_ms(unsigned int delaytime)

Millisecond level delay.

SPI output data

DEV_SPI_WRITE(unsigned char data)

The parameter is of char type, occupying 8 bits.

】Upper layer application

Note: Due to the internal RAM size of ESP32 and arduino, the GUI is written directly into the RAM of the LCD.

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

Create a new image attribute: Create a new image attribute. This attribute includes the name, width, height, flip angle, and color of the image cache.

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

Set the screen clear function, usually directly call the LCD clear function

void Paint_SetClearFuntion(void (*Clear)(UWORD));
parameter:
 	Clear: Pointer to the screen clear function, used to quickly clear the screen to a certain color;

Set the picture pixel function, usually directly call the LCD's DrawPaint function

void Paint_SetDisplayFuntion(void (*Display)(UWORD,UWORD,UWORD));
parameter:
 	Display: Pointer to the picture pixel function, used to write data to the specified location in the LCD's internal RAM;

Select image cache: Select image cache. The purpose of selection is that you can create multiple image attributes. Multiple image caches can exist. You can select each image you create.

void Paint_SelectImage(UBYTE *image)
parameter:
 	image: The name of the image cache, which is actually a pointer to the first address of the image cache;

Image rotation: Set the rotation angle of the selected image. It is best to use it after Paint_SelectImage(). You can choose to rotate 0, 90, 180, 270

void Paint_SetRotate(UWORD Rotate)
parameter:
 	Rotate: Image selection angle, you can choose ROTATE_0, ROTATE_90, ROTATE_180, ROTATE_270 corresponding to 0, 90, 180, 270 degrees respectively.

Image flip: Set the mirror flip of the selected image. You can choose not to mirror, about horizontal mirroring, about vertical mirroring, about about image center mirroring.

void Paint_SetMirroring(UBYTE mirror)
parameter:
 	mirror: The mirroring method of the image. You can choose MIRROR_NONE, MIRROR_HORIZONTAL, MIRROR_VERTICAL, and MIRROR_ORIGIN, which correspond to no mirroring, horizontal mirroring, vertical mirroring, and image center mirroring respectively.

Set the position and color of the point in the cache: This is the core function of the GUI, and process the position and color of the point in the cache.

void Paint_SetPixel(UWORD Xpoint, UWORD Ypoint, UWORD Color)
parameter:
 	Xpoint: point X position in the image cache
 	Ypoint: The Y position of the point in the image cache
 	Color: The color of the point display

Image cache fill color: Fill the image cache with a certain color, usually used to whiten the screen

void Paint_Clear(UWORD Color)
parameter:
 	Color: fill color

void Paint_ClearWindows(UWORD Xstart, UWORD Ystart, UWORD Xend, UWORD Yend, UWORD Color)
parameter:
 	Xstart: X starting point coordinate of the window
 	Ystart: Y starting point coordinate of the window
 	Xend: X end coordinate of the window
 	Yend: Y end coordinate of the window
 	Color: fill color

Draw points: draw points on (Xpoint, Ypoint), you can choose the color, point size, and point style

void Paint_DrawPoint(UWORD Xpoint, UWORD Ypoint, UWORD Color, DOT_PIXEL Dot_Pixel, DOT_STYLE Dot_Style)
parameter:
 	Xpoint: X coordinate of point
 	Ypoint: Y coordinate of the point
 	Color: fill color
 	Dot_Pixel: Dot size, providing 8 default dot sizes.
 	 	 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 the dot, whether the size expansion method is to expand with the dot as the center or with the dot as the lower left corner and expand to the upper right
 	 	typedef enum {
 	 	   DOT_FILL_AROUND = 1,		
 	 	   DOT_FILL_RIGHTUP,
 	 	} DOT_STYLE;

Line drawing: 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)
parameter:
 	Xstart: X starting point coordinate of the line
 	Ystart: Y start coordinate of the line
 	Xend: X end coordinate of the line
 	Yend: Y end coordinate of the line
 	Color: fill color
 	Line_width: The width of the line, providing 8 default 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 connected with straight lines or dotted lines.
 	 	typedef enum {
 	 	 	 LINE_STYLE_SOLID = 0,
 	 	 	 LINE_STYLE_DOTTED,
 	 	} LINE_STYLE;

Draw a rectangle: Draw a rectangle from (Xstart, Ystart) to (Xend, Yend). You can choose the color, line width, 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)
parameter:
 	Xstart: X starting point coordinate of the rectangle
 	Ystart: Y starting point coordinate of the rectangle
 	Xend: X end coordinate of the rectangle
 	Yend: Y end coordinate of the rectangle
 	Color: fill color
 	Line_width: The width of the four sides of the rectangle, providing 8 default 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 rectangle
 	 	typedef enum {
 	 	 	 DRAW_FILL_EMPTY = 0,
 	 	 	 DRAW_FILL_FULL,
 	 	} DRAW_FILL;

Draw a circle: With (X_Center Y_Center) as the center, draw a circle with a radius of Radius. You can choose the color, line width, 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)
parameter:
 	X_Center: X coordinate of the center of the circle
 	Y_Center: Y coordinate of the center of the circle
 	Radius: the radius of the circle
 	Color: fill color
 	Line_width: The width of the arc, providing 8 default 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 characters: (Xstart Ystart) is the left vertex, write an Ascii character, you can choose the Ascii code visual character font library, font foreground color, font background color

void Paint_DrawChar(UWORD Xstart, UWORD Ystart, const char Ascii_Char, sFONT* Font, UWORD Color_Foreground, UWORD Color_Background)
parameter:
 	Xstart: X coordinate of the left vertex of the character
 	Ystart: Y coordinate of the left vertex of the font
 	Ascii_Char: Ascii character
 	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

void Paint_DrawString_EN(UWORD Xstart, UWORD Ystart, const char * pString, sFONT* Font, UWORD Color_Foreground, UWORD Color_Background)
parameter:
 	Xstart: X coordinate of the left vertex of the character
 	Ystart: Y coordinate of the left vertex of the font
 	pString: string, string is a pointer
 	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

Write a Chinese string: (Xstart Ystart) is the left vertex, write a string of Chinese characters, you can choose the GB2312 encoded character font, font foreground color, font background color

void Paint_DrawString_CN(UWORD Xstart, UWORD Ystart, const char * pString, cFONT* font, UWORD Color_Foreground, UWORD Color_Background)
parameter:
 	Xstart: X coordinate of the left vertex of the character
 	Ystart: Y coordinate of the left vertex of the font
 	pString: string, string is a pointer
 	Font: GB2312 encoded character font library, the following fonts are provided in the Fonts folder:
 	 	font12CN: ascii character font 11*21, Chinese font 16*21
 	 	font24CN: ascii character font 24*41, Chinese font 32*41
 	Color_Foreground: font color
 	Color_Background: background color

Write numbers: (Xstart Ystart) is the left vertex, write a string of numbers, you can choose Ascii code visual character font library, font foreground color, font background color

void Paint_DrawNum(UWORD Xpoint, UWORD Ypoint, int32_t Number, sFONT* Font, UWORD Color_Foreground, UWORD Color_Background)
parameter:
 	Xstart: X coordinate of the left vertex of the character
 	Ystart: Y coordinate of the left vertex of the font
 	Number: The displayed number is saved as a 32-bit int type, which can be displayed up to 2147483647.
 	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

void Paint_DrawFloatNum(UWORD Xpoint, UWORD Ypoint, double Number, UBYTE Decimal_Point, sFONT* Font, UWORD Color_Foreground, UWORD Color_Background);
parameter:
 	Xstart: X coordinate of the left vertex of the character
 	Ystart: Y coordinate of the left vertex of the font
 	Number: The number displayed, here it is saved in double type.
        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: (Xstart Ystart) is the left vertex, display for a period of time, you can choose the Ascii code visual character font library, font foreground color, font background color

void Paint_DrawTime(UWORD Xstart, UWORD Ystart, PAINT_TIME *pTime, sFONT* Font, UWORD Color_Background, UWORD Color_Foreground)
parameter:
 	Xstart: X coordinate of the left vertex of the character
 	Ystart: Y coordinate of the left vertex of the font
 	pTime: The displayed time. A time structure is defined here. Just pass the digits of hours, minutes and seconds to the parameters.
 	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 image: (Xstart Ystart) is the left vertex, display an image with a width of W_Image and a height of 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: X coordinate of the left vertex of the character
 	Ystart: Y coordinate of the left vertex of the font
 	W_Image: image width
 	H_Image: image height

】Material

document

Schematic diagram

NV3030B

program

Sample program

software

Chinese character modeling software

Image2Lcd image taking software

Picture taking tutorial

Font model taking tutorial

Question: What is the maximum brightness of the 1.83inch LCD Module?

3.3V 500cd/㎡

To：

Dear Customers, There may be a lag of several hours before we could process your order, depending on the time difference between your location and ours. Sincerely hoping your understanding!

Email(support)

services01@spotpear.com

TAG： Wiki Raspberry Pi Pico RP2040 C Environment Window Development Board 2.13Inch E-Paper VGA to LVDS Milk-V Duo S Extend Partition on SD Card or eMMC Luckfox ESP32-C6 ESP32 C3 Zero JETSON NANO RP204 0.85inch LCD Raspberry Pi RTC WatchDog HAT (B) Raspberry Pi Pico Raspberry Pi Pico Display 7inch-USB-Monitor user guide Core3566002000 Raspberry Pi 5 Case Spotpear Secondary Screen AI Board

1.83inch LCD Screen Display 240×280 NV3030B For Arduino /Raspberry Pi /ESP32S3 /Pico /STM32

Price： $7.9

Part Number： 1.83inch-LCD-Module

Brand： Spotpear

SKU： 0601041

TAG： Raspberry Pi LCD Raspberry Pi Pico ESP32 S3 2.1inch Round LCD CSI-to-HDMI First-level Agency R7FA4 PLUS B Development Board Based on R7FA4M1AB3CFM Compatible with Arduino UNO R4 WiFi 3D Display Transparent Screen Raspberry Pi 5 RTC NVIDIA Raspberry Pi 5 SSD Jetson Nano ADXL354C ESP32 S3 nRF24L01 Raspberry Pi 5 Case W5500 Ethernet Module Raspberry Pi 5 DSI Cable USB To CAN FD MPS2280D Raspberry Pi 5 PCIe M.2 NVMe Dual SSD Pi5 Double 2280 3.5 inch LCD