[Diao Ye learns programming] Arduino hands-on (153) --- 2.4-inch TFT LCD touch screen module 6

The reference to 37 sensors and actuators has been widely circulated on the Internet. In fact, there must be more than 37 sensor modules compatible with Arduino. In view of the fact that I have accumulated some sensor and actuator modules on hand, according to the concept of practice to get true knowledge (must be done), for the purpose of learning and communication, I am going to try a series of experiments one by one, regardless of success (the program goes through) or not, They will be recorded - small progress or unsolvable problems, hoping to inspire others.

[Arduino] 168 kinds of sensor module series experiments (data code + simulation programming + graphics programming)
Experiment 153: 2.4-inch TFT LCD touch screen color screen module can be directly plugged into UNO R3 Mega2560 development board

insert image description here
For the aforementioned experiments, I initially tried not using the library and using some common driver libraries, and also tried many related driver libraries on foreign websites.

It is recommended to use a combination of the relatively stable Adafruit GFX library and the MCUFRIEND KBV library.

insert image description here

Unzip the MCUFRIEND KBV and open MCUFRIEND_kbv.CPP. You can view the list of drivers supported by the MCUFRIEND library

insert image description here
Other related driver libraries that may be required, these libraries are not required now, but they can be added.

#include "TouchScreen.h" // 当想使用触摸屏时

#include "bitmap_mono.h" // 想显示库中的位图图像时

#include "bitmap_RGB.h" // 想显示库中的位图图像时

#include "Fonts/FreeSans9pt7b.h" // 想要其他字体时

#include "Fonts/FreeSans12pt7b.h" // 想要其他字体时

#include "Fonts/FreeSerif12pt7b.h" // 想要其他字体时

#include "FreeDefaultFonts.h" // 想要其他字体时

#include "SPI.h" // 使用 sd 卡显示位图图像

#include "SD.h" // 使用 sd 卡显示位图图像

List of related basic commands

1. Classes and Objects

//(int CS=A3, int RS=A2, int WR=A1, int RD=A0, int RST=A4)MCUFRIEND_kbv tft(A3, A2, A1, A0, A4);

This line creates an object called TFT from the MCUFRIEND_kbv class and provides SPI communication between the LCD and the Arduino.

2. Run the LCD display

uint16_t ID = tft.readID(); tft.begin(ID);

The tft.readID function reads the ID from the display and puts it into the ID variable. Then the tft.begin function gets the ID and the LCD is ready to work.

3. Display resolution

tft.width(); //int16_t width(void);tft.height(); //int16_t height(void);

Through these two functions, you can know the resolution of the display. Just add them to your code and put the output in a uint16_t variable. Then read it from the serial port Serial.println();. First add Serial.begin(9600); in setup().

4. Screen color

tft.fillScreen(t); //fillScreen(uint16_t t);

The fillScreen function changes the screen t color to colorful. The t should be a 16-bit variable containing the UTFT color code.

#define BLACK 0x0000
#define NAVY 0x000F
#define DARKGREEN 0x03E0
#define DARKCYAN 0x03EF
#define MAROON 0x7800
#define PURPLE 0x780F
#define OLIVE 0x7BE0
#define LIGHTGREY 0xC618
#define DARKGREY 0x7BEF
#define BLUE 0x001F
#define GREEN 0x07E0
#define CYAN 0x07FF
#define RED 0xF800
#define MAGENTA 0xF81F
#define YELLOW 0xFFE0
#define WHITE 0xFFFF
#define ORANGE 0xFD20
#define GREENYELLOW 0xAFE5
#define PINK 0xF81F

You can add these lines to the top of your code and use the name of the color in the function.

5. Fill pixels

tft.drawPixel(x,y,t); //drawPixel(int16_t x, int16_t y, uint16_t t)tft.readPixel(x,y); //uint16_t readPixel(int16_t x, int16_t y)

The drawPixel function fills the pixel at position x and y with t color.

The readPixel function reads the pixel color at x and y position.

6. Draw a line

<p><font size="4">tft.drawFastVLine(x,y,h,t); //drawFastVLine(int16_t x, int16_t y, int16_t h, uint16_t t)</font></p><p><font size="4">tft.drawFastHLine(x,y,w,t); //drawFastHLine(int16_t x, int16_t y, int16_t w, uint16_t t)</font></p><p><font size="4">tft.drawLine(xi,yi,xj,yj,t); //drawLine(int16_t x0, int16_t y0, int16_t x1, int16_t y1, uint16_t t)</font></p>

The drawFastVLine function draws a vertical line starting from the x, y position, the length is h pixels, and the color is t.

The drawFastHLine function draws a horizontal line, starting at the x and y position, with a length of w pixels and a color of t.

The drawLine function draws a line starting at xi, ending at yi at positions xj and yj, with color t.

<p><font size="4">for (uint16_t a=0; a<5; a++){
    
    </font></p><p><font size="4">  tft.drawFastVLine(x+a, y, h, t);}  </font></p><p><font size="4">
</font></p><p><font size="4">for (uint16_t a=0; a<5; a++){
    
    </font></p><p><font size="4">  tft.drawFastHLine(x, y+a, w, t);}  </font></p><p><font size="4">
</font></p><p><font size="4">for (uint16_t a=0; a<5; a++){
    
    </font></p><p><font size="4">  tft.drawLine(xi+a, yi, xj+a, yj, t);} </font></p><p><font size="4">
</font></p><p><font size="4">for (uint16_t a=0; a<5; a++){
    
    </font></p><p><font size="4">  tft.drawLine(xi, yi+a, xj, yj+a, t);} </font></p>

These three code blocks draw lines like the previous code, with a width of 5 pixels.

7. Draw a rectangle

<p><font size="4">tft.fillRect(x,y,w,h,t); //fillRect(int16_t x, int16_t y, int16_t w, int16_t h, uint16_t t)</font></p><p><font size="4">tft.drawRect(x,y,w,h,t); //drawRect(int16_t x, int16_t y, int16_t w, int16_t h, uint16_t t)</font></p><p><font size="4">tft.fillRoundRect(x,y,w,h,r,t); //fillRoundRect (int16_t x, int16_t y, int16_t w, int16_t h, uint8_t R , uint16_t t)</font></p><p><font size="4">tft.drawRoundRect(x,y,w,h,r,t); //drawRoundRect(int16_t x, int16_t y, int16_t w, int16_t h, uint8_t R , uint16_t t)</font></p>

The fillRect function draws a filled rectangle at x and y position. w is the width, h is the height, and t is the color of the rectangle

The drawRect function draws a rectangle at position x and y, with width w, height h, and color t.

The fillRoundRect function draws a rounded filled rectangle of radius r at x and y position, w width and h height and t color.

The drawRoundRect function draws a rounded rectangle with radius r at x and y position, w width and h height and t color.

8. Draw a circle

tft.drawCircle(x,y,r,t); //drawCircle(int16_t x, int16_t y, int16_t r, uint16_t t)tft.fillCircle(x,y,r,t); //fillCircle(int16_t x, int16_t y, int16_t r, uint16_t t)

The drawCircle function draws a circle in x and y position with r radius and t color.

The fillCircle function draws a filled circle in x and y position with r radius and t color.

for (int p = 0; p < 4000; p++) {
    
      j = 120 * (sin(PI * p / 2000));  i = 120 * (cos(PI * p / 2000));  j2 = 60 * (sin(PI * p / 2000));  i2 = 60 * (cos(PI * p / 2000));  tft.drawLine(i2 + 160, j2 + 160, i + 160, j + 160, col[n]);}

With this code you can draw an arc. Change "for" to 0 to 4000.

9. Draw a triangle

tft.drawTriangle(x1,y1,x2,y2,x3,y3,t); //drawTriangle(int16_t x1, int16_t y1, int16_t x2, int16_t y2, int16_t x3, int16_t y3, uint16_t t)tft.fillTriangle(x1,y1,x2,y2,x3,y3,t); //fillTriangle(int16_t x1, int16_t y1, int16_t x2, int16_t y2, int16_t x3, int16_t y3, uint16_t t)

The drawTriangle function draws a triangle with three corner positions x, y and z and t color.

The fillTriangle function draws a filled triangle with three corner positions x, y and z and t color.

10. Display text

tft.setCursor(x,y); //setCursor(int16_t x, int16_t y)

This code sets the cursor position to x and y.

tft.setTextColor(t); //setTextColor(uint16_t t)tft.setTextColor(t,b); //setTextColor(uint16_t t, uint16_t b)

The first line sets the color of the text. The next line sets the color of the text and its background.

tft.setTextSize(s); //setTextSize(uint8_t s)

This code sets the size of the text to s. s is a number between 1 and 5.

tft.write(c); //write(uint8_t c)

This code displays a character.

<font size="4"><font color="#000000">tft.println("www.Electropeak.com");tft.print("www.Electropeak.com");</font></font>

The first function displays a string and moves the cursor to the next line.

The second function just displays the string.

showmsgXY(x,y,sz,&FreeSans9pt7b,"www.Electropeak.com"); //void showmsgXY(int x, int y, int sz, const GFXfont *f, const char *msg)void showmsgXY(int x, int y, int sz, const GFXfont *f, const char *msg){  int16_t x1, y1;  uint16_t wid, ht;  tft.setFont(f);  tft.setCursor(x, y);  tft.setTextColor(0x0000);  tft.setTextSize(sz);  tft.print(msg);}

This function changes the font of the text. You should add this function and font library.

for (int j = 0; j < 20; j++) {
    
      tft.setCursor(145, 290);  int color = tft.color565(r -= 12, g -= 12, b -= 12);  tft.setTextColor(color);  tft.print("www.Electropeak.com");  delay(30);}

This feature fades your text. You should add this to your code.

11. Rotate screen

tft.setRotation(r); //setRotation(uint8_t r)

This code rotates the screen. 0=0, 1=90, 2=180, 3=270.

12. Invert screen colors

tft.invertDisplay(i); //invertDisplay(boolean i)

This code gives the RGB code and gets the UTFT color code.

13. Scroll the screen

Scrolling the Screen

This code scrolls your screen. Maxroll is the maximum height to scroll.

14. Restart

tft.reset();

This code resets the screen.

15. Display monochrome images

static const uint8_t name[] PROGMEM = {
    
      //Add image code here.}tft.drawBitmap(x, y, name, sx, sy, 0x0000);

First, the image should be converted to hex code. Download the software from the link below. If you don't want to change the software's settings, you have to invert the colors of the image, mirror the image horizontally and rotate it 90 degrees counterclockwise. Now add it to the software and convert it. Open the exported file and copy the hex codes to the Arduino IDE. x and y are the position of the image. sx and sy are the size of the image. The color of the image can be changed in the last input.

Necessary files and downloads:
insert image description here

RGB color image display

insert image description here

First, you should convert the image to code. Use this link to convert the image:

http://www.rinkydinkelectronics.com/t_imageconverter565.php

Upload your image and download the converted file that the UTFT library can handle. Now copy the hex code to the Arduino IDE. x and y are the position of the image. sx and sy are the size of the image.

Use cases of several driver libraries

1. A string and 8 filled circles that change color sequentially. To draw circles around static points, you can use the sin(); and cos(); functions. The PI number should be defined. To change the color, you can use the color565(); function and replace your RGB codes.

Project Fifteen: A string and 8 filled circles that change color in sequence

Experimental open source code

/*

 【Arduino】168种传感器模块系列实验（资料代码+仿真编程+图形编程）

 实验一百五十六：2.4寸TFT液晶触摸屏 彩屏模块 TFT-LCD 高清真彩显示屏

 项目十五：一个字符串和 8 个按顺序改变颜色的实心圆圈

 模块直插，引脚用法如下：

 LCD_CS LCD_CD LCD_WR LCD_RD LCD_RST SD_SS SD_DI SD_DO SD_SCK

 Arduino Uno A3 A2 A1 A0 A4 10 11 12 13

 LCD_D0 LCD_D1 LCD_D2 LCD_D3 LCD_D4 LCD_D5 LCD_D6 LCD_D7

 Arduino Uno 8 9 2 3 4 5 6 7

*/

#include "Adafruit_GFX.h"

#include "MCUFRIEND_kbv.h"

MCUFRIEND_kbv tft;

#include "Fonts/FreeSans9pt7b.h"

#include "Fonts/FreeSans12pt7b.h"

#include "Fonts/FreeSerif12pt7b.h"

#include "FreeDefaultFonts.h"

#define PI 3.1415926535897932384626433832795

int col[8];

void showmsgXY(int x, int y, int sz, const GFXfont *f, const char *msg) {
    
    

 int16_t x1, y1;

 uint16_t wid, ht;

 tft.setFont(f);

 tft.setCursor(x, y);

 tft.setTextColor(0x0000);

 tft.setTextSize(sz);

 tft.print(msg);

}

void setup() {
    
    

 tft.reset();

 Serial.begin(9600);

 uint16_t ID = tft.readID();

 tft.begin(ID);

 tft.setRotation(1);

 tft.invertDisplay(true);

 tft.fillScreen(0xffff);

 showmsgXY(90, 200, 2, &FreeSans9pt7b, "Loading......");

 col[0] = tft.color565(155, 0, 50);

 col[1] = tft.color565(170, 30, 80);

 col[2] = tft.color565(195, 60, 110);

 col[3] = tft.color565(215, 90, 140);

 col[4] = tft.color565(230, 120, 170);

 col[5] = tft.color565(250, 150, 200);

 col[6] = tft.color565(255, 180, 220);

 col[7] = tft.color565(255, 210, 240);

}

void loop() {
    
    

 for (int i = 8; i > 0; i--) {
    
    

  tft.fillCircle(180 + 40 * (cos(-i * PI / 4)), 100 + 40 * (sin(-i * PI / 4)), 10, col[0]); delay(15);

  tft.fillCircle(180 + 40 * (cos(-(i + 1)*PI / 4)), 100 + 40 * (sin(-(i + 1)*PI / 4)), 10, col[1]); delay(15);

  tft.fillCircle(180 + 40 * (cos(-(i + 2)*PI / 4)), 100 + 40 * (sin(-(i + 2)*PI / 4)), 10, col[2]); delay(15);

  tft.fillCircle(180 + 40 * (cos(-(i + 3)*PI / 4)), 100 + 40 * (sin(-(i + 3)*PI / 4)), 10, col[3]); delay(15);

  tft.fillCircle(180 + 40 * (cos(-(i + 4)*PI / 4)), 100 + 40 * (sin(-(i + 4)*PI / 4)), 10, col[4]); delay(15);

  tft.fillCircle(180 + 40 * (cos(-(i + 5)*PI / 4)), 100 + 40 * (sin(-(i + 5)*PI / 4)), 10, col[5]); delay(15);

  tft.fillCircle(180 + 40 * (cos(-(i + 6)*PI / 4)), 100 + 40 * (sin(-(i + 6)*PI / 4)), 10, col[6]); delay(15);

  tft.fillCircle(180 + 40 * (cos(-(i + 7)*PI / 4)), 100 + 40 * (sin(-(i + 7)*PI / 4)), 10, col[7]); delay(15);

 }

}