Bauteile: 0,96" OLED-Display
| Bastelseite Display + Antriebe Sensoren C++ | |
Übersicht
0,96" OLED-Display
OLED-Display mit I2C und 0,96 Zoll, sowie 128 x 64 Pixel
Durch die Ausführung von I2C benötigt das OLED-Display nur vier Anschlüsse: Plus und Minus Stromversorgung, sowie SCL und SDA.
SCL an Pin A5 und SDA an Pin A4
Es hat eine Auflösung von 128 x 64 Pixel - einfarbig.
Die benötigten Treiber:
Adafruit_GFX.h
Adafruit_SSD1306.h
Es ist erstaunlich, was alles damit darstellbar ist!
Die Installation
Treiber-Installation
Nach dem Auspacken des kleinen Displays kommt noch ein Hinweis-Kärtchen raus, auf dem die Links der noch fehlenden Bibliotheken vermerkt sind: Adafruit_GFX.h und Adafruit_SSD1306.h. Diese können direkt bei Adafruit herunter geladen werden:
https://github.com/adafruit/Adafruit-GFX-Library
und dann noch
https://github.com/adafruit/Adafruit_SSD1306
Die Anschlüsse
Da es ein IIC - oder auch I2C - Display ist, verläuft die Verkabelung mit nur zwei Anschlüssen recht einfach, neben 5 Volt und Ground. Die beiden Anschlüsse sind SCL und SDA.
Am UNO R3 kommt SCL an Pin A5 und SDA an Pin A4 .
GND +5V A5 A4
Display-Auflösung
Mit den Libraries wurden auch ein paar zusätzliche Demos installiert. Diese sind auf der IDE zu finden unter: Datei / Beispiele / Adafruit SSD1306 / … ssd 1306_128x64_i2c.
Angeklickt und kompiliert .... Fehlermeldung! Siehe rechts
#if (SSD1306_LCDHEIGHT != 64)
#error("Height incorrect, please fix Adafruit_SSD1306.h!");
#endif
Ich dachte mir nichts dabei und setzte diese 3 Zeilen im Sketch als Kommentar mittels //
Nun funktionierte es! Wirklich alles? Leider nein!
Denn ich hatte den Verdacht, dass die Demodatei nur zur oberen Hälfte angezeigt wurde! Also wieder suchen im Netz ….
Die Lösung:
Abhängig von der Display Größe, müssen in der Adafruit_SSD1306.h noch die unpassenden Displaygrößen ausgeklammert werden.Also unter meinem Lieblingseditor Notepad++ (https://notepad-plus-plus.org/) die Datei C:\Arduino\libraries\ Adafruit_SSD1306.h zum Editieren geladen:
Hier ist folglich die Auflösung 128x32 voreingestellt!
// #define SSD1306_128x64
#define SSD1306_128x32
// #define SSD1306_96x16
Die Zeilen mit // sind deaktiviert, die Zeile ohne // ist aktiv!
Nach der Änderung auf
#define SSD1306_128x64
// #define SSD1306_128x32
// #define SSD1306_96x16
muß die Datei nur noch gespeichert werden!
Zur Aktivierung die IDE bitte neu starten. Und siehe da: alle 128x64 Pixel sind nun zu meiner vollsten Zufriedenheit sichtbar!
Erste Schritte
Kopieren
Es können auch zwei Fenster mit der IDE gestartet werden: einfach auf NEU klicken! So kann aus dem Beispielsketch der Adafruit_1306 Bibliothek jetzt der jeweilige Ausschnitt kopiert werden. Dadurch entsteht ein halbfertiger Sketch, der durch eigene Zeilen ergänzt werden kann. Die Befehle der Adafruit GFX Bibliothek finden hier nun ihre Verwendung.
Verwendung des Displays
Am Anfang wird über den Befehl „display.clear();“ das Display gelöscht.Gleich danach können über „display.befehl();“ die Zeichenbefehle eingegeben werden.
Um sie sichtbar zu machen, wird noch „display.display();“ benötigt.
Für die Betrachtungsdauer dient der „delay(x);“ – Befehl
| // OLED Funktionstest | Erklärungen dazu: |
| #include <Wire.h> | Bibliothek laden |
| #include <Adafruit_GFX.h> | Bibliothek laden |
| #include <Adafruit_SSD1306.h> | Bibliothek laden |
| #define SCREEN_ADDRESS 0x3C | // meine Adresse vom Display |
| Adafruit_SSD1306 display(128, 64, &Wire, 4); | Initialisieren und Starten des Display |
| void setup() { | SETUP |
| display.begin(SSD1306_SWITCHCAPVCC, 0x3C); | Display initialisieren |
| } | SETUP abschließen |
| void loop() { | LOOP starten |
| display.clearDisplay(); | Display löschen |
| display.setTextColor(WHITE); | Textfarbe setzen |
| display.setTextSize(1); | Textgroesse setzen |
| display.setCursor(7, 12); | Cursor setzen für den Text |
| display.println("Hallo Welt"); | Text anzeigen |
| display.display(); | Alle vorher genannte Befehle ausführen und anzeigen |
| delay(4000); | Betrachtungsdauer |
| display.clearDisplay(); | Display wieder löschen |
| } | LOOP abschließen |
Das Koordinatensystem
Das Koordinatensystem bei diesem Display hat eine Größe von 128 x 64 Punkten/Pixel.
Die Breite beträgt 128 Punkte und stellt die X-Achse dar. Dieser Wert wird immer als erster genannt.Die Höhe wird mit 64 Punkten beziffert und betrifft die Y-Achse. Dieser Wert wird immer als zweiter genannt.
Angesprochen werden sie jedoch von 0 bis 127 und von 0 bis 63. Typisch Computer …
Außerdem ist zu beachten: Der Startpunkt von beiden Achsen ist immer links oben = (0,0). Die sogenannte Höhe geht also nach unten ...
Die Farbwerte ???
Da das OLED-Display monochrom, also nur eine Farbe darstellen kann, gibt es nur zwei Möglichkeiten zur Auswahl:
0 entspricht keine Farbe, |
1 lässt die Farbe leuchten, |
Normalerweise ist der Hintergrund nach dem Initialisieren schwarz. Die helle Schrift hebt sich hervorragend dadurch ab. Selbstverständlich ist auch ein weißer Hintergrund möglich, z.B. über ein helles Rechteck, das über die gesamte Bildfläche reicht. Hier lassen sich dann gut schwarze Zeichen in Fettschrift anzeigen.
Außerdem ist es völlig unerheblich ob bei der Farbangabe "1" oder "WHITE, sowie "0" oder "BLACK" angegeben wird.
Punkt/Pixel zeichnen
Hierfür dient der Befehl display.drawPixel(x, y, Farbe); .
Die X-Koordinate (0-123) bestimmt die Spalte und die Y-Koordinate (0-63) die Zeile in der der Punkt stehen soll.
Für die Farbe geben wir ein schlichtes WHITE ein. Dadurch kommt nun an der angegebenen Stelle das Pixel in Weiss zum Leuchten.
Beispiel:
display.drawPixel(0, 0, WHITE); ergibt den Punkt links oben.
display.drawPixel(127, 63, WHITE); ergibt den Punkt rechts unten.
Eine Linie zeichnen
Um eine Linie zu zeichnen werden die Koordinaten des Startpunktes (X-Start und Y-Start) und die des Endpunktes (X-Ende und Y-Ende) benötigt. Ferner wird die Farbe noch angegeben:
display.drawLine(X-Start, Y-Start, X-Ende, Y-Ende, Farbe);
Beispiel:
display.drawLine(0, 63, 127,0, WHITE); ergibt die Diagonale (1).
display.drawLine(0, 63, 127, 30, WHITE); ergibt die andere Linie (2).
Vertikale Linie zeichnen
Mit Hilfe des nachfolgenden Befehls ist es möglich eine vertikale Linie mit bestimmter Länge ab einem Startpunkt zu erzeugen:
display.drawFastVLine(x, y, Länge, Farbe);
Die Linie beginnt ab dem Startpunkt und führt die Länge nach unten aus.
Beispiel:
display.drawFastVLine(30, 0, 61, WHITE); ergibt die linke Linie.
display.drawFastVLine(60, 30, 30, WHITE); ergibt die rechte Linie.
Horizontale Linie zeichnen
Mit Hilfe des nachfolgenden Befehls ist es möglich eine horizontale Linie mit bestimmter Länge ab einem Startpunkt zu erzeugen:
display.drawFastHLine(x, y, Länge, Farbe);
Die Linie beginnt ab dem Startpunkt und führt die Länge nach rechts aus.
Beispiel:
display.drawFastHLine(0, 0, 61, WHITE); ergibt die obere Linie.
display.drawFastHLine(30, 30, 90, WHITE); ergibt die untere Linie.
Rahmen (leeres Rechteck) zeichnen
Dafür benötigen wir wieder einen Startpunkt, diesmal die linke obere Ecke des Rahmens.
Also X-linke obere Ecke und Y-linke obere Ecke. Ferner bedürfen wir der Breite und Höhe des Rahmens, sowie der Farbe. Somit lautet die Befehlszeile wie folgt:
display.drawRect(X-linkeobereEcke, Y-linkeobereEcke, Breite, Höhe, Farbe);
Zu beachten gilt, daß die angegebene Höhe des Rechtecks nach unten und nach rechts läuft!
Beispiel:
display.drawRect(0, 45, 30, 18, WHITE); ergibt das Rechteck links unten.
display.drawRect(60, 0, 62, 20, WHITE); ergibt das Rechteck rechts oben.
Rechteck (farbig gefüllt) zeichnen
Hier gelten wie bei „drawRect“ dieselben Eingabepunkte:
display.fillRect(X-linkeobereEcke, Y-linkeobereEcke, Breite, Höhe, Farbe);
Der einzige Unterschied besteht nun in der farblich ausgefüllten Fläche.
Beispiel:
display.fillRect(0, 0, 30, 22, WHITE); ergibt das Rechteck links oben.
display.fillRect(60, 22, 62, 20, WHITE); ergibt das Rechteck rechts unten.
Rahmen mit abgerundeten Ecken zeichnen
Dafür benötigen wir wieder die linke obere Ecke des Rahmens als Startpunkt für x und y. Also X-linkeobereEcke und Y-linkeobereEcke. Auch hier wird die Breite und Höhe des Rahmens benötigt. Den Radius anzugeben ist nun neu: dies ist der Radius der abgerundeten Ecken. Zuletzt wird die Farbe angefügt. Somit lautet die Befehlszeile wie folgt: display.drawRoundRect(X-linkeobereEcke, Y-linkeobereEcke, Breite, Höhe, Radius, Farbe);
Beispiel:
display.drawRoundRect(30, 20, 60, 22, 5, WHITE); ergibt das Rechteck.
Rechteck, farblich gefüllt, mit abgerundeten Ecken zeichnen
Befehlszeile wie beim Rahmen mit abgerundeten Ecken. Wieder statt „draw“ kommt auch hier wieder „fill“ zum Einsatz: display.fillRoundRect(X-linkeobereEcke, Y-linkeobereEcke, Breite, Höhe, Radius, Farbe);
Beispiel:
display.fillRoundRect(30, 20, 60, 22, 5, WHITE); ergibt das gefüllte Rechteck.
Einen Kreis zeichnen
Der Startpunkt wird wieder über x und y angegeben, der den Mittelpunkt des Kreises darstellt. Gefolgt von der Radiusangabe und Farbe ist der Befehl fertig: display.drawCircle(x, y, Radius, Farbe);
Beispiel:
display.drawCircle(64, 34, 14, WHITE); ergibt den Kreis.
(64, 34, ... ergibt ungefähr die Mitte des Displays.
Kreis (farblich gefüllt) zeichnen
Gleiche Befehlsfolge wie beim einfachen Kreis, jedoch „fill“ statt „draw“: display.fillCircle(x, y, Radius, Farbe);
Beispiel:
display.fillCircle(64, 34, 14, WHITE); ergibt den gefüllten Kreis.
Dreieck zeichnen
Dies ist der einfachste der schwierigen Befehle: einfach dreimal die Koordinatenpunkte angeben und mit Farbangabe abschließen: display.drawTriangle( x1,y1, x2,y2, x3,y3, Farbe);
Beispiel:
display.drawTriangle(20, 30, 75, 0, 63, 64, WHITE); ergibt das Dreieck.
Dreieck (farblich gefüllt) zeichnen
Und wieder kommt „fill“ statt „draw“ zum Zuge. Befehlsfolge siehe beim Dreieck. display.fillTriangle( x1,y1, x2,y2, x3,y3, Farbe);
Beispiel:
display.fillTriangle(20, 30, 75, 0, 63, 64, WHITE); ergibt das gefüllte Dreieck.
Text anzeigen
Der einfache integrierte Zeichensatz benötigt für ein jedes Zeichen 5 x 8 Pixel in der Größe 1. Bei Größe 2 sind dies bereits 10 x 16 Pixel.
Über display.setCursor wird die linke obere Ecke des Zeichens angegeben, über setTextSize die Größe. Mit setTextColor folgt noch die Farbangabe.
Mittels display.print („ hier kommt Text rein“ ); können wir den zu erscheinenden Text vorgeben. Der Cursor bleibt hinter dem letzten Zeichen stehen.
display.println ("noch mehr Text"); läßt dafür den Cursor in die nächste Zeile springen.
Mit dem Befehl display.write( Zahl ); können einzelne ASCII-Zeichen, die auch die deutschen Umlaute enthalten, eingegeben werden. Diese gibt es als PDF unter: https://lubasch.ch/wp-content/uploads/2015/01/ascii_tabelle.pdf
|
display.setCursor( 5,15 ); display.setTextSize(2); display.setTextColor(WHITE); display.print("N"); display.write(132); // ae display.print("chste Zahl"); display.display(); Links der Sketch läßt auf dem Display erscheinen: „Nächste Zahl“. Sogar mit deutschem Umlaut! |
Für die deutschen Umlaute gelten folgende Werte: |
Nur besondere Zeichen anzeigen
X und y geben die linke obere Ecke des Zeichens an. Das ASCII-Zeichen ist der Tabelle zu entnehmen. Die Zeichen- und Hintergrundfarbe, sowie die Zeichengröße sind klar.
display.drawChar(x, y, Ascii-Zeichen, Zeichenfarbe, Hintergrundfarbe, Zeichengröße);
Die deutschen Umlaute gibt es als PDF unter: https://lubasch.ch/wp-content/uploads/2015/01/ascii_tabelle.pdf