Arduino-menu op een Nokia 5110 LCD met een roterende encoder

Over dit project

Beste vrienden welkom bij een nieuwe tutorial! In deze video gaan we leren hoe we ons eigen menu voor het populaire Nokia 5110 LCD-scherm kunnen bouwen, om onze projecten gebruiksvriendelijker en capabeler te maken. Laten we beginnen!

Dit is het project dat we gaan bouwen. In het display verschijnt een eenvoudig menu en met behulp van de draaiknop kan ik omhoog of omlaag navigeren en een menu-item selecteren door op de draaiknop te drukken. Wanneer de middelste knop van de roterende encoder wordt ingedrukt, verschijnt een ander scherm en kunnen we de waarde van een variabele wijzigen. Als we nog een keer op de draaiknop drukken, gaan we terug naar het hoofdmenuscherm. Het menu heeft 6 items en we kunnen naar beneden of naar boven scrollen in het menu en de items op het display zullen dienovereenkomstig veranderen. Bekijk de bijgevoegde video om te zien hoe dit menu precies werkt. Natuurlijk kunt u het desgewenst aanpassen om uw eigen, meer complexe menu's te bouwen.

Laten we nu kijken hoe we dit project kunnen bouwen.

Stap 1:Verkrijg alle onderdelen

De onderdelen die nodig zijn om dit project te bouwen zijn de volgende:

• Een Arduino Uno ▶ http://educ8s.tv/part/ArduinoUno

• Een Nokia 5110 LCD-scherm ▶ http://educ8s.tv/part/NOKIA5110

• Een roterende encoder ▶ http://educ8s.tv/part/RotaryEncoder

• Een klein bordje ▶ http://educ8s.tv/part/SmallBreadboard

• Sommige draden ▶ http://educ8s.tv/part/Wires

De kosten van het project zijn erg laag, het is minder dan $ 10. Je vindt links naar alle onderdelen die ik gebruik in de beschrijving van de video hieronder.

Stap 2:Nokia 5110 LCD-scherm

De Nokia 5110 is mijn favoriete scherm voor mijn Arduino-projecten.

De Nokia 5110 is een eenvoudig grafisch LCD-scherm dat oorspronkelijk bedoeld was als scherm voor een mobiele telefoon. Het maakt gebruik van de PCD8544-controller, een CMOS LCD-controller/driver met laag vermogen. Hierdoor heeft dit beeldscherm een ​​indrukwekkend stroomverbruik. Het gebruikt slechts 0,4 mA wanneer het is ingeschakeld, maar de achtergrondverlichting is uitgeschakeld. Het gebruikt minder dan 0,06 mA in de slaapstand! Dat is een van de redenen waarom dit scherm mijn favoriet is. De PCD8544 is gekoppeld aan microcontrollers via een seriële businterface. Dat maakt het display heel gemakkelijk te gebruiken met Arduino. U hoeft slechts 8 draden aan te sluiten.

Ik heb een gedetailleerde tutorial voorbereid over het gebruik van het Nokia 5110 LCD-scherm met Arduino. Ik heb die video in deze tutorial bijgevoegd, deze zal mogelijk nuttige informatie over het scherm geven, dus ik moedig je aan om deze zorgvuldig te bekijken. De kosten van het scherm zijn ongeveer $ 4.

Je kunt het hier krijgen:▶ http://educ8s.tv/part/NOKIA5110

Stap 3:Roterende encoder

Een roterende encoder, ook wel een asencoder genoemd, is een elektromechanisch apparaat dat de hoekpositie of beweging van een as of as omzet in een analoge of digitale code. Roterende encoders worden gebruikt in veel toepassingen die nauwkeurige as-onbeperkte rotatie vereisen, waaronder industriële besturingen, robotica, speciale fotografische lenzen, computerinvoerapparatuur (zoals optomechanische muizen en trackballs), gecontroleerde spanningsreometers en roterende radarplatforms.

De roterende encoder die we in dit project gaan gebruiken, is een zeer goedkope encoder. Het heeft ook een ingebouwde knop en om het te laten werken, hoeven we maar 5 draden aan te sluiten. Ik heb een gedetailleerde tutorial voorbereid over het gebruik van een roterende encoder. Je kunt deze video hier als bijlage vinden.

De kosten van deze roterende encoder zijn zeer laag. Het kost ongeveer $ 1,5.

Je kunt het hier downloaden ▶ http://educ8s.tv/part/RotaryEncoder

Stap 4:Het project bouwen

Laten we nu alle onderdelen met elkaar verbinden. Voordat je dit project bouwt, raad ik je aan om, als je in het verleden geen roterende encoder hebt gebruikt, de tutorial te bekijken die ik heb voorbereid over roterende encoders. Het zal u helpen begrijpen hoe roterende encoders werken en u zult er wat ervaring mee opdoen. Deze video is hier bijgevoegd.

Ik heb het display op een kleine breadboard zoals deze geplaatst. Laten we eerst het scherm aansluiten. De eerste pin van het display die Reset is, gaat naar digitale pin 3 van de Arduino Uno, de tweede pin gaat naar digitale pin 4, de derde pin gaat naar digitale pin 5, de vierde pin naar digitale pin 11 en de vijfde pin naar digitaal pin 13. De volgende pin is Vcc. We verbinden Vcc met de positieve rail van het breadboard en de positieve rail van het breadboard met de 3.3V-uitgang van de Arduino. De volgende pin is Backlight voor het display. Omdat we het via de software willen bedienen, verbinden we het met digitale pin 7. De laatste pin is GND. We verbinden GND met de negatieve rail van het breadboard en de negatieve rail van het breadboard met Arduino GND.

Nu hoeven we alleen nog de roterende encoder aan te sluiten. De eerste pin is GND en we verbinden deze met de negatieve rail van het breadboard. De volgende pin is Vcc en we verbinden deze met de positieve rail van het breadboard. De volgende pin is SW en we verbinden deze met Analog Pin 2. De volgende pin heet DT en we verbinden deze met Analog Pin 1. Ten slotte is de pin CLK verbonden met Analog Pin 0. Je kunt het schematische diagram van dit project vinden in de beschrijving van de video hieronder.

Nu zijn we klaar om het project krachtiger te maken. Zoals je kunt zien, werkt het project prima en werkt het menu zoals verwacht! Geweldig, laten we nu de software van het project bekijken.

Stap 5:De code van het project

In dit project gebruiken we 4 bibliotheken. We gebruiken twee bibliotheken voor de weergave en twee voor de roterende encoder.

• Adafruit GFX:https://github.com/adafruit/Adafruit-GFX-Library

• Nokia 5110:https://github.com/adafruit/Adafruit-PCD8544-Nokia-5110-LCD-library

• Encoder-bibliotheek:https://github.com/0xPIT/encoder/tree/arduino

• TimerOne-bibliotheek:https://github.com/PaulStoffregen/TimerOne

Eerst gaan we kijken naar de functie drawMenu. Deze functie is verantwoordelijk voor het tekenen van het menu op het display. Deze functie wordt om de paar milliseconden aangeroepen, dus als er een wijziging in het menu is, is deze functie verantwoordelijk voor het bijwerken van het menu op het scherm.

int menuitem =1;int frame =1;int pagina =1;int lastMenuItem =1; 

Er zijn ook 3 zeer belangrijke globale variabelen, de variabele pagina, het variabele menu-item en het variabele frame. De variabele pagina onthoudt welk UI-scherm op het scherm wordt weergegeven. Dus als de paginavariabele 1 is, bevinden we ons in het hoofdscherm van de gebruikersinterface en als de variabele 2 is, bevinden we ons in het secundaire gebruikersinterfacescherm waar we de waarde op een variabele instellen. Het menu-item onthoudt het geselecteerde menu-item. Dus als de waarde 1 is, wordt het eerste menu-item geselecteerd, dus de functie drawMenu moet dit menu-item zwart met witte letters tekenen. Als het menu-item 2 is, wordt het tweede menu-item geselecteerd, enzovoort. De framevariabele onthoudt welk deel van het menu op het scherm wordt weergegeven. Aangezien het menu dat we hebben gemaakt 6 items bevat en we er slechts 3 tegelijk kunnen weergeven, moeten we weten welke items op het scherm worden weergegeven. De framevariabele vertelt ons precies dit. Als de framevariabele de waarde 1 heeft, geven we de eerste drie menu-items weer, als het 2 is, geven we items 2,3,4 weer, enzovoort.

Ik heb geprobeerd de code zo gemakkelijk mogelijk aan te passen, dus ik heb een aantal globale variabelen gemaakt die de namen voor de menu-items bevatten. Zo maak je eenvoudig je eigen menu's zonder in code te zoeken.

String menuItem1 ="Contrast";String menuItem2 ="Volume";String menuItem3 ="Taal";String menuItem4 ="Moeilijkheid";String menuItem5 ="Licht:AAN";String menuItem6 ="Reset"; boolean backlight =true;int contrast=60;int volume =50;String taal[3] ={ "EN", "ES", "EL" };int selectedLanguage =0;String moeilijkheid[2] ={ "EASY" , "HARD" };int selectedDifficulty =0; 

Eerst initialiseren we alle globale variabelen die nodig zijn in de code. Vervolgens initialiseren we het display. In de loop-functie roepen we eerst de drawMenu-functie aan om het menu op het scherm te tekenen. Dan lezen we de waarde van de Rotary encoder en controleren of de knop is ingedrukt. Als we ons bijvoorbeeld op het hoofdscherm van de gebruikersinterface bevinden en het eerste menu-item is geselecteerd, als de waarde van de roterende encoder is toegenomen, neemt de variabele van het menu-item toe en in de volgende lus zal de functie drawMenu het tweede menu-item tekenen zoals geselecteerd. Als we nu op de knop van de roterende encoder drukken, navigeren we naar de tweede pagina, waar we de waarde van de variabele instellen. Opnieuw met behulp van de roterende encoder kunnen we de waarde van de variabele verhogen of verlagen. Als we op de knop drukken, gaan we terug naar de hoofdmenupagina en wordt de paginavariabele kleiner.

Dat is het basisidee achter dit menu. We volgen dezelfde procedure voor alle menu-items en pagina's. De code is complex, het is meer dan 400 regels lang. Het lijkt ingewikkeld, maar als je het zelf probeert, zul je het gemakkelijker begrijpen en kun je het veranderen, uitbreiden en gebruiken in je eigen projecten. Zoals altijd kun je de code hier vinden.

Stap 6:het project testen

Als we de code laden, kunnen we zien dat het project werkt zoals verwacht. We kunnen door het menu op en neer navigeren met behulp van de schacht en we kunnen elk menu-item selecteren door op de draaiknop te drukken. Hoe cool is dat!

Nu we weten hoe we menu's moeten bouwen voor de Nokia 5110 LCD-schermen, kunnen we meer functies aan onze projecten toevoegen en ze gebruiksvriendelijker maken. Dit eenvoudige menu dat we vandaag hebben gebouwd, kan echter worden verbeterd. We zouden interrupts kunnen gebruiken in plaats van de hele tijd de knopstatussen te controleren. Op deze manier kunnen we het stroomverbruik van het project verminderen en de code schoner maken. Ik zal binnenkort een video over interrupts voorbereiden, dus houd ons in de gaten. Ik zou graag uw mening horen over dit menuproject. Vind je het handig en ben je van plan om een ​​menu te gebruiken in een van je projecten. Post uw gedachten en ideeën hieronder, bedankt!

String menuItem1 ="Contrast";String menuItem2 ="Volume";String menuItem3 ="Taal";String menuItem4 ="Moeilijkheid";String menuItem5 ="Licht:AAN";String menuItem6 ="Reset";boolean achtergrondverlichting =true;int contrast=60;int volume =50;String taal[3] ={ "EN", "ES", "EL" };int selectedLanguage =0;String moeilijkheid[2] ={ "GEMAKKELIJK", "HARD " };int selectedDifficulty =0;