- OLED-skärm
- Komponenter krävs
- SPI-stiftanslutningar mellan NodeMCU och OLED-skärm
- Programmering av NodeMCU för gränssnitt mellan OLED
- Konvertera bild till Bitmap-värden
I denna handledning kommer vi att gränssnitt OLED Display med NodeMCU ESP8266. NodeMCU är en IoT-plattform med öppen källkod som inkluderar firmware som körs på billiga Wi-Fi-aktiverade ESP8266 Wi-Fi SoC från Espressif Systems. Den har GPIO-stift för anslutning av andra kringutrustning och den stöder seriell kommunikation med SPI-, I2C- och UART-stift. Den har också stift för ADC och PWM. Vi gränssnitt tidigare OLED med andra mikrokontroller inklusive styrenheten för ESP-familjen (ESP32):
- Gränssnitt SSD1306 OLED-skärm med Raspberry Pi
- Gränssnitt SSD1306 OLED-skärm med Arduino
- Bygg en smart klocka genom att gränssnitt OLED-skärm med Android-telefon med Arduino
- Internetklocka med ESP32 och OLED Display
I denna handledning använder vi SPI-protokoll för att gränssnitt Monokrom 7-stifts SSD1306 0,96 OLED-skärm med NodeMCU och lär oss att visa bilden på OLED-skärmen med NodeMCU ESP8266.
OLED-skärm
Organisk ljusemitterande diod (OLED) är en slags ljusemitterande diod där ett ljusemitterande skikt som är tillverkat av organisk förening avger ljus när elektrisk ström tillförs. Detta lager är placerat mellan två elektroder. Denna teknik används på skärmar som datorer, tv-apparater, smartphones etc. OLED-skärmar har sitt eget ljus och behöver ingen bakgrundsbelysning som i LCD, därför är de energieffektiva och används med många mikrokontroller. En ytterligare fördel med att använda OLED-skärmar via LCD är att visa större och bättre grafikkvalitet på OLED-skärmar. Läs mer om OLED Display-teknik här.
Det finns olika typer av OLED-skärmar tillgängliga på marknaden. Dessa skärmar karakteriseras utifrån färg, antal stift, styrenhetens IC och skärmens storlek. På grundval av färg finns OLEDs i monokromblått, svartvitt och gult / blått. Och på grundval av kommunikation finns det huvudsakligen två typer av OLED: er - 3pin och 7pin. 3-stifts OLED kan användas i I2C-kommunikationsläge och 7-stifts OLED kan användas antingen i SPI-läge eller i I2C-läge.
I denna handledning kommer vi att använda “ Monochrome 7-pin SSD1306 0.96 ” OLED-skärm som är 128 pixlar bred och 64 pixlar lång. Denna skärm kan fungera på både SPI- och I2C-kommunikationsprotokoll. Vi kommer att använda SPI-protokollet i denna handledning. SSD1306 IC finns på denna OLED som hjälper till att visa pixlarna på skärmen.
Komponenter krävs
- Monokrom 7-stifts SSD1306 0,96 ”OLED-skärm
- NodeMCU ESP8266
- Micro USB-kabel
- Bakbord
- Manliga till manliga bygeltrådar
SPI-stiftanslutningar mellan NodeMCU och OLED-skärm
Nedan är kretsschemat för anslutning av 7-stifts OLED-skärm med NodeMCU för att kommunicera med SPI seriellt kommunikationsprotokoll.
Nedanstående tabell visar anslutningarna mellan OLED Display och NodeMCU ESP8266. GND-stift går till NodeMCU GND, VDD-stift kan anslutas till 3,3 V eller 5 V, SCK är klockstiften på OLED-skärmen som är ansluten till D5 för NodeMCU för SPI-klocka. SDA-stiftet som är MOSI-stift på OLED i SPI-gränssnittet går till D7 i NodeMCU. RESET-stiftet går till D3. DC, datakommandopinnen är ansluten till D2 i NodeMCU. Den sista stiftet är att CS går till D8, chipval av NodeMCU.
Nej. |
Oled Display |
NodeMCU |
1 |
GND |
GND |
2 |
VDD |
3,3V |
3 |
SCK |
D5 |
4 |
MOSI (SPI) eller SDA (I2C) |
D7 |
5 |
ÅTERSTÄLLA |
D3 |
6 |
DC |
D2 |
7 |
CS |
D8 |
Här kommer vi att använda biblioteket “ Adafruit _SSD1306.h” och “ Adafruit_GFX.h ” för gränssnitt mellan OLED och NodeMCU. Öppna Arduino IDE och installera den senaste versionen från Arduino IDE ( Skiss> Inkludera bibliotek> Hantera bibliotek eller Ctrl + Shift_I ).
Eftersom pixelstorleken på vårt OLED-skärm-ID 128x64 måste vi därför ändra rubrikfilen för Adafruit_SSD1306. Öppna Arduino-biblioteken, gå till Adafruit_SSD1306 och öppna dess rubrikfil ( Adafruit _SSD1306.h ). Kommentera raden " #define SSD1306_128_32 " och avmarkera raden "#define SSD1306_128_64 " som visas i bilden nedan och spara sedan filen. Som standard kommer detta bibliotek med "# define SSD1306_128_32 ".
Ändra slutligen stiftnummer i “ ssd1306_128x64_spi ” Adafruit SSD1306 exempel enligt tabellen som visas ovan. Nu när du kör skissen efter korrekt anslutning av OLED Display med NodeMCU kommer du att se Adafruits logotyp på OLED-skärm som sparas som standard i biblioteket. Efter Adafruit-logotypen visar den många andra grafik som linjer, rektanglar, triangel, cirklar, strängar, siffror, animationer och bitmapp. Här i denna handledning lär vi oss hur man visar vilken bild som helst på OLED med NodeMCU ESP8266.
Programmering av NodeMCU för gränssnitt mellan OLED
Som alltid ges fullständig kod i slutet, här har vi förklarat koden i detalj.
Starta koden genom att importera nödvändiga bibliotek. Eftersom vi använder SPI-protokoll kommer vi därför att importera "SPI.h" -biblioteket och även importera "Adafruit_GFX.h" och "Adafruit_SSD1306.h" för OLED Display.
#omfatta
Vår OLED-storlek är 128x64 så vi ställer in skärmbredd och höjd på 128 respektive 64. Så definiera variablerna för OLED-stift anslutna till NodeMCU för SPI-kommunikation.
#define SCREEN_WIDTH 128 // OLED-display bredd, i pixlar #define SCREEN_HEIGHT 64 // OLED-display höjd, i pixlar // förklaring för SSD1306 bildskärm som är ansluten med hjälp av programvara SPI (standard fallet): #define OLED_MOSI D7 #define OLED_CLK D5 #define OLED_DC D2 #define OLED_CS D8 #define OLED_RESET D3 Adafruit_SSD1306 display (SCREEN_WIDTH, SCREEN_HEIGHT, OLED_MOSI, OLED_CLK, OLED_DC, OLED_RESET, OLED_CS);
Initiera OLED-skärmen med SSD1306_SWITCHCAPVCC för att generera 3,3 V internt för att initialisera skärmen.
if (! display.begin (SSD1306_SWITCHCAPVCC)) { Serial.println (F ("SSD1306-allokering misslyckades")); för(;;); // Fortsätt inte, slinga för evigt }
Visningen av OLED-skärmen rensas innan du visar något genom att anropa funktionsdisplay.clearDisplay (). Vi ställer in teckensnittsstorleken till 2 genom att anropa funktionen setTextSize (teckensnittsstorlek) och ställer in textfärg och markörposition med setTextColor och setCursor- funktionen . Display.display () -kommandot används för att överföra data till SSD1306-styrenhetens interna minne. Efter överföringen visas pixel på skärmen. Nu kan vi börja rulla texten på olika sätt genom att ringa display.startscrollright (x-pos, y-pos) och display.startscrollleft (x-pos, y-pos) för den tid som anges i fördröjningsfunktionen. Rullning av text kan stoppas med hjälp av funktionsdisplay. Stoppscroll ().
void testscrolltext (void) {display.clearDisplay (); // rensa skärmen på OLED display.setTextSize (2); // Rita 2X-skala text display.setTextColor (WHITE); display.setCursor (0, 0); display.println (F ("CIRCUIT")); display.println (F ("DIGEST")); display.display (); // Visa initial textfördröjning (100); // Bläddra i olika riktningar, pausa däremellan: display.startscrollright (0x00, 0x0F); fördröjning (2000); display.stopscroll (); fördröjning (1000); display.startscrollleft (0x00, 0x0F); fördröjning (2000); display.stopscroll (); fördröjning (1000); display.startscrolldiagright (0x00, 0x07); fördröjning (2000); display.startscrolldiagleft (0x00, 0x07); fördröjning (2000); display.stopscroll (); fördröjning (1000); }
Vi kallar display.drawBitmap () -funktionen som tar 6 parametrar (x-koordinat, y-koordinat, bitmappsuppsättning, bredd, höjd och färg) för att rita bilden på OLED. Eftersom vår skärmstorlek är 128x64 ställer vi in bredden och höjden som 128 respektive 64. Här innehåller bitmappsarrangemanget pixelinformationen för att rita pixeln på skärmen för att skapa bilden. Denna bitmappsuppsättning kan genereras online vilket förklaras nedan eller så finns det många programvaror tillgängliga för att konvertera bild till bitmappsuppsättning.
const osignerad char myBitmap PROGMEM = { 0xff, 0xff, 0xff, 0xe0, 0x0f, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0x0, 0x0, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xc7, 0x80, 0x00, 0x03, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0x0f, 0x03, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff,, 0xf8, 0x1e, 0x03, 0x3f, 0xf8, 0x1f, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xf0, 0x3e, 0x03, 0x3f, 0xfc, 0x0f, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xc0, 0x7c, 0x03, 0xf0, 0x3f, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0x78, 0x00, 0xc0, 0x0f, 0xc1, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff 0xff, 0xff, 0xff, 0xff, 0xff, 0xfe, 0x01, 0xf0, 0x00, 0x00, 0x03, 0xf8, 0x7f, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0x0, 0x0 0x00, 0x00, 0xfc, 0x3f, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xfc, 0x03, 0xe0, 0x00, 0x0f, 0x00, 0x7e, 0x3f, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xf8, 0x07, 0xc0, 0x3f, 0xff, 0xff, 0x, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xc0, 0x7f, 0xf9, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0x80, 0xff, 0xf9, 0x80, 0x07, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0x01, 0xf0, 0x1f, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0x06, 0x00, 0x00, 0x07, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xc0, 0x00, 0x03, 0xc0, 0x00, 0x00, 0x00, 0x03, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xcf, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0x00 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0x80, 0x00, 0x07, 0x80, 0x00, 0x00, 0x00, 0x03, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff , 0xff 0x0f, 0x80, 0x00, 0x00, 0x00, 0x01, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff , 0x00, 0xff, 0xff, 0xff, 0xff 0xff, 0xff, 0xff, 0xff, 0xff, 0x80, 0x00, 0x1e, 0x01, 0xe0, 0x00, 0x00, 0x01, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff , 0xff, 0xff 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0x00, 0x00, 0x3c, 0x03, 0x3f, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff , 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xf8, 0x01, 0xe0, 0x00, 0x00, 0x00, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff , 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xf0, 0x00, 0x00, 0x00, 0x00, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff , 0x00, 0x00, 0x00, 0x00, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0x80, 0x00, 0x01, 0xf0, 0x00, 0x00, 0x00, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff , 0xff 0x03, 0xb0, 0x00, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff , 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff 0xff, 0xff, 0xff, 0xff, 0xff, 0x80, 0x00, 0x03, 0xbc, 0x07, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0x1f, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xc0, 0x00, 0x00, 0xff, 0xff, 0x80, 0x00, 0x03, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xfe, 0x00, 0x07, 0xfc, 0x00, 0x00, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff 0x80, 0x03, 0xf0, 0x00, 0x00, 0x07, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xf8, 0x00, 0x00, 0x00, 0x00, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0x00, 0x00, 0x00, 0x1f, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xf8, 0x00, 0xff, 0xe0, 0x00, 0x07, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xfc, 0x00, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xfe, 0x00, 0x0e, 0x30, 0x00, 0x7f, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0x07, 0x70, 0x00, 0xff, 0x01, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xc0, 0x01, 0xc0, 0x7f, 0xf0, 0x03, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0x0 0x7f, 0xc0, 0x07, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xf0, 0x00, 0x00, 0x67, 0x00, 0x0f, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xfe, 0x00, 0x00, 0x7, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0x00, 0x00, 0x3c, 0x01, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xf0, 0x00, 0x00, 0x1f, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0x00, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xf8, 0x1f, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff }; display.drawBitmap (35, 0, myBitmap, 128, 64, SVART, VIT); display.display ();
Konvertera bild till Bitmap-värden
Online bitmapp kan genereras från http://javl.github.io/image2cpp/. Ladda upp den bildfil du vill visa på OLED och ställ in storleken på 128x64. En förhandsgranskningsbild visas och sedan genereras bitmappsuppsättning.
Nedan visar skärmdumpar processen för att generera bitmappsvärdet för en bild.
Slutligen ladda upp hela koden till NodeMCU ESP8266 så visas bilden på OLED-skärmen. Här visar vi CircuitDigest-logotypen på OLED-skärmen.