LCD Display HD44780 I2C am ESP8266 D1 Mini - Tutorial



  • Um in einem Projekt Feedback zu geben gibt es veschiedene Möglichkeiten. Eine davon wäre zum Beispiel ein LCD Display - genauer gesagt das HD44780 LCD Display. Das LCD Display gibt es in verschiedenen Ausführungen. Mit blauer und grüner Hintergrundbeleuchtung und mit I2C Bus sowie ohne. In diesem Tutorial behandeln wir die Einrichtung des HD44780 16x2 LCD Displays am ESP8266 D1 Mini und zwar das mit I2C Bus.

    ESP8166 D1 Mini LCD Display HD44780 I2C Tutorial

    Die Bezeichnung 16x2 bezieht sich übrigens auf die Ausführung des Displays. 16x2 bedeutet hier so viel wie 16 Zeichen je Zeile, bei zwei Zeilen. Dieses Tutorial kann genauso gut bei einem 20x4 Display angewendet werden.

    Falls ihr das Tutorial direkt nachbauen wollt, hab ich hier mal einen Warenkorb für euch bereitgestellt - genau die selben Produkte aus dem makesmart.shop verwende ich auch immer in meinen Tutorials.


    LCD LiquidCrystal I2C - Arduino IDE Bibliothek hinzufügen

    Wie bei fast allen Modulen muss auch für das HD44780 LCD Display eine Bibliothek in der Arduino IDE installiert werden. Das Installieren einer Bibliothek geht über den Bibliotheksverwalter. Ihr erreicht ihn über das Menü der Arduino IDE. Die Bibliothek trägt den Namen LiquidCrystal I2C und stammt von Frank de Brabander. Eventuell müsst ihr nach der Sucheingabe etwas nach unten scrollen (siehe Bild).

    Arduino IDE
    └───Werkzeuge
        └───Bibliotheken verwalten...
            └───LiquidCrystal I2C
    
    

    Arduino IDE - LCD I2C Libary - LiquidCrystal I2C


    LCD Display HD44780 I2C - Die Verdrahtung

    Die Verdrahtung des HD44780 16x2 LCD Display gestaltet sich dank dem I2C Modul denkbar einfach. Dementsprechend muss auch der I2C Bus am D1 Mini genutzt werden. Ein Blick auf das Datenblatt verrät wo.

    ESP8266 D1 Mini Pinout

    HD44780 LCD Display - Schaltplan ESP8266 D1 Mini

    HD44780 LCD Display I2C Modul ESP8266 D1 Mini
    GND G
    VCC 5V
    SDA D2 (SDA)
    SCL D1 (SCL)

    LCD Display HD44780 I2C - Der Code

    Nachdem die Bibliothek installiert und das LCD Display verdrahtet wurde kommt jetzt der eigentlich wichtige teil: Der Code. Ich starte wie immer direkt mit einem Beispiel welches ihr als Basis für eure LCD-Projekte verwenden könnt. Der Code wurde detailliert kommentiert, sodass die Erklärungen aus dem Code entnommen werden können.

    /*
     * 
     * LCD-Display Beispiel by cooper @ my.makesmart.net
     * released under CC - CC by cooper @ my.makesmart.net
     * 
     */
    
    // Benötigte Libary einbinden
    #include <LiquidCrystal_I2C.h>
    
    
    // LCD-Display Konfiguration
    // Standard LCD-Adresse ist 0x27 - 16 zeichen - 2 Zeilen 
    LiquidCrystal_I2C lcd(0x27,16,2);
    
    
    void setup()
    {
      // LCD-Display initialisieren
      lcd.init();
    
      // Schlatet die Hintergrundbeleuchtung des LCD-Displays an
      lcd.backlight();
    
      // würde die Hintergrundbeleuchtung ausschalten
      // lcd.noBacklight();
    
      // Startpunkt der Ausgabe setzen. Starte bei Zeichen 0, Zeile 0
      lcd.setCursor(0,0);
      lcd.print("makesmart");
    
      // Startpunkt der Ausgabe setzen. Starte bei Zeichen 0, Zeile 1
      lcd.setCursor(0,1);
      lcd.print("cooper");
    
    }
    
    
    void loop(){  
    }
    

    Folgende Zeile bezieht sich auf die Ausführung des LCD Displays. Ich verwende wie bereits erwähnt ein 16x2 LCD Display. Bei der 20x4 Ausführung kann die Zeile einfach angepasst werden.

    // LCD-Display Konfiguration
    // Standard LCD-Adresse ist 0x27 - 16 zeichen - 2 Zeilen 
    LiquidCrystal_I2C lcd(0x27,20,4);
    

    Nach dem Aufspielen auf den ESP8266 D1 Mini erscheint folgende Ausgabe auf dem LCD Display…

    hd44780_lcd_example.png

    Um den Text vom LCD-Display zu löschen, kann die Funktion clear() verwendet werden.

    lcd.clear();
    

    Weitere Funktionen der Libary

    Neben der Funktion lcd.print("cooper"); gibt es weitere Funktionen, mit denen man das LCD Display vielseitig verwenden kann.


    scrollDisplayLeft() - scrollDisplayRight()

    Mit den beiden Funktionen scrollDisplayLeft() und scrollDisplayRight() kann man den aktuellen Text auf dem LCD-Display sehr leicht und ohne Aufwand scrollen lassen.

    void loop(){
    
     lcd.scrollDisplayLeft();
     delay(100);
    
    }
    

    HD44780 LCD Display - scrollDisplayLeft()


    blink() - noBlink()

    Diesmal keine Led, sondern ein Cursor. Mit den beiden Funktionen blink() und noBlink() kannst du dir wahsweise einen blinkenden Cursor anzeigen lassen, oder eben nicht.

    // Zeigt einen blinkenden Cursor am Ende der letzten Textzeile an
    lcd.blink();
    // Versteckt den blinkenden Cursor am Ende der letzen Textzeile
    lcd.noBlink();
    

    HD44780 LCD Display - blink() noBlink()


    display() - noDisplay()

    Die Funktion noDisplay() versteckt den Text auf dem LCD-Display. Im Gegensatz zu der Funktion clear() wird der Text nicht gelöscht, sondern kann einfach wieder mithilfe der Funktion display() angezeigt werden.

    void loop(){
       lcd.display();
       delay(1000);
       lcd.noDisplay();
       delay(1000);
    }
    
    

    HD44780 LCD Display - display() noDisplay()


    Umlaute

    Wenn man versucht mithilfe von lcd.print("Folgt für mehr"); den Text auf das LCD-Display zu kriegen wird man sehen, dass das ü fehlerhaft angezeigt wird. Umlaute können wie folgt ausgegeben werden:

    lcd.print("Folgt f\xF5r mehr");
    
    lcd.print("\xE1"); // gibt ein ä aus
    lcd.print("\xEF"); // gibt ein ö aus
    lcd.print("\xF5"); // gibt ein ü aus
    lcd.print("\xE2"); // gibt ein ß aus
    

    Spezielle (& eigene) Zeichen

    Um spezielle Zeichen wie Smileys, Herzen oder auch Glocken anzeigen zu können, müssen diese erst in einem byte Array definiert werden. Eine tolle Seite zum erstellen eigene Zeichen findest zu hier: LCD Custom Character Generator

    Im folgenden Beispiel habe ich mir ein Herz “gezeichnet”.

    byte heart[] = {
      B00000,
      B00000,
      B01010,
      B11111,
      B11111,
      B01110,
      B00100,
      B00000
    };
    
    /*
     * 
     * LCD-Display Beispiel by cooper @ my.makesmart.net
     * released under CC - CC by cooper @ my.makesmart.net
     * 
     */
    
    #include <LiquidCrystal_I2C.h>
    
    LiquidCrystal_I2C lcd(0x27,16,2);
    
    byte heart[] = {
      B00000,
      B00000,
      B01010,
      B11111,
      B11111,
      B01110,
      B00100,
      B00000
    };
    
    
    void setup()
    {
      lcd.init();
      lcd.backlight();
    
      lcd.setCursor(7,0);
      lcd.print("makesmart");
    
      lcd.setCursor(0,0);
      lcd.print("cooper");
    
    
      // Neues Zeichen erstellen mit der Nummer 5
      lcd.createChar(5, heart);
    }
    
    
    void loop(){
    
      
      lcd.setCursor(6,0);
      // Zeichen an Position ausgeben
      lcd.write(5);
      
      delay(1000);
      
      lcd.setCursor(6,0);
      // Zeichen an Position wieder löschen
      lcd.print(" ");
      
      delay(1000);
    }
    

    HD44780 LCD Display - Ausgabe von Sonderzeichen