Stemgestuurde Android Mood Light - Ajarnpa

2025 Auteur: John Day | [email protected]. Laatst gewijzigd: 2025-01-23 15:01

Ik moest een klas maken voor onze lokale Maker Group. Iets dat zelfs nieuwe bezoekers een duidelijke overwinning en grote beloning garandeerde zonder poespas, geen gedoe en geen gespecialiseerd gereedschap of materiaal. De studenten moesten iets functioneels en leuks mee naar huis nemen dat ze aan hun vrienden konden laten zien, in één middag doen - en het moest gratis zijn. (En hopelijk breng ik ze terug voor meer, of voor een verwante klas) Dus ik heb dit project gemaakt.

Verander je oude telefoon of tablet in een spraakgestuurd sfeerlicht en statusbord. VRIJ!!! Makkelijk te doen in één middag - GEEN ERVARING VEREIST (zondag, zondag zondag)

Iedereen met een Android-apparaat en toegang tot een computer kan binnen een uur of twee een spraakgestuurde applicatie programmeren. Het maakt gebruik van de gratis MIT App Inventor, dus er zijn geen kosten aan verbonden. Ze kunnen het gemakkelijk aanpassen en vervolgens hun eigen sluwheid toevoegen aan een hoes of hoes. En ze kunnen hetzelfde terugbrengen naar de klas en hun projecten enkele maanden blijven uitbreiden en verbeteren.

Het project biedt een goede startplaats voor programmeren, maar is niet voldoende om echt tevreden te zijn - het is ontworpen om mensen terug te brengen voor de volgende les. Kwaad, ik weet het. Maar het leidt mensen naar Arduino, wat leidt tot Raspberry Pi, wat leidt tot elektronica en solderen. Als ze tevreden zijn met de basis-app en niet meer willen programmeren, kunnen ze er een op maat gemaakte case voor maken als ze terugkomen naar de Maker Group voor lessen over stof en naaien, papier en tekenen, houtbewerking en frame- maken of zelfs 3D-ontwerp en printen.

Basis benodigdheden

• Een oude Android-telefoon of -tablet (momenteel 2.3 of hoger)
• Internet toegang
• Een App Inventor-account (gratis)
• Bij voorkeur een computer waarop de Chrome-browser is geïnstalleerd

Voorbereiding

Je moet wel bekend zijn met het App Inventor-programma van MIT. Er zijn tal van Instructables over (sommige behoorlijk geavanceerd). Maar de beste plaats om App Inventor te leren, is op hun website en uitstekende reeks tutorials. De meeste mensen leren de basisconcepten binnen enkele minuten. Dit is tenslotte dezelfde winkel die de Scratch-programmeeromgeving en de originele LEGO Mindstorms programmeer-app heeft gemaakt. Als u te oud bent om hiervan op de hoogte te zijn, vraag dan uw plaatselijke schoolgaande kind om u te helpen.

Als u de klas lesgeeft, moet u waarschijnlijk bekend zijn met de meeste componenten en opdrachten. Iemand in de klas zal bijna zeker vragen om iets anders te doen dan wat in deze tutorial wordt getoond. Je kunt je aan het script houden en alleen doen wat hier wordt getoond. Maar ik heb gemerkt dat we een veel hoger percentage terugkerende bezoekers krijgen als we iedereen kunnen helpen een unieke versie te maken met 'geavanceerde' functies die ze aan hun vrienden kunnen laten zien.

Maak uzelf dus vertrouwd met de basisprincipes en kom dan terug voor een stapsgewijze zelfstudie.

Stap 1: Ontwerp en installatie

Maak een canvas

• Ga in de modus "Ontwerper" naar het palet "Tekenen en animaties".
• Sleep een "Canvas" naar het scherm.
• Stel de breedte en hoogte van het canvas in op "Vul ouder"
• We zullen de code maken om de kleur van het canvas in latere stappen te wijzigen.

Spraakherkenning maken

• Sleep vanuit het "Media"-palet "SpeechRecognizer" naar het scherm.
• Dit is het onderdeel dat luistert naar onze spraakopdrachten.
• We zullen dit item later configureren.

Spraakmogelijkheid creëren

• Sleep ook vanuit het "Media"-palet een "TextToSpeech"-object naar het scherm.
• We zullen dit onderdeel gebruiken om gesproken aanwijzingen voor de gebruiker te maken.
• Dit item wordt ook later in de zelfstudie geconfigureerd.

We hebben zojuist de basiscomponenten voor onze app geïnstalleerd - allemaal in een paar seconden. Nu gaan we verder met het configureren en coderen ervan. Daarvoor moeten we overschakelen naar de modus "Blocks". Kijk in de rechterbovenhoek van het scherm en klik op de knop Blokken. Als u terug wilt naar de Designer-modus, klikt u gewoon op de Designer-knop.

Stap 2: Start de SpeechRecognizer

DENK ERAAN: Schakel over naar de "BLOKKEN"-modus: Zorg ervoor dat u overschakelt naar de blokkeermodus door op de knop in de rechterbovenhoek van het scherm te klikken. Er verschijnt een nieuwe set paletten. Deze paletten en blokken gaan we gebruiken om het sfeerlicht te programmeren.

We willen beginnen met luisteren naar opdrachten zodra de applicatie wordt geopend. Om dat te doen zullen we het SpeechRecognizer-object "aanroepen" wanneer het eerste scherm "initialiseert". AppInventor heeft automatisch een "scherm" voor ons aangemaakt. Elke app heeft minstens één scherm, sommige hebben er meerdere. We hebben alleen de standaard nodig.

Initialiseer het scherm

• Klik op het object Scherm in het linkermenu.
• Sleep vanuit het uitklapmenu het object "When Screen Initialized do" naar het werkgebied.

Start de spraakherkenning

• Klik op het object "SpeechRecognizer" in het linkermenu
• Sleep het object "call SpeechRecognizer getText" naar het werkgebied
• Steek deze opdracht in het blok Scherm geïnitialiseerd

Nu begint het programma automatisch te luisteren naar spraakopdrachten (getText) zodra het eerste scherm wordt geladen (initialiseert). Vervolgens vertellen we de computer wat hij moet doen als hij commando's hoort.

Stap 3: De beslissingsboom maken

De computer luistert nu naar spraakopdrachten, dus vervolgens moeten we specificeren wat we moeten doen nadat hij bepaalde woorden heeft gehoord. In dit project zullen we meestal kleurnamen gebruiken zoals blauw, groen en geel. Wanneer de computer die woorden hoort, verandert de kleur van het Canvas-object.

We doen dit door te testen of de spraakopdracht overeenkomt met de woorden die we hebben opgegeven. Als het spraakcommando overeenkomt met een vooraf gedefinieerd woord, willen we dat de computer bepaalde acties onderneemt - zoals de canvaskleur wijzigen en wat verbale feedback geven. Als er geen overeenkomst wordt gevonden, moeten we de gebruiker vertellen dat er iets mis is gegaan.

We beginnen met het maken van een leeg kader voor alle tests en acties.

Wat te doen nadat u een spraakopdracht hebt gekregen

• Klik op de SpeechRecognizer in het linkermenu
• Sleep het blok "Na het ophalen van tekst" naar het werkgebied
• (Plaats het blok rechtstreeks op het podium, NIET in het vorige blok)

Testslots maken

• Klik op Control in het gedeelte Ingebouwd van het linkermenu
• Sleep een Als-Dan-opdrachtblok naar het werkgebied
• Steek het If-then-blok in het afterGettingText-blok
• Klik op het blauwe tandwielpictogram op het Als-dan-blok
• Sleep vanuit de pop-up die verschijnt verschillende Else-If-subblokken naar het hoofd if-then-blok
• Sleep ook een Else-subblok naar het einde van de lijst

In de volgende stap zullen we beginnen deze lege slots te vullen met tests en acties - het hart van het programma.

Stap 4: Test op overeenkomsten

De applicatie luistert naar gesproken commando's en er is een raamwerk om te vullen met tests voor die spraakopdrachten. Laten we nu de tests definiëren. Eerst vertellen we de computer om te testen of twee objecten gelijk zijn, definiëren dan het eerste object als de spraakopdracht en het tweede object als een stuk tekst. We zullen hier slechts één test maken, maar dezelfde techniek wordt gebruikt om zes of tien of honderd tests te maken. Als de eerste test een overeenkomst is, voert het programma een actie uit, anders gaat het naar de volgende test, enzovoort.

Een gelijkheidstest maken

• Klik op Logica in het gedeelte Ingebouwd van het linkermenu
• Sleep een = (is gelijk aan) toets naar het werkgebied

Stel het eerste item in op het spraakresultaat

• Klik op de SpeechRecognizer in het linkermenu
• Sleep een resultaatblok naar het werkgebied
• Sluit de SpeechRecognizer. Result aan op de linkersleuf van het testblok Gelijkheid

Tweede item instellen op een tekstblok

• Klik op Tekst in het ingebouwde gedeelte van het linkermenu
• Sleep een basistekstveldblok naar het werkgebied
• Typ in dat tekstblok het woord waarop u wilt testen
• Steek het tekstblok in de rechter gleuf van het Gelijkheidstestblok

Zet de test op de juiste plaats

• Sluit nu het hele gelijk-test-blok aan op de IF-sleuf van de beslissingsboom
• In de volgende stappen zullen we enkele acties toewijzen die moeten worden genomen wanneer de test waar is

VOORBEELD: Als de gebruiker "blauw" zegt, zal het programma dat woord vastleggen in een "resultaat"-bak. Vervolgens wordt getest of dat resultaatwoord (blauw) overeenkomt met het woord dat u in het tekstblok hebt getypt. Als het overeenkomt, voert het programma de acties uit in het "toen"-gedeelte van het blok (we zullen de acties in de volgende stappen definiëren). Als het spraakcommando niet overeenkomt met de tekst, gaat het programma verder met de volgende test totdat het wel een overeenkomst vindt of de "er is iets mis" laatste else-statement bereikt.

OPMERKING: De spraakopdracht hoeft geen kleur te zijn. In de voorbeeldcode gebruiken we de woorden "donker" en "licht" om zwart-wit te activeren. We kunnen net zo goed woorden gebruiken als:

• Mama/Papa/Billy/Suzy
• Blij/Verdrietig/Boos/Honger
• Slapen/studeren/uitzending/feestje

Stap 5: Geef verbale feedback

Nu moeten we enkele acties maken voor wanneer de spraakopdracht overeenkomt met de test. Eerst zullen we de gebruiker vertellen voor welke kleur het programma denkt een match te hebben gevonden.

Spreek blok doe je ding

• Klik op het TextTo Speech-object in het linkermenu
• Sleep een Speak. Message-blok naar het podium

Typ wat je wilt dat het zegt

• Klik op het tekstblok in het ingebouwde gedeelte van het linkermenu
• Sleep een standaard leeg tekstblok naar het werkgebied
• Typ de zin die u wilt dat het zegt

Monteer de onderdelen

• Sluit het ingevulde tekstblok aan op het Speak. Message-blok
• Steek het gemonteerde Speak. Messageblock in de Then-sleuf

Nu, wanneer het programma een overeenkomst met de spraakopdracht detecteert, zal het programma de zin uitspreken die u zojuist hebt

getypt. Wees creatief als je wilt:

• Rechts zei Fred, het is rood
• Boo hoo hoo, het is blauw
• Groen, echt? Dat is niet jouw kleur man.

Stap 6: Stel de canvaskleur in

Nu zullen we eindelijk de kleur van het canvas veranderen om overeen te komen met het gesproken commando.

Achtergrondkleur canvas instellen

• Klik op het Canvas-object in het linkermenu
• Sleep het SetCanvasBackgroundColorTo-blok naar het werkgebied

Selecteer een kleurstaal

• Klik op het object Kleur in het gedeelte Ingebouwd van het linkermenu
• Sleep een kleurstaal naar het werkgebied

Monteer de onderdelen

• Steek de kleurstaal in het SetBackgroundColor-blok
• Steek het geassembleerde blok in de Then-sleuf van de If-then-instructie (onder het spreekblok)

Schuimen, spoelen, herhalen

Dit is waarschijnlijk een goed moment om te testen hoe het programma werkt. Laad het op uw Android-apparaat en test het voordat u de opdrachten 10 keer dupliceert.

Nu je weet dat de basiscode werkt, dupliceer je de test-en-acties voor elke kleur die je wilt kunnen selecteren.

U hebt zojuist het basiskader voor het programma gemaakt. Wanneer het programma een overeenkomst voor het spraakcommando detecteert, spreekt het de aangewezen zin uit en verandert vervolgens de kleur van het canvas in een gespecificeerde kleur. U kunt ook individuele RGB- en alfawaarden opgeven, zodat u een opdracht kunt maken zoals meer blauw en minder rood. Je kunt ook een opdracht maken om een willekeurige kleur in te stellen, de kleuren te laten pulseren en vervagen of door de regenboog te bladeren.

Stap 7: Fouten die niet overeenkomen opsporen

Maar wat als het spraakcommando geen match vindt - je hebt het verkeerd uitgesproken of in plaats daarvan geniesd? Dat is waar de laatste Else-verklaring voor is. Wanneer alle andere tests mislukken, voert het programma de actie uit in deze else-instructie. U maakt deze verklaring net zoals u de vorige verklaringen deed (behalve dat er geen test nodig is).

• Sluit een tekstveld aan op een SpeakMessage-blok en sluit dat aan op de laatste else-sleuf.
• Vertel de gebruiker: "Oeps, ik weet niet wat je probeert te zeggen - probeer het opnieuw."

Je bent bijna klaar. Er zijn nu nog maar een paar stappen te nemen.

Stap 8: Spraakherkenning handmatig starten

Zodra het spraakcommando is getest en de juiste acties zijn ondernomen, stopt het programma met luisteren naar meer commando's. Er zijn veel manieren om dit te omzeilen, maar de meeste zijn ingewikkeld voor beginners. Dus we houden het bij iets eenvoudigs - raak het scherm aan om het programma weer te laten luisteren.

• Klik op het Canvas-object in het linkermenu
• Sleep het whenCanvasTouchDown-blok naar het werkgebied (als een afzonderlijk object, niet in een ander blok)
• Klik op het SpeechRecognizer-object in het linkermenu
• Sleep een callSpeechRecognizer. GetText-blok naar het podium en sluit het aan op het whenCanvasTouchDown-blok

Telkens wanneer het scherm wordt aangeraakt, begint het programma te luisteren naar een spraakopdracht.

Stap 9: Hoe het volledige programma eruit ziet

Je bent klaar - je hebt zojuist een spraakgestuurde Android-app gemaakt die je oude telefoon of tablet in een sfeerlicht verandert. Als u problemen ondervindt om het werkend te krijgen, downloadt u in deze stap de volledige versie van de afbeelding. Die afbeelding toont het hele programma plus een paar extra's.

Maar zoals je kunt zien, is het hele programma eigenlijk gewoon

• een startgesprek
• een reeks tests en acties
• dan een herstart.

Dit programma krast slechts het oppervlak van wat u kunt doen met MIT App Inventor. Er zijn nog veel meer commando's, en zelfs de commando's die we in dit project hebben gebruikt, hebben opties die we niet hebben onderzocht. Neem dit basisprogramma en bouw erop voort om uw eigen aangepaste sfeerlicht, statusbord of displaypaneel te maken.

Stap 10: Uitbreiden en uitbreiden

Oké, laten we nog één ding doen, gewoon voor de lol. In plaats van alleen de kleur van het scherm te veranderen, laten we een foto zien. U kunt ook video's, webpagina's of tekstberichten weergeven. Speel rond en heb plezier.

• Ga terug naar de Designer-modus door op de knop in de rechterbovenhoek van het scherm te klikken
• Klik op Canvas in het linkermenu
• Klik ook op Canvas in het menu Componenten (tweede paneel van rechts)
• Hierdoor wordt het deelvenster Eigenschappen voor het canvas weergegeven
• Klik in het deelvenster Eigenschappen (uiterst rechts) op Achtergrondafbeelding
• Laad een foto met behulp van het pop-upvenster
• Schakel terug naar de modus Blokken
• Voeg een extra als-dan-verklaring toe
• Voeg een test toe voor het afbeeldingscommando
• Voeg een setBackgroundImageTo-blok toe aan de beslissingsboom - gebruik de naam van de foto
• Voeg ook een setBackgroundImageTo het herstart Touchdown-blok toe - stel de naam in op "none"

En boem, nu kun je foto's laden en de kleur wijzigen. Misschien wil je wat spelen met de grootte van de afbeelding. Of probeer een video-object te laden. U kunt vormen op het canvas tekenen of animaties maken. U kunt getallen, woorden, grafieken weergeven - of meerdere doeken maken voor meerdere items.

U kunt ook programma's maken om toegang te krijgen tot de ingebouwde sensoren van uw telefoon. U kunt verbinding maken met andere applicaties op uw telefoon, verbinding maken met internet en daar informatie ophalen en verbinding maken met andere apparaten via Bluetooth of WiFi.

Of gebruik de ongelooflijk handige IFTT om Alexa of een andere assistent je moodboard te laten instellen, of al je oude apparaten te bedienen.

U bent net begonnen met MIT App Inventor, maar u kunt zien hoe gemakkelijk en krachtig het is om te gebruiken. Dus ga op ontdekkingstocht en maak je eigen displaybord.

Stap 11: Hoesjes en bekledingen

Dus dat was erg leuk, het programmeren van een spraakgestuurde applicatie. Maar het ziet er nog steeds uit als dezelfde oude telefoon of tablet - nogal saai. Waarom voeg je geen hoes of hoes toe aan het apparaat om het er echt op maat uit te laten zien. Er zijn slechts een paar overwegingen om rekening mee te houden:

Als u het scherm afdekt, moet het materiaal:

• Voldoende gaten hebben om uw vinger het scherm te laten aanraken
• Of geleidend genoeg zijn om uw aanraking door te geven aan het tabletoppervlak

Goede opties zijn mesh-stof of kant. Ze veranderen allebei het uiterlijk van de telefoon, maar laten je huid contact maken met het scherm. Sommige dunne papiersoorten en kunststoffen van het Mylar-type laten voldoende elektriciteit door om als aanraking te registreren.

• Als je er een frame omheen zet, zorg er dan voor dat er voldoende ruimte overblijft voor het netsnoer.
• Zorg ervoor dat het apparaat stevig is bevestigd als u het aan de muur plaatst. Het is misschien oud en achterhaald, maar het werkt nog steeds - dus breek het niet nu je weet hoe je het moet programmeren.

Maar dit is een heel ander onderwerp, de moeite waard en complete klasse en Instructable helemaal alleen. En dat is een geweldige manier om nieuwe bezoekers weer in uw makerspace te krijgen. Zorg er dus voor dat je ze allemaal vertelt: "Kom terug voor het tweede deel van de les."

Veel plezier met maken en wees uitstekend voor elkaar.