RadioZone
Beaucoup d'informations sont données pour le bouton PushZone qui ne sont pas toutes reprises ici. Une lecture de PushZone est une bonne idée.
RadioXXXX sont des classes de boutons radio comme on avait sur les vieux postes. Un bouton par gamme FM1, FM2, MW, SW, en appuyant sur un bouton, cela fait remonter les autres. Les commandes de volets roulants sont de ce type, ainsi que le choix d'un programme de lavage... Pour cette bibliothèque, lorsqu'on appuie dessus, le bouton s'active (ou reste actif), et un événement onSelect est généré. Lorsque l'on relâche l'appui, ou si l'appui sort de la zone d'action, il ne se passe rien. Si on appuie sur un bouton radio, cela va désactiver les autres boutons radio du même groupe.
On peut avoir plusieurs groupes indépendants. Avec cette bibliothèque, les limitations sont:
- le nombre maximum de boutons dans tous les groupes est le même et c'est une puissance de 2
- le nombre maximum de séries est une puissance de 2
- le produit des deux est 128
Par défaut, on peut avoir 4 groupes de 32 boutons. Ces nombres peuvent se changer au début du fichier PecheuxGraphXXXXX.h . Dans les premières lignes
on trouve:
#define RADIO_NB_BITS_GROUPE 2 // Nombre de bits pour la définition du groupe radio 0..6 // 0: 1 seul groupe de 128 boutons maxi // 1: 2 groupes maxi de 64 boutons maxi chacun // 2: 4 groupes maxi de 32 boutons maxi // 3: 8 groupes maxi de 16 boutons maxi // 4: 16 groupes maxi de 8 boutons maxi // 5: 32 groupes maxi de 4 boutons maxi // 6: 64 paires de boutons maxi
Il suffit de changer le chiffre 2 en rouge pour ajuster les nombres à nos besoins.
On peut attribuer à chaque bouton une valeur comprise entre 0 inclus et le nombre maximum de boutons exclu (par défaut ente 0 et 31, tout excès sera tronqué). On n'est pas obligé, mais cela peut être pratique pour savoir quel bouton est sélectionné.
Un groupe est un ensemble de boutons se désactivant les uns les autres, mais ne touchant pas aux autres groupes. On peut attribuer à chaque groupe un nom GROUPE_0, GROUPE_1, GROUPE_2 ou GROUPE_3. Cela correspond aux nombres de 0 à 3, mais c'est plus lisible.
Trois fonctions vont permettre de gérer efficacement les boutons radio:
- unselectRadio() permet de désélectionner tous les boutons radios d'un groupe
- getRadioValeur() nous donne la valeur du contrôle actif du groupe
- getRadioPointeur() retourne l'adresse du contrôle actif, ce qui nous permet d'accéder à toutes ses données,
par exemple sa position.
XXXXZone sont des classes de boutons sans dessin prédéfini. En principe, on affiche une image de fond qui va servir de zone visible pour les boutons de cette classe.
RadioZone est donc une classe de boutons radio sans dessin prédéfini.
Exemples d'utilisation
RadioZone bouton(0,0,LARGEUR,HAUTEUR); // Crée bouton sur toute la surface de l'écran RadioZone bouton(150,100,170,120); // Crée bouton au centre en mode PAYSAGE 320x240 RadioZone bouton = new RadioZone(100,100,120,120); // Crée une instance dynamique bouton new RadioZone(100,100,120,120); // Crée une instance dynamique bouton sans pointeur dessus circle(bouton.demiX1+bouton.demiX2, bouton.demiY1+bouton.demiY2, 10); // Cercle centré sur le bouton bouton.onSelectFunction = &action; // Appel la fonction void action(void) lors de l'appui bouton.onUnselectFunction = &action; // Appel la fonction void action(void) lors du relâchement if (bouton.isSelect())... // Si on est en train d'appuyer sur le bouton groupe = getRadioValeur();// groupe prend la valeur du bouton sélectionné du groupe GROUPE_0 groupe = getRadioValeur(GROUPE_1); // groupe prend la valeur du bouton sélectionné du groupe GROUPE_1 unselectRadio(); // Désélectionne les boutons radio du groupe GROUPE_0
Référence
![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
class RadioZone public: RadioZone(int x1, int y1, int x2, int y2, char valeur = 0, char groupe = 0); byte demiX1, demiY1, demiX2, demiY2; word buttonColor; void (*onSelectFunction)(void); void (*onUnselectFunction)(void); RadioZone *controleSuivant; void select(void); void unselect(void); boolean isSelected(void); virtual void onSelect(void); virtual void onUnselect(void) virtual void drawButton(void);
Attributs et méthodes
RadioZone(): Constructeur, s'insère dans la liste des contrôles gérées. x1, y1, x2, y2: zone d'action. valeur: numéro du bouton dans
le groupe. groupe: numéro du groupe.
demiX1, demiY1, demiX2, demiY2: Occupation de l'espace dans l'écran, coordonnés absolues DIVISEES par 2
buttonColor: Couleur du fond des boutons de la classe
*onSelectFunction: : Pointeur sur la fonction à appeler lorsque le bouton est sélectionné
*onUnselectFunction: : Pointeur sur la fonction à appeler lorsque le bouton est désélectionné
*controleSuivant: Pointeur sur le contrôle suivant dans la liste des contrôles
select(): : Active ce bouton et désactive tous les boutons du groupe.
unselect(): : Désactive ce bouton. Si il était actif, plus aucun bouton de ce groupe ne l'est.
isSelected(): : Informe de l'état du bouton.
onSelect(): : Fonction appelée lors de la sélection. On peut surcharger cette fonction, par défaut elle est vide
onUnselect(): : Fonction appelée lors de la désélection. On peut surcharger cette fonction, par défaut elle est vide
drawButton(): : Fonction appelée lors de l'activation, la désactivation, à l'initialisation de la librairie ou sur appel de la
fonction drawControles(). On peut surcharger cette fonction, par défaut elle est vide pour les boutons XXXXZone, et fait ce qu'il faut pour les autres. On
peut surcharger cette méthode, mais si on veut garder le dessin par défaut, il faut appeler la méthode drawButton() de la classe mère.
Voir aussi
- unselectRadio() Désélectionne tous les boutons radios d'un groupe
- getRadioValeur() Donne la valeur du contrôle actif du groupe
- getRadioPointeur() retourne l'adresse du contrôle actif
- scanEvent(); Moteur de la gestion des événements
- PushZone; Bouton poussoir sans dessin
- CheckZone; Bouton bistable (va vient) sans dessin
- RadioCoche; Bouton radio (un seul bouton actif parmi plusieurs) case à cocher
- RadioCircle; Bouton radio (un seul bouton actif parmi plusieurs) rond
Notes
Pour définir un bouton, il faut donner sa zone d'action. Pour des raisons de stockage mémoire et de précision, n'est enregistré que les nombres pairs des valeurs passées. Les nombres impairs sont arrondis au nombre pair inférieur. Ainsi la zone (100,100,201,201) est équivalente à (100,100,200,200).
Si on a plusieurs boutons dont les zones d'actions ont une partie commune, comme les boutons sont analysés dans l'ordre inverse de leur déclaration, la zone commune devient propriété du bouton défini en dernier. Cela évite les conflits. Cela permet aussi d'avoir un bouton dont la zone n'est pas rectangulaire, il peut manquer un coin.
Exemples
Premier exemple: 3 boutons, 6 fonctions externes
PecheuxGraph_ILI9341_8bits.zip\PecheuxGraph_ILI9341_8bits\examples\Documentation\Exemple-940-RadioZone\Exemple-940-RadioZone.ino (dans votre fichier téléchargé):
// Mise en place de 3 boutons de type RadioZone (bouton radio, pas de dessin // dans le bouton). Quand on appuie sur un bouton, un disque blanc montre son // activité // Version 1: // - Les boutons ont une définition statique // - Utilise onSelectFunction pour exécuter l'action à faire // - Une action différente pour chaque bouton # $menu = ":PG"; include <PecheuxGraph_ILI9341_8bits.h> // Appel de la bibliothèque // Déclaration statique des instances, doit se faire en dehors du setup // Dans ce cas les boutons sont accessibles partout RadioZone boutonHaut(190, 90, 230, 130); // Bouton en haut RadioZone boutonCentre(190, 140, 230, 180); // Bouton au centre RadioZone boutonBas(190, 190, 230, 230); // Bouton en bas // Déclaration de fonctions qui redessinent les boutons // Ces fonctions ne doivent pas avoir de paramètres et ne doit rien retourner // Les noms peuvent être quelconques // On peut avoir 6 fonctions comme c'est le cas ici // On peut aussi n'avoir qu'une fonction qui fait tout, deux fonctions,l'une // pour dessiner, l'autre pour effacer, ou 3 fonctions, une par bouton. // Pour savoir ce qu'il faut faire, si il y a moins de 6 fonctions, on peut // utiliser: // - isSelect() pour savoir si il faut dessiner ou effacer // - getTouchY() pour savoir quel bouton vient d'être activé // - on peut aussi tout redessiner sans chercher // Pour effacer les cercle, on peut utiliser: // - un fillCircle() comme cela a été fait dans d'autres programmes de démo // - un fillRect() qui va plus vite comme ici void onSelectActionHaut() { fillCircle(30, 110, 20, WHITE); } void onUnselectActionHaut() { fillRect(10, 90, 50, 140, BLACK); } void onSelectActionCentre() { fillCircle(30, 160, 20, WHITE); } void onUnselectActionCentre() { fillRect(10, 140, 50, 190, BLACK); } void onSelectActionBas() { fillCircle(30, 210, 20, WHITE); } void onUnselectActionBas() { fillRect(10, 190, 50, 230, BLACK); } void setup() { setGraphMode(PAYSAGE); // Initialisation de la carte rect(190, 90, 230, 130,GREEN); // Carré du haut rect(190, 140, 230, 180); // Carré au centre de l'écran rect(190, 190, 230, 230); // Carré du bas text(F("Appuyez sur un carré")); boutonHaut.onSelectFunction=&onSelectActionHaut; // Fonction appelée si on active le bouton du haut de l'écran boutonHaut.onUnselectFunction=&onUnselectActionHaut; // Fonction appelée le bouton du haut de l'écran est désactivé boutonCentre.onSelectFunction=&onSelectActionCentre; // Fonction appelée si on active le bouton au milieu de l'écran boutonCentre.onUnselectFunction=&onUnselectActionCentre; // Fonction appelée si le bouton au milieu de l'écran est désactivé boutonBas.onSelectFunction=&onSelectActionBas; // Fonction appelée si on active le bouton en bas de l'écran boutonBas.onUnselectFunction=&onUnselectActionBas; // Fonction appelée si le bouton en bas de l'écran est désactivé } void loop() { scanEvent(); // Gestion des boutons et des horloges, le plus souvent seul dans le loop }
Résultat:

Deuxième exemple: 3 boutons RadioZone
PecheuxGraph_ILI9341_8bits.zip\PecheuxGraph_ILI9341_8bits\examples\Documentation\Exemple-941-Maison-RadioZone-Volet\Exemple-941-Maison-RadioZone-Volet.ino (dans votre fichier téléchargé):
// L'intérieur d'une maison est dessinée. Trois boutons de type Radio // permettent d'ouvrir ou de fermer les volets roulants # $menu = ":PG"; include <PecheuxGraph_ILI9341_8bits.h> // Equivalece des constantes const byte MONTE = 0; const byte STOP = 2; const byte DESCEND = 1; // Définition des contrôles, doit se faire avant setup Clock horloge(100); // Le volet se déplace toutes les 100ms RadioZone boutonMonte(184, 115, 210, 127, MONTE); // Définit une zone cliquable, notre bouton monte RadioZone boutonStop(184, 129, 210, 141, STOP); // Définit une zone cliquable, notre bouton stop RadioZone boutonDescend(184, 143, 210, 155, DESCEND); // Définit une zone cliquable, notre bouton descend // Variables et constantes pour le volet roulant const word BLEU_CIEL = 0x755E; // Couleur du ciel const byte HAUT = 55; // Le haut de la fenêtre const byte BAS = 155; // le bas de la fenêtre byte position = HAUT - 1; // Position du volet (plus haut que HAUT, donc complètement rentré) // Fonction appelée tous les 100 ms pour redessiner les volets void onTimeVolets(void) { switch (getRadioValeur()) // Gestion du mouvement { case MONTE: if (position >= HAUT) position--; // Monte le volet d'un pixel si il n'est pas en haut else // on vient d'arriver en haut { // Désactivation du bouton haut, choisir une des trois possibilités (une seule sans commentaires) // getRadioPointeur()->unselect(); // Désactive le bouton haut unselectRadio(); // Désactive tous les boutons //static_cast <RadioZone *> (premierControle())->select(); // Active le bouton stop, cela fonctionne car il a été défini en dernier fill(160, 30, BLACK); // On éteint la lampe } break; case DESCEND: if (position < BAS) position++; // Descend le volet d'un pixel si il n'est pas en haut else // on vient d'arriver en bas { // Désactivation du bouton bas, choisir une des trois possibilités (une seule sans commentaires) // getRadioPointeur()->unselect(); // Désactive le bouton bas unselectRadio(); // Désactive tous les boutons // static_cast <RadioZone *> (premierControle())->select(); // Active le bouton stop, cela fonctionne car il a été défini en dernier fill(160, 30, YELLOW); // On allume la lampe } // case STOP: // On ne fait pas bouger le volet, rien à faire. } // Dessin du volet if ((getRadioValeur() == MONTE) || (getRadioValeur() == DESCEND)) // Sinon cela clignote aussi à l'arrêt { // Dessine toutes les lattes en marron fillRect(50, HAUT, 107, position, DARK_RED); fillRect(114, HAUT, 170, position, DARK_RED); // dessine une latte sur 16 en noir for (byte latte = 0; latte <= position - HAUT; latte += 16) // N° des lattes à dessiner { // Une latte sur 16 est noire hLine(50, 107, position - latte, BLACK); // Pour la vitre de gauche hLine(114, 170, position - latte); // Pour la vitre de droite } // Efface la latte en dessous (au cas ou on remonte le volet) if (position != BAS) // Seulement si on n'est pas tout en bas, sinon on dessinerait dans le cadre { hLine(50, 107, position + 1, BLEU_CIEL); // Pour la vitre de gauche hLine(114, 170, position + 1); // Pour la vitre de droite } } } void setup() { horloge.onTimeFunction = &onTimeVolets; // Action à faire quand l'horloge donne son tip setGraphMode(PAYSAGE); // Initialisation setTextCursor(10, 200); // Consigne text(F(" Appuyez sur les boutons,\n près de la porte")); maison(0, 3); // Avec 3 boutons à droite fillRect(50, 55, 107, 155, BLEU_CIEL); // Vitre de gauche, fond uni fillRect(114, 55, 170, 155); // Vitre de droite, fond uni } void loop() { scanEvent(); // Gestion des boutons et des horloges, le plus souvent seul dans le loop }
Troisième exemple: 6 boutons avec 2 groupes
PecheuxGraph_ILI9341_8bits.zip\PecheuxGraph_ILI9341_8bits\examples\Documentation\Exemple-942-Maison-RadioZone_Volets\Exemple-942-Maison-RadioZone_Volets.ino (dans votre fichier téléchargé):
// L'intérieur d'une maison est dessinée. Trois boutons de type Radio // permettent de fermer le volet gauche, trois autres permettent de fermer le // volet droit # $menu = ":PG"; include <PecheuxGraph_ILI9341_8bits.h> // Equivalece des constantes const byte MONTE = 0; const byte STOP = 2; const byte DESCEND = 1; // Définition des contrôles dynamiques, peut se faire avant ou après setup // On peut panacher, cela n'a pas d'importance. Normalement, on ne le fait pas. // Si c'est fait ici, c'est à titre d'exemple. // Bouton de droite, groupe 0 (pas nécessaire de le préciser, c'est par défaut) RadioZone *monteDroite = new RadioZone(184, 115, 210, 127, MONTE); // Définit une zone cliquable, notre bouton monte de droite // Notez que monteDroite est un nom qui ne nous servira pas, mais on en a besoin pour la déclaration // Boutons de gauche, groupe 1, il faut le dire RadioZone *stopGauche = new RadioZone(7, 129, 35, 141, STOP, GROUPE_1); // Définit une zone cliquable, notre bouton stop de gauche RadioZone *descendGauche = new RadioZone(7, 143, 35, 155, DESCEND, GROUPE_1); // Définit une zone cliquable, notre bouton descend de gauche // On va garder l'horloge statique. Le panachage est complet. Clock horloge(100); // Le volet se déplace toutes les 100ms // Variables et constantes pour les volets roulants const word BLEU_CIEL = 0x755E; // Couleur du ciel const byte HAUT = 55; // Le haut de la fenêtre const byte BAS = 155; // le bas de la fenêtre byte positionDroite = HAUT - 1; // Position du volet droit (plus haut que HAUT, donc complètement rentré) byte positionGauche = HAUT - 1; // Position du volet gauche (plus haut que HAUT, donc complètement rentré) void onTimeVolets(void) // Fonction appelée tous les 100 ms pour redessiner les volets { //------------ Volet de droite ---------------- switch (getRadioValeur()) // Gestion du mouvement { case MONTE: if (positionDroite >= HAUT) positionDroite--; // Monte le volet d'un pixel si il n'est pas en haut else // on vient d'arriver en haut { // Désactivation du bouton haut, choisir une des deux possibilités (une seule sans commentaires) // getRadioPointeur()->unselect(); // Désactive le bouton activé, c'est le bouton haut unselectRadio(); // Désactive tous les boutons if (positionGauche == HAUT - 1) // si l'autre volet est aussi en haut fill(160, 30, BLACK); // On éteint la lampe } break; case DESCEND: if (positionDroite < BAS) positionDroite++; // Descend le volet d'un pixel si il n'est pas en haut else // on vient d'arriver en bas { // Désactivation du bouton haut, choisir une des deux possibilités (une seule sans commentaires) // getRadioPointeur()->unselect(); // Désactive le bouton activé unselectRadio(); // Désactive tous les boutons if (positionGauche == BAS) // si l'autre volet est aussi en bas fill(160, 30, YELLOW); // On allume la lampe } } // Dessin du volet if ((getRadioValeur() == MONTE) || (getRadioValeur() == DESCEND)) // Sinon cela clignote aussi à l'arrêt { // Dessine toutes les lattes en marron fillRect(114, HAUT, 170, positionDroite, DARK_RED); // dessine une latte sur 16 en noir for (byte latte = 0; latte <= positionDroite - HAUT; latte += 16) hLine(114, 170, positionDroite - latte, BLACK); // Une latte sur 16 est noire // Efface la latte en dessous (au cas ou on remonte le volet) if (positionDroite != BAS) hLine(114, 170, positionDroite + 1, BLEU_CIEL); // Seulement si on n'est pas tout en bas, sinon on dessinerait dans le cadre } //------------ Volet de gauche ---------------- switch (getRadioValeur(GROUPE_1)) // Gestion du mouvement { case MONTE: if (positionGauche >= HAUT) positionGauche--; // Monte le volet d'un pixel si il n'est pas en haut else // on vient d'arriver en haut { // Désactivation du bouton haut, choisir une des deux possibilités (une seule sans commentaires) // getRadioPointeur()->unselect(); // Désactive le bouton activé, c'est le bouton haut unselectRadio(GROUPE_1); // Désactive tous les boutons if (positionDroite == HAUT - 1) // si l'autre volet est aussi en haut fill(160, 30, BLACK); // On éteint la lampe } break; case DESCEND: if (positionGauche < BAS) positionGauche++; // Descend le volet d'un pixel si il n'est pas en haut else // on vient d'arriver en bas { // Désactivation du bouton haut, choisir une des deux possibilités (une seule sans commentaires) // getRadioPointeur()->unselect(); // Désactive le bouton activé unselectRadio(GROUPE_1); // Désactive tous les boutons if (positionDroite == BAS) // si l'autre volet est aussi en bas fill(160, 30, YELLOW); // On allume la lampe } } // Dessin du volet if ((getRadioValeur(GROUPE_1) == MONTE) || (getRadioValeur(GROUPE_1) == DESCEND)) // Sinon cela clignote aussi à l'arrêt { // Dessine toutes les lattes en marron fillRect(50, HAUT, 107, positionGauche, DARK_RED); // dessine une latte sur 16 en noir for (byte latte = 0; latte <= positionGauche - HAUT; latte += 16) hLine(50, 107, positionGauche - latte, BLACK); // Une latte sur 16 est noire // Efface la latte en dessous (au cas ou on remonte le volet) if (positionGauche != BAS) hLine(50, 107, positionGauche + 1, BLEU_CIEL); // Seulement si on n'est pas tout en bas, sinon on dessinerait dans le cadre } } void setup() { setGraphMode(PAYSAGE); // Initialisation // Définition des contrôles dynamiques, après setup // Comme on n'a pas besoin de changer un comportement, on n'a pas besoin de garder une trace // de l'objet. On se moque de ce que retourne new // Boutons de droite, groupe 0 (pas nécessaire de le préciser, c'est par défaut) new RadioZone(184, 129, 210, 141, STOP); // Définit une zone cliquable, notre bouton stop de droite new RadioZone(184, 143, 210, 155, DESCEND); // Définit une zone cliquable, notre bouton descend de droite // Boutons de gauche, groupe 1, il faut le dire new RadioZone(7, 115, 35, 127, MONTE, GROUPE_1); // Définit une zone cliquable, notre bouton monte de gauche horloge.onTimeFunction = &onTimeVolets; // Action à faire quand l'horloge donne son tip // Consigne setTextCursor(10, 200); text(F("Appuyez sur les boutons,\n de chaque côté de la porte")); maison(3, 3); // avec 3 boutons de chaque côté fillRect(50, 55, 107, 155, BLEU_CIEL); // Vitre de gauche, ciel uni fillRect(114, 55, 170, 155); // Vitre de droite, ciel uni } void loop() { scanEvent(); // Gestion des boutons et des horloges, le plus souvent seul dans le loop }
Résultat:
Côté technique
En fait RadioZone ne fait que la moitié du travail, car c'est le gestionnaire scanEvent() qui vient demander les propriétés de RadioZone et qui calcule si il est pointé ou pas. il ne reste plus qu'à RadioZone de gérer la sélection ou la désélection. C'est RadioZone qui appelle appelle onSelect(), onSelectFunction, onUnselect(), onUnselectFunction, et qui demande le dessin du bouton.