Mais edição: disposição, animação e compartilhamento

Primeiro pratique adicionar um ícone próximo à velocidade. O exemplo completo abaixo mostra apenas o número fixo 78 para facilitar a visualização das alterações de layout; ainda não atinge a velocidade real.

A camada externa HStack organiza os ícones e o conteúdo no lado direito, esquerdo e direito. À direita VStack organize os números e unidades para cima e para baixo. Então o que você vê são dois níveis: a linha inteira está organizada à esquerda e à direita, e o texto está organizado para cima e para baixo.

Tente três modificações em sequência: mude a camada externa spacing={12} para 24, os ícones e o texto ficarão mais distantes; mude a camada interna spacing={4} para 12, os números e unidades ficarão mais distantes; altere a camada interna alignment="leading" para "trailing" e as duas linhas de texto serão alinhadas à direita.

Observe os eixos de alinhamento: HStack usa alignment para o alinhamento vertical, enquanto VStack alinha horizontalmente. x/y são deslocamentos visuais, não espaçamentos: eles não alteram a posição dos elementos vizinhos no layout.

Depois que o layout for determinado, substitua o 78 fixo pela expressão de leitura no primeiro exemplo de velocidade e selecione a velocidade nas configurações de dados. Dessa forma, você muda apenas uma coisa cada vez que pratica.

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

Este exemplo converte a velocidade em um ângulo de arco e depois adiciona uma transição para a mudança de ângulo. Primeiro selecione a velocidade base nas configurações do medidor e depois cole o código.

speed / 200 obtém a proporção relativa a 200, limitada a 0…1 e depois multiplicada por 360, que é o ângulo atual a ser desenhado. Por exemplo, quando a velocidade é 50, o ângulo é 90°, e quando a velocidade é 100, o ângulo é 180°. O 200 aqui é um exemplo de faixa, utilizando o valor na unidade de velocidade atual, que pode ser modificada de acordo com seu próprio instrumento.

startAngle={-90} coloca o ponto inicial no topo; sweepAngle determina quantos ângulos varrer a partir do ponto inicial. O property: 'sweepAngle' em animations significa animar a mudança deste atributo: ao mudar de 90° para 180°, leva 0,25 segundos para completar a transição.

Tente mudar duration para 1 e observe o arco seguir o novo alvo mais lentamente. A animação não aumenta a frequência de amostragem dos dados reais, nem transforma automaticamente o arco em uma animação cronometrada; deve haver um novo ângulo alvo para que a mudança ocorra.

O código a seguir exibe uma linha horizontal quando não há velocidade, sem disfarçar o teste ausente como zero. Os arcos são desenhados apenas para leituras numéricas válidas.

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

Feche a visualização e salve o instrumento antes de exportar do menu do instrumento salvo. .instrument contém código, recursos de imagem e definições de entrada, que podem ser enviados ou salvos em “arquivos” através do painel de compartilhamento do sistema. Os valores padrão na definição são exportados. Os valores de entrada modificados localmente não são exportados. As vinculações de dispositivos OBD não são exportadas.

O destinatário abre com CapDrive e ainda precisa ser adicionado à página via Editar painel após a importação. Defina seus próprios valores, texto ou opções em Vínculos de entrada; input OBD seleciona os parâmetros de veículo correspondentes do dispositivo destinatário.

Ao compartilhar medidores de RPM ou temperatura do líquido refrigerante, indique qual leitura do veículo é necessária e onde ela está vinculada. Contanto que o identificador de entrada seja preservado, a religação do dispositivo não requer modificação do código. Verifique diferentes tamanhos e temas antes de compartilhar e verifique informações pessoais em código, ativos e texto padrão.

O que está sendo editado no computador é o rascunho do instrumento atualmente aberto no telefone. Primeiro entre no editor deste instrumento no celular e depois conecte-se na seguinte ordem:

1. Conecte o iPhone e o computador à mesma rede Wi-Fi.
2. Abra Edição remota no editor mobile e espere o endereço aparecer.
3. Digite o endereço completo exibido em seu telefone no navegador do computador. Não use o endereço de sessão antigo e não confunda o host local do seu computador com o endereço do seu telefone.
4. Mantenha sua sessão de edição móvel aberta, modifique algo facilmente identificável em seu computador, como o tamanho da fonte, e visualize as alterações em seu celular.
5. Após a conclusão da edição, retorne ao celular para salvar o instrumento e confirme no próprio painel de instrumentos.

Se o endereço não puder ser aberto, primeiro confirme se os dois dispositivos estão realmente na mesma rede e se a sessão móvel ainda está em execução. Desativar a edição remota, sair do editor ou colocar o aplicativo em segundo plano interromperá a sessão; após a reabertura, será utilizado o endereço atualmente exibido no telefone.

Esta conexão usa HTTP local não criptografado sem senha de login separada. Um dispositivo com acesso a este endereço LAN pode ler ou modificar o rascunho atual e seus recursos, ou visualizar o log de edição. Portanto, ele só está habilitado em uma rede confiável. Após a conclusão da edição, a edição remota é fechada e salva no telefone.

Primeiro determine se é um problema de código ou de dados

Quando a visualização relatar diretamente um erro, primeiro observe o número da linha no log. Verifique parênteses, nomes de propriedades e tipos de dados; chamar toFixed em uma string, por exemplo, e não localizar nenhum sinal são dois problemas diferentes.

Quando a visualização é normal, mas o instrumento real não tem valor, verifique primeiro a fonte de dados. Verifique o posicionamento da velocidade básica, verifique a lista de parâmetros do dispositivo para OBD e, em seguida, verifique os dados e a expressão de leitura selecionada pelo instrumento. Não substitua o teste que falta por um número fixo e pense que a conexão está consertada.

O conteúdo está aglomerado ou cortado

Primeiro reduza-o para "um contêiner + uma linha de texto", confirme o espaço disponível e, em seguida, coloque de volta o ícone, a segunda linha de texto e os gráficos, um por um. Verifique a largura, altura, tamanho da fonte e espaçamento fixos. Use Stack para organizar o conteúdo; use transform quando tradução, dimensionamento ou rotação geral for necessária.

A animação não tem efeito

Primeiro confirme se o próprio atributo de destino está realmente mudando e, em seguida, confirme se animations.property aponta para esse atributo. Corrigido sweepAngle={180} que não girava sozinho apenas porque a animação foi declarada. Primeiro verifique os dados alterados na visualização e, em seguida, atualize com os dados reais.

Faça uma verificação completa antes de salvar

Verifique a aparência em diferentes tamanhos e temas claros e escuros; verificar zeros válidos, medidas faltantes e leituras de texto; feche a visualização e salve antes de adicionar o medidor à página para verificar os dados reais. Somente quando a aparência, o código e as leituras reais corresponderem o instrumento poderá ser concluído.