ArduiTouch 3 - Drawing on the Touch Screen

In this article, I would like to explore the possibilities of my TouchEvent Library Show. It makes it very easy to react to events on the touch screen. You can easily download the library from GitHub and copy it to the Arduino libraries directory. There is a demo program in the examples that shows the application. On the basis of this demo program I will explain the individual functions of the Bibliothejk in this article.

As hardware, we need a ArduiTouch With ESP32 Processor.




/* this example demonstrates the usage of the TouchEvent library
 * it uses a 2.4 inch TFT display with resistive touch screen
 * the display uses an ILI9341 controller
 * and the touch screen a XPT2046
 * the module is used together with an ESP32 but any other
 * arduino compatible processor should work
 * For the used pins see definitions in the code

required libraries
#include <Spi.H>
#include "Adafruit_GFX.h"
#include "Adafruit_ILI9341.h"
#include <XPT2046_Touchscreen.H>
#include <Fonts/FreeSans9pt7b.H> used font5

#include "TouchEvent.h"

used pins
#define TFT_CS   5      diplay chip select
#define TFT_DC   4      display d/c
#define TFT_MOSI 23     diplay MOSI
#define TFT_CLK  18     display clock
#define TFT_RST  22     display reset
#define TFT_MISO 19     display MISO
#define TFT_LED  15     display background LED

#define TOUCH_CS 14     touch screen chip select
#define TOUCH_IRQ 2     touch screen interrupt

prepare driver for display and touch screen
Adafruit_ILI9341 Tft = Adafruit_ILI9341(TFT_CS, TFT_DC, TFT_RST);
XPT2046_Touchscreen Touch(TOUCH_CS, TOUCH_IRQ);

init TouchEvent with pointer to the touch screen driver
TouchEvent tevent(Touch);

some global variables
Int Scr = 0;
uint16_t Bg[4] = {ILI9341_WHITE,ILI9341_RED,ILI9341_GREEN,ILI9341_YELLOW};
TS_Point Last;
Boolean Draw;

swipe event
Void onSwipe(uint8_t You) {   Switch(You) {     Case 0: If (Scr <3) { right to left switch to next screen         Scr++;         draw_screen(Scr);       }       Break;     Case 1: If (Scr > 0) { left to right switch to previous screen         Scr--;         draw_screen(Scr);       }       Break;   }   tevent.setDrawMode(Scr==0);

Void Onclick(TS_Point P) {   If (Scr > 0) { on any screen except 0 show the click position     Tft.setFont(&FreeSans9pt7b);     Tft.fillRect(0,40,240,70,ILI9341_WHITE);     Tft.setTextColor(ILI9341_BLACK,ILI9341_WHITE);     Tft.setCursor(10,60);     Tft.println("Clicked");     Tft.println(P.X);     Tft.println(P.Y);   }

Void onDblClick(TS_Point P) {   If (Scr > 0) { on any screen except 0 show double click position     Tft.fillRect(0,40,240,70,ILI9341_WHITE);     Tft.setFont(&FreeSans9pt7b);     Tft.setTextColor(ILI9341_BLACK,ILI9341_WHITE);     Tft.setCursor(10,60);     Tft.println("Doubleclick");     Tft.println(P.X);     Tft.println(P.Y);   } else {     tevent.setDrawMode(False);   }

Void Ondraw(TS_Point P) {   draw a line from the last position to the current position   If (Draw) Tft.Drawline(Last.X,Last.Y,P.X,P.Y,ILI9341_BLACK);   Last = P;

Void onTouch(TS_Point P) {   Last = P;   Draw = True;

Void onUntouch(TS_Point P) {   Draw = False;

Void onLongClick(TS_Point P) {   If (Scr > 0) { on any screen except 0 show double click position     Tft.setFont(&FreeSans9pt7b);     Tft.fillRect(0,40,240,70,ILI9341_WHITE);     Tft.setTextColor(ILI9341_BLACK,ILI9341_WHITE);     Tft.setCursor(10,60);     Tft.println("Long Click");     Tft.println(P.X);     Tft.println(P.Y);   }

Void Setup() {   Serial.Begin(115200);   pinMode(TFT_LED, Output);   digitalWrite(TFT_LED, High);    switch display on   start drivers   Tft.Begin();   Touch.Begin();   show the displays resolution   Serial.Print("tftx ="); Serial.Print(Tft.width()); Serial.Print(" tfty ="); Serial.println(Tft.height());   init TouchEvent instance   tevent.setResolution(Tft.width(),Tft.height());   tevent.setDblClick(300);   tevent.registerOnTouchSwipe(onSwipe);   tevent.registerOnTouchClick(Onclick);   tevent.registerOnTouchDblClick(onDblClick);   tevent.registerOnTouchLong(onLongClick);   tevent.registerOnTouchDraw(Ondraw);   tevent.registerOnTouchDown(onTouch);   tevent.registerOnTouchUp(onUntouch);   Display

fill screen with different colors for different screen numbers
Void draw_screen(uint8_t No) {   Tft.fillScreen(Bg[No]);   Tft.setFont(&FreeSans9pt7b);   Tft.setTextColor(ILI9341_BLACK,ILI9341_WHITE);   Tft.setCursor(10,20);   Tft.Print("Screen No. ");   Tft.Print(No);    }

Void Loop() {   poll for touch events   tevent.pollTouchScreen();

The TouchEvent class fetches the current values from the touch screen in its main function pollTouchScreen() and tries to detect events. If an event has been detected and a callback function has been registered for that event, this function is called with the current position in screen coordinates. An exception is the callback function for the swipe event, in which case the direction of the swipe is passed as a parameter.

A callback function can be registered for the following events.


  • onTouchDown(TS_Point p) this function is called whenever the screen is touched.
  • onTouchUp(void (TS_Point p) this function is called whenever the screen touch ends.
  • onTouchClick(void (TS_Point p) this function is called when the screen has been briefly touched. The touch must not be longer than the time set for the long click. (Default 1 second)
  • onTouchDblClick (TS_Point p) this function is called when the screen inside the half of a adjustable time (default 500 ms) has been touched twice briefly. Each double-click event also triggers a click event on the first click.
  • onTouchLong(TS_Point p) this function is called when the screen has been touched at least one adjustable time (default 1 s). In this case, no click event is raised.
  • onTouchDraw(TS_Point p) this function is called when the touch point is changed during touch. The sensitivity can be varied via the adjustable value moveThreshold (Default = 10). The event is called only when the draw mode is active.
  • onTouchSwipe(uint8_t direction) this function is called when swiping across the screen. The minimum wiping length can be set for x (default = 500) and y (default = 700). The function is given the direction as a parameter. 0 = right to left, 1=left to right, 2 = top to bottom and 3=bottom to top. This event is not raised if the draw mode is not active.

As a summary here again all functions of the class:

  • pollTouchScreen();
    the current position of the touch screen is queried and registered callback functions are called depending on the detected events
  • void setResolution(int16_t xResolution, int16_t yResolution);
    the resolution of the screen in pixels can be set (default 240 and 320)
  • void setDrawMode(boolean drawMode);
    turns the character mode on or off (default = off).
  • void calibrate(uint16_t xMin, uint16_t yMin, uint16_t xMax, uint16_t yMax);
    is used to calibrate the touch screen. The values indicate the upper left and the lower right corner in touch-screen coordinates (default = 230, 350, 3700, and 3900).
  • void setMoveTreshold(uint16_t threshold);
    sets the change in touch-screen coordinates that must occur for an onDraw event to be detected (default = 10).
  • void setSwipe(uint16_t swipeX, uint16_t swipeY);
    sets the length for the swipe in touch-screen coordinates so that a swipe event is detected (defaul = 500,700).
  • void setLongClick(uint16_t clickLong);
    sets the time in ms how long a touch must last for a long click to be detected (default = 1000ms).
  • void setDblClick(uint16_t dblclick);
    sets the maximum time between 2 clicks in ms so that a double click is detected (default = 500ms).
  • void registerOnTouchDown(void (*callback)(TS_Point p));
    registers a callback function for the onTouchDown event.
  • void registerOnTouchUp(void (*callback)(TS_Point p));
    registers a callback function for the onTouchUp event.
  • void registerOnTouchClick(void (*callback)(TS_Point p));
    registers a callback function for the onTouchClick event.
  • void registerOnTouchDblClick(void (*callback)(TS_Point p));
    registers a callback function for the onTouchDblClick event.
  • void registerOnTouchLong(void (*callback)(TS_Point p));
    registers a callback function for the onTouchLong event.
  • void registerOnTouchDraw(void (*callback)(TS_Point p));
    registers a callback function for the onTouchDraw event.
  • void registerOnTouchSwipe(void (*callback)(uint8_t direction));
    registers a callback function for the onSwipeDown event.
  • boolean isInArea(TS_Point p, int16_t x1, int16_t y1, int16_t x2, int16_t y2);
    Auxiliary Funtion returns whar if the point p is within the rectangle x1, y1, and x2, y2.


After the demo program has been started, the first page "Screen No. 0" with a white background is displayed. On this page the drawing mode is active and you can draw with your finger or better with a soft blunt pencil.

Double-clicking ends the character mode. Now you can switch back and forth between the sides by swiping. Page 1 with red background, page 2 yellow and page 3 green. All pages except page 0 display click, double click and long click with position. When you switch to page 0, the character mode is automatically activated again.

Have fun clicking and swiping ;)


DisplaysEsp-32Projects for advanced




Der Touch funktioniert nur mit 2 Änderungen:
Für das 2,4" mod Touch Display muss es heißen:
#define TOUCH_IRQ 27 //touch screen interrupt 27 anstatt 2 bei altem Display
und die Änderung von Manfred muss auch drin stehen:
digitalWrite(TFT_LED, LOW); // Display-Beleuchtung einschalten —>LOW nicht HIGH



digitalWrite(TFT_LED, LOW); // Display-Beleuchtung einschalten
ist richtig
Die Lösung für die Touch fuktion ist:
Jumper von GPIO2 entfernen!
Für den TouchScreen Interrupt wird der GPIO2 Pin verwendet, der zum Flashen des ESP32 auf Low sein muss. Da der Interrupt Ausgang des Touchscreen Controller einen Pull Up Widerstand hat ist dieser Pin nicht auf Low, sodass das Hochladen des Programms nicht funktioniert.



Der Touch funktioniert nicht !
Diese Zeile ist falsch ,
digitalWrite(TFT_LED, HIGH); // Display-Beleuchtung einschalten
digitalWrite(TFT_LED, LOW); // Display-Beleuchtung einschalten
das ist richtig!
was ist noch falsch ?

Leave a comment

All comments are moderated before being published

Recommended blog posts

  1. Install ESP32 now from the board manager
  2. Lüftersteuerung Raspberry Pi
  3. Arduino IDE - Programmieren für Einsteiger - Teil 1
  4. ESP32 - das Multitalent
  5. OTA - Over the Air - ESP programming via WLAN