Crea il tuo primo tachimetro

Apri Altro（…）→ Strumenti personalizzati nel dashboard e seleziona Aggiungi uno strumento. Il nuovo misuratore è già dotato di un ingresso per la velocità di base.

1. Fai clic sul nome nella parte superiore dell'editor, vai su Impostazioni strumento e chiamalo "My Speed".
2. Fai clic sull'ingranaggio accanto a Associazioni di ingresso per aprire Configurazione dei parametri. Controlla l'input della velocità: l'identificatore è speed, il tipo è Dati di base, la sorgente è Velocità. Se mancante, utilizza Aggiungi parametro per crearne uno nuovo.
3. Fare clic su Fine per tornare indietro e salvare le impostazioni, quindi tornare all'area di modifica.

Lo script legge la velocità tramite $data.current.speed; qui i nomi dei campi provengono dall'identificatore di input. L'editor fornisce suggerimenti sul tipo come definito. Questo esempio non richiede l'associazione OBD.

Sostituisci l'intero contenuto originale dell'area di modifica con il codice completo riportato di seguito. Non avvolgerlo in un altro main(). Questo esempio ha una sola funzione di ingresso.

Manteniamo il codice lo stesso per ora. Leggerà la velocità corrente ogni volta che sarà necessario tracciarla, sistemerà i valori e le unità su e giù; quando manca una lettura, verrà visualizzata una linea orizzontale. La sezione successiva lo spiega in ordine di esecuzione.

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

Guarda prima i dati, poi l'immagine. Supponiamo che questa volta speed sia { value: 42.3, unit: "km/h" }:

1. const speed = $data.current.speed Leggi questa lettura. Qui speed è un oggetto contenente valori numerici e unità, non il numero stesso.
2. speed?.value == null controlla i misurazioni mancanti. Quando l'oggetto non esiste o il valore è vuoto, viene selezionato '—'; quando il valore è 0, questo ramo non verrà preso.
3. Math.round(speed.value) arrotonda 42.3 a 42 e lo passa al primo Text per la visualizzazione. L'arrotondamento influisce solo sulla visualizzazione di questo misuratore e non modifica la lettura originale.
4. Il secondo Text visualizza speed.unit. Quando al momento non sono presenti unità, ?? $env.speedUnit utilizza l'unità di velocità dell'ambiente di visualizzazione corrente.
5. VStack dispone due testi uno sopra l'altro e spacing={8} controlla la spaziatura tra loro.

$env.foreground e $env.accent forniscono il testo e i colori principali per il tema corrente. Questi colori verranno aggiornati quando il tema cambia.

Non utilizzare speed?.value || '—' per giudicare i misurazioni mancanti: JavaScript tratterà gli zeri validi come valori falsi, causando una visualizzazione errata della linea orizzontale durante il parcheggio.

Fai clic su Anteprima nella parte inferiore dell'editor. Dovresti vedere un numero di velocità più grande sulle unità superiori e più piccole sulla riga inferiore. I numeri nell'anteprima sono valori simulati, che non richiedono l'avvio del veicolo, e non corrispondono necessariamente alla velocità misurata in quel momento dal telefono cellulare.

Quindi apporta tre piccole modifiche e quindi visualizza l'anteprima ogni volta:

Scopri le diverse dimensioni e i temi chiari e scuri. Quando il contenuto viene ritagliato a una determinata dimensione, ridurre prima la dimensione del carattere o la spaziatura, quindi osservare. Non utilizzare un numero elevato di offset x/y per coprire problemi di layout.

Se si verifica un errore, ripristinarlo allo stato originale e controllare in base al numero di riga nel registro. Durante l'anteprima, l'angolo in alto a destra è Log; dopo aver chiuso l'anteprima e tornato allo stato di modifica, l'angolo in alto a destra ritorna a Salva. Un'anteprima riuscita significa solo che questo insieme di input di simulazione può essere visualizzato e che i dati effettivi devono essere controllati nel passaggio successivo.

Chiudi l'anteprima, fai clic su Salva, esci dall'editor e trova "My Speed" nella libreria degli strumenti. Apri di nuovo Altro（…）→ Modifica cruscotto, fai clic su + per aggiungerlo e infine fai clic su Fine.

A questo punto la scheda cambia per leggere la velocità effettiva. Puoi metterlo e il misuratore di velocità integrato sulla stessa pagina per la verifica: quando utilizzano lo stesso campo di velocità di base, i valori dovrebbero corrispondere; a causa dei diversi metodi di conservazione dei decimali, la visualizzazione potrebbe essere leggermente diversa.

A questo punto il primo strumento è completo. Nel prossimo articolo, sostituisci "ottieni velocità" con "ottieni il tuo parametro OBD" e il layout e il codice di visualizzazione potranno continuare a essere utilizzati.