1.47 inch LCD SPI Display

Introducción

Esta pantalla LCD de 1.47 pulgadas es una pantalla serial con esquinas redondeadas. Ofrece una resolución superior de 172×320 píxeles y color RGB de 262K, proporcionando una representación de imagen nítida y colorida. La razón de diseño detrás de esta pantalla es ofrecer una solución visual simple y de alta calidad para cubrir las necesidades de diversos proyectos DIY o de Internet de las Cosas (IoT).

Adopta una interfaz de 8 pines, compuesta por 4 pines para alimentación y retroiluminación, y 4 pines SPI que se comunican con el controlador ST7789V3. Hemos preparado la biblioteca y ejemplos para ayudarte a comenzar rápida y cómodamente con tu desarrollo.

Especificaciones

Voltaje de operación	3.3V / 5V	Resolución	172 × 320 píxeles
Interfaz de comunicación	SPI de 4 hilos	Tamaño de pantalla	17.39 × 32.35mm
Tipo de panel	IPS	Paso de píxel	0.0337 × 0.1011mm
Controlador	ST7789V3	Dimensiones totales	22.0 × 38.5mm

Dimensiones Físicas

Características

Resolución de 172×320, 262K colores RGB, imagen clara y colorida
Interfaz SPI, minimiza el uso de pines, compatible con XIAO / Raspberry Pi / Arduino / STM32
Incluye recursos de desarrollo (ejemplos para XIAO / Raspberry Pi / Arduino / STM32)

Ideas de Aplicación

Reloj o Banda: Esta pantalla puede ensamblarse con el microcontrolador XIAO para crear un reloj o banda, mostrando fecha e información con alta resolución y colores. Su tamaño compacto la hace ideal para prototipos rápidos.
Pantalla para información de PC: Puedes conectar esta pantalla a una placa convertidora y usarla para mostrar información como temperatura y velocidad del ventilador. Sus orificios permiten fijarla fácilmente en el gabinete de la PC.

Descripción de Hardware¿

Primeros Pasos

Preparación de Hardware

Aquí te mostraremos cómo utilizar la placa XIAO nRF52840, que cuenta con IMU de 6 ejes, Bluetooth y micrófono PDM. Esta placa junto con la pantalla son los componentes clave para construir un reloj digital.

XIAO nRF52840	Pantalla LCD SPI de 1.47"

Consigue uno ahora 🖱️	Consigue uno ahora 🖱️

Luego, conecta los pines de la pantalla a la placa XIAO nRF52840 de acuerdo con la siguiente tabla:

Pantalla LCD SPI 1.47"	XIAO nRF52840
VCC	3V3
GND	GND
DIN	D10
CLK	D8
CS	D1
DC	D3
RST	D0
BL	D6

Biblioteca Arduino

tip

Si es tu primera vez usando Arduino, te recomendamos visitar: Introducción a Arduino

Basándonos en los ejemplos proporcionados por Waveshare, hemos escrito una biblioteca Arduino compatible con toda la serie XIAO. Puedes acceder directamente a su repositorio en GitHub mediante el botón siguiente:

Download the Library

Funciones

Antes de comenzar a desarrollar un sketch, revisemos las funciones disponibles en la biblioteca.

void Init(uint8_t cs = CS_PIN, uint8_t dc = DC_PIN, uint8_t rst = RST_PIN, uint8_t bl = BL_PIN) —— Inicialización común de registros.

Parámetros de entrada
- cs: Define el pin de selección de chip (chip select), el valor por defecto es D1 de la placa XIAO.
- dc: Define el pin DC, valor por defecto D3.
- rst: Define el pin de reinicio, valor por defecto D0.
- bl: Pin para controlar la retroiluminación, por defecto es D6.
void SetBacklight(uint16_t Value) —— Ajuste de la retroiluminación.

Parámetros
- Value: Intensidad de retroiluminación, de 0 a 255.
void Reset(void) —— Reinicio por hardware.
void SetCursor(uint16_t Xstart, uint16_t Ystart, uint16_t Xend, uint16_t Yend) —— Establece la posición del cursor.

Parámetros
- Xstart: Coordenada X inicial.
- Ystart: Coordenada Y inicial.
- Xend: Coordenada X final.
- Yend: Coordenada Y final.
void Clear(uint16_t Color) —— Limpia la pantalla con un color específico.

Parámetros
- Color: Color con el que se desea limpiar toda la pantalla.
void ClearWindow(uint16_t Xstart, uint16_t Ystart, uint16_t Xend, uint16_t Yend, uint16_t color) —— Refresca un área específica con un color determinado.

Parámetros
- Xstart: Coordenada X inicial.
- Ystart: Coordenada Y inicial.
- Xend: Coordenada X final.
- Yend: Coordenada Y final.
- color: Color para rellenar.
void SetWindowColor(uint16_t Xstart, uint16_t Ystart, uint16_t Xend, uint16_t Yend, uint16_t Color) —— Define el color de un área de la pantalla.
void SetUWORD(uint16_t x, uint16_t y, uint16_t Color) —— Dibuja un valor uint16_t en la pantalla.

Parámetros
- x: Coordenada X.
- y: Coordenada Y.
- Color: Color deseado.
void SetRotate(uint16_t Rotate) —— Configura la rotación de la imagen.

Parámetros
- Rotate: ROTATE_0, ROTATE_90, ROTATE_180, ROTATE_270
void SetMirroring(uint8_t mirror) —— Configura el espejo de la imagen.

Parámetros
- mirror: MIRROR_NONE, MIRROR_HORIZONTAL, MIRROR_VERTICAL, MIRROR_ORIGIN
void SetPixel(uint16_t Xpoint, uint16_t Ypoint, uint16_t Color) —— Dibuja un píxel.
void DrawPoint(uint16_t Xpoint, uint16_t Ypoint, uint16_t Color, DOT_PIXEL Dot_Pixel, DOT_STYLE Dot_FillWay) —— Dibuja un punto en (X, Y).

Parámetros
- Dot_Pixel: Tamaño del punto.
- Dot_FillWay: Forma del punto (relleno o contorno).
void DrawLine(uint16_t Xstart, uint16_t Ystart, uint16_t Xend, uint16_t Yend, uint16_t Color, DOT_PIXEL Line_width, LINE_STYLE Line_Style) —— Dibuja una línea de cualquier inclinación.
void DrawRectangle(uint16_t Xstart, uint16_t Ystart, uint16_t Xend, uint16_t Yend, uint16_t Color, DOT_PIXEL Line_width, DRAW_FILL Filled) —— Dibuja un rectángulo.

Parámetros adicionales
- Filled: Si es 1, el rectángulo se rellena. Si es 0, solo se dibuja el contorno.
void DrawCircle(uint16_t X_Center, uint16_t Y_Center, uint16_t Radius, uint16_t Color, DOT_PIXEL Line_width, DRAW_FILL Draw_Fill) —— Dibuja un círculo con el método de 8 puntos.

Parámetros
- Draw_Fill: 1 para círculo relleno, 0 para solo contorno.
void DrawString_EN(int16_t Xstart, int16_t Ystart, const char * pString, sFONT* Font, int16_t Color_Background, int16_t Color_Foreground) —— Muestra una cadena de texto en inglés.

Parámetros
- pString: Cadena de texto a mostrar.
- Font: Puntero a la estructura de fuente.
- Color_Background: Color de fondo.
- Color_Foreground: Color del texto.
void DrawNum(int16_t Xpoint, int16_t Ypoint, int32_t Nummber, sFONT* Font, int16_t Color_Background, int16_t Color_Foreground) —— Muestra un número entero.
void DrawFloatNum(int16_t Xpoint, int16_t Ypoint, double Nummber, int8_t Decimal_Point, sFONT* Font, int16_t Color_Background, int16_t Color_Foreground) —— Muestra un número flotante.

Parámetros
- Decimal_Point: Número de decimales a mostrar.
void DrawImage(const unsigned char *image, int16_t xStart, int16_t yStart, int16_t W_Image, int16_t H_Image) —— Muestra una imagen.

Parámetros
- image: Dirección inicial de los datos de la imagen.
- W_Image: Ancho de la imagen.
- H_Image: Alto de la imagen.

Variables Default

#define RST_PIN D0
#define DC_PIN  D3
#define BL_PIN  D6
#define CS_PIN  D1

#define LCD_WIDTH   172 //LCD width
#define LCD_HEIGHT  320 //LCD height

/**
 * image color
**/
#define WHITE         0xFFFF
#define BLACK         0x0000    
#define BLUE          0x001F  
#define BRED          0XF81F
#define GRED          0XFFE0
#define GBLUE         0X07FF
#define RED           0xF800
#define MAGENTA       0xF81F
#define GREEN         0x07E0
#define CYAN          0x7FFF
#define YELLOW        0xFFE0
#define BROWN         0XBC40 
#define BRRED         0XFC07 
#define GRAY          0X8430 
#define DARKBLUE      0X01CF  
#define LIGHTBLUE     0X7D7C   
#define GRAYBLUE      0X5458 
#define LIGHTGREEN    0X841F 
#define LGRAY         0XC618 
#define LGRAYBLUE     0XA651
#define LBBLUE        0X2B12

/**
 * Display rotate
**/
#define ROTATE_0            0
#define ROTATE_90           90
#define ROTATE_180          180
#define ROTATE_270          270

#define MIRROR_NONE        0x00
#define MIRROR_HORIZONTAL  0x01
#define MIRROR_VERTICAL    0x02
#define MIRROR_ORIGIN      0x03

Instalación

Después de descargar el archivo zip de la librería, abre tu Arduino IDE, haz clic en Sketch > Include Library > Add .ZIP Library. Selecciona el archivo zip que acabas de descargar y, si la instalación fue correcta, verás el mensaje Library added to your libraries en la ventana de notificaciones. Esto significa que la librería se ha instalado exitosamente.

Ejemplo para XIAO

Después de descargar e instalar correctamente la librería, puedes encontrar dos ejemplos en la carpeta de ejemplos: helloworld.ino y bgcolor.ino. El ejemplo bgcolor.ino muestra cómo cambiar el color de fondo; el color rojo está configurado por defecto.

El ejemplo helloworld.ino muestra una animación con el logo de nuestra compañía, e incluye además el efecto de cambio de color de fondo que tiene el ejemplo bgcolor.

#include <st7789v3.h>
#include "SPI.h"
#include "seeed.h"

st7789v3 Display;

void setup() {
  // put your setup code here, to run once:
  Display.SetRotate(270);
  Display.SetMirroring(MIRROR_VERTICAL);
  Display.Init();
  Display.SetBacklight(100);
  Display.Clear(WHITE);
}

void loop() {
  // put your main code here, to run repeatedly:
//  Display.SetPixel(100, 100, RED);
//  Display.DrawPoint(50, 50, YELLOW, DOT_PIXEL_8X8, DOT_FILL_AROUND);

  Display.DrawImage(gImage_seeed, 40, 60, 240, 47);

  Display.DrawLine(40, 50, 65, 50, MAGENTA, DOT_PIXEL_2X2, LINE_STYLE_SOLID);
  Display.DrawLine(40, 55, 80, 55, MAGENTA, DOT_PIXEL_2X2, LINE_STYLE_SOLID);
  
//  Display.DrawRectangle(15, 80, 265, 150, GRAY, DOT_PIXEL_2X2, DRAW_FILL_EMPTY);
  
  Display.DrawCircle(0, 0, 25, BLUE, DOT_PIXEL_2X2, DRAW_FILL_EMPTY);
  Display.DrawCircle(0, 0, 20, BLACK, DOT_PIXEL_2X2, DRAW_FILL_EMPTY);
  Display.DrawCircle(0, 0, 15, RED, DOT_PIXEL_2X2, DRAW_FILL_EMPTY);
  Display.DrawCircle(0, 0, 10, GREEN, DOT_PIXEL_2X2, DRAW_FILL_FULL);

  Display.DrawCircle(320, 0, 25, BLUE, DOT_PIXEL_2X2, DRAW_FILL_EMPTY);
  Display.DrawCircle(320, 0, 20, BLACK, DOT_PIXEL_2X2, DRAW_FILL_EMPTY);
  Display.DrawCircle(320, 0, 15, RED, DOT_PIXEL_2X2, DRAW_FILL_EMPTY);
  Display.DrawCircle(320, 0, 10, GREEN, DOT_PIXEL_2X2, DRAW_FILL_FULL);

  Display.DrawCircle(0, 172, 25, BLUE, DOT_PIXEL_2X2, DRAW_FILL_EMPTY);
  Display.DrawCircle(0, 172, 20, BLACK, DOT_PIXEL_2X2, DRAW_FILL_EMPTY);
  Display.DrawCircle(0, 172, 15, RED, DOT_PIXEL_2X2, DRAW_FILL_EMPTY);
  Display.DrawCircle(0, 172, 10, GREEN, DOT_PIXEL_2X2, DRAW_FILL_FULL);

  Display.DrawCircle(320, 172, 25, BLUE, DOT_PIXEL_2X2, DRAW_FILL_EMPTY);
  Display.DrawCircle(320, 172, 20, BLACK, DOT_PIXEL_2X2, DRAW_FILL_EMPTY);
  Display.DrawCircle(320, 172, 15, RED, DOT_PIXEL_2X2, DRAW_FILL_EMPTY);
  Display.DrawCircle(320, 172, 10, GREEN, DOT_PIXEL_2X2, DRAW_FILL_FULL);

  Display.DrawLine(242, 110, 282, 110, GRAYBLUE, DOT_PIXEL_2X2, LINE_STYLE_SOLID);
  Display.DrawLine(267, 115, 282, 115, GRAYBLUE, DOT_PIXEL_2X2, LINE_STYLE_SOLID);
  
  Display.DrawString_EN(100, 120, "By: Citric", &Font20, WHITE, BLACK);
//  Display.DrawNum(100, 220, 123456, &Font24, RED, BRED);
  Display.DrawFloatNum(130, 140, 1.00, 2, &Font20, WHITE, BLACK);
}

Verás que el logo de Seeed Studio se muestra dinámicamente en la pantalla.

Solución de Problemas

1. ¿Por qué la pantalla no funciona cuando la vuelvo a programar mientras está conectada?

R: Si tu programa está comunicándose constantemente con la pantalla, reprogramarla puede interrumpir este proceso, causando que la pantalla falle. Puedes intentar apagar la alimentación para restaurar el funcionamiento normal de la pantalla.

2. ¿Qué tipo de fuente de alimentación debo usar para la pantalla?

R: La placa acepta un voltaje de entrada de 3.3V o 5V, por lo que puedes usar una fuente de alimentación dentro de este rango.

3. Los colores en mi pantalla no se ven bien. ¿Cuál puede ser el problema?

R: Asegúrate de que la pantalla esté correctamente inicializada en tu código y que estés usando los valores de color correctos. Si el problema persiste, puede haber un problema con la pantalla o con los cables de conexión. Revisa las conexiones o prueba con otra pantalla si tienes disponible.

Recursos

[PDF] Esquemático
[PDF] Datasheet
[PDF] ST7789V3
[ZIP] Dibujo 3D

Soporte Técnico y Discusión del Producto

¡Gracias por elegir nuestros productos! Estamos aquí para brindarte soporte y asegurarnos de que tu experiencia con nuestros productos sea lo más fluida posible. Ofrecemos varios canales de comunicación para adaptarnos a diferentes preferencias y necesidades.

Introducción​

Especificaciones​

Dimensiones Físicas​

Características​

Ideas de Aplicación​

Descripción de Hardware¿​

Primeros Pasos​

Preparación de Hardware​

Biblioteca Arduino​

Funciones​

Variables Default​

Instalación​

Ejemplo para XIAO​

Solución de Problemas​

1. ¿Por qué la pantalla no funciona cuando la vuelvo a programar mientras está conectada?​

2. ¿Qué tipo de fuente de alimentación debo usar para la pantalla?​

3. Los colores en mi pantalla no se ven bien. ¿Cuál puede ser el problema?​

Recursos​

Soporte Técnico y Discusión del Producto​