Mood Light Android controlado por voz: 11 etapas (com imagens)

2025 Autor: John Day | [email protected]. Última modificação: 2025-01-23 15:03

Eu precisava criar uma classe para nosso Grupo Maker local. Algo que garantiu mesmo aos visitantes de primeira viagem uma vitória definitiva e uma grande recompensa, sem confusão, sem confusão e sem ferramentas ou materiais especializados. Os alunos precisavam levar para casa algo funcional e divertido para mostrar aos amigos, fazer em uma tarde - e tinha que ser gratuito. (E espero trazê-los de volta para mais, ou para uma aula relacionada) Então eu criei este projeto.

Transforme seu telefone ou tablet antigo em uma luz de ambiente controlada por voz e quadro de status. GRATUITAMENTE!!! Fácil de fazer em uma tarde - NENHUMA EXPERIÊNCIA NECESSÁRIA (domingo, domingo, domingo)

Qualquer pessoa com um dispositivo Android e acesso a um computador pode programar um aplicativo controlado por voz em uma ou duas horas. Ele usa o MIT App Inventor gratuito, portanto, não há custo. Eles podem personalizá-lo facilmente e adicionar sua própria astúcia a uma capa ou caixa. E eles podem trazer a mesma coisa de volta para a aula e continuar expandindo e melhorando seus projetos por vários meses.

O projeto fornece um bom ponto de partida para a programação, mas não é o suficiente para realmente satisfazer - ele é projetado para trazer as pessoas de volta para a próxima aula. Mal, eu sei. Mas isso leva as pessoas ao Arduino, que leva ao Raspberry Pi, que leva à eletrônica e à soldagem. Se eles estão satisfeitos com o aplicativo básico e não querem programar mais, eles podem fazer um caso personalizado para ele quando voltarem ao Grupo Maker para aulas de tecido e costura, papel e desenho, carpintaria e moldura. fazer ou até mesmo design e impressão 3D.

Requisitos básicos

• Um telefone ou tablet Android antigo (atualmente 2.3 ou posterior)
• Acesso à internet
• Uma conta do App Inventor (grátis)
• De preferência, um computador com o navegador Chrome instalado

Preparação

Você precisa estar familiarizado com o programa App Inventor do MIT. Existem muitos Instructables sobre ele (alguns bastante avançados). Mas o melhor lugar para aprender o App Inventor é em seu site e em uma excelente série de tutoriais. A maioria das pessoas aprende os conceitos básicos em questão de minutos. Afinal, esta é a mesma loja que criou o ambiente de programação Scratch e o aplicativo de programação LEGO Mindstorms original. Se você for muito velho para saber sobre isso, peça ajuda a um filho em idade escolar local.

Se você está dando aula, provavelmente deve estar familiarizado com a maioria dos componentes e comandos. É quase certo que alguém na classe pedirá para fazer algo diferente do que é mostrado neste tutorial. Você pode seguir o script e fazer apenas o que é mostrado aqui. Mas percebi que obtemos uma taxa muito maior de visitantes recorrentes quando podemos ajudar todos a criar uma versão exclusiva com recursos "avançados" que eles podem mostrar aos amigos.

Portanto, familiarize-se com o básico e volte para um tutorial passo a passo.

Etapa 1: projetar e configurar

Crie uma tela

• No modo "Designer", vá para a paleta "Desenho e Animação".
• Arraste uma "Tela" para a tela.
• Defina a largura e altura da tela para "Preencher pai"
• Criaremos o código para alterar a cor da tela em etapas posteriores.

Criar reconhecimento de voz

• Na paleta "Media", arraste "SpeechRecognizer" para a tela.
• Este é o componente que ouvirá nossos comandos de voz.
• Iremos configurar este item mais tarde.

Criar capacidade de fala

• Também na paleta "Media", arraste um objeto "TextToSpeech" para a tela.
• Usaremos este componente para criar prompts falados para o usuário.
• Este item também será configurado posteriormente no tutorial.

Acabamos de instalar os componentes básicos do nosso aplicativo - tudo em alguns segundos. Agora vamos configurá-los e codificá-los. Para isso, precisamos mudar para o modo "Blocos". Olhe no canto superior direito da tela e clique no botão Blocos. Se você precisar voltar ao modo Designer, basta clicar no botão Designer.

Etapa 2: inicie o SpeechRecognizer

LEMBRE-SE: Mude para o modo "BLOCOS": certifique-se de alternar para o modo de bloqueio clicando no botão no canto superior direito da tela. Um novo conjunto de paletas aparecerá. Usaremos essas paletas e blocos para programar a luz ambiente.

Queremos começar a escutar os comandos assim que o aplicativo for aberto. Para fazer isso, "chamaremos" o objeto SpeechRecognizer quando a primeira tela "inicializar". AppInventor criou automaticamente uma "tela" para nós. Cada aplicativo tem pelo menos uma tela, alguns têm várias. Precisamos apenas do padrão.

Inicializar a tela

• Clique no objeto Tela no menu à esquerda.
• No menu suspenso, arraste o objeto "Quando a tela inicializada do" para o palco.

Inicie o Reconhecedor de Fala

• Clique no objeto "SpeechRecognizer" no menu à esquerda
• Arraste o objeto "chamar SpeechRecognizer getText" para o palco
• Conecte este comando dentro do bloco Tela Inicializada

Agora, o programa começa a escutar comandos de voz automaticamente (getText) assim que a primeira tela é carregada (inicializada). Em seguida, dizemos ao computador o que fazer ao ouvir comandos.

Etapa 3: Criação da árvore de decisão

O computador agora está ouvindo comandos de voz, então, em seguida, precisamos especificar o que fazer depois de ouvir certas palavras. Neste projeto, usaremos principalmente nomes de cores como Azul, Verde e Amarelo. Quando o computador ouvir essas palavras, ele mudará a cor do objeto Canvas.

Fazemos isso testando para ver se o comando de voz corresponde a alguma palavra que especificamos. Se o comando de voz corresponder a uma palavra predefinida, queremos que o computador execute certas ações - como alterar a cor da tela e fornecer algum feedback verbal. Se nenhuma correspondência for encontrada, precisamos informar ao usuário que algo deu errado.

Começamos criando um quadro em branco para conter todos os testes e ações.

O que fazer depois de receber um comando de voz

• Clique em SpeechRecognizer no menu esquerdo
• Arraste o bloco "After Getting Text" para o palco
• (Coloque o bloco diretamente no palco, NÃO dentro do bloco anterior)

Criar slots de teste

• Clique em Controle na seção Integrada do menu à esquerda
• Arraste um bloco de comando If-Then para o palco
• Conecte o bloco If-then dentro do bloco afterGettingText
• Clique no ícone de engrenagem azul no bloco If-then
• No pop-up que aparece, arraste vários sub-blocos Else-If para o bloco principal se-então
• Arraste também um sub-bloco Else para o final da lista

Na próxima etapa, começaremos a preencher esses espaços vazios com testes e ações - o coração do programa.

Etapa 4: teste de correspondências

O aplicativo está ouvindo comandos falados e há uma estrutura para preencher com testes nesses comandos de voz. Agora, vamos definir os testes. Primeiro, dizemos ao computador para testar se dois objetos são iguais, então definimos o primeiro objeto como o comando de voz e o segundo objeto como um pedaço de texto. Vamos criar apenas um teste aqui, mas a mesma técnica é usada para criar seis, dez ou cem testes. Se o primeiro teste for compatível, o programa executará uma ação; caso contrário, ele passará para o próximo teste e assim por diante.

Crie um teste de igualdade

• Clique em Logic na seção Built-In do menu esquerdo
• Arraste um teste = (igual a) para o palco

Defina o primeiro item para o resultado de voz

• Clique em SpeechRecognizer no menu esquerdo
• Arraste um bloco de resultado para o palco
• Conecte o SpeechRecognizer. Result no slot esquerdo do bloco de teste de igualdade

Defina o segundo item como um bloco de texto

• Clique em Texto na seção Embutida do menu esquerdo
• Arraste um bloco de campo de texto básico para o palco
• Nesse bloco de texto, digite a palavra que deseja testar
• Conecte o bloco de texto no slot direito do bloco de teste de igualdade

Coloque o teste no lugar certo

• Agora, conecte todo o bloco Equals-Test no slot IF da árvore de decisão
• Nas próximas etapas, iremos atribuir algumas ações a serem tomadas quando o teste for verdadeiro

EXEMPLO: Se o usuário disser "azul", o programa irá capturar essa palavra em uma caixa de "resultado". Em seguida, ele fará um teste para ver se a palavra-resultado (azul) corresponde à palavra que você digitou dentro do bloco de texto. Se corresponder, o programa executará as ações na parte "then" do bloco (definiremos as ações nas próximas etapas). Se o comando de voz não corresponder ao texto, o programa passa para o próximo teste até encontrar uma correspondência ou atingir a instrução else final "algo está errado".

NOTA: O comando de voz não precisa ser uma cor. No código de exemplo, usamos as palavras "escuro" e "claro" para ativar o preto e branco. Poderíamos facilmente usar palavras como:

• Mãe / Pai / Billy / Suzy
• Feliz / triste / zangado / faminto
• Dormindo / estudando / transmitindo / festa

Etapa 5: dê feedback verbal

Agora precisamos criar algumas ações para quando o comando de voz corresponder ao teste. Primeiro, diremos ao usuário para qual cor o programa acha que encontrou uma correspondência.

Fale Bloco Faça Sua Coisa

• Clique no objeto TextTo Speech no menu à esquerda
• Arraste um bloco Speak. Message para o palco

Digite o que você quer dizer

• Clique no bloco de texto na seção interna do menu esquerdo
• Arraste um bloco de texto em branco básico para o palco
• Digite a frase que você quer dizer

Monte as peças

• Conecte o bloco de texto preenchido no bloco Speak. Message
• Conecte o Speak. Messageblock montado no slot Then

Agora, quando o programa detectar uma correspondência com o comando de voz, ele falará a frase que você acabou de

digitado. Seja criativo se quiser:

• Fred disse direito, é vermelho
• Boo hoo hoo, é azul
• Verde, realmente? Essa não é a sua cor cara.

Etapa 6: definir a cor da tela

Agora, vamos finalmente mudar a cor da tela para corresponder ao comando falado.

Definir cor de fundo da tela

• Clique no objeto Canvas no menu esquerdo
• Arraste o bloco SetCanvasBackgroundColorTo para o palco

Selecione uma amostra de cor

• Clique no objeto Color na seção Built-in do menu esquerdo
• Arraste uma amostra de cor para o palco

Monte as peças

• Conecte a amostra de cor ao bloco SetBackgroundColor
• Conecte o bloco montado no slot Then da declaração If-then (abaixo do bloco speak)

Ensaboe, enxágue, repita

Este é provavelmente um bom momento para testar como o programa funciona. Carregue-o em seu dispositivo Android e teste-o antes de duplicar os comandos 10 vezes.

Agora que você sabe que o código básico funciona, duplique os testes e ações para cada cor que deseja poder selecionar.

Você acabou de criar a estrutura básica do programa. Quando o programa detecta uma correspondência para o comando de voz, ele falará a frase designada e, em seguida, mudará a cor da tela para uma cor especificada. Você também pode especificar valores RGB e alfa individuais, para que possa criar um comando como mais azul e menos vermelho. Você também pode criar um comando para definir uma cor aleatória, fazer com que as cores pulsem e desbotem ou percorra o arco-íris.

Etapa 7: captura de erros sem correspondência encontrada

Mas e se o comando de voz não encontrar uma correspondência - você errou ou espirrou em vez disso? É para isso que serve a declaração final de Else. Quando todos os outros testes falham, o programa executa a ação nesta instrução else. Você cria essa instrução exatamente como fez com as instruções anteriores (exceto que nenhum teste é necessário).

• Conecte um campo de texto em um bloco SpeakMessage e conecte-o no slot else final.
• Diga ao usuário que, "Ops, não sei o que você está tentando dizer - tente novamente."

Você está quase pronto. Existem apenas mais algumas etapas a serem executadas agora.

Etapa 8: Iniciando o Reconhecimento de Voz Manualmente

Assim que o comando de voz for testado e as ações apropriadas forem executadas, o programa para de ouvir mais comandos. Existem muitas maneiras de contornar isso, mas a maioria é complicada para iniciantes. Portanto, vamos ficar com algo simples - toque na tela para fazer o programa começar a ouvir novamente.

• Clique no objeto Canvas no menu esquerdo
• Arraste o bloco whenCanvasTouchDown para o palco (como um objeto separado, não dentro de qualquer outro bloco)
• Clique no objeto SpeechRecognizer no menu esquerdo
• Arraste um bloco callSpeechRecognizer. GetText para o palco e conecte-o ao bloco whenCanvasTouchDown

Agora, sempre que a tela for tocada, o programa começará a ouvir um comando de voz.

Etapa 9: Qual é a aparência do programa completo

Pronto - você acabou de criar um aplicativo Andoid controlado por voz que transforma seu antigo telefone ou tablet em uma luz do ambiente. Se você estiver tendo problemas para fazê-lo funcionar, baixe a versão em tamanho real da imagem nesta etapa. Essa imagem mostra todo o programa mais alguns extras.

Mas como você pode ver, todo o programa é realmente apenas

• uma chamada inicial
• uma série de testes e ações
• em seguida, um reinício.

Este programa apenas arranha a superfície do que você pode fazer com o MIT App Inventor. Existem muitos mais comandos, e até mesmo os comandos que usamos neste projeto têm opções que não exploramos. Pegue este programa básico e desenvolva-o para fazer sua própria luz de ambiente, quadro de status ou painel de exibição personalizados.

Etapa 10: estender e expandir

Ok, vamos fazer mais uma coisa, apenas por diversão. Em vez de apenas mudar a cor da tela, vamos mostrar uma fotografia. Você também pode exibir vídeos, páginas da web ou mensagens de texto. Brinque e divirta-se.

• Volte para o modo Designer clicando no botão no canto superior direito da tela
• Clique na tela no menu à esquerda
• Clique também em Tela no menu Componentes (segundo painel da direita)
• Isso abrirá o painel Propriedades para o Canvas
• No painel Propriedades (extrema direita), clique em Imagem de fundo
• Carregar uma foto usando a caixa de diálogo pop-up
• Volte para o modo Blocos
• Adicionar uma declaração extra if-then
• Adicione um teste para o comando de imagem
• Adicione um bloco setBackgroundImageTo à árvore de decisão - use o nome da foto
• Também adicione um setBackgroundImageTo ao bloco Touchdown de reinicialização - defina o nome como "nenhum"

E pronto, agora você pode carregar fotos e também alterar a cor. Você pode querer brincar com o tamanho da imagem. Ou tente carregar em um objeto de vídeo. Você pode desenhar formas na tela ou criar animações. Você pode exibir números, palavras, gráficos - ou fazer várias telas para vários itens.

Você também pode criar programas para acessar os sensores integrados do telefone. Você pode se conectar a outros aplicativos em seu telefone, conectar-se à web e obter informações de lá e conectar-se a outros dispositivos usando Bluetooth ou WiFi.

Ou use o IFTT incrivelmente útil para fazer Alexa ou outro assistente definir seu quadro de humor ou controlar todos os seus dispositivos antigos.

Você acabou de começar com o MIT App Inventor, mas pode ver como é fácil e poderoso de usar. Portanto, explore e crie seu próprio painel de exibição.

Etapa 11: Casos e coberturas

Então foi muito divertido programar um aplicativo ativado por voz. Mas ainda parece o mesmo velho telefone ou tablet - meio chato. Por que não adicionar uma cobertura ou capa ao dispositivo para torná-lo realmente personalizado. Existem apenas algumas considerações a serem levadas em consideração:

Se você cobrir a tela, o material deve:

• Tem orifícios suficientes para permitir que seu dedo toque na tela
• Ou seja condutor o suficiente para transmitir seu toque à superfície do tablet

Boas opções são tecido de malha ou renda. Ambos mudam a aparência do telefone, mas permitem que sua pele entre em contato com a tela. Alguns papéis finos e plásticos do tipo Mylar deixam passar eletricidade suficiente para serem registrados como um toque.

• Se você colocar uma moldura ao redor dele, certifique-se de deixar espaço suficiente para o cabo de alimentação.
• Certifique-se de que o dispositivo esteja montado com segurança se você colocá-lo na parede. Pode ser antigo e desatualizado, mas ainda está funcionando - então não o interrompa agora que você sabe como programá-lo.

Mas este é um assunto totalmente diferente, valioso e classe completa e instrutível por si só. E essa é uma ótima maneira de trazer novos visitantes de volta ao seu makerpace. Portanto, certifique-se de dizer a todos: "Voltem para a segunda parte da aula".

Feliz fazer e ser excelente um para o outro.