4inch TFT Touch Shield

From Waveshare Wiki
Jump to: navigation, search
4inch TFT Touch Shield
4inch-TFT-Touch-Shield-1.jpg

4inch Arduino Touch LCD Shield
{{{name2}}}

{{{name3}}}

{{{name4}}}

{{{name5}}}

{{{name6}}}

Introduction

4inch Arduino Touch Shield

More

Arduino

How to Connect

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. Inch TFT Touch Shield01.png
Inch TFT Touch Shield02.png

Hardware Connection

  • If the Arduino board has an ICSP interface, set the SPI Config switch on the display module to the ICSP direction (by 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 switches on the display module to SCLK\D13, MISO\D12, MOSI\D11 respectively.

Install Compile Software

Run the Program

  • Unzip the compressed package, open the folder, and open the Arduino folder, you can see three project folders LCD_Show, LCD_ShowBMP, LCD_Touch.
  • This product uses the same LCD control chip and touch panel control chip as the 3.5-inch TFT screen of the same series of our company, so the code is completely compatible. The following takes 3.5-inch TFT as an example to introduce.
  • First, open the LCD_Show.ino file in the LCD_Show folder directly, then select the development board model Arduino UNO.

3.5inchTFT Arduino test 2.png
Select the corresponding COM port.
UGV1 doenload03EN.png
Then click to compile and upload.
3.5inchTFT Arduino test 3.png

Program Description

LCD_Show can display colorful patterns with different shapes and times. LCD_ShowBMP is for displaying the picture in BMP, and LCD_Touch is for using the touching function.
The display controller used in this product is ILI9486, and 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.<br/>
   LCD_SCAN_DIR Lcd_ScanDir = SCAN_DIR_DFT; //Set the scan mode <br/>
   LCD_Init( Lcd_ScanDir, 200);//Initialize the screen, and pass the scanning mode and backlight brightness.<br/>

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 a 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 a 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 )
  • Show numbers:
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 that the SD card should be in the FAT format, and the picture should be 480*320 pixels with a 24-bit color depth. BMP format
  • Here is an explanation. This demo 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. Interested friends 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 running this demo, there are five colors on the right side of the screen. Black is the default color in the system, and you can touch it to choose the brush color. Click AD button, and click the red "+" to calibrate the screen with the prompts. Click the right corner "CLEAR" to clear the drawing board.
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 in different sizes and fonts, you can generate the font library you want according to the font extraction software provided in the Resource.
  • 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 them!

STM32

The 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 port the program, please connect it according to the actual pin and the schematic diagram.

How to Insert

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.
4inch TFT Touch Shieldstm0.jpg
4inch TFT Touch Shieldstm1.jpg

Software Description

The demos are developed based on the HAL library. Download the program, find the STM32 program file directory, and open STM32\XNUCLEO-F103RB\lcd4in-demo\MDK-ARM\ lcd4in-demo.uvprojx.
This product uses the same LCD control chip and touch panel control chip as the 3.5-inch TFT screen of the same series of our company, so the code is completely compatible. The following takes a 3.5-inch TFT as an example to introduce.
4inch TFT Touch Shield07.png
Click to compile and download one by one.
4inch TFT Touch Shield08.png

Program Description

After running the demo, it displays some characters and patterns at first, then displays four pictures, and finally displays the touch sketchpad function. Actually, three projects in the Arduino platform code are integrated in the main function, we place the three main functions in sequence and place TP_DrawBoard(); 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, 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 the FAT format, and the picture should be 480*320 pixels with 24-bit color depth and 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 them!

Resources

Documentation

Datasheet

3D Drawings

Development Resource

FAQ

 Answer:
For some development boards without an ICSP interface (such as NUCLEO), you need to turn the DIP switch to the non-ICSP side to work properly.

{{{5}}}


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)