📺

OLED Display

Projekt I04 - Grafik und Text mit SSD1306

Intermediate
SSD1306
I2C
1
Lernziele

Was du lernst

  • I2C-Kommunikation - Zwei-Draht-Bus mit SDA und SCL verstehen
  • Grafik-Library - Adafruit GFX fuer Zeichenfunktionen nutzen
  • Text-Ausgabe - Schriftgroessen, Cursor und Textformatierung
  • Formen zeichnen - Rechtecke, Linien und geometrische Figuren

Voraussetzungen

Beginner-Projekte B01-B08 abgeschlossen, I2C-Grundlagen aus B07 (LCD) hilfreich

Komponenten

Was du brauchst

📺

SSD1306 OLED Display

Selbstleuchtendes OLED-Display ohne Hintergrundbeleuchtung. Hoher Kontrast und weiter Blickwinkel.

Aufloesung: 128 x 64 Pixel

Schnittstelle: I2C (4 Pins)

Farbe: Weiss auf Schwarz (monochrom)

📌

SSD1306 Pinbelegung

  • GND - Masse
  • VCC - Versorgung 3.3V-5V
  • SCL - I2C Clock (Arduino A5)
  • SDA - I2C Data (Arduino A4)

I2C-Adresse: 0x3C (Standard)

OLED vs LCD

OLED-Displays brauchen keine Hintergrundbeleuchtung - jedes Pixel leuchtet selbst. Das ergibt echtes Schwarz und hohen Kontrast, verbraucht aber mehr Strom bei viel weissem Inhalt.

2
Theorie

Das I2C-Protokoll

Wie funktioniert I2C?

  • SDA (Serial Data) - Datenleitung
  • SCL (Serial Clock) - Taktleitung
  • Master-Slave-Architektur (Arduino = Master)
  • Jedes Geraet hat eine eindeutige 7-Bit-Adresse

Adressierung

Der SSD1306 hoert auf Adresse 0x3C. Mehrere I2C-Geraete koennen am selben Bus haengen!

I2C Bus-Diagramm

Arduino Uno        SSD1306
┌─────────┐       ┌─────────┐
│         │       │         │
│  A4 ────┼──SDA──┼── SDA   │
│         │       │         │
│  A5 ────┼──SCL──┼── SCL   │
│         │       │         │
│  5V ────┼──VCC──┼── VCC   │
│         │       │         │
│  GND ───┼──GND──┼── GND   │
└─────────┘       └─────────┘
            

Geschwindigkeit: Standard 100 kHz, Fast 400 kHz

Schaltplan

Verbindungen zum Arduino

Wokwi-Aufbau

  Arduino Uno          SSD1306 OLED
 ┌───────────┐        ┌──────────────┐
 │           │        │   ┌──────┐   │
 │  5V ──────┼────────┼───┤ VCC  │   │
 │           │        │   └──────┘   │
 │  GND ─────┼────────┼───┤ GND  │   │
 │           │        │   └──────┘   │
 │  A4 ──────┼────────┼───┤ SDA  │   │
 │           │        │   └──────┘   │
 │  A5 ──────┼────────┼───┤ SCL  │   │
 │           │        │   └──────┘   │
 └───────────┘        └──────────────┘
            

Wichtige Verbindungen

  • OLED VCC → Arduino 5V
  • OLED GND → Arduino GND
  • OLED SDA → Arduino A4
  • OLED SCL → Arduino A5

Hinweis

A4 und A5 sind die festen I2C-Pins des Arduino Uno. Bei anderen Boards koennen diese Pins abweichen.

3
Code

Schritt 1: Library initialisieren

// Schritt 1: Libraries einbinden und Display initialisieren

#include <Wire.h>           // I2C-Kommunikation
#include <Adafruit_GFX.h>   // Grafik-Grundfunktionen
#include <Adafruit_SSD1306.h>

// Display-Konfiguration
#define SCREEN_WIDTH  128   // Breite in Pixel
#define SCREEN_HEIGHT 64    // Hoehe in Pixel
#define OLED_RESET    -1    // Kein Reset-Pin
#define OLED_ADDR     0x3C  // I2C-Adresse

// Display-Objekt erstellen
Adafruit_SSD1306 display(SCREEN_WIDTH, SCREEN_HEIGHT, &Wire, OLED_RESET);

Erklaerung

  • Wire.h - Arduino I2C-Bibliothek
  • Adafruit_GFX.h - Zeichenfunktionen
  • Adafruit_SSD1306.h - Display-Treiber

Display-Objekt

Der Konstruktor bekommt Breite, Hoehe, Wire-Objekt und Reset-Pin. -1 bedeutet: kein Hardware-Reset.

3
Code

Schritt 2: Text ausgeben

void setup() {
    // Display starten (mit I2C-Adresse)
    if (!display.begin(SSD1306_SWITCHCAPVCC, OLED_ADDR)) {
        Serial.println("SSD1306 nicht gefunden!");
        while (true);  // Anhalten bei Fehler
    }

    display.clearDisplay();           // Bildschirm loeschen
    display.setTextSize(1);            // Schriftgroesse (1-4)
    display.setTextColor(SSD1306_WHITE);

    display.setCursor(20, 10);         // Position X=20, Y=10
    display.println("Hallo Welt!");

    display.setCursor(20, 30);
    display.setTextSize(2);            // Groessere Schrift
    display.println("Arduino");

    display.display();                // Buffer zum Display senden!
}

Wichtig: display.display()

Alle Zeichenbefehle schreiben nur in einen Speicherpuffer. Erst display.display() uebertraegt den Inhalt zum OLED!

3
Code

Schritt 3: Formen zeichnen

void demoShapes() {
    display.clearDisplay();

    // Rechteck (nur Rahmen)
    display.drawRect(0, 0, 128, 64, SSD1306_WHITE);

    // Gefuelltes Rechteck
    display.fillRect(10, 10, 30, 20, SSD1306_WHITE);

    // Linie von (50,10) nach (120,50)
    display.drawLine(50, 10, 120, 50, SSD1306_WHITE);

    // Horizontale und vertikale Linien (schneller)
    display.drawFastHLine(50, 30, 70, SSD1306_WHITE);
    display.drawFastVLine(85, 10, 40, SSD1306_WHITE);

    display.display();  // Nicht vergessen!
}

Rechteck-Funktionen

  • drawRect(x, y, w, h, color) - Rahmen
  • fillRect(x, y, w, h, color) - Gefuellt

Linien-Funktionen

  • drawLine(x0, y0, x1, y1, color)
  • drawFastHLine(x, y, len, color)
  • drawFastVLine(x, y, len, color)

Ausprobieren

Simulation in Wokwi

Wokwi Projekt

Erstelle ein neues Projekt mit Arduino Uno und SSD1306:

So testest du

  • Fuege ein SSD1306 hinzu (Suche: "ssd1306")
  • Verbinde: VCC → 5V, GND → GND, SDA → A4, SCL → A5
  • Kopiere den Code in die sketch.ino
  • Klicke auf Play - das Display zeigt Text und Grafik
  • Tipp: Experimentiere mit setTextSize() und Zeichenfunktionen!
4
Challenges

Erweiterungen

Probiere diese Aufgaben aus

🕐

Challenge 1: Digitale Uhr

Grosse Zeitanzeige mit millis() - Stunden, Minuten und Sekunden

📊

Challenge 2: Poti-Balkendiagramm

Balkendiagramm das den Potentiometer-Wert visualisiert

🎮

Challenge 3: Pong-Spiel

Einfaches Pong mit 2 Tastern fuer Auf/Ab-Bewegung

🔵

Challenge 4: Bouncing Ball

Ball-Animation die an den Raendern abprallt

📺

Geschafft!

Du beherrschst jetzt das OLED-Display

🔌

I2C-Bus

SDA/SCL Kommunikation verstanden

📝

Text-Ausgabe

Schriftgroessen und Cursor gesetzt

📐

Grafik

Rechtecke und Linien gezeichnet

Naechstes Projekt

I05: NeoPixel RGB-LEDs - Adressierbare LEDs mit FastLED steuern

← →
1 / 11