Aplicación APP INVENTOR para controlar Arduino

Programa de SteamakersBlocks para cargar en la ESP32 Steamakers compatible con Arduino

En este programa se utilizan solicitudes GET, junto con sus parámetros para permitir que el servidor web cargado en el ESP32 sea capaz de encender o apagar cualquier led conectado a cualquiera de los pines disponibles.

Primeramente se ha de iniciar el servidor web en el puerto (80) y se detecta que dirección IP hay asignada para el ESP32.

Se crean las funciones para encender y apagar cualquier led (probaremos con un led conectado en D3 – pin IO25).

Con los bloques “valor del parámetro” obtenemos parámetros de la URL.

En el ejemplo usaremos la versión del bloque que obtiene el parámetro y lo procesa automáticamente como un valor numérico. 

Vamos a realizar las dos funciones que nos permitirán encender y apagar cualquier led. La función para encender el led sería:

La petición correcta para encender el led anterior, conectado al pin 19 (GPIO 19 o D12-Led Rojo) sería:

http://192.168.1.58/encender?PIN=19

Y así podríamos indicar cualquiera de los pines GPIO disponibles para activarlo a ON.

La función para apagar el led sería:

La petición correcta para apagar el led anterior, conectado al pin 19 (GPIO 19 o D12-Led Rojo) sería:

http://192.168.1.58/apagar?PIN=19

Y así podríamos indicar cualquiera de los pines GPIO disponibles para activarlo a OFF.

Aplicación de APP Inventor para conseguir lo mismo

Podemos diseñar una sencilla aplicación en Appinventor2 para encender y apagar los leds como en el ejemplo anterior, pero desde un teléfono móvil y de forma más práctica. Después de iniciar un nuevo proyecto en el Diseñador incluimos dos botones y un componente web, además añadiremos un HorizontalArrangement en donde colocaremos los dos botones. También necesitamos dos espacios para introducir información, en uno de ellos la IP asignada a la placa ESP32 y en el otro el número del pin correspondiente al led que se ha de apagar o encender.

En la barra de menú izquierda del Diseñador tenemos todos los elementos que necesitamos para esta aplicación. En el apartado Interfaz de usuario encontramos el botón, que arrastramos hasta la pantalla central. De hecho arrastramos dos y los configuramos cambiando el nombre del elemento y el que se ve una vez abierta la aplicación en el teléfono móvil.

A continuación se puede ver la lista de todos los elementos que hemos ido arrastrando hasta la pantalla que se muestra en el centro. Cuando hacemos clic en uno de ellos podemos configurarlo con las opciones que se muestran en el espacio de la derecha.

En el apartado Conectividad encontramos el elemento Web.

En el apartado Interfaz de usuario encontramos los elementos Etiqueta, Desplegable y Campo de texto. Las Etiquetas permiten mostrar texto con información en la pantalla del teléfono móvil mientras se ejecuta la aplicación. En este caso los dos textos son: Introduce en la ventana inferior la dirección IP y Selecciona en el menú inferior el pin que se desea encender o apagar. 

Campo de texto. se utiliza para disponer en la pantalla de una ventana de texto en donde introducir el número IP asignado al ESP32 para poder comunicarnos con él. Por esta razón le hemos asignado el nombre tIP, aunque puede ser cualquier otro. Esta aplicación se comunica con Arduino por wifi, por lo que ha de estar físicamente conectado a la misma red wifi que ESP32.

El Desplegable se utiliza para indicar a la aplicación que número de pin es el utilizado para encender o apagar el led conectado a él. Por esta razón lo hemos nombrado como selGPIO. Los elementos del desplegable se introducen en el recuadro ElementosDesdeCadena separados por comas.

Este es el aspecto que mostrará la pantalla del teléfono móvil cuando se ejecute la aplicación.

Ahora pasamos al apartado de programación mediante bloques. El programa definitivo queda como se muestra a continuación.

En la barra de la izquierda tenemos los bloques agrupados por apartados y debajo los deferentes elementos que hemos utilizado en el Diseñador. Si hacemos clic en alguno de estos elementos se mostrarán los bloques específicos para cada uno de estos elementos.

Entre los bloques pertenecientes al elemento Web tenemos Cuando Web1 ObtuvoTexto, que permite que se muestre en la pantalla de la aplicación en el elemento tRespuesta el mensaje que envía el servidor web instalado en ESP32 después de que se le hace una solicitud para encender o apagar un led.

Entre los bloques de programación específicos del elemento tRespuesta encontramos poner tRespuesta texto como, que introducimos en el bloque descrito anteriormente.

El componente tomar ContenidoDeRespuesta lo podemos encontrar cuando situamos el puntero del ratón sobre los elementos del bloque Cuando Web1 ObtuvoTexto.

Entre los bloques específicos para la programación del elemento Botón se encuentra cuando Encender .Clic.

Entre los bloques específicos de Web encontramos llamar Web1 Obtener.

Entre los bloques específicos de Web también encontramos poner We1 Url como.

Del apartado de Texto sacamos un bloque que permite agrupar varios elementos para componer un texto más grande.

En la versión en ingles estos mismos bloques se muestran así.

Una vez acabado el programa en la barra de menús superior, en el apartado Generar elegimos App de Android.

A medida que se realiza el proceso se muestra una barra de progreso de la operación.

Al final aparece un código QR que hemos de capturar con el teléfono móvil para descargar el archivo que nos permitirá instalar la aplicación.

Este es el aspecto de la pantalla de la aplicación.