Crea una App Android personalizada para controlar Arduino con MIT App Inventor

En este tutorial de Arduino aprenderemos a crear aplicaciones Android personalizadas para controlar Arduino usando la aplicación online MIT App Inventor. Puedes ver el siguiente vídeo o leer el tutorial escrito a continuación.

Resumen

Para este tutorial tenemos dos ejemplos. El primer ejemplo es controlar un LED simple y el segundo es controlar un Motor Paso a Paso usando un smartphone. En mi tutorial anterior ya aprendimos a hacer la comunicación Bluetooth entre la placa Arduino y el Smartphone usando el módulo Bluetooth HC-05 y explicamos el código de Arduino necesario para el primer ejemplo.

Código Arduino

Aquí tienes una vista rápida de ese código. Así, a través del puerto serial recibimos los datos entrantes del smartphone y los almacenamos en la variable 'state'. Si recibimos el carácter '0' que se envía desde el smartphone cuando se pulsa el botón 'LED: OFF', apagaremos el LED y enviaremos de vuelta al smartphone la cadena "LED: OFF". Por otro lado, si recibimos el carácter '1' encenderemos el LED y enviaremos de vuelta la cadena "LED: ON".

/* Arduino y Módulo Bluetooth HC-05 Tutorial 
 * by Dejan Nedelkovski, www.HowToMechatronics.com 
 */
#define ledPin 7
int state = 0;
void setup() {
  pinMode(ledPin, OUTPUT);
  digitalWrite(ledPin, LOW);
  Serial.begin(38400); // Velocidad de comunicación por defecto del módulo Bluetooth
}
void loop() {
  if (Serial.available() > 0) {
    state = Serial.read();
  }
  if (state == '0') {
    digitalWrite(ledPin, LOW); // Apagar LED
    Serial.println("LED: OFF"); // Enviar de vuelta al teléfono la cadena "LED: OFF"
    state = 0;
  } else if (state == '1') {
    digitalWrite(ledPin, HIGH);
    Serial.println("LED: ON");
    state = 0;
  }
}Lenguaje: Arduino (arduino)

Así que ahora necesitamos construir nuestra aplicación Android personalizada que enviará esos caracteres '0' y '1' cuando se pulse un botón en particular, así como recibir las cadenas entrantes del Arduino.

MIT App Inventor

Desde el sitio web de MIT App Inventor necesitamos iniciar sesión en la aplicación de construcción online haciendo clic en el botón "Create apps!". Para iniciar sesión necesitamos tener una cuenta de Gmail. Una vez que hayamos iniciado sesión, ahora podemos crear nuestro primer proyecto. Aquí está cómo se ve la ventana de diseño y ahora podemos empezar a construir nuestra aplicación.

Pero antes de hacer eso, podemos conectar nuestro smartphone a este proyecto para poder ver cómo la app va tomando forma directamente en nuestro smartphone en tiempo real. Para hacer eso, primero tenemos que descargar la app MIT AI2 Companion de la Play Store e instalarla en nuestro smartphone. Luego, desde el menú Connect del editor online, seleccionaremos AI Companion y aparecerá un código de barras que solo necesitamos escanear o insertar el código en la app del smartphone y la conexión entre el editor online y la app del smartphone se establecerá.

Así que ahora, por ejemplo, si insertamos un botón en la pantalla del editor online, el botón aparecerá en tiempo real en el smartphone también. Similar a esto, si no quieres usar tu smartphone mientras construyes la app, puedes instalar el Emulador de Android en tu ordenador y usarlo de la misma manera. Puedes encontrar más detalles sobre cómo configurar el Emulador en su sitio web.

Construyendo la App – Ejemplo 1

Ahora estamos listos para construir el primer ejemplo. Empezaremos con el diseño del programa. Primero añadiremos algunos HorizontalArrangements de la paleta de Layout y estableceremos sus propiedades como la altura, la anchura y la alineación para que coincidan con el aspecto deseado de nuestro programa. Luego, de la paleta de UserInterface añadiremos un ListPicker y le adjuntaremos una imagen. El ListPicker se usará para seleccionar el dispositivo Bluetooth al que se conectará nuestro smartphone.

A continuación, añadiremos otro HorizontalArrangements en el que colocaremos una Etiqueta (Label). Esta etiqueta indicará si el smartphone está conectado o no al módulo Bluetooth y por eso estableceremos el texto inicial de esta etiqueta a "Not Connected". La siguiente etiqueta se usará para mostrar el estado del LED, si está apagado o encendido. El estado inicial será "LED: OFF". A continuación, añadiremos los dos botones, 'Turn On' y 'Turn Off' para controlar el LED. En este punto es bueno renombrar los componentes para que podamos reconocerlos y usarlos más fácilmente en el editor de Bloques más tarde. Lo que queda ahora es añadir el BluetoothClient que es un componente No visible, así como un reloj que se usará para la indicación en tiempo real del estado de la conexión.

Editor de Bloques

Ahora en el Editor de Bloques estamos listos para dar vida a nuestro programa. Desde el lado izquierdo tenemos todos los bloques y funciones relacionados con los componentes añadidos anteriormente.

Empezaremos con el ListPicker BluetoothList. Desde allí, primero añadiremos el bloque 'BeforePicking' y le adjuntaremos el bloque 'set Bluetooth Elements'. Luego, de los bloques BluetoothClient, añadiremos el bloque 'BluetoothClient AddressesAndNames'. Lo que hará este conjunto de bloques es establecer una lista de dispositivos Bluetooth que ya están emparejados con nuestro teléfono, así que cuando hagamos clic en el ListPicker "Connect Button", la lista de todos los dispositivos emparejados aparecerá.

A continuación, tenemos que establecer qué pasará después de que elijamos o seleccionemos nuestro módulo Bluetooth en particular. Desde el bloque BluetoothClient, añadiremos el bloque 'call BluetoothClient .Connect address' y añadiremos el bloque 'BluetoothList Selection' a él, lo que significa que nuestro teléfono se conectará a la dirección Bluetooth que hemos seleccionado previamente.

A continuación, de los bloques Clock, añadiremos el bloque ".Timer". Dentro de este bloque haremos la indicación en tiempo real de si el teléfono está conectado o no al módulo Bluetooth usando el bloque "set Text" de la etiqueta llamada "Connected".

A continuación, necesitamos dar vida a los dos botones. Así que cuando se haga clic en el "TurnOn_Button", usaremos la función Bluetooth client "Send1ByteNumber" para enviar un número al módulo Bluetooth del Arduino. En nuestro caso, ese es el número 49 que corresponde al carácter '1' según la tabla ASCII y eso encenderá el LED. Justo después, usaremos la función BluetoothClient "ReceiveText" para recibir la cadena entrante que se envía de vuelta desde el Arduino al teléfono. Esta cadena se establece en la etiqueta "LED_Status".

El mismo procedimiento va para el "TurnOff_Button" donde el número a enviar debe cambiarse a 48 que corresponde al carácter '0'. Lo que queda ahora es descargar e instalar el programa en nuestro smartphone. Podemos hacer eso desde el menú "Build" ya sea guardándolo en nuestro ordenador y luego transfiriéndolo a nuestro teléfono o escaneando un código QR para la descarga online del programa. Aquí está la demostración del ejemplo.

Aquí tienes un archivo de descarga del proyecto MIT App Inventor anterior:

BluetoothTest.aia

Ejemplo de Control de Motor Paso a Paso

Ahora veamos el segundo ejemplo, controlando un motor paso a paso. En la parte superior de la pantalla tenemos los mismos componentes para la conexión Bluetooth que el ejemplo anterior. A continuación, tenemos un componente Canvas que se usa para dibujar e insertar imágenes. Inserté dos imágenes transparentes que dibujé previamente. La primera es una imagen de una escala que estará fija en su lugar y la segunda es una imagen de un puntero que girará. A continuación, tenemos un botón Check para cambiar entre modo Manual y Auto o de funcionamiento continuo y un botón para cambiar la dirección de rotación. En la parte inferior tenemos un control deslizante (slider) para cambiar la velocidad de rotación del motor paso a paso.

Aquí están los bloques y el código de Arduino detrás de este ejemplo. Así, en el Editor de Bloques, de nuevo tenemos los mismos bloques para la conexión Bluetooth que el ejemplo anterior.

Ahora, para rotar la imagen del puntero, usamos la función ImageSprite ".PointInDirection" que rota la imagen desde la posición 0° hasta las coordenadas X e Y donde se ha tocado el Canvas. Al mismo tiempo, establecemos el heading (dirección) del ImageSprite rotado a la etiqueta de texto de arriba. Después, llamamos a un procedimiento personalizado, o función, que en realidad es un retraso de 10 ms.

Por último, enviamos el valor del heading como Texto al Arduino usando la función Bluetooth "SendText". Este valor será aceptado por el Arduino y girará el motor paso a paso en consecuencia.

A continuación está el bloque CheckBox. Así que si el CheckBox está marcado, enviaremos el texto "Auto" al Arduino, lo que activará el motor paso a paso para girar continuamente. Mientras estamos en este modo, si pulsamos el botón "Reverse", enviaremos el texto "Reverse" al Arduino, lo que cambiará la dirección de rotación del motor. También, mientras estamos en este modo, podemos cambiar la velocidad de rotación. Si cambiamos la posición del slider, el valor actual de la posición del slider se enviará al Arduino, lo que cambiará la velocidad de rotación del motor paso a paso. Si desmarcamos el CheckBox, volveremos al modo manual. Aquí está la demostración del ejemplo.

Aquí tienes un archivo de descarga del proyecto MIT App Inventor anterior, así como las dos imágenes usadas en el proyecto:

StepperMotorTest.aia

Imágenes de Escala y Puntero para Motor Paso a Paso

Aquí está el código de Arduino del segundo ejemplo:

/* Control Motor Paso a Paso vía Módulo Bluetooth HC-05 
 * by Dejan Nedelkovski, www.HowToMechatronics.com 
 */
// Definiendo 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() {
  pinMode(stepPin, OUTPUT);
  pinMode(dirPin, OUTPUT);
  Serial.begin(38400); // Velocidad de comunicación por defecto del módulo Bluetooth
}
void loop() {
  delayMicroseconds(1);
  if (Serial.available() > 0) {
    state = Serial.readString();
  }
  // Cuando se pulsa botón Auto
  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;
    }
  }
  // Cuando el programa está en modo Manual
  else if (mode == "Manual") {
    currentHeading = state.toInt();
    if (currentHeading < 0) {
      currentHeading = 360 + currentHeading;
    }
    currentAngle = map(currentHeading, 0, 359, 0, 200);
    digitalWrite(dirPin, HIGH); // Habilita el motor para moverse en una dirección particular
    // Hace 200 pulsos para hacer una rotación de ciclo completo
    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); // Cambia la dirección de rotación
        for (int x = 0; x < rotate; x++) {
          digitalWrite(stepPin, HIGH);
          delayMicroseconds(500);
          digitalWrite(stepPin, LOW);
          delayMicroseconds(500);
        }
      }
    }
    lastAngle = currentAngle;
    if (state == "Auto") {
      mode = state;
    }
  }
}Lenguaje: Arduino (arduino)