Dein erstes Geschwindigkeitsinstrument

Öffnen Sie Mehr（…）→ Eigene Instrumente im Dashboard und wählen Sie Neues Instrument hinzufügen aus. Der neue Zähler verfügt bereits über einen Basisgeschwindigkeitseingang.

1. Klicken Sie oben im Editor auf den Namen, gehen Sie zu Instrumenteneinstellungen und nennen Sie es „My Speed“.
2. Klicken Sie auf das Zahnrad neben Eingabezuordnungen, um Parameterkonfiguration zu öffnen. Überprüfen Sie die Geschwindigkeitseingabe: Identifikator ist speed, Typ ist Basisdaten, Quelle ist Geschwindigkeit. Wenn es fehlt, verwenden Sie Parameter hinzufügen, um ein neues zu erstellen.
3. Klicken Sie auf Fertig, um zurückzukehren und die Einstellungen zu speichern, und kehren Sie dann zum Bearbeitungsbereich zurück.

Das Skript liest die Geschwindigkeit über $data.current.speed; hier stammen die Feldnamen aus der Eingabekennung. Der Editor stellt Typhinweise wie definiert bereit. Für dieses Beispiel ist die Bindung OBD nicht erforderlich.

Ersetzen Sie den gesamten Originalinhalt des Bearbeitungsbereichs durch den vollständigen Code unten. Wickeln Sie es nicht in ein anderes main() ein. Dieses Beispiel hat nur eine Eingabefunktion.

Lassen Sie uns den Code vorerst beibehalten. Es liest die aktuelle Geschwindigkeit jedes Mal, wenn sie gezeichnet werden muss, und ordnet die Werte und Einheiten nach oben und unten an. Wenn ein Messwert fehlt, wird eine horizontale Linie angezeigt. Im nächsten Abschnitt wird es in der Ausführungsreihenfolge erläutert.

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>
  );
}

Schauen Sie sich zuerst die Daten an, dann das Bild. Angenommen, dieses Mal ist speed { value: 42.3, unit: "km/h" }:

1. const speed = $data.current.speed Holen Sie sich diese Lektüre. Hier ist speed ein Objekt, das numerische Werte und Einheiten enthält, nicht die Zahl selbst.
2. speed?.value == null prüft auf fehlende Messwerte. Wenn das Objekt nicht existiert oder der Wert leer ist, wird '—' ausgewählt; Wenn der Wert 0 ist, wird dieser Zweig nicht genommen.
3. Math.round(speed.value) rundet 42.3 auf 42 und gibt es zur Anzeige an das erste Text weiter. Das Runden wirkt sich nur auf die Anzeige dieses Messgeräts aus und verändert nicht den ursprünglichen Messwert.
4. Der zweite Text zeigt speed.unit an. Wenn derzeit keine Einheiten vorhanden sind, verwendet ?? $env.speedUnit die Geschwindigkeitseinheit der aktuellen Anzeigeumgebung.
5. VStack ordnet zwei Texte übereinander an und spacing={8} steuert den Abstand zwischen ihnen.

$env.foreground und $env.accent stellen die Text- und Akzentfarben für das aktuelle Thema bereit. Diese Farben werden aktualisiert, wenn sich das Thema ändert.

Verwenden Sie speed?.value || '—' nicht, um fehlende Messwerte zu beurteilen: JavaScript behandelt gültige Nullen als falsche Werte, was dazu führt, dass die horizontale Linie beim Parken falsch angezeigt wird.

Klicken Sie unten im Editor auf Vorschau. Sie sollten oben eine größere Geschwindigkeitszahl und in der unteren Reihe kleinere Einheiten sehen. Bei den Zahlen in der Vorschau handelt es sich um simulierte Werte, die kein Starten des Fahrzeugs erfordern und nicht unbedingt mit der vom Mobiltelefon zu diesem Zeitpunkt gemessenen Geschwindigkeit übereinstimmen.

Nehmen Sie dann drei kleine Änderungen vor und zeigen Sie jedes Mal eine Vorschau an:

Schauen Sie sich die verschiedenen Größen sowie die hellen und dunklen Designs an. Wenn Inhalte auf eine bestimmte Größe zugeschnitten werden, reduzieren Sie zunächst die Schriftgröße oder den Schriftabstand und beobachten Sie dann. Verwenden Sie nicht viele x/y-Offsets, um Layoutprobleme zu vertuschen.

Wenn ein Fehler auftritt, stellen Sie den ursprünglichen Zustand wieder her und überprüfen Sie ihn anhand der Zeilennummer im Protokoll. In der Vorschau ist die obere rechte Ecke Protokoll; Nachdem Sie die Vorschau geschlossen und zum Bearbeitungsstatus zurückgekehrt sind, wird in der oberen rechten Ecke wieder Sichern angezeigt. Eine erfolgreiche Vorschau bedeutet lediglich, dass diese Simulationseingaben angezeigt werden können und die tatsächlichen Daten im nächsten Schritt überprüft werden müssen.

Schließen Sie die Vorschau, klicken Sie auf Sichern, verlassen Sie den Editor und suchen Sie in der Instrumentenbibliothek nach „My Speed“. Öffnen Sie Mehr（…）→ Dashboard bearbeiten erneut, klicken Sie auf +, um es hinzuzufügen, und klicken Sie schließlich auf Fertig.

An diesem Punkt wechselt die Karte, um die tatsächliche Geschwindigkeit anzuzeigen. Sie können es und den eingebauten Geschwindigkeitsmesser zur Überprüfung auf derselben Seite platzieren: Wenn sie dasselbe grundlegende Geschwindigkeitsfeld verwenden, sollten die Werte übereinstimmen; Aufgrund unterschiedlicher Dezimalaufbewahrungsmethoden kann die Anzeige geringfügig abweichen.

Zu diesem Zeitpunkt ist das erste Instrument fertig. Ersetzen Sie im nächsten Artikel „Geschwindigkeit abrufen“ durch „Erhalten Sie Ihren eigenen OBD-Parameter“, und der Layout- und Anzeigecode kann weiterhin verwendet werden.