Queridos amigos bienvenidos a otro tutorial! En este video, aprenderemos cómo crear nuestro propio menú para la popular pantalla LCD Nokia 5110, para que nuestros proyectos sean más fáciles de usar y más capaces. ¡Empecemos!

Este es el proyecto que vamos a construir. En la pantalla aparece un menú simple, y con la ayuda del codificador rotatorio puedo navegar hacia arriba o hacia abajo y seleccionar un elemento del menú presionando el botón del codificador rotatorio. Cuando se presiona el botón central del codificador rotatorio, aparece otra pantalla y podemos cambiar el valor de una variable. Si presionamos el botón del codificador rotatorio una vez más, regresamos a la pantalla del menú principal. El menú tiene 6 elementos, y podemos desplazarnos hacia abajo o hacia arriba en el menú y los elementos en la pantalla cambiarán en consecuencia. Mire el video adjunto para ver exactamente cómo funciona este menú. Por supuesto, puede modificarlo para construir sus propios menús más complejos si lo desea.

Veamos ahora cómo construir este proyecto.

Suministros:

Paso 1: Consigue todas las partes

Las partes necesarias para construir este proyecto son las siguientes:

• An Arduino Uno ▶
• Una pantalla LCD Nokia 5110 ▶
• Un codificador rotatorio ▶
• Una pequeña placa de pruebas ▶
• Algunos cables ▶
• Banco de energía ▶

El costo del proyecto es muy bajo, es menos de $ 10. Puede encontrar enlaces para todas las partes que uso en la descripción del video a continuación.

Paso 2: Pantalla LCD Nokia 5110

El Nokia 5110 es mi pantalla favorita para mis proyectos Arduino.

El Nokia 5110 es una pantalla LCD gráfica básica que originalmente fue diseñada como una pantalla de teléfono celular. Utiliza el controlador PCD8544, que es un controlador / controlador CMOS LCD de baja potencia. Debido a esto, esta pantalla tiene un impresionante consumo de energía. Utiliza solo 0.4mA cuando está encendido pero la luz de fondo está desactivada. ¡Utiliza menos de 0.06mA cuando está en modo de suspensión! Esa es una de las razones que hacen que este sea mi favorito. El PCD8544 se conecta a los microcontroladores a través de una interfaz de bus serie. Eso hace que la pantalla sea muy fácil de usar con Arduino. Solo necesitas conectar 8 hilos.

He preparado un tutorial detallado sobre cómo usar la pantalla LCD Nokia 5110 con Arduino. He adjuntado ese video en este Instructable, proporcionará información útil acerca de la pantalla, por lo que lo invito a que lo mire cuidadosamente. El costo de la pantalla es de alrededor de $ 4.

Puede obtenerlo aquí: ▶

Paso 3: Codificador rotatorio

Un codificador rotatorio, también llamado codificador de eje, es un dispositivo electromecánico que convierte la posición angular o el movimiento de un eje o eje en un código analógico o digital. Los codificadores giratorios se usan en muchas aplicaciones que requieren una rotación precisa e ilimitada en el eje, incluidos controles industriales, robótica, lentes fotográficas para propósitos especiales, dispositivos de entrada de computadora (como ratones optomecánicos y trackballs), reómetros de tensión controlada y plataformas de radar giratorias.

El codificador rotatorio que vamos a utilizar en este proyecto es un codificador muy económico. También tiene un botón incorporado y para que funcione solo necesitamos conectar 5 cables. He preparado un tutorial detallado sobre cómo usar un codificador rotatorio. Puedes encontrar este video adjunto aquí.

El coste de este codificador rotativo es muy bajo. Cuesta alrededor de $ 1.5.

Puede obtenerlo aquí ▶

Paso 4: Construyendo el Proyecto

Ahora conectemos todas las partes juntas. Antes de construir este proyecto, si no ha utilizado un codificador rotatorio en el pasado, lo invito a que vea el tutorial que preparé sobre los codificadores rotatorios. Le ayudará a comprender cómo funcionan los codificadores rotatorios y usted ganará algo de experiencia con ellos. Este video se adjunta aquí.

He colocado la pantalla en una pequeña placa de pan como esta. Primero conectemos la pantalla. El primer pin de la pantalla que se restablece va al pin digital 3 del Arduino Uno, el segundo pin al pin digital 4, el tercer pin al pin digital 5, el cuarto pin al pin digital 11 y el quinto pin al digital pin 13. El siguiente pin es Vcc. Conectamos Vcc al riel positivo de la placa de pruebas, y el riel positivo de la placa de pruebas a la salida de 3.3 V del Arduino. El siguiente pin es Backlight para la pantalla. Como queremos controlarlo a través del software, lo conectamos al pin digital 7. El último pin es GND. Conectamos GND al riel negativo del tablero, y el riel negativo del tablero al Arduino GND.

Ahora todo lo que tenemos que hacer es conectar el codificador rotatorio. El primer pin es GND y lo conectamos al riel negativo de la placa de pruebas. El siguiente pin es Vcc y lo conectamos al riel positivo de la placa de pruebas. El siguiente pin es SW y lo conectamos al Pin analógico 2. El siguiente pin se llama DT y lo conectamos al Pin analógico 1. Por último, el pin CLK está conectado al Pin analógico 0. Puede encontrar el diagrama esquemático de este proyecto en La descripción del video a continuación.

Ahora estamos listos para impulsar el proyecto. Como puede ver, el proyecto funciona bien y el menú funciona como se esperaba. Genial, ahora veamos el software del proyecto.

Paso 5: El Código del Proyecto

En este proyecto utilizamos 4 bibliotecas. Utilizamos dos bibliotecas para la pantalla y dos para el codificador rotatorio.

1. Adafruit GFX:
2. Nokia 5110:
3. Biblioteca de codificadores:
4. Biblioteca de TimerOne:

Al principio vamos a echar un vistazo a la función drawMenu. Esta función es responsable de dibujar el menú en la pantalla. Esta función se llama cada pocos milisegundos, por lo que si hay un cambio en el menú, esta función es responsable de actualizar el menú en la pantalla.

int menuitem = 1;

marco int = 1; página int = 1; int lastMenuItem = 1;

También hay 3 variables globales muy importantes, la página variable, el menuitem variable y el marco variable. La página variable recuerda qué pantalla de IU se muestra en la pantalla. Por lo tanto, si la variable de la página es 1, estamos en la pantalla principal de la interfaz de usuario, y si la variable es 2, estamos en la pantalla de la interfaz de usuario secundaria donde establecemos el valor en una variable. El elemento de menú recuerda el elemento de menú seleccionado. Por lo tanto, si su valor es 1, se selecciona el primer elemento del menú, por lo que la función drawMenu debe dibujar este elemento del menú como negro con letras blancas. Si el elemento del menú es 2, se selecciona el segundo elemento del menú y así sucesivamente. La variable de marco, recuerda qué parte del menú se muestra en la pantalla. Dado que el menú que hemos creado contiene 6 elementos y solo podemos mostrar 3 de ellos a la vez, necesitamos saber qué elementos se muestran en la pantalla. La variable frame, nos dice exactamente esto. Si la variable de marco tiene el valor de 1, mostramos los primeros tres elementos del menú, si es 2, mostramos los elementos 2,3,4 y así sucesivamente.

Traté de hacer que el código sea lo más fácil de modificar, así que he creado algunas variables globales que contienen los nombres de los elementos del menú. De esta manera, puede crear sus propios menús fácilmente sin buscar en el código.

Cadena menuItem1 = "Contraste";

Cadena menuItem2 = "Volumen"; Cadena menuItem3 = "Idioma"; Cadena menuItem4 = "Dificultad"; String menuItem5 = "Light: ON"; Cadena menuItem6 = "Restablecer";

luz de fondo booleana = verdadera; contraste de int = 60; volumen de int = 50;

Lenguaje de cadena 3 = {"EN", "ES", "EL"}; int selectedLanguage = 0;

Dificultad de la cuerda 2 = {"EASY", "HARD"}; int selectedDifficulty = 0;

Al principio inicializamos todas las variables globales que se necesitan en el código. A continuación inicializamos la pantalla. En la función de bucle, al principio llamamos a la función drawMenu para dibujar el menú en la pantalla. Luego leemos el valor del codificador rotatorio y verificamos si se presiona el botón. Por ejemplo, si estamos en la pantalla principal de la interfaz de usuario y se selecciona el primer elemento del menú, si el valor del codificador rotatorio ha aumentado, la variable menuitem aumenta y en el siguiente bucle la función drawMenu dibujará el segundo elemento del menú como se seleccionó. Si ahora presionamos el botón del codificador rotatorio, navegamos a la segunda página, donde establecemos el valor de la variable. Nuevamente usando el codificador rotatorio podemos aumentar o disminuir el valor de la variable. Si presionamos el botón, regresamos a la página del menú principal y la variable de la página disminuye.

Esa es la idea básica detrás de este menú. Seguimos el mismo procedimiento para todos los elementos de menú y páginas. El código es complejo, tiene más de 400 líneas. Parece complicado, pero si lo intentas por ti mismo, lo entenderás más fácilmente y podrás cambiarlo, expandirlo y usarlo en tus propios proyectos. Como siempre podéis encontrar el código adjunto aquí.

Paso 6: Probando el Proyecto

Si cargamos el código, podemos ver que el proyecto está funcionando como se esperaba. Podemos navegar el menú hacia arriba y hacia abajo usando el eje y podemos seleccionar cualquier elemento del menú presionando el botón del codificador rotatorio. ¡Cuan genial es eso!

Ahora que sabemos cómo crear menús para las pantallas LCD Nokia 5110, podemos agregar más funciones a nuestros proyectos y hacerlos más fáciles de usar. Sin embargo, este sencillo menú que construimos hoy puede mejorarse. Podríamos usar interrupciones en lugar de verificar los estados de los botones todo el tiempo. De esta manera podemos reducir el consumo de energía del proyecto y hacer que el código sea más limpio. Prepararé un video sobre interrupciones pronto, así que estad atentos. Me encantaría escuchar su opinión sobre este proyecto de menú.¿Le resulta útil y planea usar un menú en cualquiera de sus proyectos? Por favor, publique sus pensamientos e ideas a continuación, gracias!