Arduino-Menü auf einem Nokia 5110 LCD mit Drehgeber

Apps und Onlinedienste

Arduino-IDE

Über dieses Projekt

Liebe Freunde, willkommen zu einem weiteren Tutorial! In diesem Video lernen wir, wie wir unser eigenes Menü für das beliebte Nokia 5110 LCD-Display erstellen, um unsere Projekte benutzerfreundlicher und leistungsfähiger zu machen. Fangen wir an!

Dies ist das Projekt, das wir bauen werden. Im Display erscheint ein einfaches Menü, und mit Hilfe des Drehgebers kann ich nach oben oder unten navigieren und durch Drücken des Drehgeberknopfes einen Menüpunkt auswählen. Wenn die mittlere Taste des Drehgebers gedrückt wird, erscheint ein weiterer Bildschirm und wir können den Wert einer Variablen ändern. Wenn wir den Drehgeber-Knopf noch einmal drücken, kehren wir zum Hauptmenü-Bildschirm zurück. Das Menü hat 6 Elemente, und wir können im Menü nach unten oder oben scrollen und die Elemente auf dem Display ändern sich entsprechend. Sehen Sie sich das angehängte Video an, um genau zu sehen, wie dieses Menü funktioniert. Natürlich können Sie es ändern, um Ihre eigenen komplexeren Menüs zu erstellen, wenn Sie möchten.

Sehen wir uns nun an, wie dieses Projekt erstellt wird.

Schritt 1:Holen Sie sich alle Teile

Die Teile, die für den Bau dieses Projekts benötigt werden, sind die folgenden:

• Ein Arduino Uno ▶ http://educ8s.tv/part/ArduinoUno

• Ein Nokia 5110 LCD-Display ▶ http://educ8s.tv/part/NOKIA5110

• Ein Drehgeber ▶ http://educ8s.tv/part/RotaryEncoder

• Ein kleines Breaboard ▶ http://educ8s.tv/part/SmallBreadboard

• Einige Drähte ▶ http://educ8s.tv/part/Wires

Die Kosten des Projekts sind sehr gering, es sind weniger als 10 US-Dollar. Links zu allen Teilen, die ich verwende, findest du in der Beschreibung des Videos unten.

Schritt 2:Nokia 5110 LCD-Display

Das Nokia 5110 ist mein Lieblingsdisplay für meine Arduino-Projekte.

Das Nokia 5110 ist ein einfacher grafischer LCD-Bildschirm, der ursprünglich als Handy-Bildschirm gedacht war. Es verwendet den PCD8544-Controller, der ein CMOS-LCD-Controller/-Treiber mit geringem Stromverbrauch ist. Aus diesem Grund hat dieses Display einen beeindruckenden Stromverbrauch. Es verbraucht nur 0,4 mA, wenn es eingeschaltet ist, aber die Hintergrundbeleuchtung ist deaktiviert. Es verbraucht weniger als 0,06 mA im Schlafmodus! Das ist einer der Gründe, die dieses Display zu meinem Favoriten machen. Die PCD8544 ist über eine serielle Busschnittstelle mit Mikrocontrollern verbunden. Das macht das Display sehr einfach mit Arduino zu verwenden. Sie müssen nur 8 Drähte anschließen.

Ich habe ein ausführliches Tutorial zur Verwendung des Nokia 5110 LCD-Displays mit Arduino vorbereitet. Ich habe dieses Video in diesem Tutorial angehängt, es wird möglicherweise nützliche Informationen über die Anzeige liefern, daher empfehle ich Ihnen, es sorgfältig anzusehen. Die Kosten für das Display betragen etwa 4 US-Dollar.

Du bekommst es hier:▶ http://educ8s.tv/part/NOKIA5110

Schritt 3:Drehgeber

Ein Drehgeber, auch Drehgeber genannt, ist ein elektromechanisches Gerät, das die Winkelposition oder Bewegung einer Welle oder Achse in einen analogen oder digitalen Code umwandelt. Drehgeber werden in vielen Anwendungen verwendet, die eine präzise unbegrenzte Drehung der Welle erfordern – einschließlich industrieller Steuerungen, Robotik, fotografischer Spezialobjektive, Computereingabegeräte (wie optomechanische Mäuse und Trackballs), kontrollierte Spannungsrheometer und rotierende Radarplattformen.

Der Drehgeber, den wir in diesem Projekt verwenden werden, ist ein sehr kostengünstiger Encoder. Es hat auch einen eingebetteten Knopf und damit es funktioniert, müssen wir nur 5 Drähte anschließen. Ich habe ein ausführliches Tutorial zur Verwendung eines Drehgebers vorbereitet. Dieses Video finden Sie hier im Anhang.

Die Kosten für diesen Drehgeber sind sehr gering. Es kostet etwa 1,5 US-Dollar.

Du bekommst es hier ▶ http://educ8s.tv/part/RotaryEncoder

Schritt 4:Erstellen des Projekts

Verbinden wir nun alle Teile miteinander. Wenn Sie in der Vergangenheit keinen Drehgeber verwendet haben, empfehle ich Ihnen, sich vor dem Erstellen dieses Projekts das von mir vorbereitete Tutorial zu Drehgebern anzusehen. Es wird Ihnen helfen, die Funktionsweise von Drehgebern zu verstehen und Erfahrungen mit ihnen zu sammeln. Dieses Video ist hier angehängt.

Ich habe das Display auf ein kleines Steckbrett wie dieses gelegt. Schließen wir zuerst das Display an. Der erste Pin des Displays, der zurückgesetzt wird, geht an Digital-Pin 3 des Arduino Uno, der zweite Pin geht an Digital-Pin 4, der dritte Pin geht an Digital-Pin 5, der vierte Pin an Digital-Pin 11 und der fünfte Pin an Digital Pin 13. Der nächste Pin ist Vcc. Wir verbinden Vcc mit der positiven Schiene des Steckbretts und die positive Schiene des Steckbretts mit dem 3,3-V-Ausgang des Arduino. Der nächste Pin ist die Hintergrundbeleuchtung für das Display. Da wir es über die Software steuern wollen, verbinden wir es mit dem digitalen Pin 7. Der letzte Pin ist GND. Wir verbinden GND mit der negativen Schiene des Steckbretts und die negative Schiene des Steckbretts mit Arduino GND.

Jetzt müssen wir nur noch den Drehgeber anschließen. Der erste Pin ist GND und wir verbinden ihn mit der negativen Schiene des Steckbretts. Der nächste Pin ist Vcc und wir verbinden ihn mit der positiven Schiene des Steckbretts. Der nächste Pin ist SW und wir verbinden ihn mit Analog Pin 2. Der nächste Pin heißt DT und wir verbinden ihn mit Analog Pin 1. Zuletzt wird der Pin CLK mit Analog Pin 0 verbunden. Den Schaltplan dieses Projekts finden Sie in die Beschreibung des Videos unten.

Jetzt sind wir bereit, das Projekt hochzufahren. Wie Sie sehen, funktioniert das Projekt gut und das Menü funktioniert wie erwartet! Großartig, sehen wir uns nun die Software des Projekts an.

Schritt 5:Der Code des Projekts

In diesem Projekt verwenden wir 4 Bibliotheken. Wir verwenden zwei Bibliotheken für die Anzeige und zwei für den Drehgeber.

• Adafruit GFX:https://github.com/adafruit/Adafruit-GFX-Library

• Nokia 5110:https://github.com/adafruit/Adafruit-PCD8544-Nokia-5110-LCD-library

• Encoder-Bibliothek:https://github.com/0xPIT/encoder/tree/arduino

• TimerOne-Bibliothek:https://github.com/PaulStoffregen/TimerOne

Zuerst schauen wir uns die drawMenu-Funktion an. Diese Funktion ist für das Zeichnen des Menüs auf dem Display verantwortlich. Diese Funktion wird alle paar Millisekunden aufgerufen. Wenn es also eine Änderung im Menü gibt, ist diese Funktion dafür verantwortlich, das Menü auf dem Bildschirm zu aktualisieren.

int menuitem =1;int frame =1;int page =1;int lastMenuItem =1; 

Es gibt auch 3 sehr wichtige globale Variablen, die variable Seite, den variablen Menüpunkt und den variablen Rahmen. Die Variablenseite merkt sich, welcher UI-Bildschirm auf dem Bildschirm angezeigt wird. Wenn also die Seitenvariable 1 ist, befinden wir uns im Haupt-UI-Bildschirm, und wenn die Variable 2 ist, befinden wir uns im sekundären UI-Bildschirm, in dem wir den Wert für eine Variable festlegen. Der Menüpunkt merkt sich den ausgewählten Menüpunkt. Wenn also der Wert 1 ist, wird der erste Menüpunkt ausgewählt, daher muss die Funktion drawMenu diesen Menüpunkt schwarz mit weißen Buchstaben zeichnen. Wenn der Menüpunkt 2 ist, wird der zweite Menüpunkt ausgewählt und so weiter. Die Rahmenvariable merkt sich, welcher Teil des Menüs auf dem Bildschirm angezeigt wird. Da das von uns erstellte Menü 6 Elemente enthält und wir nur 3 davon gleichzeitig anzeigen können, müssen wir wissen, welche Elemente auf dem Bildschirm angezeigt werden. Genau das sagt uns die Frame-Variable. Wenn die Frame-Variable den Wert 1 hat, zeigen wir die ersten drei Menüpunkte an, ist sie 2, zeigen wir die Punkte 2,3,4 usw. an.

Ich habe versucht, den Code so einfach wie möglich zu ändern, also habe ich einige globale Variablen erstellt, die die Namen für die Menüelemente enthalten. Auf diese Weise können Sie ganz einfach Ihre eigenen Menüs erstellen, ohne im Code suchen zu müssen.

String menuItem1 ="Kontrast";String menuItem2 ="Lautstärke";String menuItem3 ="Sprache";String menuItem4 ="Schwierigkeit";String menuItem5 ="Licht:EIN";String menuItem6 ="Reset"; Boolesche Hintergrundbeleuchtung =true;int Kontrast =60;int volume =50;String language[3] ={ "EN", "ES", "EL" };int selectedLanguage =0;String Schwierigkeit[2] ={ "EASY" , "HARD" };int selectedDifficulty =0; 

Zuerst initialisieren wir alle globalen Variablen, die im Code benötigt werden. Als nächstes initialisieren wir die Anzeige. In der Schleifenfunktion rufen wir zuerst die drawMenu-Funktion auf, um das Menü auf dem Bildschirm zu zeichnen. Dann lesen wir den Wert vom Rotary Encoder ab und prüfen ob die Taste gedrückt ist. Wenn wir uns beispielsweise auf dem Hauptbildschirm der Benutzeroberfläche befinden und der erste Menüpunkt ausgewählt ist, wenn der Wert vom Drehgeber erhöht wurde, erhöht sich die Variable menuitem und in der nächsten Schleife zeichnet die drawMenu-Funktion den zweiten Menüpunkt wie ausgewählt. Wenn wir nun die Taste des Drehgebers drücken, navigieren wir zur zweiten Seite, wo wir den Wert der Variablen einstellen. Auch hier können wir mit dem Drehgeber den Wert der Variablen erhöhen oder verringern. Wenn wir die Taste drücken, navigieren wir zurück zur Hauptmenüseite und die Seitenvariable verringert sich.

Das ist die Grundidee hinter diesem Menü. Wir gehen für alle Menüpunkte und Seiten gleich vor. Der Code ist komplex, er ist über 400 Zeilen lang. Es scheint kompliziert, aber wenn Sie es selbst ausprobieren, werden Sie es leichter verstehen und Sie können es ändern, erweitern und in Ihren eigenen Projekten verwenden. Den angehängten Code findet ihr wie immer hier.

Schritt 6:Testen des Projekts

Wenn wir den Code laden, können wir sehen, dass das Projekt wie erwartet funktioniert. Mit der Welle können wir im Menü nach oben und unten navigieren und durch Drücken des Drehgeberknopfes können wir jeden Menüpunkt auswählen. Wie cool ist das!

Da wir nun wissen, wie man Menüs für die LCD-Displays des Nokia 5110 erstellt, können wir unseren Projekten weitere Funktionen hinzufügen und sie benutzerfreundlicher gestalten. Dieses einfache Menü, das wir heute erstellt haben, kann jedoch verbessert werden. Wir könnten Interrupts verwenden, anstatt die Zustände der Schaltflächen ständig zu überprüfen. Auf diese Weise können wir den Stromverbrauch des Projekts reduzieren und den Code sauberer machen. Ich werde bald ein Video zu Unterbrechungen vorbereiten, also bleiben Sie dran. Ich würde gerne Ihre Meinung zu diesem Menüprojekt hören. Finden Sie es nützlich und planen Sie, ein Menü in einem Ihrer Projekte zu verwenden? Bitte posten Sie Ihre Gedanken und Ideen unten, danke!

Code

• Code-Snippet 2

Code-Snippet #2Kurztext

String menuItem1 ="Kontrast";String menuItem2 ="Lautstärke";String menuItem3 ="Sprache";String menuItem4 ="Schwierigkeit";String menuItem5 ="Licht:EIN";String menuItem6 ="Reset";Boolesche Hintergrundbeleuchtung =true;int Kontrast=60;int volume =50;String language[3] ={ "EN", "ES", "EL" };int selectedLanguage =0;String Schwierigkeit[2] ={ "EASY", "HARD " };int selectedSchwierigkeit =0;

Github