Exempledecompteur

Ce qui est inclus

• Écran de dashboard 480 x 480, dimensionné pour les canevas carrés et facile à adapter aux écrans ronds.
• Jauge arc LVGL, utilisant le widget arc comme anneau de vitesse principal afin que l'indicateur puisse être mis à jour depuis le code.
• Grand libellé numérique de vitesse, affiché comme 135 dans l'aperçu pour créer un point focal fort de cluster d'instruments.
• Libellé d'unité, actuellement km/h, prêt à être changé en mph, %, RPM, W ou toute autre mesure.
• Groupe odomètre, affiché comme 9138 km, utile pour le kilométrage, la distance de trajet, le temps de fonctionnement, l'autonomie de batterie ou une autre métrique secondaire.
• Libellés PRND, avec D mis en évidence dans un indicateur d'état circulaire.
• Style sombre de dashboard embarqué, avec typographie blanche à fort contraste et accent de jauge rouge/rose.
• Aucune dépendance image, afin que l'interface reste légère et modifiable comme objets LVGL.
• Trois styles de police intégrés, correspondant à la hiérarchie de texte Plus Jakarta Sans de la capture.
• Une ressource widget réutilisable, visible dans la bibliothèque locale du modèle pour une réutilisation rapide dans d'autres projets PicoPixel.

Instantané des ressources

Le modèle est délibérément léger. Dans le panneau des ressources, la bibliothèque locale montre :

• Images : 0, la jauge n'est pas une capture statique.
• Couleurs : 0, la palette actuelle est appliquée directement dans le design.
• Polices : 3, utilisant Plus Jakarta Sans à plusieurs tailles.
• Widgets : 1, un aperçu de widget de compteur réutilisable qui peut être déposé dans un autre projet.

L'ensemble de polices intégré est dimensionné pour la hiérarchie visuelle de la jauge :

• PlusJakartaSans ExtraLight 16, utilisé pour le petit texte secondaire comme le suffixe d'odomètre.
• PlusJakartaSans Light 20, utilisé pour les libellés de support comme km/h et le texte d'état de conduite.
• PlusJakartaSans SemiBold 110, utilisé pour la grande valeur de vitesse centrale.

Cela signifie que l'export LVGL peut rester centré sur des primitives modifiables : libellés, conteneurs, arc et polices, sans transporter de ressources image inutiles.

Structure centrée sur LVGL

La capture montre une petite hiérarchie adaptée à l'export plutôt qu'une maquette lourde en bitmaps. Le design est construit autour d'un écran, de conteneurs de regroupement, de plusieurs libellés, d'un groupe odomètre et de l'arc principal.

• Screen 1 est le canevas 480 x 480.
• Un conteneur racine contient la mise en page de la jauge et garde le dashboard centré.
• Le texte d'odomètre est groupé afin que le nombre et le suffixe km puissent se déplacer ensemble.
• La valeur de vitesse centrale est un grand libellé, ce qui rend les mises à jour runtime simples avec lv_label_set_text ou lv_label_set_text_fmt.
• La jauge principale est un arc LVGL, donc le même visuel peut être piloté par lv_arc_set_value.
• La rangée PRND est faite de libellés, l'état de conduite actif étant accentué par un petit conteneur circulaire.

C'est le type de structure que vous voulez pour un modèle de compteur LVGL : le cadran est modifiable, le texte est dynamique, et le code exporté peut rester proche des schémas LVGL normaux.

Pourquoi cela fonctionne bien pour LVGL

Cet exemple est utile au-delà d'une jolie capture. Il est conçu autour de ce que LVGL sait bien rendre sur du matériel embarqué.

• Le rendu d'arc est natif dans LVGL, donc l'anneau de vitesse n'a pas besoin d'une grande image transparente.
• Les libellés sont peu coûteux à mettre à jour, ce qui est idéal pour changer la vitesse, la distance, l'autonomie de batterie ou le texte de mode.
• L'état visuel est explicite, donc votre firmware peut mettre à jour indépendamment la valeur de l'arc, le libellé central, l'odomètre et la sélection de conduite.
• Le design est compact, sans ressources image importées et avec seulement les polices nécessaires au rendu du dashboard.
• Il s'exporte en code d'interface LVGL 8.x standard, intégrable à ESP-IDF, Arduino, PlatformIO, STM32, Zephyr ou un autre projet LVGL.

Idées de personnalisation

Utilisez-le comme point de départ gratuit de jauge LVGL, puis ajustez les détails pour votre propre produit ou démo.

• Changez la plage de vitesse d'une échelle routière vers 0-100, 0-240, 0-8000 RPM, le pourcentage de batterie, la position d'accélérateur ou la température.
• Ajustez l'épaisseur de l'arc, l'angle de départ, l'angle de fin et la couleur pour correspondre à la forme de votre écran.
• Remplacez l'accent rouge/rose par les couleurs de marque, des couleurs d'avertissement ou des couleurs dépendantes de la plage.
• Remplacez km/h par mph, RPM, %, W, V, A, C ou F.
• Utilisez la ligne d'odomètre pour la distance de trajet, l'uptime, l'autonomie restante, le nombre de tours ou l'énergie totale.
• Remplacez PRND par des modes personnalisés comme ECO, SPORT, PARK, AUTO ou MANUAL.
• Ajoutez de petites icônes, une barre de batterie, des indicateurs d'avertissement, des états de clignotants ou un second arc pour les RPM.
• Animez les changements de valeur avec un timer LVGL ou un callback d'animation au lieu de sauter instantanément le libellé.

Câbler des données live

Après l'export depuis PicoPixel, gardez les fichiers d'interface générés dans votre projet et mettez à jour les objets nommés depuis votre boucle firmware, gestionnaire d'événements ou timer LVGL. Les noms d'objets exacts dépendent de ceux que vous donnez aux widgets avant l'export, mais le schéma runtime ressemble à ceci :

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 votre vitesse vient du GPS, du CAN, de l'UART, du BLE, d'un contrôleur moteur ou de données simulées, gardez l'analyse spécifique au matériel hors du code d'interface. Laissez la fonction UI recevoir des valeurs propres et gérer uniquement les mises à jour LVGL.

Exporter vers votre projet

Ouvrez le modèle dans PicoPixel, ajustez la taille d'affichage si nécessaire, renommez les widgets clés, puis exportez le projet en code C LVGL. Les fichiers générés peuvent être ajoutés à un projet embarqué existant comme n'importe quelle autre interface LVGL.

Pour les projets ESP32, le flux habituel est :

1. Configurez vos pilotes d'affichage et de tactile/entrée.
2. Exportez l'interface PicoPixel en C LVGL.
3. Ajoutez les fichiers exportés à votre projet ESP-IDF, Arduino ou PlatformIO.
4. Appelez ui_init() une fois LVGL et votre pilote d'affichage prêts.
5. Mettez à jour les valeurs du compteur depuis votre boucle de télémétrie, file d'événements ou lv_timer.

Pour un tutoriel plus large, consultez le tutoriel ESP32 LVGL UI et le guide sur l'utilisation des modèles PicoPixel.

Meilleures utilisations

Ce modèle convient bien lorsque vous avez besoin d'un point de départ visuel rapide pour :

• Démos de compteur LVGL
• Prototypes de dashboard ESP32
• Clusters de véhicule à écran rond
• Écrans de télémétrie e-bike, scooter, kart ou RC
• Panneaux de jauges industrielles
• Dashboards de simulateur
• Affichages de vitesse moteur ou RPM
• Interfaces d'autonomie batterie et de mode de conduite

C'est aussi un bon fichier d'apprentissage si vous voulez voir comment une jauge LVGL peut être construite avec des widgets normaux avant de créer un cluster d'instruments plus complexe.