ESP8266 NodeMCU ile OLED Grafik Görüntüleme Modülü

ESP8266 IoT projelerinize küçük bir grafik ekran eklemek ister misiniz? Veya belki de ESP8266'nızın IP adresini seri çıkışa başvurmadan görüntülemek istiyorsunuz. Bu süper havalı OLED (Organik Işık Yayan Diyot) ekranlar mükemmel uyum olabilir! Süper hafif, neredeyse kağıt inceliğinde, teorik olarak esnektir ve daha parlak ve daha net bir resim üretirler.

OLED Ekran Modülüne Genel Bakış

OLED ekran modülü, küçük bir monokrom OLED ekranı çıkarır. Bu var 128 piksel genişliğinde ve 64 piksel uzunluğunda genelinde "0,96 ölçme. Mikro, ancak yine de bir yumruk atıyor - OLED ekran, yüksek kontrast nedeniyle çok okunabilir ve oraya aldatıcı derecede büyük miktarda grafik sığdırabilirsiniz.

Ekran kendi ışığını yaptığından, arka ışık gerekmez. Bu, OLED'i çalıştırmak için gereken gücü önemli ölçüde azaltır ve ekranın bu kadar yüksek kontrasta , son derece geniş görüş açısına sahip olmasının ve derin siyah seviyelerini göstermesinin nedeni budur .

Modülün merkezinde güçlü bir tek yongalı CMOS OLED sürücü denetleyicisi olan SSD1306 , tüm RAM tamponlamasını gerçekleştirir, böylece ESP8266'nız tarafından çok az iş yapılması gerekir. Ayrıca SSD1306 denetleyicisinin çalışma voltajı 1,65V ila 3,3V arasındadır - ESP8266 gibi 3,3 V mikro denetleyicilerle arayüz oluşturmak için mükemmeldir.

OLED Bellek Haritası

OLED ekran modülünüz üzerinde mutlak kontrole sahip olmak için, bellek haritasını bilmek önemlidir.

OLED modülünün boyutuna bakılmaksızın, SSD1306 sürücüsünde, görüntülenecek bit modelini tutan ekran için dahili 1KB Grafik Görüntüleme Veri RAM'i (GDDRAM) bulunur. Bu 1K hafıza alanı 8 sayfada düzenlenmiştir (0'dan 7'ye kadar). Her sayfa 128 sütun / segment içerir (blok 0 ila 127). Ve her sütun 8 bitlik veri depolayabilir (0'dan 7'ye kadar). Bu kesinlikle bize sahip olduğumuzu söylüyor.

8 sayfa x 128 segment x 8 bit veri = 8192 bit = 1024 bayt = 1KB bellek

Sayfalar, segmentler ve veriler içeren 1K belleğin tamamı aşağıda vurgulanmıştır.

Her bit, ekrandaki programla AÇIK veya KAPALI konuma getirilebilen belirli OLED pikselini temsil eder.

128 × 64 OLED ekranı RAM'in tüm içeriğini görüntülerken 128 × 32 OLED ekranı yalnızca 4 sayfa (yarı içerik) RAM görüntüler.

OLED ekran modülünü ESP8266 NodeMCU'ya kablolama

Teori yeter, Let's Go Practical! Ekranı ESP8266 NodeMCU'ya bağlayalım.

Bağlantılar oldukça basit. Bağlayarak başlayın VCC 3.3V NodeMCU üzerinde çıktı ve bağlantı için iğneye GND yere.

Ardından, SCL pinini NodeMCU'nuzdaki I2C clock D1 pinine bağlayın ve SDA pinini NodeMCU'nuzdaki I2C data D2 pinine bağlayın. 

Aşağıdaki şema, her şeyi nasıl bağlayacağınızı gösterir.

ESP8266 NodeMCU ile OLED Ekranı Kablolama

Bununla, artık bir kod yüklemeye ve ekran baskısını almaya hazırsınız.

OLED Ekran Modülü için Kitaplığı Yükleme

OLED ekranın SSD1306 denetleyicisi esnek ancak karmaşık sürücülere sahiptir. SSD1306 denetleyicisini kullanmak için bellek adresleme konusunda geniş bilgi gereklidir. Neyse ki, Adafruit'in SSD1306 kitaplığı , ekranı kontrol etmek için basit komutlar verebilmemiz için SSD1306 denetleyicisinin karmaşıklıklarını gizlemek için yazılmıştır.

Kitaplığı kurmak için Sketch> Dahil Et> Kitaplıkları Yönet'e gidin… Kitaplık Yöneticisinin kitaplıklar dizinini indirmesini ve kurulu kitaplıkların listesini güncellemesini bekleyin.

Aramanızı ' adafruit ssd1306 ' yazarak filtreleyin . Birkaç giriş olmalı. Arayın Adafruit SSD1306 tarafından Adafruit . Bu girişe tıklayın ve ardından Yükle'yi seçin.

Bu Adafruit SSD1306 kütüphanesi, daha düşük seviyeli fonksiyonları işleyen donanıma özel bir kütüphanedir. Nokta, çizgi, daire, dikdörtgen vb. Grafik temellerini görüntülemek için Adafruit GFX Kitaplığı ile eşleştirilmesi gerekir. Bu kitaplığı da kurun.

NOT

Kitaplık, arabellek olarak ESP8266'dan 1KB (128 × 64) / 8 bit) bellek ayırır. Böylece, ekran arabelleğini değiştirebilir ve ardından ESP8266'nın belleğinden SSD1306 denetleyicisinin dahili belleğine toplu bir aktarım gerçekleştirebilir.

Adafruit SSD1306 Kitaplığını Değiştirme

Adafruit'in SSD1306 Kitaplığı, 128 × 64 OLED ekranlar (şu anda kullandığımız ekran) için ayarlanmadı. Adafruit_SSD1306.h başlık dosyasında bizim için çalışması için görüntü boyutu değiştirilmelidir. Değiştirilmezse, #error ("Yükseklik yanlış, lütfen Adafruit_SSD1306.h'yi düzeltin!"); Arduino IDE'de örnek taslağı doğrulamaya çalışırken görünebilir:

Adafruit_SSD1306.h başlık dosyasını değiştirmek için eskiz defteri konumunuzu açın. Genelde Belgelerim> Arduino'dur. Şimdi kütüphanelere gidin > Adafruit_SSD1306

Adafruit_SSD1306.h dosyasını bir metin düzenleyicide açın. SSD1306 Ekranları ile bölümü bulmak için dosyayı aşağı kaydırın veya doğrudan satır no. 73. #define SSD1306_128_32 ifadesini yorumlayın ve #define SSD1306_128_64 yorumunu kaldırın, böylece bu bölümdeki kod aşağıdaki gibi görünür:

Bu kadar. Şimdi dosyayı kaydedin ve Arduino IDE'nizi yeniden başlatın.

ESP8266 Kodu - Metni Görüntüleme

Şimdi ilginç şeyler geliyor!

Aşağıdaki test taslağı "Merhaba Dünya!" ekranda mesaj. Ayrıca şunları içerir:

• Ters çevrilmiş metni görüntüleme
• Sayıları Görüntüleme
• Tabanlı Sayıları Görüntüleme (Hex, Dec)
• ASCII sembollerini görüntüleme
• Metni Yatay ve Dikey Kaydırma
• Ekranın kaydırma kısmı

Bu, OLED ekranın nasıl kullanılacağı konusunda size tam bir anlayış sağlayacaktır ve daha pratik deneyler ve projeler için temel oluşturabilir.

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

Adafruit_SSD1306 display(-1);

void setup()   
{                
	// initialize with the I2C addr 0x3C
	display.begin(SSD1306_SWITCHCAPVCC, 0x3C);  

	// Clear the buffer.
	display.clearDisplay();

	// Display Text
	display.setTextSize(1);
	display.setTextColor(WHITE);
	display.setCursor(0,28);
	display.println("Hello world!");
	display.display();
	delay(2000);
	display.clearDisplay();

	// Display Inverted Text
	display.setTextColor(BLACK, WHITE); // 'inverted' text
	display.setCursor(0,28);
	display.println("Hello world!");
	display.display();
	delay(2000);
	display.clearDisplay();

	// Changing Font Size
	display.setTextColor(WHITE);
	display.setCursor(0,24);
	display.setTextSize(2);
	display.println("Hello!");
	display.display();
	delay(2000);
	display.clearDisplay();

	// Display Numbers
	display.setTextSize(1);
	display.setCursor(0,28);
	display.println(123456789);
	display.display();
	delay(2000);
	display.clearDisplay();

	// Specifying Base For Numbers
	display.setCursor(0,28);
	display.print("0x"); display.print(0xFF, HEX); 
	display.print("(HEX) = ");
	display.print(0xFF, DEC);
	display.println("(DEC)"); 
	display.display();
	delay(2000);
	display.clearDisplay();

	// Display ASCII Characters
	display.setCursor(0,24);
	display.setTextSize(2);
	display.write(3);
	display.display();
	delay(2000);
	display.clearDisplay();

	// Scroll full screen
	display.setCursor(0,0);
	display.setTextSize(1);
	display.println("Full");
	display.println("screen");
	display.println("scrolling!");
	display.display();
	display.startscrollright(0x00, 0x07);
	delay(2000);
	display.stopscroll();
	delay(1000);
	display.startscrollleft(0x00, 0x07);
	delay(2000);
	display.stopscroll();
	delay(1000);    
	display.startscrolldiagright(0x00, 0x07);
	delay(2000);
	display.startscrolldiagleft(0x00, 0x07);
	delay(2000);
	display.stopscroll();
	display.clearDisplay();

	// Scroll part of the screen
	display.setCursor(0,0);
	display.setTextSize(1);
	display.println("Scroll");
	display.println("some part");
	display.println("of the screen.");
	display.display();
	display.startscrollright(0x00, 0x00);
}

void loop() {}

Taslak, dört kitaplık dahil ederek başlar. SPI.h , Wire.h , Adafruit_GFX.h ve Adafruit_SSD1306.h . I2C OLED ekranlar için SPI.h kitaplığı gerekli olmasa da, programımızı derlemek adına eklememiz gerekir.

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

Sonra, bir Adafruit_SSD1306.h nesnesi oluşturmamız gerekiyor. Adafruit_SSD1306 kurucusu, ekranın sıfırlama pininin bağlı olduğu ESP8266 pin numarasını kabul eder. Kullandığımız OLED ekranın RESET pinine sahip olmadığı için kurucuya - 1 göndereceğiz, böylece ESP8266 pinlerinden hiçbiri ekran için sıfırlama olarak kullanılmayacak.

Adafruit_SSD1306 display(-1);

Kurulum işlevinde: OLED nesnesini begin()işlevi kullanarak başlatmamız gerekir . Fonksiyon iki parametre alır. Birinci parametre SSD1306_SWITCHCAPVCC , dahili şarj pompası devresini AÇIK konuma getirirken, ikinci parametre OLED ekranının I2C adresini sağlar. Bu tür OLED ekran modülünün I2C adresi genellikle 0x3C'dir. Düzeltildi ve değiştirilemez.

Ardından, ekrana ilk mesajımızı yazdırmadan önce tamponu temizliyoruz.

// initialize with the I2C addr 0x3C
display.begin(SSD1306_SWITCHCAPVCC, 0x3C);

// Clear the buffer.
display.clearDisplay();

Basit Metin görüntüleme (Merhaba Dünya)

// Display Text
display.clearDisplay();
display.setTextSize(1);
display.setTextColor(WHITE);
display.setCursor(0,28);
display.println("Hello world!");
display.display();
delay(2000);

Ekrandaki metni görüntülemek için yazı tipi boyutunu ayarlamamız gerekir. Bu, setTextSize(font-size)yazı tipi boyutunu (1'den başlayarak) parametre olarak çağırarak ve ileterek yapılabilir .

Ardından, function'ı çağırarak yazı tipi rengini ayarlamamız gerekiyor setTextColor(color). Parametre geçmek WHITE karanlık bir arka plan ve geçiş SİYAH parlak bir arka için. Şimdi mesajı yazdırmadan önce, işlevi çağırarak imleç konumunu ayarlamamız gerekiyor setCursor(X,Y). Ekrandaki pikseller, yatay (X) ve dikey (Y) koordinatlarıyla adreslenir. Koordinat sistemi orijini (0,0) sol üst köşeye yerleştirir; pozitif X sağa doğru artar ve pozitif Y aşağı doğru artar.

Seri monitöre veri yazdırdığımız gibi mesajı ekrana yazdırmak için basit print(“ ”)veya println(“ ”)işlev kullanabiliriz . Unutmayın, println()imleci yeni satıra taşıyacak.

Kitaplığın ekran arabelleğinde (saniyede 100 kareden fazla) son derece hızlı matematiksel işlemler gerçekleştirmesi için, yazdırma işlevlerine yapılan çağrılar, ekran arabelleğinin içeriğini SSD1306 denetleyicisine hemen aktarmaz. display()Kitaplığa, ESP8266'daki ekran arabelleğinden SSD1306 denetleyicisinin dahili belleğine toplu aktarımı gerçekleştirmesi talimatını vermek için bir komut gereklidir. Bellek aktarılır aktarılmaz, ekran arabelleğine karşılık gelen pikseller OLED ekranda görünecektir.

Ters Çevrilmiş Metni Görüntüleme

// Display Inverted Text
display.clearDisplay();
display.setTextColor(BLACK, WHITE); // 'inverted' text
display.setCursor(0,28);
display.println("Hello world!");
display.display();
delay(2000);

Tersine çevrilmiş metni görüntülemek için setTextColor(FontColor,BackgroundColor)işlevi tekrar çağıracağız . Dikkat ediyorsanız, bu işleve daha önce yalnızca bir parametre geçirdiğimizi biliyorsunuz, ancak şimdi iki parametreyi aktarıyoruz. Bu, işlev aşırı yükleme denen bir şey nedeniyle mümkündür . İşlev aşırı yükleme, aynı adda ancak farklı parametreler kümesiyle birden çok işlev oluşturma yeteneğidir . Aşırı yüklenmiş bir işleve yapılan çağrılar, geçirilen parametrelere bağlı olarak bu işlevin belirli bir uygulamasını çalıştırır.

Bizim durumumuzda geçiş setTextColor(BLACK, WHITE), dolu arka plan üzerinde siyah metin oluşturacaktır.

Yazı Tipi Boyutunu Ölçeklendirme

// Changing Font Size
display.clearDisplay();
display.setTextColor(WHITE);
display.setCursor(0,24);
display.setTextSize(2);
display.println("Hello!");
display.display();
delay(2000);

Bu öğreticide daha önce, setTextSize(font-size)yazı tipi boyutunu ayarlamak için function'ı çağırdık ve parametre olarak 1'i geçtik. Negatif olmayan herhangi bir tamsayı geçirerek yazı tipini ölçeklemek için bu işlevi kullanabilirsiniz.

Karakterler 7:10 oranında oluşturulur. Yani, yazı tipi boyutu 1'i geçirmek, metni karakter başına 7 × 10 piksel, 2'yi geçmek ise metni karakter başına 14 × 20 piksel olarak oluşturacaktır ve bu böyle devam edecektir.

Adafruit_GFX kitaplığı yazı tipinin oluşturulmasından sorumludur. Varsayılan olarak tek aralıklı yazı tipi seçilir. Bununla birlikte, Adafruit GFX kitaplığının daha yeni sürümleri, alternatif yazı tiplerini kullanma olanağı sunar. Kitaplıkla birlikte birkaç alternatif yazı tipi gelir, ayrıca yenilerini ekleme olanağı vardır.

Sayıları Görüntüleme

// Display Numbers
display.clearDisplay();
display.setTextSize(1);
display.setCursor(0,28);
display.println(123456789);
display.display();
delay(2000);

Numaralar, OLED ekranında sadece aranarak print()veya println()işlevle görüntülenebilir. Bu işlevlerin aşırı yüklenmiş bir uygulaması 32 bit işaretsiz int kabul eder, bu nedenle yalnızca 0 ile 4,294,967,295 arasındaki sayıları görüntüleyebilirsiniz.

Sayılar İçin Taban Belirtme

// Specifying Base For Numbers
display.clearDisplay();
display.setCursor(0,28);
display.print("0x"); display.print(0xFF, HEX); 
display.print("(HEX) = ");
display.print(0xFF, DEC);
display.println("(DEC)"); 
display.display();
delay(2000);

print()Ve println()işlevleri kullanımı bazı (format) belirtir isteğe bağlı ikinci bir parametre vardır; izin verilen değerler BIN (ikili veya taban 2), OCT (sekizlik veya taban 8), DEC (ondalık veya taban 10), HEX (onaltılık veya taban 16). Kayan nokta sayıları için bu parametre, kullanılacak ondalık basamakların sayısını belirtir. Örneğin:

• baskı (78, BIN) "1001110" verir
• print (78, OCT) "116" verir
• print (78, DEC) "78" verir
• print (78, HEX) "4E" verir
• println (1.23456, 0) "1" verir
• println (1.23456, 2) "1.23" verir
• println (1.23456, 4) "1.2346" verir

ASCII Sembollerini Görüntüleme

// Display ASCII Characters
display.clearDisplay();
display.setCursor(0,24);
display.setTextSize(2);
display.write(3);
display.display();
delay(2000);

print()& println()Ederken fonksiyonları insan tarafından okunabilir ASCII metin olarak ekrana veri göndermek write()fonksiyon ekrana ikili veri gönderir. Dolayısıyla, ASCII sembollerini görüntülemek için bu işlevi kullanabilirsiniz. Örneğimizde 3 numarayı göndermek kalp sembolünü gösterecektir.

Tam Ekran Kaydırma

// Scroll full screen
display.clearDisplay();
display.setCursor(0,0);
display.setTextSize(1);
display.println("Full");
display.println("screen");
display.println("scrolling!");
display.display();
display.startscrollright(0x00, 0x07);
delay(2000);
display.stopscroll();
delay(1000);
display.startscrollleft(0x00, 0x07);
delay(2000);
display.stopscroll();
delay(1000);    
display.startscrolldiagright(0x00, 0x07);
delay(2000);
display.startscrolldiagleft(0x00, 0x07);
delay(2000);
display.stopscroll();

Yatay çağrı ekranda kaydırma yapabilirsiniz startscrollright(start page, stop page)& startscrollleft(start page, stop page)işlevleri ve çapraz arayarak startscrolldiagright(start page, stop page)& startscrolldiagleft(start page, stop page). Tüm bu işlevler iki parametreyi kabul eder, yani. başlangıç ​​sayfası ve durdurma sayfası. Sayfaların açıklaması için OLED Hafıza Haritası bölümüne bakın. Ekranda 0'dan 7'ye kadar sekiz sayfa olduğu için, tüm sayfaları kaydırarak yani 0x00 ve 0x07 parametrelerini geçerek tüm ekranı kaydırabilirsiniz.

Ekranın kaymasını durdurmak için stopscroll()işlevini kullanabilirsiniz .

Belirli Parçayı Kaydırma

// Scroll part of the screen
display.setCursor(0,0);
display.setTextSize(1);
display.println("Scroll");
display.println("some part");
display.println("of the screen.");
display.display();
display.startscrollright(0x00, 0x00);

Bazen tüm ekranı kaydırmak istemiyoruz. Kaydırma işlevlerine uygun başlangıç ​​sayfası ve durdurma sayfası bilgilerini aktararak bunu yapabilirsiniz. Sayfaların açıklaması için OLED Hafıza Haritası bölümüne bakın. Ekranda 0'dan 7'ye kadar sekiz sayfa olduğu için, belirli sayfa numaralarını parametre olarak geçirerek ekranın bir kısmını kaydırabilirsiniz.

Örneğimizde, her iki parametreyi de 0x00 olarak geçtik. Bu, ekranın yalnızca ilk sayfasını (ilk 8 satırı) kaydıracaktır.

ESP8266 Kodu - Temel Çizimler

Bu örnekte, bazı temel çizimler deneyeceğiz. Bu çizim, dikdörtgenler, yuvarlak dikdörtgenler, daireler ve üçgenler dahil olmak üzere birçok çizim işlevini gösterir. Taslağı deneyin, sonra onu biraz ayrıntılı olarak inceleyeceğiz.

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

Adafruit_SSD1306 display(-1);

void setup()   
{                
	// initialize with the I2C addr 0x3C
	display.begin(SSD1306_SWITCHCAPVCC, 0x3C);  

	// Clear the buffer.
	display.clearDisplay();

	display.setTextSize(1);
	display.setTextColor(WHITE);
	display.setCursor(0,0);
	display.println("Rectangle");
	display.drawRect(0, 15, 60, 40, WHITE);
	display.display();
	delay(2000);
	display.clearDisplay();

	display.setTextSize(1);
	display.setTextColor(WHITE);
	display.setCursor(0,0);
	display.println("Filled Rectangle");
	display.fillRect(0, 15, 60, 40, WHITE);
	display.display();
	delay(2000);
	display.clearDisplay();

	display.setTextSize(1);
	display.setTextColor(WHITE);
	display.setCursor(0,0);
	display.println("Round Rectangle");
	display.drawRoundRect(0, 15, 60, 40, 8, WHITE);
	display.display();
	delay(2000);
	display.clearDisplay();

	display.setTextSize(1);
	display.setTextColor(WHITE);
	display.setCursor(0,0);
	display.println("Filled Round Rectangl");
	display.fillRoundRect(0, 15, 60, 40, 8, WHITE);
	display.display();
	delay(2000);
	display.clearDisplay();

	display.setTextSize(1);
	display.setTextColor(WHITE);
	display.setCursor(0,0);
	display.println("Circle");
	display.drawCircle(20, 35, 20, WHITE);
	display.display();
	delay(2000);
	display.clearDisplay();

	display.setTextSize(1);
	display.setTextColor(WHITE);
	display.setCursor(0,0);
	display.println("Filled Circle");
	display.fillCircle(20, 35, 20, WHITE);
	display.display();
	delay(2000);
	display.clearDisplay();

	display.setTextSize(1);
	display.setTextColor(WHITE);
	display.setCursor(0,0);
	display.println("Triangle");
	display.drawTriangle(30, 15, 0, 60, 60, 60, WHITE);
	display.display();
	delay(2000);
	display.clearDisplay();

	display.setTextSize(1);
	display.setTextColor(WHITE);
	display.setCursor(0,0);
	display.println("Filled Triangle");
	display.fillTriangle(30, 15, 0, 60, 60, 60, WHITE);
	display.display();
	delay(2000);
	display.clearDisplay();
}

void loop() {}

Temel çizimler çizmek için aşağıdaki kod parçacıkları dışında kodun çoğu (kitaplıklar dahil ve ekranı başlatma) yukarıdaki kod örneğiyle aynıdır.

Dikdörtgen Çizim

display.clearDisplay();
display.setTextSize(1);
display.setTextColor(WHITE);
display.setCursor(0,0);
display.println("Rectangle");
display.drawRect(0, 15, 60, 40, WHITE);
display.display();
delay(2000);

display.clearDisplay();  
display.setTextSize(1);
display.setTextColor(WHITE);
display.setCursor(0,0);
display.println("Filled Rectangle");
display.fillRect(0, 15, 60, 40, WHITE);
display.display();
delay(2000);

drawRect(X-coordinate, Y-coordinate, Width, Height, color)Fonksiyonunu kullanarak ekrana dikdörtgen çizebilirsiniz . Aslında bu işlev, 1 piksel kenarlıklı içi boş dikdörtgen çizer. fillRect()Fonksiyonu kullanarak dolu dikdörtgen çizebilirsiniz .

Yuvarlak Dikdörtgen Çizimi

display.clearDisplay();
display.setTextSize(1);
display.setTextColor(WHITE);
display.setCursor(0,0);
display.println("Round Rectangle");
display.drawRoundRect(0, 15, 60, 40, 8, WHITE);
display.display();
delay(2000);

display.clearDisplay();  
display.setTextSize(1);
display.setTextColor(WHITE);
display.setCursor(0,0);
display.println("Filled Round Rectangl");
display.fillRoundRect(0, 15, 60, 40, 8, WHITE);
display.display();
delay(2000);

drawRoundRect(X-coordinate, Y-coordinate, Width, Height, color)Fonksiyonunu kullanarak ekranda yuvarlak dikdörtgen çizebilirsiniz . Bu işlev, bir ek parametre - Köşe yuvarlama yarıçapı dışında drawRect () işleviyle aynı parametreleri alır. Aslında bu işlev, 1 piksel kenarlıklı içi boş yuvarlak dikdörtgen çizer. fillRoundRect()Fonksiyonunu kullanarak dolu yuvarlak dikdörtgen çizebilirsiniz .

Çizim Çemberi

display.clearDisplay();
display.setTextSize(1);
display.setTextColor(WHITE);
display.setCursor(0,0);
display.println("Circle");
display.drawCircle(20, 35, 20, WHITE);
display.display();
delay(2000);

display.clearDisplay();
display.setTextSize(1);
display.setTextColor(WHITE);
display.setCursor(0,0);
display.println("Filled Circle");
display.fillCircle(20, 35, 20, WHITE);
display.display();
delay(2000);

drawCircle(X-coordinate of center, Y-coordinate of center, radius, color)Fonksiyonu kullanarak ekranda daire çizebilirsiniz . Bu işlev, 1 piksel kenarlıklı içi boş daire çizer. fillCircle()Fonksiyonu kullanarak içi dolu daire çizebilirsiniz .

Üçgen Çizim

display.clearDisplay();
display.setTextSize(1);
display.setTextColor(WHITE);
display.setCursor(0,0);
display.println("Triangle");
display.drawTriangle(30, 15, 0, 60, 60, 60, WHITE);
display.display();
delay(2000);

display.clearDisplay();
display.setTextSize(1);
display.setTextColor(WHITE);
display.setCursor(0,0);
display.println("Filled Triangle");
display.fillTriangle(30, 15, 0, 60, 60, 60, WHITE);
display.display();
delay(2000);

drawTriangle(x0, y0, x1, y1, x2, y2, color)Fonksiyonu kullanarak ekranda üçgen çizebilirsiniz . Fonksiyon yedi parametre alır, yani. Üçgen ve renk köşelerinin 3 X ve Y koordinatları. (X0, y0) üst köşeyi, (x1, y1) sol köşeyi ve (x2, y2) sağ köşeyi temsil eder.

Bu işlev, 1 piksel kenarlıklı içi boş üçgen çizer. fillTriangle()Fonksiyonu kullanarak dolu üçgen çizebilirsiniz .

ESP8266 NodeMCU Kodu - Bit Eşlemi Görüntüleme

Bu son örnek, bit eşlem görüntülerinin OLED Ekrana nasıl çizileceğini gösterir. Bu, şirket logolarının açılış ekranlarını oluşturmak, hareketli yazılar oluşturmak veya yalnızca bilgileri görüntülemek için eğlenceli grafikler oluşturmak için kullanışlıdır. Aşağıdaki kodu kopyalayın, Arduino IDE'ye yapıştırın ve karşıya yükle'ye tıklayın.

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

Adafruit_SSD1306 display(-1);

// Bitmap of MarilynMonroe Image
const unsigned char MarilynMonroe [] PROGMEM = {
	0xff, 0xff, 0xff, 0xff, 0xff, 0xf8, 0x1f, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 
	0xff, 0xff, 0xff, 0xff, 0xff, 0xc0, 0x1f, 0xff, 0xff, 0xf0, 0x41, 0xff, 0xff, 0xff, 0xff, 0xff, 
	0xff, 0xff, 0xff, 0xff, 0xff, 0x80, 0x7f, 0xff, 0xff, 0xf8, 0x03, 0xff, 0xff, 0xff, 0xff, 0xff, 
	0xff, 0xff, 0xff, 0xff, 0xff, 0xf9, 0xff, 0xff, 0xff, 0xe0, 0x07, 0xff, 0xff, 0xff, 0xff, 0xff, 
	0xff, 0xff, 0xff, 0xff, 0xff, 0x87, 0xff, 0xff, 0xff, 0xf8, 0x03, 0xff, 0xff, 0xff, 0xff, 0xff, 
	0xff, 0xff, 0xff, 0xff, 0xff, 0x07, 0xff, 0xff, 0xff, 0xf8, 0x01, 0xf1, 0xff, 0xff, 0xff, 0xff, 
	0xff, 0xff, 0xff, 0xff, 0xff, 0x9f, 0xff, 0xff, 0xff, 0xf8, 0x00, 0xf8, 0xff, 0xff, 0xff, 0xff, 
	0xff, 0xff, 0xff, 0xff, 0xff, 0xbf, 0xff, 0xff, 0xff, 0xfc, 0x02, 0x78, 0x7f, 0xff, 0xff, 0xff, 
	0xff, 0xff, 0xff, 0xff, 0xff, 0xfc, 0x3f, 0xff, 0xff, 0xfe, 0x03, 0x7c, 0x1f, 0xff, 0xff, 0xff, 
	0xff, 0xff, 0xff, 0xff, 0xff, 0xf0, 0x07, 0xff, 0xff, 0xfe, 0x01, 0xfe, 0x1f, 0xff, 0xff, 0xff, 
	0xff, 0xff, 0xff, 0xff, 0xfd, 0xe0, 0x03, 0xff, 0xff, 0xfc, 0x00, 0xfe, 0x0f, 0xff, 0xff, 0xff, 
	0xff, 0xff, 0xff, 0xff, 0xfe, 0x87, 0xe0, 0xff, 0xff, 0xfc, 0x00, 0x06, 0x07, 0xff, 0xff, 0xff, 
	0xff, 0xff, 0xff, 0xff, 0xfc, 0x1f, 0xf9, 0xff, 0xff, 0xfc, 0x00, 0x02, 0x07, 0xff, 0xff, 0xff, 
	0xff, 0xff, 0xff, 0xff, 0xf8, 0x1f, 0xff, 0xff, 0xff, 0xfc, 0x00, 0xc3, 0xc3, 0xff, 0xff, 0xff, 
	0xff, 0xff, 0xff, 0xff, 0xf0, 0x3f, 0xff, 0xff, 0xe0, 0x0c, 0x00, 0xe7, 0x81, 0xff, 0xff, 0xff, 
	0xff, 0xff, 0xff, 0xff, 0xf0, 0x0f, 0xff, 0xff, 0xe0, 0x02, 0x00, 0x02, 0x00, 0xff, 0xff, 0xff, 
	0xff, 0xff, 0xff, 0xff, 0xf0, 0x0f, 0xff, 0xff, 0xe0, 0x01, 0x00, 0x00, 0x00, 0x3f, 0xff, 0xff, 
	0xff, 0xff, 0xff, 0xff, 0x80, 0x00, 0x3f, 0xff, 0xff, 0xe0, 0x00, 0x00, 0x1e, 0x3f, 0xff, 0xff, 
	0xff, 0xff, 0xff, 0xfc, 0x00, 0x00, 0x0f, 0xff, 0x3f, 0xf8, 0x00, 0x18, 0x7f, 0x1f, 0xff, 0xff, 
	0xff, 0xff, 0xff, 0xf8, 0x01, 0x80, 0x03, 0xfc, 0x3f, 0xfc, 0x00, 0x70, 0xfe, 0x1f, 0xff, 0xff, 
	0xff, 0xff, 0xff, 0xf0, 0x43, 0xff, 0xff, 0xf8, 0x7f, 0xf8, 0x00, 0x00, 0x7e, 0x1f, 0xff, 0xff, 
	0xff, 0xff, 0xff, 0xe0, 0x07, 0xff, 0xff, 0xf0, 0xff, 0xfc, 0x00, 0x00, 0x7c, 0x3f, 0xff, 0xff, 
	0xff, 0xff, 0xff, 0xe0, 0x0f, 0xff, 0xff, 0xf1, 0xef, 0xf8, 0x00, 0x01, 0xfc, 0x3f, 0xff, 0xff, 
	0xff, 0xff, 0xff, 0xe4, 0xff, 0xff, 0xff, 0xf3, 0x80, 0xa0, 0x00, 0x07, 0xfc, 0xaf, 0xff, 0xff, 
	0xff, 0xff, 0xff, 0xec, 0x5f, 0xff, 0xff, 0xe7, 0xf0, 0x00, 0x00, 0x03, 0xfe, 0xdf, 0xff, 0xff, 
	0xff, 0xff, 0xff, 0xee, 0x7f, 0xff, 0xff, 0xc7, 0xf8, 0x00, 0x00, 0x03, 0xff, 0xdf, 0xff, 0xff, 
	0xff, 0xff, 0xff, 0xfe, 0x7f, 0xff, 0xf7, 0xc7, 0xff, 0x06, 0x00, 0x03, 0xff, 0xbf, 0xff, 0xff, 
	0xff, 0xff, 0xff, 0xfe, 0x5f, 0xff, 0xc7, 0x07, 0xff, 0x80, 0x00, 0x07, 0xdb, 0xbf, 0xff, 0xff, 
	0xff, 0xff, 0xff, 0xee, 0xff, 0xff, 0x80, 0x03, 0xff, 0xc0, 0x00, 0x03, 0xc3, 0x0f, 0xff, 0xff, 
	0xff, 0xff, 0xff, 0xfe, 0xff, 0xff, 0x98, 0x03, 0xff, 0xf8, 0x00, 0x07, 0xe0, 0x0f, 0xff, 0xff, 
	0xff, 0xff, 0xff, 0xef, 0xff, 0xff, 0xf8, 0x01, 0xff, 0xfc, 0x01, 0x07, 0xfc, 0x1f, 0xff, 0xff, 
	0xff, 0xff, 0xff, 0xcf, 0xef, 0xff, 0xff, 0xe1, 0xff, 0xfc, 0x01, 0x07, 0xf8, 0x1f, 0xff, 0xff, 
	0xff, 0xff, 0xff, 0x9f, 0xff, 0xff, 0x7f, 0xf1, 0xff, 0xf8, 0x02, 0x07, 0x88, 0x3f, 0xff, 0xff, 
	0xff, 0xff, 0xff, 0xcf, 0xef, 0xf8, 0x0f, 0xff, 0xff, 0xe0, 0x00, 0x07, 0x84, 0x3f, 0xff, 0xff, 
	0xff, 0xff, 0xff, 0xe7, 0xef, 0xf0, 0x04, 0x7f, 0xff, 0xc0, 0x00, 0x07, 0x84, 0x7f, 0xff, 0xff, 
	0xff, 0xff, 0xff, 0x3f, 0xff, 0xe0, 0x00, 0x1f, 0xff, 0x80, 0x00, 0x06, 0x04, 0xff, 0xff, 0xff, 
	0xff, 0xff, 0xff, 0x3f, 0x7f, 0xe1, 0xf0, 0x07, 0xff, 0x80, 0x00, 0x07, 0x06, 0xff, 0xff, 0xff, 
	0xff, 0xff, 0xff, 0xff, 0xff, 0xc3, 0xfe, 0x03, 0xff, 0x00, 0x00, 0x03, 0x80, 0xff, 0xff, 0xff, 
	0xff, 0xff, 0xff, 0xf2, 0x3f, 0xc6, 0x7f, 0x81, 0xce, 0x00, 0x00, 0x01, 0xc1, 0xff, 0xff, 0xff, 
	0xff, 0xff, 0xff, 0xe0, 0x3f, 0xc0, 0x07, 0xc1, 0xfe, 0x00, 0x00, 0x0d, 0xc0, 0x7f, 0xff, 0xff, 
	0xff, 0xff, 0xff, 0xe0, 0x3f, 0xc0, 0x01, 0xe0, 0xfc, 0x00, 0x00, 0x0f, 0xc0, 0x7f, 0xff, 0xff, 
	0xff, 0xff, 0xff, 0xc0, 0x3f, 0xc0, 0x00, 0x50, 0xfc, 0x00, 0x00, 0x0e, 0xc0, 0xff, 0xff, 0xff, 
	0xff, 0xff, 0xff, 0xc0, 0x3f, 0xc0, 0x00, 0x18, 0xf8, 0x00, 0x00, 0x0e, 0xc1, 0xff, 0xff, 0xff, 
	0xff, 0xff, 0xff, 0xc0, 0x3f, 0xc0, 0x00, 0x00, 0xf8, 0x00, 0x00, 0x66, 0x81, 0xff, 0xff, 0xff, 
	0xff, 0xff, 0xff, 0xc0, 0x1f, 0xc7, 0x80, 0x00, 0xf8, 0x00, 0x01, 0xe0, 0x00, 0xff, 0xff, 0xff, 
	0xff, 0xff, 0xff, 0xc0, 0x1f, 0xc1, 0xe0, 0x01, 0xf8, 0x00, 0x03, 0xf0, 0x01, 0xff, 0xff, 0xff, 
	0xff, 0xff, 0xff, 0x80, 0x1f, 0xc0, 0x3e, 0x03, 0xf0, 0x00, 0x00, 0xe0, 0x03, 0xff, 0xff, 0xff, 
	0xff, 0xff, 0xff, 0x00, 0x1f, 0xe0, 0xe0, 0x03, 0xf2, 0x00, 0x00, 0xc0, 0x03, 0xff, 0xff, 0xff, 
	0xff, 0xff, 0xff, 0x80, 0x1f, 0xf0, 0x00, 0x07, 0xe6, 0x00, 0x00, 0xc0, 0x03, 0xff, 0xff, 0xff, 
	0xff, 0xff, 0xff, 0x80, 0x1f, 0xff, 0x00, 0x1f, 0xee, 0x00, 0x00, 0x80, 0x07, 0xff, 0xff, 0xff, 
	0xff, 0xff, 0xff, 0xb8, 0x0f, 0xff, 0xf0, 0x3f, 0xdc, 0x00, 0x00, 0x00, 0x0f, 0xff, 0xff, 0xff, 
	0xff, 0xff, 0xff, 0xbc, 0x0f, 0xff, 0xff, 0xff, 0xdc, 0x00, 0x00, 0x00, 0x0f, 0xff, 0xff, 0xff, 
	0xff, 0xff, 0xff, 0x9e, 0x0f, 0xff, 0xff, 0xff, 0xf8, 0x00, 0x00, 0x00, 0x1f, 0xff, 0xff, 0xff, 
	0xff, 0xff, 0xff, 0x08, 0x0f, 0xff, 0xff, 0xff, 0x70, 0x00, 0x00, 0x00, 0x1f, 0xff, 0xff, 0xff, 
	0xff, 0xff, 0xff, 0x00, 0x0b, 0xff, 0xff, 0xfe, 0xe0, 0x00, 0x00, 0x00, 0x1f, 0xff, 0xff, 0xff, 
	0xff, 0xff, 0xff, 0x00, 0x0b, 0xff, 0xff, 0xf9, 0xc0, 0x00, 0x00, 0x00, 0x3f, 0xff, 0xff, 0xff, 
	0xff, 0xff, 0xff, 0x3c, 0x09, 0xff, 0xff, 0xf1, 0x80, 0x00, 0x00, 0x00, 0x7f, 0xff, 0xff, 0xff, 
	0xff, 0xff, 0xff, 0x1e, 0x08, 0x3f, 0xff, 0xc0, 0x00, 0x00, 0x00, 0x00, 0x7f, 0xff, 0xff, 0xff, 
	0xff, 0xff, 0xff, 0x1f, 0x08, 0x03, 0xff, 0x00, 0x00, 0x00, 0x00, 0x00, 0x7f, 0xff, 0xff, 0xff, 
	0xff, 0xff, 0xff, 0x00, 0x08, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x1f, 0xff, 0xff, 0xff, 
	0xff, 0xff, 0xff, 0x80, 0x1c, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x1f, 0xff, 0xff, 0xff, 
	0xff, 0xff, 0xff, 0xce, 0x1c, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x1f, 0xff, 0xff, 0xff, 
	0xff, 0xff, 0xff, 0xfe, 0x1c, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x3f, 0xff, 0xff, 0xff, 
	0xff, 0xff, 0xff, 0xff, 0x7e, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x7f, 0xff, 0xff, 0xff
};

void setup()   
{                
	// initialize with the I2C addr 0x3C
	display.begin(SSD1306_SWITCHCAPVCC, 0x3C);  

	// Clear the buffer.
	display.clearDisplay();

	// Display bitmap
	display.drawBitmap(0, 0,  MarilynMonroe, 128, 64, WHITE);
	display.display();

	// Invert Display
	//display.invertDisplay(1);
}

void loop() {}

Çıktı böyle görünüyor.

OLED ekranda bit eşlem görüntüsünü göstermek için drawBitmap(X-coordinate, Y-coordinate, bitmap array, width, height, color)fonksiyonu çağırmamız gerekir . Altı parametre alır, yani. Sol üst köşe X koordinatı, sol üst köşe Y koordinatı, tek renkli bitmap bayt dizisi, piksel cinsinden bitmap genişliği, piksel cinsinden bitmap yüksekliği ve Renk.

Örneğimizde, bitmap görüntüsü 128 × 64 boyutundadır. Bu nedenle, X ve Y koordinatları 0'a, genişlik ve yükseklik ise 128 ve 64'e ayarlanmıştır.

// Display bitmap
display.drawBitmap(0, 0,  MarilynMonroe, 128, 64, WHITE);
display.display();

Ancak drawBitmap () işlevini çağırmadan önce çizmek için bir resme ihtiyacımız var. Unutmayın, OLED ekranın ekran çözünürlüğü 128 × 64 pikseldir , bu nedenle bundan daha büyük görüntüler doğru şekilde görüntülenmeyecektir. Doğru boyutta bir görüntü elde etmek için, tuval boyutunu 128 × 64 piksel olarak ayarlayarak Inkscape, Photoshop, Paint vb. Gibi favori çizim programlarınızı kullanabilirsiniz.

Gülen Marilyn Monroe resmini örnek aldık ve Paint kullanarak 128 × 64 piksele dönüştürdük ve .bmp olarak kaydettik .

Bir bit eşleminiz olduğunda, onu SSD1306 OLED denetleyicinin anlayabileceği bir diziye dönüştürme zamanı. Bu, iki yolla yapılabilir: image2cpp kullanılarak çevrimiçi yöntem ve LCD Yardımcısı kullanılarak Çevrimdışı yöntem.

Çevrimiçi Bitmap Dizi Oluşturucu - image2cpp

İmage2cpp adında bir çevrimiçi uygulama var - http://javl.github.io/image2cpp/ , görüntünüzü bir diziye dönüştürebiliyor. Image2cpp, LCD Assistant'tan daha yeni ve çok daha güçlüdür (sonraki çözüm). Şunları yapmanıza izin verecektir:

• Birden çok görüntüyü aynı anda dönüştürün.
• Görüntü dosyanızı ölçeklendirin - Uzat / Sığacak şekilde ölçekle / Orijinal
• Siyah ve beyaz arasındaki Parlaklık eşiğini ayarlayın.
• Görüntüyü dikey ve / veya yatay olarak yeniden ortalayın.
• Ters görüntü renkleri

Bu araç o kadar güçlü ki çevrimdışı da çalışabilir. Sayfayı bilgisayarınıza kaydedin ve tarayıcınızda açın. Sayesinde Jasper van Loenen onun mükemmel katkılardan ötürü.

Başlamak için, tarayıcınızda image2cpp'yi açın ve OLED ekranında görüntülemek istediğiniz herhangi bir görüntüyü seçin.

Resminizin boyutları, Resim ayarları altındaki Tuval boyutu seçeneğinde doldurulacaktır . 128 × 64'ten daha büyük bir görüntü seçtiyseniz, bunu 128 × 64 olarak değiştirin ve uygun Ölçekleme seçeneğini seçin . Çıktıyı Önizleme bölümünde görüntüleyebilirsiniz .

Gerekirse Arka Plan rengini veya Ters Görüntü renklerini değiştirebilirsiniz.

Son olarak, en önemli seçeneği - Parlaklık eşiğini ihtiyacınıza göre değiştirin. Eşiğin ayarlanması, bu seviyenin üzerindeki pikselleri beyaz ve siyahın altında yapacaktır. Bizim durumumuzda Marilyn Monroe'nun güzel detaylarını almak için 171 olarak belirledik.

Bu küçük önizleme, ayarlarınızda yaptığınız değişiklikleri yansıtır. Gözünüzü ayırmadan ayarları değiştirebilirsiniz.

Sonuçtan memnun kaldığınızda, veri dizisini oluşturmaya devam edebilirsiniz. Kod çıkış formatını Arduino Kodu olarak seçin ve Kod oluştur düğmesine tıklayın.

Sadece bilginiz için, Çizim modu adında bir seçenek var . Aslında, ekranın tarama kalıbına göre görüntü oluşturur. Görüntünüz ekranınızda tamamen dağınık görünüyorsa, modu değiştirmeyi deneyin.

Bu kadar. Bit eşleminizin bayt dizisi oluşturulacaktır. Çıktıyı doğrudan örnek kodumuzla kullanabilirsiniz. Sadece uygun şekilde adlandırdığınızdan emin olun. Ardından dizinizi drawBitmap()işlevin içinde çağırın .

Çevrimdışı Bitmap Dizi Oluşturucu - LCD Yardımcısı

LCD yardımcısı adında başka bir uygulama var - http://en.radzio.dxp.pl/bitmap_converter/ bitmap görüntünüzü veri dizisine dönüştürebiliyor. İmage2cpp kadar güçlü değil ama hobiler arasında hala popüler.

Başlamak için, görüntünüzü 128 × 64 1 bit monokrom bitmap'e dönüştürmeniz gerekir. Bunu yapmak için Inkscape, Photoshop, Paint gibi favori çizim programlarınızı kullanabilirsiniz, tıpkı MS boyamada yaptığımız gibi.

Dosyanızı MS Paint'te açın ve 128 × 64 olarak yeniden boyutlandırın.

Şimdi dosyanızı bit eşlem olarak kaydedin. Dosyayı kaydederken Farklı kaydet tipini seçin : Tek Renkli Bit Eşlem (*. Bmp; *. Dib) . Bu, her piksel için yalnızca iki olası değere, yani 0 (siyah) veya 1 (beyaz) sahip 1-bit / ikili bitmap görüntüsü oluşturacaktır.

Buradaki tek dezavantaj, parlaklık eşiği seviyesini ayarlayamamanızdır. Varsayılan olarak% 50'ye ayarlanmıştır ve değiştirilemez.

Her neyse, şimdi LCD asistan programını indirin. Yürütülebilir dosyayı açın ve bit eşleminizi Dosya menüsünden yükleyin .

Bu araçla yapabileceğiniz pek bir şey yok. Bu nedenle, Dosya menüsüne gidin ve Çıktıyı kaydet seçeneğine tıklayın . Dosyayı metin dosyası olarak kaydedin.

Sadece bilginiz için, Byte Orientation adlı bir seçenek var . Aslında, ekranın tarama kalıbına göre görüntü oluşturur. Görüntünüz ekranınızda tamamen dağınık görünüyorsa, modu değiştirmeyi deneyin.

Bu kadar. Diziniz oluşturulduktan sonra, kodunuza yapıştırın.

Sadece uygun şekilde adlandırdığınızdan emin olun. Ardından dizinizi drawBitmap()işlevin içinde çağırın .

ANA SAYFAYA DÖN
Bahadır ÖZGEN
Electronic Robotic Coding Research and Development 1975 - ∞
Learn Forever
If you want, let's learn together...
https://roboticcode2020.blogspot.com/
bahadirozgen1975@gmail.com
facebook    robotic.code
instagram    @roboticcode

Sayfalarımı ziyaret ettiğiniz için teşekkür ederim.Bu sitede mevcut olan içerikler kendi oluşturduğum projeler yazı,resim ve videolardan oluşmaktadır.İçerik oluşturmak çok uzun sürdüğü için bazı projelerde yurtdışı kaynaklardan faydalandım.Buradaki amacım ticari değildir.Kaynağı belli olan ve bizim kaynağına ulaşabildiğimiz materyal (yazı, fotoğraf, resim, video v.b.) için ilgili konularda fotoğraflarda logo varsa v.b. not olarak gösterilecektir.Sitemizde yayınlanan tüm içerik, bizim tarafımızdan ve internet üzerinden youtube, facebook ve blog gibi paylaşıma sunulmuş kaynak sitelerden alındığı için, sitemiz yasal yükümlülüğe tabi tutulamaz. Sitemizde telif haklarının size ait olduğu bir içerik varsa ve bunu kaldırmamızı isterseniz, iletişim sayfamızdan bizimle iletişime geçtiğiniz takdirde içerik yayından kaldırılacaktır.Bu konu ve modüller ile uğraşarak, ileride çok güzel makine ve elektronik aletler yapabilirsiniz.