Lumière d'ambiance Android à commande vocale : 11 étapes (avec photos)

2024 Auteur: John Day | [email protected]. Dernière modifié: 2024-01-30 09:09

J'avais besoin de créer une classe pour notre groupe Maker local. Quelque chose qui garantissait même aux visiteurs novices une victoire définitive et une grande récompense sans aucun problème, sans tracas et sans outils ou matériaux spécialisés. Les étudiants devaient ramener à la maison quelque chose à la fois fonctionnel et amusant qu'ils pouvaient montrer à leurs amis, le faire en un après-midi - et cela devait être gratuit. (Et si tout va bien les ramener pour plus, ou pour une classe connexe) J'ai donc créé ce projet.

Transformez votre ancien téléphone ou tablette en une lumière d'ambiance et un tableau d'état à commande vocale. LIBRE!!! Facile à faire en un après-midi - AUCUNE EXPÉRIENCE REQUISE (dimanche, dimanche dimanche)

Toute personne possédant un appareil Android et ayant accès à un ordinateur peut programmer une application à commande vocale en une heure ou deux. Il utilise l'application gratuite MIT App Inventor, il n'y a donc aucun coût. Ils peuvent facilement le personnaliser, puis ajouter leur propre astuce à un revêtement ou à un étui. Et ils peuvent ramener la même chose en classe et continuer à développer et à améliorer leurs projets pendant plusieurs mois.

Le projet fournit un bon point de départ pour la programmation, mais n'est pas tout à fait suffisant pour vraiment satisfaire - il est conçu pour ramener les gens pour le prochain cours. Mal, je sais. Mais cela mène les gens à Arduino, qui mène à Raspberry Pi, qui mène à l'électronique et à la soudure. S'ils sont satisfaits de l'application de base et ne veulent plus programmer, ils peuvent en faire un cas personnalisé lorsqu'ils reviennent au Maker Group pour des cours sur le tissu et la couture, le papier et le dessin, la menuiserie et le cadre. fabrication ou même conception et impression 3D.

Exigences de base

• Un ancien téléphone ou tablette Android (actuellement 2.3 ou version ultérieure)
• Accès Internet
• Un compte App Inventor (gratuit)
• De préférence, un ordinateur avec le navigateur Chrome installé

Préparation

Vous devez connaître le programme App Inventor du MIT. Il existe de nombreux Instructables à ce sujet (certains assez avancés). Mais le meilleur endroit pour apprendre App Inventor est sur leur site Web et une excellente série de didacticiels. La plupart des gens apprennent les concepts de base en quelques minutes. Après tout, c'est le même magasin qui a créé l'environnement de programmation Scratch et l'application de programmation LEGO Mindstorms originale. Si vous êtes trop vieux pour les connaître, demandez à votre enfant d'âge scolaire local de vous aider.

Si vous enseignez la classe, vous devriez probablement être familiarisé avec la plupart des composants et des commandes. Quelqu'un dans la classe est presque assuré de demander à faire quelque chose de différent de ce qui est montré dans ce didacticiel. Vous pouvez vous en tenir au script et ne faire que ce qui est montré ici. Mais j'ai remarqué que nous obtenons un taux de visiteurs récurrents beaucoup plus élevé lorsque nous pouvons aider tout le monde à créer une version unique avec des fonctionnalités "avancées" qu'ils peuvent montrer à leurs amis.

Alors familiarisez-vous avec les bases, puis revenez pour un tutoriel étape par étape.

Étape 1: Conception et configuration

Créer une toile

• En mode "Designer", allez dans la palette "Dessin et animation".
• Faites glisser un "Canevas" à l'écran.
• Définissez la largeur et la hauteur de la toile sur "Remplir le parent"
• Nous allons créer le code pour changer la couleur de la toile dans les étapes ultérieures.

Créer une reconnaissance vocale

• Depuis la palette "Médias", faites glisser "SpeechRecognizer" sur l'écran.
• C'est le composant qui écoutera nos commandes vocales.
• Nous configurerons cet élément plus tard.

Créer une capacité vocale

• Également à partir de la palette "Médias", faites glisser un objet "TextToSpeech" sur l'écran.
• Nous utiliserons ce composant pour créer des invites vocales pour l'utilisateur.
• Cet élément sera également configuré plus tard dans le didacticiel.

Nous venons d'installer les composants de base de notre application - le tout en quelques secondes. Passons maintenant à leur configuration et à leur codage. Pour cela, nous devons passer en mode "Blocs". Regardez dans le coin supérieur droit de l'écran et cliquez sur le bouton Blocs. Si vous devez revenir en mode Designer, cliquez simplement sur le bouton Designer.

Étape 2: Démarrer le SpeechRecognizer

RAPPELEZ-VOUS: Passer en mode « BLOCS »: Assurez-vous de passer en mode bloc en cliquant sur le bouton dans le coin supérieur droit de l'écran. Un nouvel ensemble de palettes apparaîtra. Nous utiliserons ces palettes et blocs pour programmer la lumière d'ambiance.

Nous voulons commencer à écouter les commandes dès que l'application s'ouvre. Pour ce faire, nous allons "appeler" l'objet SpeechRecognizer lorsque le premier écran "s'initialise". AppInventor a automatiquement créé un "écran" pour nous. Chaque application a au moins un écran, certaines en ont plusieurs. Nous n'avons besoin que de celui par défaut.

Initialiser l'écran

• Cliquez sur l'objet Écran dans le menu de gauche.
• Dans le menu déroulant, faites glisser l'objet "Lorsque l'écran est initialisé faire" sur la scène.

Démarrer la reconnaissance vocale

• Cliquez sur l'objet "SpeechRecognizer" dans le menu de gauche
• Faites glisser l'objet "call SpeechRecognizer getText" sur la scène
• Branchez cette commande dans le bloc Screen Initialized

Désormais, le programme commence automatiquement à écouter les commandes vocales (getText) dès que le premier écran se charge (s'initialise). Ensuite, nous disons à l'ordinateur quoi faire lorsqu'il entend des commandes.

Étape 3: Création de l'arbre de décision

L'ordinateur écoute maintenant les commandes vocales. Ensuite, nous devons spécifier ce qu'il faut faire après avoir entendu certains mots. Dans ce projet, nous utiliserons principalement des noms de couleurs comme le bleu, le vert et le jaune. Lorsque l'ordinateur entend ces mots, il change la couleur de l'objet Canvas.

Pour ce faire, nous testons pour voir si la commande vocale correspond aux mots que nous avons spécifiés. Si la commande vocale correspond à un mot prédéfini, nous voulons que l'ordinateur entreprenne certaines actions - comme changer la couleur de la toile et donner des commentaires verbaux. Si aucune correspondance n'est trouvée, nous devons dire à l'utilisateur que quelque chose s'est mal passé.

Nous commençons par créer un cadre vierge pour contenir tous les tests et actions.

Que faire après avoir obtenu une commande vocale

• Cliquez sur SpeechRecognizer dans le menu de gauche
• Faites glisser le bloc « Après avoir obtenu du texte » sur la scène
• (Placez le bloc directement sur la scène, PAS à l'intérieur du bloc précédent)

Créer des créneaux de test

• Cliquez sur Contrôle dans la section Intégré du menu de gauche
• Faites glisser un bloc de commande If-Then sur la scène
• Branchez le bloc If-then dans le bloc afterGettingText
• Cliquez sur l'icône d'engrenage bleu sur le bloc Si-alors
• Dans la fenêtre contextuelle qui apparaît, faites glisser plusieurs sous-blocs Else-If dans le bloc principal if-then
• Faites également glisser un sous-bloc Else à la fin de la liste

Dans la prochaine étape, nous commencerons à remplir ces emplacements vides avec des tests et des actions - le cœur du programme.

Étape 4: Tester les correspondances

L'application écoute les commandes vocales et il existe un cadre à remplir avec des tests sur ces commandes vocales. Alors maintenant, définissons les tests. Tout d'abord, nous demandons à l'ordinateur de tester si deux objets sont égaux, puis définissons le premier objet comme commande vocale et le deuxième objet comme texte. Nous ne créerons ici qu'un seul test, mais la même technique est utilisée pour créer six, dix ou cent tests. Si le premier test correspond, le programme entreprend une action, sinon il passe au test suivant et ainsi de suite.

Créer un test d'égalité

• Cliquez sur Logique dans la section Intégré du menu de gauche
• Faites glisser un test = (égal) sur la scène

Définir le premier élément sur le résultat vocal

• Cliquez sur SpeechRecognizer dans le menu de gauche
• Faites glisser un bloc de résultats sur la scène
• Branchez le SpeechRecognizer. Result dans la fente de gauche du bloc de test Equality

Définir le deuxième élément sur un bloc de texte

• Cliquez sur Texte dans la section Intégré du menu de gauche
• Faites glisser un bloc de champ de texte de base sur la scène
• Dans ce bloc de texte, saisissez le mot que vous souhaitez tester
• Branchez le bloc de texte dans l'emplacement de droite du bloc de test d'égalité

Mettez le test au bon endroit

• Maintenant, branchez l'intégralité du bloc Equals-Test dans le slot IF de l'arbre de décision
• Dans les prochaines étapes, nous assignerons certaines actions à effectuer lorsque le test est vrai

EXEMPLE: Si l'utilisateur dit « bleu », le programme capturera ce mot dans un bac « résultat ». Ensuite, il testera si ce mot de résultat (bleu) correspond au mot que vous avez tapé dans le bloc de texte. Si cela correspond, le programme exécutera alors les actions dans la partie "alors" du bloc (nous définirons les actions dans les étapes suivantes). Si la commande vocale ne correspond pas au texte, le programme passe au test suivant jusqu'à ce qu'il trouve une correspondance ou atteigne l'instruction else finale "quelque chose ne va pas".

REMARQUE: La commande vocale ne doit pas nécessairement être une couleur. Dans l'exemple de code, nous utilisons les mots "sombre" et "clair" pour déclencher le noir et blanc. On pourrait tout aussi bien utiliser des mots comme:

• Maman/Papa/Billy/Suzy
• Heureux/Triste/Fâché/Faim
• Dormir/Étudier/Diffusion/Fête

Étape 5: Donnez une rétroaction verbale

Nous devons maintenant créer des actions lorsque la commande vocale correspond au test. Tout d'abord, nous dirons à l'utilisateur pour quelle couleur le programme pense avoir trouvé une correspondance.

Parle Bloque Fais ton truc

• Cliquez sur l'objet TextTo Speech dans le menu de gauche
• Faites glisser un bloc Speak. Message sur la scène

Tapez ce que vous voulez qu'il dise

• Cliquez sur le bloc de texte dans la section intégrée du menu de gauche
• Faites glisser un bloc de texte vierge de base sur la scène
• Tapez la phrase que vous voulez qu'il dise

Assembler les pièces

• Branchez le bloc de texte rempli sur le bloc Speak. Message
• Branchez le Speak. Messageblock assemblé dans le slot Then

Maintenant, lorsque le programme détecte une correspondance avec la commande vocale, le programme prononcera la phrase que vous venez de

tapé. Soyez créatif si vous le souhaitez:

• C'est vrai, dit Fred, c'est rouge
• Boo hoo hoo, c'est bleu
• Vert, vraiment ? Ce n'est pas ta couleur mec.

Étape 6: définir la couleur de la toile

Maintenant, nous allons enfin changer la couleur du canevas pour qu'elle corresponde à la commande vocale.

Définir la couleur d'arrière-plan de la toile

• Cliquez sur l'objet Toile dans le menu de gauche
• Faites glisser le bloc SetCanvasBackgroundColorTo vers la scène

Sélectionnez un échantillon de couleur

• Cliquez sur l'objet Couleur dans la section Intégré du menu de gauche
• Faites glisser un échantillon de couleur sur la scène

Assembler les pièces

• Branchez l'échantillon de couleur dans le bloc SetBackgroundColor
• Branchez le bloc assemblé dans l'emplacement Then de l'instruction If-then (sous le bloc de parole)

Faire mousser, rincer, répéter

C'est probablement le bon moment pour tester le fonctionnement du programme. Chargez-le sur votre appareil Android et testez-le avant de dupliquer les commandes 10 fois.

Maintenant que vous savez que le code de base fonctionne, dupliquez les tests et actions pour chaque couleur que vous souhaitez pouvoir sélectionner.

Vous venez de créer le cadre de base du programme. Lorsque le programme détecte une correspondance pour la commande vocale, il prononce la phrase désignée, puis change la couleur de la toile en une couleur spécifiée. Vous pouvez également spécifier des valeurs RVB et alpha individuelles, de sorte que vous puissiez créer une commande comme, plus de bleu et moins de rouge. Vous pouvez également créer une commande pour définir une couleur aléatoire, faire clignoter les couleurs et s'estomper ou parcourir l'arc-en-ciel.

Étape 7: détecter les erreurs sans correspondance trouvées

Mais que se passe-t-il si la commande vocale ne trouve pas de correspondance - vous vous êtes mal exprimé ou avez éternué à la place ? C'est à cela que sert la déclaration finale d'Else. Lorsque tous les autres tests échouent, le programme exécute l'action dans cette instruction else. Vous créez cette instruction comme vous l'avez fait pour les instructions précédentes (sauf qu'aucun test n'est nécessaire).

• Branchez un champ de texte dans un bloc SpeakMessage et branchez-le dans le dernier emplacement else.
• Dites à l'utilisateur: « Oups, je ne sais pas ce que vous essayez de dire. Veuillez réessayer. »

Tu as presque fini. Il ne reste plus que quelques étapes à franchir maintenant.

Étape 8: Démarrage manuel de la reconnaissance vocale

Une fois que la commande vocale a été testée et que les actions appropriées ont été entreprises, le programme arrête d'écouter d'autres commandes. Il existe de nombreuses façons de contourner cela, mais la plupart sont compliquées pour les débutants. Nous allons donc nous en tenir à quelque chose de simple - touchez l'écran pour que le programme recommence à écouter.

• Cliquez sur l'objet Toile dans le menu de gauche
• Faites glisser le bloc whenCanvasTouchDown sur la scène (en tant qu'objet séparé, pas à l'intérieur d'un autre bloc)
• Cliquez sur l'objet SpeechRecognizer dans le menu de gauche
• Faites glisser un bloc callSpeechRecognizer. GetText sur scène et branchez-le dans le bloc whenCanvasTouchDown

Maintenant, chaque fois que l'écran est touché, le programme commencera à écouter une commande vocale.

Étape 9: À quoi ressemble le programme complet

Vous avez terminé - vous venez de créer une application Android à commande vocale qui transforme votre ancien téléphone ou tablette en une lumière d'ambiance. Si vous rencontrez des difficultés pour le faire fonctionner, téléchargez la version pleine taille de l'image à cette étape. Cette image montre l'ensemble du programme plus quelques extras.

Mais comme vous pouvez le voir, l'ensemble du programme est vraiment juste

• un appel de départ
• une série de tests et d'actions
• puis un redémarrage.

Ce programme ne fait qu'effleurer la surface de ce que vous pouvez faire avec MIT App Inventor. Il y a beaucoup plus de commandes, et même les commandes que nous avons utilisées dans ce projet ont des options que nous n'avons pas explorées. Prenez ce programme de base et construisez-le pour créer votre propre éclairage d'ambiance, tableau d'état ou panneau d'affichage personnalisé.

Étape 10: Extension et extension

D'accord, faisons encore une chose, juste pour le plaisir. Au lieu de simplement changer la couleur de l'écran, montrons une photo. Vous pouvez également afficher des vidéos, des pages Web ou des messages texte. Jouez et amusez-vous.

• Revenez au mode Designer en cliquant sur le bouton dans le coin supérieur droit de l'écran
• Cliquez sur Toile dans le menu de gauche
• Cliquez également sur Canvas dans le menu Composants (deuxième panneau à partir de la droite)
• Cela fera apparaître le panneau Propriétés pour le canevas
• Dans le panneau Propriétés (à l'extrême droite), cliquez sur Image d'arrière-plan
• Charger une photo à l'aide de la boîte de dialogue contextuelle
• Revenir en mode Blocs
• Ajouter une instruction if-then supplémentaire
• Ajouter un test pour la commande image
• Ajoutez un bloc setBackgroundImageTo à l'arbre de décision - utilisez le nom de la photo
• Ajoutez également un setBackgroundImageAu bloc de redémarrage Touchdown - définissez le nom sur "aucun"

Et boum, maintenant vous pouvez charger des photos ainsi que changer la couleur. Vous voudrez peut-être jouer avec la taille de l'image. Ou essayez de charger dans un objet vidéo. Vous pouvez dessiner des formes sur le canevas ou créer des animations. Vous pouvez afficher des nombres, des mots, des graphiques - ou créer plusieurs toiles pour plusieurs éléments.

Vous pouvez également créer des programmes pour accéder aux capteurs intégrés de votre téléphone. Vous pouvez vous connecter à d'autres applications sur votre téléphone, vous connecter au Web et y extraire des informations, et vous connecter à d'autres appareils via Bluetooth ou WiFi.

Ou utilisez l'IFTT incroyablement pratique pour obtenir Alexa ou un autre assistant pour définir votre moodboard, ou contrôler tous vos anciens appareils.

Vous venez de commencer avec MIT App Inventor, mais vous pouvez voir à quel point il est facile et puissant à utiliser. Alors partez à la découverte et créez votre propre tableau d'affichage.

Étape 11: Étuis et revêtements

C'était donc très amusant de programmer une application à commande vocale. Mais il ressemble toujours au même vieux téléphone ou tablette - un peu ennuyeux. Pourquoi ne pas ajouter un revêtement ou un étui à l'appareil pour lui donner un aspect vraiment personnalisé. Il n'y a que quelques considérations à prendre en compte:

Si vous couvrez l'écran, le matériel doit:

• Avoir suffisamment de trous pour permettre à votre doigt de toucher l'écran
• Ou être suffisamment conducteur pour transmettre votre toucher à la surface de la tablette

Les bonnes options sont le tissu en maille ou la dentelle. Ils changent tous les deux l'apparence du téléphone, mais permettent à votre peau d'entrer en contact avec l'écran. Certains papiers fins et plastiques de type Mylar laissent passer suffisamment d'électricité pour s'enregistrer comme un toucher.

• Si vous placez un cadre autour, assurez-vous de laisser suffisamment de place pour le cordon d'alimentation.
• Assurez-vous que l'appareil est solidement fixé si vous le placez sur le mur. Il est peut-être ancien et obsolète, mais il fonctionne toujours - alors ne le cassez pas maintenant que vous savez comment le programmer.

Mais il s'agit d'un sujet entièrement différent, d'une valeur et d'une classe complète et instructable tout seul. Et c'est un excellent moyen de ramener de nouveaux visiteurs dans votre makerspace. Assurez-vous donc de leur dire à tous de « Revenez pour la deuxième partie du cours ».

Bonne fabrication et soyez excellents les uns envers les autres.