Menu Arduino sur un Nokia 5110 Lcd à l'aide d'un encodeur rotatif : 6 étapes (avec photos)

2024 Auteur: John Day | [email protected]. Dernière modifié: 2024-01-30 09:09

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 ce menu fonctionne. 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 à la réalisation de ce projet sont les suivantes:

• Un Arduino Uno
• Un écran LCD Nokia 5110 ▶
• Un encodeur rotatif ▶
• Une petite planche à pain ▶
• Quelques fils ▶
• Banque d'alimentation ▶

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 conçu à l'origine comme é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. Il vous suffit de 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 Instructable, 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:

É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 codeurs rotatifs sont utilisés dans de nombreuses applications qui nécessitent une rotation illimitée et précise de l'arbre, y compris les commandes industrielles, la robotique, les objectifs photographiques à usage spécial, les dispositifs 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 retrouver cette vidéo en pièce jointe ici.

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

Vous pouvez l'obtenir ici ▶

Étape 4: Construire 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 à la broche numérique 4, la troisième à la broche numérique 5, la quatrième à la broche numérique 11 et la cinquième à la broche 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 de l'écran. 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'à connecter 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 voir, le projet fonctionne bien 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.

1. Adafruit GFX:
2. Nokia 5110:
3. Bibliothèque d'encodeur:
4. Bibliothèque 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; page entière = 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 chercher dans le code.

String menuItem1 = "Contraste";String menuItem2 = "Volume"; String menuItem3 = "Langue"; String menuItem4 = "Difficulté"; String menuItem5 = "Lumière: ON"; String menuItem6 = "Réinitialiser";

rétroéclairage booléen = vrai;

contraste int=60; volume entier = 50;

String language[3] = { "EN", "ES", "EL" };

int selectedLanguage = 0;

Difficulté de chaîne[2] = { "EASY", "HARD" };

int sélectionnéDifficulté = 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. À quel point cela 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 vais bientôt préparer une vidéo sur les interruptions alors restez à l'écoute. J'aimerais avoir 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!