Exempledecompteurdevitesse

Ce qui est inclus

• Écran de tableau de bord 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 combiné d'instruments.
• Libellé d'unité, actuellement km/h, prêt à être changé en mph, %, RPM, W ou toute autre mesure.
• Groupe compteur kilométrique, 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 tableau de bord embarqué, avec typographie blanche à fort contraste et accent de jauge rouge/rose.
• Aucune image externe, 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.
• Un widget réutilisable, visible dans la bibliothèque locale du modèle pour une réutilisation rapide dans d'autres projets PicoPixel.

Ressources du projet

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 du compteur kilométrique.
• PlusJakartaSans Light 20, utilisé pour les libellés secondaires comme km/h et le texte d'état de conduite.
• PlusJakartaSans SemiBold 110, utilisé pour la grande valeur de vitesse centrale.

L’export reste composé de widgets LVGL modifiables — libellés, conteneurs, arc et polices — sans images superflues.

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 compteur kilométrique 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 tableau de bord centré.
• Le texte du compteur kilométrique 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 pendant l’exécution 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.

Cette structure facilite la personnalisation du compteur : le cadran reste modifiable, le texte peut être mis à jour et le code exporté utilise les mécanismes habituels de LVGL.

Pourquoi cela fonctionne bien pour LVGL

Ce projet illustre une interface conçue pour les capacités de rendu de LVGL sur un appareil 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, le compteur kilométrique 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 tableau de bord.
• 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 du compteur kilométrique pour la distance de trajet, l'temps de fonctionnement, 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 fonction de rappel d'animation au lieu de sauter instantanément le libellé.

Relier les données en temps réel

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 pendant l’exécution 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);
}

Que la vitesse provienne du GPS, du CAN, de l’UART, du BLE, d’un contrôleur moteur ou d’une simulation, traitez les données matérielles en dehors du code d’interface. Transmettez ensuite les valeurs prêtes à afficher à la fonction qui met à 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 intégrer le projet à un ESP32 :

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.

Idées d’utilisation

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 tableau de bord ESP32
• Combinés de véhicule à écran rond
• Écrans de télémétrie vélo électrique, scooter, kart ou RC
• Panneaux de jauges industrielles
• Tableaux de bord de simulateur
• Affichages de vitesse moteur ou RPM
• Interfaces d'autonomie batterie et de mode de conduite

Ce projet permet aussi d’apprendre à créer une jauge avec des widgets LVGL standard avant de concevoir un combiné d’instruments plus complexe.