Ejemplo de velocímetro - Plantillas

Resumen

¿Buscas un ejemplo gratuito de velocímetro LVGL? Esta plantilla de PicoPixel te da un indicador de dashboard de 480 x 480 listo para abrir, construido con piezas compatibles con LVGL estándar: un anillo de velocidad basado en arc, una gran lectura numérica de velocidad, texto de odómetro, una etiqueta de unidad y etiquetas compactas de estado PRND.

El proyecto es intencionalmente simple y fácil de modificar. Úsalo como base para un dashboard de vehículo ESP32, pantalla de e-bike, cuadro de scooter, controlador RC, panel de simulador, medidor de motor industrial o cualquier UI embebida donde un valor en vivo deba sentirse como un instrumento real.

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

Qué incluye

Pantalla de dashboard de 480 x 480, dimensionada para canvas cuadrados y fácil de adaptar a pantallas redondas.
Medidor arc 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 un punto focal fuerte de 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 dashboard embebido, con tipografía blanca de alto contraste y acento rojo/rosa en el medidor.
Sin dependencia de imágenes, por lo que la UI 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 recurso widget reutilizable, 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 de apoyo como km/h y texto de estado de marcha.
PlusJakartaSans SemiBold 110, usado para el gran valor central de velocidad.

Eso significa que el export LVGL puede mantenerse centrado en primitivas editables: etiquetas, contenedores, un arc y fuentes, sin cargar recursos de imagen innecesarios.

Estructura enfocada en LVGL

La captura muestra una jerarquía pequeña y amigable para exportar, no una maqueta pesada en bitmaps. El diseño se construye alrededor de una pantalla, contenedores para agrupar, varias etiquetas, un grupo de odómetro y el arc principal.

Screen 1 es el canvas de 480 x 480.
Un contenedor raíz mantiene el layout del medidor y centra el dashboard.
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 arc LVGL, así que el mismo visual puede controlarse 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 puede mantenerse cerca de los patrones normales 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 LVGL generado sea mucho más fácil de actualizar desde tu firmware.

Por qué funciona bien con LVGL

Este ejemplo es útil como algo más que una captura bonita. Está diseñado alrededor de cosas que LVGL renderiza bien en hardware embebido.

El renderizado de arc es nativo de LVGL, así que el anillo de velocidad no requiere una imagen transparente grande.
Las etiquetas son baratas de actualizar, 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 arc, 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 dashboard.
Se exporta como código UI LVGL 8.x estándar, 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 arc 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, uptime, 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 arc para RPM.
Anima cambios de valor con un timer 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 UI generados en tu proyecto y actualiza los objetos nombrados desde tu loop de firmware, manejador de eventos o timer 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 tu velocidad viene de GPS, CAN, UART, BLE, un controlador de motor o datos simulados, mantén el parseo específico de hardware fuera del código de UI. Deja que la función de UI reciba valores limpios y solo maneje las actualizaciones 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 LVGL. Los archivos generados se pueden añadir a un proyecto embebido existente igual que cualquier otra UI LVGL.

Para proyectos ESP32, el flujo habitual es:

Configura los drivers de pantalla y táctil/entrada.
Exporta la UI de PicoPixel como LVGL C.
Añade los archivos exportados a tu proyecto ESP-IDF, Arduino o PlatformIO.
Llama a ui_init() después de que LVGL y tu driver de pantalla estén listos.
Actualiza los valores del velocímetro desde tu loop 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 punto visual rápido para:

Demos de velocímetro LVGL
Prototipos de dashboard ESP32
Cuadros de vehículo para pantallas redondas
Pantallas de telemetría para e-bike, scooter, go-kart o RC
Paneles de medidores industriales
Dashboards 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