Einführung in das OLED Display und Tastenfeld Modul für Arduino mit Beispielprojekt

Wie du das OLED Display mit 4×4 Tastenfeld am Arduino programmierst, möchte ich dir hier in meinem neuen Beitrag zeigen.

OLED-Display mit 4x4 Tastenfeld für den Arduino, ESP oder Raspberry Pi

Dieses Video auf YouTube ansehen.

Das Modul habe ich auf aliexpress.com gefunden und fand dieses gleich sehr praktisch, da man damit recht einfach zum Beispiel einfache Passwort abfragen, generieren oder Daten Seitenweise anzeigen lassen kann.

Inhaltsverzeichnis

• Aufbau des Moduls – OLED Display mit 4×4 Tastenfeld
  • Technische Daten
  • Pinout des Moduls
• Anschluss an den Arduino UNO R3
• Programmieren des Moduls in der Arduino IDE
  • Beispiel – Passwortabfrage programmieren

Aufbau des Moduls – OLED Display mit 4×4 Tastenfeld

Das Modul verfügt wie erwähnt über ein OLED Display von 0,96″ sowie über ein 4×4 Tastenfeld, welches die Zahlen von 0 bis 9 und die Buchstaben A bis D, sowie die Sonderzeichen * und # darstellt.

Technische Daten

Bevor wir in das Beispielprojekt eintauchen, lohnt sich ein Blick auf die technischen Spezifikationen des OLED Displays. Das Tastenfeld verfügt über keine spezifischen Daten, daher werden diese nicht aufgeführt.

Abmessung	80 mm x 37 mm
Lochdurchmesser	3 mm
OLED Display
Treiberchip	SSD1315
Schnittstelle	I2C
Auflösung	128×64
Displaygröße	0,96 Zoll (2,44 cm)
Farbe
Abmessungen	24,7 mm x 27 mm

Pinout des Moduls

Das Modul hat 12 Pins, welche auf der Rückseite beschriftet sind. Diese sind aufgeteilt in OLED für die Pins des OLED-Displays sowie in Hang & Lie. Wobei ich denke das dieses in chinesisch für Zeile & Spalte steht.

Eine 4×4 Matrix Tastatur habe ich dir bereits im Beitrag Arduino Lektion 68: 4×4 Matrix Tastatur vorgestellt. Diese hier verbaute Tastatur ist sehr ähnlich.

Anschluss an den Arduino UNO R3

Für den Aufbau benötigst du:

• einen Arduino UNO R3*,
• ein passendes Datenkabel*,
• ein 400 Pin Breadboard*,
• 12 Breadboardkabel, männlich – männlich*

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!

Wenn du noch weitere Komponenten an deinen Mikrocontroller anschließen möchtest (oder musst) dann empfehle ich dir den Arduino Mega 2560 R3 dieser hat deutlich mehr Pins als der UNO R3 und somit vielseitiger.

Das Modul habe ich wie folgt an den Arduino UNO R3 angeschlossen:

Pin Beschriftung	Arduino UNO R3
Zeilen
R4	digitaler Pin D9
R3	digitaler Pin D8
R2	digitaler Pin D7
R1	digitaler Pin D6
Spalten
C4	digitaler Pin D2
C3	digitaler Pin D3
C2	digitaler Pin D4
C1	digitaler Pin D5
OLED Display
SDA	SDA oder analoger Pin A4
SCL	SCL oder analoger Pin A5
VCC	3.3 V
GND	GND

Programmieren des Moduls in der Arduino IDE

Zum Programmieren des Arduino UNOs verwende ich die Arduino IDE 2.3.2 welche du unter https://www.arduino.cc/en/software kostenfrei herunterladen kannst. Zusätzlich benötigst du noch zwei Bibliotheken, um mit dem Display und dem 4×4 Tastenfeld arbeiten zu können.

Im oben verlinkten YouTube-Video wird ausführlich erklärt, wie das Modul korrekt angeschlossen und in der Arduino IDE programmiert wird. Alternativ kannst du den Programmcode auch direkt hier herunterladen.

Beispiel – Passwortabfrage programmieren

Das Modul lässt sich super einfach als Eingabefeld für eine Passwortabfrage nutzen. Die Komplexität ist durch die möglichen Eingaben von 0 bis 9 und A bis D beschränkt, jedoch reicht dieses ja auch für eine geringe Sicherheit aus.

Zusätzlich verbaue ich noch:

• einen Piezo Buzzer*,
• zwei 5 mm LED*s (inkl. 220 Ohm Vorwiderstand),
• sechs Breadboardkabel*, männlich – männlich, 10 cm

Da ich durch die LEDs sowie dem Piezo Buzzer etwas mehr Platz benötige, habe ich vom 400 Pin Breadboard zu einem 830 Pin Breadboard* gewechselt.

Bauteil	Arduino UNO R3
LED, rot
Anode	digitaler Pin D11
Kathode	GND
LED, grün
Anode	digitaler Pin D12
Kathode	GND
Piezo Buzzer
Pin 1	digitaler Pin D10
Pin 2	GND

Das Programm zum abfragen des Passwortes am Arduino UNO R3 kannst du dir nachfolgend als ZIP-Datei herunterladen.

Nachfolgend der Code:

//Bibliothek zum interagieren mit dem 4x4 Tastenfeld
#include <Keypad.h>

//Bibliotheken zum kommunizieren mit dem Display
#include <SPI.h>
#include <Wire.h>
#include <Adafruit_GFX.h>
#include <Adafruit_SSD1306.h>

//Auflösung des Displays mit 128 x 64 Pixel
#define SCREEN_WIDTH 128
#define SCREEN_HEIGHT 64

//kein RESET Pin angeschlossen
#define OLED_RESET -1

//Adresse des Displays (default)
#define SCREEN_ADDRESS 0x3C

//Instanz des Displays mit der Konfiguration erzeugen
Adafruit_SSD1306 display(SCREEN_WIDTH, SCREEN_HEIGHT, &Wire, OLED_RESET);

//Keypad hat 4 Zeilen & 4 Spalten
const byte COLS = 4;
const byte ROWS = 4;

//Definieren der Pins, über welche die Matrix Tastatur
//mit dem Microcontroller verbunden wurde.
const byte COL_PINS[COLS] = { 5, 4, 3, 2 };
const byte ROW_PINS[ROWS] = { 6, 7, 8, 9 };

//Da der Datentyp char nur ein Zeichen aufnehmen kann,
//verwende ich ab der Zahl 10 die Buchstaben A bis G.
const char KEYS[ROWS][COLS] = {
  { '1', '2', '3', 'A' },
  { '4', '5', '6', 'B' },
  { '7', '8', '9', 'C' },
  { '*', '0', '#', 'D' }
};

Keypad myKeypad = Keypad(makeKeymap(KEYS), ROW_PINS, COL_PINS, ROWS, COLS);

//Das Passwort welches abgefragt werden soll.
const String PASSWORD = "A1B6C4";
//Die aktuelle Eingabe.
String currentInput = "";

//Pins für den Piezo Buzzer under der LEDs
#define buzzer 10
#define ledGruen 11
#define ledRot 12

//Feld zum speichern ob der Login erfolgreich war
bool isLoggedIn = false;

void setup() {
  //beginn der seriellen Kommunikation mit 9600 baud
  Serial.begin(9600);

  //definieren das die Pins der Komponenten als Ausgang dienen
  pinMode(ledRot, OUTPUT);
  pinMode(ledGruen, OUTPUT);
  pinMode(buzzer, OUTPUT);

  //initial soll die rote LED leuchten
  digitalWrite(ledRot, HIGH);
  digitalWrite(ledGruen, LOW);

  //beginn der Kommunikation mit dem Display
  //am Anfang wird zunächst das Logo von Adafruit angezeigt
  display.begin(SSD1306_SWITCHCAPVCC, SCREEN_ADDRESS);
  display.display();
  delay(15);
  //starten mit der Abfrage des Passwortes
  paintPasswordDialog();
}

//Funktion zum anzeigen des Passwortdialogs
void paintPasswordDialog() {
  //Bildschirm leeren
  display.clearDisplay();
  //ein Rechteck zeichnen
  display.drawRect(10, 0, 100, 30, SSD1306_WHITE);

  //ein gefülltes Rechteck zeichnen
  display.fillRect(10, 40, 40, 18, SSD1306_WHITE);
  //Schriftgröße 1
  display.setTextSize(1);
  //Textfarbe schwarz
  display.setTextColor(SSD1306_BLACK);
  display.setCursor(15, 45);
  display.println("OK (*)");

  //ein gefülltes Rechteck zeichnen
  display.fillRect(60, 40, 50, 18, SSD1306_WHITE);
  //Schriftgröße 1
  display.setTextSize(1);
  //Textfarbe schwarz
  display.setTextColor(SSD1306_BLACK);
  display.setCursor(65, 45);
  display.println("DEL (#)");

  repaintPasswordText();
  display.display();
}

//Funktion zum schreiben der aktuellen Eingabe in das
//Passwortfeld.
//Zusätzlich wird zuvor die alte Eingabe gelöscht.
void repaintPasswordText() {
  //zeichnen eines schwarzen rechtecks in das Passwortfeld
  //damit wird die alte Eingabe gelöscht / überschrieben
  display.fillRect(11, 2, 96, 24, SSD1306_BLACK);
  display.setTextSize(1);
  display.setTextColor(SSD1306_BLACK);

  //schreiben der aktuellen Eingabe in das Passwortfeld
  display.setTextSize(2);
  display.setTextColor(SSD1306_WHITE);
  display.setCursor(18, 8);
  display.println(currentInput);

  display.display();
}

//Funktion zum anzeigen des Textes "Correct!" auf dem Display
void passwordCorrect() {
  display.clearDisplay();
  display.setTextSize(2);
  display.setTextColor(SSD1306_WHITE);
  display.setCursor(18, 20);
  display.println("Correct!");
  display.display();
}

//Zeichnen eines Buttons mit der Beschriftung "LOGOFF (#)"
void logoffButton() {
  display.fillRect(55, 45, 65, 18, SSD1306_WHITE);
  display.setTextSize(1);
  display.setTextColor(SSD1306_BLACK);
  display.setCursor(60, 50);
  display.println("LOGOFF (#)");
}

void loop() {
  //lesen ob eine Taste gedrückt wurde
  char key = myKeypad.getKey();
  //Wenn eine Taste gedrückt wurde,
  //dann den Wert auf der seriellen Konsole
  //Ausgeben.
  if (key) {
    //Ausgeben der Taste auf der seriellen Schnittstelle
    Serial.print("Die Taste ");
    Serial.print(key);
    Serial.println(" wurde gedrueckt");

    //ausgeben eines Tones am Piezo Buzzer
    tone(buzzer, 1000, 100);

    //Wenn das Feld iLoggedIn gleich False ist, dann...
    if (!isLoggedIn) {
      //Wenn die gedrückte Taste keine der Funktionstaten ist, dann...
      if (key != '*' && key != '#') {
        //Nur wenn die länge der aktuellen Eingabe kleiner als 7 ist
        //dann soll das gedrückte Zeichen der Eingabe hinzugefügt werden.
        if (currentInput.length() < 7) {
          currentInput = currentInput + key;
          //Neuzeichnen der Eingabe
          repaintPasswordText();
        }
      }
      //Wenn die Taste mit dem Stern betätigt wird, dann...
      if (key == '*') {
        //prüfen ob die Eingabe mit dem Wert aus dem Feld
        //PASSWORD gleich ist.
        if (currentInput == PASSWORD) {
          //leeren der Eingabe
          currentInput = "";
          //rote LED deaktivieren, grüne LED aktivieren
          digitalWrite(ledRot, LOW);
          digitalWrite(ledGruen, HIGH);
          //anzeigen des Textes "Correct!"
          passwordCorrect();
          //ausgeben einer kleinen Tonfolge
          tone(buzzer, 800, 275);
          tone(buzzer, 1200, 175);
          tone(buzzer, 800, 275);
          //das Feld isLoggedIn auf true setzen
          isLoggedIn = true;
          //eine kleine Pause
          delay(1000);
          //leeren des Displays
          display.clearDisplay();
          //zeichnen des Logoff Buttons
          logoffButton();
          //absenden der Daten
          display.display();
        } else {
          //Wenn die aktuelle Eingabe ungleich des Passwortes ist,
          //dann soll eine andere Tonfolge erfolgen.
          tone(buzzer, 200, 275);
          tone(buzzer, 500, 175);
          tone(buzzer, 200, 275);
        }
      } else if (key == '#') { 
        //beim drücken der Taste # soll das letzte Zeichen gelöscht werden
        deleteLastSymbol();
      }
    } else {
      //Wenn der Loginvorgang erfolgreich war, dann soll die #-Taste für den
      //Logoff genutzt werden.
      if (key == '#') {
        //Feld isLoggedIn auf false setzen
        isLoggedIn = false;
        //rote LED aktivieren, grüne LED deaktivieren
        digitalWrite(ledRot, HIGH);
        digitalWrite(ledGruen, LOW);
        //zeichnen des Passwortdialoges
        paintPasswordDialog();
      }
    }
  }
}

//Funktion zum löschen des letzten Zeichens aus der aktuellen Eingabe.
void deleteLastSymbol() {
  //Nur wenn die Länge der Eingabe größer als 0 ist.
  if (currentInput.length() > 0) {
    //überschreiben des Wertes des Feldes "currentInput" mit einem 
    //ausschnitt aus dem Feld "currentInput",
    //Start - 0
    //Ende - länge der Eingabe - 1
    currentInput = currentInput.substring(0, currentInput.length() - 1);
    //neuzeichnen der Eingabe
    repaintPasswordText();
  }
}