Kiedy chcemy zrobić kolejny krok i wyświetlać dane na wyświetlaczu nie tylko alfanumerycznym ale również graficznym powinniśmy zacząć od OLED 128×32 lub 128×64 na sterowniku SSD1306. Są to stosunkowe tanie wyświetlacze wspierające komunikację I2C dzięki czemu podłączenie ich jest banalnie proste. Dostępne darmowe biblioteki pozwolą nam rysować proste kształty, ustawiać typ i wielkość czcionki oraz rysować i animować prostą grafikę. Wyświetlacz ten charakteryzuje się dobrym kątem widzenia, oraz jasnością podświetlenia. Można nabyć go w naszym sklepie internetowym: wyświetlacz OLED 128×32 SSD1306 0.91 cala

W tym wpisie krok po kroku wyjaśniamy jak podpiąć wyświetlacz OLED 128×32 do waszego Arduino oraz piszemy kod i wyjaśniamy krok po kroku jak wypisać text, zaświecić wybrane piksele oraz jak rysować proste figury takie jak linie czy kwadraty.

Dla tych którzy nie lubią czytać jak zawsze przygotowaliśmy video poradnik dostępny tutaj:

Podłączenie wyświetlacza

korzystając z komunikacji I2C – będziemy potrzebować 2 przewodów do komunikacji i 2 do zasilania:

1. SDA – linia danych – łączymy z SDA w Arduino
2. SCK – linia zegarowa – łączymy z SCK w Arduino
3. VCC – zasilanie modułu (3.3/ 5V)
4. GND – masa

Kolejno trzeba zainstalować bibliotekę do obsługi naszego wyświetlacza – będziemy używać tej od Adafruit ze względu na prostotę obsługi przez początkujących. W celu pobrania biblioteki wyszukujemy w środowisku ArduinoIDE w Library Manager: Adafruit SSD1306 i Adafruit GFX – instalujemy najnowsze wersje. Adafruit GFX jest bliblioteką pozwalającą na rysowanie obiektów graficznych na naszym wyświetlaczu.

Kolejno aby sprawdzić czy wszystko działa poprawni zalecamy uruchomienie przykładowego programu, który można znaleźć w ArduinoIDE wchodząc w Plik -> Przykłady -> Adafruit SSD1306 -> ssd1306_128x32_I2C i wgrywając szkic. Jeżeli na wyświetlaczu pojawi się wyświetlane DEMO możemy przystąpić do pisania własnego programu.

Ze względu na brak przystępnej dokumentacji do tej biblioteki można przeanalizować DEMO, i funkcje które przypadły nam do gustu przepisać do własnego kodu.

Kod programu i analiza:

#include <SPI.h>
#include <Wire.h>
#include <Adafruit_GFX.h>
#include <Adafruit_SSD1306.h>

Adafruit_SSD1306 display(4);


void setup() {

display.begin(SSD1306_SWITCHCAPVCC,0x3C);

display.clearDisplay();

}

void loop() {
  
display.clearDisplay();
display.setTextSize(1);
display.setTextColor(WHITE); 
display.drawLine(0, 0, 120, 32, WHITE);
display.drawRect(1, 1, 126, 30, WHITE);
display.setCursor(4,4);
display.println("ELEKTROWEB.PL");
display.display();
delay(2000);
display.setCursor(10,16);

display.println("SKLEP Z ELEKTRONIKA");
display.display();
display.clearDisplay();
delay(3000);
display.setCursor(4,16);
display.println("SUBSKRYBUJ TEN KANAL");
display.display();
delay(3000);  

display.drawPixel(120, 30, WHITE);
display.display(); 

}

Początek kodu (4 linijki) to biblioteki, które należy dodać aby mieć komunikację z wyświetlaczem .

Kolejno Adafruit_SSD1306 display(4); podajemy, że 4 nóżka steruje resetem.

W sekcji setup() kolejno:

display.begin(SSD1306_SWITCHCAPVCC,0x3C); inicjalizuje nasz wyświetlacz, podajemy(sterownik, adres wyświetlacza) W przypadku wyświetlacza 128×64 podajemy 0x3D – ale najlepiej aby mieć pewność jaki adres faktycznie posiada nasz wyświetlacz powinno się wykorzystać skaner, który można pobrać Library Managera wpisując I2C scanner.

Jak przeskanować i znaleźć właściwy adres pokazujemy na filmiku na naszym kanale YT pod tym linkiem: https://youtu.be/PZDqZQRWKEo?t=81

display.clearDisplay(); czyści pamięć wyświetlacza, wszystko co do tej pory było wyświetlane znika,

display.setTextSize(1); definiujemy jak duża ma być czcionka można używać tylko liczb całkowitych

display.setTextColor(WHITE); ustalamy kolor jaki będzie miała wyświetlany obiekt, ważne gdy wyświetlacz jest kolorowy u nas nic to nie zmienia.

display.drawLine(0, 0, 120, 32, WHITE); rysujemy linie i kolejno podajemy(x, y , kąt pochylenia, wysokość wyświetlacza, kolor)

Punkty X, Y to kolejno szerokość i wysokość naszego wyświetlacza przy czym lewy górny róg to początek osi – czyli środek wyświetlacza 128×32 definiuje punkt 64,16

display.drawRect(1, 1, 126, 30, WHITE);rysujemy prostokąt (X,Y, długość boku A, długość boku B, kolor)

display.setCursor(4,4); przestawiamy kursor w miejsce, w którym będziemy wyświetlać napis

display.println(„ELEKTROWEB.PL”); wypisujemy od miejsca kursora ELEKTROWEB.PL – pamiętamy aby używać WYŁĄCZNIE WIELKICH LITER!

display.display(); – jest to polecenie, które odświeża wyświetlacz i rysuje wszystkie zadane polecenia – jednym słowem dopiero teraz wyświetlimy linię, prostokąt i napis ELEKTROWEB.PL , od nas zależy czy chcemy rysować wszystko po kolei za każdym razem używając display.display(); czy odświeżać obraz po narysowaniu wszystkich elementów.

display.clearDisplay(); – czyścimy wyświetlacz ze wszystkich zapalonych pikseli

display.drawPixel(120, 30, WHITE); – podświetlamy pixel o lokalizacji X,Y na kolor biały

Zapraszamy na zakupy do naszego sklepu internetowego Elektroweb.pl

oraz dopisywania się do newsletera aby otrzymywać od nas kody rabatowe dostępne wyłącznie dla stałych klientów.

Zostawcie łapki w górę na naszym kanale YT jeżeli spodobał się video poradnik: kanał YouTube