Home
- Installation
- Connecting TFT to an Arduino
- Method Reference
- Standard (Monospace) Fonts
- GFX (Proportional) Fonts
- Color Reference
This is a library for the ILI9225 TFT display products, forked from the screen_4D_22_library library.
This library works with the ILI9225 based 2.2" 176x220 TFT LCD shields commonly found on eBay. Note that there is a commonly available 2.2" 240x320 TFT module very similar in appearance but using the ILI9341 driver.
Arduino Library Manager:
- In the Arduino IDE menu, select:
- Sketch
- Include Library
- Manage Libraries...
- In the resulting Library Manager dialog:
- Enter "9225" in the search filter field (Filter your search...)
- Select TFT_22_ILI9225" in the list
- Click the Install button
Direct Install:
- Click the Download ZIP button on the right to download TFT_22_ILI9225-master.zip
- Extract the ZIP file to the library folder your arduinosketchfolder/libraries/ folder. You may need to create the libraries subfolder if it's your first library.
- Rename the uncompressed folder from TFT_22_ILI9225-master to TFT_22_ILI9225
- Restart the Arduino IDE
| TFT Pin | TFT Pin Label | Description | Arduino Pin (Uno) | Arduino Pin Label |
|---|---|---|---|---|
| 1 | VCC | +5V Supply | ||
| 2 | GND | Ground | Only one ground has to be used | |
| 3 | GND | Ground | ||
| 4 | NC | No Connection | ||
| 5 | NC | No Connection | ||
| 6 | LED | LED Backlight | 3 | Can be any open digital pin or directly to +5V. For brightness control use any PWM pin |
| 7 | CLK | SPI Clock | 13 | SCK |
| 8 | SDI | SPI MOSI | 11 | MOSI |
| 9 | RS | SPI Data/Command Select | 9 | Can be any open digital pin |
| 10 | RST | Reset | 8 | Can be any open digital pin |
| 11 | CS | SPI Chip Select | 10 | SS |
| TFT Pin | TFT Pin Label | Description | ESP32 Pin (WROOM32) | ESP32 Pin Label |
|---|---|---|---|---|
| 1 | VCC | +5V Supply | 5V | Note that this has to be +5V |
| 2 | GND | Ground | GND | Only one ground has to be used |
| 3 | GND | Ground | GND | |
| 4 | NC | No Connection | ||
| 5 | NC | No Connection | ||
| 6 | LED | LED Backlight | 5V | Use 5V, brightness control support to be confirmed |
| 7 | CLK | SPI Clock | 14 | HSPI-SCK |
| 8 | SDI | SPI MOSI | 13 | HSPI-MOSI |
| 9 | RS | SPI Data/Command Select | 25 | Can be any open digital pin |
| 10 | RST | Reset | 26 | Can be any open digital pin |
| 11 | CS | SPI Chip Select | 15 | HSPI-SS0 |
There are versions of this module (pictured below) that have a different pinout, please pay attention to the pin labels and change connections as required.
| function | Description |
|---|---|
| begin | Initialization |
| clear | Clear the screen |
| invert | Invert screen |
| setBacklight | Switch backlight on or off |
| setBacklightBrightness | Set backlight brightness 0-255 |
| setDisplay | Switch display on or off |
| setOrientation | Set orientation |
| getOrientation | Get orientation |
| maxX | Screen size, x-axis |
| maxY | Screen size, y-axis |
| drawCircle | Draw circle |
| fillCircle | Draw solid circle |
| setBackgroundColor | Set background color |
| drawLine | Draw line, rectangle coordinates |
| drawRectangle | Draw rectangle, rectangle coordinates |
| fillRectangle | Draw solid rectangle, rectangle coordinates |
| drawPixel | Draw pixel |
| drawText | Draw ASCII Text (pixel coordinates) |
| setColor | Calculate 16-bit color from 8-bit Red-Green-Blue components |
| splitColor | Calculate 8-bit Red-Green-Blue components from 16-bit color |
| drawTriangle | Draw triangle, triangle coordinates |
| fillTriangle | Draw solid triangle, triangle coordinates |
| setFont | Set current font |
| drawChar | Draw single character (pixel coordinates) |
| drawBitmap | Draw bitmap |
| drawXBitmap | Draw XBitMap Files (*.xbm), exported from GIMP |
| setGFXFont | Set current GFX font |
| drawGFXText | Draw a string with the current GFX font |
| getGFXTextExtent | Get the width & height of a text string with the current GFX font |
| drawGFXChar | Draw a single character with the current GFX font |
/// Initialization
void begin(void); /// Clear the screen
void clear(void); /// Invert screen
/// @param flag true to invert, false for normal screen
void invert(boolean flag); /// Switch backlight on or off
/// @param flag true=on, false=off
void setBacklight(boolean flag); /// Set backlight brightness
/// @param brightness sets backlight brightness 0-255
void setBacklightBrightness(uint8_t brightness); /// Switch display on or off
/// @param flag true=on, false=off
void setDisplay(boolean flag); /// Set orientation
/// @param orientation orientation, 0=portrait, 1=right rotated landscape, 2=reverse portrait, 3=left rotated landscape
void setOrientation(uint8_t orientation); /// Get orientation
/// @return orientation orientation, 0=portrait, 1=right rotated landscape, 2=reverse portrait, 3=left rotated landscape
uint8_t getOrientation(void); /// Screen size, x-axis
/// @return horizontal size of the screen, in pixels
/// @note 240 means 240 pixels and thus 0..239 coordinates (decimal)
uint16_t maxX(void); /// Screen size, y-axis
/// @return vertical size of the screen, in pixels
/// @note 220 means 220 pixels and thus 0..219 coordinates (decimal)
uint16_t maxY(void); /// Draw circle
/// @param x0 center, point coordinate, x-axis
/// @param y0 center, point coordinate, y-axis
/// @param radius radius
/// @param color 16-bit color
void drawCircle(uint16_t x0, uint16_t y0, uint16_t radius, uint16_t color); /// Draw solid circle
/// @param x0 center, point coordinate, x-axis
/// @param y0 center, point coordinate, y-axis
/// @param radius radius
/// @param color 16-bit color
void fillCircle(uint8_t x0, uint8_t y0, uint8_t radius, uint16_t color); /// Set background color
/// @param color background color, default=black
void setBackgroundColor(uint16_t color = COLOR_BLACK); /// Draw line, rectangle coordinates
/// @param x1 top left coordinate, x-axis
/// @param y1 top left coordinate, y-axis
/// @param x2 bottom right coordinate, x-axis
/// @param y2 bottom right coordinate, y-axis
/// @param color 16-bit color
void drawLine(uint16_t x1, uint16_t y1, uint16_t x2, uint16_t y2, uint16_t color); /// Draw rectangle, rectangle coordinates
/// @param x1 top left coordinate, x-axis
/// @param y1 top left coordinate, y-axis
/// @param x2 bottom right coordinate, x-axis
/// @param y2 bottom right coordinate, y-axis
/// @param color 16-bit color
void drawRectangle(uint16_t x1, uint16_t y1, uint16_t x2, uint16_t y2, uint16_t color); /// Draw solid rectangle, rectangle coordinates
/// @param x1 top left coordinate, x-axis
/// @param y1 top left coordinate, y-axis
/// @param x2 bottom right coordinate, x-axis
/// @param y2 bottom right coordinate, y-axis
/// @param color 16-bit color
void fillRectangle(uint16_t x1, uint16_t y1, uint16_t x2, uint16_t y2, uint16_t color); /// Draw pixel
/// @param x1 point coordinate, x-axis
/// @param y1 point coordinate, y-axis
/// @param color 16-bit color
void drawPixel(uint16_t x1, uint16_t y1, uint16_t color); /// Draw ASCII Text (pixel coordinates)
/// @param x point coordinate, x-axis
/// @param y point coordinate, y-axis
/// @param s text string
/// @param color 16-bit color, default=white
void drawText(uint16_t x, uint16_t y, String s, uint16_t color = COLOR_WHITE); /// Calculate 16-bit color from 8-bit Red-Green-Blue components
/// @param red red component, 0x00..0xff
/// @param green green component, 0x00..0xff
/// @param blue blue component, 0x00..0xff
/// @return 16-bit color
uint16_t setColor(uint8_t red, uint8_t green, uint8_t blue); /// Calculate 8-bit Red-Green-Blue components from 16-bit color
/// @param rgb 16-bit color
/// @param red red component, 0x00..0xff
/// @param green green component, 0x00..0xff
/// @param blue blue component, 0x00..0xff
void splitColor(uint16_t rgb, uint8_t &red, uint8_t &green, uint8_t &blue); /// Draw triangle, triangle coordinates
/// @param x1 corner 1 coordinate, x-axis
/// @param y1 corner 1 coordinate, y-axis
/// @param x2 corner 2 coordinate, x-axis
/// @param y2 corner 2 coordinate, y-axis
/// @param x3 corner 3 coordinate, x-axis
/// @param y3 corner 3 coordinate, y-axis
/// @param color 16-bit color
void drawTriangle(uint16_t x1, uint16_t y1, uint16_t x2, uint16_t y2, uint16_t x3, uint16_t y3, uint16_t color); /// Draw solid triangle, triangle coordinates
/// @param x1 corner 1 coordinate, x-axis
/// @param y1 corner 1 coordinate, y-axis
/// @param x2 corner 2 coordinate, x-axis
/// @param y2 corner 2 coordinate, y-axis
/// @param x3 corner 3 coordinate, x-axis
/// @param y3 corner 3 coordinate, y-axis
/// @param color 16-bit color
void fillTriangle(uint16_t x1, uint16_t y1, uint16_t x2, uint16_t y2, uint16_t x3, uint16_t y3, uint16_t color); /// Set current font
/// @param font Font name
void setFont(uint8_t* font); /// Draw single character (pixel coordinates)
/// @param x point coordinate, x-axis
/// @param y point coordinate, y-axis
/// @param ch ASCII character
/// @param color 16-bit color, default=white
/// @return width of character in display pixels
uint16_t drawChar(uint16_t x, uint16_t y, uint16_t ch, uint16_t color = COLOR_WHITE);Image2Code is a small java utility to convert images into a byte array that can be used as a bitmap with the drawBitmap methods: Img2Code
/// Draw bitmap
/// @param x point coordinate, x-axis
/// @param y point coordinate, y-axis
/// @param bitmap
/// @param w width
/// @param h height
/// @param color 16-bit color, default=white
/// @param bg 16-bit color, background
// Draw a 1-bit image (bitmap) at the specified (x,y) position from the
// provided bitmap buffer (must be PROGMEM memory) using the specified
// foreground color (unset bits are transparent).
void drawBitmap(int16_t x, int16_t y, const uint8_t *bitmap, int16_t w, int16_t h, uint16_t color);
// Draw a 1-bit image (bitmap) at the specified (x,y) position from the
// provided bitmap buffer (must be PROGMEM memory) using the specified
// foreground (for set bits) and background (for clear bits) colors.
void drawBitmap(int16_t x, int16_t y, const uint8_t *bitmap, int16_t w, int16_t h, uint16_t color, uint16_t bg);
// drawBitmap() variant for RAM-resident (not PROGMEM) bitmaps.
void drawBitmap(int16_t x, int16_t y, uint8_t *bitmap, int16_t w, int16_t h, uint16_t color);
// drawBitmap() variant w/background for RAM-resident (not PROGMEM) bitmaps.
void drawBitmap(int16_t x, int16_t y, uint8_t *bitmap, int16_t w, int16_t h, uint16_t color, uint16_t bg);Usage: Export from GIMP to *.xbm, rename *.xbm to *.c and open in editor. C Array can be directly used with this function. For more details: Add XBitmap support (direct usage GIMP *.xbm files)
/// Draw XBitMap Files (*.xbm), exported from GIMP
/// @param x point coordinate, x-axis
/// @param y point coordinate, y-axis
/// @param bitmap
/// @param w width
/// @param h height
/// @param color 16-bit color, default=white
void drawXBitmap(int16_t x, int16_t y, const uint8_t *bitmap, int16_t w, int16_t h, uint16_t color); /// Set current GFX font
/// @param f GFX font name defined in include file
void setGFXFont(const GFXfont *f = NULL); /// Draw a string with the current GFX font
/// @param x point coordinate, x-axis
/// @param y point coordinate, y-axis
/// @param s string to print
/// @param color 16-bit color
void drawGFXText(int16_t x, int16_t y, String s, uint16_t color); /// Get the width & height of a text string with the current GFX font
/// @param str string to analyze
/// @param x point coordinate, x-axis
/// @param y point coordinate, y-axis
/// @param w width in pixels of string
/// @param h height in pixels of string
void getGFXTextExtent(String str, int16_t x, int16_t y, int16_t *w, int16_t *h); /// Draw a single character with the current GFX font
/// @param x point coordinate, x-axis
/// @param y point coordinate, y-axis
/// @param c character to draw
/// @param color 16-bit color
/// @return width of character in display pixels
uint16_t drawGFXChar(int16_t x, int16_t y, unsigned char c, uint16_t color);| Font Name | Width (pixels) | Height (pixels) | Offset (start char) | Number of chars |
|---|---|---|---|---|
| Terminal6x8 | 6 | 8 | 32 | 96 |
| Terminal11x16 | 11 | 16 | 32 | 96 |
| Terminal12x16 | 12 | 16 | 32 | 96 |
| Trebuchet_MS16x21 | 16 | 21 | 46 | 13 |
Font can be added with GLCD Font Creator (Windows only unfortunately)
- Export the C font file from GLCD Font Creator & save it to your sketch directory.
- Change the datatype to:
const uint8_t FontName[] PROGMEM = {- Add 4 bytes between the definition & first character definition data line (width, height, offset, characters):
const uint8_t FontName[] PROGMEM = {
0x06, 0x08, 0x20, 0x60, // width = 6, height = 8, offset = 32 (space), characters = 96 (32 - 127)***
0x04, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, // Code for char - Add a external reference in your Arduino sketch pointing to the font:
extern uint8_t FontName[];Adafruit has information on generating fonts for their GFX library which will work with this library: Adafruit GFX Graphics Library: Using Fonts.
Several fonts are included in the fonts folder of the library source code folder.
- Include the font include file in your Arduino sketch
#include <../fonts/FreeSans12pt7b.h>- Select the font to use it
tft.setGFXFont(&FreeSans12pt7b);- These fonts are dimensioned from the LOWER LEFT corner, so you will have to move your y position down an appropriate amount. This can be done by determining the string you are printing's dimensions
tft.getGFXTextExtent("AbCd", x, y, &w, &h);
y = h; // Move the origin point down the height of the printed string
tft.drawGFXText(x, y, "AbCd", COLOR_RED);