Crear un Menú Controlado por Encoder Rotativo en LCD Nokia 5110 con Arduino UNO

Componentes y suministros

Arduino UNO	1
Encoder Rotativo	1
LCD Nokia 5110	1

Aplicaciones y servicios online

• Arduino IDE

Sobre este proyecto

¡Bienvenidos a otro tutorial! Aprenderemos a construir nuestro propio menú para el popular display LCD Nokia 5110, para hacer nuestros proyectos más amigables y capaces. ¡Empecemos!

Este es el proyecto que construiremos. En la pantalla aparece un menú simple, y con el encoder rotativo puedo navegar arriba/abajo y seleccionar un ítem presionando el botón del encoder. Al presionar el botón central, aparece otra pantalla donde podemos cambiar el valor de una variable. Presionando de nuevo, volvemos al menú principal. El menú tiene 6 ítems y podemos desplazarnos arriba/abajo cambiando los ítems mostrados. Ver el video adjunto para ver el funcionamiento exacto. Por supuesto, puedes modificarlo para crear menús más complejos.

Paso 1: Obtener todas las piezas

Las piezas necesarias son:

• Arduino Uno
• Display LCD Nokia 5110
• Encoder Rotativo
• Protoboard pequeña
• Cables

El coste es muy bajo, menos de $10. Encuentra enlaces en la descripción del video.

Paso 2: Display LCD Nokia 5110

El Nokia 5110 es mi display favorito para proyectos Arduino. Es una pantalla LCD gráfica básica, originalmente para móviles. Usa el controlador PCD8544 (bajo consumo CMOS). Consumo impresionante: solo 0.4mA encendido sin retroiluminación, <0.06mA en modo sleep. Interfaz serie, muy fácil con Arduino (solo 8 cables).

Tengo un tutorial detallado sobre este display (video adjunto). Cuesta alrededor de $4.

Paso 3: Encoder Rotativo

Un encoder rotativo convierte la posición angular de un eje en código analógico/digital. Usado en controles industriales, robótica, ratones, etc. El nuestro es económico, tiene botón integrado y necesita solo 5 cables. Tutorial detallado adjunto. Cuesta ~$1.5.

Paso 4: Construir el proyecto

Conectemos todo. Si no has usado un encoder rotativo, mira el tutorial adjunto para entender su funcionamiento.

Coloqué el display en una protoboard. Conexiones del display:

• Pin 1 (Reset) → Digital 3
• Pin 2 → Digital 4
• Pin 3 → Digital 5
• Pin 4 → Digital 11
• Pin 5 → Digital 13
• Vcc → Rail positivo → 3.3V Arduino
• Backlight → Digital 7 (control por software)
• GND → Rail negativo → GND Arduino

Encoder rotativo:

• GND → Rail negativo
• Vcc → Rail positivo
• SW → Analógico 2
• DT → Analógico 1
• CLK → Analógico 0

El esquema está en la descripción del video. Al encender, el menú funciona como se esperaba.

Paso 5: Código del proyecto

Usamos 4 librerías:

• Adafruit GFX: GitHub
• Nokia 5110: GitHub
• Encoder Library: GitHub
• TimerOne: GitHub

La función drawMenu() dibuja el menú en pantalla, llamada cada pocos ms para actualizar cambios.

Variables globales clave:

int menuitem = 1;   // ítem seleccionado
int frame = 1;      // qué parte del menú se muestra (3 ítems a la vez)
int page = 1;       // pantalla actual: 1=menú principal, 2=ajustar variable
int lastMenuItem = 1;

Variables para ítems del menú (fácil personalización):

String menuItem1 = "Contraste";
String menuItem2 = "Volumen";
String menuItem3 = "Idioma";
String menuItem4 = "Dificultad";
String menuItem5 = "Luz: 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;

En loop() llamamos a drawMenu(), leemos el encoder y verificamos si se presionó el botón. Según la página actual (page), navegamos entre ítems o ajustamos valores. El código tiene ~400 líneas, parece complejo pero probándolo se entiende fácilmente y podrás modificarlo para tus proyectos.

Paso 6: Probar el proyecto

Al cargar el código, el proyecto funciona: navegamos el menú con el eje y seleccionamos ítems con el botón. ¡Qué genial!

Ahora sabemos crear menús para Nokia 5110, podemos añadir más funciones a nuestros proyectos. Este menú se puede mejorar usando interrupciones en lugar de sondear botones, reduciendo consumo y limpiando código. Próximamente video sobre interrupciones. ¡Comenta tus opiniones e ideas!

Código

Fragmento de código #2

String menuItem1 = "Contraste";
String menuItem2 = "Volumen";
String menuItem3 = "Idioma";
String menuItem4 = "Dificultad";
String menuItem5 = "Luz: 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;

Enlaces GitHub

• Adafruit GFX Library
• Nokia 5110 LCD Library