Instructor Luis Avelar Reyes

App Inventor
Cuando creamos un nuevo proyecto en App Inventor, nos saldrá el App Inventor Designer donde construiremos el diseño de
nuestra app. En el centro tenemos la visualización de una pantalla de un dispositivo Android donde iremos poniendo todos los
componentes que queramos. Estos componentes están en la parte izquierda y tenemos desde botones, etiquetas, sliders, etc…
hasta el hardware del dispositivo Android como la cámara, GPS, acelerómetro, sonido, etc. Esto es muy útil ya que tenemos la
posibilidad de usar los sensores de nuestro dispositivo Android junto a Arduino para nuestros proyectos. Para poner un
componente a la pantalla de visualización, tenemos que arrastrarlo hasta esta. Por último, en la parte derecha de la pantalla
tenemos un recuadro donde podremos cambiar las propiedades de los componentes que insertemos en la app tales como el
color, nombre, valores…

En esta app hemos puesto un botón que servirá para conectarse al Arduino a través de Bluetooth, unas etiquetas para el título
(LED RGB) y el nombre de los colores (RED, GREEN, BLUE), y tres sliders para controlar los tres colores RGB. También
pondremos un Cliente Bluetooth para establecer la comunicación Bluetooth. En las propiedades de los sliders,
pondremos MinValue 0 y MaxValue 255. También hemos puesto una imagen de icono de la app subiendo una imagen
en Media, y colocando el archivo en Icon de las propiedades de la pantalla (Screen). Las demás propiedades de los componentes
sirven para cambiar al gusto de cualquiera los colores, medidas y nombres de estos.
Uno vez terminado con el diseño de la app, clicamos en la el botón Blocks en la parte superior derecha de la pantalla para ir al
App Inventor Blocks Editor. Aquí es donde programaremos la app en forma de bloques como si se tratase de un puzle.
En Viewer tenemos una hoja en blanco donde pondremos los bloques. Estos bloques están en la parte izquierda en el
apartado Blocks donde encontraremos los elementos y funciones más comunes en los lenguajes de programación tales como
sentencias, funciones lógicas, funciones matemáticas, strings… También habrá los elementos y funciones específicos de los
componentes que hemos insertado en la app, que en nuestro caso son Bluetooth, un botón y tres sliders.
 Instructor Luis Avelar Reyes

La programación de nuestra app consta de dos partes:

–Bluetooth: La comunicación Bluetooth depende del botón llamado CONECT que hemos puesto. Antes de pulsarlo, si el
Bluetooth de nuestro dispositivo Android está listo, la app recogerá todas las conexiones Bluetooth listadas en este. Esto lo
hará al principio de abrir la app. Una vez se pulse el botón CONECT nos saldrá este listado donde seleccionaremos el módulo
Bluetooth conectado al Arduino. Cuando se conecte haremos que el texto del botón se ponga de color azul para saber que la
comunicación Bluetooth está establecida.
-Sliders: La parte de los tres sliders es la misma para cada uno. Consiste en que cuando haya un cambio de posición en uno
de los sliders, primero se comprueba si la comunicación Bluetooth está establecida, y si es así, se envía el valor de la posición
de los tres sliders siempre en este mismo orden: primero se envía el valor de Red seguido de una coma, después se envía el
valor de Green seguido de otra coma y por último se envía el valor de Blue seguido de un carácter de nueva línea (“\n”).
Por ejemplo: 125 “,” 98 “,” 216 “\n”
Una vez finalizado con los bloques sólo queda poner a prueba nuestra app. Podemos hacerlo desde el emulador de App Inventor
o instalando la app directamente en nuestro dispositivo Android. Para esto último tenemos que ir en el menú de la parte superior
izquierda del App Inventor donde pone Build para obtener el archivo .apk de la app. Tendremos dos opciones: obtenerlo desde
código QR que saldrá en el centro de la pantalla para enfocarlo directamente con la cámara de nuestro dispositivo Android para
descargarlo e instalarlo directamente en este o descargar el archivo .apk en nuestro PC para copiarlo en la memoria del
dispositivo Android. Sea cual sea la opción que escojamos, tendremos que poner en las opciones de nuestro dispositivo
Android Permitir la instalación de aplicaciones de origen desconocido para poder instalar nuestra app. El aspecto de esta será
este:
 Instructor Luis Avelar Reyes

En la siguiente imagen hemos puesto un enlace donde podréis descargaros el archivo .apk de la app para instalarla en vuestros
dispositivos Android. También hay una archivo .aia que es el proyecto App Inventor de la app para poder importarlo a vuestra
cuenta App Inventor desde el menú Project, Import Project (.aia) from my computer …

Arduino
En el Arduino habrá conectado un Led RGB y un módulo Bluetooth JY-MCU (tanto el HC-06 como el HC-05 son validos). Si
queréis saber más sobre estos módulos Bluetooth conectados a Arduino visitad el tutorial que hicimos sobre este tema en el
siguiente enlace (Arduino + Bluetooth).
El diodo Led RGB tiene un cátodo y tres ánodos (uno para cada color). Los colores son controlados a través de PWM. En
su datasheet comprobamos que los voltajes de cada color a una intensidad de 20mA son los siguientes: Red 2 V, Green 3,2 V
y Blue 3,2V. Sabiendo esto juntamente con que el voltaje de salida máximo de los pins del Arduino es de 5V podemos calcular
las resistencias de cada color aplicando la ley de Ohm.

Podemos poner resistencias de 100 ohmios en vez de 90 ohmios ya que estas últimas son poco comunes, el resultado final no
influirá mucho ya que además hay que contar con la tolerancia de la resistencia.

Montaje
 Instructor Luis Avelar Reyes

-Ajuntar las masas del Arduino y de la fuente de alimentación.

-Con las resistencias 5K6 y 10K creamos un divisor de tensión en la salida del pin 11 del Arduino para limitar el voltaje a 3,3V
que es el voltaje que soporta el pin RX del módulo Bluetooth ya que la salidas del Arduino son de 5V.
-Un consejo: desconectar el cable USB del Arduino cuando no se use la comunicación serie porque pueden ocurrir fallos.
Alimentar el Arduino con una fuente de alimentación a través del pin Vin o con el conector jack.

Código

Leer varios valores enteros en un String

Cuando se envían los valores de los sliders a través de Bluetooth hacia el Arduino, se envían los tres valores a la vez en un
mismo String. Para almacenar cada uno de estos valores en una variable usaremos la función Serial.parseInt() que retorna el
primer número entero hasta que encuentra un carácter que no sea un entero. Como en la app hemos programado que los valores
de los sliders estén separados por una coma y finaliza con un carácter de nueva línea, esta función nos será muy útil.
Si por ejemplo el Arduino recibe este String en su buffer: 235 , 45 , 124 ‘\n’
Llamamos la función Serial.parseInt() y leerá solo el valor entero 235
Si volvemos a llamar la función, lo siguiente que leerá será 45
Y si la volvemos a llamar por tercera vez, leerá el último valor entero 124
1 //Cuando haya datos disponibles
2 while (BT.available()>0)
3 {
4 int red = BT.parseInt(); //Leemos el primer valor entero (Red) y lo almacenamos en la variable
5
6 int green = BT.parseInt(); //Leemos el segundo valor entero (Green) y lo almacenamos en la variable
7
8 int blue = BT.parseInt(); //Leemos el último valor entero (Blue) y lo almacenamos en la variable
 Instructor Luis Avelar Reyes

Código completo
1
#include <SoftwareSerial.h> //Librería que permite establecer comunicación serie en otros pins
2
3
//Aquí conectamos los pins RXD,TDX del módulo Bluetooth.
4
SoftwareSerial BT(10,11); //10 RX, 11 TX.
5
6
int ledred=3; //Pin LED Red
7
int ledgreen=5;//Pin LED Green
8
int ledblue=6; //Pin LED Blue
9
10
void setup()
11
{
12
13
BT.begin(9600); //Velocidad del puerto del módulo Bluetooth
14
15
pinMode(ledred,OUTPUT);
16
pinMode(ledgreen,OUTPUT);
17
pinMode(ledblue,OUTPUT);
18
}
19
20
void loop()
21
{
22
//Cuando haya datos disponibles
23
while (BT.available()>0)
24
{
25
int red = BT.parseInt(); //Leemos el primer valor entero (Red) y lo almacenamos en la variable
26
27
int green = BT.parseInt(); //Leemos el segundo valor entero (Green) y lo almacenamos en la variable
28
29
int blue = BT.parseInt(); //Leemos el último valor entero (Blue) y lo almacenamos en la variable
30
31
//Cuando lea el carácter fin de línea ('\n') quiere decir que ha finalizado el envío de los tres valores
32
if (BT.read() == '\n')
33
{
34
//Enviamos los valores de los tres colores al LED RGB através de PWM
35
analogWrite(ledred,red);
36
analogWrite(ledgreen,green);
37
analogWrite(ledblue,blue);
38
}
39
}
40
}