◀ 2.7. Tipkovnica ☸ 3. Arduino programiranje ▶

2.8. OLED ekran
Unos podataka

22.04.2026.

Uvod u OLED ekrane

OLED (Organic Light Emitting Diode) ekrani su mali, vrlo kontrastni zasloni koji se često koriste u Arduino projektima. Za razliku od klasičnih LCD ekrana, svaki piksel na OLED-u sam emitira svjetlo, što znači da nema potrebe za pozadinskim osvjetljenjem.

Zahvaljujući tome, OLED ekrani imaju:

vrlo dobar kontrast (crna je zaista crna),
širok kut gledanja,
malu potrošnju energije,
tanku i jednostavnu konstrukciju.

Model koji koristimo (0.96", 128×64, I2C) može prikazivati tekst, jednostavne grafike, pa čak i animacije.

Prednosti u odnosu na LED diode i LCD 1602

Rad s OLED ekranom donosi puno više mogućnosti nego rad s pojedinačnim LED diodama ili klasičnim LCD 1602 ekranom.

U usporedbi s LED diodama:

LED diode mogu samo svijetliti ili treptati;
OLED omogućuje prikaz teksta, brojeva, ikona i grafike;
S jednim ekranom možemo prikazati puno informacija odjednom.

Prednosti u odnosu na LED matrice 8×8:

U usporedbi s LED matricama (npr. 8×8 ili većim), OLED nudi više slobode u prikazu informacija i jednostavnije programiranje složenijih sadržaja;
LED matrica ima ograničen broj velikih točaka (piksela), dok OLED ima 128×64 sitnih piksela pa možemo prikazati čitljiv tekst, simbole, ikone i jednostavne slike;
Na LED matrici je teže prikazati duže poruke ili detaljnije oblike, dok na OLED‑u lako ispisujemo više redaka teksta, kombiniramo različite veličine fonta i dodajemo grafiku;
Kod većih LED matrica često trebamo dodatne drivere i više pinova, dok OLED koristi samo dva signalna pina (I2C: SDA i SCL), pa ostaje više slobodnih pinova na Arduinu za senzore i tipkala;
OLED zaslon ima veći kontrast i bolju čitljivost pod različitim kutovima gledanja, što je praktičnije za sve upotrebe;
Ovo znači da je OLED odličan izbor kada želimo “pravi mali ekran” za prikaz podataka, menija ili animacija, a ne samo svjetleće uzorke na matrici.

U usporedbi s LCD 1602:

OLED ima veću rezoluciju (128x64 vs. 16x2 znakova);
Možemo crtati slobodne oblike, linije i slike;
Nema potrebe za dodatnim potenciometrom za kontrast;
Koristi samo 4 pina (I2C), što pojednostavljuje spajanje.

Spajanje OLED ekrana na Arduino Uno

OLED ekran koristi I2C komunikaciju, što znači da trebamo samo četiri veze:

VCC ⇒ 5V (ili 3.3V, ovisno o modulu)
GND ⇒ GND
SDA ⇒ A4 (Arduino Uno)
SCL ⇒ A5 (Arduino Uno)

Važno je:

provjeriti adresu uređaja (najčešće 0x3C),
paziti na ispravno spajanje SDA i SCL pinova.

Adafruit biblioteke

Za rad s OLED ekranom koristimo dvije ključne biblioteke:

Adafruit_SSD1306.h

Ova biblioteka je specifična za OLED ekrane s SSD1306 kontrolerom i omogućuje:

komunikaciju s ekranom,
upravljanje memorijom prikaza,
slanje grafike na ekran.

Adafruit_GFX.h

Ovo je osnovna grafička biblioteka koja omogućuje:

crtanje linija, pravokutnika i krugova,
prikaz teksta različitih veličina,
rad s koordinatnim sustavom (x, y).

Zajedno, ove dvije biblioteke omogućuju vrlo fleksibilan rad s ekranom – od jednostavnog ispisa teksta do kompleksnih grafičkih prikaza.

Rad s direktnim bufferom vs. Adafruit_GFX

OLED ekran interno koristi frame buffer – dio memorije u kojem je zapisan svaki piksel ekrana (ukupno 128×64 piksela). Kod direktnog rada s bufferom, program sam ručno mijenja pojedine bitove u toj memoriji kako bi upalio ili ugasio piksele.

To znači da:

moraš ručno računati u kojem bajtu se nalazi određeni piksel,
koristiti bit‑maske (&, |, «, ») za paljenje i gašenje piksela,
sam implementirati funkcije za crtanje linija, krugova, teksta i sl.

Ovakav pristup je odličan za učenje kako ekran radi ispod haube, ali je spor za razvoj i sklon greškama, osobito za početnike koji se tek upoznaju s programiranjem.

Adafruit_GFX biblioteka dodaje sloj apstrakcije iznad tog buffera. Umjesto da ručno mijenjamo bitove, dobivamo gotove funkcije kao što su:

drawPixel(x, y, color),
drawLine(x1, y1, x2, y2, color),
drawRect(...), fillRect(...), drawCircle(...),
setCursor(x, y), print(), println() za tekst.

Prednosti korištenja Adafruit_GFX biblioteke:

Brži razvoj: fokus je na sadržaju (što prikazati), a ne na niskorazinskim detaljima (kako svaki piksel upaliti).
Manje grešaka: biblioteka već ima provjerene algoritme za crtanje linija, krivulja, fontova itd.
Prenosivost: isti kod za crtanje radi na više različitih ekrana (OLED, TFT, LED matrice) jer GFX nudi zajedničko sučelje.
Čitljiviji kod: program je kraći i jasniji, što je posebno važno u edukativnom okruženju.

Za većinu školskih i hobi projekata praktičnije je koristiti Adafruit_GFX i Adafruit_SSD1306, a direktan rad s bufferom ostaviti za naprednije lekcije u kojima želoš dublje razumjeti kako nastaje slika na ekranu.

Vježba: Adafruit demo program

Za početak ćemo koristiti par gotovih demo programa koji prikazuje različite mogućnosti OLED ekrana.
Cilj vježbe je upoznati se s mogućnostima ekrana prije nego krenemo u izradu vlastitih projekata.

Spoji komponente prema ovoj shemi:

Hello, world!

Prva vježba ispisuje tekst Hello, world! na ekran i crta jednostavan pravokutnik.

// C++
#include <Wire.h>
#include <Adafruit_GFX.h>
#include <Adafruit_SSD1306.h>

Adafruit_SSD1306 display(128, 64, &Wire, -1);

void setup() {
  display.begin(SSD1306_SWITCHCAPVCC, 0x3C);

  display.clearDisplay();
  display.setTextSize(1);      
  display.setTextColor(SSD1306_WHITE); 
  display.setCursor(0,0);     
  display.println(F("Hello, world!"));
  
  display.drawRect(0, 15, 60, 30, SSD1306_WHITE);
  
  display.display();
}

void loop() {
}

OLED Demo program

U ovom programu možeš vidjeti kako:

ispisati tekst na ekran,
promijeniti veličinu i poziciju teksta,
crtati osnovne oblike (linije, krugove, pravokutnike),
ispisati slike na ekran,
prikazati jednostavne animacije.

Unutar samog kôda se nalazi veći broj komentara, koji objašnjavaju što rade pojedini dijelovi programa.

// C++
#include <SPI.h>
#include <Wire.h>
#include <Adafruit_GFX.h>
#include <Adafruit_SSD1306.h>

#define SCREEN_WIDTH 128 // OLED display width, in pixels
#define SCREEN_HEIGHT 64 // OLED display height, in pixels

// Declaration for an SSD1306 display connected to I2C (SDA, SCL pins)
// The pins for I2C are defined by the Wire-library. 
// On an arduino UNO:       A4(SDA), A5(SCL)
// On an arduino MEGA 2560: 20(SDA), 21(SCL)
// On an arduino LEONARDO:   2(SDA),  3(SCL), ...
#define OLED_RESET     -1 // Reset pin # (or -1 if sharing Arduino reset pin)
#define SCREEN_ADDRESS 0x3C ///< See datasheet for Address; 0x3D for 128x64, 0x3C for 128x32
Adafruit_SSD1306 display(SCREEN_WIDTH, SCREEN_HEIGHT, &Wire, OLED_RESET);

#define NUMFLAKES     10 // Number of snowflakes in the animation example

#define LOGO_HEIGHT   16
#define LOGO_WIDTH    16
static const unsigned char PROGMEM logo_bmp[] =
{ 0b00000000, 0b11000000,
  0b00000001, 0b11000000,
  0b00000001, 0b11000000,
  0b00000011, 0b11100000,
  0b11110011, 0b11100000,
  0b11111110, 0b11111000,
  0b01111110, 0b11111111,
  0b00110011, 0b10011111,
  0b00011111, 0b11111100,
  0b00001101, 0b01110000,
  0b00011011, 0b10100000,
  0b00111111, 0b11100000,
  0b00111111, 0b11110000,
  0b01111100, 0b11110000,
  0b01110000, 0b01110000,
  0b00000000, 0b00110000 };

void setup() {
  Serial.begin(9600);

  // Wait for display
  delay(500);

  // SSD1306_SWITCHCAPVCC = generate display voltage from 3.3V internally
  if(!display.begin(SSD1306_SWITCHCAPVCC, SCREEN_ADDRESS)) {
    Serial.println(F("SSD1306 allocation failed"));
    for(;;); // Don't proceed, loop forever
  }

  // Show initial display buffer contents on the screen --
  // the library initializes this with an Adafruit splash screen.
  display.display();
  delay(2000); // Pause for 2 seconds

  // Clear the buffer
  display.clearDisplay();

  // Draw a single pixel in white
  display.drawPixel(10, 10, SSD1306_WHITE);

  // Show the display buffer on the screen. You MUST call display() after
  // drawing commands to make them visible on screen!
  display.display();
  delay(2000);
  // display.display() is NOT necessary after every single drawing command,
  // unless that's what you want...rather, you can batch up a bunch of
  // drawing operations and then update the screen all at once by calling
  // display.display(). These examples demonstrate both approaches...

  testdrawline();      // Draw many lines

  testdrawrect();      // Draw rectangles (outlines)

  testfillrect();      // Draw rectangles (filled)

  testdrawcircle();    // Draw circles (outlines)

  testfillcircle();    // Draw circles (filled)

  testdrawroundrect(); // Draw rounded rectangles (outlines)

  testfillroundrect(); // Draw rounded rectangles (filled)

  testdrawtriangle();  // Draw triangles (outlines)

  testfilltriangle();  // Draw triangles (filled)

  testdrawchar();      // Draw characters of the default font

  testdrawstyles();    // Draw 'stylized' characters

  testscrolltext();    // Draw scrolling text

  testdrawbitmap();    // Draw a small bitmap image

  // Invert and restore display, pausing in-between
  display.invertDisplay(true);
  delay(1000);
  display.invertDisplay(false);
  delay(1000);

  testanimate(logo_bmp, LOGO_WIDTH, LOGO_HEIGHT); // Animate bitmaps
}

void loop() {
}

void testdrawline() {
  int16_t i;

  display.clearDisplay(); // Clear display buffer

  for(i=0; i<display.width(); i+=4) {
    display.drawLine(0, 0, i, display.height()-1, SSD1306_WHITE);
    display.display(); // Update screen with each newly-drawn line
    delay(1);
  }
  for(i=0; i<display.height(); i+=4) {
    display.drawLine(0, 0, display.width()-1, i, SSD1306_WHITE);
    display.display();
    delay(1);
  }
  delay(250);

  display.clearDisplay();

  for(i=0; i<display.width(); i+=4) {
    display.drawLine(0, display.height()-1, i, 0, SSD1306_WHITE);
    display.display();
    delay(1);
  }
  for(i=display.height()-1; i>=0; i-=4) {
    display.drawLine(0, display.height()-1, display.width()-1, i, SSD1306_WHITE);
    display.display();
    delay(1);
  }
  delay(250);

  display.clearDisplay();

  for(i=display.width()-1; i>=0; i-=4) {
    display.drawLine(display.width()-1, display.height()-1, i, 0, SSD1306_WHITE);
    display.display();
    delay(1);
  }
  for(i=display.height()-1; i>=0; i-=4) {
    display.drawLine(display.width()-1, display.height()-1, 0, i, SSD1306_WHITE);
    display.display();
    delay(1);
  }
  delay(250);

  display.clearDisplay();

  for(i=0; i<display.height(); i+=4) {
    display.drawLine(display.width()-1, 0, 0, i, SSD1306_WHITE);
    display.display();
    delay(1);
  }
  for(i=0; i<display.width(); i+=4) {
    display.drawLine(display.width()-1, 0, i, display.height()-1, SSD1306_WHITE);
    display.display();
    delay(1);
  }

  delay(2000); // Pause for 2 seconds
}

void testdrawrect(void) {
  display.clearDisplay();

  for(int16_t i=0; i<display.height()/2; i+=2) {
    display.drawRect(i, i, display.width()-2*i, display.height()-2*i, SSD1306_WHITE);
    display.display(); // Update screen with each newly-drawn rectangle
    delay(1);
  }

  delay(2000);
}

void testfillrect(void) {
  display.clearDisplay();

  for(int16_t i=0; i<display.height()/2; i+=3) {
    // The INVERSE color is used so rectangles alternate white/black
    display.fillRect(i, i, display.width()-i*2, display.height()-i*2, SSD1306_INVERSE);
    display.display(); // Update screen with each newly-drawn rectangle
    delay(1);
  }

  delay(2000);
}

void testdrawcircle(void) {
  display.clearDisplay();

  for(int16_t i=0; i<max(display.width(),display.height())/2; i+=2) {
    display.drawCircle(display.width()/2, display.height()/2, i, SSD1306_WHITE);
    display.display();
    delay(1);
  }

  delay(2000);
}

void testfillcircle(void) {
  display.clearDisplay();

  for(int16_t i=max(display.width(),display.height())/2; i>0; i-=3) {
    // The INVERSE color is used so circles alternate white/black
    display.fillCircle(display.width() / 2, display.height() / 2, i, SSD1306_INVERSE);
    display.display(); // Update screen with each newly-drawn circle
    delay(1);
  }

  delay(2000);
}

void testdrawroundrect(void) {
  display.clearDisplay();

  for(int16_t i=0; i<display.height()/2-2; i+=2) {
    display.drawRoundRect(i, i, display.width()-2*i, display.height()-2*i,
      display.height()/4, SSD1306_WHITE);
    display.display();
    delay(1);
  }

  delay(2000);
}

void testfillroundrect(void) {
  display.clearDisplay();

  for(int16_t i=0; i<display.height()/2-2; i+=2) {
    // The INVERSE color is used so round-rects alternate white/black
    display.fillRoundRect(i, i, display.width()-2*i, display.height()-2*i,
      display.height()/4, SSD1306_INVERSE);
    display.display();
    delay(1);
  }

  delay(2000);
}

void testdrawtriangle(void) {
  display.clearDisplay();

  for(int16_t i=0; i<max(display.width(),display.height())/2; i+=5) {
    display.drawTriangle(
      display.width()/2  , display.height()/2-i,
      display.width()/2-i, display.height()/2+i,
      display.width()/2+i, display.height()/2+i, SSD1306_WHITE);
    display.display();
    delay(1);
  }

  delay(2000);
}

void testfilltriangle(void) {
  display.clearDisplay();

  for(int16_t i=max(display.width(),display.height())/2; i>0; i-=5) {
    // The INVERSE color is used so triangles alternate white/black
    display.fillTriangle(
      display.width()/2  , display.height()/2-i,
      display.width()/2-i, display.height()/2+i,
      display.width()/2+i, display.height()/2+i, SSD1306_INVERSE);
    display.display();
    delay(1);
  }

  delay(2000);
}

void testdrawchar(void) {
  display.clearDisplay();

  display.setTextSize(1);      // Normal 1:1 pixel scale
  display.setTextColor(SSD1306_WHITE); // Draw white text
  display.setCursor(0, 0);     // Start at top-left corner
  display.cp437(true);         // Use full 256 char 'Code Page 437' font

  // Not all the characters will fit on the display. This is normal.
  // Library will draw what it can and the rest will be clipped.
  for(int16_t i=0; i<256; i++) {
    if(i == '\n') display.write(' ');
    else          display.write(i);
  }

  display.display();
  delay(2000);
}

void testdrawstyles(void) {
  display.clearDisplay();

  display.setTextSize(1);             // Normal 1:1 pixel scale
  display.setTextColor(SSD1306_WHITE);        // Draw white text
  display.setCursor(0,0);             // Start at top-left corner
  display.println(F("Hello, world!"));

  display.setTextColor(SSD1306_BLACK, SSD1306_WHITE); // Draw 'inverse' text
  display.println(3.141592);

  display.setTextSize(2);             // Draw 2X-scale text
  display.setTextColor(SSD1306_WHITE);
  display.print(F("0x")); display.println(0xDEADBEEF, HEX);

  display.display();
  delay(2000);
}

void testscrolltext(void) {
  display.clearDisplay();

  display.setTextSize(2); // Draw 2X-scale text
  display.setTextColor(SSD1306_WHITE);
  display.setCursor(10, 0);
  display.println(F("scroll"));
  display.display();      // Show initial text
  delay(100);

  // Scroll in various directions, pausing in-between:
  display.startscrollright(0x00, 0x0F);
  delay(2000);
  display.stopscroll();
  delay(1000);
  display.startscrollleft(0x00, 0x0F);
  delay(2000);
  display.stopscroll();
  delay(1000);
  display.startscrolldiagright(0x00, 0x07);
  delay(2000);
  display.startscrolldiagleft(0x00, 0x07);
  delay(2000);
  display.stopscroll();
  delay(1000);
}

void testdrawbitmap(void) {
  display.clearDisplay();

  display.drawBitmap(
    (display.width()  - LOGO_WIDTH ) / 2,
    (display.height() - LOGO_HEIGHT) / 2,
    logo_bmp, LOGO_WIDTH, LOGO_HEIGHT, 1);
  display.display();
  delay(1000);
}

#define XPOS   0 // Indexes into the 'icons' array in function below
#define YPOS   1
#define DELTAY 2

void testanimate(const uint8_t *bitmap, uint8_t w, uint8_t h) {
  int8_t f, icons[NUMFLAKES][3];

  // Initialize 'snowflake' positions
  for(f=0; f< NUMFLAKES; f++) {
    icons[f][XPOS]   = random(1 - LOGO_WIDTH, display.width());
    icons[f][YPOS]   = -LOGO_HEIGHT;
    icons[f][DELTAY] = random(1, 6);
    Serial.print(F("x: "));
    Serial.print(icons[f][XPOS], DEC);
    Serial.print(F(" y: "));
    Serial.print(icons[f][YPOS], DEC);
    Serial.print(F(" dy: "));
    Serial.println(icons[f][DELTAY], DEC);
  }

  for(;;) { // Loop forever...
    display.clearDisplay(); // Clear the display buffer

    // Draw each snowflake:
    for(f=0; f< NUMFLAKES; f++) {
      display.drawBitmap(icons[f][XPOS], icons[f][YPOS], bitmap, w, h, SSD1306_WHITE);
    }

    display.display(); // Show the display buffer on the screen
    delay(200);        // Pause for 1/10 second

    // Then update coordinates of each flake...
    for(f=0; f< NUMFLAKES; f++) {
      icons[f][YPOS] += icons[f][DELTAY];
      // If snowflake is off the bottom of the screen...
      if (icons[f][YPOS] >= display.height()) {
        // Reinitialize to a random position, just off the top
        icons[f][XPOS]   = random(1 - LOGO_WIDTH, display.width());
        icons[f][YPOS]   = -LOGO_HEIGHT;
        icons[f][DELTAY] = random(1, 6);
      }
    }
  }
}

Pitanja za razmišljanje:

Zašto misliš da OLED ekran troši manje energije kada prikazuje crni ekran nego bijeli?
Koje vrste projekata bi više imale koristi od OLED ekrana, a koje od LED matrice 8x8? Navedite barem jedan primjer za svaki.
Zašto je korisno koristiti gotove biblioteke poput Adafruit_GFX umjesto da sve pišemo od nule? Kada bi ipak bilo dobro raditi bez biblioteka?
Što se događa u pozadini kada u programu pozovemo display.display() (ili sličnu funkciju)? Zašto slanje slike na ekran ne radimo nakon svakog pojedinačnog crteža?
Zašto misliš da su koordinate na ekranu zapisane kao (x, y), gdje x raste prema desno, a y prema dolje? Možeš li zamisliti drugačiji koordinatni sustav?
Kada bismo prikazivali podatke sa senzora (npr. temperaturu), što je bolje: ispisivati samo broj ili dodati i neku malu ikonu? Zašto?

Dodatna pitanja i zadaci:

Osmisli tri različita načina prikaza istog podatka (npr. temperatura, broj koraka, rezultat igre) na OLED ekranu:
- samo tekst,
- tekst + ikona,
- jednostavan graf (npr. stupac, traka napretka).
Nacrtaj na papiru (ili programu za crtanje) kako bi izgledao mali status ekran za tvoj zamišljeni projekt (npr. pametna kućica, igra, pedometar). Označi gdje bi bili tekst, gdje ikone i zašto baš tamo.
Razmisli kako bi isti projekt izgledao na:
- jednom LED-u,
- LED matrici 8x8,
- OLED ekranu.
  Napiši što je lako, a što teško prikazati u svakoj varijanti.
Zamisli da imaš samo 3 sekunde da netko pogleda OLED ekran. Kako bi dizajnirao prikaz da osoba u te 3 sekunde shvati najvažniju informaciju?

Napredniji zadaci (za one koji žele još više):

Pokušaj osmisliti algoritam (opis riječima ili pseudokodom) koji bi mogao scrollati tekst preko ekrana s desna na lijevo. Koje varijable bi koristio i što bi se moralo događati u svakoj iteraciji petlje?
Zamisli da ekran ima dvostruki buffer (dva spremnika slike). Zašto bi to moglo pomoći kod animacija? Što bi bio nedostatak takvog pristupa?

Što smo naučili?

Što je OLED ekran i kako radi,
koje su njegove prednosti u odnosu na LED diode i LCD,
kako ga spojiti na Arduino Uno pomoću I2C komunikacije,
kako koristiti Adafruit biblioteke za upravljanje ekranom,
kako prikazati tekst i grafiku koristeći demo program.