arrow_back Volver
Inicio keyboard_arrow_right Artículos keyboard_arrow_right Artículo

Pantalla LCD Nokia 5110 con Arduino

José Augusto Ruiz Clemente

Frontend Developer

av_timer 7 Min. de lectura

remove_red_eye 36311 visitas

calendar_today 18 Enero 2016

En los proyectos de electrónica o mecatrónica es muy común que demostramos a través de leds, motores, display, zumadores y entre otros, alguna acción o que nos indique si algo está funcionando correctamente o surgió un error, cual sea el caso indicamos que algo pasa y con esto también hacemos más llamativo nuestros proyectos.

Uno de los componentes que más se utiliza son las pantallas LCD que sin ninguna duda hacen que las acciones de nuestros proyectos sean mejor entendidas, pero existen una gran variedad de estas en el mercado y para este articulo haremos uso de una pantalla muy cómoda en su programación y a muy bajo costo y es la “Pantalla NOKIA LCD 5110”, con esta LCD no solo podemos imprimir textos, si no que también hacer gráficos y añadir imágenes.

¿Qué materiales necesitamos?

  1. Pantalla NOKIA LCD 5110
  2. Arduino (Uno, Leonardo, Nano, o cualquier Arduino que tenga disponible)
  3. Una resistencia de 220 ohmios o de 330 ohmios .
  4. 8 Cables Dupont Macho a Macho

¿Qué necesito para empezar a programar mi pantalla en Arduino?

Primero que nada necesitaras de una librería, la cual puedes descargar en el siguiente enlaces http://www.rinkydinkelectronics.com/library.php?id=47 esta librería no solo te dará la oportunidad de escribir textos en la Pantalla, también podrás hacer gráficos que es su principal objetivo y añadir imágenes.

Si no sabes cómo instalar una librería en Arduino no te preocupes es algo muy sencillo:

Instalar librería Arduino

  1. Descargar la librería que deseas utilizar y descomprímela en el escritorio o en el lugar que desees
  2. Después de descomprimir el archivo, lo que tienes que hacer es copiar la carpeta que te genere e irte a mi “Equipo/Disco Local C/Archivos de programa(x86)/Arduino/Libraries y pegar ahí la carpeta.
  3. Ya con esto tendremos instalada nuestra librería.

A continuación vamos a descargar una aplicación llamada “LCD Assistant” que nos servirá cuando queramos insertar una imagen en nuestra pantalla la puedes descargar en el siguiente enlace: http://en.radzio.dxp.pl/bitmap_converter/

Esquema de conexión

Advertencia. Esta pantalla se alimenta con 3.3 volts

Mostrar texto en la pantalla

#include <LCD5110_Graph.h> //Declaramos la libreria LCD5110_Graph

LCD5110 myGLCD(7,6,5,4,3); // Indicamos los pines en donde estara conectada nuestra pantalla 

extern uint8_t SmallFont[]; // Indicamos el tipo de fuente SmallFont
extern uint8_t TinyFont []; // Indicamos el tipo de fuente TinyFont


void setup() {
  myGLCD.InitLCD(); //Se define el valor del contraste en este caso lo dejaremos el que viene por DEFAULT 
}

void loop() {

  myGLCD.clrScr(); //Limpiamos la pantalla 
  myGLCD.setFont(SmallFont); //Decimos el tipo de fuente "SmallFont"
  myGLCD.print("Visita",CENTER,0); //Escribimos un texto que sera colocado en el Centro en X y en Y su posicion sera 0

  myGLCD.setFont(TinyFont); //Decimos el tipo de fuente "TinyFont"
  myGLCD.print("www.codigofacilito.com",CENTER,20); //Escribimos un texto que sera colocado en el CENTRO en X y en Y su posicion sera 10
  myGLCD.update(); /**NOTA IMPORTANTE
Después de declarar todo lo que se quiera mostrar en pantalla es necesario agregar el siguiente comando, ya que es el que manda la instruccion para visualizarlo en la pantalla*/


  delay(2000); //Indicamos que habra un tiempo de 2 segundos 

}

El código anterior solamente nos mostrara un sencillo texto, como ya se habrán dado cuenta pero ahora si deseamos incluir una imagen, primero tendríamos que modificar esa imagen para que sea compatible con la pantalla ¿Cómo se hace esto?, bueno es algo muy sencillo.

Mostrar imagen en la pantalla

Primero advierto que no se puede meter cualquier imagen ya que en el proceso de transformación esta sufrirá cambios así que les sugiero que su imagen no tenga algún efecto o brillo porque eso afectara en mucho la imagen y también que su fondo sea totalmente blanco.

Dicho lo anterior podemos comenzar, ya que tengan lista su imagen habrán el programa Paint y en el abren su imagen.

Ahora tenemos que darle un nuevo tamaño a la imagen, esto se logra simplemente dando click en “cambiar tamaño” y en la ventana que nos aparecerá seleccionamos pixeles y desmarcamos la opción que dice “Mantener relación de aspecto” y le damos medidas no mayor en Horizontal: 81 y Vertical: 47, si nuestras imagen no se pasa de las medidas que acabamos de decir entonces si podemos mostrar esa imagen en la pantalla.

Ya que tengas tu imagen con las medias cambiadas, ahora solo queda guardar tu nueva imagen pero aquí hay un detalle la tienes que guardar como una imagen tipo “monocromático” y nos quedara de la siguiente manera.

Ahora que ya tengamos lista nuestra imagen y transformada, lo único que nos queda por hacer será en abrir LCD Asistant y cargamos la imagen hecha en Paint

Para guardarla hacemos click en File > Save Output y seleccionamos el nombre agregando la extensión .c al final.

Ahora si podemos comenzar a escribir el código final

Código imagen

#include <LCD5110_Graph.h> //Declaramos la libreria LCD5110_Graph

LCD5110 myGLCD(7,6,5,4,3); // Indicamos los pines en donde estara conectada nuestra pantalla 

extern uint8_t SmallFont[]; // Indicamos el tipo de fuente SmallFont
extern uint8_t TinyFont []; // Indicamos el tipo de fuente TinyFont
extern uint8_t codigo_facilito_logo []; //Declaramos que haremos uso de una imagen y escribimos su respectivo nombre 

void setup() {
  myGLCD.InitLCD(); //Se define el valor del contraste en este caso lo dejaremos el que viene por DEFAULT 
}

void loop() {
  myGLCD.clrScr(); //Limpiamos la pantalla 
  myGLCD.drawBitmap(0, 0, codigo_facilito_logo, 80, 45); //Hacemos el llamado a nuestra imagen 
  myGLCD.update();
  delay(4000); //Indicamos que habra un tiempo de 2 segundos 

  myGLCD.clrScr(); //Limpiamos la pantalla 
  myGLCD.setFont(SmallFont); //Decimos el tipo de fuente "SmallFont"
  myGLCD.print("Visita",CENTER,0); //Escribimos un texto que sera colocado en el Centro en X y en Y su posicion sera 0

  myGLCD.setFont(TinyFont); //Decimos el tipo de fuente "TinyFont"
  myGLCD.print("www.codigofacilito.com",CENTER,20); //Escribimos un texto que sera colocado en el CENTRO en X y en Y su posicion sera 10
  myGLCD.update(); /**NOTA IMPORTANTE
                                        Después de declarar todo lo que se quiera mostrar en pantalla es necesario agregar el siguiente comando, ya que es el que manda la instruccion para visualizarlo en la pantalla*/

  delay(2000); //Indicamos que habra un tiempo de 2 segundos 

}

Ahora lo único que falta es agregar a arduino nuestra imagen que guardamos como .c.

Para que ustedes puedan agregar esa imagen simplemente dan click en “programa” y seleccionan “Añadir fichero” seleccionan su imagen y les aparece un código como este.

const unsigned char codigo_facilito_logo [] = {
0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00,
0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00,
0x00, 0x00, 0x80, 0x80, 0xC0, 0xC0, 0xC0, 0xE0, 0xE0, 0xE0, 0xE0, 0xF0, 0xF0, 0xF0, 0xF0, 0xF0,
0xF8, 0xF8, 0xF8, 0xF8, 0xF8, 0xF8, 0xF8, 0xF8, 0xFC, 0xFC, 0xFC, 0xFC, 0xFC, 0xFC, 0xFC, 0xFC,
0xFC, 0xF8, 0xF8, 0xF8, 0xF8, 0xF8, 0xF8, 0xF8, 0xF8, 0xF8, 0xF8, 0xF0, 0xF0, 0xF0, 0xF0, 0xF0,
0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00,
0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x10, 0x08, 0x04, 0x02, 0x00, 0x00,
0x01, 0x01, 0x00, 0x00, 0x00, 0x00, 0x81, 0xC1, 0xC1, 0xC1, 0xC3, 0x83, 0x07, 0x0F, 0x7F, 0xFF,
0xFF, 0xFF, 0x7F, 0x7F, 0x7F, 0x7F, 0xFF, 0xFF, 0xFF, 0xFF, 0xFF, 0x7F, 0x3F, 0x3F, 0x1F, 0x1F,
0x1F, 0x1F, 0x1F, 0x1F, 0x0F, 0x8F, 0xCF, 0xEF, 0xFF, 0xFF, 0xFF, 0xFF, 0xFF, 0xFF, 0xFF, 0xFF,
0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00,
0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x01, 0x00, 0x00, 0x00, 0xB0, 0xB0,
0xB0, 0xF0, 0xF0, 0xF0, 0xF0, 0xF0, 0xF9, 0xFB, 0xFB, 0xFB, 0xFB, 0xFB, 0xFC, 0xFC, 0xFF, 0xFF,
0xFF, 0xFF, 0xFF, 0xFF, 0xFE, 0xFE, 0xFC, 0xFC, 0xFC, 0xFC, 0xFC, 0xFC, 0xFC, 0xFC, 0x7C, 0x7C,
0x3C, 0x3E, 0x3E, 0x3E, 0x3F, 0x3F, 0x1F, 0x1F, 0x1F, 0x1F, 0x3F, 0xFF, 0xFF, 0xFF, 0xFF, 0xFF,
0x00, 0x00, 0x00, 0x00, 0x30, 0x78, 0x78, 0x78, 0x78, 0x78, 0x78, 0x78, 0xF8, 0xF8, 0xF8, 0xF8,
0xF8, 0xF8, 0xF8, 0xF8, 0xFC, 0xFC, 0xFC, 0xFC, 0xFE, 0xFE, 0xFE, 0xFF, 0xFF, 0xFF, 0xFF, 0xFF,
0xFF, 0xFF, 0xFF, 0xFF, 0xFF, 0xFF, 0xFF, 0xFF, 0xFF, 0xFF, 0xFF, 0xFF, 0xFF, 0xFF, 0xFF, 0xFF,
0xFF, 0x7F, 0x7F, 0x3F, 0x1F, 0x1F, 0x1F, 0x17, 0x07, 0x1F, 0x33, 0x02, 0x04, 0x05, 0x07, 0x04,
0x00, 0x00, 0x00, 0x00, 0x00, 0x80, 0x80, 0xC0, 0xC0, 0xE0, 0xF0, 0xFE, 0xFF, 0xFF, 0xFF, 0xFF,
0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x01,
0x01, 0x01, 0x01, 0x07, 0x19, 0x31, 0x01, 0x41, 0x01, 0x01, 0x03, 0x03, 0x03, 0x03, 0x03, 0x03,
0x07, 0x07, 0x0B, 0x0B, 0x13, 0x1B, 0x1F, 0x03, 0x03, 0x03, 0x03, 0x03, 0x01, 0x81, 0x81, 0x80,
0x80, 0xC0, 0x40, 0x40, 0x20, 0x20, 0x10, 0x18, 0x08, 0x0C, 0x04, 0x04, 0x06, 0x02, 0x02, 0x03,
0x03, 0x01, 0x01, 0x01, 0x03, 0x03, 0x03, 0x07, 0x07, 0x0F, 0x0F, 0x1F, 0x3F, 0x3F, 0x7F, 0xFF,
0x80, 0x60, 0x40, 0xE0, 0x20, 0xA0, 0xA0, 0xC0, 0x40, 0x20, 0xE0, 0xE0, 0xE0, 0x20, 0x00, 0x00,
0x40, 0x00, 0x40, 0x60, 0x60, 0x80, 0x40, 0x20, 0x00, 0xE0, 0x80, 0xD8, 0x0C, 0xC3, 0xE3, 0x02,
0xA2, 0x02, 0x62, 0xA2, 0x82, 0xA2, 0xC3, 0x83, 0xA3, 0x61, 0xA1, 0xA1, 0x81, 0x81, 0x21, 0xA0,
0xC0, 0x80, 
};

Todo ese código es su imagen pero si ustedes cargan el programan les surgirá un error lo que tiene que hacer es cambiar la siguiente línea.

const unsigned char codigo_facilito_logo []

Por

const uint8_t codigo_facilito_logo [] PROGMEM 

Y listo ya podrán compilar sin ningún error.

Espero que les haya gustado este artículo y gracias a codigofacilito por dejarme compartirlo

Muchas gracias.

Aumenta tu productividad con GitHub Copilot

  • done Curso GRATUITO
  • done Regístrate antes del 31 de Marzo
  • done Obtén una ventaja competitiva
  • done Aprovecha la IA a tu favor
Más información