Example Code for Arduino-Gesture Font
Last revision 2026/01/18
This article provides detailed guidance on implementing two-finger gesture control (text zoom and vertical movement) for Arduino projects using capacitive touch TFT LCD screens, including hardware and software preparation, wiring diagrams, and sample code.
Hardware Preparation
- DFRduino UNO R3 (or similar) x 1
- 3.5”480x320 TFT LCD with Capacitive Touchscreen x1
- Wires
Software Preparation
- Arduino IDE
- DFRobot_GDL Library Files
- About how to install the library?
- DFRobot_GDL API Functions, click to find more details
Wiring Diagram
Other Preparation Work
- All the demos of this product are all stored in the DFRobot_GDL->example->basic file
- Before burning the demo, please open the corresponding materialized function (DFRobot_ST7789_240x320_HW_SPI)
Sample Code
/*!
* @file gettureFont.ino
* @brief Control the words in the center of the screen by zooming in, zooming out, sliding up, and sliding down in a two-finger gesture.
* @n The demo supports Arduino Uno, Mega2560, FireBeetle-ESP32, FireBeetle-ESP8266, FireBeetle-M0
*
* @copyright Copyright (c) 2010 DFRobot Co. Ltd (http://www.dfrobot.com)
* @licence The MIT License (MIT)
* @author [fengli] ([email protected])
* @version V1.0
* @date 2019-12-6
* @get from https://www.dfrobot.com
* @url https://github.com/DFRobot/DFRobot_GDL/src/DFRpbot_UI
*/
#include "DFRobot_UI.h"
#include "Arduino.h"
#include "DFRobot_GDL.h"
#include "DFRobot_Touch.h"
/*M0*/
#if defined ARDUINO_SAM_ZERO
#define TFT_DC 7
#define TFT_CS 5
#define TFT_RST 6
/*ESP32 and ESP8266*/
#elif defined(ESP32) || defined(ESP8266)
#define TFT_DC D2
#define TFT_CS D6
#define TFT_RST D3
/* AVR series mainboard */
#else
#define TFT_DC 2
#define TFT_CS 3
#define TFT_RST 4
#endif
/**
@brief Constructor When the touch uses the gt series chip, you can call this constructor
*/
DFRobot_Touch_GT911 touch;
/**
@brief Constructor When the screen uses hardware SPI communication, the driver IC is ILI9488, and the screen resolution is 320x480, this constructor can be called
@param dc Command/data line pin for SPI communication
@param cs Chip select pin for SPI communication
@param rst Reset pin of the screen
*/
DFRobot_ILI9488_320x480_HW_SPI screen(/*dc=*/TFT_DC,/*cs=*/TFT_CS,/*rst=*/TFT_RST);
/* M0 mainboard DMA transfer */
//DFRobot_ILI9488_320x480_DMA_SPI screen(/*dc=*/TFT_DC,/*cs=*/TFT_CS,/*rst=*/TFT_RST);
/**
@brief Constructor
@param gdl Screen object
@param touch Touch object
*/
DFRobot_UI ui(&screen, &touch);
uint8_t fontSize = 2; //Font size
uint16_t fontColor = 0xf800; //Font color
uint8_t fontLen = 4 * fontSize * 8; //String width
char * font = "DFRC"; // String
uint8_t fontHeight = fontSize * 8;//String height
uint16_t posx = screen.width() / 2 ; //The x-coordinate of the starting position of the string
uint16_t posy = screen.height() / 2;//the y-coordinate of the beginning of the string
void setup()
{
Serial.begin(9600);
//UI initialization
ui.begin();
//Draw the initial string
ui.drawString(posx - fontLen / 2-8, posy - fontHeight / 2, font, fontColor , ui.bgColor, fontSize, 0);
}
void loop()
{
refresh();
//Serial.println(touch.scan());
}
void refresh() {
DFRobot_UI:: eGesture_t gesture = ui.getGestures();
/*if(gesture != ui.NONE){
Serial.println(gesture);
}
*/
switch (gesture) {
//Gesture detected as zoom out
case ui.SHRINK : {
screen.fillRect(posx - fontLen / 2 -8, posy - fontHeight / 2, 4 * fontSize * 8, fontSize * 8, ui.bgColor);
//fontSize decrease
fontSize--;
if (fontSize <= 1) fontSize = 1;
fontHeight = fontSize * 8;
fontLen = 4 * fontSize * 8;
ui.drawString(posx - fontLen / 2-8 , posy - fontHeight / 2, font, fontColor , ui.bgColor, fontSize, 0);
}; break;
//Gesture detected as zoom in
case ui.MAGNIFY : {
screen.fillRect(posx - fontLen / 2-8 , posy - fontHeight / 2, 4 * fontSize * 8, fontSize * 8, ui.bgColor);
//fontSize increase
fontSize++;\n if (fontSize >= 7) fontSize = 7;\n fontHeight = fontSize * 8;\n fontLen = 4 * fontSize * 8;\n ui.drawString(posx - fontLen / 2-8 , posy - fontHeight / 2, font, fontColor , ui.bgColor, fontSize, 0);\n } break;\n //Gesture detected as swiping up with two fingers\n case ui.DUPGLIDE : {\n screen.fillRect(posx - fontLen / 2-8 , posy - fontHeight / 2, 4 * fontSize * 8, fontSize * 8, ui.bgColor);\n posy -= 10 ;\n fontHeight = fontSize * 8;\n fontLen = 4 * fontSize * 8;\n ui.drawString(posx - fontLen / 2 - 8, posy - fontHeight / 2, font, fontColor , ui.bgColor, fontSize, 0);\n } break;\n //Gesture detected as swiping down with two fingers\n case ui.DDOWNGLIDE : {\n screen.fillRect(posx - fontLen / 2 - 8, posy - fontHeight / 2, 4 * fontSize * 8, fontSize * 8, ui.bgColor);\n posy += 10;\n fontHeight = fontSize * 8;\n fontLen = 4 * fontSize * 8;\n ui.drawString(posx - fontLen / 2 - 8, posy - fontHeight / 2, font, fontColor , ui.bgColor, fontSize, 0);\n } break;\n case ui.NONE: {\n return;\n }\n }\n}\n```
Was this article helpful?
