dimanche 29 octobre 2017

Appli android qui présente les mesures de l'Arduino sous forme cartésienne

Aujourd'hui, je vous propose de programmer, au moyen de MIT App Inventor 2, une appli android qui va représenter sous forme de graphique cartésien les données analogiques reçues via bluetooth depuis une carte Arduino.


La vidéo ci-dessous montre l'appli en action:  les données du graphique affiché en temps réel sur la tablette sont contrôlées par un potentiomètre relié à l'entrée A0 de la carte Arduino Uno.




Avant que vous vous imaginiez que je suis un inventeur génial, je tiens à préciser que mon point de départ pour ce projet est ce tuto sur le blog Gadgetas.  J'ai utilisé le programme App Inventor conçu par Augusto Valdez et j'y ai apporté quelques modifications.

Le circuit émetteur (Arduino)

Le circuit émetteur est essentiellement constitué d'un module bluetooth HC-06 branché à une carte Arduino.  Si vous préférez utiliser une autre carte, vous pouvez consulter mes précédents billets concernant l'utilisation du module HC-06 avec le STM32 Nucleo ou avec le MSP430 Launchpad.

L'utilisation d'un circuit intégré 4050 pour abaisser le signal logique qui va de l'Arduino vers le HC-06 est nettement conseillée, afin de ne pas endommager votre HC-06 (voir ici pour plus d'informations concernant le 4050).

Pour faire varier le signal analogique qui sera mis en graphique, j'ai utilisé un potentiomètre, qui pourrait bien sûr être remplacé par n'importe quel capteur analogique (photorésistance, thermistance) ou même par un capteur numérique sous réserve de quelques modifications à l'intérieur de nos programmes.



Les principales connexions sont:
  • VCC du HC-06:  5 V de l'Arduino
  • GND du HC-06 : GND de l'Arduino
  • TXD du HC-06:  Rx de l'Arduino
  • RXD du HC-06 : 4050 : Tx de l'Arduino 

Le sketch de l'Arduino

Rien de bien compliqué du côté de l'Arduino:  il se contente d'envoyer régulièrement l'état de son entrée A0.  Seule particularité digne de mention:  chaque message commence par le symbole "#".  Ce symbole sera utilisé par l'appli Android pour valider les messages reçus.



Programmation de l'appli android avec MIT App Inventor 2

Je suppose de votre part une certaine aisance avec MIT App Inventor 2.  Au besoin, consultez mes précédents billets:  Introduction à MIT App Inventor 2 et Programmer une appli android pour communiquer en bluetooth.

Commençons en mode "Designer":  dans les propriétés de la fenêtre, assurez-vous de régler le paramètre "Orientation écran" à "Paysage".  C'est l'orientation la plus appropriée pour la plupart des graphiques cartésiens, et nous n'aurons pas à gérer les changements d'échelle qui seraient occasionnés par un passage du mode paysage vers le mode portrait, ou inversement.  J'ai aussi réglé le paramètre "Alignement horizontal" à "Centrer: 3".


Cette fenêtre comportera 9 composantes d'interface:




A) Un rectangle "Arrangement horizontal", qui sert à garder les éléments B, C et D sur une même ligne.

B)  Un "Label" que j'ai renommé "StatutConnexion". Un message indiquant si la connexion bluetooth est active ou non apparaîtra dans ce label.

C) Un "Sélectionneur de liste" que j'ai rebaptisé "BoutonConnecter".  Lorsque l'utilisateur cliquera sur cet élément, on lui présentera la liste des périphériques bluetooth disponibles.  Le paramètre "Texte" du sélectionneur de liste a été modifié pour contenir le mot "Connecter".

D) Un "Bouton" qui servira à interrompre la communication bluetooth avec l'Arduino.  J'ai remplacé son nom par "BoutonDeconnecter" et son paramètre "Texte" par "Déconnecter".

E) Un "Cadre" dans lequel notre programme dessinera le graphique.  Je lui ai laissé son nom par défaut "Cadre1", mais j'ai réglé son paramètre "Hauteur" à "Remplir parent..." , son paramètre "Largeur" à "Remplir Parent", la "Largeur de ligne" à 2.0 et la "Couleur de dessin" à "Rouge".


F) Un deuxième rectangle "Arrangement Horizontal" complètement vide, qui n'est qu'une astuce pour me réserver une marge dans le bas de la fenêtre.  Je trouvais ça plus joli.  J'ai réglé sa hauteur à 20 pixels.

G) Un "Notificateur" qui présentera un message d'alerte si bluetooth n'est pas activé sur l'appareil.

H) Un "Client Bluetooth" nécessaire pour la communication bluetooth.

I) Une "Horloge" qui détermine le moment de consulter les messages reçus via bluetooth.  Dans les paramètres de l'horloge, réglez IntervalleChronomètre à 100 millisecondes.


Voici, pour récapituler, la liste des composants de la fenêtre.  J'ai laissé les noms par défaut, sauf pour le contenu du premier arrangement horizontal:


Passons maintenant en mode "Blocs".  On définit d'abord trois variables globales:  "echelley" qui établit une relation entre la hauteur du cadre en pixels et la valeur analogique (entre 0 et 1023) reçue par bluetooth, "ancienx" qui est la position horizontale du dernier point tracé sur le graphique, et "ancieny" qui est la position verticale du dernier point tracé.


Au début de l'exécution du programme, on vérifie si bluetooth est activé sur l'appareil, on ajuste l'échelle en fonction de la hauteur du cadre, et on appelle la procédure qui trace le quadrillage.

Notez que pour la variable echelley, j'ai divisé la hauteur du cadre par 1050 plutôt que 1023 pour me réserver une petite marge libre au bord du cadre.


Lors du clic sur le sélectionneur de liste, on présente la liste des périphériques bluetooth disponibles.  Suite à un choix dans cette liste, on se connecte au périphérique choisi par l'utilisateur.

On interrompt la connexion bluetooth si l'utilisateur clique sur le bouton "Déconnecter".

C'est dans la routine d'horloge qu'on fait le gros du travail...voici une vue d'ensemble:


Faisons un zoom...

Toutes les 100 millisecondes, nous vérifions si nous avons reçu un message via bluetooth.

Si c'est le cas, nous extrayons la partie numérique du message.


Et nous traçons une droite joignant le point précédemment tracé et ce nouveau point.  Attention:  la coordonnée y du cadre est nulle en haut et de plus en plus grande à mesure qu'on descend, alors qu'on veut le contraire sur notre graphique.  C'est pourquoi la valeur de y est calculée de cette façon:
 y = hauteur du cadre - (echelley * mesure de l'Arduino)


(Je me suis gardé une petite marge de 2 pixels à gauche et en bas du cadre).

Il faut ensuite mettre à jour les variables qui contiennent les coordonnées du point précédent, et gérer le retour à gauche si on a atteint la limite droite du cadre:


Tel que son nom l'indique, la procédure "quadrillage" dessine un quadrillage dans le cadre (5 lignes horizontales, en fait). 


Puisque je vous aime bien, le programme complet sous forme de fichier .aia est disponible ici.

Yves Pelletier   (TwitterFacebook)

3 commentaires:

  1. Bonjour Yves, comme lu un peu plus haut, votre blog est une véritable mine d'or. Pour ma part, je me demandais comment afficher sous forme de courbe, un suivi IMC. Grace à vous j'ai ma réponse. Merci

    RépondreSupprimer
  2. Vraiment c'est très cool pour ma part je vous remercie

    RépondreSupprimer
  3. Merci beaucoup pour le partage.

    RépondreSupprimer