title: TFT LCD ILI9341 Display_1
date: 2020-08-27 16:33:31
tags: ‘MCU’
Article Directory
Introduction
Due to project requirements, a screen control needs to be made, which supports button control and touch control
After some consideration, I chose the easier Arduino Uno and 2.4” TFT LCD with Touch (ILI9341)
Needed Libraries
Adafruit_GFX
Adafruit_TFTLCD
coordinate
I sorted out this coordinate and found that there are two types. . The second type has no verification for now, so let's not put it up yet.
Let me talk about the first display coordinate system, because the screen size is 240 * 320
Therefore, the coordinate system adopted by the GFX library is in pixels, and the size is completely clear.
Adafruit_GFX
class Adafruit_GFX : public Print {
public:
Adafruit_GFX(int16_t w, int16_t h); // Constructor
virtual void drawPixel(int16_t x, int16_t y, uint16_t color) = 0;
virtual void startWrite(void);
virtual void writePixel(int16_t x, int16_t y, uint16_t color);
virtual void writeFillRect(int16_t x, int16_t y, int16_t w, int16_t h,
uint16_t color);
virtual void writeFastVLine(int16_t x, int16_t y, int16_t h, uint16_t color);
virtual void writeFastHLine(int16_t x, int16_t y, int16_t w, uint16_t color);
virtual void writeLine(int16_t x0, int16_t y0, int16_t x1, int16_t y1,
uint16_t color);
virtual void endWrite(void);
virtual void setRotation(uint8_t r);
virtual void invertDisplay(bool i);
virtual void drawFastVLine(int16_t x, int16_t y, int16_t h, uint16_t color);
virtual void drawFastHLine(int16_t x, int16_t y, int16_t w, uint16_t color);
virtual void fillRect(int16_t x, int16_t y, int16_t w, int16_t h,
uint16_t color);
virtual void fillScreen(uint16_t color);
// Optional and probably not necessary to change
virtual void drawLine(int16_t x0, int16_t y0, int16_t x1, int16_t y1,
uint16_t color);
virtual void drawRect(int16_t x, int16_t y, int16_t w, int16_t h,
uint16_t color);
// These exist only with Adafruit_GFX (no subclass overrides)
void drawCircle(int16_t x0, int16_t y0, int16_t r, uint16_t color);
void drawCircleHelper(int16_t x0, int16_t y0, int16_t r, uint8_t cornername,
uint16_t color);
void fillCircle(int16_t x0, int16_t y0, int16_t r, uint16_t color);
void fillCircleHelper(int16_t x0, int16_t y0, int16_t r, uint8_t cornername,
int16_t delta, uint16_t color);
void drawTriangle(int16_t x0, int16_t y0, int16_t x1, int16_t y1, int16_t x2,
int16_t y2, uint16_t color);
void fillTriangle(int16_t x0, int16_t y0, int16_t x1, int16_t y1, int16_t x2,
int16_t y2, uint16_t color);
void drawRoundRect(int16_t x0, int16_t y0, int16_t w, int16_t h,
int16_t radius, uint16_t color);
void fillRoundRect(int16_t x0, int16_t y0, int16_t w, int16_t h,
int16_t radius, uint16_t color);
void drawBitmap(int16_t x, int16_t y, const uint8_t bitmap[], int16_t w,
int16_t h, uint16_t color);
void drawBitmap(int16_t x, int16_t y, const uint8_t bitmap[], int16_t w,
int16_t h, uint16_t color, uint16_t bg);
void drawBitmap(int16_t x, int16_t y, uint8_t *bitmap, int16_t w, int16_t h,
uint16_t color);
void drawBitmap(int16_t x, int16_t y, uint8_t *bitmap, int16_t w, int16_t h,
uint16_t color, uint16_t bg);
void drawXBitmap(int16_t x, int16_t y, const uint8_t bitmap[], int16_t w,
int16_t h, uint16_t color);
void drawGrayscaleBitmap(int16_t x, int16_t y, const uint8_t bitmap[],
int16_t w, int16_t h);
void drawGrayscaleBitmap(int16_t x, int16_t y, uint8_t *bitmap, int16_t w,
int16_t h);
void drawGrayscaleBitmap(int16_t x, int16_t y, const uint8_t bitmap[],
const uint8_t mask[], int16_t w, int16_t h);
void drawGrayscaleBitmap(int16_t x, int16_t y, uint8_t *bitmap, uint8_t *mask,
int16_t w, int16_t h);
void drawRGBBitmap(int16_t x, int16_t y, const uint16_t bitmap[], int16_t w,
int16_t h);
void drawRGBBitmap(int16_t x, int16_t y, uint16_t *bitmap, int16_t w,
int16_t h);
void drawRGBBitmap(int16_t x, int16_t y, const uint16_t bitmap[],
const uint8_t mask[], int16_t w, int16_t h);
void drawRGBBitmap(int16_t x, int16_t y, uint16_t *bitmap, uint8_t *mask,
int16_t w, int16_t h);
void drawChar(int16_t x, int16_t y, unsigned char c, uint16_t color,
uint16_t bg, uint8_t size);
void drawChar(int16_t x, int16_t y, unsigned char c, uint16_t color,
uint16_t bg, uint8_t size_x, uint8_t size_y);
void getTextBounds(const char *string, int16_t x, int16_t y, int16_t *x1,
int16_t *y1, uint16_t *w, uint16_t *h);
void getTextBounds(const __FlashStringHelper *s, int16_t x, int16_t y,
int16_t *x1, int16_t *y1, uint16_t *w, uint16_t *h);
void getTextBounds(const String &str, int16_t x, int16_t y, int16_t *x1,
int16_t *y1, uint16_t *w, uint16_t *h);
void setTextSize(uint8_t s);
void setTextSize(uint8_t sx, uint8_t sy);
void setFont(const GFXfont *f = NULL);
void setCursor(int16_t x, int16_t y) {
cursor_x = x;
cursor_y = y;
}
void setTextColor(uint16_t c) { textcolor = textbgcolor = c; }
void setTextColor(uint16_t c, uint16_t bg) {
textcolor = c;
textbgcolor = bg;
}
void setTextWrap(bool w) { wrap = w; }
void cp437(bool x = true) { _cp437 = x; }
using Print::write;
#if ARDUINO >= 100
virtual size_t write(uint8_t);
#else
virtual void write(uint8_t);
#endif
int16_t width(void) const { return _width; };
int16_t height(void) const { return _height; }
uint8_t getRotation(void) const { return rotation; }
int16_t getCursorX(void) const { return cursor_x; }
int16_t getCursorY(void) const { return cursor_y; };
protected:
void charBounds(unsigned char c, int16_t *x, int16_t *y, int16_t *minx,
int16_t *miny, int16_t *maxx, int16_t *maxy);
int16_t WIDTH; ///< This is the 'raw' display width - never changes
int16_t HEIGHT; ///< This is the 'raw' display height - never changes
int16_t _width; ///< Display width as modified by current rotation
int16_t _height; ///< Display height as modified by current rotation
int16_t cursor_x; ///< x location to start print()ing text
int16_t cursor_y; ///< y location to start print()ing text
uint16_t textcolor; ///< 16-bit background color for print()
uint16_t textbgcolor; ///< 16-bit text color for print()
uint8_t textsize_x; ///< Desired magnification in X-axis of text to print()
uint8_t textsize_y; ///< Desired magnification in Y-axis of text to print()
uint8_t rotation; ///< Display rotation (0 thru 3)
bool wrap; ///< If set, 'wrap' text at right edge of display
bool _cp437; ///< If set, use correct CP437 charset (default is off)
GFXfont *gfxFont; ///< Pointer to special font
};
/// A simple drawn button UI element
class Adafruit_GFX_Button {
public:
Adafruit_GFX_Button(void);
// "Classic" initButton() uses center & size
void initButton(Adafruit_GFX *gfx, int16_t x, int16_t y, uint16_t w,
uint16_t h, uint16_t outline, uint16_t fill,
uint16_t textcolor, char *label, uint8_t textsize);
void initButton(Adafruit_GFX *gfx, int16_t x, int16_t y, uint16_t w,
uint16_t h, uint16_t outline, uint16_t fill,
uint16_t textcolor, char *label, uint8_t textsize_x,
uint8_t textsize_y);
// New/alt initButton() uses upper-left corner & size
void initButtonUL(Adafruit_GFX *gfx, int16_t x1, int16_t y1, uint16_t w,
uint16_t h, uint16_t outline, uint16_t fill,
uint16_t textcolor, char *label, uint8_t textsize);
void initButtonUL(Adafruit_GFX *gfx, int16_t x1, int16_t y1, uint16_t w,
uint16_t h, uint16_t outline, uint16_t fill,
uint16_t textcolor, char *label, uint8_t textsize_x,
uint8_t textsize_y);
void drawButton(bool inverted = false);
bool contains(int16_t x, int16_t y);
void press(bool p) {
laststate = currstate;
currstate = p;
}
bool justPressed();
bool justReleased();
bool isPressed(void) { return currstate; };
private:
Adafruit_GFX *_gfx;
int16_t _x1, _y1; // Coordinates of top-left corner
uint16_t _w, _h;
uint8_t _textsize_x;
uint8_t _textsize_y;
uint16_t _outlinecolor, _fillcolor, _textcolor;
char _label[10];
bool currstate, laststate;
};
class GFXcanvas1 : public Adafruit_GFX {
public:
GFXcanvas1(uint16_t w, uint16_t h);
~GFXcanvas1(void);
void drawPixel(int16_t x, int16_t y, uint16_t color);
void fillScreen(uint16_t color);
bool getPixel(int16_t x, int16_t y) const;
uint8_t *getBuffer(void) const { return buffer; }
protected:
bool getRawPixel(int16_t x, int16_t y) const;
private:
uint8_t *buffer;
#ifdef __AVR__
static const uint8_t PROGMEM GFXsetBit[], GFXclrBit[];
#endif
};
class GFXcanvas8 : public Adafruit_GFX {
public:
GFXcanvas8(uint16_t w, uint16_t h);
~GFXcanvas8(void);
void drawPixel(int16_t x, int16_t y, uint16_t color);
void fillScreen(uint16_t color);
void writeFastHLine(int16_t x, int16_t y, int16_t w, uint16_t color);
uint8_t getPixel(int16_t x, int16_t y) const;
uint8_t *getBuffer(void) const { return buffer; }
protected:
uint8_t getRawPixel(int16_t x, int16_t y) const;
private:
uint8_t *buffer;
};
class GFXcanvas16 : public Adafruit_GFX {
public:
GFXcanvas16(uint16_t w, uint16_t h);
~GFXcanvas16(void);
void drawPixel(int16_t x, int16_t y, uint16_t color);
void fillScreen(uint16_t color);
void byteSwap(void);
uint16_t getPixel(int16_t x, int16_t y) const;
uint16_t *getBuffer(void) const { return buffer; }
protected:
uint16_t getRawPixel(int16_t x, int16_t y) const;
private:
uint16_t *buffer;
};
Adafruit_TFTLCD
class Adafruit_TFTLCD : public Adafruit_GFX {
public:
Adafruit_TFTLCD(uint8_t cs, uint8_t cd, uint8_t wr, uint8_t rd, uint8_t rst);
Adafruit_TFTLCD(void);
void begin(uint16_t id = 0x9325);
void drawPixel(int16_t x, int16_t y, uint16_t color);
void drawFastHLine(int16_t x0, int16_t y0, int16_t w, uint16_t color);
void drawFastVLine(int16_t x0, int16_t y0, int16_t h, uint16_t color);
void fillRect(int16_t x, int16_t y, int16_t w, int16_t h, uint16_t c);
void fillScreen(uint16_t color);
void reset(void);
void setRegisters8(uint8_t *ptr, uint8_t n);
void setRegisters16(uint16_t *ptr, uint8_t n);
void setRotation(uint8_t x);
void setAddrWindow(int x1, int y1, int x2, int y2);
void pushColors(uint16_t *data, uint8_t len, boolean first);
uint16_t color565(uint8_t r, uint8_t g, uint8_t b),
readPixel(int16_t x, int16_t y), readID(void);
uint32_t readReg(uint8_t r);
private:
void init(),
Just talk about it
Create object
Adafruit_TFTLCD tft(LCD_CS, LCD_CD, LCD_WR, LCD_RD, LCD_RESET);
void setup(void) {
tft.reset();
tft.begin(0x9341);
}
First, an Adafruit_TFTLCD object is created, named tft, and the pin definition is omitted here.
0x9341 in the begin method means to change the driver of TFT LCD to ILI9341, the others are not introduced here
screen
void fillScreen(uint16_t color);
uint16_t width(); //屏幕的宽度
uint16_t height(); //屏幕的高度
Fill the full screen with color, and the content displayed before will be blocked again
Case
tft.fillScreen(BLACK);
delay(1000);
tft.fillScreen(RED);
delay(1000);
tft.fillScreen(BLUE);
delay(1000);
point
void drawPixel(int16_t x, int16_t y, uint16_t color);
Draw a pixel with color on the point (x, y).
Case
tft.drawPixel(1,1,RED);
tft.drawPixel(10,10,RED);
tft.drawPixel(20,20,RED);
tft.drawPixel(40,40,RED);
tft.drawPixel(60,60,RED);
line
void drawLine(int16_t x0, int16_t y0, int16_t x1, int16_t y1, uint16_t color);
void drawFastHLine(int16_t x0, int16_t y0, int16_t w, uint16_t color);
void drawFastVLine(int16_t x0, int16_t y0, int16_t h, uint16_t color);
The simplest is to determine a straight line with two points. Of course, you can also determine a point, direction, and length. The last two are to draw a horizontal line or a plumb line.
Case
tft.drawFastHLine(10,10,170,RED);
tft.drawFastVLine(10,10,170,RED);
tft.drawLine(10,10,100,180,RED);
Rectangle &&Rounded Rectangle
void drawRect(int16_t x, int16_t y, int16_t w, int16_t h, uint16_t c);
void fillRect(int16_t x, int16_t y, int16_t w, int16_t h, uint16_t c);
void drawRoundRect(int16_t x, int16_t y, int16_t w, int16_t h, int16_t radius, uint16_t color);
void fillRoundRect(int16_t x, int16_t y, int16_t w, int16_t h, int16_t radius, uint16_t color);
The rectangle of drawRect draws the border straight without filling the inside. If you need to fill the color inside, you need to use fillRect
The rounded rectangle has an additional parameter raduis to set the radius of the rounded corners, and whether the filling is the same as above.
Case
tft.drawRect(10,10,150,100,RED);
tft.fillRect(10,120,150,100,RED);
tft.drawRoundRect(10,10,150,100,10,RED);
tft.fillRoundRect(10,120,150,100,10,RED);
Round
void drawCircle(uint16_t x0, uint16_t y0, uint16_t r, uint16_t color);
void fillCircle(uint16_t x0, uint16_t y0, uint16_t r, uint16_t color);
This is relatively simple, center coordinates (x0, y0), radius r, color color
Case
tft.drawCircle(100,100,50,WHITE);
tft.fillCircle(100,260,50,BLUE);
triangle
void drawTriangle(uint16_t x0, uint16_t y0, uint16_t x1, uint16_t y1, uint16_t x2, uint16_t y2, uint16_t color);
void fillTriangle(uint16_t x0, uint16_t y0, uint16_t x1, uint16_t y1, uint16_t x2, uint16_t y2, uint16_t color);
The triangle needs to determine three vertices and colors
Case
tft.drawTriangle(10,10,100,15,180,100,GREEN);
tft.fillTriangle(10,110,100,115,180,200,GREEN);
Characters && English text
void drawChar(uint16_t x, uint16_t y, char c, uint16_t color, uint16_t bg, uint8_t size);
void setCursor(uint16_t x0, uint16_t y0); //字体左上角顶点坐标
void setTextColor(uint16_t color); //字体前景色
void setTextColor(uint16_t color, uint16_t backgroundcolor);//字体前景色与背景色
void setTextSize(uint8_t size); //字体大小放法因子
void setTextWrap(boolean w); //是否自动换行，默认为true，滚动显示设置为false
drawChar can only display a single character. It is necessary to determine the top left corner vertex coordinates (x, y), character c, color color, foreground color, background color bg, size, size is 1 means 5 * 8 pixels, 2 means 10 * 16
Custom fonts do not support background colors, you can draw shapes with filled colors before that, such as rounded rectangles
Case
tft.fillScreen(GREEN);
tft.drawChar(150,10,'A',RED,WHITE,5);
tft.setCursor(10,50);
tft.print("AB 3.14"); //默认前景色white、无背景色、大小为1
tft.setCursor(10,80);
tft.setTextSize( 4);
tft.print("AB 3.14");
tft.setCursor(10,115);
tft.setTextColor(RED); //背景色不做设置
tft.setTextSize( 4);
tft.print("AB你好3.141516");
tft.setCursor(10,180);
tft.setTextColor(RED, WHITE);
tft.setTextSize( 4);
tft.setTextWrap(false);
tft.print("AB你好3.141516");
You can see that the default font does not support Chinese, you need to use Chinese to make up another day
Spin
void setRotation(uint8_t rotation);
The rotation parameter can be 0, 1, 2 or 3, corresponding to 0, 90, 180 or 270 degrees respectively.
For the display belonging to the Arduino shield, a rotation value of 0 will set the display to portrait (high) mode, and a rotation value of 2 will also be in portrait mode. Rotation 1 is landscape mode, and rotation 3 is also landscape mode.
Case
//tft.setRotation(1); //注释和未注释的情况下做对比
tft.fillScreen(GREEN);
tft.drawChar(150,10,'A',RED,WHITE,5);
tft.setCursor(10,50);
tft.print("AB 3.14"); //默认前景色white、无背景色、大小为1
tft.setCursor(10,80);
tft.setTextSize( 4);
tft.print("AB 3.14");
tft.setCursor(10,115);
tft.setTextColor(RED); //背景色不做设置
tft.setTextSize( 4);
tft.print("AB你好3.141516");
tft.setCursor(10,180);
tft.setTextColor(RED, WHITE);
tft.setTextSize( 4);
tft.setTextWrap(false);
tft.print("AB你好3.141516");
Conclusion
Up to now, the case program TestDraw_1.ino has been uploaded to github, address portal
There are also some content that is slowly updated, such as displaying Chinese, taking a model to make a bitmap, displaying images, touch functions, etc., the next portal
References
- https://github.com/adafruit/TFTLCD-Library
- https://github.com/adafruit/Adafruit-GFX-Library
- https://github.com/BackMountainDevil/UNO-TFTLCD-ILI9341-Demo
- https://blog.csdn.net/weixin_43031092/article/details/108159783
- https://blog.csdn.net/weixin_43031092/article/details/10800748