SH1106 1,3 Zoll OLED mit Arduino & ESP32: Unterschied zum SSD1306, Pixel-Versatz beheben & großes Dashboard bauen

1,3 Zoll oder 0,96 Zoll – der Größenunterschied ist größer als er klingt

Beide Displays haben 128x64 Pixel. Beide sprechen I2C. Beide hängen an denselben zwei Kabeln. Der Unterschied steckt in der Fläche pro Pixel – und die entscheidet darüber, ob du deinen Sensorwert vom Schreibtisch aus ablesen kannst oder nur mit der Nase am Gehäuse.

Warum der Versatz überhaupt entsteht

Der SH1106 ist ursprünglich für Panels mit 132 Spalten entwickelt worden. Sein Grafikspeicher ist entsprechend 132 Spalten breit. Auf den gängigen Modulen ist aber ein 128-Pixel-Panel angeschlossen – und zwar mittig, also an den Spalten 2 bis 129.

Was daraus folgt:

• Schreibst du in Speicherspalte 0 und 1, landet das Ergebnis im unsichtbaren Bereich links.
• Dein gesamtes Bild erscheint um zwei Pixel nach links versetzt.
• Die letzten beiden Pixelspalten deines Bildes fallen rechts aus dem sichtbaren Bereich – oder erscheinen als Müllstreifen, wenn dort alte Daten stehen.

Dazu kommt ein zweiter, subtilerer Unterschied: Der SSD1306 kennt einen Horizontal Addressing Mode, bei dem der Spaltenzähler am Zeilenende automatisch in die nächste Seite springt. Der SH1106 kann das nicht – er braucht vor jeder der acht Seiten einen eigenen Adressbefehl. Deshalb reicht es nicht, im SSD1306-Treiber nur einen Offset zu addieren; die Übertragungsroutine selbst ist eine andere. Genau das ist der Grund, warum eine reine SSD1306-Bibliothek an diesem Display scheitert.

Das brauchst du

1Anschließen – vier Pins, keine Überraschungen

Der schnellste Weg, um festzustellen ob überhaupt etwas antwortet, ist ein I2C-Scan:

#include <Wire.h>

void setup() {
  Serial.begin(115200);
  Wire.begin();
  delay(200);

  Serial.println(F("I2C-Scan..."));
  uint8_t gefunden = 0;

  for (uint8_t addr = 1; addr < 127; addr++) {
    Wire.beginTransmission(addr);
    if (Wire.endTransmission() == 0) {
      Serial.print(F("Geraet bei 0x"));
      if (addr < 16) Serial.print('0');
      Serial.print(addr, HEX);

      if (addr == 0x3C || addr == 0x3D) Serial.print(F("  <- OLED (SH1106 oder SSD1306)"));
      if (addr == 0x76 || addr == 0x77) Serial.print(F("  <- BMP280/BME280"));
      if (addr == 0x68)                 Serial.print(F("  <- DS3231"));
      Serial.println();
      gefunden++;
    }
  }

  if (gefunden == 0)
    Serial.println(F("Nichts gefunden - SDA/SCL vertauscht oder VCC fehlt?"));
}

void loop() { }

2Der Zwei-Minuten-Test: SH1106 oder SSD1306?

U8g2 bringt Treiber für beide Controller mit. Dieser Sketch zeichnet einen Rahmen exakt an den Bildschirmrand plus je eine Markierung in allen vier Ecken – damit siehst du sofort, ob etwas verrutscht ist:

#include <Wire.h>
#include <U8g2lib.h>

// --- Variante A: SH1106 (typisch fuer 1,3 Zoll) ---
U8G2_SH1106_128X64_NONAME_F_HW_I2C u8g2(U8G2_R0, U8X8_PIN_NONE);

// --- Variante B: SSD1306 (typisch fuer 0,96 Zoll) ---
// U8G2_SSD1306_128X64_NONAME_F_HW_I2C u8g2(U8G2_R0, U8X8_PIN_NONE);

void setup() {
  Wire.begin();
  Wire.setClock(400000);
  u8g2.begin();
  u8g2.enableUTF8Print();
}

void loop() {
  u8g2.clearBuffer();

  // Rahmen exakt auf dem Rand - muss rundum sichtbar sein
  u8g2.drawFrame(0, 0, 128, 64);

  // Eckmarkierungen: 5x5 Pixel in jeder Ecke
  u8g2.drawBox(0, 0, 5, 5);
  u8g2.drawBox(123, 0, 5, 5);
  u8g2.drawBox(0, 59, 5, 5);
  u8g2.drawBox(123, 59, 5, 5);

  // Mittelkreuz
  u8g2.drawHLine(0, 32, 128);
  u8g2.drawVLine(64, 0, 64);

  u8g2.setFont(u8g2_font_6x10_te);
  u8g2.drawStr(10, 28, "SH1106 Test");
  u8g2.drawStr(10, 44, "Rahmen rundum?");

  u8g2.sendBuffer();
  delay(1000);
}

3Full Buffer oder Page Buffer? Der Konstruktor entscheidet

Der Buchstabe in der Mitte des U8g2-Konstruktors bestimmt, wie viel RAM das Display belegt – und auf einem Arduino Nano mit 2 kB ist das die wichtigste Entscheidung überhaupt:

So sieht derselbe Bildschirm in beiden Varianten aus:

// ============ Full Buffer (ESP32) ============
#include <Wire.h>
#include <U8g2lib.h>

U8G2_SH1106_128X64_NONAME_F_HW_I2C u8g2(U8G2_R0, U8X8_PIN_NONE);

float temperatur = 21.4;

void setup() {
  Wire.begin();
  Wire.setClock(400000);
  u8g2.begin();
  u8g2.enableUTF8Print();
}

void loop() {
  u8g2.clearBuffer();

  u8g2.setFont(u8g2_font_6x12_te);
  u8g2.drawUTF8(0, 10, "Wohnzimmer");

  u8g2.setFont(u8g2_font_logisoso32_tn);
  char t[10];
  snprintf(t, sizeof(t), "%.1f", temperatur);
  u8g2.drawStr(0, 50, t);

  u8g2.setFont(u8g2_font_6x12_te);
  u8g2.drawUTF8(96, 30, "°C");

  u8g2.sendBuffer();
  delay(500);
}

// ============ Page Buffer (Arduino Nano) ============
#include <Wire.h>
#include <U8g2lib.h>

U8G2_SH1106_128X64_NONAME_1_HW_I2C u8g2(U8G2_R0, U8X8_PIN_NONE);

float temperatur = 21.4;

void setup() {
  Wire.begin();
  Wire.setClock(400000);
  u8g2.begin();
  u8g2.enableUTF8Print();
}

void loop() {
  char t[10];
  dtostrf(temperatur, 4, 1, t);      // auf AVR kein %f in snprintf

  u8g2.firstPage();
  do {
    u8g2.setFont(u8g2_font_6x12_te);
    u8g2.drawUTF8(0, 10, "Wohnzimmer");

    u8g2.setFont(u8g2_font_logisoso32_tn);
    u8g2.drawStr(0, 50, t);

    u8g2.setFont(u8g2_font_6x12_te);
    u8g2.drawUTF8(96, 30, "°C");
  } while (u8g2.nextPage());

  delay(500);
}

4Das große Dashboard – Kacheln statt Textzeilen

Jetzt zum eigentlichen Grund für das größere Display: eine Anzeige, die man aus zwei Metern lesen kann. Statt acht Textzeilen übereinander teilst du die Fläche in Kacheln auf – ein großer Hauptwert plus zwei kleinere Nebenwerte, dazu eine Statuszeile.

#include <Wire.h>
#include <U8g2lib.h>

U8G2_SH1106_128X64_NONAME_F_HW_I2C u8g2(U8G2_R0, U8X8_PIN_NONE);

// --- Messwerte (hier Platzhalter, real vom BMP280 / DHT22) ---
float temperatur = 21.4;
float feuchte    = 58.2;
float druck      = 1013.6;
bool  wlanOk     = true;
uint8_t akku     = 82;

// --- Verlauf der Temperatur fuer die Sparkline ---
#define VERLAUF_N 62
int8_t  verlauf[VERLAUF_N];
uint8_t verlaufIdx = 0;
bool    verlaufVoll = false;

void verlaufHinzu(float wert) {
  // In Zehntelgrad relativ zu 20 Grad speichern - passt in int8_t
  int16_t v = (int16_t)((wert - 20.0f) * 4.0f);
  if (v >  127) v =  127;
  if (v < -128) v = -128;

  verlauf[verlaufIdx] = (int8_t)v;
  verlaufIdx++;
  if (verlaufIdx >= VERLAUF_N) { verlaufIdx = 0; verlaufVoll = true; }
}

void zeichneSparkline(uint8_t x, uint8_t y, uint8_t breite, uint8_t hoehe) {
  uint8_t n = verlaufVoll ? VERLAUF_N : verlaufIdx;
  if (n < 2) return;

  int8_t mn = 127, mx = -128;
  for (uint8_t i = 0; i < n; i++) {
    if (verlauf[i] < mn) mn = verlauf[i];
    if (verlauf[i] > mx) mx = verlauf[i];
  }
  if (mx == mn) mx = mn + 1;

  uint8_t vorherY = 0;
  for (uint8_t i = 0; i < n && i < breite; i++) {
    uint8_t idx = verlaufVoll ? (verlaufIdx + i) % VERLAUF_N : i;
    int16_t w = verlauf[idx];

    uint8_t py = y + hoehe - 1
               - (uint16_t)(w - mn) * (hoehe - 1) / (mx - mn);

    if (i > 0) u8g2.drawLine(x + i - 1, vorherY, x + i, py);
    vorherY = py;
  }
}

void akkuIcon(uint8_t x, uint8_t y, uint8_t prozent) {
  u8g2.drawFrame(x, y, 13, 7);
  u8g2.drawBox(x + 13, y + 2, 2, 3);
  uint8_t f = (uint16_t) 11 * prozent / 100;
  if (f > 0) u8g2.drawBox(x + 1, y + 1, f, 5);
}

void wlanIcon(uint8_t x, uint8_t y, bool ok) {
  if (ok) {
    for (uint8_t i = 0; i < 3; i++)
      u8g2.drawBox(x + i * 3, y + 6 - i * 2, 2, 1 + i * 2);
  } else {
    u8g2.drawLine(x, y, x + 7, y + 7);
    u8g2.drawLine(x + 7, y, x, y + 7);
  }
}

void setup() {
  Wire.begin();
  Wire.setClock(400000);
  u8g2.begin();
  u8g2.enableUTF8Print();

  // Testdaten fuer den Verlauf
  for (uint8_t i = 0; i < VERLAUF_N; i++)
    verlaufHinzu(21.0f + sin(i * 0.15f) * 1.2f);
}

void loop() {
  u8g2.clearBuffer();

  // ---- Kopfzeile: Ort links, Icons rechts ----
  u8g2.setFont(u8g2_font_5x8_te);
  u8g2.drawUTF8(0, 7, "WOHNZIMMER");

  wlanIcon(96, 1, wlanOk);
  akkuIcon(110, 1, akku);
  u8g2.drawHLine(0, 10, 128);

  // ---- Hauptwert: gross und fett ----
  u8g2.setFont(u8g2_font_logisoso30_tn);
  char t[12];
  snprintf(t, sizeof(t), "%.1f", temperatur);
  u8g2.drawStr(0, 42, t);

  u8g2.setFont(u8g2_font_9x15_te);
  u8g2.drawUTF8(72, 26, "°C");

  // ---- Nebenwerte rechts, kleiner ----
  u8g2.setFont(u8g2_font_6x10_te);
  snprintf(t, sizeof(t), "%.0f%%", feuchte);
  u8g2.drawUTF8(90, 30, t);

  snprintf(t, sizeof(t), "%.0f", druck);
  u8g2.drawStr(84, 42, t);
  u8g2.setFont(u8g2_font_4x6_tf);
  u8g2.drawStr(112, 42, "hPa");

  // ---- Trennlinie und Verlauf unten ----
  u8g2.drawHLine(0, 46, 128);

  u8g2.setFont(u8g2_font_4x6_tf);
  u8g2.drawStr(0, 63, "6h");
  zeichneSparkline(14, 49, 100, 14);

  u8g2.sendBuffer();
  delay(500);
}

5Echte Sensordaten und Seiten mit dem Encoder

Zum Abschluss die vollständige Version: BMP280 für Temperatur und Druck, KY-040 zum Blättern, alles ohne blockierendes delay():

#include <Wire.h>
#include <U8g2lib.h>
#include <Adafruit_BMP280.h>

U8G2_SH1106_128X64_NONAME_F_HW_I2C u8g2(U8G2_R0, U8X8_PIN_NONE);
Adafruit_BMP280 bmp;

#define ENC_CLK  25
#define ENC_DT   26
#define ENC_SW   27

volatile int8_t  encDelta = 0;
volatile uint8_t letzterZustand = 0;

void IRAM_ATTR encoderIsr() {
  uint8_t a = digitalRead(ENC_CLK);
  uint8_t b = digitalRead(ENC_DT);
  uint8_t zustand = (a << 1) | b;
  if (zustand == letzterZustand) return;

  if ((letzterZustand == 0b00 && zustand == 0b01) ||
      (letzterZustand == 0b01 && zustand == 0b11) ||
      (letzterZustand == 0b11 && zustand == 0b10) ||
      (letzterZustand == 0b10 && zustand == 0b00)) encDelta++;
  else                                              encDelta--;

  letzterZustand = zustand;
}

const uint8_t SEITEN = 3;
uint8_t seite = 0;

float tempAktuell = 0, druckAktuell = 0;
float tempMin = 999, tempMax = -999;
uint32_t letzteMessung = 0;
const uint16_t MESS_INTERVALL = 2000;

void seiteHaupt() {
  u8g2.setFont(u8g2_font_5x8_te);
  u8g2.drawUTF8(0, 7, "TEMPERATUR");
  u8g2.drawHLine(0, 10, 128);

  u8g2.setFont(u8g2_font_logisoso30_tn);
  char t[12];
  snprintf(t, sizeof(t), "%.1f", tempAktuell);
  u8g2.drawStr(4, 48, t);

  u8g2.setFont(u8g2_font_9x15_te);
  u8g2.drawUTF8(84, 32, "°C");

  u8g2.setFont(u8g2_font_5x8_tf);
  snprintf(t, sizeof(t), "%.0f hPa", druckAktuell);
  u8g2.drawStr(84, 48, t);
}

void seiteMinMax() {
  u8g2.setFont(u8g2_font_5x8_te);
  u8g2.drawUTF8(0, 7, "MIN / MAX");
  u8g2.drawHLine(0, 10, 128);

  char t[16];
  u8g2.setFont(u8g2_font_9x15_te);

  snprintf(t, sizeof(t), "MIN %.1f", tempMin);
  u8g2.drawUTF8(0, 30, t);

  snprintf(t, sizeof(t), "MAX %.1f", tempMax);
  u8g2.drawUTF8(0, 50, t);

  u8g2.setFont(u8g2_font_5x8_tf);
  snprintf(t, sizeof(t), "Spanne %.1f K", tempMax - tempMin);
  u8g2.drawStr(0, 62, t);
}

void seiteInfo() {
  u8g2.setFont(u8g2_font_5x8_te);
  u8g2.drawUTF8(0, 7, "SYSTEM");
  u8g2.drawHLine(0, 10, 128);

  u8g2.setFont(u8g2_font_6x10_tf);
  char t[24];

  snprintf(t, sizeof(t), "Display SH1106");
  u8g2.drawStr(0, 24, t);

  snprintf(t, sizeof(t), "Laufzeit %lu min", millis() / 60000UL);
  u8g2.drawStr(0, 38, t);

  snprintf(t, sizeof(t), "Heap %u kB", (unsigned)(ESP.getFreeHeap() / 1024));
  u8g2.drawStr(0, 52, t);
}

void seitenPunkte() {
  for (uint8_t i = 0; i < SEITEN; i++) {
    uint8_t x = 56 + i * 6;
    if (i == seite) u8g2.drawBox(x, 61, 4, 3);
    else            u8g2.drawPixel(x + 1, 62);
  }
}

void setup() {
  Serial.begin(115200);
  Wire.begin();
  Wire.setClock(400000);

  u8g2.begin();
  u8g2.enableUTF8Print();

  if (!bmp.begin(0x76)) {
    if (!bmp.begin(0x77)) Serial.println(F("BMP280 nicht gefunden"));
  }
  bmp.setSampling(Adafruit_BMP280::MODE_NORMAL,
                  Adafruit_BMP280::SAMPLING_X2,
                  Adafruit_BMP280::SAMPLING_X16,
                  Adafruit_BMP280::FILTER_X16,
                  Adafruit_BMP280::STANDBY_MS_500);

  pinMode(ENC_CLK, INPUT_PULLUP);
  pinMode(ENC_DT,  INPUT_PULLUP);
  pinMode(ENC_SW,  INPUT_PULLUP);
  letzterZustand = (digitalRead(ENC_CLK) << 1) | digitalRead(ENC_DT);
  attachInterrupt(digitalPinToInterrupt(ENC_CLK), encoderIsr, CHANGE);
  attachInterrupt(digitalPinToInterrupt(ENC_DT),  encoderIsr, CHANGE);
}

void loop() {
  uint32_t jetzt = millis();

  // --- Messen, aber nicht bei jedem Durchlauf ---
  if (jetzt - letzteMessung >= MESS_INTERVALL) {
    letzteMessung = jetzt;
    tempAktuell  = bmp.readTemperature();
    druckAktuell = bmp.readPressure() / 100.0f;

    if (tempAktuell < tempMin) tempMin = tempAktuell;
    if (tempAktuell > tempMax) tempMax = tempAktuell;
  }

  // --- Encoder auswerten ---
  noInterrupts();
  int8_t d = encDelta;
  encDelta = 0;
  interrupts();

  if (d != 0) {
    int8_t schritte = d / 4;              // 4 Flanken pro Rastung
    if (schritte != 0) {
      int8_t neu = (int8_t)seite + schritte;
      while (neu < 0) neu += SEITEN;
      seite = neu % SEITEN;
    }
  }

  if (digitalRead(ENC_SW) == LOW) {
    tempMin = tempMax = tempAktuell;      // Tastendruck: Min/Max zuruecksetzen
    while (digitalRead(ENC_SW) == LOW) delay(10);
  }

  // --- Zeichnen ---
  u8g2.clearBuffer();
  switch (seite) {
    case 0: seiteHaupt();  break;
    case 1: seiteMinMax(); break;
    case 2: seiteInfo();   break;
  }
  seitenPunkte();
  u8g2.sendBuffer();

  delay(40);
}

Troubleshooting

Praxistipps

• Erst Font wählen, dann Layout planen. Auf dem 1,3-Zoll-Display wirkt u8g2_font_logisoso30_tn wie eine Digitaluhr – groß genug fürs andere Zimmerende. Darunter bleiben noch 14 Pixel für eine Sparkline oder zwei kleine Zeilen.
• Ziffern-Fonts sparen viel Flash. Fonts mit _tn enthalten nur Zahlen und Satzzeichen und sind oft ein Zehntel so groß wie der volle Zeichensatz. Für den Hauptwert reicht das immer.
• Wire.setClock(400000) nicht vergessen. Ein volles 128x64-Bild sind 1024 Byte. Bei 100 kHz dauert die Übertragung rund 10 ms, bei 400 kHz nur noch 2,5 ms – spürbar, sobald sich etwas bewegt.
• Der SH1106 verträgt 3,3 und 5 V. Die Module haben Regler und Pegelanpassung an Bord. Am ESP32 nimm trotzdem 3,3 V, sonst ziehen die I2C-Pullups die Pins auf 5 V.
• Displays mischen geht problemlos. Ein SH1106 auf 0x3C und ein 0,91 Zoll SSD1306 auf 0x3D am selben Bus – du legst einfach zwei U8g2-Objekte an, jedes mit seinem passenden Konstruktor.
• Im Batteriebetrieb abschalten. u8g2.setPowerSave(1) senkt den Verbrauch auf unter 10 µA. Bei 18 mA im Betrieb ist das Display sonst der größte Verbraucher überhaupt – mehr als der schlafende ESP32.
• Die Version mit Encoder spart Lötarbeit. Das 1,3 Zoll OLED mit EC11 Rotary Encoder hat beides auf einer Platine – für Menüsysteme ist das die deutlich saubere Lösung als zwei Module auf dem Breadboard. Wie ein scrollbares Menü aufgebaut wird, zeigt der Artikel OLED-Menüsystem mit Rotary Encoder bauen.