Logo Mon Club Elec

Le Touchpad d’un afficheur graphique couleur 320×240 utilisé en clavier tactile numérique 4×4 et saisie de valeur entière.

Le Touchpad d’un afficheur graphique couleur 320×240 est un dispositif innovant qui permet aux utilisateurs de saisir des valeurs entières à l’aide d’un clavier tactile numérique 4×4. Il offre une solution pratique et intuitive pour saisir des données et des informations, et est particulièrement utile pour les applications qui nécessitent une saisie rapide et précise. Grâce à sa technologie avancée, le Touchpad permet aux utilisateurs de saisir des données avec une précision et une vitesse supérieures à celles des autres dispositifs de saisie. Dans cet article, nous examinerons en détail le fonctionnement du Touchpad et ses avantages pour les utilisateurs.

Le Touchpad d’un afficheur graphique couleur 320×240 utilisé en clavier tactile numérique 4×4 et saisie de valeur entière.

Le Touchpad d’un afficheur graphique couleur 320×240 utilisé en clavier tactile numérique 4×4 et saisie de valeur entière.

(cliquer sur l’image pour agrandir)

1.  Présentation

  • Ce programme transforme le Touchpad de l’afficheur graphique couleur 320×240 de chez Watterott en un clavier tactile numérique 4×4.
  • Le principe du programme est le suivant :
    • on trace un clavier numérique sur l’écran TFT
    • lors d’un appui sur le touchpad, on test si la localisation de l’appui est à l’intérieur du carré et donc d’une touche
    • si c’est le cas, la touche change de couleur et la valeur correspondante est affichée.
  • Remarquer que ce programme fonctionne avec un stylet mais aussi au doigt.

Ce programme utilise les fonctionnalités suivantes :

Ressources utiles associées à ce programme :

2.  Matériel Nécessaire

2.1  L’espace de développement Arduino

  • … pour éditer, compiler le programme et programmer la carte Arduino.
Le Touchpad d’un afficheur graphique couleur 320×240 utilisé en clavier tactile numérique 4×4 et saisie de valeur entière.

2.2  Le matériel suivant pour réaliser le montage associé

Le Touchpad d’un afficheur graphique couleur 320×240 utilisé en clavier tactile numérique 4×4 et saisie de valeur entière.
  • Watterrott propose également un circuit imprimé de compatibilité pour la carte Arduino à coupler avec cet adaptateur d’écran , le mSD-shield (15 Euros) : http://www.watterott.com/de/Arduino-mSD-Shield L’utilisation est alors très simple puisqu’il suffit d’enficher le module sur la carte Arduino.
Le Touchpad d’un afficheur graphique couleur 320×240 utilisé en clavier tactile numérique 4×4 et saisie de valeur entière.
  • avec touchpad ADS7846 intégré à l’écran MI0283QT2
Le Touchpad d’un afficheur graphique couleur 320×240 utilisé en clavier tactile numérique 4×4 et saisie de valeur entière.

3.  Instructions de montage

  • Connexions à réaliser pour adaptateur écran MI0283QT2 240×320 pixels – 262 K couleurs

Note : ces connexions sont réalisées automatiquement si utilisation du circuit imprimé mSD-shield

  • Broches utilisées pour le contrôle de l’afficheur graphique
    • broche CS de l’adaptateur sur la broche 7
    • broche RST de l’adaptateur sur la broche 8
    • broche LED de l’adaptateur sur la broche 9
  • broches utilisées pour la communication SPI de l’adaptateur MI0283QT2
    • broche SDI de l’adaptateur sur la broche 11
    • broche SDO de l’adaptateur sur la broche 12
    • broche SCL de l’adaptateur sur la broche 13

4.  Le circuit du montage

Le Touchpad d’un afficheur graphique couleur 320×240 utilisé en clavier tactile numérique 4×4 et saisie de valeur entière.

Le schéma du montage à réaliser (cliquer pour agrandir)

5.  Explication du programme

5.1  Au niveau de la partie déclarative :

  • Déclaration des objets afficheur graphique et touchpad
  • Déclaration d’une constante utilisée avec le touchpad pour la calibration.

5.2  Au niveau de la fonction d’initialisation setup( ) :

  • Initialisation de l’écran et du touchpad
  • A noter l’appel de la fonction de calibration qui sera activée si l’Eeprom ne contient pas de paramètres de calibration.

5.3  Au niveau de la boucle principale, la fonction loop ( ) :

  • Ce programme transforme l’afficheur graphique couleur 320×240 de chez Watterott en clavier tactile.
  • Le principe du programme est assez simple :
    • On appelle à intervalle régulier la fonction service() du touchpad.
    • on trace un clavier numérique sur l’écran TFT
    • lors d’un appui sur le touchpad, on test si la localisation de l’appui est à l’intérieur du carré et donc d’une touche
    • si c’est le cas, la touche change de couleur et la valeur correspondante est affichée.
  • Ce programme repose sur une fonction de tracé de la touche qui est appelée lorsque le tracé est nécessaire. Cette fonction trace une touche centrée sur les coordonnées indiquées, de la taille voulue et de la couleur voulue. Très pratique !
void traceTouche (int xo, int yo, int taille, int couleur) {

    lcd.fillRect ((xo(taille/2)),(yo(taille/2)),(xo+(taille/2)),(yo+(taille/2)),couleur);

}
 

Le programme est globalement très commenté : bien lire les commentaires pour comprendre ce que l’on fait.

5.4  La fonction de calibration

  • Cette fonction est nécessaire au paramétrage initial du touchpad. Voir les commentaires pour les détails.

6.  Mise en oeuvre du programme

6.1  Préparation du montage et programmation de la carte Arduino :

  • Commencer par réaliser le montage indiqué sur plaque d’expérimentation
  • Ensuite, programmer la carte Arduino avec ce programme (en bas de page) selon la procédure habituelle

6.2  Fonctionnement

  • La première fois, on voit 3 petits cercles successifs qui vont permettre de calibrer le touchpad : appuyer sur chaque cercle de calibrage.
  • Lorsque l’on appuie sur la touche tactile, la touche change de couleur. Un message signale l’appui sur la touche.
Le Touchpad d’un afficheur graphique couleur 320×240 utilisé en clavier tactile numérique 4×4 et saisie de valeur entière.

(cliquer sur l’image pour agrandir)

  • Remarquer que ce programme fonctionne avec un stylet mais aussi au doigt.

7.  Le programme complet en langage Arduino

A copier/coller directement dans l’éditeur Arduino

// — Programme Arduino —
// Trame de code générée par le générateur de code Arduino
// du site www.mon-club-elec.fr

// Auteur du Programme : X. HINAULT – Tous droits réservés
// Programme écrit le : 20/10/2010.

// ——- Licence du code de ce programme —–
//  This program is free software: you can redistribute it and/or modify
//  it under the terms of the GNU General Public License as published by
//  the Free Software Foundation, either version 3 of the License,
//  or any later version.
//  This program is distributed in the hope that it will be useful,
//  but WITHOUT ANY WARRANTY; without even the implied warranty of
//  MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
//  GNU General Public License for more details.
//  You should have received a copy of the GNU General Public License
//  along with this program.  If not, see <http://www.gnu.org/licenses/>.

// ////////////////////  PRESENTATION DU PROGRAMME ////////////////////

// ——– Que fait ce programme ? ———
 /* Ce programme teste l’émulation
 d’un clavier 16 touches
sur le touchpad de l’écran. */

// — Fonctionnalités utilisées —

// Utilise adaptateur pour écran MI0283QT2 240×320 pixels – 262 K couleurs
// Utilise le touchpad ADS7846 intégré de l’écran MI0283QT2

// ——– Circuit à réaliser ———

// Connexions à réaliser pour adaptateur écran MI0283QT2 240×320 pixels – 262 K couleurs
// ces connexions sont réalisées automatiquement si utilisation du circuit imprimé mSD-shield

// —– broches utilisées pour le contrôle de l’afficheur graphique
// broche CS de l’adaptateur sur la broche 7
// broche RST de l’adaptateur sur la broche 8
// broche LED de l’adaptateur sur la broche 9

// —– broches utilisées pour la communication SPI de l’adaptateur MI0283QT2
// broche SDI de l’adaptateur sur la broche 11
// broche SDO de l’adaptateur sur la broche 12
// broche SCL de l’adaptateur sur la broche 13

// /////////////////////////////// 1. Entête déclarative ///////////////////////
// A ce niveau sont déclarées les librairies incluses, les constantes, les variables, les objets utiles…

// — Déclaration des constantes —

// — Inclusion des librairies —
#include <MI0283QT2.h> // librairie de l’afficheur TFT MI0283QT2
// Avant utilisation, faut installer manuellement cette librairie
// dans le dossier <Libraries> du dossier Arduino

#include <ADS7846.h> // inclusion de la librairie pour le touchpad
// Avant utilisation, faut installer manuellement cette librairie
// dans le dossier <Libraries> du dossier Arduino
#define TOUCHPAD_EEPROMADDR (0x00) //adresse eeprom des données de calibration du touchpad

// — Déclaration des constantes des broches E/S numériques —

// — Déclaration des constantes des broches analogiques —

// — Déclaration des variables globales —

//—– pixel central —–
int xo;
int yo;

int X, Y; // variables acquisition touchpad

int taille=50; // largeur de la touche
int ecart=8; // ecart entre les touches
const int nombreLignes=4; // nombre de lignes
const int nombreColonnes=4; // nombre de lignes

// clavier 4×4 = 4 x50 + 5×8 = 240

char touches[nombreLignes][nombreColonnes] = {
  {‘1’,‘2’,‘3’,‘+’},
  {‘4’,‘5’,‘6’,‘-‘},
  {‘7’,‘8’,‘9’,‘*’},
  {‘.’,‘0’,‘=’,‘/’}
};

/*
byte touches[nombreLignes][nombreColonnes] = {
  {1,2,3,10},
  {4,5,6,11},
  {7,8,9,12},
  {13,0,14,15}
};
*/

int testX, testY; // variable de test pour les touches
int appui; // mémorise si un appui a eu lieu

int xref=11, yref=881; // coordonnée coin sup gauche du clavier

int ligne, colonne; // variables de ligne et de colonne
int ligneSelect, colonneSelect; // variables de ligne et colonne sélectionnée

int posX=0, posXo=0; // position X du texte

int valeur=0;
long valeurSaisie=0; // valeur saisie

// — Déclaration des objets utiles pour les fonctionnalités utilisées —

MI0283QT2 lcd; // création d’un objet de type MI0283QT2 appelé lcd

ADS7846 touchpad; // création un objet touchpad de type ADS7846

// ////////////////////////// 2. FONCTION SETUP = Code d’initialisation //////////////////////////
// La fonction setup() est exécutée en premier et 1 seule fois, au démarrage du programme

void setup()   { // debut de la fonction setup()

// — ici instructions à exécuter 1 seule fois au démarrage du programme —

// ——- Initialisation fonctionnalités utilisées ——-  

//initialisation écran MI0283QT2  240×320 pixels
lcd.init(4); //spi-clk = Fcpu/4
lcd.clear(RGB(255,255,255)); // efface ecran en blanc

//—- initialisation du touchpad de l’afficheur
touchpad.init(); // initialisation du Touchpad
touchpad_calibration(); // appelle la fonction de calibration du touchpad – voir code après fonction loop

//configuration écran MI0283QT2  240×320 pixels – après calibrage touchpad
lcd.setOrientation(270); // configure orientation afficheur en degrés : 0,90,180,270
// Par défaut 0 = point 0,0 en regard connecteur USB

lcd.clear(RGB(255,255,255)); // efface ecran en blanc
lcd.led(50); // fixe luminosité

//—- configuration du touchpad de l’afficheur  – après calibrage touchpad
touchpad.setOrientation(270); // configure orientation touchpad en degrés : 0,90,180,270
// Par défaut 0 = point 0,0 en regard connecteur USB
// IMPORTANT : touchpad et afficheur doivent avoir la meme orientation !

// ——- Broches en sorties numériques ——-  

// ——- Broches en entrées numériques ——-  

// ——- Activation si besoin du rappel au + (pullup) des broches en entrées numériques ——-  

//——- initialisation des variables utilisées
//xo=lcd.getWidth()/2;
//yo=lcd.getHeight()/2;

// ——- tracé de la touche centrale

// rectangle de largeur = taille et centré sur xo,yo
//lcd.drawRect ((xo-(taille/2)),(yo-(taille/2)),(xo+(taille/2)),(yo+(taille/2)),bleu);
//lcd.fillRect ((xo-(taille/2)),(yo-(taille/2)),(xo+(taille/2)),(yo+(taille/2)),bleu);

// —– tracé initial du clavier ——

for ( ligne=1; ligne<=nombreLignes; ligne++) { // tracé des lignes

  for ( colonne=1; colonne<=nombreColonnes; colonne++) { // tracé des colonnes

    xo=xref+ecart+(taille/2)+((ecart+taille)*(colonne1));// calcule coordonnée x centre touche
    yo=yref+(taille/2)+((taille+ecart)*(ligne1));// calcule coordonnée y centre touche

    traceTouche(xo, yo, taille, bleu); // trace la touche

    // touche de 0 à 9 => affiche le chiffre
    /*if (touches[ligne-1][colonne-1] <10)(lcd.drawText(xo-4,yo-4,touches[ligne-1][colonne-1],1,jaune,bleu));
    if (touches[ligne-1][colonne-1]==10)(lcd.drawText(xo-4,yo-4,’+’,1,jaune,bleu));
    if (touches[ligne-1][colonne-1]==11)(lcd.drawText(xo-4,yo-4,’-‘,1,jaune,bleu));
    if (touches[ligne-1][colonne-1]==12)(lcd.drawText(xo-4,yo-4,’/’,1,jaune,bleu));
    if (touches[ligne-1][colonne-1]==15)(lcd.drawChar(xo-4,yo-4,’*’,1,jaune,bleu));
    if (touches[ligne-1][colonne-1]==13)(lcd.drawText(xo-4,yo-4,’.’,1,jaune,bleu));
    if (touches[ligne-1][colonne-1]==13)(lcd.drawText(xo-4,yo-4,’=’,1,jaune,bleu));  
    */

  } // fin for colonnes

} // fin for lignes

} // fin de la fonction setup()
// ********************************************************************************

////////////////////////////////// 3. FONCTION LOOP = Boucle sans fin = coeur du programme //////////////////
// la fonction loop() s’exécute sans fin en boucle aussi longtemps que l’Arduino est sous tension

void loop(){ // debut de la fonction loop()

// — ici instructions à exécuter par le programme principal —

touchpad.service(); // appel de la routine service touchpad

if (touchpad.getPressure()>10){ // si appui touchpad

   // analyse si appui dans la touche
   X=touchpad.getX(), Y=touchpad.getY();

  // —– passe en revue les touches du clavier ——

  for (ligne=1; ligne<=nombreLignes; ligne++) { // boucle des lignes

    for (colonne=1; colonne<=nombreColonnes; colonne++) { // boucle des colonnes

      xo=xref+ecart+(taille/2)+((ecart+taille)*(colonne1));// calcule coordonnée x centre touche
      yo=yref+(taille/2)+((taille+ecart)*(ligne1));// calcule coordonnée y centre touche

     //—- vérifie si appui dans la touche ———
     testX=abs(Xxo); // calcul valeur absolue de l’écart de X touchpad à xo centre trouche
     testY=abs(Yyo); // calcul valeur absolue de l’écart de Y touchpad à yo centre trouche

      //traceTouche(xo, yo, taille, bleu); // trace la touche

       if (testX<taille/2 && testY<taille/2) { // si appui dans la touche

      //— touche en rouge —
      //lcd.fillRect ((xo-(taille/2)),(yo-(taille/2)),(xo+(taille/2)),(yo+(taille/2)),rouge);
      traceTouche(xo, yo, taille, rouge); // trace la touche

      appui=1; // mémorise un appui a eu lieu
      lcd.drawText(0, 0, « Appui sur touche », 1, rouge, blanc); // affiche message

      lcd.drawText(0,10, »                          « ,1,vert,blanc); // efface affichage précédent
      lcd.drawText(0,10,« xo= »,1,rouge,blanc),lcd.drawText(30,10,xo,1,rouge,blanc);
      lcd.drawText(0,20, »                          « ,1,vert,blanc); // efface affichage précédent
      lcd.drawText(0,20,« yo= »,1,rouge,blanc),lcd.drawText(30,20,yo,1,rouge,blanc);

      ligneSelect=ligne;
      colonneSelect=colonne;      
      delay(250); // anti-rebond

      break; // sort de for si touche trouvée

       } // fin if testX

    } // fin for colonnes

    if (appui==1) break; // sort de la seconde boucle si touche trouvée

  } // fin for lignes

   //+++++++++++++ analyse de la touche saisie +++++++++++++

   //—– affiche le caractère de touche saisi —-
    posXo=posX; // pour position d’affichage commune
    posX=lcd.drawChar(posXo,55,touches[ligneSelect1][colonneSelect1],2,jaune,noir);

    //—- affiche la valeur numerique correspondante
    valeur=touches[ligneSelect1][colonneSelect1]48; // transforme ASCII en valeur numérique
    lcd.drawText(posXo,70,valeur,1,bleu,jaune);

    //—- affiche la valeur numerique entiere Saisie
    valeurSaisie=(valeurSaisie*10)+valeur; // x10 et ajoute unité
    lcd.drawText(0,78,valeurSaisie,1,bleu,jaune);

   //touchpad.service(); // appel de la routine service touchpad

} //fin touchpad.getPressure()>10

else {

// —- sinon touche en  bleu si pas fait depuis qu’un appui a eu lieu —
// — pour éviter de le refaire si déjà bleu —

  if (appui==1) {
    //lcd.fillRect ((xo-(taille/2)),(yo-(taille/2)),(xo+(taille/2)),(yo+(taille/2)),bleu);

      xo=xref+ecart+(taille/2)+((ecart+taille)*(colonneSelect1));// calcule coordonnée x centre touche
      yo=yref+(taille/2)+((taille+ecart)*(ligneSelect1));// calcule coordonnée y centre touche

    traceTouche(xo, yo, taille, bleu); // trace la touche
    appui=0; // mémorise appui pris en compte
    lcd.drawText(0, 0,  »                   « , 1, rouge, blanc); // efface message

      lcd.drawText(0,30, »                          « ,1,vert,blanc); // efface affichage précédent
      lcd.drawText(0,30,« xo= »,1,vert,blanc),lcd.drawText(30,30,xo,1,vert,blanc);
      lcd.drawText(0,40, »                          « ,1,vert,blanc); // efface affichage précédent
      lcd.drawText(0,40,« yo= »,1,vert,blanc),lcd.drawText(30,40,yo,1,vert,blanc);

    // touchpad.service(); // appel de la routine service touchpad
  }

}

} // fin de la fonction loop() – le programme recommence au début de la fonction loop sans fin
// ********************************************************************************

// ////////////////////////// AUTRES FONCTIONS DU PROGRAMME ////////////////////

// —- fonction traceTouche —
// — trace une touche de la taille voulue à partir des coordonnées xo, yo du centre de la touche
void traceTouche (int xo, int yo, int taille, int couleur) {

    lcd.fillRect ((xo(taille/2)),(yo(taille/2)),(xo+(taille/2)),(yo+(taille/2)),couleur);

    //—– trace le caractère de touche correspondant à partir du tableau touches[nombreLignes][nombreColonnes]
    lcd.drawChar(xo8,yo8,touches[ligne1][colonne1],2,jaune,couleur);

}

//—- fonction de calibration du touchpad
void touchpad_calibration(void) {

  int i; // variable locale utilisée par la fonction

  // crée un tableau des 3 points de calibration pour le LCD
  // le type CAL_POINT est une structure de 2 long x et y
  // les valeurs CAL_POINT_X1, CAL_POINT_Y1, etc… sont préfinies cf ADS7846.h
  CAL_POINT lcd_points[3] = {{CAL_POINT_X1,CAL_POINT_Y1},
                             {CAL_POINT_X2,CAL_POINT_Y2},
                            {CAL_POINT_X3,CAL_POINT_Y3}};

 // crée un tableau de 3 points de calibration pour le touchpad
 CAL_POINT touchpad_points[3], *p;

  // si des données de calibration existent déjà, sort de la fonction de calibration
  // réalise calibration uniquement au premier lancement programme
  // Le nombre d’écriture en EEPROM est limité : on pourra donc calibrer le touchpad uniquement au premier lancement
// décommenter la condition suivante pour éviter de calibrer à chaque fois
  if(touchpad.readCalibration(TOUCHPAD_EEPROMADDR)) {
    return;
  }

  // répète tant que pas prise en compte de 3 appuis – 1 appui pour chaque point de calibration
  i = 0;
  do {

    //affiche le point de calibration pour la valeur de i (affiche 3 cercles)
    lcd.drawCircle(lcd_points[i].x, lcd_points[i].y, 1, RGB(0,0,255)); // mini cercle bleu au point de calibration courant
    lcd.drawCircle(lcd_points[i].x, lcd_points[i].y, 4, RGB(0,255,0)); // petit cercle vert centré sur point calibration courant
    lcd.drawCircle(lcd_points[i].x, lcd_points[i].y, 8, RGB(255,0,0));// cercle rouge centré sur point calibration courant

    touchpad.service(); // lance la fonction de service du touchpad
    // acquisition des coordonnées x,y et pressure si appui – modif des variables public

    if(touchpad.getPressure() > 5) { // si la pression sur le touchpad supérieure à 5 = si un appui a eu lieu
      touchpad_points[i].x = touchpad.getXraw(); // mémorise la valeur X renvoyée par le touchpad non calibré
      touchpad_points[i].y = touchpad.getYraw(); // mémorise la valeur Y renvoyée par le touchpad non calibré
      i++; // incrémente i seulement si un appui a eu lieu.. l’appel de service se fait en boucle si pas appui
      lcd.clear(RGB(255,255,255)); // efface l’écran en blanc entre chaque point de calibration
    } // fin if getPressure() > 5

  }while(i<3); // répète lecture touchpad tant que pas 3 appuis – 1 pour chaque point de calibration

  //calcule la calibration du touchpad en faisant correspondre les valeurs X,Y du lcd
  // et les valeurs X,Y du touchpad obtenues à l’aide des points de calibration
  touchpad.setCalibration(lcd_points, touchpad_points);

  // enregistre en eeprom la matrice des valeurs de calibration du touchpad
  // la calibration est mémorisée meme après mise hors tension de la carte Arduino
  touchpad.writeCalibration(TOUCHPAD_EEPROMADDR);
  // Le nombre d’écriture en EEPROM est limité : on pourra donc calibrer le touchpad uniquement au premier lancement

} //——————- fin fonction calibration touchpad ————-

// ////////////////////////// Fin du programme ////////////////////

// ////////////////////////// Mémo instructions ////////////////////
// —- mémo librairie pour écran MI0283QT2 240×320 pixels – 262 K couleurs
//lcd.init(4); //spi-clk = Fcpu/4
//lcd.setOrientation(0); // configure orientation afficheur en degrés : 0,90,180,270
//lcd.clear(color);
//lcd.led(50); // fixe luminosité 0-100

// lcd.drawChar( x,  y,  ‘L’,  size,  color,  bg_color);
// lcd.drawText(x, y, « chaine », size, color, bg_color);
// lcd.drawTextPGM(x, y, PSTR(« string »), size, color, bg_color)
// lcd.drawInteger(x0, y0, integerNumber, base, size, color, bg_color);
// lcd.drawFloat( x0, y0, number, digits, size,  color,  bg_color)

// lcd.drawPixel(x, y, color);
// lcd.drawRect(x0, y0, x1, y1, color);

// Mémo librairie touchpad ADS7846 intégré de l’écran MI0283QT2

//touchpad.setOrientation(angle);

//touchpad.service();
//touchpad.getPressure()
//touchpad.getX();
//touchpad.getY();

// ////////////////////////// Fin Mémo instructions ////////////////////

 

Noter cet article

Laisser un commentaire

Votre adresse e-mail ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Archive Mon Club Elec

Articles populaires

Newsletter

Inscrivez-vous maintenant et bénéficiez d'un soutien continu pour réaliser vos travaux électriques en toute sécurité.