Arduino -meny på en Nokia 5110 Lcd med en roterande kodare: 6 steg (med bilder)

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

Kära vänner välkomna till en annan handledning! I den här videon kommer vi att lära oss att bygga vår egen meny för den populära Nokia 5110 LCD -skärmen, för att göra våra projekt mer användarvänliga och mer kapabla. Låt oss börja!

Det här är projektet vi ska bygga. I displayen visas en enkel meny, och med hjälp av vridkontrollen kan jag navigera uppåt eller nedåt och välja ett menyalternativ genom att trycka på vridknappsknappen. När man trycker på den mellersta knappen på den roterande kodaren visas en annan skärm och vi kan ändra värdet på en variabel. Om vi trycker på vridknappsknappen en gång till, går vi tillbaka till huvudmenyskärmen. Menyn har 6 objekt, och vi kan rulla nedåt eller uppåt på menyn och alternativen på displayen kommer att ändras i enlighet därmed. Titta på den bifogade videon för att se exakt hur den här menyn fungerar. Naturligtvis kan du ändra det för att bygga dina egna mer komplexa menyer om du vill.

Låt oss nu se hur man bygger detta projekt.

Steg 1: Skaffa alla delar

De delar som behövs för att bygga detta projekt är följande:

• En Arduino Uno ▶
• En Nokia 5110 LCD -skärm ▶
• En roterande kodare ▶
• En liten brödbräda ▶
• Några ledningar ▶
• Power Bank ▶

Kostnaden för projektet är mycket låg, det är mindre än $ 10. Du hittar länkar till alla delar jag använder i beskrivningen av videon nedan.

Steg 2: Nokia 5110 LCD -skärm

Nokia 5110 är min favoritskärm för mina Arduino -projekt.

Nokia 5110 är en grundläggande grafisk LCD -skärm som ursprungligen var avsedd som mobiltelefonskärm. Den använder PCD8544 -styrenheten som är en CMOS LCD -kontroller/drivrutin med låg effekt. På grund av detta har denna display en imponerande strömförbrukning. Den använder bara 0,4 mA när den är på men bakgrundsbelysningen är inaktiverad. Den använder mindre än 0,06mA i viloläge! Det är en av anledningarna som gör den här skärmen till min favorit. PCD8544 gränssnitt till mikrokontroller via ett seriellt bussgränssnitt. Det gör skärmen mycket enkel att använda med Arduino. Du behöver bara ansluta 8 ledningar.

Jag har förberett en detaljerad handledning om hur du använder Nokia 5110 LCD -skärm med Arduino. Jag har bifogat den här videon i den här instruktionsboken, den kommer att ge användbar information om displayen, så jag uppmuntrar dig att titta noga på den. Kostnaden för displayen är cirka $ 4.

Du kan hämta det här: ▶

Steg 3: Rotary Encoder

En roterande kodare, även kallad en axelkodare, är en elektromekanisk anordning som omvandlar vinkelpositionen eller rörelsen hos en axel eller axel till en analog eller digital kod. Rotary encoders används i många applikationer som kräver exakt axel, obegränsad rotation-inklusive industriella kontroller, robotik, fotografiska linser för speciella ändamål, datorinmatningsenheter (t.ex. optomekaniska möss och styrbollar), kontrollerade stressreometrar och roterande radarplattformar.

Den roterande kodaren som vi ska använda i detta projekt är en mycket billig kodare. Den har också en knapp inbäddad och för att få det att fungera behöver vi bara ansluta 5 ledningar. Jag har förberett en detaljerad handledning om hur man använder en roterande kodare. Du hittar den här videon bifogad här.

Kostnaden för denna roterande kodare är mycket låg. Det kostar runt $ 1,5.

Du kan hämta det här ▶

Steg 4: Bygga projektet

Låt oss nu koppla ihop alla delar. Innan du bygger detta projekt, om du inte tidigare har använt en roterande kodare, uppmuntrar jag dig att titta på handledningen jag har förberett om roterande kodare. Det hjälper dig att förstå hur roterande kodare fungerar och du kommer att få lite erfarenhet av dem. Den här videon bifogas här.

Jag har placerat displayen på en liten brödbräda som denna. Låt oss först ansluta skärmen. Displayens första stift som är Reset går till digital pin 3 på Arduino Uno, den andra pin till digital pin 4, den tredje pin till digital pin 5, den fjärde pin till digital pin 11 och den femte pin till digital pin 13. Nästa pin är Vcc. Vi ansluter Vcc till den positiva skenan på brödbrädan, och den brödbrädans positiva skenan till 3,3V -utgången från Arduino. Nästa pin är bakgrundsbelysning för displayen. Eftersom vi vill styra det via mjukvaran ansluter vi det till digital stift 7. Den sista stiftet är GND. Vi ansluter GND till den negativa skenan på brödbrädan och den negativa skenan på brödbrädan till Arduino GND.

Allt vi behöver göra är att ansluta den roterande givaren. Den första stiftet är GND och vi ansluter det till den negativa skenan på brödbrädan. Nästa stift är Vcc och vi ansluter den till den positiva skenan på brödbrädan. Nästa stift är SW och vi ansluter det till analog stift 2. Nästa stift heter DT och vi ansluter det till analog stift 1. Slutligen är stiftet CLK anslutet till analog stift 0. Du kan hitta det schematiska diagrammet för detta projekt i beskrivningen av videon nedan.

Nu är vi redo att starta projektet. Som ni ser fungerar projektet bra och menyn fungerar som förväntat! Bra, låt oss nu se projektets programvara.

Steg 5: Koden för projektet

I detta projekt använder vi 4 bibliotek. Vi använder två bibliotek för displayen och två för den roterande kodaren.

1. Adafruit GFX:
2. Nokia 5110:
3. Kodarbibliotek:
4. TimerOne -bibliotek:

Först ska vi titta på drawMenu -funktionen. Denna funktion är ansvarig för att rita menyn på displayen. Denna funktion kallas med några millisekunder, så om det blir en ändring på menyn är denna funktion ansvarig för att uppdatera menyn på skärmen.

int menuitem = 1; int frame = 1; int sida = 1; int lastMenuItem = 1;

Det finns också 3 mycket viktiga globala variabler, variabelns sida, variabel menuitem och variabel ram. Den variabla sidan kommer ihåg vilken UI -skärm som visas på skärmen. Så, om sidvariabeln är 1, är vi i huvudgränssnittet för gränssnittet, och om variabeln är 2 befinner vi oss i den sekundära användargränssnittsskärmen där vi ställer in värdet på en variabel. Menyalternativet kommer ihåg det valda menyalternativet. Så, om dess värde är 1, väljs det första menyalternativet, så drawMenu -funktionen måste rita detta menyalternativ som svart med vita bokstäver. Om menyalternativet är 2 väljs det andra menyalternativet och så vidare. Ramvariabeln kommer ihåg vilken del av menyn som visas på skärmen. Eftersom menyn vi har skapat innehåller 6 objekt och vi bara kan visa 3 av dem åt gången, måste vi veta vilka objekt som visas på skärmen. Ramvariabeln berättar exakt detta. Om ramvariabeln har värdet 1, visar vi de tre första menyalternativen, om det är 2 visar vi objekt 2, 3, 4 och så vidare.

Jag försökte göra koden så enkel som möjligt att ändra så jag har skapat några globala variabler som innehåller namnen på menyalternativen. På så sätt kan du enkelt skapa dina egna menyer utan att söka i kod.

String menuItem1 = "Kontrast"; String menuItem2 = "Volym"; String menuItem3 = "Språk"; String menuItem4 = "Svårighet"; String menuItem5 = "Ljus: PÅ"; String menuItem6 = "Återställ";

boolsk bakgrundsbelysning = sant;

int kontrast = 60; int volym = 50;

Strängspråk [3] = {"EN", "ES", "EL"};

int selectLanguage = 0;

Strängsvårigheter [2] = {"EASY", "HARD"};

int selectedDif svårighetsgrad = 0;

Först initierar vi alla globala variabler som behövs i koden. Därefter initierar vi displayen. I loop -funktionen kallar vi först drawMenu -funktionen för att rita menyn på skärmen. Sedan läser vi värdet från Rotary encoder och kontrollerar om knappen trycks in. Om vi till exempel befinner oss på huvudgränssnittsskärmen och det första menyalternativet väljs, om värdet från den roterande kodaren har ökat, ökar menuitemvariabeln och i nästa slinga kommer drawMenu -funktionen att rita det andra menyalternativet som valt. Om vi nu trycker på knappen på den roterande kodaren navigerar vi till den andra sidan, där vi anger värdet på variabeln. Återigen med hjälp av den roterande kodaren kan vi öka eller minska värdet på variabeln. Om vi trycker på knappen navigerar vi tillbaka till huvudmenysidan och sidvariabeln minskar.

Det är grundtanken bakom den här menyn. Vi följer samma procedur för alla menyalternativ och sidor. Koden är komplex, den är över 400 rader lång. Det verkar komplicerat men om du försöker själv kommer du att förstå det lättare och du kommer att kunna ändra det, utöka det och använda det i dina egna projekt. Som alltid kan du hitta koden bifogad här.

Steg 6: Testa projektet

Om vi läser in koden kan vi se att projektet fungerar som förväntat. Vi kan navigera menyn upp och ner med hjälp av axeln och vi kan välja vilket menyalternativ som helst genom att trycka på vridknappsknappen. Hur coolt är inte det!

Nu när vi vet hur man bygger menyer för Nokia 5110 LCD -skärmar kan vi lägga till fler funktioner i våra projekt och göra dem mer användarvänliga. Denna enkla meny som vi byggde idag kan dock förbättras. Vi kan använda avbrott istället för att kontrollera knapptillstånden hela tiden. På så sätt kan vi minska projektets strömförbrukning och göra koden renare. Jag kommer snart att förbereda en video om avbrott så håll utkik. Jag vill gärna höra din åsikt om detta menyprojekt. Tycker du att det är användbart och planerar du att använda en meny i något av ditt projekt. Skriv gärna dina tankar och idéer nedan, tack!