Créer une application Android personnalisée pour contrôler Arduino avec MIT App Inventor

Dans ce tutoriel Arduino, nous allons apprendre à créer des applications Android personnalisées pour contrôler Arduino en utilisant l'application en ligne MIT App Inventor. Vous pouvez visionner la vidéo suivante ou lire le tutoriel écrit ci-dessous.

Présentation

Pour ce tutoriel, nous avons deux exemples. Le premier est le contrôle d'une simple LED et le second le contrôle d'un moteur pas à pas à l'aide d'un smartphone. Dans mon tutoriel précédent, nous avons déjà appris à établir la communication Bluetooth entre la carte Arduino et le smartphone en utilisant le module HC-05 Bluetooth et nous avons expliqué le code Arduino nécessaire pour le premier exemple.

Code Arduino

Voici un aperçu rapide de ce code. Via le port série, on reçoit les données entrantes du smartphone et on les stocke dans la variable 'state'. Si on reçoit le caractère '0' envoyé quand le bouton 'LED: OFF' est pressé, on éteint la LED et on renvoie au smartphone la chaîne « LED: OFF ». Inversement, si on reçoit le caractère '1', on allume la LED et on renvoie la chaîne « LED: ON ».

/* Arduino and HC-05 Bluetooth Module Tutorial
 * par Dejan Nedelkovski, www.HowToMechatronics.com */
#define ledPin 7
int state = 0;
void setup() {
  pinMode(ledPin, OUTPUT);
  digitalWrite(ledPin, LOW);
  Serial.begin(38400);
}
void loop() {
  if (Serial.available() > 0) {
    state = Serial.read();
  }
  if (state == '0') {
    digitalWrite(ledPin, LOW);
    Serial.println("LED: OFF");
    state = 0;
  } else if (state == '1') {
    digitalWrite(ledPin, HIGH);
    Serial.println("LED: ON");
    state = 0;
  }
}

Maintenant, nous devons construire notre application Android personnalisée qui enverra ces caractères '0' et '1' quand un bouton particulier est pressé, ainsi que recevra les chaînes entrantes de l'Arduino.

MIT App Inventor

Depuis le site MIT App Inventor, il faut se connecter à l'application de construction en ligne en cliquant sur le bouton « Create apps! ». Pour se connecter, il faut un compte Gmail. Une fois connecté, on peut créer notre premier projet. Voici à quoi ressemble la fenêtre de conception et maintenant on peut commencer à construire notre application.

Mais avant cela, on peut connecter notre smartphone à ce projet pour voir l'application prendre forme directement sur le smartphone en temps réel. Pour cela, il faut d'abord télécharger l'application MIT AI2 Companion depuis le Play Store et l'installer sur le smartphone. Ensuite, dans le menu Connect de l'éditeur en ligne, on sélectionne AI Companion et un code-barres apparaît qu'il suffit de scanner ou d'entrer le code dans l'application smartphone. La connexion entre l'éditeur en ligne et l'application smartphone sera établie.

Par exemple, si on insère un bouton dans l'écran de l'éditeur en ligne, le bouton apparaîtra en temps réel sur le smartphone. De même, si vous ne voulez pas utiliser votre smartphone pendant la construction, vous pouvez installer l'émulateur Android sur votre ordinateur et l'utiliser de la même façon. Vous trouverez plus de détails sur la configuration de l'émulateur sur leur site.

Construction de l'application – Exemple 1

Nous sommes prêts à construire le premier exemple. On commence par la mise en page du programme. D'abord, on ajoute quelques HorizontalArrangements depuis la palette Layout et on règle leurs propriétés comme la hauteur, la largeur et l'alignement pour correspondre à l'apparence désirée. Ensuite, depuis la palette UserInterface, on ajoute un ListPicker et on y attache une image. Le ListPicker servira à sélectionner le dispositif Bluetooth auquel notre smartphone se connectera.

Ensuite, on ajoute un autre HorizontalArrangements dans lequel on place un Label. Ce label indiquera si le smartphone est connecté ou non au module Bluetooth, c'est pourquoi on mettra son texte initial à « Not Connected ». Le label suivant servira à afficher l'état de la LED, éteinte ou allumée. L'état initial sera « LED: OFF ». Ensuite, on ajoute les deux boutons 'Turn On' et 'Turn Off' pour contrôler la LED. À ce stade, il est bon de renommer les composants pour les reconnaître et les utiliser plus facilement dans l'éditeur de blocs plus tard. Il reste à ajouter le BluetoothClient qui est un composant Non-visible ainsi qu'une horloge qui servira pour l'indication en temps réel de l'état de connexion.

Éditeur de blocs (Blocks Editor)

Dans l'éditeur de blocs, nous sommes prêts à donner vie à notre programme. Du côté gauche, on a tous les blocs et fonctions liés aux composants ajoutés précédemment.

On commence par le ListPicker BluetoothList. De là, on ajoute d'abord le bloc 'BeforePicking' et on y attache le bloc 'set Bluetooth Elements'. Ensuite, depuis les blocs BluetoothClient, on ajoute le bloc 'BluetoothClient AddressesAndNames'. Cet ensemble de blocs va définir une liste des dispositifs Bluetooth déjà appairés avec notre téléphone, donc quand on cliquera sur le ListPicker « Connect Button », la liste de tous les dispositifs appairés apparaîtra.

Ensuite, il faut définir ce qui se passera après qu'on aura sélectionné notre module Bluetooth particulier. Depuis les blocs BluetoothClient, on ajoute le bloc 'call BluetoothClient .Connect address' et on y ajoute le bloc 'BluetoothList Selection', ce qui signifie que notre téléphone se connectera à l'adresse Bluetooth qu'on a sélectionnée précédemment.

Ensuite, depuis les blocs Clock, on ajoute le bloc « .Timer ». Dans ce bloc, on fera l'indication en temps réel de la connexion ou non au module Bluetooth en utilisant le bloc « set Text » du label nommé « Connected ».

Ensuite, il faut donner vie aux deux boutons. Quand le « TurnOn_Button » sera cliqué, on utilisera la fonction Bluetooth client « Send1ByteNumber » pour envoyer un nombre au module Bluetooth Arduino. Dans notre cas, c'est le nombre 49 qui correspond au caractère '1' selon la table ASCII et qui allumera la LED. Juste après, on utilisera la fonction « ReceiveText » du BluetoothClient pour recevoir la chaîne entrante renvoyée de l'Arduino au téléphone. Cette chaîne est affectée au label « LED_Status ».

La même procédure s'applique pour le « TurnOff_Button » où le nombre à envoyer doit être changé à 48 qui correspond au caractère '0'. Il reste à télécharger et installer le programme sur notre smartphone. On peut le faire depuis le menu « Build » en le sauvegardant sur l'ordinateur puis en le transférant sur le téléphone, ou en scannant un code QR pour le téléchargement en ligne. Voici la démonstration de l'exemple.

Voici le fichier de téléchargement du projet MIT App Inventor ci-dessus :

BluetoothTest.aia (1 fichier, 5,16 Ko)

Exemple de contrôle de moteur pas à pas

Regardons maintenant le second exemple : le contrôle d'un moteur pas à pas. En haut de l'écran, on a les mêmes composants pour la connexion Bluetooth que l'exemple précédent. Ensuite, on a un composant Canvas utilisé pour dessiner et insérer des images. J'ai inséré deux images transparentes que j'ai dessinées auparavant. La première est une image de jauge qui restera fixe et la seconde est une image d'aiguille qui tournera. Ensuite, on a une case à cocher pour basculer entre mode Manuel et Auto (fonctionnement continu) et un bouton pour changer le sens de rotation. En bas, on a un curseur pour changer la vitesse de rotation du moteur pas à pas.

Voici les blocs et le code Arduino derrière cet exemple. Dans l'éditeur de blocs, on a à nouveau les mêmes blocs pour la connexion Bluetooth que l'exemple précédent.

Pour faire tourner l'image de l'aiguille, on utilise la fonction ImageSprite « .PointInDirection » qui fait pivoter l'image de la position 0° vers les coordonnées X et Y où le Canvas a été touché. En même temps, on définit le cap (heading) de l'ImageSprite pivoté sur le label de texte au-dessus. Après cela, on appelle une procédure personnalisée, qui est en fait un délai de 10 ms.

Enfin, on envoie la valeur du cap sous forme de texte à l'Arduino en utilisant la fonction Bluetooth « SendText ». Cette valeur sera acceptée par l'Arduino et fera tourner le moteur pas à pas en conséquence.

Ensuite, le bloc CheckBox. Si la CheckBox est cochée, on enverra le texte « Auto » à l'Arduino qui activera le moteur pas à pas pour tourner en continu. Tant qu'on est dans ce mode, si on appuie sur le bouton « Reverse », on enverra le texte « Reverse » à l'Arduino qui changera le sens de rotation du moteur. Aussi, dans ce mode, on peut changer la vitesse de rotation. Si on change la position du curseur, la valeur courante de la position du curseur sera envoyée à l'Arduino qui changera la vitesse de rotation du pas à pas. Si on décoche la CheckBox, on revient en mode manuel. Voici la démonstration de l'exemple.

Voici le fichier de téléchargement du projet MIT App Inventor ci-dessus, ainsi que les deux images utilisées dans le projet :

StepperMotorTest.aia (1 fichier, 60,96 Ko)
Stepper Motor Gauge and Pointer Images (1 fichier, 27,34 Ko)

Voici le code Arduino du second exemple :

/* Stepper Motor Control via HC-05 Bluetooth Module
 * par Dejan Nedelkovski, www.HowToMechatronics.com */
// Définition des variables
const int stepPin = 7;
const int dirPin = 6;
String state = "";
int currentHeading = 0, currentAngle = 0, lastAngle = 0, angle = 0, rotate = 0;
int runContinuously = 0;
String mode = "Manual";
boolean dirRotation = HIGH;
int rotSpeed = 1500;
void setup() {
  pinMode(stepPin, OUTPUT);
  pinMode(dirPin, OUTPUT);
  Serial.begin(38400);
}
void loop() {
  delayMicroseconds(1);
  if (Serial.available() > 0) {
    state = Serial.readString();
  }
  // Quand bouton Auto pressé
  if (mode == "Auto") {
    if (state == "Reverse") {
      delay(10);
      if (dirRotation == HIGH) dirRotation = LOW;
      else dirRotation = HIGH;
      digitalWrite(dirPin, dirRotation);
      delay(10);
      state = "";
    }
    rotSpeed = state.toInt();
    if (rotSpeed >= 300 && rotSpeed <= 3000) {
      digitalWrite(stepPin, HIGH);
      delayMicroseconds(rotSpeed);
      digitalWrite(stepPin, LOW);
      delayMicroseconds(rotSpeed);
    } else {
      digitalWrite(stepPin, HIGH);
      delayMicroseconds(1500);
      digitalWrite(stepPin, LOW);
      delayMicroseconds(1500);
    }
    if (state == "Manual") mode = state;
  }
  // Mode Manuel
  else if (mode == "Manual") {
    currentHeading = state.toInt();
    if (currentHeading < 0) currentHeading = 360 + currentHeading;
    currentAngle = map(currentHeading, 0, 359, 0, 200);
    digitalWrite(dirPin, HIGH);
    if (currentAngle != lastAngle) {
      if (currentAngle > lastAngle) {
        rotate = currentAngle - lastAngle;
        for (int x = 0; x < rotate; x++) {
          digitalWrite(stepPin, HIGH);
          delayMicroseconds(500);
          digitalWrite(stepPin, LOW);
          delayMicroseconds(500);
        }
      }
      if (currentAngle < lastAngle) {
        rotate = lastAngle - currentAngle;
        digitalWrite(dirPin, LOW);
        for (int x = 0; x < rotate; x++) {
          digitalWrite(stepPin, HIGH);
          delayMicroseconds(500);
          digitalWrite(stepPin, LOW);
          delayMicroseconds(500);
        }
      }
    }
    lastAngle = currentAngle;
    if (state == "Auto") mode = state;
  }
}