# Gimp-OLED Tutorial

[![gimp.png](https://wiki.oberlab.de/uploads/images/gallery/2025-03/scaled-1680-/1myUQOqgebvzEDv9-gimp.png)](https://wiki.oberlab.de/uploads/images/gallery/2025-03/1myUQOqgebvzEDv9-gimp.png)

## Einleitung  


OLED-Displays können neben Text und Zahlen auch Grafiken darstellen. Die Bildpunkte der Grafik müssen jedoch in HEX-Werte umgewandelt werden. Dies ist mit dem Programm Gimp einfach möglich.  
Das Tutorial beschreibt die Umwandlung einer Grafik-Datei in HEX-Werte, so dass sie in ein C++ Programm eingefügt und an einem OLED-Display dargestellt werden können.  
Am Ende des Tutorials ist hierfür auch ein Programm-Beispiel.

## Grafik im OLED Display darstellen

  
Die Grafik in Inkscape erstellen.

[![gimp01.png](https://wiki.oberlab.de/uploads/images/gallery/2025-03/scaled-1680-/y0SQZesotZO7LFWx-gimp01.png)](https://wiki.oberlab.de/uploads/images/gallery/2025-03/y0SQZesotZO7LFWx-gimp01.png)

Die Grafik in Gimp öffnen.

[![gimp02.png](https://wiki.oberlab.de/uploads/images/gallery/2025-03/scaled-1680-/M3nVFkOQygNmXpc1-gimp02.png)](https://wiki.oberlab.de/uploads/images/gallery/2025-03/M3nVFkOQygNmXpc1-gimp02.png)

Die Grafik ggf. in schwarz/weiß umwandeln  
mit Bild, Modus, indiziert, Schwarz/Weiß-Palette (1Bit) verwenden

[![gimp03.png](https://wiki.oberlab.de/uploads/images/gallery/2025-03/scaled-1680-/sAGEHDbdfzfOvcXL-gimp03.png)](https://wiki.oberlab.de/uploads/images/gallery/2025-03/sAGEHDbdfzfOvcXL-gimp03.png)

[![gimp04.png](https://wiki.oberlab.de/uploads/images/gallery/2025-03/scaled-1680-/LSNixJ4opQPkGAsS-gimp04.png)](https://wiki.oberlab.de/uploads/images/gallery/2025-03/LSNixJ4opQPkGAsS-gimp04.png)

[![gimp02.png](https://wiki.oberlab.de/uploads/images/gallery/2025-03/scaled-1680-/M3nVFkOQygNmXpc1-gimp02.png)](https://wiki.oberlab.de/uploads/images/gallery/2025-03/M3nVFkOQygNmXpc1-gimp02.png)

Die Grafik auf die Displaygröße skalieren. Bild, Bild skalieren  
OLED 0,96“ und OLED 1,3“ = 128 x 64 pixel

[![gimp05.png](https://wiki.oberlab.de/uploads/images/gallery/2025-03/scaled-1680-/MGRO4La9SqkydUoZ-gimp05.png)](https://wiki.oberlab.de/uploads/images/gallery/2025-03/MGRO4La9SqkydUoZ-gimp05.png)

Datei, exportieren nach…, Namen vergeben und die Endung \*.xbm eingeben.

[![gimp06.png](https://wiki.oberlab.de/uploads/images/gallery/2025-03/scaled-1680-/LSzicv2z4ngLf2HH-gimp06.png)](https://wiki.oberlab.de/uploads/images/gallery/2025-03/LSzicv2z4ngLf2HH-gimp06.png)

Die xbm-Datei mit dem Editor öffnen

[![gimp07.png](https://wiki.oberlab.de/uploads/images/gallery/2025-03/scaled-1680-/UWa2Iu5hYQ7llZlj-gimp07.png)](https://wiki.oberlab.de/uploads/images/gallery/2025-03/UWa2Iu5hYQ7llZlj-gimp07.png)

Den Code markieren, kopieren und in die Arduino IDE einfügen

[![gimp08.png](https://wiki.oberlab.de/uploads/images/gallery/2025-03/scaled-1680-/QAJw8ZnrWrE2dXwy-gimp08.png)](https://wiki.oberlab.de/uploads/images/gallery/2025-03/QAJw8ZnrWrE2dXwy-gimp08.png)

C++ Programm

```c++
Smiley im OLED-Display darstellen:

 
/************************************************************************************************* 
                                      PROGRAMMINFO
************************************************************************************************** 
Funktion: ESP32 OLED 1,3" mit Smiley
**************************************************************************************************
Version: 02.04.2022
**************************************************************************************************
Board: ESP32vn IoT UNO V1.0.4
**************************************************************************************************
C++ Arduino IDE V1.8.13
**************************************************************************************************
Einstellungen:
https://dl.espressif.com/dl/package_esp32_index.json
http://dan.drown.org/stm32duino/package_STM32duino_index.json
https://raw.githubusercontent.com/espressif/arduino-esp32/gh-pages/package_esp32_dev_index.json 
 **************************************************************************************************/

#include <Arduino.h>
#include <U8g2lib.h>

#ifdef U8X8_HAVE_HW_SPI
#include <SPI.h>
#endif
#ifdef U8X8_HAVE_HW_I2C
#include <Wire.h>
#endif

U8G2_SH1106_128X64_NONAME_F_HW_I2C u8g2(U8G2_R0, /* reset=*/ U8X8_PIN_NONE);

//Bitmap hier einfügen:
//Smiley XBM erstellt mit GIMP
#define smiley_width 64
#define smiley_height 64
static unsigned char smiley[] = {
   0x00, 0x00, 0x00, 0xd0, 0x0a, 0x00, 0x00, 0x00, 0x00, 0x00, 0x80, 0xff,
   0xff, 0x01, 0x00, 0x00, 0x00, 0x00, 0xf0, 0xff, 0xff, 0x07, 0x00, 0x00,
   0x00, 0x00, 0xfc, 0x5f, 0xfd, 0x3f, 0x00, 0x00, 0x00, 0x00, 0xff, 0x00,
   0x80, 0x7f, 0x00, 0x00, 0x00, 0x80, 0x1f, 0x00, 0x00, 0xfc, 0x01, 0x00,
   0x00, 0xe0, 0x07, 0x00, 0x00, 0xe0, 0x07, 0x00, 0x00, 0xf0, 0x01, 0x00,
   0x00, 0xc0, 0x0f, 0x00, 0x00, 0xf8, 0x00, 0x00, 0x00, 0x00, 0x1f, 0x00,
   0x00, 0x3c, 0x00, 0x00, 0x00, 0x00, 0x3e, 0x00, 0x00, 0x1e, 0x00, 0x00,
   0x00, 0x00, 0x7c, 0x00, 0x00, 0x1f, 0x00, 0x03, 0x80, 0x01, 0xf8, 0x00,
   0x80, 0x07, 0x80, 0x03, 0xc0, 0x03, 0xf0, 0x00, 0xc0, 0x07, 0x80, 0x07,
   0xc0, 0x03, 0xe0, 0x01, 0xc0, 0x03, 0xc0, 0x07, 0xc0, 0x07, 0xc0, 0x03,
   0xe0, 0x01, 0xc0, 0x07, 0xe0, 0x07, 0x80, 0x07, 0xe0, 0x00, 0xc0, 0x0f,
   0xe0, 0x07, 0x80, 0x07, 0xf0, 0x00, 0xc0, 0x0f, 0xe0, 0x07, 0x00, 0x0f,
   0x70, 0x00, 0xc0, 0x0f, 0xe0, 0x07, 0x00, 0x0e, 0x78, 0x00, 0xc0, 0x0f,
   0xe0, 0x07, 0x00, 0x1e, 0x38, 0x00, 0xe0, 0x0f, 0xe0, 0x07, 0x00, 0x1e,
   0x3c, 0x00, 0xc0, 0x0f, 0xe0, 0x07, 0x00, 0x1c, 0x1c, 0x00, 0xc0, 0x07,
   0xe0, 0x07, 0x00, 0x3c, 0x1c, 0x00, 0xc0, 0x07, 0xe0, 0x07, 0x00, 0x38,
   0x1c, 0x00, 0xc0, 0x07, 0xc0, 0x03, 0x00, 0x38, 0x1e, 0x00, 0x80, 0x07,
   0xc0, 0x03, 0x00, 0x38, 0x1e, 0x00, 0x80, 0x03, 0x80, 0x01, 0x00, 0x38,
   0x0e, 0x00, 0x00, 0x01, 0x00, 0x01, 0x00, 0x78, 0x0e, 0x00, 0x00, 0x00,
   0x00, 0x00, 0x00, 0x38, 0x0e, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x78,
   0x0e, 0x00, 0x00, 0x00, 0x00, 0x00, 0x04, 0x78, 0x0e, 0x7c, 0x00, 0x00,
   0x00, 0x00, 0x3e, 0x70, 0x0e, 0x1c, 0x00, 0x00, 0x00, 0x00, 0x18, 0x38,
   0x1e, 0x10, 0x00, 0x00, 0x00, 0x00, 0x18, 0x78, 0x1e, 0x30, 0x00, 0x00,
   0x00, 0x00, 0x08, 0x38, 0x1e, 0x30, 0x00, 0x00, 0x00, 0x00, 0x08, 0x38,
   0x1c, 0x20, 0x00, 0x00, 0x00, 0x00, 0x0c, 0x38, 0x1c, 0x20, 0x00, 0x00,
   0x00, 0x00, 0x04, 0x38, 0x1c, 0x60, 0x00, 0x00, 0x00, 0x00, 0x06, 0x3c,
   0x3c, 0x40, 0x00, 0x00, 0x00, 0x00, 0x06, 0x1c, 0x38, 0xc0, 0x00, 0x00,
   0x00, 0x00, 0x03, 0x1c, 0x78, 0x80, 0x01, 0x00, 0x00, 0x00, 0x01, 0x1e,
   0x78, 0x00, 0x01, 0x00, 0x00, 0x80, 0x01, 0x0e, 0xf0, 0x00, 0x07, 0x00,
   0x00, 0xc0, 0x00, 0x0f, 0xf0, 0x00, 0x04, 0x00, 0x00, 0x60, 0x00, 0x07,
   0xe0, 0x01, 0x1c, 0x00, 0x00, 0x38, 0x80, 0x07, 0xc0, 0x03, 0x70, 0x00,
   0x00, 0x0c, 0xc0, 0x03, 0xc0, 0x03, 0xc0, 0x01, 0x00, 0x07, 0xe0, 0x03,
   0x80, 0x07, 0x80, 0x17, 0xf0, 0x01, 0xe0, 0x01, 0x00, 0x0f, 0x00, 0xfc,
   0x3f, 0x00, 0xf0, 0x00, 0x00, 0x1f, 0x00, 0x40, 0x01, 0x00, 0x78, 0x00,
   0x00, 0x3e, 0x00, 0x00, 0x00, 0x00, 0x3e, 0x00, 0x00, 0xfc, 0x00, 0x00,
   0x00, 0x00, 0x1f, 0x00, 0x00, 0xf8, 0x01, 0x00, 0x00, 0x80, 0x0f, 0x00,
   0x00, 0xe0, 0x07, 0x00, 0x00, 0xe0, 0x07, 0x00, 0x00, 0xc0, 0x1f, 0x00,
   0x00, 0xf8, 0x03, 0x00, 0x00, 0x00, 0xff, 0x00, 0x00, 0xff, 0x00, 0x00,
   0x00, 0x00, 0xfe, 0x2f, 0xf4, 0x3f, 0x00, 0x00, 0x00, 0x00, 0xf8, 0xff,
   0xff, 0x0f, 0x00, 0x00, 0x00, 0x00, 0xc0, 0xff, 0xff, 0x03, 0x00, 0x00,
   0x00, 0x00, 0x00, 0xfa, 0x5f, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00,
   0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00,
   0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00 };


void setup() {
    u8g2.begin();
    }

void loop() { 
    u8g2.clearBuffer();
    u8g2.drawXBM(32, 1, smiley_width, smiley_height, smiley);
    delay(2000);  
    u8g2.sendBuffer();
}
```

[![gimp09.png](https://wiki.oberlab.de/uploads/images/gallery/2025-03/scaled-1680-/CdlF7FwaYqsqx2Iw-gimp09.png)](https://wiki.oberlab.de/uploads/images/gallery/2025-03/CdlF7FwaYqsqx2Iw-gimp09.png)