ESP32 Development Board: Touchfunktion programmieren

Im nun zweiten Teil zum ESP32 Development Board möchte ich dir gerne zeigen, wie die Touchfunktion des Displays in der Arduino IDE programmiert wird. Im ersten Teil habe ich dir das Board bereits ausführlich vorgestellt und gezeigt, wie du Grafiken und Texte auf dem Display anzeigen kannst.

ESP32 Development Board: Touchfunktion programmieren

Dieses Video auf YouTube ansehen.

Dieser Beitrag ist wie erwähnt die Fortführung des Beitrages ESP32 Development Board mit 2,8 Zoll Touch Display: Programmieren für Anfänger ich gehe im nachfolgenden davon aus, dass du das Board bereits bei dir eingerichtet und betriebsbereit hast. Sollte dieses jedoch nicht so sein, so empfehle ich dir zunächst einen Blick in den zuvor verlinkten Beitrag.

Inhaltsverzeichnis

• Pinbelegung des Touchfeldes vom ESP32 Development Board
• Programmieren des Touchfeldes in der Arduino IDE
  • Probleme beim Upload
• Beispiel – erkennen einer Berührung auf dem Display
• Ein Button Zeichnen und Touchfunktion hinterlegen
  • Vorwort
  • einen Button mit Effekt programmieren
  • eine LED via Button steuern
• Fazit

Pinbelegung des Touchfeldes vom ESP32 Development Board

Schauen wir uns zunächst die Pinbelegung des Touchfeldes an:

Bezeichnung	Pin
CLK	IO25
CS	IO33
DIN / MOSI	IO32
OUT / MISO	IO39
IRQ	IO36

Das Board findest du sehr günstig auf Aliexpress.com zusätzlich findest du dort auch noch einen Schaltplan, aus welchem du weitere Informationen entnehmen kannst.

Programmieren des Touchfeldes in der Arduino IDE

Zusätzlich zu dieser Bibliothek benötigen wir noch die Datei lgfx_ESP32_2432S028.h welche wir uns vom GitHub Repository OttoMeister / ARDUINO_ESP32-2432S028R herunterladen können.

Probleme beim Upload

Bevor wir mit der Programmierung beginnen, möchte ich dich auf eine Besonderheit mit dem Umgang der Bibliothek LovyanGFX in der Arduino IDE 2.0 hinweisen.

Zum einen musste ich feststellen, dass der Upload zum Mikrocontroller sehr lange dauert (> 15 min.) und zum anderen manchmal mit dem Fehler “ping: timeout” abbricht. Als “Lösung” habe ich zur klassischen Arduino IDE 1.8.19 gewechselt, der Upload hier dauerte jedoch das erste mal etwas länger aber nach dem ersten Kompilieren dauerte der Vorgang dann nurnoch so knapp 30 Sekunden.

Beispiel – erkennen einer Berührung auf dem Display

Starten wir nun mit einem Beispiel und schreiben ein Programm, welches eine Berührung auf dem Touchdisplay erkennt und die X & Y Koordinate ausgibt.

Der Code hierfür ist recht einfach, theoretisch müssen wir nur eine Funktion aufrufen und erhalten, ob ein Klick auf dem Display erfolgte und zusätzlich erhalten wir die Koordinaten.

/*
Einbinden der Bibliothek zum kommunizieren
mit dem Display.
*/
#define LGFX_USE_V1
#include <LovyanGFX.hpp>
#include "lgfx_ESP32_2432S028.h"

//Größe der Zeichenfläche definieren
#define MAX_X 319
#define MAX_Y 239

//Felder für die ermittelte Position
//bei einem klick
uint16_t x = 0, y = 0;

//Instanz des Displays
static LGFX lcd;

void setup(void) {
  //beginn der seriellen Kommunikation mit
  //115200 Baud
  Serial.begin(115200);

  //beginn der Kommunikation mit dem Display
  lcd.init();
  //drehen des Displays
  lcd.setRotation(1);
  //füllen des Displays mit der Farbe Schwarz
  lcd.fillScreen(TFT_BLACK);
  //eine kleine Pause von 100ms.
  delay(100);
}

void loop() {
  //Wenn ein Touchaktion ausgeführt / erkannt wurde,
  //dann liefert die Funktion getTouch den Wert 1 und
  //befüllt die übergebenen Parametern mit den Koordinaten
  if (lcd.getTouch(&x, &y) == 1) {

    //befüllen des Displays mit der Farbe schwarz
    lcd.fillScreen(TFT_BLACK);

    //Wenn die ermittelte X oder Y Positon außerhalb der Range ist,
    //dann soll die Funktion hier verlassen werden.
    if (x > MAX_X || y > MAX_Y) {
      return;
    }

    //ein Kreuz an der X & Y Koordinate Zeichnen
    lcd.drawLine(x - 20, y, x + 20, y, 0xFFFF00U);
    lcd.drawLine(x, y - 20, x, y + 20, 0xFFFF00U);

    //setzen der Schriftart & Schriftgröße
    lcd.setFont(&fonts::Font2);
    //setzen des Cursors abhängig von der X/Y Koordinate
    setCursorPosition(0);
    //schreiben der X Position
    lcd.printf("x:%d", x);
    //setzen des Cursors abhängig von der X/Y Koordinate
    //mit einem Offset von 20 Pixel
    setCursorPosition(20);
    //schreiben der X Position
    lcd.printf("y:%d", y);
    //Zusätzlich werden die ermittelten Koordinaten auf der
    //Konsole ausgegeben.
    Serial.printf("x:%d,y:%d", x, y);
  }
  //eine Pause von 50ms.
  delay(50);
}

void setCursorPosition(int offset) {
  if (x < 280 && y < 200) {
    lcd.setCursor(x + 5, y + offset);
  } else {
    if (x > 280 && y > 200) {  //|| y > 200
      lcd.setCursor(x - 35, y - 40 + offset);
    } else if ((x < 20 && y > 200) || (x > 20 && y > 200)) {
      lcd.setCursor(x + 5, y - 40 + offset);
    } else if (x > 280) {
      lcd.setCursor(x - 35, y + offset);
    }
  }
}

Ein Button Zeichnen und Touchfunktion hinterlegen

Wollen wir nun einen Button auf dem Display zeichnen und diesem eine Aktion hinterlegen. Dabei soll der Button sein Style ändern, wenn dieser gedrückt wird.

Das Styling ist etwas rustikal, jedoch funktional. Für coole Dashboards gibt es andere Tools, welche ich dir noch separat in eigenen Beiträgen präsentieren möchte.

Vorwort

Meine Programme schreibe ich immer sehr dynamisch, d.h. es ist manchmal etwas mehr Code, aber dafür kann dieser deutlich besser wiederverwendet werden. Genau das mache ich in diesem Beispiel hier auch und erstelle mir ein struct welches die Eigenschaften für den Button speichert.

//Eigenschaften eines Buttons definieren
struct Button {
  bool isPressed; //ist dieser gedrückt?
  int coord_x; //X Koordinate
  int coord_y; //Y Koordinate
  int width; //Breite
  int height; //Höhe
  uint8_t backgroundcolor; //Hintergrundfarbe
  uint8_t textcolor; //Textfarbe
  String caption; //Text auf dem Button
};

Wenn du das fertige Programm herunterladen möchtest, dann kannst du dieses über nachfolgenden Link machen oder auf mein GitHub Repository StefanDraeger / ESP32_Development_Board_ESP32-2432S028R.

einen Button mit Effekt programmieren

Im ersten Schritt erstellen wir ein Rechteck mit abgerundeten Ecken und für den Schatten das gleiche nochmal in Grau. Somit hat man ein oldschool 3D Effekt.

Ich habe mir zunächst 2 Buttons definiert (siehe das struct oben) und in ein Array hinterlegt, das macht es einfacher, wenn wir diese auswerten und zeichnen möchten (die Eigenschaften sind ja somit gleich bzw. wir haben diese als Attribute hinterlegt.)

//definieren von zwei Buttons
Button btn1 = { false, 20, 20, 50, 25, lcd.color332(255, 0, 0), lcd.color332(255, 255, 255), "Test" };
Button btn2 = { false, 20, 60, 100, 25, lcd.color332(0, 255, 0), lcd.color332(0, 0, 0), "Hallo Welt!" };

//die beiden Buttons in ein Array aufnehmen
//das macht es später einfacher diese abzuarbeiten
const int NUM_BUTTONS = 2;
Button buttons[2] = { btn1, btn2 };

//Offset für den Schatten des Buttons
const int SHADOW_OFFSET = 2;

Wie bereits erwähnt arbeite ich mit einem struct vom Typ Button, das ermöglicht es mir die Eigenschaften an einem “Objekt” zu speichern und dieses einfach einer Funktion zu übergeben.

//Zeichnen eines Buttons
void drawButton(Button button) {
  //Wenn der Button gedrückt ist, 
  //dann soll der Schatten nach oben links zeigen
  if (button.isPressed) {
    lcd.fillRoundRect(button.coord_x - SHADOW_OFFSET, button.coord_y - SHADOW_OFFSET, button.width, button.height, 10, lcd.color332(176, 190, 197));
  } else {
    //Wenn der Button nicht gedrückt ist,
    //dann soll der Schatten nach unten rechts zeigen
    lcd.fillRoundRect(button.coord_x + SHADOW_OFFSET, button.coord_y + SHADOW_OFFSET, button.width, button.height, 10, lcd.color332(176, 190, 197));
  }

  //Zeichnen eines Rechtecks mit abgerundeten Ecken mit den Eigenschaften des Buttons
  lcd.fillRoundRect(button.coord_x, button.coord_y, button.width, button.height, 10, button.backgroundcolor);

  //Berechnen der Position für den Text.
  int textLenght = (button.caption.length() * 3);
  int newX = (button.width / 2) - (textLenght / 2) + 5;
  //setzen der Textfarbe und der Hintergrundfarbe
  lcd.setTextColor(button.textcolor, button.backgroundcolor);
  //positionieren des Cursors
  lcd.setCursor(button.coord_x + (newX / 2), button.coord_y + 8);
  //schreiben des Textes an die gesetzte Position
  lcd.print(button.caption);
}

Die Eigenschaft isPressed wird verwendet, um die Aktion auszuwerten, wenn der Button geklickt wird. Es soll zunächst der Schatten wechseln, damit wird optisch ein Drücken sichtbar.

In der loop prüfen wir nun fortlaufend ob ein Button geklickt wurde.

void loop() {
  //Wenn auf das Display geklickt wird, dann
  //liefert die Funktion getTouch eine 1 ansonsten 0
  //zusätzlich werden die Koordinaten in die Felder
  //x & y gespeichert.
  if (lcd.getTouch(&x, &y) == 1) {

    //Wenn die Koordinaten außerhalb der Range sind,
    //dann soll die Funktion hier verlassen werden.
    if (x > MAX_X || y > MAX_Y) {
      return;
    }

    //Schleife über das Array mit den Buttons
    for (int i = 0; i < NUM_BUTTONS; i++) {
      //Button aus dem Array mit dem Wert aus
      //der Laufvariable i lesen.
      Button button = buttons[i];
      //Wenn die geklickte Position auf dem
      //Display innerhalb der Abgrenzung eines
      //Buttons ist, dann...
      if (checkCoordButton(button, x, y)) {
        //Togglen des Buttons
        toggleButton(button);
      }
    }

  }
  //eine Pause von 50 Millisekunden.
  delay(50);
}

An den Buttons haben wir die Koordinaten und Breite & Höhe hinterlegt, von der Funktion getTouch erhalten wir zusätzlich die geklickten Koordinaten. Mit der nachfolgenden Funktion prüfen wir dann ob sich die geklickte Koordinate auf dem Button befindet.

//Prüfen ob die angeklickte Position auf dem Display innerhalb der Abgrenzung
//des Buttons ist.
bool checkCoordButton(Button button, int x, int y) {
  return (x >= button.coord_x && x <= (button.coord_x + button.width) && y >= button.coord_y && y <= (button.coord_y + button.height));
}

Wenn dieses so ist, dann soll der Button getoggelt werden, d.h. es wird optisch signalisiert das dieser gedrückt wurde.

//Einen angeklickten Button togglen.
//D.h. es wird kurz der schatten nach oben links
//verschoben und danach wieder nach unten rechts.
void toggleButton(Button button) {
  //Button entfernen
  removeButton(button);
  //setzen das der Button gedrückt ist
  button.isPressed = true;
  //zeichnen des Buttons
  drawButton(button);
  //eine kleine Pause von 85 Millisekunden
  delay(85);
  //Button entfernen
  removeButton(button);
  //setzen das der Button nicht gedrückt ist
  button.isPressed = false;
  //zeichnen des Buttons
  drawButton(button);
}

Dabei wird der Button mit einem schwarzen Rechteck gelöscht und neu gezeichnet, der schatten wird dann jedoch nach links oben verschoben. Die Pause dient dazu das man dieses erkennt und gleich danach wird wiederum der Button gelöscht und normal gezeichnet.

//entfernen eines Buttons
void removeButton(Button button) {
  //ein einfaches schwarzes Rechteck an die Position des Buttons zeichnen
  lcd.fillRect(button.coord_x - 5, button.coord_y - 5, button.width + 10, button.height + 10, lcd.color332(0, 0, 0));
}

eine LED via Button steuern

Wir haben nun die logik für den Button programmiert, was nun fehlt ist das Event welches ausgeführt werden soll wenn dieser gedrückt wird.

Ich habe zusätzlich noch das struct zum Button um eine ID erweitert damit diese beim ausführen einer Aktion besser zugeordnet werden kann.

//Eigenschaften eines Buttons definieren
struct Button {
  int id;                   //der Identifier für den Button
  bool isPressed;           //ist dieser gedrückt?
  int coord_x;              //X Koordinate
  int coord_y;              //Y Koordinate
  int width;                //Breite
  int height;               //Höhe
  uint8_t backgroundcolor;  //Hintergrundfarbe
  uint8_t textcolor;        //Textfarbe
  String caption;           //Text auf dem Button
};

Zusätzlich habe ich für die LEDs auch ein struct erstellt, dieser Typ hält mir den Pin und auch den zustand der LED.

//Eigenschaften für die LEDs definieren
struct LED {
  int pin;
  bool active;
};

//konfigurieren der beiden LEDs
LED ledGelb = { ledGelbPin, false };
LED ledBlau = { ledBlauPin, false };

In der Funktion setup müssen wir nun die Pins der LEDs als Ausgang definieren.

void setup(void) {
  ...
  pinMode(ledGelb.pin, OUTPUT);
  pinMode(ledBlau.pin, OUTPUT);
  ...
}

Die Aktion beim drücken des Buttons wird in der Funktion toggleButton ausgeführt.

//Einen angeklickten Button togglen.
//D.h. es wird kurz der schatten nach oben links
//verschoben und danach wieder nach unten rechts.
void toggleButton(Button button) {
  //Button entfernen
  removeButton(button);
  //setzen das der Button gedrückt ist
  button.isPressed = true;
  //zeichnen des Buttons
  drawButton(button);
  //aktion auslösen
  callButtonAction(button);
  //eine kleine Pause von 85 Millisekunden
  delay(85);
  //Button entfernen
  removeButton(button);
  //setzen das der Button nicht gedrückt ist
  button.isPressed = false;
  //zeichnen des Buttons
  drawButton(button);
}

Die aktion callButtonAction erhält als Parameter den gedrückten Button wobei dieser dann über seine ID ausgewertet wurd und dann abhängig von dieser ID die blaue oder gelbe LED aktiviert/deaktiviert wird.

//Anhand der ID vom Button soll eine Aktion ausgeführt werden,
//in diesem simplen Beispiel ist es lediglich das Aktivieren einer
//LED.
void callButtonAction(Button button) {
  switch (button.id) {
    case 0: activateLED(ledGelb); break;
    case 1: activateLED(ledBlau); break;
  }
}

//Umkehren des Zustandes der LED, zusätzlich wird der neue Zustand
//auch an dem Feld LED gespeichert.
void activateLED(LED &led) {
  led.active = !led.active;
  digitalWrite(led.pin, led.active);
}

Fazit

Die Touchfunktion am ESP32 Development Board ist cool und bietet viele Möglichkeiten, jedoch ist die erstellung von Dashboards über das zeichnen von geometrischen Figuren sehr mühselig und auch old school. Es gibt andere Tools welche hier den Entwickler deutlich unterstützen, diese werde ich mir nun einmal anschauen und dir dann passende Beiträge dazu liefern.