Dessins et boutons Zone avec PecheuxGraph

Fond d'écran cliquable

Une des méthodes que je préfère pour mettre en place des actions par clic sur l'écran est d'utiliser une image ou un dessin de fond d'écran et de définir des zones cliquables avec des boutons Zone. C'est ce qui est utilisé pour les exemples avec une maison.

Un fond d'écran cliquable: Paint

Vous n'aurez pas à utiliser tel quel les données qui sont décrites ici, mais inspirez vous de cette méthode.

J'ai utilisé paint de Xp, parce que je l'avais sous la main et que je le connais. Je suppose que votre logiciel préféré de dessin doit posséder des fonctions semblables. Il vous faut adapter les "gauche" "droite" "dans le coin"... avec votre logiciel préféré.

Si vous exécutez le programme PecheuxGraph.zip\PecheuxGraph\examples\Demonstrations\Calculatrice\Calculatrice.ino qui se trouve dans le fichier téléchargé, vous allez voir un fond d'écran qui va s'inspirer du logiciel Paint.exe de windows XP, et ce fond d'écran a été dessiné précisément avec paint.exe.

Pour faire un paint sur mon écran 320x240, je vais devoir déplacer quelques éléments. D'abord pour garder la bonne définition des symboles (si on diminue l'image, c'est moins joli) je ne vais que déplacer des parties de dessin. Il faut donc passer de ce dessin 436x401 vers ma résolution 320x240. Ouvrons un premier paint en le plus petit possible, faisons une copie d'écran, plaçons cette copie d'écran dans paint. J'ai alors un paint qui contient l'image de paint. Ouvrons un deuxième paint avec un dessin vide de 320x240 (changer les attributs). Cela va donner:

Le but est de faire passer le contenu du premier (à gauche) dans le deuxième (par des couper coller). La zone est plus petite, mais ce n'est pas trop grave, nous n'allons pas tout mettre. Il y a le grand cadre pour dessiner. On le fera à la fin, avec la place qui reste. Grisaillons le fond. La palette de couleur est plus petite que la largeur, la place à droite est perdue et à gauche on y placerait bien les fonctions. Déplaçons cette palette en bas à droite. On ne va pas garder les messages en dessous. Puis déplaçons les symboles pour les mettre à gauche. Cela donne:

Je ne vais pas tout détailler. Mais parmi les fonctions, certaines ne me plaisaient pas parce que trop compliquées comme les courbes ou la sélection non carrée. Et puis en ne gardant pas le menu, j'ai perdu la sauvegarde dont j'ai besoin. Après un certain nombre d'opérations je suis arrivé à:

Je vais maintenant montrer comment on peu mettre en place la fonction effacer avec le bon bouton (c'est l'objet de la page!). Fermons le premier paint dont nous n'avons plus besoin, mais gardons le deuxième, il nous donnera les positions des éléments.

Positionnons le curseur en haut à gauche de la croix. Nous voyons apparaître en bas à droite les coordonnées de ce point (32, 180). Gardons les.

Positionnons nous en bas à droite de la croix, et la position du curseur va apparaître: (58, 205).

Les coordonnés du bouton, c'est des coordonnés des deux coins: (32, 180, 58, 205). C'est ces valeurs qu'il faut pour définir la zone d'action du bouton. On écrira dans le fichier:

PushZone boutonEfface(32, 180, 58, 205);

Nous allons faire pareil pour avoir les coordonnées de la zone à effacer:

La zone a effacer est donc (68, 2, 316, 196). L'action à faire quand on clique sur la croix est donc:

fillRect(68, 2, 316, 196, WHITE);

Avec:
- en vert, la base que va avoir bon nombre de programmes
- en bleu, ce qui concerne cette application
- en rouge, ce que nous a donné paint
le programme associé est donc:

#include <PecheuxGraph.h>

// Création du bouton effacer l'écran
PushZone boutonEfface(32, 180, 58, 205);

// Fonction qui va effacer l'écran
void effacerEcran(void)
{
  fillRect(68, 2, 316, 196, WHITE);
}

void setup()
{
  setGraphMode(PAYSAGE); // Initialisation
  boutonEfface.onSelectFunction=&effacerEcran; // Association de effacerEcran au boutoon
}

void loop() 
{
  scanEvent(); // Gestionnaire d'événement
}

Un fond d'écran cliquable: la calculatrice

En réalité tous les fonds d'écrans sont cliquables. C'est juste que dans le cas de la calculatrice, j'ai choisi une photo plutôt qu'un dessin

Si vous exécutez le programme PecheuxGraph.zip\PecheuxGraph\examples\Demonstrations\Calculatrice\Calculatrice.ino qui se trouve dans le fichier téléchargé, vous allez voir un fond d'écran:

J'avais dans l'idée de faire une calculatrice "int-Arduino", c'est à dire calculant sur des entiers 16 bits. Les calculs Arduino sont identiques aux autres calculs sur des valeurs entières, sauf que si sur un programme sur PC on peut déclencher une exception et arrêter le programme, on ne peut pas afficher et arrêter un Arduino. Certaines fois, on a un affichage possible, mais c'est plus un périphérique qu'une base. On ne conçoit pas un ordinateur sans écran, alors qu'une carte Arduino peut ne pas avoir d'affichage. Du coup quand l'utilisateur fait des "bêtises", le programme retourne une valeur et continue. Il y a donc des particularités:
- il n'y a pas de gestion de débordement. Si on multiplie 32000 par 3, on obtient 30464 au lieu de 96000. Le résultat dépasse, et on calcule modulo 65536, ce que l'on peut vérifier (30464+65536=96000).
- les nombres sont signés et en débordant on peut "passer" de l'autre côté. Ainsi 32000+1000 donne -32536 (ajoutez 65536 et vous retrouverez 33000)
- dans les divisions, la division par 0 retourne 1 ou -1

Pour faire ce fond d'écran, j'ai pris une vraie photo d'une calculatrice, j'ai supprimé les boutons inutiles (ON OFF), ceux que je n'avais pas envie de voir (point décimal, pourcentage, racine carré, inverse...). Puis la calculatrice à été retaillée pour tenir un maximum de place sur l'écran et obtenir une image 240x320 pixels. J'en ai profité pour enlever la marque, le panneau solaire...

Je ne vais pas détailler la mise en place de tous les boutons, d'autant plus que dans le code, il s'agit de boutons dynamiques instanciés par une boucle. Mais je vais montrer comment on peut mettre en place les boutons:

 
En horizontal, il y a 5 colonnes de boutons allant de x=14 à x=223; une colonne fait (223-14)/5=41.8 pixels. Comme on n'est pas à un pixel près, nous allons dire qu'une colonne fait 42 pixels. Les limites horizontales des boutons seront 14, 14+42, 14+42*2, .. soit 14, 56, 98, 140, 182 et 224
En vertical, il y a 5 lignes de boutons allant de y=102 à y=298; une ligne fait (298-102)/5=39.2 pixels. Comme on n'est pas à un pixel près, nous allons dire qu'une ligne fait 40 pixels. Les limites verticales des boutons seront 102, 102+40, 102+40*2, .. soit 102, 142, 182, 222, 262 et 302
Le bouton "8" peut donc se définir par

PushZone bouton8(98, 142, 140, 182);

On applique la même méthode pour savoir où est l'affichage du résultat.

Des boutons textes simples personnalisés

Si on veut avoir des boutons rectangulaires, basiques, moches, avec un texte dedans, on peut s'aider de la fonction pourBoutonTexte(). Si on veut un bouton "Marche" et un bouton "Arrêt", il faut:
- mettre, par exemple en début de setup (après setGraphMode quand même pour que tout fonctionne), :

Serial.begin(115200);
pourBoutonTexte("Marche");
pourBoutonTexte("Arrêt");

On a alors tous les renseignements pour dessiner les boutons. A vous d'adapter.

dansetrad.fr Contactez-moi