jeudi 22 juin 2017

Appli Android qui présente graphiquement le signal mesuré par un Arduino

Supposons que vous avez branché un capteur à votre Arduino, qui est relié par bluetooth à un appareil android.  Si vous avez lu mon récent article sur MIT App Inventor et bluetooth, vous savez comment programmer votre propre application android pour qu'elle affiche en temps réel la valeur numérique reçue de l'Arduino.  Mais ne pourrions-nous pas afficher à l'écran une jauge qui montrerait le résultat d'une façon plus visuelle?

Aujourd'hui, je vous montre deux options permettant d'obtenir un tel résultat.


Montage Arduino

Nous utiliserons une fois encore un module bluetooth HC-06.  Le circuit 4050 abaisse le signal de 5 V de la sortie Tx de l'Arduino car le module bluetooth HC-06 est conçu pour recevoir des signaux logiques de 3,3 V.

Pour effectuer mes tests, j'ai branché un potentiomètre à l'entrée A0 de l'Arduino.  Bien entendu, vous pouvez remplacer ce potentiomètre par tout autre capteur analogique ou numérique (photorésistance, thermomètre, etc).


En résumant un peu:
  • 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 

Sketch Arduino

Le sketch de l'Arduino est d'une très grande simplicité:  la valeur de l'entrée A0 est lue et envoyée à intervalles réguliers.


Appli android version 1:  utilisation de Google Charts

Pour cette première version, je me suis inspiré de ce document sur le portail Eduscol.  Il est possible d'utiliser Google Charts pour générée une jauge dont l'aiguille indique la valeur désirée.

Par exemple, cet url affiche une image indiquant une valeur équivalent à 20% du maximum (cliquez-le, pour voir!):

http://chart.apis.google.com/chart?cht=gom&chco=00CC00,0000CC&chs=450x200&chd=t:20

Alors que celui-ci affiche une image indiquant une valeur équivalent à 75% du maximum:

http://chart.apis.google.com/chart?cht=gom&chco=00CC00,0000CC&chs=450x200&chd=t:75

Évidemment, pour que ça fonctionne, votre appareil android doit avoir accès à internet.


En mode "Designer", j'ai créé 10 composants d'interface (la plupart de ces éléments se trouvaient déjà dans le programme créé dans l'article Programmer une appli Android pour communiquer en bluetooth, que vous pouvez consulter pour plus de détails):

A)  Un rectangle "Arrangement horizontal", contenant les éléments  B, C et D.
B)  Un label renommé "StatutConnexion" qui indiquera sur l'Arduino est connecté ou non.
C) Un sélectionneur de liste renommé "BoutonConnecter", qui affiche le texte "Connecter".
D) Un bouton renommé "BoutonDéconnecter" qui affiche le texte "Déconnecter".
E) Un label renommé "Label_Pourcentage", qui affichera la valeur mesurée en %.
F) Une image renommée "Image_Jauge".
G) Un label renommé "Label_Tension", qui affichera la valeur mesurée en volts.
H) Une horloge
I) Un client_bluetooth
J) Un notificateur

Tout ça est résumé dans la zone "Composants" d'App Inventor:


En mode "Blocs", je passe très rapidement sur tout ce qui concerne la connexion et la déconnexion: c'est identique à ce que nous avions fait dans Programmer une appli Android pour communiquer en bluetooth (vous pouvez cliquer sur l'image pour l'agrandir):


La partie nouvelle, se trouve dans la partie "Quand Horloge1.Chronomètre".  À intervalles réguliers (500 millisecondes, grâce au réglage effectué à l'initialisation de la fenêtre), le programme vérifie si on a reçu un message par bluetooth en provenance de l'Arduino.

Si c'est le cas, il calcule un pourcentage qu'il affiche dans le label "Label_pourcentage", il utilise ce même pourcentage pour afficher l'image "Image_Jauge" appropriée à partir de Google Charts, et il calcule le résultat en volts, qu'il affiche dans le label "Label_Tension".


Petite précaution, toutefois:  pendant que notre application android travaille pour afficher la jauge, l'Arduino a parfois le temps d'envoyer plusieurs messages consécutifs.  La variable "messageRecu" contient alors plusieurs nombres.  Au cas où une telle chose survient, il faut donc séparer cette variable en une liste de nombre, et utiliser dans nos calculs le dernier élément de la liste.

Voici le résultat à l'écran de l'appareil android.  Ça fonctionne très bien pour des valeurs qui ne changent pas très rapidement.  Si vous tournez brusquement le potentiomètre, vous remarquerez probablement que le temps de réponse est un peu long.



Vous pouvez télécharger le programme complet sous forme de fichier .aia.

Appli android version 2:  jauge linéaire

Cette deuxième version ne fait pas appel à Google Charts.  J'utilise plutôt les possibilités graphiques d'App Inventor pour dessiner une jauge linéaire (genre "progress bar").


En mode "Designer", un seul des 10 composants est différent par rapport à la version 1: le composant "F" est maintenant un cadre plutôt qu'une image (un cadre est un rectangle dans lequel notre programme pourra tracer des formes géométriques).

A)  Un rectangle "Arrangement horizontal", contenant les éléments  B, C et D.
B)  Un label renommé "StatutConnexion" qui indiquera sur l'Arduino est connecté ou non.
C) Un sélectionneur de liste renommé "BoutonConnecter", qui affiche le texte "Connecter".
D) Un bouton renommé "BoutonDéconnecter" qui affiche le texte "Déconnecter".
E) Un label renommé "Label_Pourcentage", qui affichera la valeur mesurée en %.
F) Un cadre auquel j'ai laissé le nom par défaut "Cadre1"
G) Un label renommé "Label_Tension", qui affichera la valeur mesurée en volts.
H) Une horloge
I) Un client_bluetooth
J) Un notificateur

Votre liste de composants devrait donc avoir cette allure:


Je vous montre aussi les caractéristique du cadre "cadre1".  J'ai réglé la couleur de fond à gris, pour que le rectangle soit visible.  La hauteur est de 20 pixels, alors que la largeur représente 80% de la largeur de la fenêtre.  La largeur de ligne est de 20 pixels, et la couleur de dessin est bleu.  Pour fournir une indication visuelle du signal reçu via bluetooth, nous allons donc tracer une grosse ligne bleue aussi large que le rectangle gris.


Basculons maintenant en mode "Blocs".  Toute la première partie demeure identique à ce qu'elle était dans la première version (il s'agit de la gestion des connexions/déconnexions).

La différence se trouve à l'intérieur de la partie "Quand Horloge1.Chronomètre".  Dans "Appeler Cadre1.Dessiner ligne", nous indiquons les coordonnées des deux extrémités de la ligne bleue que nous désirons tracer.  L'extrémité gauche se trouve à la coordonnée horizontale 0 (l'extrême gauche du cadre), alors que l'extrémité droite se trouve à une position proportionnelle à la valeur que nous désirons représenter.  La valeur donnée à nos coordonnées verticales (10) représentent le centre vertical de notre cadre.



Voici le résultat à l'écran de l'appareil android:




Yves Pelletier   (TwitterFacebook)

Aucun commentaire:

Enregistrer un commentaire