Créer votre premier compteur de vitesse

Ouvrez Plus（…）→ Instruments personnalisés dans le tableau de bord et sélectionnez Ajouter un instrument. Le nouveau compteur est déjà livré avec une entrée de vitesse de base.

1. Cliquez sur le nom en haut de l'éditeur, accédez à Réglages de l’instrument et nommez-le « My Speed ​​».
2. Cliquez sur l'engrenage à côté de Liaisons d’entrée pour ouvrir Configuration des paramètres. Vérifiez l'entrée de vitesse : l'identifiant est speed, le type est Données de base, la source est Vitesse. S'il est manquant, utilisez Ajouter un paramètre pour en créer un nouveau.
3. Cliquez sur OK pour revenir et enregistrer les paramètres, puis revenez à la zone d'édition.

Le script lit la vitesse via $data.current.speed ; ici, les noms de champs proviennent de l'identifiant d'entrée. L'éditeur fournit des indications de type telles que définies. Cet exemple ne nécessite pas la liaison OBD.

Remplacez l'intégralité du contenu original de la zone d'édition par le code complet ci-dessous. Ne l'emballez pas dans un autre main(). Cet exemple n'a qu'une seule fonction de saisie.

Gardons le code le même pour l’instant. Il lira la vitesse actuelle à chaque fois qu'il doit être dessiné, organisera les valeurs et les unités de haut en bas ; lorsqu'il manque une lecture, une ligne horizontale s'affiche. La section suivante l'explique dans l'ordre d'exécution.

function main() {
  const speed = $data.current.speed;
  return (
    <VStack spacing={8}>
      <Text fontSize={64} color={$env.foreground}>
        {speed?.value == null ? '—' : Math.round(speed.value)}
      </Text>
      <Text fontSize={16} color={$env.accent}>
        {speed?.unit ?? $env.speedUnit}
      </Text>
    </VStack>
  );
}

Regardez d'abord les données, puis l'image. Supposons que cette fois speed soit { value: 42.3, unit: "km/h" } :

1. const speed = $data.current.speed Obtenez cette lecture. Ici, speed est un objet contenant des valeurs numériques et des unités, pas le nombre lui-même.
2. speed?.value == null vérifie les mesures manquantes. Lorsque l'objet n'existe pas ou que la valeur est vide, '—' est sélectionné ; lorsque la valeur est 0, cette branche ne sera pas prise.
3. Math.round(speed.value) arrondit 42.3 à 42 et le donne au premier Text pour affichage. L'arrondi affecte uniquement l'affichage de ce compteur et ne modifie pas la lecture originale.
4. Le deuxième Text affiche speed.unit. Lorsqu'il n'y a actuellement aucune unité, ?? $env.speedUnit utilise l'unité de vitesse de l'environnement d'affichage actuel.
5. VStack dispose deux textes l'un au-dessus de l'autre et spacing={8} contrôle l'espacement entre eux.

$env.foreground et $env.accent fournissent le texte et les couleurs d'accentuation du thème actuel. Ces couleurs seront mises à jour lorsque le thème change.

N'utilisez pas speed?.value || '—' pour juger les mesures manquantes : JavaScript traitera les zéros valides comme de fausses valeurs, ce qui entraînera un affichage incorrect de la ligne horizontale lors du stationnement.

Cliquez sur Aperçu en bas de l'éditeur. Vous devriez voir un numéro de vitesse plus grand en haut et des unités plus petites sur la rangée du bas. Les chiffres dans l'aperçu sont des valeurs simulées, qui ne nécessitent pas de démarrage du véhicule, et ne sont pas nécessairement égales à la vitesse mesurée par le téléphone mobile à ce moment-là.

Effectuez ensuite trois petites modifications, puis prévisualisez à chaque fois :

Découvrez les différentes tailles et thèmes clairs et sombres. Lorsque le contenu est recadré à une certaine taille, réduisez d’abord la taille de la police ou l’espacement, puis observez. N'utilisez pas un grand nombre de décalages x/y pour masquer les problèmes de mise en page.

Si une erreur se produit, restaurez-la à son état d'origine et vérifiez en fonction du numéro de ligne dans le journal. Lors de la prévisualisation, le coin supérieur droit est Journaux ; après avoir fermé l'aperçu et revenu à l'état d'édition, le coin supérieur droit revient à Enregistrer. Un aperçu réussi signifie uniquement que cet ensemble d'entrées de simulation peut être affiché et que les données réelles doivent être vérifiées à l'étape suivante.

Fermez l'aperçu, cliquez sur Enregistrer, quittez l'éditeur et recherchez "My Speed" dans la bibliothèque d'instruments. Ouvrez à nouveau Plus（…）→ Modifier le tableau de bord, cliquez sur + pour l'ajouter, et enfin cliquez sur OK.

À ce stade, la carte change pour lire la vitesse réelle. Vous pouvez le mettre ainsi que le compteur de vitesse intégré sur la même page pour vérification : lorsqu'ils utilisent le même champ de vitesse de base, les valeurs doivent correspondre ; En raison des différentes méthodes de rétention décimale, l'affichage peut être légèrement différent.

À ce stade, le premier instrument est terminé. Dans l'article suivant, remplacez « obtenir la vitesse » par « obtenez votre propre paramètre OBD », et la disposition et le code d'affichage pourront continuer à être utilisés.