Menú Arduino en un Nokia 5110 Lcd con un codificador rotatorio

Acerca de este proyecto

Queridos amigos, ¡bienvenidos a otro tutorial! En este video, aprenderemos cómo crear nuestro propio menú para la popular pantalla LCD Nokia 5110, con el fin de hacer 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 volvemos a pulsar el botón del codificador rotatorio, volvemos 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 de la pantalla cambiarán en consecuencia. Mire el video adjunto para ver exactamente cómo funciona este menú. Por supuesto, puede modificarlo para crear sus propios menús más complejos si lo desea.

Veamos ahora cómo construir este proyecto.

Paso 1:obtenga todas las piezas

Las partes necesarias para construir este proyecto son las siguientes:

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

• Una pantalla LCD Nokia 5110 ▶ http://educ8s.tv/part/NOKIA5110

• Un codificador rotatorio ▶ http://educ8s.tv/part/RotaryEncoder

• Una pequeña tabla de brecha ▶ http://educ8s.tv/part/SmallBreadboard

• Algunos cables ▶ http://educ8s.tv/part/Wires

El costo del proyecto es muy bajo, menos de $ 10. Puede encontrar enlaces para todas las partes que utilizo 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 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 consumo de energía impresionante. Utiliza solo 0,4 mA 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 por las que esta pantalla es mi favorita. 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 necesita conectar 8 cables.

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

Puede obtenerlo aquí:▶ http://educ8s.tv/part/NOKIA5110

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 rotativos se utilizan en muchas aplicaciones que requieren una rotación ilimitada del eje preciso, incluidos controles industriales, robótica, lentes fotográficos de propósito especial, 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 incrustado y para que funcione solo necesitamos conectar 5 cables. He preparado un tutorial detallado sobre cómo utilizar un codificador rotatorio. Puede encontrar este video adjunto aquí.

El costo de este codificador rotatorio es muy bajo. Cuesta alrededor de $ 1,5.

Puede obtenerlo aquí ▶ http://educ8s.tv/part/RotaryEncoder

Paso 4:creación del proyecto

Conectemos ahora todas las partes. Antes de crear este proyecto, si no ha utilizado un codificador rotatorio en el pasado, le animo a que vea el tutorial que he preparado sobre codificadores rotativos. Le ayudará a comprender cómo funcionan los codificadores rotativos y obtendrá algo de experiencia con ellos. Este video se adjunta aquí.

He colocado la pantalla en una pequeña placa de pruebas como esta. Primero conectemos la pantalla. El primer pin de la pantalla que es Reset va al pin digital 3 del Arduino Uno, el segundo pin va al pin digital 4, el tercer pin va al pin digital 5, el cuarto pin al pin digital 11 y el quinto pin al pin 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 Luz de fondo 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 de la placa de pruebas y el riel negativo de la placa de pruebas a 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. El siguiente pin es Vcc y lo conectamos al riel positivo de la placa. 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 potenciar el proyecto. Como puede ver, el proyecto funciona bien y el menú funciona como se esperaba. Genial, veamos ahora el software del proyecto.

Paso 5:el código del proyecto

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

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

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

• Biblioteca de codificadores:https://github.com/0xPIT/encoder/tree/arduino

• Biblioteca de TimerOne:https://github.com/PaulStoffregen/TimerOne

Primero 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; int frame =1; int page =1; int lastMenuItem =1;  

También hay 3 variables globales muy importantes, la página de variables, el elemento del menú variable y el marco variable. La página de variables recuerda qué pantalla de IU se muestra en la pantalla. Entonces, si la variable de la página es 1, estamos en la pantalla de UI principal, y si la variable es 2, estamos en la pantalla de UI secundaria donde establecemos el valor de una variable. El elemento de menú recuerda el elemento de menú seleccionado. Entonces, 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ú en 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 de marco 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 fuera lo más fácil posible 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.

  String menuItem1 ="Contraste"; String menuItem2 ="Volumen"; String menuItem3 ="Idioma"; String menuItem4 ="Dificultad"; String menuItem5 ="Luz:ON"; String menuItem6 ="Reset"; retroiluminación booleana =true; int contrast =60; int volume =50; String language [3] ={"EN", "ES", "EL"}; int selectedLanguage =0; Dificultad de las cadenas [2] ={"EASY" , "DIFÍCIL"}; int Dificultad seleccionada =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 loop, 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 el botón está presionado. Por ejemplo, si estamos en la pantalla principal de la IU y se selecciona el primer elemento del menú, si el valor del codificador rotatorio ha aumentado, la variable del elemento del menú aumenta y en el siguiente ciclo 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, navegamos de regreso a la página del menú principal y la variable de página disminuye.

Esa es la idea básica detrás de este menú. Seguimos el mismo procedimiento para todos los elementos del menú y las páginas. El código es complejo, tiene más de 400 líneas. Parece complicado pero si lo pruebas tú mismo lo vas a entender más fácilmente y podrás cambiarlo, expandirlo y utilizarlo en tus propios proyectos. Como siempre, puede encontrar el código adjunto aquí.

Paso 6:prueba del proyecto

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

Ahora que sabemos cómo crear menús para las pantallas LCD del Nokia 5110, podemos agregar más funciones a nuestros proyectos y hacerlos más fáciles de usar. Sin embargo, este menú simple que creamos hoy se puede mejorar. Podríamos usar interrupciones en lugar de verificar los estados de los botones todo el tiempo. De esta forma podemos reducir el consumo de energía del proyecto y hacer que el código sea más limpio. Prepararé un video sobre las interrupciones pronto, así que estad atentos. Me encantaría escuchar tu opinión sobre este proyecto de menú. ¿Te resulta útil y planeas utilizar un menú en alguno de tus proyectos? Publique sus pensamientos e ideas a continuación, ¡gracias!

 String menuItem1 ="Contraste"; String menuItem2 ="Volumen"; String menuItem3 ="Idioma"; String menuItem4 ="Dificultad"; String menuItem5 ="Luz:ON"; String menuItem6 ="Reset"; retroiluminación booleana =true; int contrast =60; int volume =50; String language [3] ={"EN", "ES", "EL"}; int selectedLanguage =0; Dificultad de string [2] ={"FÁCIL", "DIFÍCIL "}; int Dificultad seleccionada =0;