• Worldwide Shipping

  • 24/7 Customer Support

  • FAQ
  • Worldwide Shipping

  • 24/7 Customer Support

  • FAQ

HUM: 2.4inch graphic display

You are a beginner with Croduino. Or electronics? A specific module caught your eye, but you do not know how to use it? Do not worry, HUM is here for you! How to Use Module (HUM) is a blog tutorials series by e-radionica where you will find all you need in order to begin working with your favorite module. Tutorials include: technical characteristics, work principle, instructions on how to connect the module with Croduino and the basic code. Everything else is left to your imagination.

INTRODUCTION

When we need a module that allows data input, but also data display, this is the right module for us: the TFT touch screen display. The module is easy-to-use because it communicates with Croduino via SPI communication and it allows many interesting things such as text display and drawing different geometrical shapes. For all of this, we can choose which color we want to set, but also the size of shapes or the text.

HOW DOES IT WORK?

This display contains 320x240 pixels, it is quite large and can be used for various projects, and we can also change the color of each pixel. To ensure the simplicity of each of these display functionalities, the ILI9341 chip controls the operation of each pixel and allows us to easily control the display. The chip communicates to Croduino via SPI communication, and by using the library with simple functions we send out what needs to be done. The XP2046 takes care of the touch panel control but also sends data via SPI communication. There are two types of touch panels and those are capacitive and resistive panels. Our panel is resistive and below, we will explain how it works.

The panel contains two conductive layers that are spaced until we apply pressure and then they connect. One conductive layer is connected to the voltage and the current is constantly running through this layer. If we press the panel in that space, two conductive layers touch, the current changes, and the controller recognizes the place where the panel is pressed and sends us data. The advantage of these panels is the fact they are cheaper and simpler, but they can recognize only one pressure, and not more at the same time, and this is one of its disadvantages. Capacitive panels work differently and can recognize more pressures, and they are used on mobile phones and similar devices where we need this feature, and the resistive ones are used in simpler devices where it is not necessary to read more pressures.

HOW TO CONNECT IT?

The display, as well as the touch panel, exchange data with Croduino via SPI communication, and we need 11 Croduino pins to connect them. Since the display and touch panel controllers work at 3.3 V, it is necessary to use 10 kOhm resistors on all data lines which are used to send data to the module when connecting Croduino and this module. To power supply the display, we can use 5V because it has a built-in voltage regulator, but to handle the connection easily, the scheme shows how to connect everything.

ARDUINO CODE

In order to use the display with Croduino, we need to download the display libraries and the touch panel library. The display library is Adafruit_ILI9341, and we use the XPT2046_Touchscreen library to work with the touch panel, and you also need to install the Adafruit_GFX library for drawing graphical forms on the display. If you do not know how to install libraries, check our tutorial which explains the installation process.
With this example of the code, we turn the LED on or off using the display. We draw two keys on the display and, depending on the state of the LED and the button which is pressed, we turn the LED on or off.
The second example of the code displays the text in several lines and draws some geometrical shapes. What is displayed and the line on the display can be seen in the following image.

#include "Adafruit_GFX.h" //including the library that allows drawing geometrical shapes
#include "Adafruit_ILI9341.h" //including the library that allows controlling the display
#include <XPT2046_Touchscreen.h>//including the library to work with the touch panel
//defining the pins we use for display and touch panel
#define TFT_DC 4
#define TFT_CS 2
#define TFT_RST 3
#define TFT_MISO 7
#define TFT_MOSI 5
#define TFT_CLK 6
#define CS_PIN 10
// MOSI=11, MISO=12, SCK=13
//the display library constructor (to it, we hand in the pins used for SPI communication)
Adafruit_ILI9341 tft = Adafruit_ILI9341(TFT_CS, TFT_DC, TFT_MOSI, TFT_CLK, TFT_RST, TFT_MISO);
//constructor for the library to which we only submit the CS_pin, the rest of the pins are standard Croduino pins for SPI
XPT2046_Touchscreen ts(CS_PIN);
boolean RecordOn = false;//the variable to which we save which button is pressed
int ledPin=8;//the pin to which we connect the LED diode
//defining minimum and maximum values for x and y-axes for the touch panel (they should be adjusted to the display we use)
#define TS_MINX 150
#define TS_MINY 150
#define TS_MAXX 3900
#define TS_MAXY 4900
//defining the point(x,y) where we start drawing the rectangle, as well as the width and height of the rectangle (the frame around the buttons)
#define FRAME_X 10
#define FRAME_Y 50
#define FRAME_W 100
#define FRAME_H 50
//defining the point(x,y) where we start drawing the red button, as well as the width and height of that button
#define REDBUTTON_X FRAME_X
#define REDBUTTON_Y FRAME_Y
#define REDBUTTON_W (FRAME_W/2)
#define REDBUTTON_H FRAME_H
//defining the point(x,y) where we start drawing the green button, as well as the width and height of that button
#define GREENBUTTON_X (REDBUTTON_X + REDBUTTON_W)
#define GREENBUTTON_Y FRAME_Y
#define GREENBUTTON_W (FRAME_W/2)
#define GREENBUTTON_H FRAME_H
//the function for drawing the rectangle
void drawFrame()
{
tft.drawRect(FRAME_X, FRAME_Y, FRAME_W, FRAME_H, ILI9341_BLACK);
}
//the function that draws the red button
void redBtn()
{ //the button on the coordinates(x,y) width(REDBUTTON_W) and height(REDBUTTON_H) is filled in with red color
tft.fillRect(REDBUTTON_X, REDBUTTON_Y, REDBUTTON_W, REDBUTTON_H, ILI9341_RED);
//the button on the coordinates(x,y) width(GREENBUTTON_W) and height(GREENBUTTON_H) is filled in with blue color
tft.fillRect(GREENBUTTON_X, GREENBUTTON_Y, GREENBUTTON_W, GREENBUTTON_H, ILI9341_BLUE);
drawFrame();//calling the function for drawing the frame
//setting the cursor to the middle of the blue button
tft.setCursor(GREENBUTTON_X + 6 , GREENBUTTON_Y + (GREENBUTTON_H/2));
tft.setTextColor(ILI9341_WHITE);//setting the text color to white
tft.setTextSize(2);//setting the text size to 2
tft.println("ON");//within the blue button we print ON
RecordOn = false; //saving that the red button is pressed
}
//function that draws the green button
void greenBtn()
{
//the button on the coordinates(x,y) width(GREENBUTTON_W) and height(GREENBUTTON_H) is filled in with green color
tft.fillRect(GREENBUTTON_X, GREENBUTTON_Y, GREENBUTTON_W, GREENBUTTON_H, ILI9341_GREEN);
//the button on the coordinates(x,y) width(REDBUTTON_W) and height(REDBUTTON_H) is filled in with blue color
tft.fillRect(REDBUTTON_X, REDBUTTON_Y, REDBUTTON_W, REDBUTTON_H, ILI9341_BLUE);
drawFrame();//calling the function for drawing the frame
//setting the cursor to the middle of the blue button
tft.setCursor(REDBUTTON_X + 6 , REDBUTTON_Y + (REDBUTTON_H/2));
tft.setTextColor(ILI9341_WHITE);//setting the text color to white
tft.setTextSize(2);//setting the text size to 2
tft.println("OFF");//within the blue button we print OFF
RecordOn = true; //saving that the green button is pressed
}
void setup(void)
{
pinMode(ledPin,OUTPUT);
Serial.begin(9600);//Serial communication initialization (speed 9600 baud)
tft.begin();//display initialization
ts.setRotation(3);//setting the touch panel rotation to 3
//initialization of the touch panel and, depending on whether we have succeeded or not, a corresponding message is displayed on the Serial monitor
if (!ts.begin()) {
Serial.println("Unable to start touchscreen.");
}
else {
Serial.println("Touchscreen started.");
}
tft.fillScreen(ILI9341_BLUE);//filling the display in with blue color
tft.setRotation(3);//setting the display rotation to 3 (just like we did for the touch panel)
redBtn();//drawing the red button, and in the blue one, we display ON
}
void loop()
{
// checking if there is data from the touch panel, if there is, we continue with the execution of the code
if (!ts.bufferEmpty())
{
// to the p cursor, we save the values from the touch panel
TS_Point p = ts.getPoint();
//the touch panel provides values from 150 to 3900 so we need to convert them to the values that are allowed by our display (our display is 320x240 pixel)
int y = map(p.y, TS_MINY, TS_MAXY, 0, tft.height());
int x = map(p.x, TS_MINX, TS_MAXX, 0, tft.width());
//if the green button has been pressed, then we only check the red button and when it will be pressed
if (RecordOn)
{
// if the x axis is within limits of the red rectangle, we check if the
// y axis is within limits too and we call the function for drawing
if((x > REDBUTTON_X) && (x < (REDBUTTON_X + REDBUTTON_W))) {
if ((y > REDBUTTON_Y) && (y <= (REDBUTTON_Y + REDBUTTON_H))) {
Serial.println("Red btn hit");
redBtn();
digitalWrite(ledPin,LOW);
}
}
}
//if the red button has been pressed, then we only check the green button and when it will be pressed
else
{
// if the x axis is within limits of the green rectangle, we check if the
// y axis is within limits too and we call the function for drawing
// the green rectangle and we turn the LED on
if((x > GREENBUTTON_X) && (x < (GREENBUTTON_X + GREENBUTTON_W))) {
if ((y > GREENBUTTON_Y) && (y <= (GREENBUTTON_Y + GREENBUTTON_H))) {
Serial.println("Green btn hit");
greenBtn();
digitalWrite(ledPin,HIGH);
}
}
}
Serial.println(RecordOn);
}
}

The second example of the code.

#include "Adafruit_GFX.h" //including the library that allows drawing geometrical shapes
#include "Adafruit_ILI9341.h" //including the library that allows controlling the display
//defining the pins used for the display
#define TFT_DC 4
#define TFT_CS 2
#define TFT_RST 3
#define TFT_MISO 7
#define TFT_MOSI 5
#define TFT_CLK 6
//the display library constructor (to it, we hand in the pins used for SPI communication)
Adafruit_ILI9341 tft = Adafruit_ILI9341(TFT_CS, TFT_DC, TFT_MOSI, TFT_CLK, TFT_RST, TFT_MISO);
void setup() {
tft.begin();//initialization of the display
tft.setRotation(3);//setting the display rotation to 3
test();//calling the test function which displays the text, and draws geometrical shapes
}
void loop(void) {
//the loop where we do nothing
}
//the function that is called from the setup
void test() {
tft.fillScreen(ILI9341_BLACK); //fill in the display with black color
tft.setCursor(5, 5); //setting the cursor to (x,y) coordinates
tft.setTextColor(ILI9341_WHITE); //setting the text color to white
tft.setTextSize(2); // setting the text size to 2
tft.println("Hello World!"); // displaying Hello World! and switching the cursor to the new row (println-the same as with the Serial monitor)
tft.setTextColor(ILI9341_YELLOW); //setting the text color to yellow
tft.println(1234.56); //printing the number in brackets to the new row
//drawing the rectangle on the display (starting point x,y, x axis size, y axis size, color)
tft.drawRect(0, 40,205,34,ILI9341_RED);
tft.setTextColor(ILI9341_RED); //setting the text color to red
tft.setTextSize(3); // setting the text size to 3
tft.setCursor(5, 45);//setting the cursor to (x,y) coordinates
tft.println("e-radionica"); //printing the text inside the quotation marks
tft.fillRect(10, 90,41,41,ILI9341_GREEN);//drawing the filled rectangle (starting point x,y, x axis size, y axis size, color)
tft.fillCircle(30, 110, 20,ILI9341_BLUE);//drawing the filled circle (center x, center y, radius of the circle, color)
tft.fillRect(60, 90,125,41,ILI9341_PURPLE);//drawing the filled rectangle (starting point x,y, x axis size, y axis size, color)
tft.setCursor(65, 93);//setting the cursor to (x,y) coordinates
tft.setTextColor(ILI9341_WHITE);//setting the text color to white
tft.setTextSize(5);//setting the text size to 3
tft.println("TEST"); //printing the text inside the quotation marks
tft.fillCircle(240, 170, 60,ILI9341_BLUE);//drawing the filled circle (center x, center y, radius of the circle, color)
tft.fillCircle(240, 170, 45,ILI9341_YELLOW);//drawing the filled circle (center x, center y, radius of the circle, color)
tft.fillCircle(240, 170, 30,ILI9341_ORANGE);//drawing the filled circle (center x, center y, radius of the circle, color)
tft.fillCircle(240, 170, 20,ILI9341_PURPLE);//drawing the filled circle (center x, center y, radius of the circle, color)
}
Leave a Reply