con App InventorSecure Site contigoenladistancia.cultura.gob.mx/assets/...[App Inventor_4] Arduino +...

Arduino + Android con App InventorAbraham Sánchez Hernández

M a n u a l e sy t u t o r i a l e s

P A R T E 2

Barra reguladora

Arduino + Android con AppInventor 83

Este programa utiliza una barra reguladora para manipular la intensidad de luz emitida por una tira de LEDs. Hacia la extrema izquierda se apaga por completo la tira y hacia la extrema derecha se enciende con un brillo máximo de 100, si lo prefieres, se puede cambiar ese valor a 255 en el programa de Arduino.

Arduino + Android con AppInventor 84

[App_Ard_4]

[App_Ard_4]

Para manipular el comportamiento causado al deslizar la barra, carga el bloque sldBrillo.PosiciónCambiada y carga dentro 2 bloques: el primero es para ver en pantalla el nuevo valor numérico generado por la barra y el segundo para enviar ese valor a través de bluetooth hacia el Arduino. Entonces carga el bloque etqSlider.Texto como / sldBrillo.PosiciónDelPulgar para poder ver como texto el valor de posición de la barra. Para enviar esos datos carga llamar Cliente-Bluetooth1.EnviarTexto; texto / sldBrillo.PosiciónDelPulgar

Arduino + Android con AppInventor 85

Arduino + Android con AppInventor 86

[App Inventor_4]

Arduino + Android con AppInventor 87

Este programa utiliza una barra reguladora para manipular la intensidad de luz que emite una tira/matriz de NeoPixeles; aunque el programa de App Inventor es el mismo, se ha modificado el programa de Arduino y la forma de conectar la matriz es diferente

Arduino + Android con AppInventor 88

[App_Ard_4]

Arduino + Android con AppInventor 89

[App Inventor_5]

Revisa el ejercicio en:https://youtu.be/qWZ5UNwrgmo

Barra reguladora¡Agrega colores!

Arduino + Android con AppInventor 92

Arduino + Android con AppInventor 93

Es un programa similar al anterior pero se ha agregado un selector de color para aprovechar la principal característica de los NeoPixeles: cambiar de color.

Arduino + Android con AppInventor 94

[App_Ard_5]

[App_Ard_5]

Este es un programa parecido a App_Ard_4, pero en esta ocasión el texto que envías se ha concatenado utilizando el bloque unir con un bloque de texto, al cual debes escribirle un “/”. Esto se conoce como bandera y sirve como identificador dentro del bus de datos enviados por bluetooth para filtrar la información recibida y así saber el tipo de acción a realizar por Arduino dependiendo de la bandera recibida. Como puedes ver, para cada color hay una bandera, esta expresa el color elegido (r para rojo p.e.) y viene acompañada de esta bandera “|”, la cual se ha utilizado para marcar un cambio de color.

Con lo anterior, Arduino entiende que “/” sea para cuando esta recibiendo un dato proveniente de la barra deslizante y si lee “|r” quiere decir que se presionó el botón rojo y por tanto cambiará la luz a ese color.

Arduino + Android con AppInventor 96

[App_Ard_5]

Para cada botón de color se han agrupado los bloques de manera similar, por ejemplo, para el color rojo debes cargar cuando btnRojo.Clic / llamar BluetoothClient1.EnviarTexto; texto / “Texto” y, como se explicó antes, cada uno tiene un símbolo diferente correspon-diente al color del que se trate.

Estas banderas se usan con frecuencia en la comunicación serial para poder programar en el Arduino distintas tareas determinadas por las banderas asignadas para ellas. Por lo general se usan letras para las banderas y se dejan los números para valores analógicos, pero, de hecho, en el primer programa “App_Ard_1” usaste “1” y “2” como banderas. Todo depende de la necesidad de tu proyecto aunque debes tener en cuenta que la transmisión serial está basada en el código ASCII, así que mientras no puedas usar “楽” , si puedes usar “?”

Arduino + Android con AppInventor 97

[App Inventor_5-1]

Arduino + Android con AppInventor 98

Revisa el ejercicio en:https://youtu.be/S7kzpULOHlc

Mensaje interactivo

Arduino + Android con AppInventor 101

Arduino + Android con AppInventor 102

Este programa le pide al usuario introducir texto y una vez que lo tenga, presione enviar para verlo reflejado en la matriz de NeoPixel

Arduino + Android con AppInventor 103

[App_Ard_5_2]

Arduino + Android con AppInventor 104

[App_Ard_5_2]

Este programa retoma lo que ya has practicado con banderas, pero se ha incorporado un nuevo componente, el CampoDeTexto. Este componente pide al usuario introducir texto para procesarlo después.

Para utilizar el componente, carga los bloques cuando txtMensaje.ObtenerFoco / poner txtMensaje.Texto como / txtMensaje.Texto con ello se muestra en pantalla lo que el usuario escribió, se mantiene así hasta la introducción de un nuevo texto por el usuario.

Después, al presionar el botón de Enviar, se envía ese texto por bluetooth con los bloques cuando btnEnviar.Clic / llamar Cliente-Bluetooth1.EnviarTexto; texto / txtMensaje.Texto

Arduino + Android con AppInventor 105

[App Inventor_5-2]

Para que este programa funcione correctamente, debes instalar la biblioteca Adafruit_Neomatrix y Adafruit_GFX,, la puedes descargar de estos links:

https://github.com/adafruit/Adafruit_NeoMatrix/archive/master.zip

https://github.com/adaf ruit/Adaf ruit-GFX-Library/archive/master.zip

Si el link deja de funcionar se puede buscar por su nombre.

Para verificar si la instalación fue correcta, Adafruit_Neopixel aparecerá en naranja, de otro modo, la instalación está incompleta.

Arduino + Android con AppInventor 106

Revisa el ejercicio en:https://youtu.be/-xZVEGfUfao

Arduino + Android con AppInventor 108

ACTIVIDAD 4: SENSORES

Briefing- Creación de una aplicación para leer botones- Creación de una aplicación para leer un potenciómetro- Creación de una aplicación de dimmer con LEDs

Arduino + Android con AppInventor 109

Pulsadores

Arduino + Android con AppInventor 110

Arduino + Android con AppInventor 111

En este programa se ha propuesto que el teléfono responda a la pulsación de push-buttons en el Arduino, mostrando en pantalla como si se prendieran y apagaran unas bombillas dependiendo cual push-button se presione; sin embargo, se puede jugar con las imágenes para la pantalla.

Arduino + Android con AppInventor 112

[App_Ard_6]

[App_Ard_6]

En este caso, utiliza un temporizador (Reloj1.Temporizador) con la condición de que el cliente de bluetooth esté conectado.

Si está conectado carga un si, entonces / llamar ClienteBluetooth1.BytesDisponiblesParaRecibir / > 0 para condicionar a la siguiente acción sólo si hay algo de información en el bus de datos recibidos. Si los cargas a la variable global input con los datos recibidos con los bloques llamar ClienteBluetooth1.RecibirTexto; númeroDeBytes / llamar ClienteBluetooth1.BytesDisponiblesParaRecibir.

Después evalúa si recibes una a o una b con global input / = / a o si global input / = / b utilizando una condición si, entonces; si no, si, entonces para delimitar únicamente a esas 2 banderas. En cualquier caso, si se ejecuta a el procedimiento FocoA y carga el texto de A en pantalla. Igual con b.

[App_Ard_6]

Con este conjunto de bloques agrupados en procedimientos logras generar el efecto de que en pantalla parezca como si uno de los focos prendiera y el otro se apagara.

Según el procedimiento, se ha programado las imágenes seleccio-nadas para superponerse en ese procedimiento y de esta manera, al seleccionar otro procedimiento, se logra la animación de cambiar de apariencia.

En cualquier caso, siempre se cargan los mismos bloques, estos corresponden a imgFoco1 y a imgFoco2. Como ejemplo, para imgFoco1 se han usado los siguientes bloques.

imgFoco1.Foto como y Texto con el nombre exacto de la imagen a mostrar. En este caso, FcON.jpg, seguido de poner imgFoco1.Visible como y el bloque lógico cierto. Para ImgFoco2 es lo mismo.

Arduino + Android con AppInventor 115

[App_Ar_d6]

Revisa el ejercicio en:https://youtu.be/9sBm2oxw6pU

Arduino + Android con AppInventor 117

Potenciómetro

Arduino + Android con AppInventor 118

Arduino + Android con AppInventor 119

Este programa utiliza una barra deslizadora la cual responde a las ordenes enviadas por el Arduino desde bluetooth. En principio se ve muy simple, pero en vez de potenciómetro, puedes usar sensores analógicos como de temperatura, de humedad, de sonido y poder visualizar sus niveles en pantalla

Arduino + Android con AppInventor 120

[App_Ard_7]

Arduino + Android con AppInventor 121

[App_Ard_7]

Como en el ejercicio anterior, debes cargar un Reloj condicionado y carga a la variable input lo recibido del Arduino, sin embargo, como vas a recibir números, utiliza el bloque seleccionar elemento de la lista; índice y después, lo que haya en el bus de datos en formato int con llamar ClienteBluetooth1.RecibirBytesConSgino; númeroDeBytes / llamar ClienteBluetooth1.BytesDisponiblesPa-raRecibir y un número 1 con el bloque matemático para seleccionar únicamente el primer número de todos los bytes recibidos, pues, para dar la sensación de tiempo real, enviarás gran cantidad de datos desde el Arduino por tanto, para evitar la sobrecarga, carga a la variable input con un único valor.

Arduino + Android con AppInventor 122

Revisa el ejercicio en:https://youtu.be/fVBCWYWCy3Q

Potenciómetro(Gráfica)

Arduino + Android con AppInventor 125

Arduino + Android con AppInventor 126

En el caso de querer generar un histórico, este programa puede ser muy útil porque muestra una gráfica en el tiempo de los valores de nuestro sensor. Para esta práctica se usa un potenciómetro pero, como se mencionó, podría ser otro sensor analógico

Arduino + Android con AppInventor 127

[App_Ard_8]

Arduino + Android con AppInventor 128

[App_Ard_8]

Los nuevos bloques se refieren al trazado de la línea para generar tu gráfica.

Para generar la gráfica debes crear 4 variables X_2,X_1, Y_2, Y_1, que corresponden a los valores de X y Y (X_1, y_1); y a los nuevos valores de X y Y (x_2, Y_2). Al principio todos valen 0, pero conforme avances en el tiempo se irán actualizando. X incrementará en 1, y Y se cargará con los datos recibidos del Arduino. Como el alto de la gráfica es de 100 y buscas representar 5 volts como valor máximo divide lo recibido entre 20.

Al bloque llamar Lienzoq.DibujarLínea cárgalo con X_1 donde pide x1, con X_2 en x2. Para Y invierte su comportamiento, para ello, carga un bloque matemático (-) para restar el valor de Y al Lienzo1.Ato porque de otro modo, al subir el voltaje al máximo dirá 0 volts y al bajarlo todo dirá 5 volts.

Arduino + Android con AppInventor 129

La última parte de este bloque permite que cuando la gráfica llegue al final de la pantalla, esta se reinicie y regrese al principio en vez de seguir graficando en un área invisible.

Pasa eso, se une un bloque condicional si, entonces y se evalúa si X_2 > Lienzo1.Ancho para saber si ya llegó al límite de la pantalla, de ser verdadero, se pone el bloque llamar Lienzo1.Limpiar para borrar la grafica trazada y tener espacio para una nueva gráfica. Después se carga a X_1 y X_2 con cero para vuelva a comenzar.

[App_Ard_7]

Revisa el ejercicio en:https://youtu.be/eGy6-r9EiBs

Termopar(Gráfica)

Arduino + Android con AppInventor 132

Arduino + Android con AppInventor 133

Como se ha mencionando antes, puedes reemplazar el potenció-metro con un termopar (sensor de temperatura), pero dado que la señal del termopar es muy pequeña, debe acondicionarse para poder ser leída por el Arduino, por eso se ha usado el circuito MAX6675 junto con el termopar.

Arduino + Android con AppInventor 134

[App_Ard_8_2]

Arduino + Android con AppInventor 135

Para que este programa funcione correctamente, debes instalar la biblioteca max6675, esta puede descargarse de este link:

https://github.com/adafruit/MAX6675-library/archive/master.zip

Si el link deja de funcionar, la puedes buscar por su nombre.

Para verificar si la instalación fue correcta, mxx6675 aparecerá en naranja, de otro modo, la instalación está incompleta.

Dimmer

Arduino + Android con AppInventor 137

Arduino + Android con AppInventor 138

En esta ocasión se han combinado sensores discretos (botones) y analógicos para ver las capacidades que tendrás al enviar señales por bluetooth.

En este caso se selecciona el nivel de intensidad de luz del LED y luego se selecciona el LED al cual aplica ese nivel.

Arduino + Android con AppInventor 139

[App_Ard_9]

[App_Ard_1]

Se crean dos conjuntos de bloques similares para btnFoco1 y btnFoco2, por lo que se ha tomado btnFoco1 para explicar la programación.

Se carga un bloque de control si, entonces para condicionar esta acción a que el cliente de bluetooth esté conectado. Después, pon dos condiciones; si ningún botón ha sido presionado, únicamente a la variable acvFoco1 se carga un 1 y se carga FcOn a btnFoco, pero si ya se había presionado btnFoco2, entonces acvFoco1 = 1 y acvFoco2 = 0, se carga fcON a btnFoco1 y fcOFF a btnFoco2. En cualquier caso, se envía una bandera “a” al Arduino para indicarle que manipule al LED 1.

Arduino + Android con AppInventor 141

[App Inventor_8]

Arduino + Android con AppInventor 142

Revisa el ejercicio en:https://youtu.be/QF42OMCvLV8

Arduino + Android con AppInventor 144

ACTIVIDAD 5: ROBOTO

Briefing

- Creación de una aplicación para controlar un robot pequeño.

Roboto

Arduino + Android con AppInventor 146

Arduino + Android con AppInventor 147

Arduino + Android con AppInventor 148

Esta aplicación se desarrolló como exhibición de las capacidades del bluetooth para manipular un robot con ruedas.

Este robot tiene comandos básicos: adelante, atrás, izquierda, derecha. Prender y apagar luces

Arduino + Android con AppInventor 149

[App_Ard_9]

Arduino + Android con AppInventor 150

Arduino + Android con AppInventor 151

Arduino + Android con AppInventor 152

Arduino + Android con AppInventor 153

Bibliografía Nuñez Montes, José Luis. “Desarrollo de Aplicaciones móviles

Android con App Inventor”. Udemy. Última modificación Abril de 2019. https://www.udemy.com/course/desarrollo-de-aplica-ciones-moviles-con-app-inventor/

Wolber, David et al. App Inventor 2: Create Your Own Android Apps, California: Ed. O’Reilly, 2018.

El profe García (Nombre de usuario). “Como crear su propia App en Android para controlar Arduino (Bluetooth) Tutorial”. 22 de octubre de 2014. Video. 11:05. https://www.youtube.com/watch?v=S8q1vbVMV2Q. 

ELECTRONOOBS (Nombre de usuario). “Create a Bluetooth App and control the Arduino”. 12 de Octubre de 2016. Video. 12:19. https://www.youtube.com/watch?v=evVRCL9-TWs.

¿Necesitas ayuda con tu proyecto?

El Centro Multimedia ofrece asesorías gratuitas en línea. Es necesario entrar en http://cmm.cenart.gob.mx/cursos/asesorias.html y completar el formulario.

**Las asesorías en línea estarán disponibles por poco tiempo**

Arduino + Android con App Inventor

Laboratorio de Interfaces Electrónicas y Robótica

Abraham Sánchez Hernández

C D M X / 2 0 2 0

CENTRO NACIONAL DE LAS ARTES