1.83inch LCD Module

1.83inch LCD Module SPI; Rev1: 240×280 Rev2: 240×284

{{{name2}}}

{{{name3}}}

{{{name4}}}

{{{name5}}}

{{{name6}}}

Primary Attribute Category: {{{userDefinedInfo}}}: {{{userdefinedvalue}}} Brand: Waveshare

Website International: Website Chinese: 官网

Onboard Interfaces

Related Products

Overview

Introduction

This product provides Raspberry Pi, STM32, Arduino, ESP32 and Pico demos
Please distinguish the versions by the markings on the back. Those without markings are Rev1 versions, and those with Rev2 markings are Rev2 versions. Demos of different versions are not compatible

Specifications

• Operating voltage: 3.3V/5V (Please ensure that the supply voltage and logic voltage are consistent, otherwise, it may fail to function properly)
• Communication interface: SPI
• LCD type: IPS
• Controller chip: Rev1: NV3030B Rev2: ST7789P
• Resolution: Rev1: 240(H)RGB x 280(V) Rev2: 240(H)RGB x 284(V)
• Display size: Rev1: 30.197 x 35.230 mm Rev2: 29.52 x 34.93mm
• Pixel Pitch: 0.1258(H) x 0.1258(V) mm
• Product size: 33 × 40 mm

Pins

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

Raspberry Pi Hardware Connection

The demo we provide is based on Raspberry Pi 4B, and the connection method provided is also the corresponding pin of Raspberry Pi 4B. If you need to transplant the demo, please connect according to the actual pins.

Raspberry Pi connection pin correspondence

LCD	Raspberry Pi
	BCM2835 encoding	Board physical pin number
VCC	3.3V	3.3V
GND	GND	GND
DIN	MOSI	19
CLK	SCLK	23
CS	CE0	24
DC	25	22
RST	27	13
BL	18	12

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

STM32 Hardware Connection

The demo we provide is based on XNUCLEO-F103RB development board, and the connection method provided is also the corresponding pin of STM32F103RBT6. If you need to transplant the demo, please connect according to the actual pins.

VisionFive2 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 (click to enlarge):

Arduino Hardware Connection

The demo we provide is based on ATMEGA328P development board, and the connection method provided is also the corresponding pin of Arduino UNO R3. If you need to transplant the demo, please connect according to the actual pins.

Arduino UNO connection pin correspondence

LCD	UNO
VCC	5V
GND	GND
DIN	D11
CLK	D13
CS	D10
DC	D7
RST	D8
BL	D9

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

STM32 Hardware Connection

The demo we provide is based on ESP32-S3-WROOM-1-N8R8, and the connection method provided is also the corresponding pin of ESP32-S3. If you need to transplant the demo, please connect according to the actual pins.

ESP32-S3 connection pin correspondence

LCD	ESP32
VCC	3V3
GND	GND
DIN	IO11
CLK	IO12
CS	IO10
DC	IO46
RST	IO3
BL	IO8

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

Pico Hardware Connection

The demo we provide is based on Raspberry Pi Pico, and the connection method provided is also the corresponding pin of Raspberry Pi Pico. If you need to transplant the demo, please connect according to the actual pins.

Pico connection pin correspondence

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 (click to enlarge):

LCD & Controller

The built-in controller used in the LCD Rev1 version of this module is NV3030B, while the built-in controller used in the LCD Rev2 version is ST7789P. Both are LCD controllers with a resolution of 240 x RGB x 320 pixels. However, the display resolution of the LCD itself does not utilize the maximum resolution supported by the controller. Additionally, since the initialization control can be initialized to both landscape and portrait modes, the internal RAM of the LCD is not fully utilized.
This LCD supports 8-bit, 9-bit, 16-bit, and 18-bit per pixel input color formats, namely RGB444, RGB565, and RGB666 color formats, this demo uses RGB565 color format, which is also a commonly used RGB Format.
This LCD uses a 4-wire SPI communication interface, which can greatly save the GPIO port, and the communication speed will be faster.

Communication Protocol

Note: The difference from the traditional SPI protocol is that the data line (MISO) sent from the slave to the host is hidden because it only needs to be displayed.
RESX is the reset pin, it is pulled low when the module is powered on, usually set to 1;
CSX is the slave chip select pin, and the chip is enabled only when CS is low.
D/CX is the data/command control pin of the chip, when DC = 0 a command is written; when DC = 1, data is written
SDA is the data transmitted data, that is, RGB data;
SCL is the SPI communication clock pin.
For SPI communication, the data transmission has timing sequences involving clock phase (CPHA) and clock polarity (CPOL):
CPHA determines whether data is captured on the first or second clock edge. When CPHA = 0, data is captured on the first clock edge;
CPOL determines the idle level of the clock, CPOL = 0 means low.
From the diagram, it can be seen that when SCLK falls on the first edge, data transmission starts. One clock cycle transmits 8 bits, using SPI0, bitwise transmission, high bit first, and low bit last.

Working with Raspberry Pi

Enable SPI Interface

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

• Open the Raspberry Pi terminal and input the following command to enter the configuration interface:
  

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

Then restart Raspberry Pi:

sudo reboot

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

Install Libraries

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 be installed, you can directly run the demo.

BCM2835

#Open the Raspberry Pi terminal and run the following commands:
sudo wget http://www.airspayce.com/mikem/bcm2835/bcm2835-1.71.tar.gz
sudo 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 (those earlier may not require execution), an upgrade may be necessary:
wget https://files.waveshare.com/wiki/common/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:
sudo git clone https://github.com/WiringPi/WiringPi
cd WiringPi
sudo ./build
gpio -v
# Run gpio -v and version 2.70 will appear. If it does not appear, there is an installation error

lgpio

sudo su
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 Demo

Open the Raspberry Pi terminal and execute:

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 Demo

Please execute the following command in Raspberry Pi, otherwise it will not be indexed and cannot be found in the directory;

C

• Recompile, the compilation process may take a few seconds
  

cd c
sudo make clean
sudo make -j 

The test demos for all screens can be called directly by entering the corresponding screen sizes:

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 test demos for all screens, sorted by size:

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

• Run the demo corresponding to the screen, which 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 Interfaces

We have encapsulated the underlying layer, and due to different hardware platforms, the internal implementation is different. If you need to understand the internal implementation, you can check the corresponding directory
You can see a lot of definitions in DEV_Config.c(.h), located in the directory: RaspberryPi\c\lib\Config

1. There are three ways for C to drive: BCM2835 library, WiringPi library, and Dev library
2. We use Dev libraries 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:
1. Here is the processing of some GPIOs 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 write data:

void DEV_SPI_WriteByte(UBYTE Value);

Upper Layer Applications

For the screen, what if you need to paint, display Chinese and English characters, display pictures, etc., these are all done by the upper layer applications. Many of you have asked about some graphics processing, and we have provided some basic functions in the directory The GUI can be found in the directory: RaspberryPi\c\lib\GUI\GUI_Paint.c(.h)

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

• New Image Property: Create a new image property that includes the name, width, height, angle of rotation, 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 image cache;
 	Rotate: The angle of image flipping;
 	Color: The initial color of the image;

• Select Image Cache: The purpose of selecting the image cache is that you can create multiple image properties, and there can be multiple image caches. 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, preferably after Paint_SelectImage (), you can choose to rotate 0, 90, 180, 270

void Paint_SetRotate(UWORD Rotate)
Parameter:
 	Rotate: Image rotation angles can be chosen as ROTATE_0, ROTATE_90, ROTATE_180, ROTATE_270 corresponding to 0, 90, 180, 270 degrees

Note: Under different selection angles, the coordinates correspond to different starting pixels. Here taking 1.14 as an example, there are four images in sequence: 0°, 90°, 180°, 270°. For reference only

• Image Mirror Flip: Set the mirror flip of the selected image, you can choose no mirroring, horizontal mirroring, vertical mirroring, and mirroring around the image center

void Paint_SetMirroring(UBYTE mirror)
Parameter:
 	mirror: The mirroring method of the image can be selected as MIRROR_NONE, MIRROR_HORIZONTAL, MIRROR_VERTICAL, and MIRROR_ORIGIN, which correspond to no mirroring, horizontal mirroring, vertical mirroring, and mirroring around the image center, respectively

• Set the position and color of the point to be displayed in the cache: This is the core function of the GUI, handling point position and color displayed in the cache

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

• Image cache fill color: Fill the image cache with a certain color, which is generally used as a screen whitening

void Paint_Clear(UWORD Color)
Parameter:
 	Color: The filled color

• Image cache partial window fill color: Fill a certain part of the image cache window with a certain color, usually used as a window whitening function, commonly used for displaying time, whitening for one second

void Paint_ClearWindows(UWORD Xstart, UWORD Ystart, UWORD Xend, UWORD Yend, UWORD Color)
Parameter:
 	Xstart: The starting point X coordinate of the window
 	Ystart: The starting point Y coordinate of the window
 	Xend: The endpoint X coordinate of the window
 	Yend: The endpoint Y coordinate of the window
 	Color: The filled color

• Draw a dot: In the image cache, draw a dot at (Xpoint, Ypoint), you can choose the color, the size, and the style of the dot

void Paint_DrawPoint(UWORD Xpoint, UWORD Ypoint, UWORD Color, DOT_PIXEL Dot_Pixel, DOT_STYLE Dot_Style)
Parameter:
 	Xpoint: The X coordinate of the dot
 	Ypoint: The Y coordinate of the dot
 	Color: The filled color
 	Dot_Pixel: The size of the dots, which provides the default 8 sizes of dots
 	 	 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, the method to expand the size of the dot is that, whether to expand from the dot as the center or from the dot as the lower left corner to the upper right
 	 	typedef enum {
 	 	   DOT_FILL_AROUND  = 1,		
 	 	   DOT_FILL_RIGHTUP,
 	 	} DOT_STYLE;

• Draw a line: In the image cache, you can draw a line from (Xstart, Ystart) to (Xend, Yend) and 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)
Parameter:
 	Xstart: The starting point X coordinate of the line
 	Ystart: The starting point Y coordinate of the line
 	Xend: The endpoint X coordinate of the line
 	Yend: The endpoint Y coordinate of the line
 	Color: The filled color
 	Line_width: The width of the lines, which provides the default 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;
 	 Line_Style: The style of the line, which selects whether the line is connected in a straight line or as a dashed line
 	 	typedef enum {
 	 	 	 LINE_STYLE_SOLID = 0,
 	 	 	 LINE_STYLE_DOTTED,
 	 	} LINE_STYLE;

• Draw a rectangle: In the image cache, you can draw a rectangle from (Xstart, Ystart) to (Xend, Yend) and 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)
Parameter:
 	Xstart: The starting point X coordinate of the rectangle
 	Ystart: The starting point Y coordinate of the rectangle
 	Xend: The endpoint X coordinate of the rectangle
 	Yend: The endpoint Y coordinate of the rectangle
 	Color: The filled color
 	Line_width: The width of the four sides of the rectangle, providing the default 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: Filling, 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, draw a circle with a radius of Radius with (X_Center Y_Center) as the center of the circle, and 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)
Parameter:
 	X_Center: The X coordinate of the center of the circle
 	Y_Center: The Y coordinate of the center of the circle
 	Radius: The radius of the circle
 	Color: The filled color
 	Line_width: The width of the arc, which provides the default 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: Filling, 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, with (Xstart Ystart) as the left vertex, write an Ascii character, and you can select 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: The left vertex X coordinate of the character
 	Ystart: The left vertex Y coordinate of the character
 	Ascii_Char: Ascii character
 	Font: The Ascii code visual character font library, provides the following fonts 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 English strings: In the image cache, write a string of English characters with (Xstart Ystart) as the left vertex, and you can select the Ascii code visual character font 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)
Parameter:
 	Xstart: The left vertex X coordinate of the character
 	Ystart: The left vertex Y coordinate of the character
 	pString: is a string, and a string is a pointer
 	Font: The Ascii code visual character font library, provides the following fonts 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 Chinese strings: In the image cache, write a string of Chinese characters with (Xstart Ystart) as the left vertex, and you can select the GB2312 encoding character font library, 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)
Parameter:
 	Xstart: The left vertex X coordinate of the character
 	Ystart: The left vertex Y coordinate of the character
 	pString: is a string, and a string is a pointer
 	Font: The GB2312 encoding character 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, write a string of numbers with (Xstart Ystart) as the left vertex, and you can select the Ascii code visual character font 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)
Parameter:
 	Xstart: The left vertex X coordinate of the character
 	Ystart: The left vertex Y coordinate of the character
 	Number: The displayed number, here is stored in a 32-bit long int type, which can be displayed up to 2147483647.
 	Font: The Ascii code visual character font library, provides the following fonts 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, write a string of numbers with decimal at (Xstart Ystart) as the left vertex, and you can select 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: The left vertex X coordinate of the character
 	Ystart: The left vertex Y coordinate of the character
 	Number: The displayed number, which is saved in the double type, sufficient for ordinary needs
        Decimal_Point: Display the digits after the decimal point
 	Font: The Ascii code visual character font library, provides the following fonts 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, display time with (Xstart Ystart) as the left vertex, and you can select 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: The left vertex X coordinate of the character
 	Ystart: The left vertex Y coordinate of the character
 	pTime: The displayed time, where a time structure is defined, and only the hours, minutes, and seconds are passed to the parameters;
 	Font: The Ascii code visual character font library, provides the following fonts 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 local BMP images and write them to the cache

For Linux operating systems such as Raspberry Pi, you can read and write images
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 picture, generally 0 by default

Python Interface (for Raspberry Pi)

Suitable for Python and Python3
For Python, its call is not as complex as C
For Raspberry Pi, in the directory: RaspberryPi\python\lib\

lcdconfig.py

• Module initialization and exit processing:

def module_init()
def module_exit()
 Note:
 1. Here is the processing of some GPIOs before and after using the LCD screen.
2. The module_init() function will be automatically called in the init() initializer of the LCD screen, but module_exit() needs to be called manually

• GPIO read/write:

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 located in the following directory:< br /> For Raspberry Pi, in the directory: RaspberryPi\python\examples\

If your Python version is Python2 and you need to run the 0.96inch LCD test program, execute 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, 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 a Python program, you can do so with 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°, and 270° respectively

Drawing GUI

Since python has an image library pil official library link, it is very powerful and does not require coding from the logical layer like C, it can directly reference the image library for image processing. The following will briefly explain the use of the library in the program, taking a 1.54inch LCD as an example

• You need to use the image library and install the library

sudo apt-get install python3-pil   Install the library

Then import a library

from PIL import Image,ImageDraw,ImageFont

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 image

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

The first parameter defines the color depth of the image, with "RGB" indicating an RGB888 color image. The second parameter is a tuple defining the image's width and height. The third parameter defines the default color for caching, set to "WHITE".

• Create a drawing object based on Image1, and all drawing operations are performed on this object

draw = ImageDraw.Draw(image1)

• Draw a line

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

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

• Draw a rectangle

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

The first parameter is a tuple of 4 elements, where (20, 10) is the coordinate value of the top left corner of the rectangle, (70, 60) is the coordinate value of the bottom right corner of the rectangle, fill="WHITE" means the interior is filled with white, and 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 a square, with the first parameter being a tuple of 4 elements, (150, 15) as the top left vertex of the square, (190, 55) as the bottom right vertex, and the horizontal median line of the rectangle as a 0 degree angle. The angle increases clockwise, the second parameter represents the starting angle, the third parameter identifies the ending angle, and fill=(0,255,0) indicates that the line is green
If it is not a square, what is drawn is an ellipse. This is actually the drawing of an arc.

In addition to arc, ellipse can also draw solid circles

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

Essentially, it is the drawing of an ellipse. The first parameter specifies the tangent rectangle of the chord, and fill=(0,255,0) indicates that the internal filling color is green. If the tangent matrix of the ellipse is a square, the ellipse is a circle.

• Write characters

Writing characters often requires writing characters of different sizes, which need to be imported into the ImageFont module and instantiated:

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

For a better visual experience, free fonts from the internet are used here. Other TTF ending font library files are also supported
Note: Each character library contains different characters; If certain characters cannot be displayed, it is recommended to use the encoding set used in the font library
You can use English characters directly. If you want to write Chinese characters, because the encoding is GB2312, you need to add a u before it:< br />

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 two elements, with (40, 50) as the left vertex, Font2 as the font, and fill as the font color. You can directly set fill="WHITE" because the values of regular colors have already been defined. Of course, you can also use fill=(128,255,128), where the values in the parentheses correspond to the values of the RGB colors, allowing you to precisely control the colors you want. The second sentence shows Waveshare Electronics, using Font3, with the font color as white.

• Read local image

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

The parameter is the image path.

• Other functions

The Python image library is very powerful. If you need to implement additional features, you can learn more on the official website at http://effbot.org/imagingbook pil. The official documentation is in English. If you find it inconvenient, you can also look for excellent blogs in your native language.

STM32 Software Description

Note: The demos are all tested on XNUCLEO-F103RB development board. If using other models of ESP32-S3, you need to verify that the connected pins are correct. The example routines are available in two versions: hardware SPI and software SPI drivers. The software SPI driver allows you to specify the pins connected to DIN and CLK.

Run Demo

In the Resources section, download the Demo, and then unzip it. The STM32 demo is located at ~/STM32.
Open STM32CubeIDE and select a folder as the workspace

Close the information center page and import the project from the source code



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

Open main.c, you can see all the test programs. Remove the comments before the test programs corresponding to the screens and recompile

After successful compilation, a flashing LCD_demo.elf will be generated in the Debug or Release directory under the source code directory. Flash using STM32CubeProgrammer, load the flashing file, and connect the device

After the device is successfully connected, click to download

LCD_0in85_test()	0.85inch LCD test demo
LCD_0in96_test()	0.96inch LCD test demo
LCD_1in14_test()	1.14inch LCD test demo
LCD_1in28_test()	1.28inch LCD test demo
LCD_1in3_test()	1.3  inch LCD test demo
LCD_1in47_test()	1.47  inch LCD test demo
LCD_1in5_test()	1.5  inch LCD test demo
LCD_1in54_test()	1.54inch LCD test demo
LCD_1in8_test()	1.8  inch LCD test demo
LCD_1in83_test()	1.83inch   LCD test demo
LCD_2in_test()	2inch      LCD test demo

Underlying Hardware Interfaces

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

• GPIO read/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 Applications

For the screen, what if you need to paint, display Chinese and English characters, display pictures, etc., these are all done by the upper layer applications. Many of you have asked about some graphics processing, and we have provided some basic functions in the directory The GUI can be found in the directory: STM32\User\GUI_DEV\GUI_Paint.c(.h)
Note: Due to the internal RAM size of STM32 and Arduino, the GUI is written directly into the LCD RAM.
In the following directory are the character fonts that the GUI depends on: STM32\User\Fonts

• New Image Property: Create a new image property that includes the name, width, height, angle of rotation, 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 image cache;
 	Rotate: The angle of image flipping;
 	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 pixel drawing function, usually call the DrawPaint function of LCD directly

void Paint_SetDisplayFuntion(void (*Display)(UWORD,UWORD,UWORD));
Parameter:
 	Display: Pointer to the pixel drawing function, which is used to write data to the specified location in the internal RAM of the LCD;

• Select Image Cache: The purpose of selecting the image cache is that you can create multiple image properties, and there can be multiple image caches. 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, preferably after Paint_SelectImage (), you can choose to rotate 0, 90, 180, 270

void Paint_SetRotate(UWORD Rotate)
Parameter:
 	Rotate: Image rotation angles can be chosen as ROTATE_0, ROTATE_90, ROTATE_180, ROTATE_270 corresponding to 0, 90, 180, 270 degrees

Note: Under different selection angles, the coordinates correspond to different starting pixels. Here taking 1.14 as an example, there are four images in sequence: 0°, 90°, 180°, 270°. For reference only

• Image Mirror Flip: Set the mirror flip of the selected image, you can choose no mirroring, horizontal mirroring, vertical mirroring, and mirroring around the image center

void Paint_SetMirroring(UBYTE mirror)
Parameter:
 	mirror: The mirroring method of the image can be selected as MIRROR_NONE, MIRROR_HORIZONTAL, MIRROR_VERTICAL, and MIRROR_ORIGIN, which correspond to no mirroring, horizontal mirroring, vertical mirroring, and mirroring around the image center, respectively

• Set the position and color of the point to be displayed in the cache: This is the core function of the GUI, handling point position and color displayed in the cache

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

• Image cache fill color: Fill the image cache with a certain color, which is generally used as a screen whitening

void Paint_Clear(UWORD Color)
Parameter:
 	Color: The filled color

• Image cache partial window fill color: Fill a certain part of the image cache window with a certain color, usually used as a window whitening function, commonly used for displaying time, whitening for one second

void Paint_ClearWindows(UWORD Xstart, UWORD Ystart, UWORD Xend, UWORD Yend, UWORD Color)
Parameter:
 	Xstart: The starting point X coordinate of the window
 	Ystart: The starting point Y coordinate of the window
 	Xend: The endpoint X coordinate of the window
 	Yend: The endpoint Y coordinate of the window
 	Color: The filled color

• Draw a dot: In the image cache, draw a dot at (Xpoint, Ypoint), you can choose the color, the size, and the style of the dot

void Paint_DrawPoint(UWORD Xpoint, UWORD Ypoint, UWORD Color, DOT_PIXEL Dot_Pixel, DOT_STYLE Dot_Style)
Parameter:
 	Xpoint: The X coordinate of the dot
 	Ypoint: The Y coordinate of the dot
 	Color: The filled color
 	Dot_Pixel: The size of the dots, which provides the default 8 sizes of dots
 	 	 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, the method to expand the size of the dot is that, whether to expand from the dot as the center or from the dot as the lower left corner to the upper right
 	 	typedef enum {
 	 	   DOT_FILL_AROUND  = 1,		
 	 	   DOT_FILL_RIGHTUP,
 	 	} DOT_STYLE;

• Draw a line: In the image cache, you can draw a line from (Xstart, Ystart) to (Xend, Yend) and 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)
Parameter:
 	Xstart: The starting point X coordinate of the line
 	Ystart: The starting point Y coordinate of the line
 	Xend: The endpoint X coordinate of the line
 	Yend: The endpoint Y coordinate of the line
 	Color: The filled color
 	Line_width: The width of the lines, which provides the default 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;
 	 Line_Style: The style of the line, which selects whether the line is connected in a straight line or as a dashed line
 	 	typedef enum {
 	 	 	 LINE_STYLE_SOLID = 0,
 	 	 	 LINE_STYLE_DOTTED,
 	 	} LINE_STYLE;

• Draw a rectangle: In the image cache, you can draw a rectangle from (Xstart, Ystart) to (Xend, Yend) and 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)
Parameter:
 	Xstart: The starting point X coordinate of the rectangle
 	Ystart: The starting point Y coordinate of the rectangle
 	Xend: The endpoint X coordinate of the rectangle
 	Yend: The endpoint Y coordinate of the rectangle
 	Color: The filled color
 	Line_width: The width of the four sides of the rectangle, providing the default 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: Filling, 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, draw a circle with a radius of Radius with (X_Center Y_Center) as the center of the circle, and 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)
Parameter:
 	X_Center: The X coordinate of the center of the circle
 	Y_Center: The Y coordinate of the center of the circle
 	Radius: The radius of the circle
 	Color: The filled color
 	Line_width: The width of the arc, which provides the default 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: Filling, 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, with (Xstart Ystart) as the left vertex, write an Ascii character, and you can select 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: The left vertex X coordinate of the character
 	Ystart: The left vertex Y coordinate of the character
 	Ascii_Char: Ascii character
 	Font: The Ascii code visual character font library, provides the following fonts 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 English strings: In the image cache, write a string of English characters with (Xstart Ystart) as the left vertex, and you can select the Ascii code visual character font 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)
Parameter:
 	Xstart: The left vertex X coordinate of the character
 	Ystart: The left vertex Y coordinate of the character
 	pString: is a string, and a string is a pointer
 	Font: The Ascii code visual character font library, provides the following fonts 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 Chinese strings: In the image cache, write a string of Chinese characters with (Xstart Ystart) as the left vertex, and you can select the GB2312 encoding character font library, 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)
Parameter:
 	Xstart: The left vertex X coordinate of the character
 	Ystart: The left vertex Y coordinate of the character
 	pString: is a string, and a string is a pointer
 	Font: The GB2312 encoding character 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, write a string of numbers with (Xstart Ystart) as the left vertex, and you can select the Ascii code visual character font 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)
Parameter:
 	Xstart: The left vertex X coordinate of the character
 	Ystart: The left vertex Y coordinate of the character
 	Number: The displayed number, here is stored in a 32-bit long int type, which can be displayed up to 2147483647.
 	Font: The Ascii code visual character font library, provides the following fonts 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, write a string of numbers with decimal at (Xstart Ystart) as the left vertex, and you can select 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: The left vertex X coordinate of the character
 	Ystart: The left vertex Y coordinate of the character
 	Number: The displayed number, which is saved in the double type, sufficient for ordinary needs
        Decimal_Point: Display the digits after the decimal point
 	Font: The Ascii code visual character font library, provides the following fonts 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, display time with (Xstart Ystart) as the left vertex, and you can select 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: The left vertex X coordinate of the character
 	Ystart: The left vertex Y coordinate of the character
 	pTime: The displayed time, where a time structure is defined, and only the hours, minutes, and seconds are passed to the parameters;
 	Font: The Ascii code visual character font library, provides the following fonts 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 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.

Arduino IDE Installation Tutorial

Arduino IDE Installation Tutorial

Run Demo

In the Resources section, download the Demo, and then unzip it. The Arduino demo is located at ~/Arduino/LCD_1inch83.

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

Open the demo, and select the development board model Arduino UNO

Select the corresponding COM port according to the actual situation

Then click to compile and download

Demo Description

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

Among them:
LCD_1inch83.ino: open with Arduino IDE;
LCD_Driver.cpp(.h): is the driver for 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, 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 Resources);
The demo is divided into underlying hardware interfaces, middle-layer LCD screen driver, and upper-layer applications;

Underlying Hardware Interfaces

The hardware interfaces are defined in the two files DEV_Config.cpp(.h), and functions such as read and write pin levels, 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 or 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 read 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, occupying 8 bits.

Upper Layer Applications

For the screen, what if you need to paint, display Chinese and English characters, display pictures, etc., these are all done by the upper layer applications. Many of you have asked about some graphics processing, and we have provided some basic functions in the directory GUI_Paint.c(.h)
Note: Due to the internal RAM size of STM32 and Arduino, the GUI is written directly into the LCD RAM.

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

• New Image Property: Create a new image property that includes the name, width, height, angle of rotation, 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 image cache;
 	Rotate: The angle of image flipping;
 	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 pixel drawing function, usually call the DrawPaint function of LCD directly

void Paint_SetDisplayFuntion(void (*Display)(UWORD,UWORD,UWORD));
Parameter:
 	Display: Pointer to the pixel drawing function, which is used to write data to the specified location in the internal RAM of the LCD;

• Select Image Cache: The purpose of selecting the image cache is that you can create multiple image properties, and there can be multiple image caches. 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, preferably after Paint_SelectImage (), you can choose to rotate 0, 90, 180, 270

void Paint_SetRotate(UWORD Rotate)
Parameter:
 	Rotate: Image rotation angles can be chosen as ROTATE_0, ROTATE_90, ROTATE_180, ROTATE_270 corresponding to 0, 90, 180, 270 degrees

Note: Under different selection angles, the coordinates correspond to different starting pixels. Here taking 1.14 as an example, there are four images in sequence: 0°, 90°, 180°, 270°. For reference only

• Image Mirror Flip: Set the mirror flip of the selected image, you can choose no mirroring, horizontal mirroring, vertical mirroring, and mirroring around the image center

void Paint_SetMirroring(UBYTE mirror)
Parameter:
 	mirror: The mirroring method of the image can be selected as MIRROR_NONE, MIRROR_HORIZONTAL, MIRROR_VERTICAL, and MIRROR_ORIGIN, which correspond to no mirroring, horizontal mirroring, vertical mirroring, and mirroring around the image center, respectively

• Set the position and color of the point to be displayed in the cache: This is the core function of the GUI, handling point position and color displayed in the cache;

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

• Image cache fill color: Fill the image cache with a certain color, which is generally used as a screen whitening

void Paint_Clear(UWORD Color)
Parameter:
 	Color: The filled color

• Image cache partial window fill color: Fill a certain part of the image cache window with a certain color, usually used as a window whitening function, commonly used for displaying time, whitening for one second

void Paint_ClearWindows(UWORD Xstart, UWORD Ystart, UWORD Xend, UWORD Yend, UWORD Color)
Parameter:
 	Xstart: The starting point X coordinate of the window
 	Ystart: The starting point Y coordinate of the window
 	Xend: The endpoint X coordinate of the window
 	Yend: The endpoint Y coordinate of the window
 	Color: The filled color

• Draw a dot: Draw a dot at (Xpoint, Ypoint), and you can choose the color, the size, and the style of the dot

void Paint_DrawPoint(UWORD Xpoint, UWORD Ypoint, UWORD Color, DOT_PIXEL Dot_Pixel, DOT_STYLE Dot_Style)
Parameter:
 	Xpoint: The X coordinate of the dot
 	Ypoint: The Y coordinate of the dot
 	Color: The filled color
 	Dot_Pixel: The size of the dots, which provides the default 8 sizes of dots
 	 	 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, the method to expand the size of the dot is that, whether to expand from the dot as the center or from the dot as the lower left corner to the upper right
 	 	typedef enum {
 	 	   DOT_FILL_AROUND  = 1,		
 	 	   DOT_FILL_RIGHTUP,
 	 	} DOT_STYLE;

• Draw a line: Draw a line from (Xstart, Ystart) to (Xend, Yend), and 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)
Parameter:
 	Xstart: The starting point X coordinate of the line
 	Ystart: The starting point Y coordinate of the line
 	Xend: The endpoint X coordinate of the line
 	Yend: The endpoint Y coordinate of the line
 	Color: The filled color
 	Line_width: The width of the lines, which provides the default 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;
 	 Line_Style: The style of the line, which selects whether the line is connected in a straight line or as a dashed line
 	 	typedef enum {
 	 	 	 LINE_STYLE_SOLID = 0,
 	 	 	 LINE_STYLE_DOTTED,
 	 	} LINE_STYLE;

• Draw a rectangle: Draw a rectangle from (Xstart, Ystart) to (Xend, Yend), and 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)
Parameter:
 	Xstart: The starting point X coordinate of the rectangle
 	Ystart: The starting point Y coordinate of the rectangle
 	Xend: The endpoint X coordinate of the rectangle
 	Yend: The endpoint Y coordinate of the rectangle
 	Color: The filled color
 	Line_width: The width of the four sides of the rectangle, providing the default 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: Filling, whether to fill the inside of the rectangle
 	 	typedef enum {
 	 	 	 DRAW_FILL_EMPTY = 0,
 	 	 	 DRAW_FILL_FULL,
 	 	} DRAW_FILL;

• Draw a circle: Draw a circle with a radius of Radius with (X_Center Y_Center) as the center, and 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)
Parameter:
 	X_Center: The X coordinate of the center of the circle
 	Y_Center: The Y coordinate of the center of the circle
 	Radius: The radius of the circle
 	Color: The filled color
 	Line_width: The width of the arc, which provides the default 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: Filling, whether to fill the inside of the circle
 	 	typedef enum {
 	 	 	 DRAW_FILL_EMPTY = 0,
 	 	 	 DRAW_FILL_FULL,
 	 	} DRAW_FILL;

• Write Ascii character: Write an Ascii character with (Xstart Ystart) as the left vertex, and you can select 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: The left vertex X coordinate of the character
 	Ystart: The left vertex Y coordinate of the character
 	Ascii_Char: Ascii character
 	Font: The Ascii code visual character font library, provides the following fonts 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 English string: Write a string of English characters with (Xstart Ystart) as the left vertex, and you can select the Ascii code visual character font 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)
Parameter:
 	Xstart: The left vertex X coordinate of the character
 	Ystart: The left vertex Y coordinate of the character
 	pString: is a string, and a string is a pointer
 	Font: The Ascii code visual character font library, provides the following fonts 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 Chinese strings: Write a string of Chinese characters with (Xstart Ystart) as the left vertex, and you can select the GB2312 encoding character font library, 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)
Parameter:
 	Xstart: The left vertex X coordinate of the character
 	Ystart: The left vertex Y coordinate of the character
 	pString: is a string, and a string is a pointer
 	Font: The GB2312 encoding character 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: Write a string of numbers with (Xstart Ystart) as the left vertex, and you can select the Ascii code visual character font 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)
Parameter:
 	Xstart: The left vertex X coordinate of the character
 	Ystart: The left vertex Y coordinate of the character
 	Number: The displayed number, here is stored in a 32-bit long int type, which can be displayed up to 2147483647.
 	Font: The Ascii code visual character font library, provides the following fonts 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: Write a string of numbers with decimal at (Xstart Ystart) as the left vertex, and you can select 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: The left vertex X coordinate of the character
 	Ystart: The left vertex Y coordinate of the character
 	Number: The displayed number, which is saved in the double type
        Decimal_Point: Display the digits after the decimal point
 	Font: The Ascii code visual character font library, provides the following fonts 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: Display time with (Xstart Ystart) as the left vertex, and you can select 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: The left vertex X coordinate of the character
 	Ystart: The left vertex Y coordinate of the character
 	pTime: The displayed time, where a time structure is defined, and only the hours, minutes, and seconds are passed to the parameters;
 	Font: The Ascii code visual character font library, provides the following fonts 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: At (Xstart Ystart) as 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: The left vertex X coordinate of the character
 	Ystart: The left vertex Y coordinate of the character
 	W_Image: Image width
 	H_Image: Image height

Pico Software Description

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

Run Demo

In the Resources section, download the Demo, and then unzip it. The Pico demo is located at ~/Pico.

C

The C tutorial is for operating on a Raspberry Pi, but due to the multi-platform and portable characteristics of cmake, it can also be successfully compiled on a PC, with some differences in operation that you will need to judge on your own. If you wish to compile, please ensure that 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: Here ../../pico-sdk is the directory of your SDK. If the build directory already exists, you can go directly into it.

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

Execute cmake, automatically generate the Makefile file

cmake ..

Execute make to generate an executable file, the first compilation takes a long time

make -j

After the compilation is completed, the uf2 file will be generated. Press and hold the button on the Pico board, connect pico to the USB port of the Raspberry Pi via Micro USB cable, 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

1) Press and hold the button on the Pico board, connect Pico to the USB port of the computer via Micro USB cable, then release the button. After connection, the computer will automatically recognize a removable disk (RPI-RP2)

2) Copy pico_micropython_20220117.uf2 file from the Python directory to the recognized removable disk (RPI-RP2)

3) Update Thonny IDE

 sudo apt upgrade thonny       

4) Open the Thonny IDE (click on the Raspberry 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 in Thonny IDE Then run the current script (green small triangle)

Underlying Hardware Interfaces

We have encapsulated the underlying layer, and due to different hardware platforms, the internal implementation is different. If you need to understand the internal implementation, you can check the corresponding directory
You can see a lot of definitions in DEV_Config.c(.h), located 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 processing

void DEV_Module_Init(void);
void DEV_Module_Exit(void);
Note:
1. Here is the processing of some GPIOs 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 write data:

void DEV_SPI_WriteByte(UBYTE Value);

Upper Layer Applications

For the screen, what if you need to paint, display Chinese and English characters, display pictures, etc., these are all done by the upper layer applications. Many of you have asked about some graphics processing, and we have provided some basic functions in the directory The GUI can be found in the directory: ~/c/lib/GUI/GUI_Paint.c(.h)

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

• New Image Property: Create a new image property that includes the name, width, height, angle of rotation, 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 image cache;
 	Rotate: The angle of image flipping;
 	Color: The initial color of the image;

• Select Image Cache: The purpose of selecting the image cache is that you can create multiple image properties, and there can be multiple image caches. 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, preferably after Paint_SelectImage (), you can choose to rotate 0, 90, 180, 270

void Paint_SetRotate(UWORD Rotate)
Parameter:
 	Rotate: Image rotation angles can be chosen as ROTATE_0, ROTATE_90, ROTATE_180, ROTATE_270 corresponding to 0, 90, 180, 270 degrees

Note: Under different selection angles, the coordinates correspond to different starting pixels. Here taking 1.14 as an example, there are four images in sequence: 0°, 90°, 180°, 270°. For reference only

• Image Mirror Flip: Set the mirror flip of the selected image, you can choose no mirroring, horizontal mirroring, vertical mirroring, and mirroring around the image center

void Paint_SetMirroring(UBYTE mirror)
Parameter:
 	mirror: The mirroring method of the image can be selected as MIRROR_NONE, MIRROR_HORIZONTAL, MIRROR_VERTICAL, and MIRROR_ORIGIN, which correspond to no mirroring, horizontal mirroring, vertical mirroring, and mirroring around the image center, respectively

• Set the position and color of the point to be displayed in the cache: This is the core function of the GUI, handling point position and color displayed in the cache

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

• Image cache fill color: Fill the image cache with a certain color, which is generally used as a screen whitening

void Paint_Clear(UWORD Color)
Parameter:
 	Color: The filled color

• Image cache partial window fill color: Fill a certain part of the image cache window with a certain color, usually used as a window whitening function, commonly used for displaying time, whitening for one second

void Paint_ClearWindows(UWORD Xstart, UWORD Ystart, UWORD Xend, UWORD Yend, UWORD Color)
Parameter:
 	Xstart: The starting point X coordinate of the window
 	Ystart: The starting point Y coordinate of the window
 	Xend: The endpoint X coordinate of the window
 	Yend: The endpoint Y coordinate of the window
 	Color: The filled color

• Draw a dot: In the image cache, draw a dot at (Xpoint, Ypoint), you can choose the color, the size, and the style of the dot

void Paint_DrawPoint(UWORD Xpoint, UWORD Ypoint, UWORD Color, DOT_PIXEL Dot_Pixel, DOT_STYLE Dot_Style)
Parameter:
 	Xpoint: The X coordinate of the dot
 	Ypoint: The Y coordinate of the dot
 	Color: The filled color
 	Dot_Pixel: The size of the dots, which provides the default 8 sizes of dots
 	 	 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, the method to expand the size of the dot is that, whether to expand from the dot as the center or from the dot as the lower left corner to the upper right
 	 	typedef enum {
 	 	   DOT_FILL_AROUND  = 1,		
 	 	   DOT_FILL_RIGHTUP,
 	 	} DOT_STYLE;

• Draw a line: In the image cache, you can draw a line from (Xstart, Ystart) to (Xend, Yend) and 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)
Parameter:
 	Xstart: The starting point X coordinate of the line
 	Ystart: The starting point Y coordinate of the line
 	Xend: The endpoint X coordinate of the line
 	Yend: The endpoint Y coordinate of the line
 	Color: The filled color
 	Line_width: The width of the lines, which provides the default 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;
 	 Line_Style: The style of the line, which selects whether the line is connected in a straight line or as a dashed line
 	 	typedef enum {
 	 	 	 LINE_STYLE_SOLID = 0,
 	 	 	 LINE_STYLE_DOTTED,
 	 	} LINE_STYLE;

• Draw a rectangle: In the image cache, you can draw a rectangle from (Xstart, Ystart) to (Xend, Yend) and 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)
Parameter:
 	Xstart: The starting point X coordinate of the rectangle
 	Ystart: The starting point Y coordinate of the rectangle
 	Xend: The endpoint X coordinate of the rectangle
 	Yend: The endpoint Y coordinate of the rectangle
 	Color: The filled color
 	Line_width: The width of the four sides of the rectangle, providing the default 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: Filling, 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, draw a circle with a radius of Radius with (X_Center Y_Center) as the center of the circle, and 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)
Parameter:
 	X_Center: The X coordinate of the center of the circle
 	Y_Center: The Y coordinate of the center of the circle
 	Radius: The radius of the circle
 	Color: The filled color
 	Line_width: The width of the arc, which provides the default 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: Filling, 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, with (Xstart Ystart) as the left vertex, write an Ascii character, and you can select 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: The left vertex X coordinate of the character
 	Ystart: The left vertex Y coordinate of the character
 	Ascii_Char: Ascii character
 	Font: The Ascii code visual character font library, provides the following fonts 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 English strings: In the image cache, write a string of English characters with (Xstart Ystart) as the left vertex, and you can select the Ascii code visual character font 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)
Parameter:
 	Xstart: The left vertex X coordinate of the character
 	Ystart: The left vertex Y coordinate of the character
 	pString: is a string, and a string is a pointer
 	Font: The Ascii code visual character font library, provides the following fonts 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 Chinese strings: In the image cache, write a string of Chinese characters with (Xstart Ystart) as the left vertex, and you can select the GB2312 encoding character font library, 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)
Parameter:
 	Xstart: The left vertex X coordinate of the character
 	Ystart: The left vertex Y coordinate of the character
 	pString: is a string, and a string is a pointer
 	Font: The GB2312 encoding character 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, write a string of numbers with (Xstart Ystart) as the left vertex, and you can select the Ascii code visual character font 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);
Parameter:
 	Xstart: The left vertex X coordinate of the character
 	Ystart: The left vertex Y coordinate of the character
 	Number: The displayed number, here is stored in a 32-bit long int type, which can be displayed up to 2147483647.
 	Font: The Ascii code visual character font library, provides the following fonts 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 decimal places
 	Color_Foreground: Font color
 	Color_Background: Background color

• Display time: In the image cache, display time with (Xstart Ystart) as the left vertex, and you can select 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: The left vertex X coordinate of the character
 	Ystart: The left vertex Y coordinate of the character
 	pTime: The displayed time, where a time structure is defined, and only the hours, minutes, and seconds are passed to the parameters;
 	Font: The Ascii code visual character font library, provides the following fonts 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

STM32 Software Description

Note: The demos are all tested on ESP32-S3-WROOM-1-N8R8. If using other models of ESP32-S3, you need to verify that the connected pins are correct. Two driver versions are available for the examples: hardware SPI and software SPI. The software SPI driver allows you to specify the pins connected to DIN and CLK.

Arduino IDE Installation Tutorial

Arduino IDE Installation Tutorial

Run Demo

In the Resources section, download the Demo, and then unzip it. The ESP32 demo is located at ~/ESP32/LCD_1in83.

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

You can view test demos for all screen sizes, sorted by size:
For example, a 1.83inch LCD Module. Open the LCD_1inch54 folder and run the LCD_1inch54.ino file.
Open the demo, select the development board ESP32S3 Dev Module

Select the corresponding COM port


Then click to compile and download

Demo Description

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

Among them:
LCD_1inch83.ino: open with Arduino IDE;
LCD_Driver.cpp(.h): is the driver for 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, 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 Resources);
The demo is divided into underlying hardware interfaces, middle-layer LCD screen driver, and upper-layer applications;

Underlying Hardware Interfaces

The hardware interfaces are defined in the two files DEV_Config.cpp(.h), and functions such as read and write pin levels, 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 or 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 read 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, occupying 8 bits.

Upper Layer Applications

For the screen, what if you need to paint, display Chinese and English characters, display pictures, etc., these are all done by the upper layer applications. Many of you have asked about some graphics processing, and we have provided some basic functions in the directory GUI_Paint.c(.h)
Note: Due to the internal RAM size of STM32 and Arduino, the GUI is written directly into the LCD RAM.

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

• New Image Property: Create a new image property that includes the name, width, height, angle of rotation, 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 image cache;
 	Rotate: The angle of image flipping;
 	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 pixel drawing function, usually call the DrawPaint function of LCD directly

void Paint_SetDisplayFuntion(void (*Display)(UWORD,UWORD,UWORD));
Parameter:
 	Display: Pointer to the pixel drawing function, which is used to write data to the specified location in the internal RAM of the LCD;

• Select Image Cache: The purpose of selecting the image cache is that you can create multiple image properties, and there can be multiple image caches. 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, preferably after Paint_SelectImage (), you can choose to rotate 0, 90, 180, 270

void Paint_SetRotate(UWORD Rotate)
Parameter:
 	Rotate: Image rotation angles can be chosen as ROTATE_0, ROTATE_90, ROTATE_180, ROTATE_270 corresponding to 0, 90, 180, 270 degrees

Note: Under different selection angles, the coordinates correspond to different starting pixels. Here taking 1.14 as an example, there are four images in sequence: 0°, 90°, 180°, 270°. For reference only

• Image Mirror Flip: Set the mirror flip of the selected image, you can choose no mirroring, horizontal mirroring, vertical mirroring, and mirroring around the image center

void Paint_SetMirroring(UBYTE mirror)
Parameter:
 	mirror: The mirroring method of the image can be selected as MIRROR_NONE, MIRROR_HORIZONTAL, MIRROR_VERTICAL, and MIRROR_ORIGIN, which correspond to no mirroring, horizontal mirroring, vertical mirroring, and mirroring around the image center, respectively

• Set the position and color of the point to be displayed in the cache: This is the core function of the GUI, handling point position and color displayed in the cache

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

• Image cache fill color: Fill the image cache with a certain color, which is generally used as a screen whitening

void Paint_Clear(UWORD Color)
Parameter:
 	Color: The filled color

• Image cache partial window fill color: Fill a certain part of the image cache window with a certain color, usually used as a window whitening function, commonly used for displaying time, whitening for one second

void Paint_ClearWindows(UWORD Xstart, UWORD Ystart, UWORD Xend, UWORD Yend, UWORD Color)
Parameter:
 	Xstart: The starting point X coordinate of the window
 	Ystart: The starting point Y coordinate of the window
 	Xend: The endpoint X coordinate of the window
 	Yend: The endpoint Y coordinate of the window
 	Color: The filled color

• Draw a dot: Draw a dot at (Xpoint, Ypoint), and you can choose the color, the size, and the style of the dot

void Paint_DrawPoint(UWORD Xpoint, UWORD Ypoint, UWORD Color, DOT_PIXEL Dot_Pixel, DOT_STYLE Dot_Style)
Parameter:
 	Xpoint: The X coordinate of the dot
 	Ypoint: The Y coordinate of the dot
 	Color: The filled color
 	Dot_Pixel: The size of the dots, which provides the default 8 sizes of dots
 	 	 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, the method to expand the size of the dot is that, whether to expand from the dot as the center or from the dot as the lower left corner to the upper right
 	 	typedef enum {
 	 	   DOT_FILL_AROUND  = 1,		
 	 	   DOT_FILL_RIGHTUP,
 	 	} DOT_STYLE;

• Draw a line: Draw a line from (Xstart, Ystart) to (Xend, Yend), and 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)
Parameter:
 	Xstart: The starting point X coordinate of the line
 	Ystart: The starting point Y coordinate of the line
 	Xend: The endpoint X coordinate of the line
 	Yend: The endpoint Y coordinate of the line
 	Color: The filled color
 	Line_width: The width of the lines, which provides the default 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;
 	 Line_Style: The style of the line, which selects whether the line is connected in a straight line or as a dashed line
 	 	typedef enum {
 	 	 	 LINE_STYLE_SOLID = 0,
 	 	 	 LINE_STYLE_DOTTED,
 	 	} LINE_STYLE;

• Draw a rectangle: Draw a rectangle from (Xstart, Ystart) to (Xend, Yend), and 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)
Parameter:
 	Xstart: The starting point X coordinate of the rectangle
 	Ystart: The starting point Y coordinate of the rectangle
 	Xend: The endpoint X coordinate of the rectangle
 	Yend: The endpoint Y coordinate of the rectangle
 	Color: The filled color
 	Line_width: The width of the four sides of the rectangle, providing the default 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: Filling, whether to fill the inside of the rectangle
 	 	typedef enum {
 	 	 	 DRAW_FILL_EMPTY = 0,
 	 	 	 DRAW_FILL_FULL,
 	 	} DRAW_FILL;

• Draw a circle: Draw a circle with a radius of Radius with (X_Center Y_Center) as the center, and 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)
Parameter:
 	X_Center: The X coordinate of the center of the circle
 	Y_Center: The Y coordinate of the center of the circle
 	Radius: The radius of the circle
 	Color: The filled color
 	Line_width: The width of the arc, which provides the default 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: Filling, whether to fill the inside of the circle
 	 	typedef enum {
 	 	 	 DRAW_FILL_EMPTY = 0,
 	 	 	 DRAW_FILL_FULL,
 	 	} DRAW_FILL;

• Write Ascii character: Write an Ascii character with (Xstart Ystart) as the left vertex, and you can select 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: The left vertex X coordinate of the character
 	Ystart: The left vertex Y coordinate of the character
 	Ascii_Char: Ascii character
 	Font: The Ascii code visual character font library, provides the following fonts 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 English string: Write a string of English characters with (Xstart Ystart) as the left vertex, and you can select the Ascii code visual character font 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)
Parameter:
 	Xstart: The left vertex X coordinate of the character
 	Ystart: The left vertex Y coordinate of the character
 	pString: is a string, and a string is a pointer
 	Font: The Ascii code visual character font library, provides the following fonts 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 Chinese strings: Write a string of Chinese characters with (Xstart Ystart) as the left vertex, and you can select the GB2312 encoding character font library, 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)
Parameter:
 	Xstart: The left vertex X coordinate of the character
 	Ystart: The left vertex Y coordinate of the character
 	pString: is a string, and a string is a pointer
 	Font: The GB2312 encoding character 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: Write a string of numbers with (Xstart Ystart) as the left vertex, and you can select the Ascii code visual character font 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)
Parameter:
 	Xstart: The left vertex X coordinate of the character
 	Ystart: The left vertex Y coordinate of the character
 	Number: The displayed number, here is stored in a 32-bit long int type, which can be displayed up to 2147483647.
 	Font: The Ascii code visual character font library, provides the following fonts 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: Write a string of numbers with decimal at (Xstart Ystart) as the left vertex, and you can select 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: The left vertex X coordinate of the character
 	Ystart: The left vertex Y coordinate of the character
 	Number: The displayed number, which is saved in the double type
        Decimal_Point: Display the digits after the decimal point
 	Font: The Ascii code visual character font library, provides the following fonts 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: Display time with (Xstart Ystart) as the left vertex, and you can select 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: The left vertex X coordinate of the character
 	Ystart: The left vertex Y coordinate of the character
 	pTime: The displayed time, where a time structure is defined, and only the hours, minutes, and seconds are passed to the parameters
 	Font: The Ascii code visual character font library, provides the following fonts 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: At (Xstart Ystart) as 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: The left vertex X coordinate of the character
 	Ystart: The left vertex Y coordinate of the character
 	W_Image: Image width
 	H_Image: Image height

Resources

Diagrams

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

Documents

• Schematic
• NV3030B

Demos

• Demo
• Rev2 Demo

Software

• Zimo221 Chinese character conversion software
• Image2Lcd image bitmap conversion software
• Image bitmap conversion tutorial
• Font library conversion tutorial
• Flash_download_tool

FAQ

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

 Answer:

3.3V 500cd/㎡

Question: What is the power consumption of the 1.83inch LCD Module?

 Answer:

The typical power consumption of this module is about 170 mW.

Question: What is the operating and storage temperature range of the 1.83-inch LCD Module?

 Answer:

The module’s typical operating and storage temperature is 0 ~ 60 °C

Support

Technical Support

If you need technical support or have any feedback/review, please click the Submit Now button to submit a ticket, Our support team will check and reply to you within 1 to 2 working days. Please be patient as we make every effort to help you to resolve the issue.
Working Time: 9 AM - 6 PM GMT+8 (Monday to Friday)

Submit Now