> ## Documentation Index > Fetch the complete documentation index at: https://docs.kode.diy/llms.txt > Use this file to discover all available pages before exploring further. # Pantalla > Aprende a programarla y a crear increibles interfaces con LVGL. # 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](/es/kode-dot/io-expander) 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 * [Arduino\_GFX](https://github.com/moononournation/Arduino_GFX) * [bb\_captouch](https://github.com/bitbank2/bb_captouch) * [ESP32\_IO\_Expander](https://github.com/esp-arduino-libs/ESP32_IO_Expander) ### ESP-IDF * [esp\_lcd\_co5300](https://components.espressif.com/components/kodediy/esp_lcd_co5300) * [esp\_lcd\_touch\_cst820](https://components.espressif.com/components/kodediy/esp_lcd_touch_cst820) * [esp\_io\_expander\_tca95xx\_16bit](https://components.espressif.com/components/espressif/esp_io_expander_tca95xx_16bit) ## 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. ```cpp display_test.ino lines icon="microchip" theme={null} /** * 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 #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.** ```cpp lvgl_test.ino lines icon="microchip" theme={null} /** * 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 #include #include #include /*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 // #include /* 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](https://drive.google.com/drive/folders/1dw2ThNCUiHljMfDs-s67guQxr_ILJ5BL)