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

C'est le projet que nous allons construire. Un simple menu apparaît à l'écran 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 vous appuyez sur le bouton central de l'encodeur rotatif, un autre écran apparaît et vous pouvez modifier la valeur d'une variable. Si nous appuyons une nouvelle fois sur le bouton de l'encodeur rotatif, nous revenons à l'écran du menu principal. Le menu comporte 6 éléments. Vous pouvez faire défiler le menu vers le haut ou vers le bas pour modifier les éléments à l’écran. Regardez la vidéo ci-jointe pour voir 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.

Provisions:

Étape 1: Obtenez toutes les pièces

Les pièces nécessaires à la construction de ce projet sont les suivantes:

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

Le coût du projet est très bas, il est inférieur à 10 dollars. Vous pouvez trouver des liens pour toutes les parties 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 destiné à l’origine aux écrans de téléphones portables. Il utilise le contrôleur PCD8544 qui est un contrôleur / pilote LCD CMOS basse consommation. De ce fait, cet écran affiche une consommation d'énergie impressionnante. Il utilise seulement 0.4mA quand il est allumé mais le rétro-éclairage est désactivé. Il utilise moins de 0,06mA en mode veille! C'est l'une des raisons pour lesquelles cet affichage est mon préféré. Le PCD8544 s'interface avec les microcontrôleurs via une interface de bus série. Cela rend l’affichage 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 du Nokia 5110 avec Arduino. J'ai joint cette vidéo à cet Instructable, elle fournira peut-être 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: Codeur rotatif

Un codeur rotatif, également appelé codeur d’arbre, est un dispositif électro-mé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 nécessitant une rotation d'arbre précise et illimitée, notamment les commandes industrielles, la robotique, les objectifs photographiques spéciaux, les périphériques de saisie informatique (tels que les souris optomécaniques et les trackballs), les rhéomètres à contrainte contrôlée et les plates-formes radar rotatives.

Le codeur rotatif que nous allons utiliser dans ce projet est un codeur très économique. 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 ici.

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

Vous pouvez l'obtenir ici ▶

Étape 4: Construire le projet

Connectons maintenant toutes les parties ensemble. Avant de créer ce projet, si vous n’avez jamais utilisé de codeur rotatif par le passé, je vous encourage à consulter le didacticiel que j’ai préparé sur les codeurs rotatifs. Cela vous aidera à comprendre le fonctionnement des encodeurs rotatifs et à acquérir de l'expérience avec eux. Cette vidéo est jointe ici.

J'ai placé l'écran sur une petite planche à pain comme celle-ci. Commençons par connecter l’écran. La première broche de l'affichage 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 à numérique pin 13. La prochaine broche est Vcc. Nous connectons Vcc au rail positif de la planche à pain et le rail positif à la sortie 3.3V de l’Arduino. La broche suivante est Backlight 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 reste plus qu'à connecter le codeur rotatif. La première broche est GND et nous la connectons au rail négatif de la planche à pain. La broche suivante est Vcc et nous la connectons au rail positif de la planche à pain. 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 principe de ce projet dans la description de la vidéo ci-dessous.

Nous sommes maintenant prêts à lancer le projet. Comme vous pouvez le constater, le projet fonctionne bien et le menu fonctionne comme prévu! Génial, 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 le codeur rotatif.

1. Adafruit GFX:
2. Nokia 5110:
3. Bibliothèque d'encodeurs:
4. Bibliothèque TimerOne:

Dans un premier temps, nous allons examiner la fonction drawMenu. Cette fonction est responsable de l’affichage du menu à l’écran. Cette fonction est appelée toutes les quelques millisecondes. Par conséquent, en cas de modification du menu, cette fonction est chargée de mettre à jour le 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 de variable rappelle quelle interface utilisateur est affichée à 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 garde en mémoire l'élément de menu sélectionné. Ainsi, si sa valeur est 1, le premier élément de menu est sélectionné. La fonction drawMenu doit donc 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é, etc. La variable frame rappelle quelle partie du menu est affichée à l'écran. Puisque 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 de menu, si elle est 2, nous affichons les éléments 2, 3, 4, etc.

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

String menuItem1 = "Contraste";

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

rétro-éclairage booléen = true; int contraste = 60; int volume = 50;

Langage de chaîne 3 = {"EN", "ES", "EL"}; int selectedLanguage = 0;

Difficulté de la corde 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 à l’aide du bouton rotatif et vérifions si le bouton est enfoncé. Par exemple, si vous êtes 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 affichera le deuxième élément de menu comme sélectionné. Si nous appuyons maintenant sur le bouton de l'encodeur rotatif, nous nous dirigeons vers la deuxième page, où nous définissons la valeur de la variable. En utilisant à nouveau le codeur rotatif, nous pouvons augmenter ou diminuer la valeur de la variable. Si nous appuyons sur le bouton, nous retournons à la page du menu principal et la variable de 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 les pages. Le code est complexe, il compte plus de 400 lignes. Cela semble compliqué, mais si vous l’essayez vous-même, vous comprendrez mieux et vous pourrez le modifier, le développer et l’utiliser dans vos propres projets. Comme toujours, vous pouvez trouver le code ci-joint.

Étape 6: Test du 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 la tige et 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 du Nokia 5110, nous pouvons ajouter davantage de fonctionnalités à nos projets et les rendre plus conviviales. Ce menu simple que nous avons construit aujourd'hui peut être amélioré. Nous pourrions utiliser des interruptions au lieu de vérifier les états 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 opinion sur ce projet de menu.Trouvez-vous cela utile et envisagez-vous d'utiliser un menu dans l'un de vos projets? S'il vous plaît poster vos pensées et idées ci-dessous, merci!