Interaktive Menüs am Arduino: So steuerst du dein OLED Display mit einem Drehregler
Im letzten Beitrag habe ich dir gezeigt, wie du das OLED Display mit Drehregler (EC11) am Arduino anschließt und programmierst. In diesem Artikel gehen wir einen Schritt weiter: Wir bauen ein komplettes Menüsystem, das du mit dem Drehregler bequem durchscrollen und über die Tasten bedienen kannst. So lassen sich Werte einstellen, Funktionen aktivieren oder ganze Untermenüs aufrufen – ganz wie bei professionellen Geräten.
https://youtu.be/7bkssJSkZm8
Das Projekt eignet sich perfekt, um Menüstrukturen und Benutzerinteraktionen am Arduino zu verstehen und in eigenen Projekten umzusetzen.
Was wird für die Schaltung benötigt?
Für diese kleine Schaltung verwende ich:
- einen Arduino UNO R3*, - vier 10mm LEDs*, mit 220 Ohm Vorwiderstand*, - diverse Breadboardkabel*, - zwei 400 Pin Breadboard*, - das OLED Display Modul mit Drehregler*
Hinweis von mir: Die mit einem Sternchen (*) markierten Links sind Affiliate-Links. Wenn du über diese Links einkaufst, erhalte ich eine kleine Provision, die dazu beiträgt, diesen Blog zu unterstützen. Der Preis für dich bleibt dabei unverändert. Vielen Dank für deine Unterstützung!
Aufbau der Schaltung
Bevor wir mit dem Programm beginnen, schauen wir uns den Aufbau der Schaltung an. Das OLED-Display wird über die I²C-Schnittstelle mit dem Arduino verbunden, während der EC11-Drehregler zwei digitale Pins zur Erkennung der Drehrichtung und einen weiteren Pin für die Tasterfunktion (Push) nutzt. Über diese Kombination lässt sich später bequem durch das Menü navigieren und eine Auswahl treffen.
Schaltung - Arduino mit OLED Display und Rotary Encoder Modul und LEDs auf Breadboard
Zusätzlich sind auf dem Board noch zwei separate Taster verbaut – Confirm und Back –, die wir ebenfalls in unser Menüsystem integrieren können. So lässt sich das Menü nicht nur über den Drehregler bedienen, sondern bei Bedarf auch über klassische Tasten steuern. Die vier farbigen LEDs werden schließlich an eigene Pins angeschlossen und zeigen den aktuellen Zustand der jeweiligen Menüpunkte an.
Schaltung - Arduino UNO - OLED Display Rotary Encoder
Quellcode
Nachdem der Aufbau steht, kümmern wir uns nun um die Programmierung.
Damit der Arduino den Drehregler (EC11) korrekt auslesen und das OLED-Display mit SH1106-Treiber ansteuern kann, benötigen wir zwei Bibliotheken:
- Bibliothek zum Auslesen des Rotary Encoders Für den Rotary Encoder gibt es verschiedene Bibliotheken. Ich habe mit der Variante von CarlosSiles67 sehr gute Erfahrungen gemacht. Diese kannst du direkt von GitHub unter 👉 https://github.com/CarlosSiles67/Rotary als ZIP-Datei herunterladen und anschließend über den Bibliotheksverwalter in der Arduino IDE installieren. - Bibliothek zum Ansteuern des Displays Das verwendete OLED-Display nutzt den SH1106-Treiberchip, weshalb wir die passende Adafruit_SH110x-Bibliothek benötigen. Du findest sie entweder auf GitHub unter 👉 Adafruit / Adafruit_SH110x oder ganz bequem über den Bibliotheksverwalter der Arduino IDE durch die Suche nach „Adafruit SH110x“.
Sind beide Bibliotheken installiert, kann der folgende Code direkt auf deinen Arduino geladen werden.
/******************************************************* * Projekt: Interaktive Menüs am Arduino * Titel: OLED Display mit Drehregler (EC11) – Menüsteuerung * Beschreibung: * Dieses Beispiel zeigt, wie man mit einem EC11-Drehregler * (Rotary Encoder) und einem OLED-Display (SH1106) ein * interaktives Menü erstellt. * Durch Drehen des Reglers navigierst du durch die Menüpunkte, * und mit einem Druck auf den Encoder schaltest du die jeweilige LED ein oder aus. * * Verwendete Hardware: * - Arduino (UNO, Nano oder kompatibel) * - OLED-Display mit SH1106-Treiber (I2C) * - EC11 Drehregler mit Push-Button * - 4 LEDs (blau, gelb, rot, grün) * * Weitere Informationen und Anleitung: * https://draeger-it.blog/interaktive-menues-am-arduino-so-steuerst-du-dein-oled-display-mit-einem-drehregler/ * * Autor: Stefan Draeger *******************************************************/ #include #include #include #include #include // --- LED Pins definieren --- #define ledBlau 11 #define ledGelb 10 #define ledRot 9 #define ledGruen 8 // --- Zusätzliche Buttons (optional) --- #define confirmBtn 7 #define backBtn 6 // --- Drehregler Pins --- #define tra 4 #define trb 3 #define push 2 // Rotary-Objekt initialisieren Rotary rotary = Rotary(tra, trb, push); // --- OLED Display Setup --- #define i2c_Address 0x3c Adafruit_SH1106G display = Adafruit_SH1106G(128, 64, &Wire, -1); // --- Menüdefinition --- String menu = { "LED blau", "LED gelb", "LED rot", "LED gruen" }; // --- Status und Pins der LEDs --- int ledStatus = { 0, 0, 0, 0 }; int ledPins = { ledBlau, ledGelb, ledRot, ledGruen }; // --- Menüposition --- int menuIndex = 0; void setup() { Serial.begin(9600); display.begin(i2c_Address, true); display.clearDisplay(); // LEDs als Ausgang konfigurieren pinMode(ledBlau, OUTPUT); pinMode(ledGelb, OUTPUT); pinMode(ledRot, OUTPUT); pinMode(ledGruen, OUTPUT); // Erstes Menü anzeigen displayMenu(); } /** * Anzeige des Menüs auf dem OLED-Display * Der aktuell gewählte Menüpunkt wird invertiert dargestellt. * Links neben jedem Eintrag wird ein Kreis angezeigt, * der den Status der jeweiligen LED symbolisiert. */ void displayMenu() { int menuOffsetX = 30; int menuOffsetY = 10; display.clearDisplay(); display.setTextSize(1); display.drawRect(2, 2, 126, 62, SH110X_WHITE); // Rahmen for (int i = 0; i invertierte Darstellung if (menuIndex == i) { display.setTextColor(SH110X_BLACK); display.fillRect(menuOffsetX - 2, y - 2, 60, 11, SH110X_WHITE); } else { display.setTextColor(SH110X_WHITE); } // Statuskreis zeichnen display.drawCircle(menuOffsetX - 10, y + 3, 5, SH110X_WHITE); if (ledStatus == 1) { // LED an -> kleiner Punkt im Kreis display.fillCircle(menuOffsetX - 10, y + 3, 2, SH110X_WHITE); } // Menütext ausgeben display.println(menu); } display.display(); } /** * Aktualisiert den Zustand der LEDs entsprechend der gespeicherten Werte */ void updateLEDs() { for (int index = 0; index < 4; index++) { digitalWrite(ledPins, ledStatus); } } /** * Hauptschleife: * - Drehen des Reglers bewegt den Auswahlindex im Menü * - Drücken des Reglers toggelt die jeweilige LED */ void loop() { unsigned char currentPosition = rotary.process(); bool action = false; // Nach unten scrollen (Drehung im Uhrzeigersinn) if (currentPosition == rotary.clockwise()) { if (menuIndex 0) { menuIndex--; action = true; } } // Druck auf den Drehregler -> LED toggeln if (rotary.buttonPressedReleased(20)) { ledStatus = ledStatus == 0 ? 1 : 0; action = true; } // Wenn sich etwas geändert hat -> neu zeichnen und LEDs updaten if (action) { displayMenu(); updateLEDs(); } }
