▷ #ESP32 - Display OLED 128x64
⭐⭐⭐⭐⭐ #ESP32 - Display OLED 128x64
Esta entrada muestra como utilizar la pantalla OLED 128x64 pixeles I2C con ESP32 utilizando Arduino IDE. Desde escribir texto hasta diferentes tipos de graficas.
CONEXIONES:
Al utilizar una comunicación I2C solo necesitaremos de dos cables para realizar la respectiva comunicación, además de los dos de alimentación VCV y GND. Danto un total de solo 4 cables, los cuales deben ser conectados de la siguiente manera a nuestra placa ESP32.
Para nuestros ejemplos utilizaremos un ESP32 feather como vemos en el PINOUT del disipativo, lo debemos conectar a los pines D22 y D23.
Revisar los datasheet de sus respectivas placas ESP32 para conocer cuales son sus pines I2C.
LIBRERIAS:
Para utilizar nuestra pantalla OLED necesitaremos un par de librerías, las cuales instalaremos de la siguiente manera:
Ingresamos a Arduino IDE -> Sketch -> Include Library -> Manage Libraries
Escribimos SSD1306 en el buscador, seleccionamos la librería llamada Adafruit SSD1306 y la instalamos:
Una vez instalada dicha librería procedemos a escribir en el buscador GFX, seleccionamos la librería llamada Adafruit GFX Library y la instalamos:
TEST DISPLAY:
Para verificar la conexión y el estado de nuestra pantalla cargaremos el siguiente código, en donde podremos visualizar como la pantalla parpadea. Aquí podremos darnos cuenta si alguno parte del OLED esta quemada o fallando.
PROGRAMACION - CONFIGURACION DISPLAY:
Utilizando el TEST, explicaremos como programar y utilizar nuestro Display OLED
Incluimos las librerías que utilizaremos mas adelante, para esto debemos haberlas instalado previamente:
En esta sección definiremos las características de nuestro display. Existen varias versiones de display por lo que tenemos que definir cual es el nuestro comenzando por los pixeles. Colocamos la versión 128x64, en caso que consideramos un modulo diferente, solo bastaría con cambiar estas variables y se adaptaría a la nueva pantalla.
Al utilizar una comunicación I2C debemos definir la dirección de nuestra pantalla, por defecto todas vienen con 0x3C, y luego creamos una variable con la estructura Adafruit_SSD1306 pasando como parámetros toda las las características de nuestra pantalla. Cabe mencionar que podemos cambiar la dirección de nuestra pantalla, y esto puede ser de mucha utilidad cuando queremos utilizar mas de una. Aprovechando las capacidades del I2C podemos colocar varias pantallas y diferenciándolas por su dirección, para estos casos solo bastaría repetir estas líneas de código con las diferentes direcciones, eso si, recordar que cada una debe tener un nombre diferente.
 |
| Ejemplo de varios display conectados. |
Y para terminar con la configuración tenemos que inicializar las pantallas, con la función display.begin
a la cual debemos pasar nuestra variable display creada en el paso anterior, con su respectiva dirección. Si tuviéramos mas pantallas debemos inicializarlas todas aquí. Por ultimo para tener una confirmación visual le colocamos una condicional If que nos mostrara un error por Serial si no se logra conectar la pantalla, con un for infinito para que la ejecución no avance.
Con esto nuestra pantalla para estaría funcionando
PROGRAMACION - USO DISPLAY:
Una vez configurado nuestro Display OLED ya podemos empezar a dibujar en el, para ello tenemos que conocer dos funciones importantes que la utilizaremos siempre.
.clearDisplay() esta función como su nombre lo indica, permite limpiar toda la pantalla del dispositivo, es de utilidad cuando queremos mostrar nueva información, debido que a menos que limpiemos la pantalla, o reiniciemos el dispositivo, todo lo ingresado a la pantalla permanecerá allí.
.display() esta función permite actualizar la pantalla, cada vez que agreguemos elementos o limpiemos la pantalla, nada de eso se visualizara en el display hasta que se ejecute dicha función.
PROGRAMACION - DIBUJAR GRAFICAS PRIMITIVAS
Nuestra librería cuenta con funciones que nos permiten dibujar ciertas graficas en nuestro OLED, a continuación veremos unas de ellas. Estas funciones deben ser llamadas desde nuestra estructura asignada desde Adafruit_SSD1306, para nuestro caso seria display.
DIBUJAR PIXEL:
display.drawPixel(Xo, Yo, color);
uint16_t Xo; //Posición inicial referido al eje de las X
uint16_t Yo; //Posición inicial referido al eje de las Y
uint16_t color; //Color de la figura
display.drawPixel(20, 30, WHITE);
DIBUJAR LINEA:
display.drawPixel(Xo, Yo, color);
uint16_t X0; //Posición inicial referido al eje de las X
uint16_t Y0; //Posición inicial referido al eje de las Y
uint16_t X1; //Posición final referido al eje de las X
uint16_t Y1; //Posición final referido al eje de las Y
uint16_t color; //Color de la figura
display.drawLine(20, 15, 52, 48, WHITE);
DIBUJAR CIRCULO:
display.drawCircle(Xo, Yo, radius, color)
display.fillCircle(Xo, Yo, radius, color)
uint16_t Xo; //Posición central referido al eje de las X
uint16_t Yo; //Posición central referido al eje de las Y
uint16_t radius; //Radio de la figura
uint16_t color; //Color de la figura
display.drawCircle(64, 32, 20, WHITE);
display.fillCircle(64, 32, 20, WHITE);
DIBUJAR RECTANGULO:
display.drawRect(Xo, Yo, height, width, color)
display.fillRect(Xo, Yo, height, width, color)
uint16_t X; //Posición en el eje X de la esquina superior izquierda
uint16_t Y; //Posición en el eje Y de la esquina superior izquierda
uint16_t height; //Alto de la figura
uint16_t width; //Largo de la figura
uint16_t color; //Color de la figura
display.drawRect(10, 20, 55, 15 , WHITE);
display.fillRect(10, 20, 55, 15 , WHITE);
DIBUJAR RECTANGULO REDONDEADO:
display.drawRoundRect(Xo, Yo, height, width, radius, color)
display.fillRoundRect(Xo, Yo, height, width, radius, color)
uint16_t X; //Posición en el eje X de la esquina superior izquierda
uint16_t Y; //Posición en el eje Y de la esquina superior izquierda
uint16_t height; //Alto de la figura
uint16_t width; //Largo de la figura
uint16_t radius; //Radio de las esquinas
uint16_t color; //Color de la figura
display.drawRoundRect(10, 20, 55, 15, 5, WHITE);
display.fillRoundRect(10, 20, 55, 15, 5, WHITE);
DIBUJAR TRIANGULO:
display.drawTriangle(X0, Y0, X1, Y1, X2, Y2, color);
display.fillTriangle(X0, Y0, X1, Y1, X2, Y2, color);
uint16_t X0; //Punto 0 en el eje X
uint16_t Y0; //Punto 0 en el eje Y
uint16_t X1; //Punto 1 en el eje X
uint16_t Y1; //Punto 1 en el eje Y
uint16_t X2; //Punto 2 en el eje X
uint16_t Y2; //Punto 2 en el eje Y
uint16_t color; //Color de la figura
display.fillTriangle(10, 45, 35, 5, 100 , 30 , WHITE);
DIBUJAR TEXTO:
El texto en nuestro display esta conformado por un punto inicial en donde se empezara a dibujar el texto, una relación de pixeles, siendo la inicial de 5 para ancho y 7 para alto. A continuación se presentan funciones para configurar estos parámetros antes de dibujar el texto.
display.setCursor(Xo, Yo); //Posición de donde se iniciara a escribir el texto
display.setTextSize(N); //Se define la escala del texto que se utilizara, siendo N numero que se multiplicara por el tamaño inicial de las letras.
display.setTextColor(SSD1306_WHITE); // Se define el color del texto a utilizar.
display.cp437(True); //Se activa la fuente completa de 256 caracteres
Luego de configurar los parámetros podemos dibujar con las siguientes funciones.
display.write("Hola");
Se dibuja una cadena char.
display.print("Hola");
Se dibuja un texto con las mismas propiedades del Serial.print tales como aceptar diferente tipos de datos, al momento de dibujar otro texto automáticamente lo ubica alado de este.
display.println("Hola");
Se dibuja un texto con las mismas propiedades del Serial.println tales como aceptar diferente tipos de datos, se aplica un salto de linea automático.
Para las funciones .print y .println si al dibujar el texto, este se pasa del limite, automáticamente aplica un salto de linéa y lo dibuja abajo.
EJEMPLO #1 - ANIMACION CON FIGURAS:
EJEMPLO #2 - TEXTO VARIABLE:
BIBLIOGRAFIA:
[1] | P. Burgess, "ADAFRUIT," 29 Julio 2012. [Online]. Available: https://learn.adafruit.com/adafruit-gfx-graphics-library/graphics-primitives. [Accessed 29 Junio 2021].
|
Comentarios
Publicar un comentario