DFRobot
HOME COMMUNITY FORUM WIKI BLOG PRODUCT LINES EDUCATION
  • iconBoson
  • iconGravity
  • iconHuskylens
  • iconRomeo
  • iconBluno
0
LOGIN/SIGN UP
Wish List
Wish List
▲
userhead
icon VIP1
My Account Order History VIP Benefits Quick Order Logout
logo
CATEGORY

2.8 inch TFT Touch Shield for Arduino Project

DFRobot    Aug 30 2017
PROJECTS

Wanna play with some graphic or make a touch interface? Use this DFRobot's Touch Shield for Arduino UNO!

INTRODUCTION

Add some flavor to your Arduino project with this large colorful touch screen by DFRobot. This TFT Touch screen is a fantastic shield with big (2.8" diagonal) and 240x320 pixels with individual pixel control which could apply to Arduino and mbed. It also comes with micro SD slot and 4 MB flash so you could add it easily to your projects with this 2.8" TFT Touch screen.

Step 1: THINGS USED IN THIS PROJECT

Hardware components:

Arduino UNO & Genuino UNO × 1
DFRobot's 2.8" TFT Touch Shield × 1


Software apps and online services:
Arduino IDE
DFRobot Image Converter

Hand tools and fabrication machines:
Stylus (generic)

Step 2: The Specifications and Pinouts

Step 3: Bubble Display

  1. First download the DmTftLibrary from dmtftlibrary.
  2. Extract the content to your Arduino library folder. In Windows this is usually located in Arduino IDE folder\libraries. Check Arduino's official guide if you want more information on how to install the Arduino Library. The official guide of Arduino.
  3. Start Arduino IDE, open the sample code, click "File--> Examples-> DmTftLibraries", select the right board and COM port: DM-TFT28-105
  4. Open the Example and upload to your Arduino board.

Step 4: Graphic Display Example

In the sketch -

tft.drawString(5, 10, "Romantic cabin"); 

It sends command to print "Romantic Cabin" 5 px away on x-axis and 10 pxfrom y-axis. You can also print a only text on screen ( if you give proper distance of 20 px between each line.

tft.drawLine(x, y, x-80, y+30, YELLOW ); 

It gives command to draw line from x and y co-ordinate to x-80 and y+30co-ordinate. It also specifies that the color of line is yellow. (Remember to enter color in CAPS or HEX code only). Understanding it is easy but easier if you know basic 2D geometry and about Cartesian Plane.

tft.drawRectangle(x-40, y+50,x-20, y+70, 0x8418);

It gives command to draw a rectangle where corner points and color of it's outline are given as the arguments.

tft.fillCircle(x+100, y-30, 20, RED ); 

This one fills color in the circle whose center and color to be filled are given as arguments.

Step 5: The Drawing Board

We can make a home made digital drawing board in just a few minutes. All we need are Arduino and this TFT shield.

How :
Stack the shield on the Arduino.
Connect the Arduino with the laptop and upload the sketch for drawing board.Wait for the screen to turn black.
Now, swipe your finger on the screen and a line will be drawn. I didn't have but I would prefer you to use a stylus.
In the sketch -

dmTouch.readTouchData(x, y, touched); 

It reads the x and y co-ordinates of the point touched.

tft.fillCircle(x, y, 2, BLUE); 

It draws a point on the area where x and y co-ordinates belong to.
The syntax is : .

.fillCircle(x, y, , );

Moreover, you can draw on it and to clear it, use the reset button on the screen to clear the graphics.
In the pic, it's "Techduino on Instructables" because techduino is my another name.See my projects on http://www.hackster.io/techduino


Step 6: Display a Pictures From a SD Card

It requires a special format for the displaying picture: 16bit RGBRGB bmp.

You could download the convert tool here: ImageConverter



Why 16 bit, not 24 bit?

There are 2 reasons for converting your images to 16-bit bmp with flipped row order:

Size : The image is only 2/3 of the original size and because most embedded displays/drivers uses 16-bit color, the picture quality will be the same.
Speed : Most embedded TFT uses the 16-bit 565 format and support the top-bottom write order.

a) The MCU does not need to convert the 24-bit to 16-bit 565, this is already done.

b) If the source format is already in correct order, a faster algorithm for reading the data can be used.

c) There is less data to read (because the image is only 2/3 of an original size)

Compared to raw picture data, there are several advantages:

a) It has meta data about the format, size, how it is stored etc. With raw data, the program must already know this.

b) It is a standard so it can be viewed directly in most viewer (although not all viewer )

c) Can create and edit the images in advanced photo editing programs like photoshop.


Anyway, there is converted picture in the library folder (DmTftLibrary\examples\DM-TFT28-105). You could have a try with it first.

a) Copy the converted picture to the SD.

b)  Plug SD card in the touch screen.

c)  Upload the sketch given in the attachments.


Note : Install the SPIFlash library before you compile the sketch. Click here to download it form the GitHub.

CODE

Graphic Display Example SketchC/C++

#include 
 #include 
 DmTftIli9341 tft = DmTftIli9341(10, 9);// Define the function body
 void setup ()
 {
  tft.init();
  tft.drawString(5, 10,"  Romantic cabin");//Displays a string
  int x=100,y=100;
  tft.drawLine (x, y, x-80, y+30, YELLOW );//Draw line
  delay(1000);
  tft.drawLine (x, y, x+80, y+30, YELLOW );
  delay(1000);
  tft.drawLine (x-60, y+25, x-60, y+160, BLUE  );
  delay(1000);
  tft.drawLine (x+60, y+25, x+60, y+160, BLUE  );
  delay(1000); 
  tft.drawLine (x-60, y+160, x+60, y+160,0x07e0  );
  delay(1000); 
  tft.drawRectangle(x-40, y+50,x-20, y+70, 0x8418);//Draw rectangle
  delay(1000);
  tft.drawRectangle(x+40, y+50,x+20, y+70, 0x07ff);
  delay(1000);
  tft.fillRectangle(x-20, y+100, x+20, y+160, BRIGHT_RED);//Draw fill rectangle
  delay(1000);
  tft.drawLine (x, y+100, x, y+160, WHITE  );
  delay(1000);
  tft.fillCircle(x+100, y-30, 20, RED );
  delay(1000);
 }
 void loop(){}

Drawing Board SketchC/C++

#include
#include
#include
#include

DmTftIli9341 tft = DmTftIli9341(10,9);    //declaring tft pins and the tft object
DmTouch dmTouch = DmTouch(DmTouch::DM_TFT28_105);   //declaring touch object
DmTouchCalibration calibration = DmTouchCalibration(&tft, &dmTouch);
bool calibrated = false;
uint16_t x = 0;
uint16_t y = 0;

void setup() {
  
  dmTouch.setCalibrationMatrix(calibration.getDefaultCalibrationData((int)DmTouch::DM_TFT28_105));
  tft.init();   //initialising the tft display
  dmTouch.init();   //initialising the touch
}

void loop() {
  
  bool touched = true;
  if (dmTouch.isTouched())  {
    dmTouch.readTouchData(x, y, touched);   //getting location of the point touched
    tft.fillCircle(x, y, 2, BLUE);    //drawing a point of size 2px of blue color
    /******
     *Syntax : .fillCircle(x, y, , );
     * Note : Colors can also be in HEX form.
     *****/
  }
}


Displaying pictures from SD CardC/C++

#include 
 #include 
 #include 
 #include 
 #include 
 #define TFT_CS  10
 #define SD_CS   8
 #define F_CS    6
 #define T_CS    4
 DmTftIli9341 tft = DmTftIli9341(10, 9);
 DmDrawBmpFromSdCard drawImage = DmDrawBmpFromSdCard();
 void setup()
 {
  // Set CS SPI pin HIGH for all SPI units, so they don't interfere
  pinMode(TFT_CS, OUTPUT);
  digitalWrite(TFT_CS, HIGH);
  pinMode(T_CS, OUTPUT);
  digitalWrite(T_CS, HIGH);
  pinMode(SD_CS, OUTPUT);
  digitalWrite(SD_CS, HIGH);
  pinMode(F_CS, OUTPUT);
  digitalWrite(F_CS, HIGH); 
  Serial.begin(9600);
  tft.init();
  SD.begin(SD_CS);
  drawImage.drawImage("logop565.bmp", tft, 0, 0);  //Display picture  
  tft.clearScreen();
  delay(2000);
  drawImage.drawImage("logop888.bmp", tft, 0, 0);
 }
 void loop() { }

REVIEW

Recent Blogs

DFRobot to Showcase its IoT-enabled 'Smart City' Solution at Bett 2023>
DFRobot to Showcase its IoT-enabled 'Smart City' Solution at Bett 2023
NEWS DFRobot
2023-03-28 06:34:33
Best Single Board Computer (SBC) for Education>
Best Single Board Computer (SBC) for Education
SELECTION GUIDE DFRobot
2023-03-22 01:57:34
Mini PC vs Desktop : Why Mini PCs Might Be the Next Desktop Replacement?>
Mini PC vs Desktop : Why Mini PCs Might Be the Next Desktop Replacement?
NEWS DFRobot
2023-03-21 07:51:36
Are Mini PCs Good for Gaming ?>
Are Mini PCs Good for Gaming ?
SELECTION GUIDE DFRobot
2023-03-15 06:15:15

REVIEW

Sign up for exclusive offers!
Like us on

discord

logo
Information
  • About Us
  • Warranty
  • Terms & Conditions
  • Shipping
  • Payment
  • FAQ
Customer Service
  • DFRobot Distributors
  • Contact us
  • Site Map
My Account
  • Affiliates
  • Specials
  • Coupon