destacada_appInventor

En esta nueva entrada del Curso de introducción a MIT App Inventor vamos a crear una aplicación que permitirá controlar de forma remota un PrintBot.

Código Arduino

En este caso vamos a utilizar el código mostrado en la entrada Aprende a programar y controlar tu PrintBot Evolution desde tu terminal con Protocoder.

Este código espera recibir una cadena de caracteres del tipo =avanzar+, por lo que programaremos la aplicación de App Inventor para que envíe las ordenes de esta manera, pudiendo así reutilizar el código.

Se han programado diferentes modos de funcionamiento que incluyen órdenes de movimiento (avanzar, retroceder, izquierda, derecha, parar y 180º), modos de funcionamiento automáticos (obstaculos, siguelineas y sigueluz).

Puedes encontrar en las descargas al final de este post el código para Arduino.

App Inventor

Para comenzar, creamos un nuevo proyecto, que en nuestro caso se llama PrintBot_Botones.

Creando la interfaz de usuario

Para crear esta UI utilizaremos botones, “listPicker” y “layaouts”.

mockup

Dentro de las propiedades de la pantalla, modificamos las propiedades alingHorizontal a Center y Title a “PrintBot con Botones”.

Para conectar a un dispositivo Bluetooth utilizaremos un listPicker, es decir, un elemento que mostrará un listado, en este caso, de los dispositivos Bluetooth que se hayan sincronizado previamente a través de los ajustes de Android. Modificamos su nombre a ConnectBT, el texto que muestra a Connect Bluetooth y su ancho a fill parent.

1
A continuación, incluimos un botón que utilizaremos para desconectar del dispositivo Bluetooth. Modificamos su nombre a DisconnectBT, el texto que muestra a Disconnect Bluetooth y su ancho a fill parent.

2
A continuación, incluimos un layaout con altura de 10 píxeles, que funcionará como separador y un layaout vertical, donde incluiremos tres botones para los modos automáticos de funcionamiento.

3

Dentro del layaout vertical, incluimos tres botones y cambiamos su nombre y texto a Line Follower, Avoid obstacles y Light Follower, respectivamente. Modificamos también el tamaño de los botones a fill parent. Podemos cambiar el tamaño del layaout que contiene los botones a fill parent o darle un tamaño fijo. En este caso, utilizamos la ultima opción y daremos un ancho al layaout de 150 píxeles.

4

A continuación, incluimos un layaout con una altura de 30 píxeles para que funcione como separador y un layaout TableArrangement al que modificamos las propiedades Rows y Columns a 3.

cotas

Para continuar, incluimos 5 botones en forma de cruceta dentro del layaout TableArrangement y modificamos su tamaño a 50 píxeles.

5

Cambiaremos su texto y nombre, de arriba a abajo y de izquierda a derecha, para que sean:

  • ^ upBtn
  • < leftBtn
  • o stopBtn
  • > rightBtn
  • v downBtn

Para finalizar, incluimos los elementos BluetoothClient, que utilizaremos para enviar y recibir datos, y Notifier, que utilizaremos para mostrar notificaciones en pantalla.

6

Programando la aplicación

En primer lugar, programaremos la conexión Bluetooth. El elemento ListPicker, que hemos llamado ConnectBT tiene dos funciones principales BeforePicking y AfterPicking, que nos permite realizar acciones diferentes antes y después, respectivamente, de haber seleccionado un elemento del listado.

Para la función BeforePicking, utilizamos la orden set ConnectBt.Elements to, que se encuentra dentro de los bloques de ConnectBT y cambiará los elementos del listado. Estos bloques los uniremos al bloque BluetoothClient1.AddressesAndNames, por lo que veremos al pulsar los dispositivos Bluetooth que se hayan sincronizado previamente a través de los ajustes de Android. Una vez que pulsemos sobre el botón Connect Bluetooth, aparecerá un menú contextual en el que podremos escoger el dispositivo al que conectarnos.

7

En el caso de la función AfterPicking, programaremos la ejecución de la conexión. Para lo cual incluiremos un condicional if-else. En la condición usaremos el bloque call BluetoothClient1.Connect address, y a este último uniremos el bloque ConnectBT.Selection, que almacena el elemento que se ha seleccionado del selector de lista. Si se realiza la conexión correctamente, la función de conexión devolverá el valor true, por lo que se ejecutará la parte then.

8

A continuación, en la parte then del condicional, incluimos el bloque call Notifier1.ShowAlert notice, que mostrará un toast (mensaje flotante en la pantalla) y un bloque de texto para imprimir la palabra Connected, mostrando que se ha realizado la conexión correctamente.

9

La programación del botón Disconnect Bluetooth utilizamos el bloque when DisconnectBT.Click do y el bloque call BluetoothClient1.Disconnect.

10

Para programar el comportamiento de los botones de movimiento manual y automático utilizaremos el bloque call BluetoothClient1.SendText text, textos y el modificador join, que concatena las cadenas de caracteres. En este caso, queremos enviar una cadena de caracteres que tenga el tipo =avanzar+.

En el caso del botón upBtn, la programación que utilizaremos es:

11

Para el resto de botones, copiaremos el conjunto de bloques anterior y modificaremos el botón al que accede y la cadena de caracteres que se envía según la siguiente lista:

  • Line_Follower: siguelineas
  • Avoid_Obstacles: obstaculos
  • Light_Follower: sigueluz
  • upBtn: avanzar
  • leftBtn: izquierda
  • stopBtn: parar
  • rightBtn: derecha
  • downBtn: retroceder

La programación final de los botones de movimiento manual es:

12

La programación final de los botones de movimiento automático es:

13

43 comentarios

  1. hola sabes como podría hacer para enviar una cadena de caracteres repetitivos mientras se mantenga presionado un botón en el celular y cuando se deje de pulsar este botón deje de enviar esta cadena de caracteres le agradecería mucho me pudiese ayudar.

    1. Luis Díaz

      Hola Alexander,

      Actualmente no hay ningún bloque que permita hacer esto. Puedas hacerlo utilizando un canvas y con dos imágenes para el botón (pulsado y sin pulsar). Tendrías que poner la imagen sin pulsar de fondo de canvas y utilizar la función canvas.TouchDown con los bloques canvas.backGroundImage y la imagen de pulsado.

      Para volver al estado incial, utilizarias canvas.TouchUp con canvas.backGroundImage y la imagen de sin pulsar.

      Un saludo.

      1. Hola me podrias explicar mas sobre como funciona el canvas llevo rato intentando hacer unos botones pulsadores para enviar datos a arduino pero no loro hacerlos funcionar no se si me puedas ayudar o si tienes un ejemplo que me compartas el .aia de tu apk para ver como es la estructura

        1. Luis Díaz

          Hola Victor,

          No tengo ninguna aplicación que utilice el canvas para esto, pero apuntamos un tutorial para la segunda “temporada” del curso.

          El funcionamiento básico es el que he explicado antes, detectas la pulsación con el bloque touchDown y detectas cuando se ha dejado de pulsar con el bloque touchUp. Utiliza una variable, por ejemplo: boton1_pulsado que tenga valor true cuando se active el bloque touchDown y valor false cuando se active el bloque touchUp .

          Tendrías que crear un canvas por botón, la opción más fácil, o detectar la posición de la pulsación dentro del canvas y hacer por programación que lo detecte como una pulsación, lo cual es más difícil y en cada terminal que utilices la aplicación tendrías (en principio) que cambiar la programación.

          Te recomiendo utilizar el primer método ya que es más sencillo y además te permitirá utilizar varios botones a la vez.

          Saludos.

  2. Saludos,
    Tengo un problema al intentar subir la programación de Arduino a mi PrintBot me da un error en el programa Arduino y lo único que dice es que no responde y que visite la página web de Arduino. Esto también mes pasa intentando cargar a la placa del PrintBot la programación de Arduino de la otra aplicación para controlar el PrintBot desde el móvil que hay en la página de diwo.bq . Que puedo hacer?

    Atentamente Marc.

    1. Luis Díaz

      Hola Marc,

      ¿Puedes copiar el código de error? ¿Te pasa solo con este sketch o con todos?

      Un saludo.

      1. Hola Luis
        He estado probando todo este tiempo y me sigue sin funcionar, me pasa con todos los sketch que intento cargar al PrintBot por Arduino. Y aparte de que me tarda mucho intentando cargarlo me sale todo esto como error:
        avrdude: stk500_recv(): programmer is not responding
        avrdude: stk500_getsync() attempt 1 of 10: not in sync: resp=0x09
        avrdude: stk500_recv(): programmer is not responding
        avrdude: stk500_getsync() attempt 2 of 10: not in sync: resp=0x09
        avrdude: stk500_recv(): programmer is not responding
        avrdude: stk500_getsync() attempt 3 of 10: not in sync: resp=0x09
        avrdude: stk500_recv(): programmer is not responding
        Problema pujant a la placa. Visita per http://www.arduino.cc/en/Guide/Troubleshooting#upload suggeriments.
        avrdude: stk500_getsync() attempt 4 of 10: not in sync: resp=0x09
        avrdude: stk500_recv(): programmer is not responding
        avrdude: stk500_getsync() attempt 5 of 10: not in sync: resp=0x09
        avrdude: stk500_recv(): programmer is not responding
        avrdude: stk500_getsync() attempt 6 of 10: not in sync: resp=0x09
        avrdude: stk500_recv(): programmer is not responding
        avrdude: stk500_getsync() attempt 7 of 10: not in sync: resp=0x09
        avrdude: stk500_recv(): programmer is not responding
        avrdude: stk500_getsync() attempt 8 of 10: not in sync: resp=0x09
        avrdude: stk500_recv(): programmer is not responding
        avrdude: stk500_getsync() attempt 9 of 10: not in sync: resp=0x09
        avrdude: stk500_recv(): programmer is not responding
        avrdude: stk500_getsync() attempt 10 of 10: not in sync: resp=0x09

        Siempre me pasa lo mismo con los sketch en Arduino.

        Saludos

        1. Luis Díaz

          Hola Marc,

          Parece que no has configurado correctamente los datos de la placa. Tienes que ir al menú Herramientas y ahí escoger correctamente la placa, el procesador y el puerto.

          Asegurate que tienes configurado la opción Programador como AVRISP mkII.

          Un saludo.

          1. Hola Luis,

            Disculpa todas las molestias de tantos problemas que tengo jeje.

            He estado mirando la configuración, el programador ya lo tenia puesto como AVRISP mkII el puerto lo he comprobado y coincide el puerto puesto en Arduino con el que marca el PrintBot en el ordenador y por ultimo la placa, la del PrintBot, la ZUM BT-328 es equivalente a la Arduino Uno no? Si es así no me funciona y me sale el mismo error.

            1. Luis Díaz

              ¡No hay problema! Estamos encantados de ayudar.

              La placa ZUM BT-328 es equivalente a la placa Arduino BT. Dentro del procesador tienes que escoger el ATMega328, que efectivamente es el mismo que tienen las uno. Seguramente tu problema era ese.

              Por otra parte, decirte que si estás conectado mediante Bluetooth (por ejemplo con un terminal Android) no podrás utilizar el puerto serie USB. Tienes que desconectar el Bluetooth y después podrás utilizarlo (Esto suele pasar mientras se está desarrollando un programa y se pone a prueba)

              Un saludo.

  3. Hola Luis

    Era ese el problema por el cual no me cargaba los sketches en Arduino ahora ya me carga y la aplicación en el móvil me detecta el Bluetooth del PrintBot y se conecta, el problema ahora es que no funcionan las ordenes que le doy, he probado a mirar si había echo bien la configuración de la App y esta como tu la has puesta y como dice el video. Esto tambien me pasa en el control por gestos, se carga bien la configuración Arduino en el PrintBot conecto el BT y lo detecta y todo bien pero al utilizar los botones o funciones no hace nada, he comprobado ha poner una configuración de Bitbloq por si eran las pilas o algo mal montado pero todo lo que cargo de allí funciona. Pensé que quizás en este el problema eran los servos que los tenia en la ranura que no era y por eso hice el de gestos porque marcas las ranuras en las cuales conectar los servos pero no me funciona.

    Saludos

    1. Luis Díaz

      Hola,

      Supongo que al cambiar de programa cargas el sketch correspondiente y que estén conectados los componentes en el pin correcto para cada sketch. Comprueba también que el interruptor del lateral de la placa este en la posición de encendido.

      Un saludo.

      1. Hola

        Si, cada vez cargo el sketch correspondiente y los componentes reviso que estén conectados como dice cada curso y sino lo miro en el sketch como esta configurado. Las pilas funcionan correctamente y la placa esta encendida, y es muy raro porque me pasa en cualquier aplicación tanto este apartado del curso de AppInventor como el apartado 6 y tambien me pasa lo mismo con la App de RoboPad++

        Saludos.

        1. Luis Díaz

          Hola Marc,

          ¿podrías probar con otro terminal? Es para descartar problemas.

          Un saludo.

          1. Hola Luis,

            He probado a usar otro móvil, también Android pero de otra marca y me pasa lo mismo, se instala bien la App dice que el BT se a conectado pero después al pulsar los botones no hace nada, el sketch era el que tocaba y he comprobado que la parte de bloques de la App estuviera bien echa. Podria probar con una tablet si hiciera falta.

            Saludos

            1. Luis Díaz

              Hola,

              ¿Cuando conectas la aplicación a través del Bluetooth sigues con el USB conectado o trabajas directamente con las baterías?

              Si sigues con el USB conectado, desconectalo, conecta la batería y comprueba que el switch esté en la posición ON:

              anita-zum-interruptor

              Si tienes la placa conectado solo con las baterías y está en la posición ON, deberías ver que el led marcado con PWR está encendido (se encuentra muy cerca del interruptor) .

              Un saludo.

              1. Hola Luis

                Cuando conecto la aplicación tengo el USB desconectado la batería conectada y esta en ON, la luz PWR está encendida. Y también cuando conecto el BT en la placa el led del BT está encendido correctamente y al desconectarlo desde la App en el móvil, el led se pone a parpadear correctamente.

                Saludos

  4. Luis Díaz

    Hola Marc,

    Según dices la falta de alimentación queda descartada por completo.

    La siguiente posibilidad que se me ocurre es que se estén enviando mal las ordenes. Revisa el código de App Inventor y el de Arduino para comprobar que sean exactamente iguales. Si tienes una pantalla LCD puedes comprobar el mensaje que se recibe en Arduino, imprimiendo en la pantalla la variable inString.

    Un saludo.

    1. Hola Luis,

      Donde encuentro los códigos que tengo que revisar, tanto el de Arduino como el de App Inventor? Porque no tengo una pantalla LCD.

      Saludos

      1. Luis Díaz

        Hola,

        Los códigos que tienes que revisar son las palabras que envías a través del Bluetooth y que se reciben en Arduino, es decir, tienes que revisar el programa que has hecho en App Inventor y el código de Arduino que estás cargando.

        Al pulsar sobre un botón, por ejemplo, arriba, se enviará una cadena de caracteres. Tienes que comprobar que lo que envías y recibes es lo mismo.

        Un saludo.

        1. Hola Luis,

          He estado mirando los códigos: avanzar ,parar ,derecha ,obstaculos ,etc. Todos los de la App coinciden con los de Arduino lo único que he visto en Arduino que no está en la App es lo del giro de 180 grados, no se nada de programación en Arduino pero todos los nombres de los códigos concuerdan los unos con los otros. Lo único que yo he visto raro es que cuando conecto el BT en el PrintBot el led marca que esta conectado y en el móvil ha salido el mensaje de conectado pero en la pantalla arriba donde te marca el wifi la hora y el BT este no sale como resaltado por estar conectado a un aparato. Me refiero a que cuando conecto el altavoz externo u otro aparato con BT ese símbolo me se resalta con unas rallas a los lados en señal de estar ya vinculados.

          Saludos

          1. Luis Díaz

            Hola Marc,

            ¿Has sincronizado previamente con la placa a través de ajustes/Bluetooth? Comprueba también que los interruptores que están cerca del bluetooth este la posición 1 en ON y 2 y 3 en OFF.

            Saludos.

  5. Hola luis bien dia, tengo una duda que no e podido realizar en app inventor, realice una app que toma foto y que permite guardarla con el nombre que yo le inserto en unos campos pero ese nombre son solo numero mi pregunta es, ¿Puedo limitar los caracteres de mi campo donde ingreso el nombre de la imagen ? solo son numero lo que ingreso podrias ayudarme diciendo como lo puedo hacer. Gracias SALUDOS

  6. Luis Díaz

    Hola Javier,

    Puedes utilizar el bloque de texto para introducir el texto que quieras. Además, si utilizas el bloque join o unir, puedes concatenar cadenas de caracteres.

    Un saludo.

    1. Gracias Luis…….pero creo no me di a entender……….en la caja de texto donde ingreso el nombre quiero que solo ingrese lo maximo 6 caractéres y no mas…………….. ese es mi problema como puedo solucionarlo.

      Un saludo.

        1. Ok. Gracias Pablo me sirvio perfectamente gracias por tu apoyo.

          SALUDOS.

  7. Hola Luis,

    Espero que te encuentres bien y que tengas un excelente día, mi consulta es, se puede realizar de alguna manera que al presionar un botón en mi app, esta pueda enviar una notificación tipo pop-up o similar (No SMS, para no utilizar saldo) a todos los demás usuarios que tienen instalada la misma app?

    De antemano gracias por tu respuesta. Saludos.

    1. Alberto

      Hola Daniel,

      ¿alguna duda sobre cómo controlar un PrintBot con AppInventor?

  8. Hola Luis & Alberto.

    Disculpen me podrían ayudar, llevo un mes trabajando en appinventor y me parece interesante, tengo una pequeña duda.
    Como hago para juntar 2proyectos porque en un proyecto hice como cuentos y en el otro hice preguntas referentes a los cuentos, y quiero unirlos para que me aparezcan los dos en un mismo proyecto juntos.

    1. Pablo Lozano

      Hola Erick,

      Puedes utlizar la herramienta Al2 Project Merger Tool para combinar dos proyectos.

      Espero que te sea de ayuda.

      Un saludo.

  9. ola estaba viendo los comentarios y vi que explicabas como usar el canvas como boton pulsador  no se si me pudieras explicar un poco mas sobre como hacerlo fucnionar y si te ha funcionado a ti, la verdad llevo rato intentando hacer una apk para controlar un coche programado en arduino pero solo quiero que avance cuando presiono el boton y no he conseguido como hacerlo solo pude hacer botones retentitivos pero me gustaria hacerlos pulsadores si me pudieras ayudar te lo agradeceria mucho.

    1. Luis Díaz

      Hola,

      Para crear esta característica tienes que utilizar el canvas y los bloques TouchDown y TouchUp. Cuando se active el bloque TouchDown, cambias una variable, por ejemplo “pulsado”, que indique al programa que se ha pulsado, y mientras esta variable tenga el estado que asignes a TouchDown envías la variable que utilices para hacer que el coche avance.

      Después, con TouchUp, detectas que se ha dejado de pulsar, por lo que cambias la variable otra vez y haces que la variable “pulsado” cambie de estado y dejas de enviar la variable que hace que el coche avance.

      Para enviar esta variable puedes utilizar el timer para crear un evento que se repita cada cierto tiempo.

      Saludos.

      1. Hola luis muchas gracias por la ayuda me funciono muy bien

        1. Luis Díaz

          Hola Antonio,

          Me alegro de que te haya funcionado.

          En la segunda temporada del curso vamos a hacer un tutorial sobre este tema para explorar todas las opciones.

          Saludos.

  10. buenas tardes luis,

    estoy intentando crear una aplicación de appinventor para controlar ZOWI

    sin embargo no sé muy bien como construir este telegrama con appinventor

    “M”+” “+”1″+” “+”1000″+”\r”

    me podrías ayudar?

    gracias

    1. Luis Díaz

      Hola Antonio,

      Entiendo que lo que no sabes es cómo enviar el mensaje “M”+” “+”1″+” “+”1000″+”\r”, ¿no?

      Para enviarlo puedes utilizar el bloque join o unir. Justo al lado del nombre hay un icono de fondo azul con un engranaje. Si pulsas sobre el engranaje podrás añadir más bloques de texto. A continuación tienes una captura de pantalla de como quedaría el menú con más bloques.

      Bloque Join

      Espero que esto te ayude.

      Un saludo.

      1.  

        Hola luis,

        como ves en la imagen el mensaje esta formado con el bloque “join”
        creo que el problema es el caracter de retorno de carro “\r” que necesita el Zowi para interpretar el mensaje.
        Como se debe enviar ese caracter en MIT app INVENTOR?
        gracias

        1. hola de nuevo luis,
          al final encontré la solución:
          el carácter de retorno de carro no hay que enviarlo como texto sino como byte con valor 13 que es el equivalente en la tabla ASCII
          os dejo voy a seguir probando MIT app Inventor 2 y ZOWI
          hasta pronto,

          1. Luis Díaz

            ¡Genial Antonio!

            Me alegro que hayas encontrado la solución.

            Un saludo.

  11. Buenos días Luis,

    Te escribo para ver si me puedes dar alguna pista de como hacer lo que pretendo utilizando appinventor.
    Appinventor tiene un bloque de mensajería con el cual puedo imprimir los mensajes SMS recibidos en mi movil.
    Pretendo hacer lo mismo para los mensajes Whatsapp. He visto que con ActivityStarter puedo enviar mensajes, pero lo que yo quiero es poder recibirlos. Como no se a que ActivityClass me tengo que ir para poder hacer esto porque no encuentro nada, he pensado en imprimir directamente todos los mensajes del notificador del movil.
    Sabes si existe algún ActivityStarter o algo para poder leer esos mensajes e imprimirlos en mi app?
    Estoy muy perdido lo se jaja.

    Ojala me puedas echar una mano.

    Un saludo!

  12. Hola Luis,
    es de gran aporte su contenido me ha servido mucho, pero quisiera saber si me podrias guiar en una app, la funcion es poder generar facturas y poder imprimirla como tal, le agradeceria saludos desde Ecuador..

Los comentarios están cerrados.