Getting Starting with the DFRobot 2.2 Inch Round TFT Display using an Arduino Mega 2560
There was not a lot of information when I went researching on how to get the DFRobot 2.2 inch Round TFT Display to work with an Arduino Mega 2560 or let alone troubleshooting. All the results that came back were about using it with the Arduino UNO or questions about if a Raspberry Pi could run it.
So, I thought what better chance to help other people out that are going through the same struggles as I am by creating an article and source code that they could use to get up and running without all the hassle!
Before we get started, if you would like to skip the tutorial and get straight into the code, click here. That will take you to the repository with the code specified in this article and more!
Parts List
The items we will need to get up and running are:
- Arduino Mega 2560
- 2.2 inch Round TFT Display by DFRobot
- Jump wires
- A Computer that can run the Arduino IDE
Connecting the TFT to the board
To connect the TFT to the Arduino Mega, we will be using the following pin connections:
VCC → 3.3v
GND → GND
SPI_MOSI → Pin 51
SPI_SCL → Pin 52
WR → Pin 6
LCK → Pin 7
RS → Pin 5
CS → Pin 3
To help understand why we are using these specific pins, I have added the Pinout Diagram below:
Once we have those connected using the jumper wires, there is only one more step to having a fully functions TFT display!
Writing the Code
We will be going over two different examples of code that you will be able to run on the screen: Displaying a clock, and another displaying a BitMap image.
Displaying A Clock
Using the code below (and the files located here) we will be able to have a fully-functioning clock:
#include "DFRobot_ST7687S_Latch.h"
#include "DFRobot_Display_Clock.h"
#include "TimeLib.h"
#include "SPI.h"#ifdef __AVR__
uint8_t pin_cs = 3, pin_rs = 5, pin_wr = 6, pin_lck = 7;
#else
uint8_t pin_cs = D3, pin_rs = D5, pin_wr = D6, pin_lck = D7;
#endifDFRobot_ST7687S_Latch tft(pin_cs, pin_rs, pin_wr, pin_lck);
DFRobot_Display_Clock clk(&tft);void setup(void)
{
Serial.begin(115200);
setTime(18,0,0,19,4,2018);
tft.begin();
tft.fillScreen(DISPLAY_BLACK);
clk.setPointerLength(32, 40, 48); //pointer length: hour, minute, second
clk.setPointerWidth(3, 2, 2); //pointer width: hour, minute, second
clk.setPointerColor(DISPLAY_RED, DISPLAY_GREEN, DISPLAY_BLUE); //pointer color: hour, min, second
clk.setClockDial(0, 0, 60); //clock position x, y, clock radius
clk.setDialColor(DISPLAY_WHITE, DISPLAY_BLACK); //clock border volor, background
clk.showDial(); //draw dial
}void loop(void)
{
clk.updateClock(hour(), minute(), second());
}
Drawing A BitMap Image
I gotta say, this was wayyy more difficult that I thought it was going to be! Using this screen, there are a couple of tweaks you need to get right before getting an image to display on your TFT Display.
Step 1: Choosing the Right Image
The resolution of our TFT Display is 128x128, which means we need an image that is equal to or smaller than the resolution of our screen. For purposes in the next step, we will also need an image that has a transparent background.
Step 2: Converting that Image to BMP
This is the tricky part, I searched all over the internet to find a website that would aid me in converting an image to BMP. Most of them would do the job, but not encode it to where it show on the screen correctly. After much searching I came across this website!
This website was a God-send! Not only does allow you to edit every setting you would need to edit, but it can output it in a variety of different formats!
Select your image that you would like to use, scroll down to the bottom and where it asks for the “Draw Mode,” the option that worked for me was to select “Vertical — 1 bit per pixel.”
When you have the settings just the way you would like it, tap “Generate Code.”
Step 3: Adding the code to the Arduino
Below is this starter code you will need to get your BMP image to display on the TFT Display. Where I have placed the “….” is where you will put the code generated by the website above.
#include "DFRobot_ST7687S_Latch.h"#ifdef __AVR__
uint8_t pin_cs = 3, pin_rs = 5, pin_wr = 6, pin_lck = 7;
#else
uint8_t pin_cs = D3, pin_rs = D5, pin_wr = D6, pin_lck = D7;
#endifDFRobot_ST7687S_Latch tft(pin_cs, pin_rs, pin_wr, pin_lck);// Color definitions
#define BLACK 0x0000
#define BLUE 0x001F
#define RED 0xF800
#define GREEN 0x07E0
#define CYAN 0x07FF
#define MAGENTA 0xF81F
#define YELLOW 0xFFE0
#define WHITE 0xFFFFstatic const unsigned char myImage[] PROGMEM = {
....};void setup()
{
Serial.begin(115200);
tft.begin();
tft.fillScreen(BLACK);
}void loop()
{
drawBitmap(-50, -51, myImage, 100, 102, WHITE);
}void bitmap(int pos_x, int pos_y, int c, int r, const unsigned short imagen[]){ //
int contador = 0;
for(int i=0; i<r; i++){
for(int j=0; j<c; j++){
tft.drawPixel(j + pos_x, i + pos_y, pgm_read_word(&imagen[contador++]));
}
}
}void drawBitmap(int16_t x, int16_t y,const uint8_t *bitmap, int16_t w, int16_t h, uint16_t color) {int16_t i, j, byteWidth = (w + 7) / 8;
uint8_t byte;for(j=0; j<h; j++) {
for(i=0; i<w; i++) {
if(i & 7) byte <<= 1;
else byte = pgm_read_byte(bitmap + j * byteWidth + i / 8);
if(byte & 0x80) tft.drawPixel(x+i, y+j, color);
}
}
}
One final thing we will need to address is the specific size of your image. The two numbers passed at the beginning of drawBitmap will need to be changed to half the width, half the height of your image.
For example, if your image is 100x102, then the two values should be 50 and 51.
After that, build and upload it to your Arduino!
And… that’s it! You now have a fully functioning TFT Display! Please don’t hesitate to let me know if you would like more articles like this and any topics you would like for me to discuss!
More information on the TFT Display can be found by clicking here!
