Aller plus loin : disposition, animation et partage

Entraînez-vous d’abord à ajouter une icône à côté de la vitesse. L'exemple complet ci-dessous montre uniquement le nombre fixe 78 pour rendre les modifications de mise en page faciles à voir ; il ne tient pas encore compte de la vitesse réelle.

La couche externe HStack organise les icônes et le contenu sur le côté droit, à gauche et à droite. Sur la droite VStack disposez les nombres et les unités de haut en bas. Ce que vous voyez est donc constitué de deux niveaux : la ligne entière est disposée à gauche et à droite, et le texte est disposé de haut en bas.

Essayez trois modifications en séquence : changez le calque externe spacing={12} en 24, les icônes et le texte seront plus éloignés ; changez la couche interne spacing={4} en 12, les nombres et les unités seront plus espacés ; changez le calque interne alignment="leading" en "trailing" et les deux lignes de texte seront alignées à droite.

Repérez les axes d’alignement : HStack utilise alignment pour l’alignement vertical, tandis que VStack aligne horizontalement. x/y sont des décalages visuels, pas des espacements : ils ne modifient pas la position des éléments voisins dans la disposition.

Une fois la disposition déterminée, remplacez le 78 fixe par l'expression de lecture dans le premier exemple de vitesse et sélectionnez la vitesse dans les paramètres de données. De cette façon, vous ne changez qu’une seule chose à chaque fois que vous pratiquez.

function main() {
  return (
    <HStack spacing={12} alignment="center">
      <Symbol name="speedometer" color={$env.accent} />
      <VStack alignment="leading" spacing={4}>
        <Text fontSize={40}>78</Text>
        <Text fontSize={14}>{$env.speedUnit}</Text>
      </VStack>
    </HStack>
  );
}

Cet exemple convertit la vitesse en angle d'arc, puis ajoute une transition pour le changement d'angle. Sélectionnez d’abord la vitesse de base dans les paramètres du compteur, puis collez le code.

speed / 200 obtient le rapport par rapport à 200, limité à 0…1 puis multiplié par 360, qui est l'angle actuel à tracer. Par exemple, lorsque la vitesse est 50, l'angle est 90°, et lorsque la vitesse est 100, l'angle est 180°. Le 200 est ici un exemple de plage, utilisant la valeur dans l'unité de vitesse actuelle, qui peut être modifiée en fonction de votre propre instrument.

startAngle={-90} place le point de départ en haut ; sweepAngle détermine le nombre d'angles à balayer à partir du point de départ. Le property: 'sweepAngle' dans animations signifie animer le changement de cet attribut : lors du passage de 90° à 180°, il faut 0,25 seconde pour terminer la transition.

Essayez de remplacer duration par 1 et regardez l'arc suivre la nouvelle cible plus lentement. L'animation n'augmente pas la fréquence d'échantillonnage des données réelles et ne transforme pas automatiquement l'arc en une animation chronométrée ; il doit y avoir un nouvel angle cible pour que le changement se produise.

Le code suivant affiche une ligne horizontale lorsqu'il n'y a pas de vitesse, sans déguiser le test manquant en zéro. Les arcs sont dessinés uniquement pour des lectures numériques valides.

function main() {
  const speed = $data.current.speed?.value;
  if (speed == null) {
    return (
      <Text fontSize={32} color={$env.foreground}>
        —
      </Text>
    );
  }
  return (
    <Circle
      width={120}
      height={120}
      background="clear"
      stroke={$env.accent}
      lineWidth={8}
      startAngle={-90}
      sweepAngle={Math.max(0, Math.min(1, speed / 200)) * 360}
      animations={[
        { property: 'sweepAngle', duration: 0.25, curve: 'easeOut' },
      ]}
    />
  );
}

Fermez l'aperçu et enregistrez l'instrument avant de l'exporter à partir du menu de l'instrument enregistré. .instrument contient du code, des ressources d'images et des définitions d'entrée, qui peuvent être envoyées ou enregistrées dans des « fichiers » via le panneau de partage du système. Les valeurs par défaut dans la définition sont exportées. Les valeurs d'entrée modifiées localement ne sont pas exportées. Les liaisons de périphérique OBD ne sont pas exportées.

Le destinataire l'ouvre avec CapDrive et doit encore être ajouté à la page via Modifier le tableau de bord après l'importation. Définissez vos propres valeurs, texte ou options dans Liaisons d’entrée ; l'entrée OBD sélectionne les paramètres de véhicule correspondants de l'appareil destinataire.

Lorsque vous partagez des jauges de régime ou de température du liquide de refroidissement, indiquez quelle lecture du véhicule est requise et où elle se limite. Tant que l'identifiant d'entrée est conservé, la reliure de l'appareil ne nécessite pas de modification du code. Vérifiez les différentes tailles et thèmes avant de partager, et vérifiez les informations personnelles dans le code, les ressources et le texte par défaut.

Ce qui est édité sur l'ordinateur est le brouillon de l'instrument actuellement ouvert sur le téléphone. Entrez d'abord dans l'éditeur de cet instrument sur le téléphone mobile, puis connectez-vous dans l'ordre suivant :

1. Connectez l'iPhone et l'ordinateur au même réseau Wi-Fi.
2. Ouvrez Édition à distance dans l'éditeur mobile et attendez que l'adresse apparaisse.
3. Entrez l'adresse complète affichée sur votre téléphone dans le navigateur de votre ordinateur. N'utilisez pas l'ancienne adresse de session et ne confondez pas l'hôte local de votre ordinateur avec l'adresse de votre téléphone.
4. Gardez votre session d'édition mobile ouverte, modifiez quelque chose de facilement identifiable sur votre ordinateur, comme la taille de la police, puis prévisualisez les modifications sur votre téléphone mobile.
5. Une fois l'édition terminée, revenez au téléphone mobile pour enregistrer l'instrument et confirmez-le sur le tableau de bord réel.

Si l'adresse ne peut pas être ouverte, vérifiez d'abord que les deux appareils sont bien sur le même réseau et que la session mobile est toujours en cours. Désactiver l'édition à distance, quitter l'éditeur ou passer l'application en arrière-plan arrêtera la session ; après la réouverture, l'adresse actuellement affichée sur le téléphone sera utilisée.

Cette connexion utilise du HTTP local non chiffré sans mot de passe de connexion distinct. Un périphérique ayant accès à cette adresse LAN peut être en mesure de lire ou de modifier le brouillon actuel et ses ressources, ou d'afficher le journal des modifications. Par conséquent, il n’est activé que sur un réseau de confiance. Une fois l'édition terminée, l'édition à distance est fermée et enregistrée sur le téléphone.

Déterminez d’abord s’il s’agit d’un problème de code ou d’un problème de données

Lorsque l'aperçu signale directement une erreur, regardez d'abord le numéro de ligne dans le journal. Vérifiez les parenthèses, les noms de propriétés et les types de données ; appeler toFixed sur une chaîne, par exemple, et ne localiser aucun signal sont deux problèmes différents.

Lorsque l'aperçu est normal mais que l'instrument réel n'a aucune valeur, vérifiez d'abord la source de données. Vérifiez le positionnement de la vitesse de base, vérifiez la liste des paramètres de l'appareil pour OBD, puis vérifiez les données et l'expression de lecture sélectionnées par l'instrument. Ne remplacez pas le test manquant par un numéro fixe et pensez que la connexion est corrigée.

Le contenu est entassé ou rogné

Réduisez-le d'abord à "un conteneur + une ligne de texte", confirmez l'espace disponible, puis remettez l'icône, la deuxième ligne de texte et les graphiques un par un. Vérifiez la largeur, la hauteur, la taille de la police et l’espacement fixes. Utilisez Stack pour organiser le contenu ; utilisez transform lorsqu'une translation, une mise à l'échelle ou une rotation globale est requise.

L'animation n'a aucun effet

Confirmez d'abord que l'attribut cible lui-même change réellement, puis confirmez que animations.property pointe vers cet attribut. Correction de sweepAngle={180} qui ne tournait pas tout seul simplement parce que l'animation était déclarée. Vérifiez d'abord avec les données modifiées dans l'aperçu, puis mettez à jour par rapport aux données réelles.

Faites une vérification complète avant de sauvegarder

Vérifiez l'apparence de différentes tailles et thèmes clairs et sombres ; vérifier les zéros valides, les mesures manquantes et les lectures de texte ; fermez l'aperçu et enregistrez avant d'ajouter la jauge à la page pour vérifier les données réelles. Ce n'est que lorsque l'apparence, le code et les lectures réelles correspondent que l'instrument peut être complété.