Por Fernando Koyanagi

Intenção da Aula
1. Apresentar o display touch screen

2. Apresentar as funções gráficas e como

pegar o ponto do toque na tela

3. Criar um exemplo contendo todos os

elementos (posicionamento, escrita,
desenho de formas, cores, toque)
Arduino Mega 2560
TFT LCD Shield 2.4”
 TFT LCD Shield 2.4”

Características:
• Dimensão tela: 2,4 polegadas
• Slot para cartão MicroSD
• Cor LCD: 65K
• Controlador: ILI9325
• Resolução: 240 x 320
•Touchscreen: 4 fios resistivos touchscreen
•Interface: 8 bit dados, mais 4 linhas de controle
•Tensão de operação: 3,3-5V
•Dimensões: 71 x 52 x 7mm
Demonstração
 Seu e-mail
Em www.fernandok.com
Bibliotecas
Adicione biblioteca “Adafruit_GFX”.

Acesse o link e faça download da biblioteca.

Descompacte o arquivo e cole na pasta de bibliotecas da IDE do arduino.

C:/Program Files (x86)/Arduino/libraries

Bibliotecas
Adicione biblioteca “SWTFT”.

Acesse o link e faça download da biblioteca.

Descompacte o arquivo e cole na pasta de bibliotecas da IDE do arduino.

C:/Program Files (x86)/Arduino/libraries

Bibliotecas
Adicione biblioteca “TouchScreen”.

Acesse o link e faça download da biblioteca.

Descompacte o arquivo e cole na pasta de bibliotecas da IDE do arduino.

C:/Program Files (x86)/Arduino/libraries

 Observação
Antes de iniciarmos o nosso programa, vamos fazer algo importante, a calibração do
TOUCH.
Utilizando um programa simples para pegar os pontos de toque no display, guarde o valor
dos pontos (x,y) em cada uma das extremidades (destacados em amarelo na figura
abaixo). Esses valores são importantes para mapear o touch aos pontos gráficos na tela.
#include <TouchScreen.h>
//Portas de leitura das coordenadas do touchvoid
#define YP A1 // Y+ is on Analog1
#define XM A2 // X- is on Analog2
#define YM 7 // Y- is on Digital7
#define XP 6 // X+ is on Digital6
//objeto para manipulacao dos eventos de toque na tela
TouchScreen ts = TouchScreen(XP, YP, XM, YM);

void setup() {
Serial.begin(9600);
}

void loop() {
TSPoint touchPoint = ts.getPoint();//pega o touch
(x,y,z=pressao)
Serial.print("X: "); Serial.println(touchPoint.x);
Serial.print("Y: "); Serial.println(touchPoint.y);
delay(1000);
}
 Funções
A seguir vamos dar uma olhada em algumas funções gráficas que as bibliotecas nos oferecem.

1. drawPixel
A função drawPixel, é responsável por pintar um único ponto na tela no ponto dado.
void drawPixel(int16_t x, int16_t y, uint16_t color);
2. drawLine
A função drawLine, é responsável por desenhar uma linha a partir de dois pontos.
void drawLine(int16_t x0, int16_t y0, int16_t x1, int16_t y1, uint16_t color);

3. drawFastVLine
A função drawFastVLine, é responsável por desenhar uma linha vertical a partir de um ponto e uma altura.
void drawFastVLine(int16_t x, int16_t y, int16_t h, uint16_t color);
4. drawFastHLine
A função drawFastHLine, é responsável por desenhar uma linha horizontal a partir de um ponto e uma
largura.
void drawFastHLine(int16_t x, int16_t y, int16_t w, uint16_t color);
 Funções
5. drawRect
A função drawRect, é responsável por desenhar um retângulo na tela, passando um ponto de origem, sua
altura e largura.
void drawRect(int16_t x, int16_t y, int16_t w, int16_t h, uint16_t color);

6. fillRect
A função fillRect, é a mesma que drawRect, porém, o retângulo será preenchido com a cor dada.
void fillRect(int16_t x, int16_t y, int16_t w, int16_t h, uint16_t color);
7. drawRoundRect
A função drawRoundRect, é a mesma que drawRect, porém, o retângulo terá as bordas arredondadas.
void drawRoundRect(int16_t x0, int16_t y0, int16_t w, int16_t h,int16_t radius, uint16_t color);

8. fillRoundRect
A função fillRoundRect, é a mesma que drawRoundRect, porém, o retângulo será preenchido com a cor
dada.
void fillRoundRect(int16_t x0, int16_t y0, int16_t w, int16_t h,int16_t radius, uint16_t color);
 Funções
9. drawTriangle
A função drawTriangle, é responsável por desenhar um triângulo na tela, passando o ponto dos 3 vértices.
void drawTriangle(int16_t x0, int16_t y0, int16_t x1, int16_t y1, int16_t x2, int16_t y2, uint16_t color);

10. fillTriangle
A função fillTriangle, é a mesma que drawTriangle, porém, o triângulo será preenchido com a cor dada.
void fillTriangle(int16_t x0, int16_t y0, int16_t x1, int16_t y1, int16_t x2, int16_t y2, uint16_t color);

11. drawCircle
A função drawCircle, é responsável por desenhar um círculo a partir de um ponto origem e um raio.

void drawCircle(int16_t x0, int16_t y0, int16_t r, uint16_t color);

12. fillCircle
A função fillCircle, é a mesma que drawCircle, porém, o círculo será preenchido com a cor dada.
void fillCircle(int16_t x0, int16_t y0, int16_t r, uint16_t color)
 Funções
13. fillScreen
A função fillScreen, é responsável por preencher a tela de uma única cor.
void fillScreen(uint16_t color);

14. setCursor
A função setCursor, é responsável por posicionar o cursor para escrita em um ponto dado.
void setCursor(int16_t x, int16_t y);

15. setTextColor
A função setTextColor, é responsável por atribuir uma cor ao texto que será escrito. Temos duas maneiras de
utilizá-la:
void setTextColor(uint16_t c); //configura a cor apenas da escrita
void setTextColor(uint16_t c, uint16_t bg); //configura a cor da escrita e a cor do fundo

16. setTextSize
A função setTextSize, é responsável por atribuir um tamanho para o texto que será escrito.
void setTextSize(uint8_t s);
 Funções
17. setTextWrap
A função setTextWrap, é responsável por quebrar a linha caso chega ao limite da tela.
void setTextWrap(boolean w);

18. setRotation
A função setRotation, é responsável por rotacionar a tela (landscape, portrait).
void setRotation(uint8_t r); //0 (padrão),1,2,3
 Exemplo
Criaremos uma programa no qual utilizaremos a maior parte dos recursos que o display
nos proporciona.
Vamos escrever algumas strings em diferentes tamanhos, criar três figuras geométricas e
pegar o evento de toque sobre elas, a cada vez que tocarmos em uma das figuras, teremos
o feedback do nome da figura logo abaixo delas.
 Bibliotecas
Primeiramente vamos definir as bibliotecas que utilizaremos.
#include <SWTFT.h> //responsável pela parte gráfica
#include <TouchScreen.h> //responsável por pegar os toques na tela
#include <SPI.h> //comunicação com o display
#include <Wire.h> //comunicação com o display
#include "math.h" //calcular potencia
 Defines
Definiremos algumas macros para os pinos e valores importantes que utilizaremos.
//Portas de leitura das coordenadas do touch
#define YP A1 // Y+
#define XM A2 // X-
#define YM 7 // Y-
#define XP 6 // X+
//valores encontrados através da calibração do touch
//faça um código simples para imprimir os valores (x,y) a cada toque
//então encontre os valores nas extremidades max/min (x,y)
#define TS_MINX 130
#define TS_MINY 80
#define TS_MAXX 900
#define TS_MAXY 900
//tamanho dos textos
#define TEXT_SIZE_L 3
#define TEXT_SIZE_M 2
#define TEXT_SIZE_S 1
//posicionamento dos textos de feedback
#define FEEDBACK_LABEL_X 10
#define FEEDBACK_LABEL_Y 200
#define FEEDBACK_TOUCH_X 120
#define FEEDBACK_TOUCH_Y 200
//valores para detectar a pressão do toque
#define MINPRESSURE 10
#define MAXPRESSURE 1000
 Defines

Definiremos algumas macros para os pinos e valores importantes que utilizaremos.

//Associa o nome das cores aos valores correspondentes
#define BLACK 0x0000
#define RED 0xF800
#define GREEN 0x07E0
#define CYAN 0x07FF
#define YELLOW 0xFFE0
#define WHITE 0xFFFF

//dados de criação do circulo

const int circle_radius = 30;
const int circle_x = 240;
const int circle_y = 125;

//objeto para manipulacao dos eventos de toque na tela

TouchScreen ts = TouchScreen(XP, YP, XM, YM);
//objeto para manipulacao da parte grafica
SWTFT tft;
 Setup
No setup, vamos inicializar nosso objeto de controle gráfico e fazer as primeiras configurações.

void setup() {
Serial.begin(9600);
//reseta o objeto da lib grafica
tft.reset();
//inicializa objeto controlador da lib grafica
tft.begin();
delay(500);
//rotaciona a tela para landscape
tft.setRotation(1);
//pinta a tela toda de preto
tft.fillScreen(BLACK);
//chama a função para iniciar nossas configurações
initialSettings();
}
Loop
No loop, vamos pegar o ponto no qual tocamos a tela e verificamos se o toque ocorreu em uma das
figuras.
void loop() {
TSPoint touchPoint = ts.getPoint();//pega o touch (x,y,z=pressao)
pinMode(XM, OUTPUT);
pinMode(YP, OUTPUT);
//mapeia o ponto de touch para o (x,y) grafico
// o fato de termos rotacionado a tela para landscape implica no X receber o mapeamento de Y
TSPoint p;
p.x = map(touchPoint.y, TS_MINY, TS_MAXY, 0, 320);
p.y = map(touchPoint.x, TS_MINX, TS_MAXX, 240, 0);
//verifica se a pressão no toque foi suficiente
if (touchPoint.z > MINPRESSURE && touchPoint.z < MAXPRESSURE) {
//verifica se tocou no retangulo
if(pointInRect(p)) {
writeShape("Rect");
}
//verifica se tocou no triangulo
else if(pointInsideTriangle(TSPoint(110,150,0), TSPoint(150,100,0), TSPoint(190,150,0), p)) {
writeShape("Triangle");
}
//verifica se tocou no circulo
else if(pointInCircle(p)) {
writeShape("Circle");
}
}
}
 Verificação se tocamos no círculo
/*
Desenha na tela os elementos
*/
void initialSettings()
{
tft.setTextColor(WHITE);
tft.setTextSize(TEXT_SIZE_S);
tft.println("ACESSE");

tft.setTextColor(YELLOW);
tft.setTextSize(TEXT_SIZE_M);
tft.println("MEU BLOG");

tft.setTextColor(GREEN);
tft.setTextSize(TEXT_SIZE_L);
tft.println("FERNANDOK.COM");

createRect();
createTriangle();
createCircle();

tft.setCursor(FEEDBACK_LABEL_X, FEEDBACK_LABEL_Y);
tft.setTextColor(CYAN);
tft.setTextSize(TEXT_SIZE_L);
tft.println("SHAPE: ");
}
 Funções de criação das formas geométricas
//cria um retangulo com origem (x,y) = (10,100)
//width = 80 e height = 50
void createRect()
{
tft.fillRect(10, 100, 80, 50, RED);
tft.drawRect(10, 100, 80, 50, WHITE);
}

//cria um triangulo com os vertices:

//A = (110,150) ; B = (150,100) ; C = (190,150)
void createTriangle()
{
tft.fillTriangle(110, 150, 150, 100, 190, 150, YELLOW);
tft.drawTriangle(110, 150, 150, 100, 190, 150, WHITE);
}

//cria um circulo com origem no ponto (x,y) = (240,125) e raio = 30

void createCircle()
{
tft.fillCircle(240, 125, 30, GREEN);
tft.drawCircle(240, 125, 30, WHITE);
}
 Verificação se tocamos no retângulo
//Função que verifica se o ponto está dentro do retângulo
bool pointInRect(TSPoint p)
{
//max/min X do retangulo
if( p.x >= 10 && p.x <= 90) {
//max/min Y do retangulo
if( p.y <= 150 && p.y >= 100)
{
return true;
}
}
return false;
}

Verificação se tocamos no círculo

//distancia entre pontos D = raiz( (xb-xa)^2 + (yb-ya)^2 )
//vefifica se o ponto está dentro do circulo
//se a distancia do ponto pra origem do circulo for menor ou igual ao raio, ele está dentro
bool pointInCircle(TSPoint p)
{
float distance = sqrt( pow(p.x - circle_x,2) + pow(p.y - circle_y,2));
if(distance <= circle_radius)
{
return true;
}
return false;
}
 Verificação se tocamos no triângulo
// Função que verifica se o ponto p esta dentro do triangulo ABC
// Se estiver dentro retorna TRUE senão retorna FALSE
bool pointInsideTriangle(TSPoint a, TSPoint b, TSPoint c, TSPoint p){
float ABC = triangleArea(a, b, c);
float ACP = triangleArea(a, c, p);
float ABP = triangleArea(a, b, p);
float CPB = triangleArea(c, p, b);

if(ABC == ACP+ABP+CPB){
return true;
}
return false;
}

// Função que calcula a area de um triangulo com base nos pontos x,y
float triangleArea(TSPoint a, TSPoint b, TSPoint c){
return fabs(((b.x - a.x)*(c.y - a.y) - (c.x - a.x) * (b.y - a.y))/2);
}
 Função para imprimir o nome do objeto tocado

//escreve na tela o nome da figura geométrica que foi tocada

void writeShape(String shape)
{
tft.fillRect(FEEDBACK_TOUCH_X, FEEDBACK_TOUCH_Y, 170, 30, BLACK);
tft.setCursor(FEEDBACK_TOUCH_X, FEEDBACK_TOUCH_Y);
tft.setTextSize(TEXT_SIZE_G);
tft.setTextColor(WHITE);
tft.println(shape);
}
 [email protected]

Em www.fernandok.com
Download arquivos PDF e INO do código fonte

28