Comment créer une application Android personnalisée pour votre projet Arduino à l'aide de MIT App Inventor

Dans ce didacticiel Arduino, nous apprendrons comment créer des applications Android personnalisées pour contrôler Arduino à l'aide de l'application en ligne MIT App Inventor. Vous pouvez regarder la vidéo suivante ou lire le didacticiel écrit ci-dessous.

Aperçu

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

Code Arduino

Voici un aperçu rapide de ce code. Ainsi, via le port série, nous recevons les données entrantes du smartphone et les stockons dans la variable « état ». Si nous recevons le caractère "0" qui est envoyé par le smartphone lorsque le bouton "LED :OFF" est enfoncé, nous éteindrons la LED et renverrons au smartphone la chaîne "LED :OFF". D'autre part, si nous recevons le caractère "1", nous allumerons la LED et renverrons la chaîne "LED :ON".

/* Arduino and HC-05 Bluetooth Module Tutorial
 * 
 * by Dejan Nedelkovski, www.HowToMechatronics.com
 * 
 */
 
#define ledPin 7
int state = 0;

void setup() {
 pinMode(ledPin, OUTPUT);
 digitalWrite(ledPin, LOW);
 Serial.begin(38400); // Default communication rate of the Bluetooth module
}

void loop() {
 if(Serial.available() > 0){ // Checks whether data is comming from the serial port
 state = Serial.read(); // Reads the data from the serial port
 }

 if (state == '0') {
 digitalWrite(ledPin, LOW); // Turn LED OFF
 Serial.println("LED: OFF"); // Send back, to the phone, the String "LED: ON"
 state = 0;
 }
 else if (state == '1') {
 digitalWrite(ledPin, HIGH);
 Serial.println("LED: ON");;
 state = 0;
 } 
}Code language: Arduino (arduino)

Nous devons donc maintenant créer notre application Android personnalisée qui enverra ces caractères "0" et "1" lorsqu'un bouton particulier est enfoncé, ainsi que recevoir les chaînes entrantes de l'Arduino.

Inventeur d'applications MIT

Sur le site Web MIT App Inventor, nous devons nous connecter à l'application de construction en ligne en cliquant sur "Créer des applications !" bouton. Pour nous connecter, nous avons besoin d'un compte Gmail. Une fois que nous sommes connectés, nous pouvons créer notre premier projet. Voici à quoi ressemble la fenêtre de conception et nous pouvons maintenant commencer à créer notre application.

Mais avant cela, nous pouvons connecter notre smartphone à ce projet afin de voir comment l'application prend forme directement sur notre smartphone en temps réel. Pour ce faire, nous devons d'abord télécharger l'application MIT AI2 Companion depuis le Play Store et l'installer sur notre smartphone. Ensuite, dans le menu Connect de l'éditeur en ligne, nous sélectionnerons AI Companion et un code-barres apparaîtra, il nous suffira de le scanner ou d'insérer le code dans l'application pour smartphone et la connexion entre l'éditeur en ligne et l'application pour smartphone sera établie.

Alors maintenant, par exemple, si nous insérons un bouton dans l'écran de l'éditeur en ligne, le bouton apparaîtra également en temps réel sur le smartphone. De la même manière, si vous ne souhaitez pas utiliser votre smartphone lors de la création de l'application, vous pouvez installer l'émulateur Android sur votre ordinateur et l'utiliser de la même manière. Vous pouvez trouver plus de détails sur la configuration de l'émulateur sur leur site Web.

Construire l'application - Exemple 1

Nous sommes maintenant prêts à construire le premier exemple. Nous allons commencer par la mise en page du programme. Nous allons d'abord ajouter quelques arrangements horizontaux de la palette de mise en page et définir leurs propriétés comme la hauteur, la largeur et l'alignement pour correspondre à l'apparence souhaitée par notre programme. Ensuite, à partir de la palette UserInterface, nous ajouterons un ListPicker et y attacherons une image. Le ListPicker sera utilisé pour sélectionner l'appareil Bluetooth auquel notre smartphone se connectera.

Ensuite, nous ajouterons un autre HorizontalArrangements dans lequel nous placerons un Label. Cette étiquette indiquera si le smartphone est connecté ou non au module Bluetooth et c'est pourquoi nous définirons le texte initial de cette étiquette sur "Non connecté". L'étiquette suivante sera utilisée pour afficher l'état de la LED, qu'elle soit éteinte ou allumée. L'état initial sera « LED :OFF ». Ensuite, nous ajouterons les deux boutons, « Activer » et « Désactiver » pour contrôler la LED. À ce stade, il est bon de renommer les composants afin de pouvoir les reconnaître plus facilement et de les utiliser ultérieurement dans l'éditeur de blocs. Il ne reste plus qu'à ajouter le BluetoothClient qui est un composant non visible ainsi qu'une horloge qui sera utilisée pour l'indication en temps réel de l'état de la connexion.

Éditeur de blocs

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

Nous allons commencer par le BluetoothList ListPicker. À partir de là, nous allons d'abord ajouter le bloc "BeforePicking" et y attacher le bloc "set Bluetooth Elements". Ensuite, à partir des blocs BluetoothClient, nous ajouterons le bloc "BluetoothClient AddressesAndNames". Ce que cet ensemble de blocs va faire est de définir une liste d'appareils Bluetooth qui sont déjà couplés avec notre téléphone. Ainsi, lorsque nous cliquerons sur le "bouton de connexion" de ListPicker, la liste de tous les appareils couplés s'affichera.

Ensuite, nous devons définir ce qui se passera après avoir choisi ou sélectionné notre module Bluetooth particulier. À partir du bloc BluetoothClient, nous ajouterons le bloc "appeler BluetoothClient .Connecter l'adresse" et y ajouterons le bloc "BluetoothList Selection", ce qui signifie que notre téléphone se connectera à l'adresse Bluetooth que nous avons précédemment sélectionnée.

Ensuite, à partir des blocs Clock, nous ajouterons le bloc ".Timer". Dans ce bloc, nous indiquerons en temps réel si le téléphone est connecté ou non au module Bluetooth à l'aide du bloc "set Text" de l'étiquette nommée "Connected".

Ensuite, nous devons donner vie aux deux boutons. Ainsi, lorsque le "TurnOn_Button" sera cliqué, nous utiliserons la fonction client Bluetooth "Send1ByteNumber" pour envoyer un numéro 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 cela, nous utiliserons la fonction BluetoothClient "ReceiveText" pour recevoir la chaîne entrante qui est renvoyée de l'Arduino au téléphone. Cette chaîne est définie sur l'étiquette "LED_Status".

La même procédure vaut pour le "TurnOff_Button" où le numéro d'envoi doit être changé en 48 qui correspond au caractère '0'. Il ne reste plus qu'à télécharger et installer le programme sur notre smartphone. Nous pouvons le faire à partir du menu "Construire" en l'enregistrant sur notre ordinateur puis en le transférant sur notre téléphone ou en scannant un code QR pour le téléchargement en ligne du programme. Voici la démonstration de l'exemple.

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

BluetoothTest.aia

Exemple de contrôle de moteur pas à pas

Examinons maintenant le deuxième exemple, contrôlant un moteur pas à pas. En haut de l'écran, nous avons les mêmes composants pour la connexion Bluetooth que l'exemple précédent. Ensuite, nous avons un composant Canvas qui est utilisé pour dessiner et insérer des images. J'ai inséré deux images transparentes que j'ai dessinées précédemment. La première est une image d'une jauge qui sera fixée en place et la seconde est une image d'un pointeur qui sera en rotation. Ensuite, nous avons un bouton Check pour basculer entre le mode manuel et automatique ou le mode de fonctionnement continu et un bouton pour changer le sens de rotation. Sur le bouton, nous avons un curseur pour modifier la vitesse de rotation du moteur pas à pas.

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

Maintenant, pour faire pivoter l'image du pointeur, nous utilisons la fonction ImageSprite ".PointInDirection" qui fait pivoter l'image de la position 0 ° aux coordonnées X et Y où le canevas a été touché. En même temps, nous définissons l'en-tête ImageSprite pivoté sur l'étiquette de texte ci-dessus. Après cela, nous appelons une procédure personnalisée, ou une fonction qui est en fait un délai de 10 m secondes.

Enfin, nous envoyons la valeur d'en-tête sous forme de texte à l'Arduino à l'aide de la fonction Bluetooth "SendText". Cette valeur sera acceptée par l'Arduino et fera tourner le moteur pas à pas en conséquence.

Vient ensuite le bloc CheckBox. Donc, si la case à cocher est cochée, nous enverrons le texte "Auto" à l'Arduino qui activera le moteur pas à pas pour tourner en continu. Pendant que nous sommes dans ce mode si nous appuyons sur le bouton "Reverse", nous enverrons le texte "Reverse" à l'Arduino qui changera le sens de rotation du moteur. De plus, pendant que nous sommes dans ce mode, nous pouvons modifier la vitesse de rotation. Si nous changeons la position du curseur, la valeur actuelle de la position du curseur sera envoyée à l'Arduino qui modifiera la vitesse de rotation du stepper. Si nous décochons la case à cocher, nous reviendrons en mode manuel. Voici la démonstration de l'exemple.

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

Test de moteur pas à pas.aia

Images de la jauge et du pointeur du moteur pas à pas

Voici le code Arduino du deuxième exemple :

/*  Stepper Motor Control via HC-05 Bluetooth Module
 *      
 *  by Dejan Nedelkovski, www.HowToMechatronics.com
 *  
 */

// Defining variables
const int stepPin = 7; 
const int dirPin = 6;
String state = ""; 
int currentHeading=0;
int currentAngle=0;
int lastAngle=0;
int angle=0;
int rotate=0;
int runContinuously=0;
String mode = "Manual";
boolean dirRotation = HIGH;
int rotSpeed = 1500;
 
void setup() {
  // Sets the two pins as Outputs
  pinMode(stepPin,OUTPUT); 
  pinMode(dirPin,OUTPUT);
  Serial.begin(38400); // Default communication rate of the Bluetooth module
}
void loop() {
  delayMicroseconds(1);
  if(Serial.available() > 0){ // Checks whether data is comming from the serial port
    state = Serial.readString(); // Reads the data from the serial port
 }
 // When Auto Button is pressed
 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;
  }
 }
 // When Program is in Manual mode
 else if (mode == "Manual"){ 
 currentHeading = state.toInt();
 //Serial.println(angle);
 //Serial.println(state);
 if (currentHeading < 0 ){
  currentHeading = 360+currentHeading;
 }
 currentAngle = map(currentHeading,0,359,0,200);
 digitalWrite(dirPin,HIGH); // Enables the motor to move in a particular direction
  // Makes 200 pulses for making one full cycle rotation
  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); //Changes the rotations direction
      for(int x = 0; x < rotate; x++) {
      digitalWrite(stepPin,HIGH); 
      delayMicroseconds(500); 
      digitalWrite(stepPin,LOW); 
      delayMicroseconds(500); 
      }
    }
  }
  lastAngle = currentAngle;
  if (state == "Auto"){
    mode = state;
  }
 }
}
Code language: Arduino (arduino)