Características
El Kode Dot tiene la mejor pantalla en un dispositivo maker del mercado. Se trata de una pantalla táctil AMOLED de 2.13 pulgadas con las siguientes características:
| Característica | Descripción |
|---|
| Tamaño | 2.13 pulgadas |
| Resolución | 410x502 píxeles |
| Profundidad de color | 16 bits (RGB565) |
| Driver | CO5300 - QSPI |
| Driver táctil | CST820 - I2C |
La pantalla es totalmente programable con librerías de Arduino y ESP-IDF ya existentes y compatible con LVGL.
Esquema de conexión
Driver de la pantalla
El driver de la pantalla es el CO5300 y funciona usando bus QuadSPI. Este driver está conectado al ESP32-S3 de la siguiente manera:
| CO5300 | ESP32-S3 |
|---|
| Chip Select | GPIO9 |
| Clock | GPIO17 |
| Data 0 | GPIO15 |
| Data 1 | GPIO14 |
| Data 2 | GPIO16 |
| Data 3 | GPIO10 |
| Reset | GPIO8 |
El bus QuadSPI es de la misma familia que el bus SPI, pero tiene el doble de ancho de banda.
Driver del táctil
El driver del táctil es el CST820 y funciona mediante I2C. Este driver está conectado al ESP32-S3 de la siguiente manera:
| CST820 | ESP32-S3 |
|---|
| SDA | GPIO48 |
| SCL | GPIO47 |
| Interrupt | EXP15 |
| Reset | GPIO8 |
El driver del táctil tiene la dirección 0x15 en el bus I2C.
El pin de Interrupt está conectado al EXP15 del expansor de pines. Ve a
Expansor de pines para más información.
Tanto el reset del driver del táctil como el de la pantalla están conectados al mismo pin del ESP32-S3.
Librerías recomendadas
Arduino
ESP-IDF
Ejemplos de código
Ejemplo básico
Este es el código más básico para probar la pantalla, únicamente imprime un ¡Hola mundo! en la pantalla.
/**
* Demo simple de pantalla con Arduino_GFX: inicializa el panel y dibuja “Hello World!”.
* Usa bus QSPI del ESP32-S3 con resolución 410x502 y brillo al máximo.
* Muestra texto grande centrado aproximadamente sobre un fondo azul.
*/
/* ───────── KODE | docs.kode.diy ───────── */
#include <Arduino_GFX_Library.h>
#define DSP_HOR_RES 410
#define DSP_VER_RES 502
#define DSP_SCLK 17
#define DSP_SDIO0 15
#define DSP_SDIO1 14
#define DSP_SDIO2 16
#define DSP_SDIO3 10
#define DSP_RST 8
#define DSP_CS 9
/* Objetos para manejar el bus gráfico y la pantalla */
static Arduino_DataBus *gfxBus;
static Arduino_CO5300 *gfx;
void setup() {
Serial.begin(115200);
delay(100);
Serial.println("Simple Display Demo");
/* ─── Configuración de la pantalla ───
Bus QSPI: CS, SCLK, D0, D1, D2, D3 */
gfxBus = new Arduino_ESP32QSPI(DSP_CS, DSP_SCLK, DSP_SDIO0, DSP_SDIO1, DSP_SDIO2, DSP_SDIO3);
/* Constructor del panel: bus, RST, rotation offset (0), x/y offset (0,0),
ancho/alto, pin de backlight (22), opciones (0,0,0) */
gfx = new Arduino_CO5300(gfxBus, DSP_RST, 0, 0, DSP_HOR_RES, DSP_VER_RES, 22, 0, 0, 0);
if (!gfx->begin()) {
Serial.println("Error: no se pudo iniciar el display");
while (true) /* bucle infinito si falla */ ;
}
gfx->setRotation(0);
gfx->setBrightness(255);
gfx->displayOn();
Serial.println("Pantalla inicializada");
/* Print Hello World! */
gfx->fillScreen(BLUE);
gfx->setTextSize(4);
gfx->setTextColor(ORANGE);
gfx->setCursor(65, 250);
gfx->print("Hello World!");
}
void loop() {
delay(1000);
}
Ejemplo con LVGL
Este código implementa LVGL 9.3 y te permite probar la pantalla imprimiendo un texto, usando un ejemplo o usando una demo. Por defecto se usa la demo de musica de LVGL.
/**
* Ejemplo de uso de LVGL con Arduino en Kode Dot.
* Configura la pantalla, el táctil y dibuja una etiqueta simple.
* Más info: https://docs.lvgl.io/master/integration/framework/arduino.html
*/
/* ───────── KODE | docs.kode.diy ───────── */
#include <lvgl.h>
#include <Arduino_GFX_Library.h>
#include <Wire.h>
#include <bb_captouch.h>
/*Para usar los ejemplos y demos de LVGL descomenta los includes de abajo respectivamente.
*También necesitas copiar lvgl/examples a lvgl/src/examples. De la misma manera para las demos lvgl/demos a lvgl/src/demos.
*Ten en cuenta que la librería lv_examples es para LVGL v7 y no deberías instalarla para esta versión (ya que LVGL v8)
*ya que los ejemplos y demos ahora forman parte de la librería principal de LVGL. */
// #include <examples/lv_examples.h>
// #include <demos/lv_demos.h>
/* Resolución y rotación de la pantalla */
#define DSP_HOR_RES 410
#define DSP_VER_RES 502
#define DSP_ROTATION LV_DISPLAY_ROTATION_0
/* Tamaño del buffer de dibujo de LVGL */
#define DRAW_BUF_SIZE (DSP_HOR_RES * DSP_VER_RES / 10 * (LV_COLOR_DEPTH / 8))
static uint8_t *lv_buf1;
static uint8_t *lv_buf2;
/* Objetos para manejar el bus gráfico y la pantalla */
static Arduino_DataBus *gfxBus;
static Arduino_CO5300 *gfx;
static BBCapTouch touch;
/* Función de callback para que LVGL dibuje en la pantalla */
void my_disp_flush(lv_display_t *disp, const lv_area_t *area, uint8_t *px_map) {
uint32_t w = lv_area_get_width(area);
uint32_t h = lv_area_get_height(area);
gfx->startWrite();
gfx->writeAddrWindow(area->x1, area->y1, w, h);
gfx->writePixels((uint16_t *)px_map, w * h);
gfx->endWrite();
/* Avisar a LVGL que se ha terminado de refrescar */
lv_display_flush_ready(disp);
}
/* Lectura del panel táctil */
void my_touchpad_read(lv_indev_t *indev, lv_indev_data_t *data) {
TOUCHINFO ti;
if (touch.getSamples(&ti) && ti.count > 0) {
data->state = LV_INDEV_STATE_PRESSED;
data->point.x = ti.x[0];
data->point.y = ti.y[0];
} else {
data->state = LV_INDEV_STATE_RELEASED;
}
}
/* Fuente de ticks para LVGL usando millis() */
static uint32_t my_tick(void) {
return millis();
}
void setup() {
Serial.begin(115200);
Serial.println("LVGL con Arduino en Kode Dot");
/* ─── Configuración de la pantalla ─── */
gfxBus = new Arduino_ESP32QSPI(9, 17, 15, 14, 16, 10);
gfx = new Arduino_CO5300(gfxBus, 8, 0, DSP_HOR_RES, DSP_VER_RES, 0, 22, 0, 0);
if (!gfx->begin()) {
Serial.println("Error al iniciar la pantalla");
while (true) delay(1000);
}
gfx->setRotation(0);
gfx->setBrightness(255);
gfx->fillScreen(BLACK);
Serial.println("Pantalla inicializada");
/* ─── Configuración del panel táctil ─── */
if (touch.init(48, 47, -1, -1, 400000) == CT_SUCCESS) {
touch.setOrientation(0, DSP_HOR_RES, DSP_VER_RES);
Serial.printf("Táctil OK. Tipo=%d\n", touch.sensorType());
} else {
Serial.println("No se pudo iniciar el táctil");
}
/* ─── Inicializar LVGL ─── */
lv_init();
lv_tick_set_cb(my_tick); /* Fuente de ticks */
lv_display_t *disp = lv_display_create(DSP_HOR_RES, DSP_VER_RES);
lv_display_set_flush_cb(disp, my_disp_flush);
/* Asignar buffers en PSRAM */
lv_buf1 = (uint8_t *)heap_caps_malloc(DRAW_BUF_SIZE, MALLOC_CAP_SPIRAM | MALLOC_CAP_8BIT);
lv_buf2 = (uint8_t *)heap_caps_malloc(DRAW_BUF_SIZE, MALLOC_CAP_SPIRAM | MALLOC_CAP_8BIT);
lv_display_set_buffers(disp, lv_buf1, lv_buf2, DRAW_BUF_SIZE, LV_DISPLAY_RENDER_MODE_PARTIAL);
/* Configurar entrada táctil como puntero */
lv_indev_t *indev = lv_indev_create();
lv_indev_set_type(indev, LV_INDEV_TYPE_POINTER);
lv_indev_set_read_cb(indev, my_touchpad_read);
/* *******************
* Crear una etiqueta simple
******************** */
lv_obj_t *label = lv_label_create(lv_screen_active());
lv_label_set_text(label, "Hello Arduino, I'm LVGL!");
lv_obj_align(label, LV_ALIGN_CENTER, 0, 0);
/* *******************
* Probar un ejemplo. Ver todos los ejemplos
* - En línea: https://docs.lvgl.io/master/examples.html
* - Códigos fuente: https://github.com/lvgl/lvgl/tree/master/examples
******************** */
// lv_example_btn_1();
/* *******************
* O probar una demo. No olvides habilitar las demos en lv_conf.h. Por ejemplo, LV_USE_DEMO_WIDGETS
******************** */
// lv_demo_music();
Serial.println("Configuración finalizada");
}
void loop() {
lv_timer_handler(); /* Procesar eventos de LVGL */
delay(5);
}
Descarga de ejemplos
Puedes probar los códigos de ejemplo mediante el IDE de Arduino o el IDE de ESP-IDF o descargar los códigos en nuestro drive:
Ejemplos de código de la pantalla