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
#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);
}
}
}
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.
Programm - ESP32 Development Board - Buttons mit AktionHerunterladen
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 = { 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;
//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_y && y
Read the full article