Altre modifiche: disposizione, animazioni e condivisione

Per prima cosa esercitati ad aggiungere un'icona accanto alla velocità. L'esempio completo di seguito mostra solo il numero fisso 78 per rendere le modifiche al layout facili da vedere; non raggiunge ancora la velocità effettiva.

Lo strato esterno HStack dispone le icone e il contenuto sul lato destro, a destra e a sinistra. Sulla destra VStack disponi i numeri e le unità su e giù. Quindi quello che vedi sono due livelli: l'intera riga è disposta a sinistra e a destra e il testo è disposto su e giù.

Prova tre modifiche in sequenza: cambia il livello esterno spacing={12} in 24, le icone e il testo saranno più distanti; cambia lo strato interno spacing={4} in 12, i numeri e le unità saranno più distanti; cambia il livello interno alignment="leading" in "trailing" e le due righe di testo saranno allineate a destra.

Osservare gli assi di allineamento: HStack usa alignment per l’allineamento verticale, mentre VStack allinea orizzontalmente. x/y sono spostamenti visivi, non spaziature: non cambiano la posizione degli elementi vicini nel layout.

Dopo aver determinato il layout, sostituire il 78 fisso con l'espressione di lettura nel primo esempio di velocità e selezionare la velocità nelle impostazioni dei dati. In questo modo cambi solo una cosa ogni volta che ti eserciti.

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

Questo esempio converte la velocità in un angolo di arco e quindi aggiunge una transizione per la modifica dell'angolo. Seleziona prima la velocità di base nelle impostazioni del contatore e poi incolla il codice.

speed / 200 ottiene il rapporto relativo a 200, limitato a 0…1 e quindi moltiplicato per 360, che è l'angolo corrente da disegnare. Ad esempio, quando la velocità è 50, l'angolo è 90° e quando la velocità è 100, l'angolo è 180°. Il 200 qui è un intervallo di esempio, utilizzando il valore nell'unità di velocità corrente, che può essere modificato in base al proprio strumento.

startAngle={-90} mette il punto di partenza in alto; sweepAngle determina quanti angoli spazzare dal punto iniziale. Il property: 'sweepAngle' in animations significa animare il cambiamento di questo attributo: quando si cambia da 90° a 180°, ci vogliono 0,25 secondi per completare la transizione.

Prova a cambiare duration in 1 e osserva l'arco seguire il nuovo bersaglio più lentamente. L'animazione non aumenta la frequenza di campionamento dei dati reali, né trasforma automaticamente l'arco in un'animazione temporizzata; perché si verifichi la modifica deve esserci un nuovo angolo target.

Il codice seguente visualizza una linea orizzontale quando non c'è velocità, senza mascherare il test mancante come zero. Gli archi vengono disegnati solo per letture numeriche valide.

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' },
      ]}
    />
  );
}

Chiudi l'anteprima e salva lo strumento prima di esportarlo dal menu dello strumento salvato. .instrument contiene codice, risorse immagine e definizioni di input, che possono essere inviate o salvate in "file" tramite il pannello di condivisione del sistema. I valori predefiniti nella definizione vengono esportati. I valori di input modificati localmente non vengono esportati. Le associazioni del dispositivo OBD non vengono esportate.

Il destinatario lo apre con CapDrive e deve ancora essere aggiunto alla pagina tramite Modifica cruscotto dopo l'importazione. Imposta i tuoi valori, testo o opzioni nel Associazioni di ingresso; l'ingresso OBD seleziona i parametri veicolo corrispondenti del dispositivo ricevente.

Quando si condividono gli indicatori di velocità o temperatura del liquido di raffreddamento, indicare quale lettura del veicolo è richiesta e dove è diretta. Finché l'identificatore di input viene conservato, la riassociazione del dispositivo non richiede la modifica del codice. Controlla dimensioni e temi diversi prima della condivisione e verifica la presenza di informazioni personali nel codice, nelle risorse e nel testo predefinito.

Ciò che viene modificato sul computer è la bozza dello strumento attualmente aperto sul telefono. Per prima cosa accedere all'editor di questo strumento sul cellulare, quindi connettersi nel seguente ordine:

1. Collega iPhone e computer alla stessa rete Wi-Fi.
2. Apri Modifica remota nell'editor mobile e attendi che venga visualizzato l'indirizzo.
3. Inserisci l'indirizzo completo visualizzato sul tuo telefono nel browser del tuo computer. Non utilizzare il vecchio indirizzo di sessione e non confondere l'host locale del tuo computer con l'indirizzo del tuo telefono.
4. Mantieni aperta la sessione di modifica mobile, modifica qualcosa di facilmente identificabile sul tuo computer, come la dimensione del carattere, quindi visualizza in anteprima le modifiche sul tuo telefono cellulare.
5. Una volta completata la modifica, tornare al telefono cellulare per salvare lo strumento e confermarlo sul quadro strumenti vero e proprio.

Se non è possibile aprire l'indirizzo, verificare innanzitutto che i due dispositivi siano effettivamente sulla stessa rete e che la sessione mobile sia ancora in esecuzione. Disattivare la modifica remota, abbandonare l'editor o passare l'app in background interromperà la sessione; alla riapertura verrà utilizzato l'indirizzo attualmente visualizzato sul telefono.

Questa connessione utilizza HTTP locale non crittografato senza password di accesso separata. Un dispositivo con accesso a questo indirizzo LAN potrebbe essere in grado di leggere o modificare la bozza corrente e le sue risorse oppure visualizzare il registro delle modifiche. Pertanto, è abilitato solo su una rete attendibile. Una volta completata la modifica, la modifica remota viene chiusa e salvata sul telefono.

Determinare innanzitutto se si tratta di un problema di codice o di dati

Quando l'anteprima segnala direttamente un errore, guarda prima il numero di riga nel registro. Controlla parentesi, nomi di proprietà e tipi di dati; chiamare toFixed su una stringa, ad esempio, e non individuare alcun segnale sono due problemi diversi.

Quando l'anteprima è normale ma lo strumento reale non ha alcun valore, controllare prima l'origine dati. Controllare il posizionamento per la velocità di base, controllare l'elenco dei parametri del dispositivo per OBD, quindi controllare i dati e l'espressione di lettura selezionati dallo strumento. Non sostituire il test mancante con un numero fisso pensando che la connessione sia fissa.

Il contenuto è affollato o ritagliato

Per prima cosa riducilo a "un contenitore + una riga di testo", conferma lo spazio disponibile, quindi rimetti l'icona, la seconda riga di testo e la grafica uno per uno. Verifica la larghezza, l'altezza, la dimensione del carattere e la spaziatura fisse. Utilizza Stack per organizzare i contenuti; utilizzare transform quando è richiesta una traslazione, un ridimensionamento o una rotazione complessiva.

L'animazione non ha alcun effetto

Innanzitutto verificare che l'attributo di destinazione stesso stia realmente cambiando, quindi verificare che animations.property punti a questo attributo. Risolto il problema con il sweepAngle={180} che non girava da solo solo perché veniva dichiarata l'animazione. Verificare innanzitutto con i dati modificati nell'anteprima, quindi aggiornare rispetto ai dati effettivi.

Fai un controllo completo prima di salvare

Controlla l'aspetto in diverse dimensioni e temi chiari e scuri; verificare zeri validi, misurazioni mancanti e letture di testo; chiudi l'anteprima e salva prima di aggiungere il misuratore alla pagina per verificare i dati effettivi. Solo quando l'aspetto, il codice e le letture reali coincidono, lo strumento può essere completato.