Luz de estado de ánimo de Android controlada por voz: 11 pasos (con imágenes)

2025 Autor: John Day | [email protected]. Última modificación: 2025-01-23 14:40

Necesitaba crear una clase para nuestro Maker Group local. Algo que garantizaba incluso a los visitantes primerizos una victoria definitiva y una gran recompensa sin desorden, sin complicaciones y sin herramientas o materiales especializados. Los estudiantes necesitaban llevarse a casa algo funcional y divertido que pudieran mostrar a sus amigos, hacerlo en una tarde, y tenía que ser gratis. (Y con suerte traerlos de vuelta para más, o para una clase relacionada) Así que creé este proyecto.

Convierte tu antiguo teléfono o tableta en un panel de estado y luz ambiental controlado por voz. ¡¡¡GRATIS!!! Fácil de hacer en una tarde - NO SE REQUIERE EXPERIENCIA (Domingo, Domingo Domingo)

Cualquiera con un dispositivo Android y acceso a una computadora puede programar una aplicación controlada por voz en una o dos horas. Utiliza la aplicación gratuita MIT App Inventor, por lo que no hay ningún costo. Pueden personalizarlo fácilmente y luego agregar su propia astucia a una cubierta o estuche. Y pueden traer lo mismo a clase y seguir ampliando y mejorando sus proyectos durante varios meses.

El proyecto proporciona un buen punto de partida para la programación, pero no es suficiente para satisfacer realmente: está diseñado para que la gente vuelva a la siguiente clase. Malvado, lo sé. Pero lleva a la gente a Arduino, que conduce a Raspberry Pi, que conduce a la electrónica y la soldadura. Si están contentos con la aplicación básica y no quieren programar más, pueden hacer un estuche personalizado cuando regresen al Maker Group para clases de tela y costura, papel y dibujo, carpintería y marcos. fabricación o incluso diseño e impresión 3d.

Requerimientos básicos

• Un teléfono o tableta Android antiguo (actualmente 2.3 o posterior)
• Acceso a Internet
• Una cuenta de App Inventor (gratis)
• Preferiblemente, una computadora con el navegador Chrome instalado

Preparación

Necesita estar familiarizado con el programa App Inventor del MIT. Hay muchos Instructables al respecto (algunos bastante avanzados). Pero el mejor lugar para aprender App Inventor es su sitio web y una excelente serie de tutoriales. La mayoría de las personas aprenden los conceptos básicos en cuestión de minutos. Después de todo, esta es la misma tienda que creó el entorno de programación Scratch y la aplicación de programación LEGO Mindstorms original. Si es demasiado mayor para saber acerca de estos, pídale ayuda a su niño en edad escolar local.

Si está impartiendo la clase, probablemente debería estar familiarizado con la mayoría de los componentes y comandos. Es casi seguro que alguien en la clase pida hacer algo diferente a lo que se muestra en este tutorial. Puede ceñirse al guión y hacer solo lo que se muestra aquí. Pero he notado que obtenemos una tasa mucho más alta de visitantes recurrentes cuando podemos ayudar a todos a crear una versión única con funciones "avanzadas" que pueden mostrar a sus amigos.

Así que familiarícese con los conceptos básicos, luego regrese para ver un tutorial paso a paso.

Paso 1: diseño y configuración

Crea un lienzo

• En el modo "Diseñador", vaya a la paleta "Dibujo y animación".
• Arrastre un "Lienzo" a la pantalla.
• Establezca el ancho y la altura del lienzo en "Rellenar principal".
• Crearemos el código para cambiar el color del lienzo en pasos posteriores.

Crear reconocimiento de voz

• Desde la paleta "Medios", arrastre "SpeechRecognizer" a la pantalla.
• Este es el componente que escuchará nuestros comandos de voz.
• Configuraremos este elemento más adelante.

Crear capacidad de habla

• También desde la paleta "Medios", arrastre un objeto "TextToSpeech" a la pantalla.
• Usaremos este componente para crear avisos hablados para el usuario.
• Este elemento también se configurará más adelante en el tutorial.

Acabamos de instalar los componentes básicos de nuestra aplicación, todo en unos segundos. Ahora pasamos a configurarlos y codificarlos. Para eso, necesitamos cambiar al modo "Bloques". Mire en la esquina superior derecha de la pantalla y haga clic en el botón Bloques. Si necesita volver al modo Diseñador, simplemente haga clic en el botón Diseñador.

Paso 2: Inicie SpeechRecognizer

RECUERDE: Cambie al modo "BLOQUES": asegúrese de cambiar al modo de bloqueo haciendo clic en el botón en la esquina superior derecha de la pantalla. Aparecerá un nuevo conjunto de paletas. Usaremos estas paletas y bloques para programar la luz ambiental.

Queremos comenzar a escuchar los comandos tan pronto como se abra la aplicación. Para hacer eso, "llamaremos" al objeto SpeechRecognizer cuando la primera pantalla se "inicialice". AppInventor ha creado automáticamente una "pantalla" para nosotros. Cada aplicación tiene al menos una pantalla, algunas tienen varias. Solo necesitamos el predeterminado.

Inicializar la pantalla

• Haga clic en el objeto Pantalla en el menú de la izquierda.
• Desde el menú desplegable, arrastre el objeto "Hacer cuando se inicializa la pantalla" al escenario.

Iniciar el Reconocimiento de voz

• Haga clic en el objeto "SpeechRecognizer" en el menú de la izquierda.
• Arrastre el objeto "call SpeechRecognizer getText" al escenario
• Conecte este comando dentro del bloque de pantalla inicializada

Ahora, el programa comienza a escuchar automáticamente los comandos de voz (getText) tan pronto como se carga (inicializa) la primera pantalla. A continuación, le decimos a la computadora qué hacer cuando escuche comandos.

Paso 3: creación del árbol de decisiones

La computadora ahora está escuchando comandos de voz, por lo que a continuación, debemos especificar qué hacer después de escuchar ciertas palabras. En este proyecto usaremos principalmente nombres de colores como azul, verde y amarillo. Cuando la computadora escuche esas palabras, cambiará el color del objeto Canvas.

Hacemos esto probando para ver si el comando de voz coincide con alguna de las palabras que hemos especificado. Si el comando de voz coincide con una palabra predefinida, entonces queremos que la computadora realice ciertas acciones, como cambiar el color del lienzo y dar algunos comentarios verbales. Si no se encuentra ninguna coincidencia, debemos informar al usuario que algo salió mal.

Comenzamos creando un marco en blanco para contener todas las pruebas y acciones.

Qué hacer después de recibir un comando de voz

• Haga clic en SpeechRecognizer en el menú de la izquierda
• Arrastra el bloque "Después de recibir texto" al escenario.
• (Coloque el bloque directamente sobre el escenario, NO dentro del bloque anterior)

Crear espacios de prueba

• Haga clic en Control en la sección incorporada del menú de la izquierda
• Arrastre un bloque de comando If-Then al escenario
• Conecte el bloque If-then dentro del bloque afterGettingText
• Haga clic en el icono de engranaje azul en el bloque Si-entonces
• Desde la ventana emergente que aparece, arrastre varios sub-bloques Else-If al bloque principal if-then
• También arrastre un subbloque Else al final de la lista

En el siguiente paso, comenzaremos a llenar estos espacios vacíos con pruebas y acciones, el corazón del programa.

Paso 4: prueba de coincidencias

La aplicación está escuchando comandos hablados y hay un marco para completar con pruebas en esos comandos de voz. Así que ahora, definamos las pruebas. Primero, le decimos a la computadora que pruebe si dos objetos son iguales, luego definimos el primer objeto como el comando de voz y el segundo como un fragmento de texto. Aquí solo crearemos una prueba, pero la misma técnica se utiliza para crear seis, diez o cien pruebas. Si la primera prueba coincide, el programa realiza una acción; de lo contrario, pasa a la siguiente prueba y así sucesivamente.

Crea una prueba de igualdad

• Haga clic en Lógica en la sección incorporada del menú de la izquierda
• Arrastre una prueba = (igual) al escenario

Establecer el primer elemento en el resultado de voz

• Haga clic en SpeechRecognizer en el menú de la izquierda
• Arrastre un bloque de resultados al escenario
• Conecte el SpeechRecognizer. Result en la ranura izquierda del bloque de prueba de Igualdad

Establecer segundo elemento en un bloque de texto

• Haga clic en Texto en la sección incorporada del menú de la izquierda
• Arrastre un bloque de campo de texto básico al escenario
• En ese bloque de texto, escriba la palabra que desea probar
• Conecte el bloque de texto en la ranura de la derecha del bloque de prueba de Igualdad

Coloque la prueba en el lugar correcto

• Ahora, conecte todo el bloque Equals-Test en la ranura IF del árbol de decisión
• En los siguientes pasos, asignaremos algunas acciones a realizar cuando la prueba sea verdadera.

EJEMPLO: Si el usuario dice "azul", el programa capturará esa palabra en un contenedor de "resultados". Luego, probará para ver si esa palabra de resultado (azul) coincide con la palabra que escribió dentro del bloque de texto. Si coincide, el programa ejecutará las acciones en la parte "entonces" del bloque (definiremos las acciones en los siguientes pasos). Si el comando de voz no coincide con el texto, el programa pasa a la siguiente prueba hasta que encuentra una coincidencia o llega a la sentencia else final "algo está mal".

NOTA: El comando de voz no tiene que ser un color. En el código de ejemplo usamos las palabras "oscuro" y "claro" para activar el blanco y negro. Podríamos usar fácilmente palabras como:

• Mamá / Papá / Billy / Suzy
• Feliz / Triste / Enojado / Hambriento
• Dormir / Estudiar / Transmitir / Fiesta

Paso 5: Proporcione comentarios verbales

Ahora necesitamos crear algunas acciones para cuando el comando de voz coincida con la prueba. Primero, le diremos al usuario para qué color el programa cree que ha encontrado una coincidencia.

Habla bloque haz lo tuyo

• Haga clic en el objeto TextTo Speech en el menú de la izquierda
• Arrastra un bloque Speak. Message al escenario

Escriba lo que quiere que diga

• Haga clic en el bloque de texto en la sección incorporada del menú de la izquierda
• Arrastre un bloque de texto en blanco básico al escenario
• Escribe la frase que quieres que diga

Ensamblar las piezas

• Conecte el bloque de texto completo en el bloque Speak. Message
• Enchufe el bloque de mensajes Speak. Message ensamblado en la ranura Then

Ahora, cuando el programa detecta una coincidencia con el comando de voz, el programa pronunciará la frase que acaba de

mecanografiado. Sea creativo si quiere:

• Bien dijo Fred, es rojo
• Boo hoo hoo, es azul
• Verde, ¿de verdad? Ese no es tu color, amigo.

Paso 6: establece el color del lienzo

Ahora, finalmente cambiaremos el color del lienzo para que coincida con el comando hablado.

Establecer el color de fondo del lienzo

• Haga clic en el objeto Canvas en el menú de la izquierda.
• Arrastre el bloque SetCanvasBackgroundColorTo al escenario

Seleccione una muestra de color

• Haga clic en el objeto Color en la sección Integrada del menú de la izquierda
• Arrastra una muestra de color al escenario.

Ensamblar las piezas

• Conecte la muestra de color en el bloque SetBackgroundColor
• Enchufe el bloque ensamblado en la ranura Entonces de la declaración Si-entonces (debajo del bloque de hablar)

Enjabonar, Enjuagar, Repetir

Probablemente sea un buen momento para probar cómo funciona el programa. Cárguelo en su dispositivo Android y pruébelo antes de duplicar los comandos 10 veces.

Ahora que sabe que el código básico funciona, duplique las pruebas y acciones para cada color que desee poder seleccionar.

Acaba de crear el marco básico del programa. Cuando el programa detecta una coincidencia para el comando de voz, pronunciará la frase designada y luego cambiará el color del lienzo a un color específico. También puede especificar valores RGB y alfa individuales, por lo que podría crear un comando como, más azul y menos rojo. También puede crear un comando para establecer un color aleatorio, hacer que los colores parpadeen y se desvanezcan o recorran el arco iris.

Paso 7: Detección de errores encontrados sin coincidencias

Pero, ¿qué pasa si el comando de voz no encuentra una coincidencia? ¿Se equivocó o estornudó en su lugar? Para eso es la declaración final de Else. Cuando todas las demás pruebas fallan, el programa ejecuta la acción en esta instrucción else. Crea esta declaración tal como lo hizo con las declaraciones anteriores (excepto que no se necesita ninguna prueba).

• Conecte un campo de texto en un bloque SpeakMessage y conéctelo a la última ranura else.
• Dígale al usuario: "Vaya, no sé lo que está tratando de decir. Vuelva a intentarlo".

Estas casi listo. Solo quedan unos pocos pasos más para dar ahora.

Paso 8: Iniciar el reconocimiento de voz manualmente

Una vez que se ha probado el comando de voz y se han tomado las acciones apropiadas, el programa deja de escuchar más comandos. Hay muchas formas de evitar esto, pero la mayoría son complicadas para los principiantes. Así que nos quedaremos con algo simple: toque la pantalla para que el programa comience a escucharse nuevamente.

• Haga clic en el objeto Canvas en el menú de la izquierda.
• Arrastre el bloque whenCanvasTouchDown al escenario (como un objeto separado, no dentro de ningún otro bloque)
• Haga clic en el objeto SpeechRecognizer en el menú de la izquierda.
• Arrastre un bloque callSpeechRecognizer. GetText al escenario y conéctelo al bloque whenCanvasTouchDown

Ahora, cada vez que se toca la pantalla, el programa comenzará a escuchar un comando de voz.

Paso 9: Aspecto del programa completo

Ya terminó: acaba de crear una aplicación Andoid controlada por voz que convierte su antiguo teléfono o tableta en una luz ambiental. Si tiene problemas para que funcione, descargue la versión de tamaño completo de la imagen en este paso. Esa imagen muestra el programa completo más algunos extras.

Pero como puede ver, todo el programa es realmente

• una llamada inicial
• una serie de pruebas y acciones
• luego un reinicio.

Este programa solo rasca la superficie de lo que puede hacer con MIT App Inventor. Hay muchos más comandos, e incluso los comandos que usamos en este proyecto tienen opciones que no hemos explorado. Tome este programa básico y constrúyalo para crear su propia luz ambiental, tablero de estado o panel de visualización personalizado.

Paso 10: extender y expandir

Bien, hagamos una cosa más, solo por diversión. En lugar de simplemente cambiar el color de la pantalla, mostremos una fotografía. También puede mostrar videos, páginas web o mensajes de texto. Juega y diviértete.

• Vuelva al modo Diseñador haciendo clic en el botón en la esquina superior derecha de la pantalla
• Haga clic en Lienzo en el menú de la izquierda.
• También haga clic en Lienzo en el menú Componentes (segundo panel desde la derecha)
• Esto abrirá el panel Propiedades para el lienzo.
• En el panel Propiedades (extremo derecho), haga clic en Imagen de fondo
• Cargar una foto usando el cuadro de diálogo emergente
• Volver al modo Bloques
• Agregue una declaración extra si-entonces
• Agregar una prueba para el comando de imagen
• Agregue un bloque setBackgroundImageTo al árbol de decisiones: use el nombre de la foto
• También agregue un setBackgroundImagePara el reinicio del bloque Touchdown: establezca el nombre en "none"

Y boom, ahora puedes cargar fotos y cambiar el color. Es posible que desee jugar con el tamaño de la imagen. O intente cargar un objeto de video. Puede dibujar formas en el lienzo o crear animaciones. Puede mostrar números, palabras, gráficos o hacer varios lienzos para varios elementos.

También puede crear programas para acceder a los sensores integrados de su teléfono. Puede conectarse a otras aplicaciones en su teléfono, conectarse a la web y extraer información de allí, y conectarse a otros dispositivos mediante Bluetooth o WiFi.

O use el IFTT increíblemente útil para que Alexa u otro asistente configure su panel de estado de ánimo o controle todos sus dispositivos antiguos.

Acaba de comenzar con MIT App Inventor, pero puede ver lo fácil y poderoso que es de usar. Así que explora y crea tu propio tablero de anuncios.

Paso 11: Estuches y revestimientos

Así que fue muy divertido programar una aplicación activada por voz. Pero todavía parece el mismo teléfono o tableta de siempre, un poco aburrido. ¿Por qué no agregar una funda o una funda al dispositivo para que se vea realmente hecho a medida? Solo hay algunas consideraciones a tener en cuenta:

Si cubre la pantalla, el material debe:

• Tenga suficientes agujeros para permitir que su dedo toque la pantalla
• O ser lo suficientemente conductivo para transmitir su toque a la superficie de la tableta

Buenas opciones son la tela de malla o el encaje. Ambos cambian el aspecto del teléfono, pero permiten que su piel entre en contacto con la pantalla. Algunos papeles delgados y plásticos tipo Mylar dejan pasar suficiente electricidad para registrar un toque.

• Si coloca un marco alrededor, asegúrese de dejar suficiente espacio para el cable de alimentación.
• Asegúrese de que el dispositivo esté montado de forma segura si lo coloca en la pared. Puede que sea antiguo y esté desactualizado, pero sigue funcionando, así que no lo rompa ahora que sabe cómo programarlo.

Pero este es un tema completamente diferente, digno y de clase completa e Instructable por sí solo. Y esa es una excelente manera de hacer que nuevos visitantes regresen a su espacio de creación. Así que asegúrese de decirles a todos: "Regresen para la segunda parte de la clase".

Hacer felices y ser excelentes el uno con el otro.