Een door een draaiencoder bestuurd menu maken op een Nokia 5110 LCD met Arduino UNO

Onderdelen en benodigdheden

Apps en online diensten

• Arduino IDE

Over dit project

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

Dit is het project dat we gaan bouwen. Op het display verschijnt een eenvoudig menu, en met de hulp van de draaiencoder kan ik navigeren omhoog of omlaag en een menu-item selecteren door op de knop van de draaiencoder te drukken. Wanneer de middelste knop van de draaiencoder wordt ingedrukt, verschijnt een ander scherm waarop we de waarde van een variabele kunnen wijzigen. Als we nogmaals op de knop drukken, keeren we terug naar het hoofmenu. Het menu heeft 6 items, en we kunnen omhoog of omlaag scrollen; de items op het display veranderen dienovereenkomstig. Bekijk de bijgevoegde video om precies te zien hoe dit menu werkt. Natuurlijk kun je het aanpassen om je eigen complexere menu's te bouwen.

Stap 1: Alle onderdelen verzamelen

De benodigde onderdelen zijn:

• Een Arduino Uno
• Een Nokia 5110 LCD-display
• Een draaiencoder
• Een klein breadboard
• Enkele draden

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

Stap 2: Nokia 5110 LCD-display

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

De Nokia 5110 is een basis grafisch LCD-scherm dat oorspronkelijk bedoeld was als mobiele telefoonscherm. Het gebruikt de PCD8544-controller, een laag-verbruik CMOS LCD-controller/driver. Daardoor heeft dit display een indrukwekkend laag stroomverbruik. Het verbruikt slechts 0,4 mA wanneer het aanstaat maar de achtergrondverlichting uitstaat. In slaapmodus gebruikt het minder dan 0,06 mA! Dat is een van de redenen waarom dit display mijn favoriet is. De PCD8544 interfaceert met microcontrollers via een seriële businterface, wat het display heel eenvoudig te gebruiken maakt met Arduino. Je hoeft slechts 8 draden aan te sluiten.

Ik heb een gedetailleerde tutorial gemaakt over het gebruik van de Nokia 5110 LCD met Arduino. Die video is bij deze tutorial gevoegd en biedt veel nuttige informatie over het display, dus ik moedig je aan om hem aandachtig te bekijken. De prijs van het display is ongeveer $4.

Stap 3: Draaiencoder

Een draaiencoder, ook wel asencoder genoemd, is een electromechanisch apparaat dat de hoekpositie of beweging van een as omzet in een analoge of digitale code. Draaiencoders worden gebruikt in veel toepassingen die onbeperkte, nauwkeurige asrotatie vereisen – waaronder industriële besturingen, robotica, speciale fotografische lenzen, computer-invoervoorzieningen (zoals optomechanische muizen en trackballs), geregelde rheometers en draaiende radarplatforms.

De draaiencoder die we in dit project gebruiken is een heel goedkope encoder. Het heeft ook een ingebouwde knop, en om het werkend te krijgen hoeven we slechts 5 draden aan te sluiten. Ik heb een gedetailleerde tutorial gemaakt over het gebruik van een draaiencoder. Je vindt deze video hier bijgevoegd.

De kosten van deze draaiencoder zijn erg laag, ongeveer $1,50.

Stap 4: Het project bouwen

Laten we nu alle onderdelen met elkaar verbinden. Als je nog nooit een draaiencoder hebt gebruikt, moedig ik je aan om eerst de tutorial over draaiencoders te bekijken. Die helpt je begrijpen hoe ze werken en geeft je ervaring. De video is hier bijgevoegd.

Ik heb het display op een klein breadboard geplaatst. Laten we eerst het display aansluiten. De eerste pin van het display (Reset) gaat naar digitale pin 3 van de Arduino Uno, de tweede pin naar digitale pin 4, de derde naar digitale pin 5, de vierde naar digitale pin 11 en de vijfde naar digitale 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 software willen besturen, sluiten we het aan op digitale pin 7. De laatste pin is GND. We verbinden GND met de negatieve rail van het breadboard, en de negatieve rail met Arduino GND.

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

Nu is het project klaar om gevoed te worden. Zoals je ziet werkt het project prima, en het menu werkt zoals verwacht! Geweldig, laten we nu de software bekijken.

Stap 5: De code van het project

In dit project gebruiken we 4 bibliotheken. Twee voor het display, en twee voor de draaiencoder.

• Adafruit GFX: https://github.com/adafruit/Adafruit-GFX-Library
• Nokia 5110: https://github.com/adafruit/Adafruit-PCD8544-Nokia-5110-LCD-library
• Encoder Library: https://github.com/0xPIT/encoder/tree/arduino
• TimerOne library: https://github.com/PaulStoffregen/TimerOne

Eerst bekijken we de drawMenu-functie. Deze functie is verantwoordelijk voor het tekenen van het menu op het display. De functie wordt elke paar milliseconden aangeroepen, dus als er een wijziging in het menu is, zorgt deze functie ervoor dat het menu op het scherm wordt bijgewerkt.

int menuitem = 1;
int frame = 1;
int page = 1;
int lastMenuItem = 1;

Er zijn ook 3 zeer belangrijke globale variabelen: page, menuitem en frame. De variabele page onthoudt welk UI-scherm op het display getoond wordt. Als page 1 is, zijn we in het hoofdmenu; als het 2 is, zijn we in het secundaire scherm waar we de waarde van een variabele instellen. De menuitem onthoudt welk menu-item geselecteerd is. Als de waarde 1 is, is het eerste item geselecteerd, en moet drawMenu dit item zwart met witte letters tekenen. Als menuitem 2 is, is het tweede item geselecteerd, enzovoort. De variabele frame onthoudt welk deel van het menu op het scherm getoond wordt. Aangezien het menu 6 items bevat en we er maar 3 tegelijk kunnen tonen, moeten we weten welke items zichtbaar zijn. frame vertelt ons dit precies. Als frame 1 is, tonen we de eerste drie items; als het 2 is, tonen we items 2, 3, 4, enzovoort.

Ik heb geprobeerd de code zo eenvoudig mogelijk te maken om te wijzigen, door globale variabelen aan te maken die de namen van de menu-items bevatten. Zo kun je eenvoudig je eigen menu's maken zonder in de code te hoeven zoeken.

String menuItem1 = "Contrast";
String menuItem2 = "Volume";
String menuItem3 = "Language";
String menuItem4 = "Difficulty";
String menuItem5 = "Light: ON";
String menuItem6 = "Reset";
boolean backlight = true;
int contrast = 60;
int volume = 50;
String language[3] = { "EN", "ES", "EL" };
int selectedLanguage = 0;
String difficulty[2] = { "EASY", "HARD" };
int selectedDifficulty = 0;

Eerst initialiseren we alle globale variabelen die in de code nodig zijn. Vervolgens initialiseren we het display. In de loop-functie roepen we eerst drawMenu aan om het menu te tekenen. Daarna lezen we de waarde van de draaiencoder en controleren we of de knop is ingedrukt. Bijvoorbeeld, als we in het hoofdmenu zijn en het eerste item is geselecteerd, en de waarde van de draaiencoder toeneemt, dan neemt menuitem toe en in de volgende lus zal drawMenu het tweede item als geselecteerd tekenen. Als we nu op de knop van de draaiencoder drukken, navigeren we naar de tweede pagina, waar we de waarde van de variabele instellen. Opnieuw met de draaiencoder kunnen we de waarde verhogen of verlagen. Als we op de knop drukken, navigeren we terug naar het hoofmenu, en daalt page.

Dit 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 uitprobeert, zul je het beter begrijpen en in staat zijn om het te wijzigen, uit te breiden en in je eigen projecten te gebruiken. Zoals altijd vind je de code hier bijgevoegd.

Stap 6: Het project testen

Als we de code uploaden, zien we dat het project werkt zoals verwacht. We kunnen het menu omhoog en omlaag navigeren met de as, en elk menu-item selecteren door op de knop van de draaiencoder te drukken. Hoe cool is dat!

Nu we weten hoe we menu's bouwen voor Nokia 5110 LCD-displays, kunnen we meer functies aan onze projecten toevoegen en ze gebruiksvriendelijker maken. Dit eenvoudige menu dat we vandaag bouwden, kan nog verbeterd worden. We zouden interrupts kunnen gebruiken in plaats van de knopstatus constant te controleren. Op die manier kunnen we het stroomverbruik verminderen en de code schoner maken. Ik zal binnenkort een video over interrupts maken, dus blijf op de hoogte. Ik ben benieuwd naar jullie mening over dit menu-project. Vind je het nuttig en plan je een menu in een van je projecten te gebruiken? Laat je gedachten en ideeën hieronder weten, dank je wel!

Code

Code fragment #2

String menuItem1 = "Contrast";
String menuItem2 = "Volume";
String menuItem3 = "Language";
String menuItem4 = "Difficulty";
String menuItem5 = "Light: ON";
String menuItem6 = "Reset";
boolean backlight = true;
int contrast = 60;
int volume = 50;
String language[3] = { "EN", "ES", "EL" };
int selectedLanguage = 0;
String difficulty[2] = { "EASY", "HARD" };
int selectedDifficulty = 0;

GitHub

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