Menu Arduino sur un écran LCD Nokia 5110 à l'aide d'un encodeur rotatif

Applications et services en ligne

Arduino IDE

À propos de ce projet

Chers amis, bienvenue dans un autre tutoriel ! Dans cette vidéo, nous allons apprendre à créer notre propre menu pour le populaire écran LCD Nokia 5110, afin de rendre nos projets plus conviviaux et plus performants. Commençons !

C'est le projet que nous allons construire. À l'écran, un menu simple apparaît et, à l'aide de l'encodeur rotatif, je peux naviguer vers le haut ou vers le bas et sélectionner un élément de menu en appuyant sur le bouton de l'encodeur rotatif. Lorsque le bouton du milieu de l'encodeur rotatif est enfoncé, un autre écran apparaît et nous pouvons changer la valeur d'une variable. Si nous appuyons à nouveau sur le bouton de l'encodeur rotatif, nous revenons à l'écran du menu principal. Le menu comporte 6 éléments, et nous pouvons faire défiler le menu vers le bas ou vers le haut et les éléments affichés changeront en conséquence. Regardez la vidéo ci-jointe pour voir exactement comment fonctionne ce menu. Bien sûr, vous pouvez le modifier pour créer vos propres menus plus complexes si vous le souhaitez.

Voyons maintenant comment construire ce projet.

Étape 1 :Obtenez toutes les pièces

Les pièces nécessaires pour construire ce projet sont les suivantes :

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

• Un écran LCD Nokia 5110 ▶ http://educ8s.tv/part/NOKIA5110

• Un encodeur rotatif ▶ http://educ8s.tv/part/RotaryEncoder

• Une petite planche à pain ▶ http://educ8s.tv/part/SmallBreadboard

• Quelques fils ▶ http://educ8s.tv/part/Wires

Le coût du projet est très faible, il est inférieur à 10 $. Vous pouvez trouver des liens pour toutes les pièces que j'utilise dans la description de la vidéo ci-dessous.

Étape 2 : écran LCD Nokia 5110

Le Nokia 5110 est mon écran préféré pour mes projets Arduino.

Le Nokia 5110 est un écran LCD graphique de base qui était à l'origine destiné à un écran de téléphone portable. Il utilise le contrôleur PCD8544 qui est un contrôleur/pilote LCD CMOS à faible consommation. Pour cette raison, cet écran a une consommation d'énergie impressionnante. Il n'utilise que 0,4 mA lorsqu'il est allumé mais le rétroéclairage est désactivé. Il utilise moins de 0,06 mA en mode veille ! C'est l'une des raisons qui font de cet affichage mon préféré. Le PCD8544 s'interface aux microcontrôleurs via une interface de bus série. Cela rend l'écran très facile à utiliser avec Arduino. Vous n'avez qu'à connecter 8 fils.

J'ai préparé un didacticiel détaillé sur l'utilisation de l'écran LCD Nokia 5110 avec Arduino. J'ai joint cette vidéo dans ce didacticiel, elle fournira des informations utiles sur l'affichage, je vous encourage donc à la regarder attentivement. Le coût de l'affichage est d'environ 4 $.

Vous pouvez l'obtenir ici :http://educ8s.tv/part/NOKIA5110

Étape 3 : Encodeur rotatif

Un codeur rotatif, également appelé codeur d'arbre, est un dispositif électromécanique qui convertit la position angulaire ou le mouvement d'un arbre ou d'un axe en un code analogique ou numérique. Les encodeurs rotatifs sont utilisés dans de nombreuses applications qui nécessitent une rotation illimitée et précise de l'arbre, notamment les commandes industrielles, la robotique, les objectifs photographiques à usage spécial, les périphériques d'entrée informatiques (tels que les souris optomécaniques et les boules de commande), les rhéomètres à contrainte contrôlée et les plates-formes radar rotatives.

L'encodeur rotatif que nous allons utiliser dans ce projet est un encodeur très bon marché. Il a également un bouton intégré et pour le faire fonctionner, nous n'avons besoin que de connecter 5 fils. J'ai préparé un tutoriel détaillé sur l'utilisation d'un encodeur rotatif. Vous pouvez trouver cette vidéo ci-jointe.

Le coût de cet encodeur rotatif est très faible. Cela coûte environ 1,5 $.

Vous pouvez l'obtenir ici ▶ http://educ8s.tv/part/RotaryEncoder

Étape 4 : Créer le projet

Connectons maintenant toutes les pièces ensemble. Avant de construire ce projet, si vous n'avez pas utilisé d'encodeur rotatif dans le passé, je vous encourage à regarder le tutoriel que j'ai préparé sur les encodeurs rotatifs. Cela vous aidera à comprendre comment fonctionnent les encodeurs rotatifs et vous allez acquérir une certaine expérience avec eux. Cette vidéo est jointe ici.

J'ai placé l'écran sur une petite planche à pain comme celle-ci. Connectons d'abord l'écran. La première broche de l'écran qui est Reset va à la broche numérique 3 de l'Arduino Uno, la deuxième broche va à la broche numérique 4, la troisième broche va à la broche numérique 5, la quatrième broche à la broche numérique 11 et la cinquième broche au numérique broche 13. La broche suivante est Vcc. Nous connectons Vcc au rail positif de la planche à pain et le rail positif de la planche à pain à la sortie 3,3 V de l'Arduino. La broche suivante est le rétroéclairage pour l'affichage. Puisque nous voulons le contrôler via le logiciel, nous le connectons à la broche numérique 7. La dernière broche est GND. Nous connectons GND au rail négatif de la planche à pain et le rail négatif de la planche à pain à Arduino GND.

Il ne nous reste plus qu'à brancher l'encodeur rotatif. La première broche est GND et nous la connectons au rail négatif de la maquette. La broche suivante est Vcc et nous la connectons au rail positif de la maquette. La broche suivante est SW et nous la connectons à la broche analogique 2. La broche suivante est nommée DT et nous la connectons à la broche analogique 1. Enfin, la broche CLK est connectée à la broche analogique 0. Vous pouvez trouver le schéma de ce projet dans la description de la vidéo ci-dessous.

Nous sommes maintenant prêts à démarrer le projet. Comme vous pouvez le constater, le projet fonctionne correctement et le menu fonctionne comme prévu ! Super, voyons maintenant le logiciel du projet.

Étape 5 :Le code du projet

Dans ce projet, nous utilisons 4 bibliothèques. Nous utilisons deux bibliothèques pour l'affichage et deux pour l'encodeur rotatif.

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

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

• Bibliothèque d'encodeur :https://github.com/0xPIT/encoder/tree/arduino

• Bibliothèque TimerOne :https://github.com/PaulStoffregen/TimerOne

Dans un premier temps, nous allons jeter un œil à la fonction drawMenu. Cette fonction est chargée de dessiner le menu sur l'écran. Cette fonction est appelée toutes les quelques millisecondes, donc s'il y a un changement dans le menu, cette fonction est responsable de la mise à jour du menu à l'écran.

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

Il existe également 3 variables globales très importantes, la variable page, la variable menuitem et la variable frame. La page variable mémorise quel écran d'interface utilisateur est affiché à l'écran. Ainsi, si la variable de page est 1, nous sommes dans l'écran principal de l'interface utilisateur, et si la variable est 2, nous sommes dans l'écran secondaire de l'interface utilisateur où nous définissons la valeur sur une variable. L'élément de menu se souvient de l'élément de menu sélectionné. Ainsi, si sa valeur est 1, le premier élément de menu est sélectionné, donc la fonction drawMenu doit dessiner cet élément de menu en noir avec des lettres blanches. Si l'élément de menu est 2, le deuxième élément de menu est sélectionné et ainsi de suite. La variable frame, mémorise quelle partie du menu est affichée à l'écran. Étant donné que le menu que nous avons créé contient 6 éléments et que nous ne pouvons en afficher que 3 à la fois, nous devons savoir quels éléments sont affichés à l'écran. La variable frame nous dit exactement cela. Si la variable frame a la valeur 1, nous affichons les trois premiers éléments du menu, si c'est 2, nous affichons les éléments 2,3,4 et ainsi de suite.

J'ai essayé de rendre le code aussi facile que possible à modifier, j'ai donc créé des variables globales qui contiennent les noms des éléments de menu. De cette façon, vous pouvez créer vos propres menus facilement sans rechercher dans le code.

String menuItem1 ="Contraste";String menuItem2 ="Volume";String menuItem3 ="Language";String menuItem4 ="Difficulté";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 difficult[2] ={ "EASY" , "HARD" };int selectedDifficulty =0; 

Au début, nous initialisons toutes les variables globales nécessaires dans le code. Ensuite, nous initialisons l'affichage. Dans la fonction de boucle, nous appelons d'abord la fonction drawMenu pour dessiner le menu à l'écran. Ensuite, nous lisons la valeur de l'encodeur rotatif et vérifions si le bouton est enfoncé. Par exemple, si nous sommes sur l'écran principal de l'interface utilisateur et que le premier élément de menu est sélectionné, si la valeur de l'encodeur rotatif a augmenté, la variable menuitem augmente et dans la boucle suivante, la fonction drawMenu dessinera le deuxième élément de menu sélectionné. Si nous appuyons maintenant sur le bouton de l'encodeur rotatif, nous naviguons jusqu'à la deuxième page, où nous définissons la valeur de la variable. Encore une fois en utilisant l'encodeur rotatif, nous pouvons augmenter ou diminuer la valeur de la variable. Si nous appuyons sur le bouton, nous revenons à la page du menu principal et la variable de la page diminue.

C'est l'idée de base derrière ce menu. Nous suivons la même procédure pour tous les éléments de menu et pages. Le code est complexe, il fait plus de 400 lignes. Cela semble compliqué mais si vous l'essayez vous-même, vous allez le comprendre plus facilement et vous pourrez le changer, l'étendre et l'utiliser dans vos propres projets. Comme toujours, vous pouvez trouver le code ci-joint.

Étape 6 :Tester le projet

Si nous chargeons le code, nous pouvons voir que le projet fonctionne comme prévu. Nous pouvons naviguer dans le menu de haut en bas à l'aide de l'arbre et nous pouvons sélectionner n'importe quel élément de menu en appuyant sur le bouton de l'encodeur rotatif. Comme c'est cool !

Maintenant que nous savons comment créer des menus pour les écrans LCD Nokia 5110, nous pouvons ajouter plus de fonctionnalités à nos projets et les rendre plus conviviaux. Ce menu simple que nous avons construit aujourd'hui peut cependant être amélioré. Nous pourrions utiliser des interruptions au lieu de vérifier l'état des boutons tout le temps. De cette façon, nous pouvons réduire la consommation d'énergie du projet et rendre le code plus propre. Je préparerai bientôt une vidéo sur les interruptions alors restez à l'écoute. J'aimerais connaître votre avis sur ce projet de menu. Le trouvez-vous utile et prévoyez-vous d'utiliser un menu dans l'un de vos projets. Veuillez poster vos pensées et idées ci-dessous, merci !

Code

• Extrait de code 2

Extrait de code #2Texte brut

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 Difficult[2] ={ "EASY", "HARD " };int sélectionnéDifficulté =0;

Github