Kul med OLED -skärm och Arduino: 12 steg (med bilder)

2024 Författare: John Day | [email protected]. Senast ändrad: 2024-01-30 12:38

Jag är ganska säker på att du definitivt har hört talas om OLED -displayteknik. Det är relativt nytt och erbjuder en bättre kvalitet än gammal LCD -teknik. I denna handledning vill vi granska stegen som krävs för att visa data på en av de vanligaste OLED -displaymodulerna med en färg som finns på marknaden. Jag ska försöka förklara funktioner som tillhandahålls av motsvarande Adafruit -bibliotek för att visa data om denna modul.

Steg 1: Vilka OLED -moduler ska vi använda?

OLED -moduler finns i många olika storlekar och funktioner. Den vi ska använda i den här självstudien är en monofärg 128x64 OLED -modul. Denna typ av modul finns i följande storlekar (för att du ska se på bilderna):

• 128x64
• 128x32
• 96x16
• 64x48
• 64x32

Eftersom alla dessa moduler stöder I2C -protokollet som ett medel för kommunikation, är koden och ledningarna för dem alla exakt samma. Den enda skillnaden är att du måste överväga storleken på skärmen på din kod så att innehållet som du kommer att visa ska passa ordentligt på den.

Steg 2: I2C i ett nötskal

Den interintegrerade kretsen (IIC) som normalt kallas I2C (I squared C) utvecklad av Philips på 80-talet som en datautbytesbuss som används för att överföra data mellan den centrala processorenheten (CPU) eller mikrokontrollenheten (MCU) på en enhet och perifera chips. Det var i grunden riktat för TV -applikationer. På grund av dess enkelhet blev det så populärt att det efter ett tag blev en av de primära mekanismerna för dataöverföring för CPU: er och MCU: er och kringutrustning som inte är en nödvändig del av samma kretskort och är anslutna till det via tråd (t.ex. sensorer, displaymoduler, etc.).

I2C består av en kommunikationsbuss gjord av två trådar som stöder dubbelriktad dataöverföring mellan en master och flera slavenheter. Vanligtvis är huvudnoden ansvarig för att styra bussen - vilket faktiskt görs genom att generera en synkroniseringssignal på den seriella klocklinjen (SCL). Det är en signal som skulle skickas kontinuerligt av master under överföringen och alla andra noder som är anslutna till bussen kommer att använda den för att synkronisera sin kommunikation och detektera bussens hastighet. Data överförs mellan master och slav via en seriell data (SDA) linje. Överföringshastigheten kan vara upp till 3,4 Mbps. Alla enheter som vill överföra data via I2C bör ha en unik adress och kan fungera som antingen sändare eller mottagare beroende på enhetens funktion. Till exempel är en OLED -displaymodul en mottagare som accepterar vissa data och visar dem, medan en temperatursensor är en transceiver som skickar registrerad temperatur via I2C -buss. Normalt är en masteranordning enheten som initierar en dataöverföring på bussen och genererar klocksignalerna för att möjliggöra överföringen. Under denna överföring betraktas alla enheter som adresseras av denna master som en slav och läser dessa data.

När en nod vill skicka några data, bör den allra första byten av data vara adressen till mottagaren och sedan kommer faktiska data efteråt. Detta betyder att för att skicka en data till en utmatningsenhet med I2C (t.ex. I2C OLED -displaymodul) bör vi först hitta dess I2C -adress och det här är vad vi ska göra först i nästa steg.

Om du är intresserad av att veta mer om detaljerna och teorierna om I2C -buss kan du använda följande referenser:

www.i2c-bus.org

learn.sparkfun.com/tutorials/i2c

Steg 3: Obligatoriska moduler och komponenter

Här kan du hitta listan över komponenter som du skulle behöva för att slutföra denna handledning:

eBay -länkar:

• 1 x Arduino Uno:
• 1 x OLED -modul 128x64:
• 4 x Dupont -kabel:
• 1 x Mini lödfri brödbräda:

Amazon.com -länkar:

• 1 x Arduino Uno:
• 1 x OLED -modul 128x64:
• 4 x Dupont -kabel:
• 1 x Mini lödlös brödbräda:

Steg 4: Anslut OLED -displaymodul till Arduino

En viktig anmärkning om I2C -aktiverade enheter är att sättet du ska ansluta dem till Arduino är likadant. Detta beror på att Arduino kör sin I2C -kommunikation endast på specifika stift. I denna handledning använder jag Arduino Uno. Arduino Uno använder stift A5 som SCK och A4 som SDA. Så vi kan ansluta OLED -displaymodulen till Arduino Uno som visas i schematisk vy. Som du kanske märker på bilden jag har tagit från min OLED -displaymodul, är kontakten för VCC och GND annorlunda än den schematiska vyn. Kom ihåg att kontrollera etiketterna på stiften på dina moduler för att se till att du ansluter det på ett rätt sätt.

Vi behöver bara 4 stift som ska anslutas enligt nedan:

Arduino VCC -> OLED -modul VCC

Arduino GND -> OLED -modul GND

Arduino 4 -> OLED -modul SDA

Arduino 5 -> OLED -modul SCK

Steg 5: Hitta adressen till displaymodulen

Som ett första steg för att ansluta till en I2C -aktiverad enhet måste du ha modulens adress. För att göra det, efter att ha kopplat upp modulen till din Arduino, ska du bara ladda upp koden bifogad till din Arduino. Denna kod innehåller Wire -biblioteket som är ett bibliotek som ingår i Arduino IDE som hanterar I2C -kommunikation. Den försöker skanna anslutna I2C -enheter och skickar deras adress via seriell port till din dator. Så du kan komma åt dess utmatning via Serial Monitor -verktyget i Arduino IDE. Originalversionen finns på Arduino Playground). Du kan också se det på ett mer läsbart sätt i min online Arduino Editor. Förvänta dig inte att något ska visas på skärmen medan den här koden körs.

Som du kan se på bilden är min modul bunden till adressen 0x3C. Normalt har alla enheter i en specifik produktserie (till exempel alla 128x64 OLED -moduler) samma adress.

Adressen för I2C -enheter är begränsad från 1 till 126. Denna kod försöker helt enkelt ansluta till varje enhet i ordning (utan att överföra data) och sedan kontrollera om det uppstod något fel från det underliggande biblioteket vid anslutning till den angivna adressen. Om det inte finns något fel skriver du ut adressen som en tillgänglig modul för anslutning. Det bör också noteras att de första 15 adresserna är reserverade, så det hoppar över dem och skriver bara ut dem ovanför detta intervall. Kom ihåg att adressen till dessa I2C-moduler är hårdkodade på enheten och att den inte kan ändras. Så det skulle vara en bra idé att skriva ner det någonstans eller sätta en etikett på modulen när du ska lägga tillbaka den på din labhylla så att det inte är nödvändigt att köra skannerkoden nästa gång. Det är dock inget komplicerat förfarande;)

Steg 6: Installera bibliotek som krävs för att visa data på OLED -modulen

Wire -biblioteket kan hantera kommunikation på låg nivå med I2C -enheter. När du vill ansluta till en specifik enhet för att kunna läsa/skriva data från/till den använder du normalt ett bibliotek från företaget som ursprungligen har byggt den modulen. Detta bibliotek hanterar alla I2C -kommunikationsdetaljer med en given modul och låt oss koncentrera oss mer på vår verksamhet som i detta fall visar data på det sätt vi vill.

Adafruit, företaget som tillverkar originalversionen av sådana displaymoduler, tillhandahåller ett bibliotek som heter Adafruit SSD1306 för att visa data på dessa monokroma skärmar. Så innan vi börjar koda måste vi installera det här biblioteket via Library Manager (tillgängligt via Sketch> Inkludera bibliotek> Hantera bibliotek … meny) i Arduino IDE. Det finns också ett annat bibliotek som heter Adafruit GFX Library som hanterar fler grafiska saker på låg nivå och används internt av Adafruit SSD1306. Du måste ha båda installerade på din Arduino IDE som du kan se på bilderna.

Steg 7: Initiera bildskärmsmodulen

Ritning på displaymodulen är insvept i en klass som heter Adafruit_SSD1306. Definitionen av denna klass finns på Adafruit bibliotek, så vi måste först inkludera det biblioteket. Då måste vi först instansera en instans av den här klassen. Konstruktören av denna klass tar portnumret vid vilket displayen kan återställas, vilket är stift 4 (anslutet till SCK). Denna del av koden ska placeras i början av filen (utan funktioner () och loop () -funktioner).

#omfatta

Adafruit_SSD1306 display (4);

Nu inne i setup () -funktionen bör vi kalla startfunktionen för displayobjektet genom att skicka vår I2C -adress enligt nedan (SSD1306_SWITCHCAPVCC är ett konstant värde som specificerar typen av strömkälla till biblioteket):

void setup () {

display.begin (SSD1306_SWITCHCAPVCC, 0x3C); display.display (); } void loop () {} // loop kan vara tom för tillfället

Nu är visningsobjektet klart och vi kan kalla dess funktioner (t.ex. display.write (), display.drawLine, etc.). Den viktiga anmärkningen är att varje gång vi drar något genom att ringa till vårt displayobjekt måste vi ringa display.display () -funktionen för att få den faktiska ritningen att ske på maskinvarunivå. Detta beror främst på det faktum att ritfunktionerna som vi kallar, bara uppdaterar displayen "i minne" av displayen av prestandaskäl. Det lagrar faktiskt förändringarna i minnet. Så vi bör alltid komma ihåg att ringa displayen () -funktionen när vi slutat rita något på skärmen.

display.write (…); // fortsätter att uppdatera i minnet

display.drawLine (…); // fortsätter att uppdatera i minnet. display.display (); // spolar alla ändringar av skärmens hårdvara

Om du försöker ladda upp din kod i det här steget kommer du att märka att Adafruit Industries -logotypen visas. Du kanske undrar vem som har bett den att rita det! Det är faktiskt vad Adafruit -biblioteket gör. Det initierar modulens minne (representationen i minnet för bildskärmshårdvaran) med företagets logotyp. Om du inte vill se det under initialiseringen kan du försöka ringa display.clearDisplay () -funktionen precis innan du ringer display.display () i din installationsfunktion. Denna funktion, som namnet antyder, rensar skärmen helt.

#omfatta

Adafruit_SSD1306 display (4); void setup () {display.begin (SSD1306_SWITCHCAPVCC, 0x3C); display.clearDisplay (); display.display (); } void loop () {}

Baserat på dokumentation av Adafruit_SSD1306 -biblioteket kan du använda olika funktioner från den här klassen för att rita på skärmen eller direkt manipulera pixlarna på den. I nästa avsnitt försöker vi presentera ett exempel för var och en av dem så att du kan få en uppfattning om hur det fungerar. De flesta av dessa exempel visar bara ett enkelt statiskt innehåll, så vi kan bara lägga dem i vår setup () -funktion (efter initialiseringskoden). Genom att göra det skulle det bara köras en gång och förbli där.

Steg 8: Visa en enkel text

För att visa en text kan vi använda bibliotekets enkla display.println () -funktion. Den accepterar texten som en sträng och försöker visa den. Det är viktigt att veta att vi måste berätta för biblioteket var på displayen vi ska presentera texten. Varje pixel på displayen har en koordinat som anges med ett X och Y. X ökar från vänster till höger och Y ökar från topp till botten. Skärmens övre vänstra hörn är (X = 0, Y = 0) och det nedre högra hörnet är (X = 127, Y = 63). Jag noterade koordinaterna för hörnen på den första bilden. Vi kan använda funktionen display.setCursor () för att ange var på skärmen vi ska visa texten.

En annan egenskap hos texten är dess färg. Vi kan ange färgen med display.setTextColor () som visas på följande prov.

display.clearDisplay ();

display.setTextColor (VIT); display.setCursor (35, 30); display.println ("Hej världen!"); display.display ();

Vi kan också använda funktionen display.write () för att visa ett enda tecken. Den accepterar en teckenkod som en uint8_t -typ och visar tecknet som motsvarar koden på strängen. Som ett exempel, om vi vill visa samma sträng med den här funktionen, kan vi använda följande kodavsnitt:

display.clearDisplay ();

display.setTextColor (VIT); display.setCursor (35, 30); display.write (72); display.write (101); display.write (108); display.write (108); display.write (111); display.write (32); display.write (87); display.write (111); display.write (114); display.write (108); display.write (100); display.write (33); display.display ();

Det är också möjligt att rita texter i svart färg med vit bakgrund. För att göra det måste du ringa display.setTextColor -funktionen enligt nedan:

display.clearDisplay ();

// Ställer in färgen till svart med en vit bakgrund. SetTextColor (SVART, VIT); display.setCursor (25, 30); display.println ("Inverterad text!"); display.display ();

Du har också möjlighet att ställa in textens storlek med funktionen display.setTextSize (). Det accepterar ett heltal som en storlek. Ju större siffra desto större blir texten. Minsta storlek är 1 vilket är standardstorleken på texter. Följande kod försöker skriva bokstaven "A" i 6 olika storlekar:

display.clearDisplay ();

display.setTextColor (VIT); display.setCursor (0, 0); display.setTextSize (1); display.print ("A"); display.setTextSize (2); display.print ("A"); display.setTextSize (3); display.print ("A"); display.setTextSize (4); display.print ("A"); display.setTextSize (5); display.print ("A"); display.setTextSize (6); display.print ("A"); display.display ();

Steg 9: Rita grundläggande former

Att rita grundläggande former som rektangel, cirkel, triangel, linje eller punkt är väldigt enkelt och det finns en särskild funktion för var och en.

Rita linje

För att dra en linje kan du ringa display.drawLine (startX, startY, endX, endY, färg). Till exempel ritar följande kod en diagonal linje på skärmen så att de formar ett stort X:

display.clearDisplay ();

display.drawLine (0, 0, display.width () - 1, display.height () - 1, WHITE); display.drawLine (display.width () - 1, 0, 0, display.height () - 1, WHITE); display.display ();

Du kommer åt skärmens bredd och höjd med funktionerna display.width () och display.height (). Genom att göra det skulle din kod vara oberoende av skärmstorleken.

Rita rektangel

Funktionen för att rita en rektangel är display.drawRect (upperLeftX, upperLeftY, bredd, höjd, färg). Här är koden som ritar tre rektanglar på några slumpmässiga platser:

display.clearDisplay ();

display.drawRect (100, 10, 20, 20, VIT); display.fillRect (10, 10, 45, 15, VIT); display.drawRoundRect (60, 20, 35, 35, 8, VIT); display.display ();

Genom att ringa display.fillRect (upperLeftX, upperLeftY, bredd, höjd, VIT) kan du rita en rektangel fylld med angiven färg. Den tredje funktionen i detta exempel är också display.drawRoundRect (upperLeftX, upperLeftY, bredd, höjd, cornerRadius, färg) som du kan se på bilden används för att rita en rektangel med runda hörn. Den accepterar en extra parameter före färg som är ett heltal som anger hörnradien. Ju större värde desto rundare hörn. Den har också en motsvarande fyllningsfunktion som heter display.drawFillRoundRect som jag tror att du kan gissa vad den gör.

Ritning cirkel

Funktionen är display.drawCircle (centerX, centerY, radie, färg). Här är ett exempel som ritar en smiley-liknande form:

display.drawCircle (60, 30, 30, VIT);

display.fillCircle (50, 20, 5, VIT); display.fillCircle (70, 20, 5, VIT);

Precis som rektanglar kan du använda funktionen display.fillCircle för att rita en cirkel fylld med den angivna färgen.

Ritning triangel

Åh, återigen en funktion som kallas display.drawTriangle (poin1X, point1Y, point2X, point2Y, point3X, point3Y, color) och motsvarande display.fillTriangle som ritar en fylld triangel.

display.drawTriangle (24, 1, 3, 55, 45, 55, VIT);

display.fillTriangle (104, 62, 125, 9, 83, 9, WHITE);

Dra en punkt

Du kan också färga en specifik punkt (som kallas pixel) på skärmen via display.drawPixel (pixelX, pixelY, färg) funktion.

display.drawPixel (20, 35, WHITE);

display.drawPixel (45, 12, VIT); display.drawPixel (120, 59, WHITE); display.drawPixel (97, 20, WHITE); display.drawPixel (35, 36, WHITE); display.drawPixel (72, 19, WHITE); display.drawPixel (90, 7, VIT); display.drawPixel (11, 29, WHITE); display.drawPixel (57, 42, VIT); display.drawPixel (69, 34, WHITE); display.drawPixel (108, 12, VIT);

Steg 10: Rita bild

Att rita en bild är annorlunda och lite komplicerat. Eftersom bildskärmsmodulen är monokoll, måste vi först konvertera vår bild till ett format som kallas monofärg bitmapp (även kallat svartvitt). I ett sådant format presenteras varje pixel i bilden med antingen 0 eller 1. 1: orna representerar färgens existens och 0s betyder ett tomt utrymme. Du kan se ett exempel på Arduino -logotypen i detta format ovanpå det här avsnittet. Funktionen för att rita en bitmappsbild är display.drawBitmap (topLeftX, topLeftY, imageData, bredd, höjd, färg). ImageData -parametern är en rad nummer i byte. Varje byte har 8 bitar, så varje byte innehåller data från 8 pixlar i bilden. Genom att ange bildens bredd och höjd vet drawBitmap -funktionen från vilken bit nästa rad pixlar börjar.

Lösningen som jag valde att konvertera min bild till det här formatet var att först använda en online "bild till ASCII -omvandlare" (t.ex. https://my.asciiart.club) för att konvertera min bild till en uppsättning ASCII -tecken och sedan ersätta tecknen som används för tomt utrymme med 0 och andra med 1. Det är vad du ser nedan. Du kan tänka på varje 0 och 1 som en pixel på displayen. Så storleken på bilden ska inte överstiga vår skärmstorlek som är 128x64.

Obs! Att använda denna ASCII -teknik är inte ett rekommenderat tillvägagångssätt eftersom din bild kommer att deformeras på grund av teckenförhållandet (tecken är inte en kvadrat). Jag försökte denna teknik bara för att det gör det lättare att konvertera bilden till önskat format. Annars skulle det vara möjligt att uppnå det bästa resultatet via någon programmering eller med hjälp av några verktygsprogram som helt ligger utanför ramen för denna text.

00000000000000000000011111111111111111111110000000000000000000000000000000000000011111111111111111111111111111100000000000000000 0000000000000111111111111111111111111111111111111110000000000000 0000000000011111111111111111111111111111111111111111100000000000 0000000001111111111111111111111111111111111111111111111000000000 0000000111111111111111111111111111111111111111111111111110000000 0000011111111111111111111111111111111111111111111111111111100000 0000111111111111111111111111111111111111111111111111111111110000 0001111111111111111111111111111111111111111111111111111111111000 0011111111111111111111111111111111111111111111111111111111111100 0111111111111111000000011111111111111111100000001111111111111110 0111111111110000000000000001111111111000000000000000111111111110 1111111111000000001111000000001111000000001111000000001111111111 1111111110000011111111111100000110000011111111111100000111111111 1111111100000111111111111111000000001111111001111110000011111111 1111111100001111100000011111100000011111100000011111000011111111 1111111100001111100000011111100000011111100000011111000011111111 1111111100000111111111111111000000001111111001111110000011111111 1111111110000011111111111100000110000011111111111100000111111111 1111111111000000001111000000001111000000001111100000001111111111 0111111111110000000000000000111111110000000000000000111111111110 0111111111111111000000001111111111111111000000001111111111111110 0011111111111111111111111111111111111111111111111111111111111100 0001111111111111111111111111111111111111111111111111111111111000 0000111111111111111111111111111111111111111111111111111111110000 0000011111111111111111111111111111111111111111111111111111100000 0000000111111111111111111111111111111111111111111111111110000000 0000000011111111111111111111111111111111111111111111111100000000 0000000000011111111111111111111111111111111111111111100000000000 0000000000000111111111111111111111111111111111111110000000000000 0000000000000000111111111111111111111111111111110000000000000000 0000000000000000000001111111111111111111111000000000000000000000

Nu ska vi dela varje rad med 8, representerande en byte och lagra dem i en array enligt nedan:

statisk const osignerad char PROGMEM arduino_logo = {

B00000000, B00000000, B00000111, B11111111, B11111111, B11100000, B00000000, B00000000, B00000000, B00000000, B01111111, B11111111, B11111111, B11111110, B00000000, B00000000,… // fortsätt upp till slutet av bilden};

Sedan kan vi rita den på displayen genom att ringa drawBitmap -funktionen.

display.drawBitmap (32, 16, arduino_logo, 64, 32, WHITE);

Steg 11: Felsökning

Detta var en lång handledning och så det är mycket troligt att något går fel. Här är listan över några vanliga fel som du kan stöta på när du konfigurerar OLED -displaymodul för ditt projekt (några av dem hände för mig när jag förberedde den här självstudien).

Inget visas alls

Detta kan hända av många skäl, så jag föreslår att du kontrollerar följande lista som är i ordning som kan uppstå i ditt projekt:

I2C -adressen är förmodligen fel

Se till att du har ställt in adressen du fick i i2c-skannerkoden i display.begin () -funktionen när du konfigurerar ditt visningsobjekt.

SCL och SDA är anslutna på fel sätt

Detta hände faktiskt för mig. Om du använder Arduino Uno måste du kontrollera dina anslutningar igen för att se till att de är anslutna samma som mina. Om du använder en annan Arduino -utgåva (t.ex. Mega, Leonardo, etc.) måste du veta att de kan ha sin I2C inställd på andra stift. Du kan kontrollera det i dokumentationen till Wire -biblioteket.

Du drar något ur det synliga området

Det här är en mjukvaruproblem. Det är väldigt vanligt när man använder en ritningsfunktion för att räkna ut några koordinater och så skulle din ritning bli deformerad eller i värsta fall kan den vara helt borta från scenen. Granska dina beräkningar och försök att göra en stegvis ritning för att se vad som händer.

Text visas inte alls

Du glömde att ställa in textens färg eller så har du ställt in den på fel värde

Du måste ringa setTextColor innan du ritar texter. Annars har du inga fel, men du ser ingenting på displayen. Du kan också ha ställt in textfärgen på samma sätt som bakgrundsfärgen.

Du använder ett mycket stort teckensnitt

Om du ställer in textstorleken till ett mycket stort värde kan det vara möjligt att tecken kommer helt ur det synliga området.

Det finns ett kompileringsfel om skärmstorlek

Detta hände också för mig och jag tror att det skulle hända för de flesta av er. Det beror på de konstanta värdena för visningsstorleken som definieras inuti huvudfilen Adafruit_SSD1306.h som vi inkluderar ovanpå vårt skript. Den här filen finns i {your-project-folder} libraries / Adafruit_SSD1306 / Adafruit_SSD1306.h. Om du öppnar den här filen kommer du att märka att det finns ett kommentarsektion som nedan där det beskriver att du bara behöver ta bort en kommentar till den konstant som representerar din OLED -skärmmodulstorlek. För en 128x64 -skärmsmoduler bör raden #define SSD1306_128_64 vara okommenterad.

/*=====================================================================

SSD1306-skärmar ------------------------------------------------- ---------------------- Drivrutinen används i flera skärmar (128x64, 128x32, etc.). Välj lämplig bildskärm nedan för att skapa en lämplig storlek rambuffer, etc. SSD1306_128_64 128x64 pixel display SSD1306_128_32 128x32 pixel display SSD1306_96_16 --------------------------- --------------------------------------------* / #define SSD1306_128_64 / / #define SSD1306_128_32 // #define SSD1306_96_16 /*========================================= ================================*/

Steg 12: Vad ska jag göra härnäst?

OLED -displayen som en utgångsmodul kan ge dig en fantastisk möjlighet att tillhandahålla ett professionellt utseende för dina hobbyprojekt. Du kan försöka följa idéer som utgångspunkt för att visa meningsfulla data om det eller hjälpa användaren att veta vad som händer eller om han/hon behövde göra något. Det skulle vara mycket tydligare för en användare att läsa ett meddelande på en display än att tolka tillståndet för ett projekt/en enhet via vissa lysdioder.

Vad du kan göra som utgångspunkt kan vara:

• Läs ett temperatursensorvärde och visa det på OLED -modulen. Du kan lägga till tryck- eller fuktsensor till den och skapa ett fullt fungerande väderstationsprojekt.
• Försök att rita något på bildskärmsmodulen med en joystickmodul som inmatningsenhet.
• Försök att rita en animation på displayen genom en sekvens av ritning/fördröjning av funktionssamtal eller Arduino -avbrott
• Visa din anpassade logotyp vid systemstart (istället för Adafruit -logotyp)

Glöm inte att berätta om kommentarer, vad skulle du göra (eller har du redan gjort) med hjälp av OLED -displaymodul.