XBM Bitmaps für Arduino Displays: So geht’s Schritt für Schritt

Text und Zahlen auf einem OLED-Display sind schnell programmiert – aber erst mit eigenen Symbolen, Logos oder kleinen Grafiken werden Projekte so richtig spannend. Genau hier kommen XBM Bitmaps ins Spiel: kleine, einfarbige Bilddateien, die sich direkt im Arduino-Sketch einbinden und mit nur einer Zeile Code auf dem Display anzeigen lassen.

Dieses Video auf YouTube ansehen.

In diesem Beitrag zeige ich dir Schritt für Schritt, wie du:

und deine Symbole mit drawXBitmap() auf dem OLED-Display darstellst.
ein Bild in das XBM-Format umwandelst,
die Bitmap in deinen Arduino-Sketch einbindest,

Inhaltsverzeichnis

Was ist ein XBM-Bild?
Was wird benötigt?
Beispiel: Eigenes Icon als XBM-Bild nutzen
Speicherverbrauch von XBM-Bildern
Abschluss

Was ist ein XBM-Bild?

Das XBM-Format (X BitMap) ist ein sehr simples Bildformat, das ursprünglich für den X-Window-Server unter Unix entwickelt wurde.
Der Clou: Ein XBM ist keine Bilddatei im klassischen Sinne, sondern eine C-Header-Datei, die direkt im Quellcode eingebunden werden kann.

Ein typisches XBM besteht aus:

den Bildmaßen (#define name_width und #define name_height),
und einem Byte-Array (static const unsigned char name_bits[]), das die einzelnen Pixel als 1-Bit-Muster beschreibt (0 = schwarz, 1 = weiß).

#define check_icon_width 48
#define check_icon_height 48

const unsigned char check_icon [] PROGMEM = {
	0x1f, 0xff, 0xff, 0xff, 0x00, 0x00,
	0x00, 0x00, 0xff, 0xff, 0xff, 0xff,
	.... 
	0xff, 0xff, 0xff, 0xfe, 0x3f, 0xff
};

Genau deshalb ist das XBM-Format perfekt geeignet, um einfache Symbole, Icons oder Logos auf Mikrocontroller-Displays darzustellen.

Was wird benötigt?

Um ein eigenes XBM-Bild auf einem OLED-Display darzustellen, brauchst du folgende Komponenten:

Mikrocontroller – zum Beispiel den Arduino Nano R4 (funktioniert auch mit Nano V3, ESP32 oder anderen Boards).
OLED-Display – z. B. ein 1,3″ OLED mit SH1106G-Treiberchip und I²C-Schnittstelle.
Bibliotheken:
- Adafruit SH110X für die Display-Ansteuerung,
- Adafruit GFX als Basis für Grafikfunktionen.
Konvertierungstool:
- image2cpp (browserbasiert), um PNG-Dateien ins XBM-Format zu konvertieren.

👉 Mit dieser Kombination kannst du beliebige XBM-Bilder per drawXBitmap() direkt auf dem Display darstellen – sofern die Bildgröße in die Auflösung des OLEDs passt.

Bauteile - Arduino Nano R4 - OLED Display via I2C anschliessen — Bauteile – Arduino Nano R4 – OLED Display via I2C anschliessen

⚠️ Hinweis zum Arduino Nano R4 und I²C
Damit das OLED-Display zuverlässig am Arduino Nano R4 funktioniert, müssen die Datenleitungen SDA und SCL über Pull-Up-Widerstände (typischerweise 4,7 kΩ) mit VCC verbunden werden.
Warum das nötig ist und wie du es genau umsetzt, habe ich ausführlich in diesem Beitrag beschrieben:
👉 Arduino Nano R4: Der I²C-Fix, den dir keiner sagt (Pull-Ups!)

Beispiel: Eigenes Icon als XBM-Bild nutzen

Für den Einstieg nehmen wir ein simples Icon und bringen es aufs OLED-Display.

Icon auswählen

Gehe auf iconfinder.com.
Setze den Filter auf Free & For commercial use – so bist du rechtlich auf der sicheren Seite.
Lade dir ein PNG-Icon herunter, z. B. ein einfaches Check-Icon in 48×48 Pixel.

PNG in XBM umwandeln

Öffne die Seite image2cpp.
Lade dein PNG hoch.
Einstellungen:
Background color: Black
Invert image colors aktivieren (dadurch wird der schwarze Anteil weiß und der Hintergrund schwarz → ideal für OLED).
Klicke auf Generate Code.
Jetzt erhältst du ein fertiges C-Array, das du direkt in deinem Arduino-Sketch verwenden kannst.

Code in Arduino einfügen

Kopiere den generierten Code in deine .ino-Datei.

Beispielcode zum anzeigen eines XBMP Bildes auf einem OLED Display Herunterladen

Beispielcode zum anzeigen eines XBMP Bildes auf einem OLED Display

/*****************************************************
 * Arduino OLED Tutorial – XBM Bitmaps darstellen
 * 
 * In diesem Beispiel zeigen wir, wie man ein XBM-Bild 
 * (in diesem Fall ein "Check-Icon") auf einem 
 * 1,3" OLED-Display mit SH1106G-Treiberchip anzeigt.
 * 
 * Zielgruppe: Anfänger
 * 
 * Weitere Infos und Schritt-für-Schritt-Anleitung:
 * https://draeger-it.blog/xbm-bitmaps-fuer-arduino-displays-so-gehts-schritt-fuer-schritt/
 *****************************************************/

#include <SPI.h>               // Bibliothek für SPI-Kommunikation
#include <Wire.h>              // Bibliothek für I2C-Kommunikation
#include <Adafruit_GFX.h>      // Adafruit Grafik-Bibliothek (Grundfunktionen)
#include <Adafruit_SH110X.h>   // Bibliothek für SH1106/SH1107 OLED-Displays

// I2C-Adresse des Displays (meist 0x3C)
#define i2c_Address 0x3c

// Display-Objekt erstellen: 128x64 Pixel, I2C, kein Reset-Pin
Adafruit_SH1106G display = Adafruit_SH1106G(128, 64, &Wire, -1);

// Breite und Höhe des Icons
#define icon_width 48
#define icon_height 48

// Das Check-Icon als XBM-Bitmap (wurde mit image2cpp erzeugt)
const unsigned char check_icon[] PROGMEM = {
  0x1f, 0xff, 0xff, 0xff, 0x00, 0x00, 0x3f, 0xff, 0xff, 0xff, 0x00, 0x00, 0x7f, 0xff, 0xff, 0xff,
  0x00, 0x00, 0xff, 0xff, 0xff, 0xff, 0x00, 0x00, 0xff, 0xff, 0xff, 0xff, 0x00, 0x00, 0xfc, 0x00,
  0x00, 0x00, 0x00, 0x1c, 0xf8, 0x00, 0x00, 0x00, 0x00, 0x3e, 0xf8, 0x00, 0x00, 0x00, 0x00, 0x7f,
  0xf8, 0x00, 0x00, 0x00, 0x00, 0xff, 0xf8, 0x00, 0x00, 0x00, 0x01, 0xfe, 0xf8, 0x00, 0x00, 0x00,
  0x03, 0xfc, 0xf8, 0x00, 0x00, 0x00, 0x07, 0xf8, 0xf8, 0x00, 0x00, 0x00, 0x0f, 0xf0, 0xf8, 0x00,
  0x00, 0x00, 0x1f, 0xe0, 0xf8, 0x00, 0x00, 0x00, 0x3f, 0xc0, 0xf8, 0x00, 0x00, 0x00, 0x7f, 0x80,
  0xf8, 0x00, 0x00, 0x00, 0xff, 0x00, 0xf8, 0x00, 0x00, 0x01, 0xfe, 0x00, 0xf8, 0x00, 0x00, 0x03,
  0xfc, 0x00, 0xf8, 0x0c, 0x00, 0x07, 0xf8, 0x00, 0xf8, 0x1e, 0x00, 0x0f, 0xf0, 0x00, 0xf8, 0x3f,
  0x00, 0x1f, 0xe0, 0x1f, 0xf8, 0x3f, 0x80, 0x3f, 0xc0, 0x1f, 0xf8, 0x3f, 0xc0, 0x7f, 0x80, 0x1f,
  0xf8, 0x1f, 0xe0, 0xff, 0x00, 0x1f, 0xf8, 0x0f, 0xf1, 0xfe, 0x00, 0x1f, 0xf8, 0x07, 0xfb, 0xfc,
  0x00, 0x1f, 0xf8, 0x03, 0xff, 0xf8, 0x00, 0x1f, 0xf8, 0x01, 0xff, 0xf0, 0x00, 0x1f, 0xf8, 0x00,
  0xff, 0xe0, 0x00, 0x1f, 0xf8, 0x00, 0x7f, 0xc0, 0x00, 0x1f, 0xf8, 0x00, 0x3f, 0x80, 0x00, 0x1f,
  0xf8, 0x00, 0x1f, 0x00, 0x00, 0x1f, 0xf8, 0x00, 0x0e, 0x00, 0x00, 0x1f, 0xf8, 0x00, 0x00, 0x00,
  0x00, 0x1f, 0xf8, 0x00, 0x00, 0x00, 0x00, 0x1f, 0xf8, 0x00, 0x00, 0x00, 0x00, 0x1f, 0xf8, 0x00,
  0x00, 0x00, 0x00, 0x1f, 0xf8, 0x00, 0x00, 0x00, 0x00, 0x1f, 0xf8, 0x00, 0x00, 0x00, 0x00, 0x1f,
  0xf8, 0x00, 0x00, 0x00, 0x00, 0x1f, 0xf8, 0x00, 0x00, 0x00, 0x00, 0x1f, 0xfc, 0x00, 0x00, 0x00,
  0x00, 0x3f, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0x7f, 0xff,
  0xff, 0xff, 0xff, 0xfe, 0x3f, 0xff, 0xff, 0xff, 0xff, 0xfc, 0x1f, 0xff, 0xff, 0xff, 0xff, 0xf8
};

void setup() {
  delay(250);                               // Kurze Startverzögerung
  
  display.begin(i2c_Address, true);         // Display initialisieren
  display.display();                        // Erstes Bild anzeigen (Bootscreen)
  delay(2000);                              // 2 Sekunden warten

  display.clearDisplay();                   // Bildschirm löschen
  // Bitmap auf das Display zeichnen:
  // Position: oben links (0,0), Größe: icon_width x icon_height
  display.drawBitmap(0, 0, check_icon, icon_width, icon_height, SH110X_WHITE);
  display.display();                        // Anzeige aktualisieren
}

void loop() {
  // Hier passiert nichts weiter – das Bild bleibt stehen
}

Die Ausgabe auf dem 1,3″ OLED Display sieht in meinem Fall mit dem Check Icon wiefolgt aus:

Arduino Nano R4 mit OLED Display und XBMP Bild

👉 Damit hast du deinen ersten Probelauf: ein selbst gewähltes Icon wird als Bitmap auf dem OLED dargestellt.
Im nächsten Schritt kannst du nun eigene Symbole erstellen (z. B. mit Paint.NET) und denselben Workflow nutzen.

Speicherverbrauch von XBM-Bildern

Ein wichtiger Punkt bei der Arbeit mit Bitmaps auf Mikrocontrollern ist der Speicherplatz. Anders als auf einem PC steht dir hier nur sehr wenig zur Verfügung – beim Arduino Nano R4 sind es z. B. 256 kB Programmspeicher (Flash) und 32 kB Arbeitsspeicher (RAM).

Wie groß ist ein XBM-Bild?

Da XBM-Bilder nur 1 Bit pro Pixel benötigen (schwarz oder weiß), sind sie sehr kompakt. Die Größe lässt sich einfach berechnen:

Speicher in Bytes = (Breite * Höhe) / 8

Beispielrechnung:

48 × 48 Pixel = 2304 Pixel
2304 / 8 = 288 Bytes

Das Bild belegt also nur 288 Bytes – kaum der Rede wert.

Vergleich verschiedener Icon-Größen

Icon-Größe	Pixel insgesamt	Speicherbedarf
16 × 16	256	32 Bytes
32 × 32	1024	128 Bytes
48 × 48	2304	288 Bytes
64 × 64	4096	512 Bytes
128 × 64	8192	1024 Bytes

Speicherverbrauch in der Praxis

Im Fall des oben gezeigten Beispiels (ein 48×48 Icon + die Bibliotheken) sieht die Ausgabe der Arduino IDE so aus:

Der Sketch verwendet 56444 Bytes (21%) des Programmspeicherplatzes. 
Das Maximum sind 262144 Bytes.
Globale Variablen verwenden 6520 Bytes (19%) des dynamischen Speichers, 
26248 Bytes für lokale Variablen verbleiben. Das Maximum sind 32768 Bytes.

Wichtig:

Der Bitmap-Anteil (288 Bytes) ist winzig.
Der große Teil stammt von den Adafruit-Bibliotheken (Adafruit_GFX und Adafruit_SH110X) sowie den erzeugten Objekten.

Damit bleibt noch mehr als genug Platz für weitere Symbole, Animationen und eigene Logik.

Abschluss

Mit dem XBM-Format lassen sich eigene Symbole und Icons ganz einfach in Arduino-Projekte einbinden. Dank der Kombination aus Adafruit GFX und Adafruit SH110X ist es unkompliziert möglich, Bitmaps auf einem OLED-Display darzustellen – und das sogar in beliebiger Größe, solange sie in die Displayauflösung passen.

Wer mehr Speicher zur Verfügung hat (z. B. mit dem Arduino Nano R4 oder einem ESP32), ist mit den Adafruit-Bibliotheken sehr flexibel.
Für sehr kleine Mikrocontroller hingegen eignet sich auch eine schlankere Lösung:
Im Beitrag Arduino Lektion 78 – 128×64 Pixel 1,3″ OLED Display habe ich bereits gezeigt, wie das gleiche Display mit der U8glib Library angesteuert werden kann. Diese Bibliothek bietet zwar weniger Komfort, ist dafür aber besonders ressourcenschonend und damit ideal für Projekte mit engen Speichergrenzen.