Display Prismático con XIAO ESP32C3
Empezando
Si deseas seguir este tutorial en su totalidad, necesitarás preparar lo siguiente.
| XIAO ESP32C3 | Shield Grove para XIAO con chip de gestión de batería | Grove Smart IR Gesture Sensor (PAJ7660) |
|---|---|---|
 |  |  |
Este proyecto utiliza el ESP32C3 para crear una pantalla tridimensional mediante un prisma divisor. Esta guía explica los pasos necesarios para construir la carcasa, adjuntar la electrónica asociada e instalar el firmware. Se proporciona documentación adicional para las tareas de actualizar la lista de criptomonedas rastreadas y reducir y procesar imágenes animadas para su uso en el visor de imágenes.
Primeros Pasos
- Descargar e imprimir en 3D la carcasa
- Conectar la electrónica asociada
- Configurar el entorno
- Configurar el XIAO ESP32C3
Documentación Adicional
Descargar e imprimir en 3D la carcasa
La carcasa 3D consiste en dos mitades diseñadas para encajarse a presión después del ensamblaje de las partes internas. Se deben utilizar soportes para imprimir las piezas y asegurar que la estructura se ensamble correctamente.
Las piezas se pueden encontrar en el repositorio de GitHub y están disponibles para su vista previa a través de su visor STL:
https://github.com/Timo614/XIAO-prism-buddy/blob/main/docs/enclosure/XIAO-prism-top.stl
https://github.com/Timo614/XIAO-prism-buddy/blob/main/docs/enclosure/XIAO-prism-bottom.stl
Conectar la electrónica asociada
El Grove Shield simplifica la configuración para el display prismático, ya que permite el uso de cables de protoboard simples para completar el ensamblaje sin necesidad de soldar. El escudo Grove debe tener el conjunto secundario de conectores hembra soldados en los pines abiertos adyacentes a los pines del XIAO. Este escudo debe atornillarse en los dos agujeros disponibles en la carcasa. Esto puede ser un poco complicado, por lo que puede ser útil poner los tornillos primero y luego bajar el escudo para apretar cada tornillo.
Desde aquí, hay dos conexiones principales:
- Una conexión i2c al sensor de gestos
- La conexión spi a la pantalla
Para la conexión i2c se utiliza un conector Grove de 4 pines del escudo al sensor de gestos.
La carcasa está diseñada para permitir que el sensor de gestos se ajuste perfectamente, con su tornillo manteniéndolo de forma segura contra el exterior de la carcasa. Para posicionar correctamente el sensor de gestos, primero debe colocarse el lado del USB, y luego, una vez que el cuerpo esté alineado, se debe instalar el tornillo.
La conexión SPI es un poco más compleja, ya que requiere varios pines adicionales.
3V3 en el XIAO se conecta al pin VCC de la pantalla
GND en el XIAO se conecta al pin GND de la pantalla
D0 en el XIAO se conecta al pin CS de la pantalla
D1 en el XIAO se conecta al pin BL de la pantalla
D2 en el XIAO se conecta al pin DC de la pantalla
D3 en el XIAO se conecta al pin RST de la pantalla
D8 (SCK) en el XIAO se conecta al pin SCL de la pantalla
D10 (MOSI) en el XIAO se conecta al pin SDA de la pantalla
Con los cables conectados a todos los componentes, el dispositivo puede ser completamente ensamblado. La carcasa está diseñada para permitir un cierre a presión si se imprime con tolerancias similares.
Con el ensamblaje completado, coloca el prisma encima de la pantalla.
Configuración del entorno
La forma más sencilla de configurar un entorno local es usar Visual Studio Code, ya que simplifica la configuración de la máquina.
- Clona el repositorio desde GitHub: https://github.com/Timo614/XIAO-prism-buddy
- Abre el repositorio en Visual Studio Code
- Instala la extensión ESP-IDF
- Instala ESP-IDF 5.0.4
- Establece el objetivo de dispositivo Espressif a esp32c3
- Configura las variables de entorno para tu red wifi (ver paso a continuación)
- Construye, flashea y monitorea tu dispositivo
Configurar el XIAO ESP32C3
El siguiente paso para preparar tu aplicación es configurar tus credenciales para la red wifi.
Presiona Ctrl + Shift + P para abrir el menú rápido y escribe menuconfig. Esto filtrará la lista e incluirá una entrada para ESP-IDF: SDK Configuration editor (Menuconfig).
Cuando estés en este menú, configura el nombre de la red wifi y la contraseña para acceder a ella.
Agregar nuevas criptomonedas
Actualizar el conteo total de criptomonedas:
- En el archivo
prism_controller.cpp, modifica el valor de criptomonedas para reflejar el nuevo total. - Ubicación: prism_controller.cpp
- En el archivo
Modificar el modelo de criptomonedas:
- Busca una de las criptomonedas existentes (por ejemplo, Bitcoin) en el archivo correspondiente y agrega una nueva entrada para la criptomoneda que deseas agregar. Esto incluye la inicialización de datos, el análisis de la respuesta de CoinGecko y la cadena de solicitud de CoinGecko.
- Ubicación: prism_cryptocurrency.c
Actualizar la estructura de datos de la vista de criptomonedas:
- En el archivo
view_data.h, agrega los detalles de la nueva criptomoneda en la estructura de datos de la vista. - Ubicación: view_data.h
- En el archivo
Actualizar la lógica del controlador:
- En el archivo
prism_controller.cpp, busca una criptomoneda existente (como Bitcoin) y copia la lógica asociada a ella para manejar los eventos y la representación de la nueva criptomoneda. - Ubicación: prism_controller.cpp
- En el archivo
Proporcionar un archivo PNG de tamaño adecuado:
- Encuentra una imagen PNG que represente la nueva criptomoneda y usa el LVGL Online Image Converter para convertir el PNG a un archivo C que pueda ser referenciado en el controlador.
- Herramienta: LVGL Online Image Converter
Reducir y procesar imágenes animadas
Debido a las limitaciones de memoria en el microcontrolador, trabajar con archivos GIF animados puede ser problemático, ya que ocupan mucho espacio en la memoria flash. Para convertir imágenes animadas y optimizarlas para su uso en el proyecto, sigue los pasos:
Selecciona una imagen animada adecuada:
- Idealmente, busca imágenes con transparencia, que estén configuradas para hacer un bucle y tengan dimensiones razonables. Los archivos Lottie suelen ser útiles para este tipo de aplicaciones.
- Fuente recomendada: LottieFiles
Convertir Lottie a GIF:
- Usa un convertidor de Lottie a GIF transparente, como el que ofrece LottieFiles.
- Herramienta recomendada: LottieFiles Lottie to GIF Converter
- Usando un editor de GIFs de tu elección, haz las siguientes modificaciones (encontré que la herramienta en línea https://ezgif.com proporciona estas capacidades en su suite de optimización para GIFs que utilicé con fines de esta aplicación):
3.1. Disminuir el número de fotogramas entre los fotogramas hasta que queden solo alrededor de 20 fotogramas.
3.2. Redimensiona la imagen a alrededor de 100x100 o menos.
3.3. Ralentiza la imagen, ya que sin los fotogramas adicionales será extremadamente rápida.
3.4. Reduce la composición de colores del GIF para disminuir su tamaño.
3.5. Comprime aún más el GIF según sea necesario.
- Usa el Convertidor de Imágenes en Línea de LVGL para convertir el archivo GIF a un arreglo en C según la documentación de LVGL. Nota: selecciona el formato de color "Raw" y el formato de salida "C array".
Siguiendo estos pasos, habrás reducido el tamaño del archivo manteniendo la imagen GIF procesada de manera efectiva para su visualización en el dispositivo Prism. La forma más fácil es reemplazar la imagen de fuego o sandía existente para realizar pruebas.
Soporte Técnico y Discusión de Producto
¡Gracias por elegir nuestros productos! Estamos aquí para ofrecerte diferentes tipos de 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.