3.5inch TFT Touch Shield
| ||
Introduction
Arduino
This demo has been tested on Arduino uno, just attach it to Arduino uno as shown below.
Insert method
The connection diagram is as follows (click to enlarge).
Note: The following picture is the connection diagram of the 2.8-inch TFT screen and Arduino uno, but this product is connected in exactly the same way.
Hardware connection
- If the Arduino board has an ICSP interface, set the SPI Config switch on the display module to the ICSP direction (default) (the company's Arduino UNO motherboard has an ICSP interface, just plug it in directly).
- If the Arduino board does not have an ICSP interface, set the SPI Config switch on the display module to SCLK\D13, MISO\D12, MOSI\D11 respectively.
Run the program
Unzip the compressed package, and then open the folder, then open the Arduino folder, you can see three project folders LCD_Show, LCD_ShowBMP, LCD_Touch.
First, open the LCD_Show.ino file in the LCD_Show folder directly, then select the development board model Arduino UNO.
Select the corresponding COM port.
Then click compile and upload.
Program Description
LCD_Show is used to display some patterns of different color shapes and time, LCD_ShowBMP is used to display pictures in BMP format, LCD_Touch is used to use touch function.
The display controller used in this product is ILI9486, we need to initialize the controller through the SPI communication protocol, and the initialization functions are written in LCD_Driver.cpp
It can be seen that there are in LCD_Show.ino
System_Init();//System initialization, configure serial port baud rate, SPI and related pins, etc.
LCD_SCAN_DIR Lcd_ScanDir = SCAN_DIR_DFT; //Set the scan mode LCD_Init( Lcd_ScanDir, 200);//Initialize the screen and pass the scanning mode and backlight brightness
The function functions related to the screen display are written in LCD_GUI.cpp. The function of each function and the parameters passed are explained in the source code. You can call it directly when you need to use it.
- Draw dots
void GUI_DrawPoint(POINT Xpoint, POINT Ypoint, COLOR Color,
DOT_PIXEL Dot_Pixel, DOT_STYLE DOT_STYLE)
- Draw lines (solid or dashed)
void GUI_DrawLine(POINT Xstart, POINT Ystart, POINT Xend, POINT Yend,
COLOR Color, LINE_STYLE Line_Style, DOT_PIXEL Dot_Pixel)
- Draw rectangle (hollow or solid)
void GUI_DrawRectangle(POINT Xstart, POINT Ystart, POINT Xend, POINT Yend,
COLOR Color, DRAW_FILL Filled, DOT_PIXEL Dot_Pixel)
- Draw circle (hollow or solid)
void GUI_DrawCircle(POINT X_Center, POINT Y_Center, LENGTH Radius,
COLOR Color, DRAW_FILL Draw_Fill , DOT_PIXEL Dot_Pixel)
- Display characters
void GUI_DisChar(POINT Xpoint, POINT Ypoint, const char Acsii_Char,
sFONT* Font, COLOR Color_Background, COLOR Color_Foreground)
- Display string
void GUI_DisString_EN(POINT Xstart, POINT Ystart, const char * pString,
sFONT* Font, COLOR Color_Background, COLOR Color_Foreground )
- Display number
void GUI_DisNum(POINT Xpoint, POINT Ypoint, int32_t Nummber,
sFONT* Font, COLOR Color_Background, COLOR Color_Foreground )
- Display time
void GUI_Showtime(POINT Xstart, POINT Ystart, POINT Xend, POINT Yend,
DEV_TIME *pTime, COLOR Color)
Before using LCD_ShowBMP to display pictures, first copy the pictures in the PIC folder in the data to the root directory of the SD card (you should understand that in the root directory, that is to save the pictures directly to the SD card, do not put them in any subfolders folder).
Then insert the SD card into the SD card slot on the back of the screen to start the download program verification.
- It should be noted here that the SD card should be in FAT format, and the picture should be 480*320 pixels with 24-bit color depth. BMP format.
Here is a little explanation. This routine shows that the BMP picture first reads the picture data in the BMP format in the SD card through the SPI protocol, and then displays the data as an image.
In LCD_ShowBMP.ino:
SD_Init();//SD card initialization
LCD_ShowBMP();//Show BMP picture
These functions are all written in LCD_Bmp.cpp. In fact, the image data in BMP format with a specific file name is read from the SD card, and then the display function written by us is called to re-express the data as an image.
No matter which platform this method is on, the principle is similar. If you are interested, you can check the relevant information and study the relevant code carefully.
in LCD_Touch.ino:
TP_Init( Lcd_ScanDir );//The touchpad is initialized, and the passed parameter is the scan mode
TP_GetAdFac();//Calibrate the screen
TP_Dialog();//Clear the screen
TP_DrawBoard();//Open the drawing board
After the demo runs, there will be five colors on the right side of the screen, the system defaults to black, touch to select the brush color; click the AD button, and click the red + sign to calibrate the screen according to the on-screen prompts; click the CLEAR button in the upper right corner to clear the screen of the drawing board.
The touch experiment uses four sets of calibration values by default, which can satisfy the brush operation in four directions. There are five color choices on the right side, and the default brush size is 9 pixels.
The functions related to the touch screen are written in LCD_Touch.cpp, and their functions and the purpose of passing parameters are explained.
The program provides a pixel size of:
Width 5，Height 8 font8 Width 7，Height 12 font12 Width 11，Height 16 font16 Width 14，Height 20 font20 Width 17，Height24 font24
Font library in five sizes.
- If you need characters of different sizes and fonts, you can generate the font library you want according to the font extraction software provided in the data.
- In fact, you can also use Image2Lcd image modulo software to convert images of different sizes and formats into array data, and then use the functions we wrote to display them.
- The data sheets of all control chips are given in the information for your reference. If you want to know more about why the underlying functions are written like this, go to the data sheets and look at it!
STM32
This demo has been tested on XNUCLEO-F103RB, just insert XNUCLEO-F103RB as shown below. The model of XNUCLEO-F103RB is STM32F103RBT6. If you need to transplant the program, please connect according to the actual pin according to the schematic diagram.
Insert method:
The connection diagram is as follows (click to enlarge):
Note: The following picture is the connection diagram of the 2.8-inch TFT screen and XNUCLEO-F103RB, but this product is connected in exactly the same way.
Software description
The demos are developed based on the HAL library. Download the program, find the STM32 program file directory, open STM32\XNUCLEO-F103RB\lcd3in5-demo\MDK-ARM\ lcd3in5-demo.uvprojx
Click to compile and download
Software description
After this demo runs, it first displays some characters and patterns, then displays four pictures, and finally displays the touch drawing board function. In fact, it is the integration of the three projects of the Arduino platform code into the main function. The functions are placed in order and TP_DrawBoard(); is placed in an infinite loop to achieve the above functions.
GUI_Show(); LCD_Show_bmp(Bmp_ScanDir , Lcd_ScanDir); TP_DrawBoard();
It uses the same driver and program framework as the Arduino platform. For the location of different functions, please refer to the Arduino tutorial.
Before using LCD_ShowBMP to display pictures, first copy the pictures in the PIC folder in the data to the root directory of the SD card, and then insert the SD card into the SD card slot on the back of the screen to start the download program verification.
- It should be noted here that the SD card should be in FAT format, and the picture should be 480*320 pixels with 24-bit color depth. BMP format.
The program provides a pixel size of
Width 5，Height 8 font8 Width 7，Height 12 font12 Width 11，Height 16 font16 Width 14，Height 20 font20 Width 17，Height24 font24
Font library in five sizes
- If you need characters of different sizes and fonts, you can generate the font library you want according to the font extraction software provided in the data
- In fact, you can also use Image2Lcd image modulo software to convert images of different sizes and formats into array data, and then use the functions we wrote to display them.
- The data sheets of all control chips are given in the information for your reference. If you want to know more about why the underlying functions are written like this, go to the data sheets and look at it!
Resources
Document
Datasheet
Software
FAQ
- For some development boards without ICSP interface (such as NUCLEO), you need to turn the DIP switch to the non-ICSP side to work properly
{{{5}}}
Support
If you require technical support, please go to the Support page and open a ticket.