Électronique, Arduino, Raspberry Pi, ESP32, ESP8266, STM32, robotique, expériences scientifiques, et bien d'autres choses encore.
lundi 26 juin 2017
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:
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
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):
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).
Voici le résultat à l'écran de l'appareil android:
Yves Pelletier (Twitter, Facebook)
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.
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:
mercredi 14 juin 2017
Programmer une appli Android pour communiquer en bluetooth
L'objectif du tuto d'aujourd'hui est de réaliser, au moyen de MIT App Inventor 2, une application Android qui communiquera par bluetooth avec une carte Arduino.
Une application de ce genre pourrait permettre de contrôler de l'éclairage ou des moteurs (un robot!) au moyen de votre appareil Android, ou encore de lire au moyen de votre appareil Android l'état de capteurs externes branchés à l'Arduino.
Quelques préalables
Pour réaliser l'activité d'aujourd'hui, vous devez disposer d'un ordinateur sur lequel vous programmerez, d'un appareil android (smartphone ou tablette), d'une carte Arduino et d'un module Bluetooth HC-06.
Cette activité suppose que vous avez déjà un tout petit peu d'expérience avec MIT App Inventor. Si ce n'est pas le cas, je vous conseille vivement de réaliser le programme d'exploration décrit dans mon article Introduction à MIT App Inventor 2.
Je vais également supposer que vous savez comment brancher le module HC-06 à votre carte Arduino, et que vous avez déjà réglé votre appareil Android pour permettre une communication bluetooth avec l'Arduino. Si ce n'est pas le cas, pas de panique: tout ça est couvert dans mon article Bluetooth et Arduino: le module HC-06.
Le produit fini
Je crois que les explications seront plus facile à suivre si vous connaissez, dès le départ, les caractéristiques de l'application que nous désirons réaliser.
Il s'agit d'une appli très générale, qui se divise en trois parties principales:
1) Dans le haut de la fenêtre, une paire de boutons permet d'établir ou d'interrompre la connexion avec l'Arduino. Si aucune connexion bluetooth n'est active, le mot "Déconnecté" apparaît en rouge. Si une connexion bluetooth est active, le mot "Connecté" apparaît en vert.
2) Un peu plus bas, une zone de texte accompagnée d'un bouton permet à l'utilisateur d'envoyer à l'Arduino un message de son choix.
3) Finalement, un label affiche le plus récent message reçu en provenance de l'Arduino.
Certains lecteurs pourraient mettre en doute la pertinence de réaliser soi-même une telle application alors qu'il en existe déjà des dizaines de ce genre dans le Google Play Store... Sachez qu'une fois réalisé ce programme général de communication bluetooth, il sera facile de le modifier pour en faire une application spécifique à un projet particulier.
Construction de l'interface
Commençons par construire l'interface, dans le mode "Designer":
L'interface comporte 11 composants:
1) Un rectangle "Arrangement horizontal", pris dans la catégorie "Disposition". Cet élément (qui n'est pas indispensable) permet de faire en sorte que les éléments 2, 3 et 4 seront disposés dans la fenêtre sur une même ligne horizontale (il faut placer les éléments 2, 3 et 4 à l'intérieur de ce rectangle).
2) Un "Label" (disponible dans la catégorie "Interface Utilisateur"). Par défaut, ce label portait le nom "Label1", mais je l'ai renommé "StatutConnexion". La mention "connecté" ou "déconnecté" s'affichera à cet endroit.
3) Un "Sélectionneur de liste" (disponible dans la catégorie "Interface Utilisateur"). Lorsque l'utilisateur cliquera sur cet élément, la liste des appareils bluetooth disponibles s'affichera à l'écran. J'ai renommé cet élément "BoutonConnecter", et j'ai remplacé son texte par "Connecter".
4) Un "Bouton" (disponible dans la catégorie "Interface Utilisateur") qui servira à interrompre la connexion avec l'Arduino. J'ai renommé cet élément "BoutonDéconnecter", et j'ai remplacé son texte par "Déconnecter".
5) Un deuxième rectangle "Arrangement horizontal", pris dans la catégorie "Disposition". Les éléments 6 et 7 seront placés à l'intérieur de ce rectangle.
6) Une "Zone de texte" (disponible dans la catégorie "Interface Utilisateur") dans laquelle l'utilisateur écrira le message à envoyer vers l'Arduino. J'ai renommé cet élément "MessageAEnvoyer".
7) Un "Bouton" (disponible dans la catégorie "Interface Utilisateur") pour envoyer le message. Je l'ai renommé "BoutonEnvoyer", et j'ai remplacé son texte par défaut par "Envoyer".
8) Un deuxième "Label" (disponible dans la catégorie "Interface Utilisateur"). Notre programme y placera le dernier message en provenance de l'Arduino. Je l'ai renommé "MessageRecu", et j'ai remplacé son texte par défaut par "Aucun message reçu".
9) Une "Horloge" (disponible dans la catégorie "Capteurs"). Grâce à cette horloge, une fois par seconde, notre programme vérifiera s'il a reçu un message en provenance de l'Arduino.
10) Un "Client Blutooth" (disponible dans la catégorie "Connectivité"), indispensable pour toute application qui communique avec bluetooth.
11) Un "Notificateur" (disponible dans la catégorie "Interface Utilisateur"), qui permet d'afficher un message d'alerte si bluetooth n'a pas été activé sur l'appareil android.
Pour récapituler, voici ma zone "Composants": on peut y voir le nom et la hiérarchie de chaque composant placé dans la zone "Interface". (Au cas où vous ne l'auriez pas déjà remarqué: c'est au bas de cette zone qu'on retrouve un bouton "Renommer" qui nous permet d'assigner un nom plus approprié à chaque composant).
Construction du programme
Basculons maintenant en mode "Blocs" pour construire notre programme. Rappelez-vous que la couleur des blocs vous donne un indice concernant la catégorie où vous pouvez le trouver.
1) Une première série d'instructions concerne ce que le programme doit faire au démarrage de l'application.
Lors de l'initialisation de la fenêtre, on vérifie si bluetooth est activé sur l'appareil android. Si ce n'est pas le cas, un message d'alerte est présenté à l'utilisateur.
Que bluetooth soit activé ou non, aucun appareil bluetooth n'est lié à notre application au démarrage. Nous réglons donc le texte du label "StatutConnexion" à "Déconnecté" (en rouge).
2) Occupons-nous maintenant de notre "Sélectionneur de liste" intitulé "BoutonConnecter".
Cette instruction fait en sorte que, lorsqu'on clique sur cet élément, une liste des appareils bluetooth disponibles s'affiche à l'écran.
3) Ensuite, il faut décrire les actions à accomplir lorsque l'utilisateur clique sur le nom d'un appareil bluetooth, dans la liste affichée par le sélectionneur de liste "BoutonConnecter".
On se connecte à l'appareil choisi par l'utilisateur et, si la connexion s'effectue avec succès, on remplace le contenu du label "StatutConnexion" par la mention "Connecté" (en vert).
4) Si l'utilisateur clique sur le bouton "Déconnecter"...on se déconnecte! (En n'oubliant pas de mettre à jour le contenu du label "StatutConnexion").
5) Si l'utilisateur clique sur le bouton "BoutonEnvoyer", on envoie par bluetooth le contenu de la zone de texte "MessageAEnvoyer".
6) Une fois par seconde, l'horloge vérifie si un message a été reçu. Si c'est le cas, le message est affichée à l'intérieur du label "MessageRecu".
(vous pouvez cliquer sur l'image pour l'agrandir...)
Fichier "aia"
Si vous éprouvez quelques difficultés à reproduire le programme, ou si vous êtes simplement paresseux, vous pouvez télécharger le fichier tout fait et l'importer dans App Inventor.
Mise à l'essai
Pour une première mise à l'essai de notre application android fraîchement programmée, je vous propose d'utiliser, du côté Arduino, le montage et le sketch proposés dans mon article Bluetooth et Arduino: le module HC-06. Vous pourrez alors envoyer des message à l'Arduino à partir de votre appareil android. Sur réception de ces message, l'Arduino allumera ou éteindra deux LEDs, et retournera un message expliquant le nouvel état des deux LEDs.
Personnalisation de l'application
J'ai volontairement choisi une application générale qui montre comment envoyer et recevoir n'importe quel message par bluetooth. Dans le cas particulier de notre Arduino qui allume et éteint deux LEDs, seulement 5 messages sont pertinents (a, b, c, d ou e). Il serait donc plus approprié de placer 5 boutons: un bouton qui envoie le message "a", un autre qui envoie le message "b", etc. Ce serait plus simple pour l'utilisateur, et ça lui éviterait d'envoyer des messages qui ne sont pas pertinents.
C'est là tout l'intérêt de savoir programmer ses propres applis avec App Inventor: vous pouvez créer une application qui répond à un besoin très spécifique.
Yves Pelletier (Twitter, Facebook)
Une application de ce genre pourrait permettre de contrôler de l'éclairage ou des moteurs (un robot!) au moyen de votre appareil Android, ou encore de lire au moyen de votre appareil Android l'état de capteurs externes branchés à l'Arduino.
Quelques préalables
Pour réaliser l'activité d'aujourd'hui, vous devez disposer d'un ordinateur sur lequel vous programmerez, d'un appareil android (smartphone ou tablette), d'une carte Arduino et d'un module Bluetooth HC-06.
Cette activité suppose que vous avez déjà un tout petit peu d'expérience avec MIT App Inventor. Si ce n'est pas le cas, je vous conseille vivement de réaliser le programme d'exploration décrit dans mon article Introduction à MIT App Inventor 2.
Je vais également supposer que vous savez comment brancher le module HC-06 à votre carte Arduino, et que vous avez déjà réglé votre appareil Android pour permettre une communication bluetooth avec l'Arduino. Si ce n'est pas le cas, pas de panique: tout ça est couvert dans mon article Bluetooth et Arduino: le module HC-06.
Le produit fini
Je crois que les explications seront plus facile à suivre si vous connaissez, dès le départ, les caractéristiques de l'application que nous désirons réaliser.
Il s'agit d'une appli très générale, qui se divise en trois parties principales:
1) Dans le haut de la fenêtre, une paire de boutons permet d'établir ou d'interrompre la connexion avec l'Arduino. Si aucune connexion bluetooth n'est active, le mot "Déconnecté" apparaît en rouge. Si une connexion bluetooth est active, le mot "Connecté" apparaît en vert.
2) Un peu plus bas, une zone de texte accompagnée d'un bouton permet à l'utilisateur d'envoyer à l'Arduino un message de son choix.
3) Finalement, un label affiche le plus récent message reçu en provenance de l'Arduino.
Certains lecteurs pourraient mettre en doute la pertinence de réaliser soi-même une telle application alors qu'il en existe déjà des dizaines de ce genre dans le Google Play Store... Sachez qu'une fois réalisé ce programme général de communication bluetooth, il sera facile de le modifier pour en faire une application spécifique à un projet particulier.
Construction de l'interface
Commençons par construire l'interface, dans le mode "Designer":
L'interface comporte 11 composants:
1) Un rectangle "Arrangement horizontal", pris dans la catégorie "Disposition". Cet élément (qui n'est pas indispensable) permet de faire en sorte que les éléments 2, 3 et 4 seront disposés dans la fenêtre sur une même ligne horizontale (il faut placer les éléments 2, 3 et 4 à l'intérieur de ce rectangle).
2) Un "Label" (disponible dans la catégorie "Interface Utilisateur"). Par défaut, ce label portait le nom "Label1", mais je l'ai renommé "StatutConnexion". La mention "connecté" ou "déconnecté" s'affichera à cet endroit.
3) Un "Sélectionneur de liste" (disponible dans la catégorie "Interface Utilisateur"). Lorsque l'utilisateur cliquera sur cet élément, la liste des appareils bluetooth disponibles s'affichera à l'écran. J'ai renommé cet élément "BoutonConnecter", et j'ai remplacé son texte par "Connecter".
4) Un "Bouton" (disponible dans la catégorie "Interface Utilisateur") qui servira à interrompre la connexion avec l'Arduino. J'ai renommé cet élément "BoutonDéconnecter", et j'ai remplacé son texte par "Déconnecter".
5) Un deuxième rectangle "Arrangement horizontal", pris dans la catégorie "Disposition". Les éléments 6 et 7 seront placés à l'intérieur de ce rectangle.
6) Une "Zone de texte" (disponible dans la catégorie "Interface Utilisateur") dans laquelle l'utilisateur écrira le message à envoyer vers l'Arduino. J'ai renommé cet élément "MessageAEnvoyer".
7) Un "Bouton" (disponible dans la catégorie "Interface Utilisateur") pour envoyer le message. Je l'ai renommé "BoutonEnvoyer", et j'ai remplacé son texte par défaut par "Envoyer".
8) Un deuxième "Label" (disponible dans la catégorie "Interface Utilisateur"). Notre programme y placera le dernier message en provenance de l'Arduino. Je l'ai renommé "MessageRecu", et j'ai remplacé son texte par défaut par "Aucun message reçu".
9) Une "Horloge" (disponible dans la catégorie "Capteurs"). Grâce à cette horloge, une fois par seconde, notre programme vérifiera s'il a reçu un message en provenance de l'Arduino.
10) Un "Client Blutooth" (disponible dans la catégorie "Connectivité"), indispensable pour toute application qui communique avec bluetooth.
11) Un "Notificateur" (disponible dans la catégorie "Interface Utilisateur"), qui permet d'afficher un message d'alerte si bluetooth n'a pas été activé sur l'appareil android.
Pour récapituler, voici ma zone "Composants": on peut y voir le nom et la hiérarchie de chaque composant placé dans la zone "Interface". (Au cas où vous ne l'auriez pas déjà remarqué: c'est au bas de cette zone qu'on retrouve un bouton "Renommer" qui nous permet d'assigner un nom plus approprié à chaque composant).
Construction du programme
Basculons maintenant en mode "Blocs" pour construire notre programme. Rappelez-vous que la couleur des blocs vous donne un indice concernant la catégorie où vous pouvez le trouver.
1) Une première série d'instructions concerne ce que le programme doit faire au démarrage de l'application.
Lors de l'initialisation de la fenêtre, on vérifie si bluetooth est activé sur l'appareil android. Si ce n'est pas le cas, un message d'alerte est présenté à l'utilisateur.
Que bluetooth soit activé ou non, aucun appareil bluetooth n'est lié à notre application au démarrage. Nous réglons donc le texte du label "StatutConnexion" à "Déconnecté" (en rouge).
2) Occupons-nous maintenant de notre "Sélectionneur de liste" intitulé "BoutonConnecter".
3) Ensuite, il faut décrire les actions à accomplir lorsque l'utilisateur clique sur le nom d'un appareil bluetooth, dans la liste affichée par le sélectionneur de liste "BoutonConnecter".
On se connecte à l'appareil choisi par l'utilisateur et, si la connexion s'effectue avec succès, on remplace le contenu du label "StatutConnexion" par la mention "Connecté" (en vert).
4) Si l'utilisateur clique sur le bouton "Déconnecter"...on se déconnecte! (En n'oubliant pas de mettre à jour le contenu du label "StatutConnexion").
5) Si l'utilisateur clique sur le bouton "BoutonEnvoyer", on envoie par bluetooth le contenu de la zone de texte "MessageAEnvoyer".
(vous pouvez cliquer sur l'image pour l'agrandir...)
Fichier "aia"
Si vous éprouvez quelques difficultés à reproduire le programme, ou si vous êtes simplement paresseux, vous pouvez télécharger le fichier tout fait et l'importer dans App Inventor.
Mise à l'essai
Pour une première mise à l'essai de notre application android fraîchement programmée, je vous propose d'utiliser, du côté Arduino, le montage et le sketch proposés dans mon article Bluetooth et Arduino: le module HC-06. Vous pourrez alors envoyer des message à l'Arduino à partir de votre appareil android. Sur réception de ces message, l'Arduino allumera ou éteindra deux LEDs, et retournera un message expliquant le nouvel état des deux LEDs.
J'ai volontairement choisi une application générale qui montre comment envoyer et recevoir n'importe quel message par bluetooth. Dans le cas particulier de notre Arduino qui allume et éteint deux LEDs, seulement 5 messages sont pertinents (a, b, c, d ou e). Il serait donc plus approprié de placer 5 boutons: un bouton qui envoie le message "a", un autre qui envoie le message "b", etc. Ce serait plus simple pour l'utilisateur, et ça lui éviterait d'envoyer des messages qui ne sont pas pertinents.
C'est là tout l'intérêt de savoir programmer ses propres applis avec App Inventor: vous pouvez créer une application qui répond à un besoin très spécifique.
Yves Pelletier (Twitter, Facebook)
dimanche 11 juin 2017
Introduction à MIT App Inventor 2
MIT App Inventor est un environnement de programmation graphique qui vous permet de créer très facilement des applications pour les appareils portables Android. Les programmes sont construits en imbriquant des blocs (comme dans Scratch), ce qui permet aux programmeurs débutants de créer des applications fonctionnelles en peu de temps, sans qu'un long apprentissage préalable ne soit nécessaire.
Mon objectif à moyen terme est de vous enseigner comment on peut créer ses propres applications afin d'intégrer un smartphone à nos créations électroniques: robot contrôlé par smartphone, éclairage domestique contrôlé par smartphone, etc.
Mais avant d'en arriver là, nous nous contenterons aujourd'hui de concevoir un programme très simple, qui constituera une première exploration de MIT App Inventor 2. Dans quelques jours, je vous proposerai un deuxième article qui abordera la gestion de Bluetooth par MIT App Inventor.
Dans un premier temps, nous allons donc créer une application qui calcule le courant qui traverse une résistance, lorsqu'on lui fournit la tension et la valeur de la résistance (une simple application de la loi d'Ohm, donc).
Accéder au site App Inventor 2
Nous nous apprêtons à programmer une application pour appareils Android, mais c'est sur un ordinateur (Windows, Mac ou Linux) que nous allons générer cette application.
L'utilisation d'App Inventor ne nécessite l'installation d'aucun logiciel sur votre ordinateur: vous accéder au site App Inventor 2 à partir d'un fureteur web. C'est totalement gratuit, la seule restriction est d'être détenteur d'un compte Google (également gratuit).
Une fois dans App Inventor 2, c'est une bonne idée demander l'affichage en français (à moins que ce soit déjà le cas): pour ce faire, vous utilisez un menu situé en haut à droite.
Création d'un projet
Nous cliquons sur le bouton "Commencer un nouveau projet...", situé en haut à gauche.
...et nous choisissons un nom pour ce projet (j'ai choisi "Calculateur_de_Courant").
La fenêtre devrait maintenant être divisée en 5 zones: Palette, Interface, Composants, Média, Propriétés. C'est ici que nous allons construire notre application.
Installation de MIT AI2 Companion
Afin de tester votre application sur votre appareil Android pendant que vous la programmez sur l'ordinateur, vous devez installer l'application MIT AI2 Companion sur votre appareil Android, à partir du Google Play Store.
Pour connaître le code de 6 caractères (ou afficher le code QR, si c'est ce que vous préférez), vous retournez à votre ordinateur, et vous choisissez "Compagnon AI" dans le menu "Connecte".
...ce qui affiche un dialogue comportant le code à recopier dans MIT AI2 Companion.
Une fois ce code recopié (ou le code QR scanné), MIT AI2 Companion votre application en temps réel, à mesure que vous la modifiez (pour l'instant, il s'agit d'une fenêtre vide).
Création de l'interface de notre application
Retour à l'ordinateur, dans MIT App Inventor. La fenêtre principale de notre application est affichée dans la zone "Interface", située en plein milieu de notre écran. Par défaut, cette fenêtre a été baptisée "Screen1", ce qui n'est pas très joli.
Pour changer le titre de la fenêtre, vous allez dans la zone "Propriétés", située complètement à droite. Vous remplacez le titre initial par celui que vous voulez (j'ai choisi "Calculateur de Courant").
Le titre de la fenêtre devrait instantanément est mis à jour sur la simulation qui se trouve dans la zone "Interface", mais aussi dans le Compagnon qui se trouve sur votre appareil Android.
La palette, située à gauche, comporte une liste d'éléments pouvant être disposés dans la fenêtre de notre application: boutons, zones de texte, etc. Pour ajouter un de ces éléments dans la fenêtre, il s'agit de le faire glisser de la zone "Palette" vers la zone "Interface" située en plein centre de la fenêtre.
Je commence par insérer un élément de type "Label"; il s'agit d'une zone de texte dont le contenu ne peut pas être modifié par l'utilisateur (mais qui peut, au besoin, être modifié par notre programme).
J'ai écrit "Veuillez écrire la tension et la résistance, puis cliquez sur le bouton "Calculer"".
Le texte n'est pas visible au complet dans la zone "Interface" (qui n'est qu'une simulation grossière), mais il est correctement affiché quand on regarde sur l'appareil Android, dans MIT AI2 Companion.
Ensuite, j'ajoute une zone de texte dans laquelle l'utilisateur écrira la valeur numérique de la tension. Contrairement aux labels, le contenu des zones de texte peuvent être modifiés par l'utilisateur.
Si vous regardez le résultat sur votre appareil Android, la zone de texte comporte un texte par défaut ("Nucance pour Zone_de_texte").
J'ajoute ensuite un 3e label dont le contenu sera "Résistance (en ohms):", et une deuxième zone de texte qui permettra à l'utilisateur d'écrire la valeur de la résistance.
J'ajoute finalement un bouton que l'utilisateur cliquera pour demander le résultat du calcul (changez le texte du bouton par "Calculer"), et un 4e label, qui contiendra le résultat du calcul (vous pouvez effacer son texte par défaut et le laisser vide pour l'instant).
Par défaut, tous ces éléments sont alignés à gauche de la fenêtre. Si vous cliquez dans le fond de la fenêtre, la zone "Propriétés" affichera à nouveau les propriétés de la fenêtre "Screen1". Réglez l'alignement horizontal à "Center: 3".
Notre appareil android affiche maintenant une jolie fenêtre comportant tous les éléments nécessaires. Lorsque vous cliquez sur une zone de texte, c'est déjà possible d'y écrire un nombre. Mais si vous cliquez sur le bouton, évidemment, rien ne se passe.
Depuis le début, nous étions en mode "Designer". Nous allons maintenant passer en mode programmation. en cliquant sur le bouton "Blocs", en haut à droite.
Observons le contenu de la partie gauche de la fenêtre (intitulée "Blocs"): il y a d'abord une liste de catégories (Contrôle, Logique, Math, etc.), puis la liste des éléments que nous avons placés dans notre fenêtre (Label1, Label2, etc.).
Ha oui: pendant que j'y pense: pendant que nous étions en mode "Designer", nous aurions pu modifier chacun de ces noms attribués par défaut aux éléments que nous avons créés. Par exemple, nous aurions pu remplacer le nom "Zone_de_texte1" par "Texte_Tension" ou remplacer "Label4" par "Label_Reponse". Quand le programme est complexe, c'est plus facile de s'y retrouver si vous choisissez des noms plus appropriés.
Commençons par définir une variable, qui contiendra plus tard la valeur du courant. Cliquez sur la catégorie "Variables".
Cliquez sur le bloc "initialise global nom à" et faite-le glisser dans la zone "Interface".
Remplacez "nom" par "courant".
Pour régler sa valeur initiale à zéro, cliquez sur la catégorie "Math", et faites glisser le bloc "0" pour l'imbriquer à la droite du bloc précédent.
Dans la zone interface, notre programme a maintenant cette allure:
(Petite remarque: il n'était pas nécessaire que cette variable soit globale, puisqu'elle ne servira que lors d'un clic sur le bouton).
Nous allons maintenant établir ce qui se produira lors d'un clic sur le bouton. Pour ce faire, cliquez sur "Bouton1", et choisissez la première option: "quand Bouton1 Clic faire".
Que vous faites glisser dans la zone "Interface":
Donc retour à la catégorie "Variables", dans laquelle on choisit le bloc "mettre à":
Ce bloc doit être inséré à l'intérieur du bloc "quand bouton1 clic". De plus, vous remplacez "nom" par "global courant", qui est le nom de notre variable.
Le calcul du courant en milliampères (unités de mesure plus pratiques que les ampères) est égal à 1000 * tension / résistance.
Les opérations mathématiques se trouvent, sans surprise, dans la catégorie mathématique. Commençons par la division:
Le prochain élément de l'équation sera la tension, qui se trouve dans la "Zone_de_texte1". Dans la liste des blocs, nous cliquons donc sur "Zone_de_texte1", qui nous donne accès aux blocs qui concernent cet élément.
Dans la liste, nous choisissons le bloc "Zone_de_texte1.Texte": il s'agit du texte qui a été entré par l'utilisateur dans la zone de texte numéro 1. On fait glisser ce bloc à l'intérieur de notre équation mathématique.
On fait la même chose avec la zone de texte numéro 2, qui contient la valeur de la résistance:
Mais on ne peut pas se contenter de calculer la valeur du courant, il faut aussi l'afficher dans notre label numéro 4. Dans la liste des blocs, nous cliquons sur "Label4" et nous choisissons le bloc "mettre Label4.Texte à".
Notre programme a maintenant cette allure:
Le label numéro 4 contiendra la valeur numérique du courant, mais aussi les unités de mesures (pour que l'utilisateur sache que le résultat est affichée en milliampères). Pour ce faire, nous utiliserons un bloc "joint" dans la catégorie texte:
Dans la zone "Interface", ce bloc "joint" doit être imbriqué dans le bloc "mettre Label4.Texte à".
Retour à la catégorie variable pour prendre un bloc "obtenir".
Ce bloc "obtenir" représente la valeur numérique stockée dans la variable "courant", à la condition de sélectionner "global courant" dans son menu déroulant:
Pour les unités de mesure, on retourne dans la catégorie "Texte", mais cette fois on choisi le premier bloc en haut de la liste (" "):
On imbrique ce bloc à la deuxième ligne du bloc "joint", et on écrit " mA" à l'intérieur:
Voilà, nous avons maintenant un programme fonctionnel! On peut retourner sur le programme MIT AI2 Companion, sur l'appareil Android, et faire l'essai du programme.
Quelques améliorations
Notre programme affiche le résultat avec un nombre de décimales inutilement grand. De plus, il ne vérifie pas si les zones de texte contiennent des valeurs numériques avant d'utiliser leur contenu dans un calcul.
Le programme ci-dessous est un tout petit peu plus évolué: avant d'effectuer les calculs, il vérifie si le contenu des deux zones de texte est bel et bien un nombre. Si ce n'est pas le cas, il affiche un message d'erreur. De plus, le calcul est inséré à l'intérieur d'un bloc "format décimal nombre" réglé à deux décimales, ce qui rendra le résultat affiché plus lisible.
Finalisation de l'application: le fichier apk
Nous avons construit un code fonctionnel mais, mais il ne s'exécute qu'à l'intérieur de MIT AI2 Companion...n'y aurait-il pas moyen d'en faire une véritable application autonome?
La réponse, heureusement, est "oui": il s'agit d'en faire un fichier ".apk". Pour ce faire, vous choisissez "App (enregistrer .apk sur mon ordinateur)" dans le menu "Construire".
Cette opération peut prendre quelques minutes, malgré la simplicité de notre programme.
Votre appareil android doit être réglé pour accepter les applis "de source inconnue". Ce réglage se trouve dans "Paramètres", "Personnel", "Écran verr. et sécurité", "Sources inconnues".
Il ne reste plus qu'à transférer le fichier sur votre appareil android: lorsque vous ouvrez le fichier, android vous propose d'installer l'appli.
Suite à l'installation, votre application est maintenant disponible dans le gestionnaire d'applications, à partir duquel vous pouvez créer un raccourci pour le bureau.
Fichier .aia
Au cas où vous éprouveriez quelques difficultés à reproduire certaines des étapes que j'ai décrites, vous pouvez toujours télécharger le fichier en format app inventor (.aia) complet, puis l'importer dans App Inventor.
Conclusion
Avouez qu'avec App Inventor, créer une application pour android n'est pas très difficile...
Nous n'avons rien utilisé de tel dans cette première exploration, mais vos programme ont accès à tous les capteurs de l'appareil (bluetooth, gps, accéléromètre, caméra, etc). Vous pourriez facilement modifier le programme pour que votre appareil vous lise le résultat à voix haute lorsque vous le secouez, par exemple.
Vous devriez maintenant en savoir suffisamment pour pouvoir continuer par vous-mêmes l'exploration de MIT App Inventor 2, afin de créer vos propres applications.
Prochain article: MIT App Inventor 2, Bluetooth et Arduino...
Inscription à :
Articles (Atom)