Ejemplo de velocímetro - Plantillas

Resumen

Esta plantilla gratuita de velocímetro LVGL incluye una pantalla de 480 x 480 lista para editar. Combina un arco que indica la velocidad, una lectura numérica grande, un odómetro, la unidad de medida y las etiquetas de marcha PRND, todo con widgets estándar de LVGL.

El proyecto tiene una estructura sencilla para que resulte fácil adaptarlo. Úsalo como base para un panel de control de vehículo ESP32, pantalla de bicicleta eléctrica, cuadro de scooter, controlador RC, panel de simulador, medidor de motor industrial o cualquier interfaz embebida donde quieras mostrar datos en tiempo real con el aspecto de un instrumento de medición.

Como el diseño está hecho con etiquetas, contenedores, fuentes y un arco LVGL en vez de una imagen estática, es una base práctica para exportar código C de LVGL limpio y conectar los valores a tu propio sensor, bus CAN, GPS, controlador de motor o fuente de datos de prueba.

Qué incluye

Pantalla de panel de control de 480 x 480, dimensionada para lienzos cuadrados y fácil de adaptar a pantallas redondas.
Medidor de arco LVGL, usando el widget Arc como anillo principal de velocidad para que el indicador pueda actualizarse desde código.
Etiqueta numérica grande de velocidad, mostrada como 135 en la vista previa para destacar la lectura principal del cuadro de instrumentos.
Etiqueta de unidad, actualmente km/h, lista para cambiar a mph, %, RPM, W o cualquier otra medida.
Grupo de odómetro, mostrado como 9138 km, útil para kilometraje, distancia de viaje, tiempo de uso, autonomía de batería u otra métrica secundaria.
Etiquetas PRND de marcha, con D resaltada en un indicador circular de estado.
Estilo oscuro de panel de control embebido, con tipografía blanca de alto contraste y acento rojo/rosa en el medidor.
Sin dependencia de imágenes, por lo que la interfaz permanece ligera y editable como objetos LVGL.
Tres estilos de fuente incluidos, coincidiendo con la jerarquía tipográfica Plus Jakarta Sans de la captura.
Un widget reutilizable guardado en la biblioteca, visible en la biblioteca local de la plantilla para reutilizarlo rápido dentro de otros proyectos PicoPixel.

Resumen de recursos

La plantilla es deliberadamente ligera. En el panel de recursos, la biblioteca local muestra:

Imágenes: 0, el medidor no es una captura estática.
Colores: 0, la paleta actual está aplicada directamente en el diseño.
Fuentes: 3, usando Plus Jakarta Sans en varios tamaños.
Widgets: 1, una vista previa de widget de velocímetro reutilizable que puede soltarse en otro proyecto.

El conjunto de fuentes incluido está dimensionado para la jerarquía visual del medidor:

PlusJakartaSans ExtraLight 16, usado para texto secundario pequeño como el sufijo del odómetro.
PlusJakartaSans Light 20, usado para etiquetas secundarias como km/h y texto de estado de marcha.
PlusJakartaSans SemiBold 110, usado para el gran valor central de velocidad.

Eso significa que el código exportado de LVGL puede mantenerse centrado en primitivas editables: etiquetas, contenedores, un arco y fuentes, sin cargar recursos de imagen innecesarios.

Estructura enfocada en LVGL

La captura muestra una estructura sencilla, fácil de exportar y con pocos recursos de imagen. El diseño se construye alrededor de una pantalla, contenedores para agrupar, varias etiquetas, un grupo de odómetro y el arco principal.

Screen 1 es el lienzo de 480 x 480.
Un contenedor raíz mantiene la distribución del medidor y centra el panel de control.
El texto del odómetro está agrupado para que el número y el sufijo km puedan moverse juntos.
El valor central de velocidad es una etiqueta grande, lo que hace sencillas las actualizaciones en tiempo de ejecución con lv_label_set_text o lv_label_set_text_fmt.
El medidor principal es un arco LVGL, así que su valor puede actualizarse con lv_arc_set_value.
La fila PRND está hecha de etiquetas, con el estado activo resaltado por un pequeño contenedor circular.

Esta es la estructura que quieres para una plantilla de velocímetro LVGL: el dial es editable, el texto es dinámico y el código exportado sigue los patrones habituales de LVGL.

TIP

Antes de exportar, renombra los objetos importantes en PicoPixel, por ejemplo speed_arc, speed_value_label, unit_label, odo_label y drive_state_label. Los nombres claros hacen que el código C de LVGL generado sea mucho más fácil de actualizar desde tu firmware.

Por qué funciona bien con LVGL

El ejemplo usa elementos que LVGL puede dibujar con eficiencia en un dispositivo embebido.

El renderizado de arcos es nativo de LVGL, así que el anillo de velocidad no requiere una imagen transparente grande.
Actualizar las etiquetas consume pocos recursos, ideal para cambiar velocidad, distancia, autonomía de batería o texto de modo.
El estado visual es explícito, así que tu firmware puede actualizar independientemente el valor del arco, la etiqueta central, el odómetro y la selección de marcha.
El diseño es compacto, sin recursos de imagen importados y solo con las fuentes necesarias para el aspecto de panel de control.
Se exporta como código estándar de interfaz para LVGL 8.x, así que puedes integrarlo en ESP-IDF, Arduino, PlatformIO, STM32, Zephyr u otro proyecto LVGL.

Ideas de personalización

Usa esto como punto de partida gratuito para un medidor LVGL y ajusta los detalles para tu propio producto o demo.

Cambia el rango de velocidad de una escala vial a 0-100, 0-240, 0-8000 RPM, porcentaje de batería, posición de acelerador o temperatura.
Ajusta grosor, ángulo inicial, ángulo final y color del arco para coincidir con la forma de tu pantalla.
Cambia el acento rojo/rosa por colores de marca, colores de advertencia o colores basados en rangos.
Sustituye km/h por mph, RPM, %, W, V, A, C o F.
Usa la fila de odómetro para distancia de viaje, tiempo de funcionamiento, autonomía restante, número de vuelta o energía total.
Sustituye PRND por modos personalizados como ECO, SPORT, PARK, AUTO o MANUAL.
Añade iconos pequeños, barra de batería, indicadores de advertencia, estados de intermitentes o un segundo arco para RPM.
Anima cambios de valor con un temporizador LVGL o callback de animación en vez de hacer saltar la etiqueta instantáneamente.

Conectar datos en vivo

Después de exportar desde PicoPixel, mantén los archivos de interfaz generados en tu proyecto y actualiza los objetos nombrados desde tu bucle del firmware, manejador de eventos o temporizador LVGL. Los nombres exactos dependen de cómo nombres los widgets antes de exportar, pero el patrón de ejecución se ve así:

static void dashboard_set_speed(int speed_kph, uint32_t odometer_km)
{
    lv_arc_set_value(ui_speed_arc, speed_kph);
    lv_label_set_text_fmt(ui_speed_value_label, "%d", speed_kph);
    lv_label_set_text_fmt(ui_odo_label, "%lu km", (unsigned long)odometer_km);
}

Si recibes la velocidad por GPS, CAN, UART, BLE, un controlador de motor o una simulación, procesa esos datos fuera del código de la interfaz. Pasa a la función de actualización los valores ya preparados para que solo tenga que modificar los objetos LVGL.

Exportar a tu proyecto

Abre la plantilla en PicoPixel, ajusta el tamaño de pantalla si hace falta, renombra los widgets clave y luego exporta el proyecto como código C de LVGL. Los archivos generados se pueden añadir a un proyecto embebido existente igual que cualquier otra interfaz LVGL.

Para proyectos ESP32, el flujo habitual es:

Configura los controladores de pantalla y de entrada táctil.
Exporta la interfaz de PicoPixel como código C de LVGL.
Añade los archivos exportados a tu proyecto ESP-IDF, Arduino o PlatformIO.
Llama a ui_init() después de que LVGL y tu controlador de pantalla estén listos.
Actualiza los valores del velocímetro desde tu bucle de telemetría, cola de eventos o lv_timer.

Para una explicación más amplia, consulta el tutorial ESP32 LVGL UI y la guía sobre cómo usar plantillas PicoPixel.

Mejores usos

Esta plantilla encaja bien cuando necesitas un diseño inicial para:

Demos de velocímetro LVGL
Prototipos de panel de control ESP32
Cuadros de vehículo para pantallas redondas
Pantallas de telemetría para bicicleta eléctrica, scooter, kart o RC
Paneles de medidores industriales
Paneles de control de simulador
Pantallas de velocidad de motor o RPM
Interfaces de autonomía de batería y modo de conducción

También es un buen archivo de aprendizaje si quieres ver cómo se puede construir un medidor LVGL con widgets normales antes de crear un cuadro de instrumentos más complejo.

Ejemplodevelocímetro