Crie seu primeiro velocímetro

Abra Mais（…）→ Instrumentos personalizados no painel e selecione Adicionar novo instrumento. O novo medidor já vem com entrada de velocidade base.

1. Clique no nome na parte superior do editor, vá para Ajustes do instrumento e nomeie-o como "My Speed".
2. Clique na engrenagem ao lado de Vínculos de entrada para abrir Configuração de parâmetros. Verifique a entrada de velocidade: o identificador é speed, o tipo é Dados básicos, a fonte é Velocidade. Se estiver faltando, use Adicionar parâmetro para criar um novo.
3. Clique em OK para retornar e salvar as configurações e depois retornar à área de edição.

O script lê a velocidade via $data.current.speed; aqui os nomes dos campos vêm do identificador de entrada. O editor fornece dicas de tipo conforme definido. Este exemplo não requer a ligação OBD.

Substitua todo o conteúdo original da área de edição pelo código completo abaixo. Não embrulhe em outro main(). Este exemplo possui apenas uma função de entrada.

Vamos manter o código igual por enquanto. Ele irá ler a velocidade atual toda vez que precisar ser desenhada, organizar os valores e unidades para cima e para baixo; quando houver uma leitura faltante, será exibida uma linha horizontal. A próxima seção explica isso em ordem de execução.

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

Observe primeiro os dados e depois a imagem. Suponha que desta vez speed seja { value: 42.3, unit: "km/h" }:

1. const speed = $data.current.speed Faça esta leitura. Aqui speed é um objeto que contém valores numéricos e unidades, não o número em si.
2. speed?.value == null verifica medições ausentes. Quando o objeto não existe ou o valor está vazio, '—' é selecionado; quando o valor for 0, esta ramificação não será utilizada.
3. Math.round(speed.value) arredonda 42.3 para 42 e o entrega ao primeiro Text para exibição. O arredondamento afeta apenas a exibição deste medidor e não modifica a leitura original.
4. O segundo Text exibe speed.unit. Quando não há unidades no momento, ?? $env.speedUnit usa a unidade de velocidade do ambiente de exibição atual.
5. VStack organiza dois textos um acima do outro e spacing={8} controla o espaçamento entre eles.

$env.foreground e $env.accent fornecem o texto e as cores de destaque para o tema atual. Essas cores serão atualizadas quando o tema mudar.

Não use speed?.value || '—' para julgar testes faltantes: JavaScript tratará zeros válidos como valores falsos, fazendo com que a linha horizontal seja exibida incorretamente ao estacionar.

Clique em Prévia na parte inferior do editor. Você deverá ver um número de velocidade maior na parte superior e unidades menores na linha inferior. Os números da visualização são valores simulados, que dispensam a partida do veículo e não são necessariamente iguais à velocidade medida pelo celular neste momento.

Em seguida, faça três pequenas modificações e visualize cada vez:

Confira os diferentes tamanhos e temas claros e escuros. Quando o conteúdo é cortado em um determinado tamanho, primeiro reduza o tamanho da fonte ou o espaçamento e depois observe. Não use um grande número de deslocamentos x/y para encobrir problemas de layout.

Se ocorrer um erro, restaure-o ao estado original e verifique de acordo com o número da linha no log. Ao visualizar, o canto superior direito é Logs; após fechar a visualização e retornar ao estado de edição, o canto superior direito retorna para Salvar. Uma visualização bem-sucedida significa apenas que este conjunto de entradas de simulação pode ser exibido e os dados reais precisam ser verificados na próxima etapa.

Feche a visualização, clique em Salvar, saia do editor e encontre "My Speed" na biblioteca de instrumentos. Abra Mais（…）→ Editar painel novamente, clique em + para adicioná-lo e, por fim, clique em OK.

Neste ponto, o cartão muda para ler a velocidade real. Você pode colocá-lo e o medidor de velocidade integrado na mesma página para verificação: quando eles usam o mesmo campo de velocidade básica, os valores devem corresponder; devido a diferentes métodos de retenção decimal, a exibição pode ser ligeiramente diferente.

Neste ponto, o primeiro instrumento está completo. No próximo artigo, substitua "obter velocidade" por "obter seu próprio parâmetro OBD" e o layout e o código de exibição poderão continuar a ser usados.