Skip to main content

Usando LVGL y TFT en el Seeed Studio Round Display para toda la serie XIAO

Obtener Ahora 🖱️

Gracias por comprar los productos Seeed Studio Round Display. En esta sección del tutorial, nos enfocaremos en cómo usar la biblioteca TFT_eSPI y la biblioteca LVGL para dibujar varios patrones de esfera ricos e interesantes en el Round Display, e introducir el uso de algunas funciones comunes de estas dos bibliotecas útiles pero complejas de simple a profundo. A través del contenido de este tutorial, espero que puedas usar este producto para dibujar tu patrón de esfera ideal. ¡Que tengas una gran experiencia de aprendizaje!

Comenzando​

Antes de que entres al estudio, nos gustaría que te prepares para lo siguiente.

Preparación de Hardware​

Para fines de demostración, este tutorial usará el XIAO ESP32S3 como control maestro.

Seeed Studio Round Display para XIAOSeeed Studio XIAO ESP32S3
Obtener Ahora 🖱️
Obtener Ahora 🖱️

Si quieres usar otros productos XIAO, los tutoriales y métodos en este artículo también son aplicables.

Seeed Studio XIAO SAMD21Seeed Studio XIAO RP2040Seeed Studio XIAO nRF52840 (Sense)Seeed Studio XIAO ESP32C3
Consigue Uno Ahora 🖱️
Consigue Uno Ahora 🖱️
Consigue Uno Ahora 🖱️
Consigue Uno Ahora 🖱️

Al instalar el XIAO con Round Display, por favor deja que el conector Type-C del XIAO mire hacia el exterior del Round Display, y luego conecta cada pin contra los conectores duales de 7 pines.

Preparación del Software​

Esta parte ha sido descrita en detalle en la Wiki Básica, por lo que puedes saltar directamente a leerla.

Dibujando diales simples usando la biblioteca TFT_eSPI​

TFT_eSPI es una biblioteca de gráficos y fuentes rica en características compatible con Arduino IDE para procesadores de 32 bits. La biblioteca TFT proporcionada por el XIAO Round Display está basada en la biblioteca después de la compatibilidad de XIAO y XIAO Round Display, que soporta el uso de toda la serie de XIAO.

Interfaces Comunes para la Biblioteca TFT​

1. Crear objetos TFT​

TFT_eSPI tft = TFT_eSPI()
TFT_eSPI tft = TFT_eSPI(240,240)        // Set the screen size at the time of object creation

2. Inicialización​

void init(uint8_t tc = TAB_COLOUR)
void begin(uint8_t tc = TAB_COLOUR)

tft.begin() y tft.init() son dos funciones con la misma función.

3. Limpiar pantalla​

void fillScreen(uint32_t color) // Fill the screen with a certain color

4. Configuración de la orientación de la pantalla​

void setRotation(uint8_t r);      // Set the display image rotation direction, r optional parameters for 0, 1, 2, 3
uint8_t getRotation(void)         // Read the current rotation angle

0, 1, 2, 3 representan 0°, 90°, 180°, 270° respectivamente, y 4 es la imagen espejo.

5. Conversión de Color​

uint16_t color565(uint8_t red, uint8_t green, uint8_t blue)    // Convert 8-bit red, green and blue to 16-bit
uint16_t color8to16(uint8_t color332)                          // Convert 8-bit color to 16-bit
uint8_t  color16to8(uint16_t color565)                         // Convert 16-bit color to 8-bit
uint32_t color16to24(uint16_t color565)                        // Convert 16-bit color to 24-bit
uint32_t color24to16(uint32_t color888)                        // Convert 24-bit color to 16-bit

6. Inversión de color​

void invertDisplay(bool i)      //i = true to invert all display colors, i = false to display normally

7. Configuraciones relacionadas con texto​

/* cursor */
void setCursor(int16_t x, int16_t y)                     // Set the cursor for tft.print()
void setCursor(int16_t x, int16_t y, uint8_t font)       // Set the cursor and font size of tft.print()
int16_t getCursorX(void)                                 // Read the current cursor x position (moves with tft.print())
int16_t getCursorY(void)                                 // Retrieve the current cursor y position

/* font color */
void setTextColor(uint16_t color)                        // Set the color of characters only
void setTextColor(uint16_t fgcolor, uint16_t bgcolor, bool bgfill = false)   // Set the character foreground and background colors

/* font size */
void setTextSize(uint8_t size)                           // Set the character size multiplier (this increases the pixel size)
void setTextWrap(bool wrapX, bool wrapY = false)         // Turn on/off line feeds for text in TFT width and/or height

/* Text reference position */
void setTextDatum(uint8_t datum)                         // Set text reference position (default is top left corner)
uint8_t getTextDatum(void)                               // Get the text reference position

/* Set the background fill, which can be used to clear the display of the specified area */
void setTextPadding(uint16_t x_width)                    // Set the text fill (background margin/rewrite) width in pixels
uint16_t getTextPadding(void)                            // Get text fill

Como puedes ver en las funciones anteriores, si quieres imprimir el texto mostrado, simplemente puedes usar la función tft.print().

8. Dibujo de formas simples​

Puedes dibujar algunas formas simples, incluyendo puntos de píxel, segmentos de línea recta, rectángulos, círculos, etc. usando las siguientes funciones.

drawPixel(int32_t x, int32_t y, uint32_t color)    // Plotting individual pixel points

drawLine(int32_t xs, int32_t ys, int32_t xe, int32_t ye, uint32_t color)  // Draw a line

drawRect(int32_t x, int32_t y, int32_t w, int32_t h, uint32_t color)   // Draw a rectangle
fillRect(int32_t x, int32_t y, int32_t w, int32_t h, uint32_t color)  // Draw a rectangle with a fill color

drawCircle(int32_t x, int32_t y, int32_t r, uint32_t color)  // Draw a circle
fillCircle(int32_t x, int32_t y, int32_t r, uint32_t color)  // Draw a circle with a fill color

drawEllipse(int16_t x, int16_t y, int32_t rx, int32_t ry, uint16_t color)  // Draw a ellipse
fillEllipse(int16_t x, int16_t y, int32_t rx, int32_t ry, uint16_t color)  // Draw a ellipse with a fill color

drawTriangle(int32_t x1,int32_t y1, int32_t x2,int32_t y2, int32_t x3,int32_t y3, uint32_t color)  // Draw a triangle
fillTriangle(int32_t x1,int32_t y1, int32_t x2,int32_t y2, int32_t x3,int32_t y3, uint32_t color)  // Draw a triange with a fill color

9. Dibujo de formas complejas​

La biblioteca TFT también nos proporciona métodos para dibujar formas complejas, como rectángulos redondeados, arcos redondeados, formas suaves y sedosas, etc.

/** 
    Draw a pixel blended with the background pixel colour (bg_color) specified,  return blended colour 
    If the bg_color is not specified, the background pixel colour will be read from TFT or sprite 
**/
drawPixel(int32_t x, int32_t y, uint32_t color, uint8_t alpha, uint32_t bg_color)

/** 
    Draw a small anti-aliased filled circle at ax,ay with radius r (uses drawWideLine)
    If bg_color is not included the background pixel colour will be read from TFT or sprite
**/
drawSpot(float ax, float ay, float r, uint32_t fg_color, uint32_t bg_color)


drawFastVLine(int32_t x, int32_t y, int32_t h, uint32_t color)  // Draw vertical straight lines
drawFastHLine(int32_t x, int32_t y, int32_t w, uint32_t color)  // Draw horizontal lines
drawWideLine(float ax, float ay, float bx, float by, float wd, uint32_t fg_color, uint32_t bg_color)  // Draw a thick solid line
drawWedgeLine(float ax, float ay, float bx, float by, float aw, float bw, uint32_t fg_color, uint32_t bg_color);  //Draws a tapered line. aw and bw represent the start and end width of the tapered line, respectively.


/**
    As per "drawSmoothArc" except the ends of the arc are NOT anti-aliased, this facilitates dynamic arc length changes with arc segments and ensures clean segment joints. 
    The sides of the arc are anti-aliased by default. If smoothArc is false sides will NOT be anti-aliased
**/
drawArc(int32_t x, int32_t y, int32_t r, int32_t ir, uint32_t startAngle, uint32_t endAngle, uint32_t fg_color, uint32_t bg_color, bool smoothArc);

/**
    Draw an anti-aliased (smooth) arc between start and end angles. Arc ends are anti-aliased.
    By default the arc is drawn with square ends unless the "roundEnds" parameter is included and set true
    Angle = 0 is at 6 o'clock position, 90 at 9 o'clock etc. The angles must be in range 0-360 or they will be clipped to these limits
    The start angle may be larger than the end angle. Arcs are always drawn clockwise from the start angle.
**/
drawSmoothArc(int32_t x, int32_t y, int32_t r, int32_t ir, uint32_t startAngle, uint32_t endAngle, uint32_t fg_color, uint32_t bg_color, bool roundEnds);

/**
    Draw an anti-aliased filled circle at x, y with radius r
    Note: The thickness of line is 3 pixels to reduce the visible "braiding" effect of anti-aliasing narrow lines this means the inner anti-alias zone is always at r-1 and the outer zone at r+1
**/
drawSmoothCircle(int32_t x, int32_t y, int32_t r, uint32_t fg_color, uint32_t bg_color)

/**
    Draw an anti-aliased filled circle at x, y with radius r
    If bg_color is not included the background pixel colour will be read from TFT or sprite
**/
fillSmoothCircle(int32_t x, int32_t y, int32_t r, uint32_t color, uint32_t bg_color)


/**
    Draw a rounded rectangle that has a line thickness of r-ir+1 and bounding box defined by x,y and w,h
    The outer corner radius is r, inner corner radius is ir
    The inside and outside of the border are anti-aliased
**/
drawSmoothRoundRect(int32_t x, int32_t y, int32_t r, int32_t ir, int32_t w, int32_t h, uint32_t fg_color, uint32_t bg_color, uint8_t quadrants)

/**
    Draw a filled rounded rectangle , corner radius r and bounding box defined by x,y and w,h
**/
fillSmoothRoundRect(int32_t x, int32_t y, int32_t w, int32_t h, int32_t radius, uint32_t color, uint32_t bg_color)

10. Variables y texto​

Además de simplemente mostrar una cadena específica, a veces necesitamos mostrar algunas variables en la pantalla, como tiempo y valores de sensores, etc. Entonces, dependiendo del tipo de la variable, puedes elegir usar las siguientes funciones diferentes.

drawChar(int32_t x, int32_t y, uint16_t c, uint32_t color, uint32_t bg, uint8_t size)
drawNumber(long intNumber, int32_t x, int32_t y, uint8_t font) // Draw integer using specified font number. If no font is set (the last parameter, the default font)
drawFloat(float floatNumber, uint8_t decimal, int32_t x, int32_t y, uint8_t font), // Draw float using specified font number. If no font is set (the last parameter, the default font)
drawString(const char *string, int32_t x, int32_t y, uint8_t font),  // Draw string using specified font number. If no font is set (the last parameter, the default font)

11. Procesamiento de Imágenes​

Para usar la función pushImage() para mostrar una imagen en pantalla con la biblioteca TFT, puedes seguir estos pasos:

  • Convierte el archivo de imagen a un formato de array de C/C++ que Arduino pueda reconocer. Puedes usar herramientas en línea como Image2CPP para convertir una imagen bitmap a formato de array.

  • Incluye el archivo de array de imagen generado en tu programa de Arduino.

  • Inicializa la biblioteca TFT y la pantalla, establece la resolución de pantalla y el modo de color.

  • Usa la función tft.pushImage(x, y, width, height, data) para enviar los datos de la imagen a la pantalla, donde x e y son las coordenadas de la esquina superior izquierda de la imagen, width y height son el ancho y alto de la imagen, y data es el array de la imagen.

// Image data array
const unsigned char image_data[] PROGMEM = {
  // Insert the converted C/C++ array data of the image here
};

tft.pushImage(x, y, image_width, image_height, image_data);

12. Clase TFT_eSprite​

TFT_eSprite y TFT_eSPI son ambas librerías de Arduino para pantallas TFT LCD, pero tienen diferentes funciones y propósitos de diseño.

TFT_eSPI es una librería potente con muchas características avanzadas y opciones de configuración que puede lograr varios efectos de pantalla. Soporta múltiples chips controladores de pantalla y controladores, y puede ser usada en múltiples plataformas de hardware Arduino. Utiliza la interfaz SPI y código altamente optimizado para lograr velocidades de refresco rápidas y una huella de código pequeña. La librería TFT_eSPI puede ser usada para varias aplicaciones incluyendo juegos, gráficos y GUI.

TFT_eSprite es un complemento a la librería TFT_eSPI y se usa principalmente para dibujar pequeños sprites en la pantalla, como personajes de juegos, iconos, texto, etc. TFT_eSprite puede lograr velocidades de dibujo más rápidas porque almacena en caché las imágenes en memoria y realiza refrescos parciales. Esto permite velocidades de refresco más rápidas al actualizar pequeños sprites y puede ahorrar tiempo de procesador y espacio de memoria.

Por lo tanto, TFT_eSPI es una librería general potente adecuada para múltiples aplicaciones, mientras que TFT_eSprite es una librería que se enfoca en dibujar pequeños sprites y puede proporcionar mayor eficiencia de dibujo.

El formato general para usar la librería TFT_eSPI es el siguiente.

#include <TFT_eSPI.h>

TFT_eSPI tft = TFT_eSPI();

void setup() {
  tft.init();
  tft.setRotation(1);
}

void loop() {
    // Write the code to draw the graph
}

The general format for using the TFT_eSprite library is as follows.

#include <TFT_eSPI.h>

TFT_eSPI tft = TFT_eSPI();
TFT_eSprite spr = TFT_eSprite(&tft);

void setup() {
  tft.init();
  tft.setRotation(1);
}

void loop() {
    spr.createSprite(128, 128);  // Create a sprite of 128*128 size

    // Write the code to draw the graph

    spr.pushSprite(0, 0);  // Placement of the drawn sprite
    spr.deleteSprite();
}
note

En el código de ejemplo anterior, cuando el programa sale de la función loop(), se llama a spr.deleteSprite(); para eliminar el objeto TFT_eSprite y liberar el espacio de memoria. De esta manera, al crear un objeto TFT_eSprite en el siguiente bucle, se puede usar el espacio de memoria previamente liberado para evitar desperdiciar recursos de memoria.

Para obtener más información sobre las funciones de la biblioteca TFT y su uso, recomendamos leer los archivos TFT_eSPI.h y TFT_eSPI.cpp en la biblioteca.

Acerca de las opciones de personalización de la biblioteca TFT​

A veces necesitamos usar algunas bibliotecas de fuentes personalizadas o algunas características que no están habilitadas para ahorrar espacio. En este punto necesitaremos modificar el contenido del archivo Setup66_Seeed_XIAO_RoundDisplay.h.

  • La ruta predeterminada para este archivo en sistemas Windows es:

C:\Users\{UserName}\Documents\Arduino\libraries\TFT_eSPI\User_Setups\Setup66_Seeed_XIAO_RoundDisplay.h

  • La ruta predeterminada para este archivo en sistemas MacOS es:

\Users\{UserName}\Documents\Arduino\libraries\TFT_eSPI\User_Setups\Setup66_Seeed_XIAO_RoundDisplay.h

Por favor, active o desactive algunas funciones innecesarias según el uso real. Por ejemplo, si desea usar fuentes personalizadas, entonces debe descomentar #define SMOOTH_FONT, de lo contrario, probablemente obtendrá errores al ejecutar.

Por supuesto, los archivos de encabezado de sus fuentes personalizadas deben guardarse en el mismo directorio que los archivos ino, lo cual es un paso necesario para evitar errores.

Programa de muestra de esfera basado en TFT​

Hemos escrito un programa de esfera para la Pantalla Redonda que se puede usar directamente. Debido a la limitación del espacio de memoria de algunos modelos XIAO, este programa solo realiza la función básica de movimiento de manecillas y no está diseñado para otras funciones. Los usuarios pueden usar este programa para aprender el uso de la biblioteca TFT y la función de movimiento del puntero, y completar el desarrollo de esferas más complejas según la situación real.

Download the Code

Dibujando diales simples usando la biblioteca LVGL​

La biblioteca LVGL es una biblioteca de gráficos embebidos de propósito general que ofrece un conjunto rico de controles de interfaz gráfica de usuario como botones, etiquetas, listas, etc. que pueden usarse para construir varias interfaces de usuario. A diferencia de la biblioteca TFT, la biblioteca LVGL proporciona una interfaz gráfica abstracta y orientada a objetos que es más fácil de usar y mantener, pero puede venir con algunas compensaciones de rendimiento y confiabilidad.

La biblioteca LVGL es una herramienta muy útil cuando se construyen interfaces de usuario complejas que reducen la carga de trabajo de escribir y mantener código. La biblioteca TFT, por otro lado, es más adecuada para algunas aplicaciones que requieren gráficos de alto rendimiento como procesamiento de imágenes en tiempo real, renderizado de video, etc.

Interfaces Comunes para la Biblioteca LVGL​

La API de la biblioteca LVGL es muy rica y compleja, y esperamos que todos los que usen LVGL se tomen el tiempo de leer la documentación oficial de introducción a LVGL.

Dibujando interfaces de UI complejas con SquareLine Studio​

Además de leer la extensa documentación oficial de LVGL y escribir nuestros propios programas gráficos de LVGL, también podemos usar la herramienta oficial SquareLine Studio de LVGL para mejorar nuestra eficiencia de desarrollo.

A continuación, te daremos una breve introducción al uso del software en la pantalla redonda, métodos de configuración, para ayudarte a que puedas comenzar rápidamente a usar el software para diseñar algunas interfaces.

caution

Te recomendamos usar la versión v1.5.1 de SquareLine Studio. Esta es también la versión de software más reciente al momento de escribir este Wiki.

Entorno usado en la preparación de este tutorial:

  1. Biblioteca SeeedStudio_TFT_eSPI por Bodmer, modificada por Seeed Studio, versión: 2.5.43

  2. Biblioteca LVGL por kisvegabor, embeddedt, pete-pjb, versión: 8.3.11

Las bibliotecas LVGL pueden descargarse como versión 8.3.11 buscando directamente a través del Administrador de Versiones de Biblioteca. La biblioteca SeeedStudio_TFT_eSPI necesita descargarse desde Github y añadirse al entorno del IDE de Arduino.

Paso1. Descargar SuqareLine Studio​

Puedes ir al sitio web oficial de SquareLine Studio haciendo clic aquí, luego haz clic en TRY IT FOR FREE para descargar el software a tu computadora.

Si tu computadora está usando este software por primera vez, entonces obtendrás una prueba gratuita de 30 días, si no, la versión gratuita también es capaz de dibujar hasta 5 páginas, usando 50 widgets.

caution

Si eres un usuario por primera vez, ¡por favor no te registres para iniciar sesión en tu cuenta que no tiene saldo, podría costarte la prueba completa de 30 días!

Paso2. Configurar información de interfaz de pantalla​

A continuación, podemos abrir el software y comenzar creando una página de visualización en blanco.

Dado que estamos usando programación de Arduino, entonces lo que creamos también necesita ser un archivo de Arduino.

Nuestra pantalla circular tiene una resolución de pantalla de 240*240 y soporta solo profundidad de color de 16bit. Aparte de eso, el nombre y tema del proyecto necesitan ser definidos por ti, aquí usaré el estilo oscuro como tema.

¿Qué pasa si eres demasiado rápido, como yo, y olvidas configurar la forma del dial y crear el proyecto? No hay problema, en la esquina superior izquierda de la interfaz principal, también puedes encontrar la pestaña Project Settings para hacer cambios a las configuraciones que acabas de hacer.

caution

Ten en cuenta que por favor completa la configuración de tu proyecto antes de comenzar oficialmente a dibujar y asegúrate de que coincida con las especificaciones de nuestra pantalla, de lo contrario todo lo que dibujes puede no mostrarse correctamente en la pantalla.

No todo puede modificarse después de que el proyecto ha sido creado, como el nombre del proyecto. Por favor no uses ningún idioma que no sea inglés o caracteres especiales en el nombre del proyecto, y por favor no uses el signo "-", por favor reemplaza el signo "-" con "_". ¡De lo contrario, el programa exportado puede tener errores durante la compilación!

Paso3. Entendiendo el diseño funcional del software​

Basado en mis hábitos de uso, he dividido la interfaz principal del software en aproximadamente las siguientes partes.

  • Panel de Jerarquía y Animación: Esta área te permite configurar diferentes páginas de dial, capas de visualización y animaciones.

  • Widgets: Aquí puedes elegir qué componentes usar para añadir en la página de visualización. Estos componentes están integrados con el software y pueden usarse directamente. Los componentes que no están disponibles aquí necesitarán añadirse más tarde en tu propio software de programación.

  • Área de Trabajo: En el espacio de trabajo, puedes cambiar la posición de ciertos componentes arrastrándolos y soltándolos. Aún más convenientemente, la visualización final será consistente con lo que se muestra en el espacio de trabajo, así que lo que ves es lo que obtienes.

  • Assets & Console: Assets muestra los clips de imagen que has añadido, y estos clips de imagen añadidos pueden usarse en los componentes que soportan insertar imágenes. Console te mostrará algunos mensajes de error (si los hay) que ocurrieron durante la configuración.

  • Área de Configuración: El propósito principal aquí es configurar las propiedades del componente.

Primero tendremos un conocimiento general de la interfaz del software, y luego te guiaremos a través de la comprensión práctica del uso de cada parte.

Paso 4. Usar el software para realizar tus ideas​

Supongamos que quiero dibujar una interfaz de música ahora. Por supuesto, me gusta demasiado escuchar música, así que quiero dibujar una interfaz de visualización de música como ejemplo.

Me gustaría tener los siguientes componentes en esta pantalla de visualización de música.

  • Arte de portada del álbum de mi música favorita como fondo.
  • Tener una barra de progreso de reproducción
  • Tener una barra de control de volumen
  • Tener un botón de reproducir y pausar

Después de organizar nuestros requisitos, entonces necesitamos diseñar los componentes de visualización de abajo hacia arriba, como construir un edificio.

El primer paso es crear una imagen de fondo musical.

Selecciona Panel en los widgets, puedes hacer clic en él y se colocará automáticamente en el centro del dial, o puedes arrastrarlo a la posición del dial donde quieras colocarlo.

Pondremos la imagen mostrada en el Panel en lugar de directamente en el fondo del dial porque no me gusta que todo el dial sea esta imagen, y el Panel puede redimensionarse libremente.

En este punto, puedes ver que ya hay una serie de propiedades en el Área de Configuración que podemos establecer. Las configuraciones para cada componente son generalmente similares, con una o dos opciones que pueden ser un poco diferentes.

Nombre: Debes nombrar el widget. No puede haber un número, guión bajo o un carácter especial al comienzo del nombre. Habiendo exportado el código, puedes encontrar el widget por ese nombre.

Diseño: Puedes usar un diseño para organizar automáticamente los hijos de un widget. Si el diseño está habilitado, los valores X e Y de los hijos no se pueden ajustar manualmente, a menos que la bandera IGNORE_LAYOUT o FLOATING esté habilitada en los hijos.

Banderas Principales

  • Oculto - Hacer el objeto oculto. (Como si no estuviera allí en absoluto.)
  • Clicable - Hacer el objeto clicable por dispositivos de entrada
  • Enfocable al hacer clic - Agregar estado enfocado al objeto cuando se hace clic
  • Marcable - Alternar estado marcado cuando se hace clic en el objeto
  • Ajustable - Si el ajuste de desplazamiento está habilitado en el padre, puede ajustarse a este objeto
  • Bloqueo de presión - Mantener el objeto presionado incluso si la presión se deslizó del objeto
  • Burbuja de evento - Propagar los eventos al padre también
  • Burbuja de gesto - Propagar los eventos al padre también
  • Prueba de impacto avanzada - Permitir realizar pruebas de impacto (clic) más precisas. Por ejemplo, teniendo en cuenta las esquinas redondeadas
  • Ignorar diseño - Hacer el objeto posicionable por los diseños
  • Flotante - No desplazar el objeto cuando el padre se desplaza e ignorar el diseño

Banderas de Desplazamiento

  • Desplazable - Hacer el objeto desplazable
  • Desplazamiento elástico - Permitir desplazamiento interno pero con velocidad más lenta
  • Momento de desplazamiento - Hacer que el objeto se desplace más cuando es "lanzado"
  • Desplazamiento uno - Permitir desplazar solo un hijo ajustable
  • Cadena de desplazamiento - Permitir propagar el desplazamiento a un padre
  • Desplazamiento al enfocar - Desplazar automáticamente el objeto para hacerlo visible cuando está enfocado

Configuraciones de Desplazamiento

  • Dirección de desplazamiento - Las barras de desplazamiento se muestran según una configuración
  • Modo de barra de desplazamiento - Las barras de desplazamiento se muestran según un modo configurado. Existen los siguientes modos:
    • Apagado - Nunca mostrar las barras de desplazamiento
    • Encendido - Siempre mostrar las barras de desplazamiento
    • Activo - Mostrar barras de desplazamiento mientras un objeto está siendo desplazado
    • Auto - Mostrar barras de desplazamiento cuando el contenido es lo suficientemente grande para ser desplazado

Estados: El objeto puede estar en una combinación de los siguientes estados:

  • Clicable - Estado alternado o marcado
  • Deshabilitar - Estado deshabilitado
  • Enfocable - Enfocado vía teclado o codificador o clicado vía panel táctil/ratón
  • Presionado - Siendo presionado

Configuraciones de estilo: Los estilos se pueden usar para agregar efectos a los widgets o sus partes. Puedes agregar un color de fondo personalizado, borde, sombra, etc. En Configuraciones de Estilo, puedes agregar o modificar los valores de estos parámetros.

Estado: Puedes crear un estilo personalizado para cada estado.

Propiedades de Estilo: Las Propiedades de Estilo son los parámetros a establecer para los estilos.

  • Arco: El Estilo de Arco se puede usar en aquellos widgets que tienen el componente Arco.
    • Color de línea - El color de la línea
    • Ancho de arco - El ancho del arco
    • Arco redondeado - Los extremos de la línea del arco están redondeados
    • Imagen de arco - La imagen de fondo para la línea del arco
  • Fondo: El Estilo de Fondo es el fondo de los widgets. Puedes crear gradientes o hacer las esquinas del fondo redondeadas.
    • Color y alfa - Establecer el color de fondo y alfa del objeto.
    • Color de gradiente - Establecer el color de gradiente del fondo.
    • Parada principal de fondo - Establecer el punto desde el cual el color de fondo debería comenzar para gradientes.
    • Parada de gradiente de fondo - Establecer el punto desde el cual el color de gradiente del fondo debería comenzar
    • Radio de fondo - El radio que usas para hacer las esquinas del fondo redondeadas
    • Dirección de gradiente - La dirección del gradiente. Puede ser horizontal o vertical.
    • Recortar esquina - Habilitar para recortar el contenido desbordado en la esquina redondeada.
  • Imagen de Fondo: Puedes establecer una imagen como imagen de fondo.
    • Imagen de fondo - La imagen que usas como imagen de fondo
    • Opacidad de imagen de fondo - La opacidad de la imagen de fondo
    • Recolorear - Con la función Recolorear, puedes usar un color en la imagen de fondo. Establece la profundidad del color cambiando el parámetro alfa.
    • Imagen de fondo en mosaico - Si está habilitado, la imagen de fondo será en mosaico
  • Mezcla: Al usar el Estilo de Mezcla, puedes mezclar los colores de píxeles de la parte actual del widget con los colores del objeto que le sigue.
    • Modo de mezcla - Elige entre cuatro opciones.
      • Normal - Estado predeterminado
      • Aditivo - Sumando píxeles
      • Sustractivo - Restar píxeles
      • Multiplicar - Multiplicar píxeles
    • Opacidad de mezcla - Aquí puedes establecer la opacidad de la parte del widget
  • Borde: Usando Borde, puedes dibujar un borde alrededor del objeto seleccionado en las líneas internas.
    • Color de borde - El color del borde
    • Ancho de borde - El ancho del borde
    • Lado de borde - La dirección del borde
  • Línea: El Estilo de Línea se puede usar en aquellos widgets que tienen el componente Línea.
    • Color - El color de la línea
    • Ancho - El ancho de la línea
    • Línea redondeada - Los extremos de la línea serán redondeados
  • Contorno: El estilo de Contorno es similar al estilo de Borde pero aquí dibujas el borde alrededor de la parte seleccionada del widget.
    • Color de contorno - El color del contorno
    • Ancho de contorno - El ancho del contorno
    • Relleno de contorno - Distancia desde el lado del widget en píxeles
  • Rellenos: El estilo de Rellenos pone un relleno en la parte del widget. Significa que las partes debajo de él en la jerarquía se desplazarán por la distancia definida en el relleno con valores de píxeles.
    • Relleno - La extensión del relleno
  • Sombra: Usando un Estilo de Sombra, puedes dibujar una sombra o un resplandor a la parte seleccionada del widget.
    • Color de sombra - El color de la sombra
    • Ancho de sombra - El ancho de la sombra
    • Extensión de sombra - La profundidad de la sombra
    • Sombra OX - Desplazar la sombra en el eje X
    • Sombra OY - Desplazar la sombra en el eje Y
  • Texto: El Estilo de Texto define los parámetros del texto que se puede encontrar en el widget.
    • Color de texto - El color del texto
    • Espaciado de letras - El espacio entre las letras Espaciado de líneas - El espacio entre las líneas
    • Alineación de texto - La dirección de alineación del texto
    • Decoración de texto - Puedes sobrrayar o subrayar el texto
      • Ninguno - Texto normal
      • Entender - Texto subrayado
      • Tachado - Texto sobrrayado
      • Fuente de texto - La fuente del texto

Propiedades de Evento: Agregando eventos, puedes crear diferentes interacciones a los widgets, por ejemplo cambiar la pantalla, reproducir una animación, etc. presionando un botón.

  • Agregar Evento: En la parte inferior del Panel Inspector, puedes encontrar el botón AGREGAR EVENTO. Primero, debes nombrar el evento, luego elegir un disparador para iniciarlo.
    • Nombre del evento - El nombre del evento
    • Disparador del Evento - La interacción de inicio del evento
      • Presionado - Un objeto ha sido presionado
      • Clicado - Un objeto fue presionado por un corto período de tiempo, luego liberado. No se llama si se desplazó
      • Presión larga - Un objeto ha sido presionado por un período de tiempo más largo
      • Repetición de presión larga - Llamado después de long_press_time en cada long_press_repeat_time ms. No se llama si se desplazó
      • Enfocado - Un objeto está enfocado
      • Desenfocado - Un objeto está desenfocado
      • Valor cambiado - El valor del objeto ha sido cambiado.
      • Listo - Un proceso ha terminado
      • Cancelar - Un proceso ha sido cancelado
      • Pantalla cargada - Una pantalla fue cargada, llamado cuando todas las animaciones han terminado
      • Pantalla descargada - Una pantalla fue descargada, llamado cuando todas las animaciones han terminado
      • Inicio de carga de pantalla - Una carga de pantalla comenzó, disparado cuando el retraso de cambio de pantalla ha expirado
      • Inicio de descarga de pantalla - Una descarga de pantalla comenzó, disparado inmediatamente cuando se llama lv_scr_load/lv_scr_load_anim
        • Marcado - Un widget marcado
        • Desmarcado - Un widget desmarcado
        • Gesto - Dirección de deslizamiento del toque del dedo
  • Agregar Evento
    • Acciones: Las acciones son aquellos elementos del evento, que comienzan cuando ocurre el disparador.
      • Llamar función: Usando la acción Llamar función, puedes agregar un nombre de función al que el evento puede referirse. Esta función será creada en el archivo ui__events.c o ui_events.py durante el proceso de exportación.
      • Cambiar Pantalla: Puedes cambiar entre pantallas con esta acción.
        • Pantalla a - La pantalla a la que te gustaría cambiar
        • Modo de desvanecimiento - La animación durante el cambio de pantalla
        • Velocidad - La velocidad de cambio de pantalla
        • Retraso - El retraso del cambio de pantalla
      • Incrementar Arco: Puedes modificar el valor del Widget Arco.
      • Incrementar Barra: Puedes modificar el valor del Widget Barra.
      • Incrementar Deslizador: Puedes modificar el valor del Widget Deslizador.
      • Modificar Bandera: Puedes modificar el estado de bandera de un widget.
      • Reproducir Animación: Puedes reproducir las animaciones creadas en el Panel de Animación.
        • Animación - La animación seleccionada
        • Objetivo - Widget objetivo en el que te gustaría usar la animación
        • Retraso - El tiempo de retraso de la animación
      • Establecer Opacidad: La opacidad del widget seleccionado.
      • Establecer Bandera: Establecer el valor para el estado de bandera del widget.
      • Establecer Propiedad: Cambiar el valor de propiedad del widget.
      • Establecer valor de texto desde arco: Mostrar el valor del Widget Arco en un Widget Etiqueta usando esta acción.
      • Establecer valor de texto desde deslizador: Mostrar el valor del Widget Deslizador en un Widget Etiqueta usando esta acción.
      • Establecer valor de texto cuando está marcado: Cambiar el texto de un Widget Etiqueta dependiendo del estado marcado o desmarcado del objeto objetivo.
Uso del Panel​

En resumen, si necesito mostrar la imagen del álbum en la mitad superior del dial, entonces necesito ajustar las coordenadas y el tamaño del Panel y establecer la imagen de fondo.

note

Para ocupar la menor cantidad de memoria posible en la placa madre, por favor inserta la imagen comprimida tanto como sea posible a la resolución del dial, ¡no dejes pasar la imagen grande!

Luego podemos establecer la transparencia de la imagen en Bg Image opa. No quiero que sea completamente opaca porque una imagen completamente opaca afectará la visualización de mi texto posteriormente.

Vale la pena señalar aquí que todos los componentes tienen líneas de marco por defecto, por lo que para no afectar la estética, necesitamos eliminar las líneas de marco. La forma de hacer esto es establecer la transparencia del color del borde a 0.

Entonces, si quieres eliminar cualquier color o cualquier segmento de línea, puedes hacerlo estableciendo la transparencia a 0.

Uso del Label​

Luego, agregamos texto en el medio (usar widgets Label), que muestra el artista y el nombre de la canción. En el estilo, podemos cambiar el tamaño de fuente, color y otro contenido.

Uso del Imgbutton​

Debajo del texto, agregamos algunos componentes de reproducción (usar widgets Imgbutton), como el botón de reproducir/pausar y el botón de cambiar pista arriba/abajo.

Imgbutton es un tipo especial de botón, la mayor diferencia entre él y el Button normal es que Imgbutton puede configurarse con tres estados de estilo antes de presionar el botón, al presionar y después de soltar el botón respectivamente. Este proceso es muy similar al escenario donde presionamos para cambiar el estado de reproducción. Si piensas que el botón arriba/abajo no necesita una función tan complicada, también puedes usar el Button directamente.

Luego ahora establecemos las imágenes de los botones Press y Release al estilo de reproducción, y solo en el estado Disable es el estilo de pausa.

Luego agregamos un evento, la función de este evento es, cuando el usuario presiona el botón, entonces el estado cambia a Disable, de modo que se logra el efecto del cambio de imagen.

Si quieres verificar el efecto, puedes hacer clic en el botón de reproducción en la parte superior derecha del espacio de trabajo, y luego puedes hacer clic en el botón de reproducción para ver el efecto del cambio.

Uso del Arc​

Luego agregamos el último componente, que es la barra de volumen y la barra de progreso de reproducción. Haremos esto usando Arc.

Para Arc, las principales cosas que necesitamos ajustar son el color y el tamaño de los anillos.

  • MAIN: Esto se refiere al diseño de estilo del fondo rectangular detrás de todo el Arc. El Arc configurado en el estilo MAIN no es indicativo del estilo del área del arco.

  • INDICATOR: Se refiere a la configuración de estilo del arco del área de indicación inicial. La configuración Arc bajo INDICATOR se usa generalmente.

  • KNOB: Esto se refiere a la configuración de este círculo en la imagen. Si no necesitas este círculo, puedes establecer su transparencia a 0. El tamaño de este círculo, necesitas establecerlo dentro del Arc en INDICATOR.

Este es el efecto que quiero lograr.

Si has marcado que es clickeable, entonces puedes hacer clic en el botón Run y arrastrar el arco, entonces puedes lograr el efecto de cambiar la barra de volumen.

Cambio de Pantalla​

Con la interfaz de música casi diseñada, podríamos agregar una nueva interfaz principal a continuación.

Luego diseña un evento que cambie la pantalla principal a la pantalla de música. Por ejemplo, lo diseño aquí para cambiar a la interfaz de reproducción de música deslizando mi dedo hacia la derecha bajo la interfaz principal.

Dado que la interfaz principal es el personaje principal, este evento debe agregarse a la interfaz principal bajo Screen.

Si quieres tener un efecto de animación que cambie lentamente después de una diapositiva, entonces puedes mantener la Velocidad en 500, si quieres cambiar inmediatamente, entonces la Velocidad debe establecerse en 0.

Animación del Puntero​

Volviendo al diseño de la interfaz principal, queremos agregar el efecto de animación de rotación de las manecillas del reloj.

Lo primero que debes hacer es dibujar tus propias manecillas de segundos, minutos y horas. Luego agrégalas al dial principal en el estilo de Imagen.

El ajuste de la posición del puntero requiere paciencia, ya que necesitamos asegurarnos de que el puntero esté rotando alrededor de un punto fijo en la imagen.

Transform se establece para la colocación de la imagen. El Pivot en la pestaña Image de abajo establece las coordenadas del punto de rotación. La forma general de establecer esto es primero ajustar el Transform para asegurarse de que el punto fijo del puntero esté en el centro del dial, y luego ajustar las coordenadas del Pivot un poco. Cuando todos los ángulos puedan hacer que el punto fijo del puntero no se mueva, entonces estos parámetros son los más adecuados.

Una vez que tengas todas las posiciones de los punteros determinadas, puedes comenzar a agregar nuevos efectos de animación. La configuración de efectos de animación para diferentes punteros se puede encontrar en la siguiente figura.

SegundoMinuto Hora

Finalmente, simplemente configuramos la animación del movimiento del puntero para que se reproduzca mientras se carga la pantalla principal.

tip

Los tutoriales anteriores han cubierto básicamente el 80% de los escenarios de uso del software, y muchos de los otros componentes son muy similares. Finalmente, aquí tienes algunos consejos y sugerencias para cuando uses el software.

  1. Necesitas colocar todos los componentes con funcionalidad táctil en la parte superior, de lo contrario interferirá con la implementación de la funcionalidad táctil del componente.

    Por defecto, el último componente colocado por el software está en la parte superior. Esto significa que en la pestaña Hierarchy, los componentes que están dispuestos uno al lado del otro tienden a estar en la parte superior. En la interfaz de música que acabas de diseñar, la capa superior es el Arc para ajustar el tamaño del sonido, lo que causa un problema porque el Arc es un rectángulo que ocupa todo el dial y afectará el toque del botón de reproducción, por lo que normalmente necesitas ajustar la capa del botón de reproducción a la parte superior de la capa Arc para que no afecte el toque.

  2. Desactiva tantas características innecesarias como sea posible para ahorrar más memoria.

    Cada componente tendrá algunos Flags marcados por defecto, pero no todos son requeridos. Aunque los predeterminados no serán un problema, desactivar los Flags no deseados hará que tu interfaz de usuario del dial funcione más suavemente.

    Como el álbum de fondo en la interfaz de música, no hay necesidad de hacer clic y no hay animación, y es bueno desactivar la opción en Flags. Pero cerrar también necesita considerar la situación real, por ejemplo, en la escena de deslizar para cambiar la página del dial, cerrar la función de algunos Flags hará que el deslizamiento se desactive, por lo que aún necesita ejecutarse según el efecto de discreción para cerrar.

  3. Asegúrate de dar un nombre único a todos tus componentes y animaciones, eventos, etc.

    El software solo puede ahorrarte el tiempo de dibujar algunos patrones y animaciones, pero efectos más complejos pueden requerir que los programes más tarde para lograrlos. Entonces es importante poder encontrar rápidamente dónde están ubicados tus componentes en el código. ¡Nombrar componentes, eventos y animaciones es clave!

Paso 5. Exportación y aplicación de programas​

Una vez que tu interfaz de usuario del dial esté dibujada, puedes considerar exportar la interfaz de usuario a un programa y subirla a XIAO a través de Arduino. Haz clic en la esquina superior izquierda del software y haz clic en Export -> Create Template Project.

Luego selecciona la ruta para guardar y el código se exportará automáticamente. La plantilla de proyecto exportada tendrá los siguientes archivos en ella.

  • libraries: Este directorio de carpeta proporciona todas las librerías que necesitas usar en tu proyecto. Para nuestro tutorial, las librerías lvgl y TFT_eSPI en este directorio no son necesarias, pero la ui y lv_conf.h son útiles para nosotros.
  • ui: Dentro está el programa del proyecto para Arduino, el archivo .ino.
  • REANME.md

Lo que necesitamos hacer, entonces, es primero poner las librerías requeridas y archivos de configuración en la carpeta de librerías de Arduino. Luego modificar el archivo .ino para asegurar que la funcionalidad funcione.

Por favor copia la carpeta ui y el archivo lv_conf.h del directorio de la carpeta libraries exportado por SquareLine Studio al directorio raíz de tu librería de Arduino.

Luego, podemos abrir el archivo .ino directamente bajo la carpeta ui. Entonces, necesitamos hacer cambios a los siguientes archivos para asegurar que el programa compile suavemente.

  • ui.ino:
DescripcionesCaptura de pantallaSegmento de código
Definiendo la librería TFT a usar e importando la librería de pantalla redonda
Ver código de ejemplo
Comentar las definiciones duplicadas de la clase tft
Ver código de ejemplo
Reescribiendo funciones táctiles
Ver código de ejemplo
Agregar función de inicialización de pantalla y función de inicialización táctil
Ver código de ejemplo
Rotación de pantalla
Ver código de ejemplo

Entonces puedes elegir qué XIAO usar para compilar y cargar.

Acerca de las opciones de personalización de la biblioteca LVGL​

Si encuentras un mensaje de error que algunos componentes no están definidos después de compilar, entonces muy probablemente no reemplazaste el archivo lv_conf.h en el directorio raíz de la biblioteca de Arduino con el archivo lv_conf.h exportado por SquareLine Studio.

Para ahorrar memoria en la placa madre, el archivo lv_conf.h por defecto deshabilita algunas de las características de lvgl. Pero si usas estas funciones en tu dibujo de esfera, necesitas activarlas manualmente.

  • La ruta por defecto para el lv_conf.h en sistemas Windows es:

C:\Users\{UserName}\Documents\Arduino\libraries

  • La ruta por defecto para el lv_conf.h en sistemas MacOS es:

\Users\{UserName}\Documents\Arduino\libraries

Como ejemplo simple, en el ejemplo anterior, usamos la fuente MONTSERRAT 8, pero por defecto esta fuente está desactivada, por lo que puede haber un error durante el proceso de compilación.

Entonces todo lo que necesitamos hacer es cambiar el 0 después de esta fuente en el archivo lv_conf.h a 1, lo que significa que la fuente está habilitada.

Si encuentras un error similar, puedes verificar dos veces que la característica de personalización esté habilitada.

Programa de esfera basado en LVGL​

Hemos creado dos estilos de esfera para la pantalla circular como referencia para los usuarios. Debido a la lógica compleja de la UI, esto requerirá una cierta cantidad de rendimiento y memoria en la placa madre XIAO. Si tu XIAO está compilando el siguiente programa de esfera con error de memoria insuficiente, entonces puede que necesites actualizar tu XIAO o reducir la funcionalidad de las esferas.

  • Estilo de Esfera I:
Descargar el Código

Soporte Técnico y Discusión de Productos​

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

Loading Comments...