Bouton coulissant sur un écran tactile TFT SPI 2.4" 320 X 240 pixels

tft_bouton_coulissant.ino

/***************************************************************************

  Bouton coulissant sur un écran tactile TFT SPI 2.4" 320 X 240 pixels

  Pour plus d'infos:
  
  https://electroniqueamateur.blogspot.com/2021/04/utilisation-dun-ecran-tactile-tft-spi_25.html

******************************************************************************/

#include <SPI.h>
#include <TFT_eSPI.h>

TFT_eSPI tft = TFT_eSPI(); // https://github.com/Bodmer/TFT_eSPI

#define VALEUR_MAX 100 // valeur affichée quand le bouton est poussé à l'extrême droite
#define LARGEUR 20  // largeur du bouton
#define HAUTEUR 40  // hauteur du bouton
#define POSY 150 // position verticale du bouton coulissant
#define LIMITE_GAUCHE 30   // extrémité gauche au 20e pixel
#define LIMITE_DROITE 290  // extrémité droite au 100e pixel

uint16_t x_precedent = 160 ; // position horizontale précédemment touchée (160 est le centre de l'écran)

// routine qui redessine le contenu de l'écran

void dessineContenu(uint16_t posx) {

  uint16_t postxt;

  // on ne permet pas que le bouton dépasse les limites établies
  if (posx < LIMITE_GAUCHE) {
    posx = LIMITE_GAUCHE;
  }
  if (posx > LIMITE_DROITE) {
    posx = LIMITE_DROITE;
  }

  // on efface le bouton, là où il se trouvait précédemment
  tft.fillRect(x_precedent - LARGEUR / 2, POSY - HAUTEUR / 2 - 2 , LARGEUR, HAUTEUR + 4, TFT_BLACK);
  // on dessine la ligne horizontale
  tft.drawLine(LIMITE_GAUCHE, POSY, LIMITE_DROITE, POSY, TFT_WHITE);
  // on dessine le bouton à sa nouvelle position
  tft.fillRect(posx - LARGEUR / 2, POSY - HAUTEUR / 2, LARGEUR, HAUTEUR, TFT_YELLOW);

  // on efface l'ancienne valeur numérique
  postxt = 90;
  tft.setTextColor(TFT_BLACK);
  postxt += tft.drawFloat(calcule_valeur(x_precedent), 1, postxt, 50, 4);

  // on écrit la nouvelle valeur numérique
  postxt = 90;
  tft.setTextColor(TFT_GREEN);
  postxt += tft.drawFloat(calcule_valeur(posx), 1, postxt, 50, 4);

  x_precedent = posx;

}

// routine qui calcule la valeur numérique qui correspond à la position du bouton coulissant
float calcule_valeur (uint16_t valeur_brute) {
  float valeur_convertie;

  valeur_convertie = 1.0 * (valeur_brute - LIMITE_GAUCHE) / ( LIMITE_DROITE - LIMITE_GAUCHE) * VALEUR_MAX;
  return valeur_convertie;
}

void setup() {
  tft.init();
  tft.setRotation(3);  // portrait: 0 ou 2, paysage: 1 ou 3.
  touch_calibrate();  // procédure de calibration de l'écran tactile
  tft.fillScreen(TFT_BLACK); // on efface tout (fond noir)
  dessineContenu(160);
}


void loop(void) {

  uint16_t t_x = 0, t_y = 0; // coordonnées touchées par l'utilisateur

  boolean pressed = tft.getTouch(&t_x, &t_y); // vrai si contact avec l'écran

  if (pressed) { // si on touche l'écran
    if (t_x != x_precedent) { // si on a changé de position
      dessineContenu(t_x);
    }
  } 
}

// procédure de calibration de l'écran tactile
void touch_calibrate()
{
  uint16_t calData[5];
  uint8_t calDataOK = 0;

  tft.fillScreen(TFT_BLACK);
  tft.setCursor(25, 70);
  tft.setTextFont(2);
  tft.setTextSize(2);
  tft.setTextColor(TFT_WHITE, TFT_BLACK);
  tft.println("Touchez l'ecran a ");
  tft.setCursor(15, 110);
  tft.println("chaque coin indique.");
  tft.setTextFont(1);
  tft.println();
  tft.calibrateTouch(calData, TFT_YELLOW, TFT_BLACK, 20);
  tft.setTextColor(TFT_GREEN, TFT_BLACK);
  tft.println("Calibration terminee!");
}