M5Stack is printing 'touches' more than once on my M5 Paper

[bs811]

Hey so I currently got this code of a keypad I built, its still WIP but I'm trying to print out the number I press into the serial monitor. Now the problem comes, the printed number is correct but for whatever reasons it gets printed 3 times in total. I found out that when I touch and hold 1 number gets printed, but as soon as I let go 2 more numbers get printed.

I really dont get why, tried everything

#include <M5EPD.h>

M5EPD_Canvas canvas(&M5.EPD);

void setup() {
  M5.begin();
  M5.EPD.SetRotation(90);
  M5.TP.SetRotation(90);
  M5.EPD.Clear(true);
  canvas.createCanvas(540, 960);
  canvas.setTextSize(3);
  Serial.begin(115200);
}

void loop() {
  drawKeyboard();
  int playerId = getPlayerIdFromTouchscreen();
  Serial.println("Eingegebene Player ID: " + String(playerId));
  delay(2000); // Wartezeit, um die Ausgabe zu sehen
}

void drawKeyboard() {
  // Zeichne Tastatur
  M5.EPD.Clear(true);
  Serial.println("Geben Sie die Player ID ein:");

  M5EPD_Canvas canvas(&M5.EPD);
  canvas.createCanvas(540, 960);
  canvas.setTextSize(3);

  // Zentriere die Tastatur
  int xOffset = 0;
  int yOffset = (canvas.height() - 720);

  // Buttons zeichnen
  for (int i = 0; i < 3; i++) {
    for (int j = 0; j < 3; j++) {
      int number = i * 3 + j + 1;
      canvas.fillRect(xOffset + j * 180, yOffset + i * 180, 179, 179, 0xFFFF);
      canvas.drawString(String(number), xOffset + j * 180 + 80, yOffset + i * 180 + 76);
    }
  }

  // 0 und OK Buttons zeichnen
  canvas.fillRect(xOffset + 360, yOffset + 540, 179, 179, 0xFFFF);
  canvas.fillRect(xOffset + 180, yOffset + 540, 179, 179, 0xFFFF);
  canvas.fillRect(xOffset, yOffset + 540, 179, 179, 0xFFFF);

  canvas.drawString("OK", xOffset + 432, yOffset + 620);
  canvas.drawString("0", xOffset + 262, yOffset + 620);
  canvas.drawString("DLT", xOffset + 60, yOffset + 620);

  canvas.pushCanvas(0, 0, UPDATE_MODE_GC16);
}

int getPlayerIdFromTouchscreen() {
  String inputDigits = "";
  bool inputDetected = false;  // Flagge, um mehrfache Erkennungen zu verhindern

  while (true) {
    M5.update();

    if (M5.TP.available() && !M5.TP.isFingerUp()) {
      M5.TP.update();
      int touchX = M5.TP.readFinger(0).x;
      int touchY = M5.TP.readFinger(0).y;

      int xOffset = 0;
      int yOffset = (canvas.height() - 720);

      for (int i = 0; i < 3; i++) {
        for (int j = 0; j < 3; j++) {
          int buttonX = xOffset + j * 180;
          int buttonY = yOffset + i * 180;

          if (touchX >= buttonX && touchX <= (buttonX + 179) && touchY >= buttonY && touchY <= (buttonY + 179)) {
            // Die Taste wurde berührt
            int number = i * 3 + j + 1;

            // Überprüfe, ob diese Taste bereits erkannt wurde
            if (!inputDetected) {
              // Setze die Flagge, um mehrfache Erkennungen zu verhindern
              inputDetected = true;

              // Serial-Ausgabe, um die gedrückte Taste anzuzeigen (optional)
              Serial.println("Gedrückte Taste: " + String(number));

              // Füge die Ziffer zur Zwischenvariable hinzu
              inputDigits += String(number);
            }
          }
        }
      }

      // Überprüfen, ob OK-Taste berührt wurde
      if (touchX >= (xOffset + 360) && touchX <= (xOffset + 539) && touchY >= (yOffset + 540) && touchY <= (yOffset + 719)) {
        // Benutzereingabe beenden, wenn OK-Taste gedrückt wurde
        break;
      }
    }

    if (M5.TP.isFingerUp()) {
      // Wenn der Finger losgelassen wurde, setze die Flagge zurück
      inputDetected = false;
    }
  }

  Serial.println("Eingegebene Player ID: " + inputDigits); // Serial-Ausgabe am Ende

  return inputDigits.toInt(); // Konvertiere die Zeichenkette zu einer Ganzzahl
}

[ajb2k3]

You are probably seeing what is known as "Key Bounce" and need to look into "debouncing" the touch events.

[bs811]

@ajb2k3 yeah I fixed it. Currently fixing the delete button bcuz its shows the preivious number very subutle