Sprachgesteuertes Android-Stimmungslicht - Gunook

2025 Autor: John Day | [email protected]. Zuletzt bearbeitet: 2025-01-23 12:52

Ich musste eine Klasse für unsere lokale Maker-Gruppe erstellen. Etwas, das selbst Erstbesuchern einen definitiven Gewinn und eine große Belohnung garantierte, ohne dass es Ärger, kein Aufhebens und keine speziellen Werkzeuge oder Materialien gab. Die Schüler mussten etwas Funktionelles und Lustiges mit nach Hause nehmen, das sie ihren Freunden zeigen konnten, und das an einem Nachmittag – und es musste kostenlos sein. (Und bringen sie hoffentlich für mehr oder für eine verwandte Klasse zurück) Also habe ich dieses Projekt erstellt.

Verwandeln Sie Ihr altes Telefon oder Tablet in ein sprachgesteuertes Stimmungslicht und eine Statustafel. KOSTENLOS!!! Einfach an einem Nachmittag zu machen - KEINE ERFAHRUNG ERFORDERLICH (Sonntag, Sonntag, Sonntag)

Jeder mit einem Android-Gerät und Zugriff auf einen Computer kann in ein oder zwei Stunden eine sprachgesteuerte Anwendung programmieren. Es verwendet die kostenlose MIT App Inventor, daher fallen keine Kosten an. Sie können es leicht anpassen und dann einer Hülle oder Hülle ihre eigene Raffinesse hinzufügen. Und sie können das Gleiche mit in den Unterricht nehmen und ihre Projekte mehrere Monate lang erweitern und verbessern.

Das Projekt bietet einen guten Ausgangspunkt für die Programmierung, reicht aber nicht aus, um wirklich zufrieden zu stellen - es soll die Leute zum nächsten Kurs zurückbringen. Böse, ich weiß. Aber es führt die Leute zu Arduino, was zu Raspberry Pi führt, was zu Elektronik und Löten führt. Wenn sie mit der Basis-App zufrieden sind und nicht mehr programmieren möchten, können sie es sich individuell anfertigen, wenn sie in die Maker Group für Stoff- und Nähkurse, Papier und Zeichnen, Holzarbeiten und Rahmen zurückkehren. Herstellung oder sogar 3D-Design und Druck.

Grundlegende Anforderungen

• Ein altes Android-Smartphone oder -Tablet (derzeit 2.3 oder höher)
• Internet Zugang
• Ein App Inventor-Konto (kostenlos)
• Vorzugsweise ein Computer mit installiertem Chrome-Browser

Vorbereitung

Sie müssen mit dem App Inventor-Programm des MIT vertraut sein. Es gibt viele Instructables (einige ziemlich fortgeschritten). Aber der beste Ort, um App Inventor zu lernen, ist die Website und die hervorragende Reihe von Tutorials. Die meisten Leute lernen die grundlegenden Konzepte in wenigen Minuten. Immerhin ist dies derselbe Shop, der die Scratch-Programmierumgebung und die ursprüngliche LEGO Mindstorms-Programmier-App entwickelt hat. Wenn Sie zu alt sind, um davon zu wissen, bitten Sie Ihr örtliches Schulkind, Ihnen zu helfen.

Wenn Sie die Klasse unterrichten, sollten Sie wahrscheinlich mit den meisten Komponenten und Befehlen vertraut sein. Jemand in der Klasse wird fast garantiert bitten, etwas anderes zu tun, als in diesem Tutorial gezeigt wird. Sie können sich an das Skript halten und nur das tun, was hier gezeigt wird. Aber ich habe festgestellt, dass wir eine viel höhere Rate an wiederkehrenden Besuchern erzielen, wenn wir jedem helfen können, eine einzigartige Version mit "erweiterten" Funktionen zu erstellen, die er seinen Freunden zeigen kann.

Machen Sie sich also mit den Grundlagen vertraut und kehren Sie dann für eine Schritt-für-Schritt-Anleitung zurück.

Schritt 1: Design und Einrichtung

Erstellen Sie eine Leinwand

• Wechseln Sie im Modus "Designer" zur Palette "Zeichnen und Animation".
• Ziehen Sie eine "Leinwand" auf den Bildschirm.
• Legen Sie die Breite und Höhe der Leinwand auf "Übergeordnetes Element füllen" fest.
• Wir werden den Code erstellen, um die Farbe der Leinwand in späteren Schritten zu ändern.

Spracherkennung erstellen

• Ziehen Sie aus der Palette "Medien" "SpeechRecognizer" auf den Bildschirm.
• Dies ist die Komponente, die auf unsere Sprachbefehle hört.
• Wir werden dieses Element später konfigurieren.

Sprachfunktion erstellen

• Ziehen Sie auch aus der Palette "Medien" ein "TextToSpeech"-Objekt auf den Bildschirm.
• Wir werden diese Komponente verwenden, um gesprochene Ansagen für den Benutzer zu erstellen.
• Dieses Element wird auch später im Tutorial konfiguriert.

Wir haben gerade die Basiskomponenten für unsere App installiert - alles in wenigen Sekunden. Jetzt gehen wir zum Konfigurieren und Codieren über. Dazu müssen wir in den Modus "Blöcke" wechseln. Schauen Sie in die obere rechte Ecke des Bildschirms und klicken Sie auf die Schaltfläche Blöcke. Wenn Sie in den Designer-Modus zurückkehren möchten, klicken Sie einfach auf die Schaltfläche Designer.

Schritt 2: Starten Sie den SpeechRecognizer

DENKEN SIE DARAN: Wechseln Sie in den "BLOCKS"-Modus: Stellen Sie sicher, dass Sie in den Block-Modus wechseln, indem Sie auf die Schaltfläche in der oberen rechten Ecke des Bildschirms klicken. Ein neuer Palettensatz wird angezeigt. Wir werden diese Paletten und Blöcke verwenden, um das Stimmungslicht zu programmieren.

Wir möchten sofort nach dem Öffnen der Anwendung auf Befehle hören. Dazu "rufen" wir das SpeechRecognizer-Objekt auf, wenn der erste Bildschirm "initialisiert" wird. AppInventor hat automatisch einen "Bildschirm" für uns erstellt. Jede App hat mindestens einen Bildschirm, manche haben mehrere. Wir brauchen nur die Standardeinstellung.

Bildschirm initialisieren

• Klicken Sie im linken Menü auf das Objekt Screen.
• Ziehen Sie aus dem Flyout-Menü das Objekt "Wenn der Bildschirm initialisiert wird" auf die Bühne.

Starten Sie den Spracherkenner

• Klicken Sie im linken Menü auf das Objekt "SpeechRecognizer"
• Ziehen Sie das Objekt "call SpeechRecognizer getText" auf die Bühne
• Stecken Sie diesen Befehl in den Block Screen Initialized

Jetzt beginnt das Programm automatisch, auf Sprachbefehle (getText) zu hören, sobald der erste Bildschirm geladen (initialisiert) wird. Als nächstes sagen wir dem Computer, was er tun soll, wenn er Befehle hört.

Schritt 3: Erstellen des Entscheidungsbaums

Der Computer wartet jetzt auf Sprachbefehle. Als nächstes müssen wir angeben, was zu tun ist, nachdem er bestimmte Wörter gehört hat. In diesem Projekt werden wir hauptsächlich Farbnamen wie Blau, Grün und Gelb verwenden. Wenn der Computer diese Wörter hört, ändert er die Farbe des Canvas-Objekts.

Dazu testen wir, ob der Sprachbefehl mit den von uns angegebenen Wörtern übereinstimmt. Wenn der Sprachbefehl mit einem vordefinierten Wort übereinstimmt, möchten wir, dass der Computer bestimmte Aktionen ausführt - wie zum Beispiel die Leinwandfarbe ändern und verbale Rückmeldungen geben. Wenn keine Übereinstimmung gefunden wird, müssen wir dem Benutzer mitteilen, dass ein Fehler aufgetreten ist.

Wir beginnen damit, einen leeren Rahmen zu erstellen, um alle Tests und Aktionen aufzunehmen.

Was zu tun ist, nachdem Sie einen Sprachbefehl erhalten haben

• Klicken Sie im linken Menü auf den SpeechRecognizer
• Ziehen Sie den Block "Nach dem Abrufen von Text" auf die Bühne
• (Platzieren Sie den Block direkt auf der Bühne, NICHT innerhalb des vorherigen Blocks)

Test-Slots erstellen

• Klicken Sie im Abschnitt „Eingebaut“des linken Menüs auf „Steuerung“.
• Ziehen Sie einen Wenn-Dann-Befehlsblock auf die Bühne
• Stecken Sie den Wenn-Dann-Block in den afterGettingText-Block
• Klicken Sie auf das blaue Zahnradsymbol im Wenn-Dann-Block
• Ziehen Sie aus dem erscheinenden Pop-up mehrere Else-If-Unterblöcke in den Haupt-Wenn-Dann-Block
• Ziehen Sie auch einen Else-Unterblock an das Ende der Liste

Im nächsten Schritt werden wir beginnen, diese leeren Slots mit Tests und Aktionen zu füllen – dem Herzstück des Programms.

Schritt 4: Auf Übereinstimmungen testen

Die Anwendung hört auf gesprochene Befehle, und es gibt ein Framework, das mit Tests zu diesen Sprachbefehlen gefüllt werden kann. Lassen Sie uns nun die Tests definieren. Zuerst sagen wir dem Computer, dass er testen soll, ob zwei Objekte gleich sind, dann definieren wir das erste Objekt als Sprachbefehl und das zweite Objekt als Text. Wir werden hier nur einen Test erstellen, aber die gleiche Technik wird verwendet, um sechs oder zehn oder hundert Tests zu erstellen. Wenn der erste Test übereinstimmt, führt das Programm eine Aktion aus, andernfalls geht es zum nächsten Test und so weiter.

Erstellen Sie einen Gleichheitstest

• Klicken Sie auf Logik im Abschnitt Eingebaut des linken Menüs
• Ziehen Sie einen = (gleich) Test auf die Bühne

Setzen Sie das erste Element auf das Sprachergebnis

• Klicken Sie im linken Menü auf den SpeechRecognizer
• Ziehen Sie einen Ergebnisblock auf die Bühne
• Stecken Sie den SpeechRecognizer. Result in den linken Steckplatz des Gleichheitstestblocks

Zweites Element auf einen Textblock setzen

• Klicken Sie auf Text im Abschnitt Built-in des linken Menüs
• Ziehen Sie einen einfachen Textfeldblock auf die Bühne
• Geben Sie in diesem Textblock das Wort ein, auf das Sie testen möchten
• Stecken Sie den Textblock in den rechten Steckplatz des Gleichheitstestblocks

Setzen Sie den Test an der richtigen Stelle ein

• Stecken Sie nun den gesamten Equals-Test-Block in den IF-Slot des Entscheidungsbaums
• In den nächsten Schritten werden wir einige Aktionen zuweisen, die zu ergreifen sind, wenn der Test wahr ist

BEISPIEL: Wenn der Benutzer "blau" sagt, erfasst das Programm dieses Wort in einem "Ergebnis"-Bin. Dann wird geprüft, ob dieses Ergebniswort (blau) mit dem Wort übereinstimmt, das Sie in den Textblock eingegeben haben. Wenn es übereinstimmt, führt das Programm die Aktionen im "Dann"-Teil des Blocks aus (wir werden die Aktionen in den nächsten Schritten definieren). Stimmt der Sprachbefehl nicht mit dem Text überein, fährt das Programm mit dem nächsten Test fort, bis es eine Übereinstimmung findet oder die abschließende else-Anweisung "etwas stimmt nicht" erreicht.

HINWEIS: Der Sprachbefehl muss keine Farbe haben. Im Beispielcode verwenden wir die Wörter "dunkel" und "hell", um Schwarz und Weiß auszulösen. Wir könnten genauso gut Wörter verwenden wie:

• Mama/Papa/Billy/Suzy
• Glücklich/Traurig/Wütend/Hungrig
• Schlafen/Lernen/Senden/Party

Schritt 5: Verbales Feedback geben

Jetzt müssen wir einige Aktionen erstellen, wenn der Sprachbefehl mit dem Test übereinstimmt. Zuerst teilen wir dem Benutzer mit, für welche Farbe das Programm eine Übereinstimmung gefunden hat.

Sprechsperre Mach dein Ding

• Klicken Sie im linken Menü auf das TextTo Speech-Objekt
• Ziehen Sie einen Speak. Message-Block auf die Bühne

Geben Sie ein, was Sie sagen möchten

• Klicken Sie auf den Textblock im integrierten Abschnitt des linken Menüs
• Ziehen Sie einen einfachen leeren Textblock auf die Bühne
• Gib den Satz ein, den er sagen soll

Montieren Sie die Teile

• Stecken Sie den ausgefüllten Textblock auf den Speak. Message-Block
• Stecken Sie den zusammengebauten Speak. Messageblock in den Then-Slot

Wenn das Programm jetzt eine Übereinstimmung mit dem Sprachbefehl erkennt, spricht das Programm den Satz, den Sie gerade haben

getippt. Werden Sie kreativ, wenn Sie möchten:

• Richtig sagte Fred, es ist rot
• Boo hoo hoo, es ist blau
• Grün, wirklich? Das ist nicht dein Farbtyp.

Schritt 6: Stellen Sie die Leinwandfarbe ein

Jetzt ändern wir endlich die Farbe der Leinwand, damit sie dem gesprochenen Befehl entspricht.

Leinwandhintergrundfarbe einstellen

• Klicken Sie im linken Menü auf das Canvas-Objekt
• Ziehen Sie den SetCanvasBackgroundColorTo-Block auf die Bühne

Wählen Sie ein Farbmuster aus

• Klicken Sie auf das Color-Objekt im Abschnitt Built-in des linken Menüs
• Ziehen Sie ein Farbfeld auf die Bühne

Montieren Sie die Teile

• Stecken Sie das Farbfeld in den SetBackgroundColor-Block
• Stecken Sie den zusammengesetzten Block in den Then-Slot der If-then-Anweisung (unter dem Speak-Block)

Aufschäumen, Spülen, Wiederholen

Dies ist wahrscheinlich ein guter Zeitpunkt, um zu testen, wie das Programm funktioniert. Laden Sie es auf Ihr Android-Gerät und testen Sie es, bevor Sie die Befehle 10 Mal duplizieren.

Nachdem Sie nun wissen, dass der grundlegende Code funktioniert, duplizieren Sie die Test-und-Aktionen für jede Farbe, die Sie auswählen möchten.

Sie haben gerade das Grundgerüst für das Programm geschaffen. Wenn das Programm eine Übereinstimmung mit dem Sprachbefehl erkennt, spricht es den angegebenen Satz und ändert dann die Farbe der Leinwand in eine bestimmte Farbe. Sie können auch einzelne RGB- und Alpha-Werte angeben, sodass Sie einen Befehl wie mehr Blau und weniger Rot erstellen können. Sie können auch einen Befehl erstellen, um eine zufällige Farbe einzustellen, die Farben pulsieren und verblassen oder durch den Regenbogen kreisen zu lassen.

Schritt 7: Erfassen von No-Match-Found-Fehlern

Aber was ist, wenn der Sprachbefehl keine Übereinstimmung findet - Sie haben sich vertippt oder stattdessen geniest? Dafür steht die letzte Else-Aussage. Wenn alle anderen Tests fehlschlagen, führt das Programm die Aktion in dieser else-Anweisung aus. Sie erstellen diese Anweisung genau wie die vorherigen Anweisungen (außer dass kein Test erforderlich ist).

• Stecken Sie ein Textfeld in einen SpeakMessage-Block und stecken Sie dieses in den letzten else-Slot.
• Sagen Sie dem Nutzer: "Ups, ich weiß nicht, was Sie sagen wollen - versuchen Sie es bitte noch einmal."

Du bist fast fertig. Jetzt sind es nur noch wenige Schritte.

Schritt 8: Spracherkennung manuell starten

Sobald der Sprachbefehl getestet und die entsprechenden Aktionen ausgeführt wurden, hört das Programm auf, auf weitere Befehle zu warten. Es gibt viele Möglichkeiten, dies zu umgehen, aber die meisten sind für Anfänger kompliziert. Wir bleiben also bei etwas Einfachem - berühren Sie den Bildschirm, damit das Programm wieder zu hören beginnt.

• Klicken Sie im linken Menü auf das Canvas-Objekt
• Ziehen Sie den whenCanvasTouchDown-Block auf die Bühne (als separates Objekt, nicht innerhalb eines anderen Blocks)
• Klicken Sie im linken Menü auf das SpeechRecognizer-Objekt
• Ziehen Sie einen callSpeechRecognizer. GetText-Block auf die Bühne und stecken Sie ihn in den whenCanvasTouchDown-Block

Jedes Mal, wenn der Bildschirm berührt wird, beginnt das Programm nun, auf einen Sprachbefehl zu hören.

Schritt 9: Wie das vollständige Programm aussieht

Sie sind fertig - Sie haben gerade eine sprachgesteuerte Andoid-App erstellt, die Ihr altes Telefon oder Tablet in ein Stimmungslicht verwandelt. Wenn Sie Probleme haben, es zum Laufen zu bringen, laden Sie in diesem Schritt die Vollversion des Bildes herunter. Dieses Bild zeigt das gesamte Programm plus ein paar Extras.

Aber wie man sieht, ist das gesamte Programm wirklich gerecht

• ein Startaufruf
• eine Reihe von Tests und Aktionen
• dann ein Neustart.

Dieses Programm kratzt nur an der Oberfläche dessen, was Sie mit MIT App Inventor tun können. Es gibt noch viel mehr Befehle, und selbst die Befehle, die wir in diesem Projekt verwendet haben, haben Optionen, die wir nicht untersucht haben. Nehmen Sie dieses Basisprogramm und bauen Sie darauf auf, um Ihr eigenes individuelles Stimmungslicht, Statusboard oder Anzeigefeld zu erstellen.

Schritt 10: Erweitern und Erweitern

Okay, machen wir noch eine Sache, nur zum Spaß. Anstatt nur die Farbe des Bildschirms zu ändern, zeigen wir ein Foto. Sie können auch Videos, Webseiten oder Textnachrichten anzeigen. Spielen Sie herum und haben Sie Spaß.

• Wechseln Sie zurück in den Designer-Modus, indem Sie auf die Schaltfläche in der oberen rechten Ecke des Bildschirms klicken
• Klicken Sie im Menü auf der linken Seite auf Leinwand
• Klicken Sie auch im Komponentenmenü (zweites Panel von rechts) auf Canvas.
• Dadurch wird das Eigenschaftenbedienfeld für die Leinwand angezeigt
• Klicken Sie im Eigenschaftenfenster (ganz rechts) auf Hintergrundbild
• Laden Sie ein Foto über das Popup-Dialogfeld
• Wechseln Sie zurück in den Blockmodus
• Fügen Sie eine zusätzliche Wenn-Dann-Anweisung hinzu
• Fügen Sie einen Test für den Bildbefehl hinzu
• Fügen Sie dem Entscheidungsbaum einen setBackgroundImageTo-Block hinzu - verwenden Sie den Namen des Fotos
• Fügen Sie auch ein setBackgroundImageTo zum Neustart-Touchdown-Block hinzu - setzen Sie den Namen auf "none"

Und Boom, jetzt können Sie sowohl Fotos laden als auch die Farbe ändern. Vielleicht möchten Sie mit der Bildgröße herumspielen. Oder versuchen Sie, in ein Videoobjekt zu laden. Sie können Formen auf der Leinwand zeichnen oder Animationen erstellen. Sie können Zahlen, Wörter, Grafiken anzeigen - oder mehrere Leinwände für mehrere Elemente erstellen.

Sie können auch Programme erstellen, um auf die integrierten Sensoren Ihres Telefons zuzugreifen. Sie können eine Verbindung zu anderen Anwendungen auf Ihrem Telefon herstellen, eine Verbindung zum Internet herstellen und Informationen von dort abrufen sowie über Bluetooth oder WLAN eine Verbindung zu anderen Geräten herstellen.

Oder verwenden Sie das unglaublich praktische IFTT, um Alexa oder einen anderen Assistenten dazu zu bringen, Ihr Moodboard einzustellen oder alle Ihre alten Geräte zu steuern.

Sie haben gerade erst mit MIT App Inventor begonnen, aber Sie können sehen, wie einfach und leistungsstark es ist. Gehen Sie also auf Entdeckungsreise und erstellen Sie Ihre eigene Anzeigetafel.

Schritt 11: Fälle und Abdeckungen

Es hat also viel Spaß gemacht, eine sprachaktivierte Anwendung zu programmieren. Aber es sieht immer noch aus wie das gleiche alte Telefon oder Tablet - irgendwie langweilig. Warum fügen Sie dem Gerät nicht eine Abdeckung oder ein Gehäuse hinzu, damit es wirklich maßgeschneidert aussieht. Es sind nur einige Überlegungen zu berücksichtigen:

Wenn Sie den Bildschirm abdecken, muss das Material:

• Haben Sie genügend Löcher, damit Ihr Finger den Bildschirm berühren kann
• Oder leitfähig genug sein, um Ihre Berührung auf die Tablettoberfläche zu übertragen

Gute Optionen sind Netzstoff oder Spitze. Beide verändern das Aussehen des Telefons, lassen jedoch Ihre Haut den Bildschirm berühren. Einige dünne Papiere und Kunststoffe vom Typ Mylar lassen genug Strom durch, um eine Berührung wahrzunehmen.

• Wenn Sie einen Rahmen darum legen, achten Sie darauf, genügend Platz für das Netzkabel zu lassen.
• Stellen Sie sicher, dass das Gerät sicher befestigt ist, wenn Sie es an der Wand platzieren. Es mag alt und veraltet sein, aber es funktioniert immer noch - also machen Sie es nicht kaputt, jetzt, wo Sie wissen, wie man es programmiert.

Aber dies ist ein ganz anderes Thema, wert und komplett Klasse und instructable ganz für sich. Und das ist eine großartige Möglichkeit, neue Besucher wieder in Ihren Makerspace zu bringen. Sagen Sie also allen, dass sie zum zweiten Teil des Unterrichts zurückkehren sollen.

Viel Spaß beim Machen und seid ausgezeichnet zueinander.