Crear tu primer velocímetro

Abra Más（…）→ Instrumentos personalizados en el tablero y seleccione Añadir un instrumento. El nuevo medidor ya viene con una entrada de velocidad base.

1. Haga clic en el nombre en la parte superior del editor, vaya a Ajustes del instrumento y asígnele el nombre "Mi velocidad".
2. Haga clic en el engranaje al lado de Vinculaciones de entrada para abrir Configuración de parámetros. Verifique la entrada de velocidad: el identificador es speed, el tipo es Datos básicos, la fuente es Velocidad. Si falta, use Añadir parámetro para crear uno nuevo.
3. Haga clic en Listo para regresar y guardar la configuración, luego regrese al área de edición.

El script lee la velocidad a través de $data.current.speed; aquí los nombres de los campos provienen del identificador de entrada. El editor proporciona sugerencias de tipo según lo definido. Este ejemplo no requiere el enlace OBD.

Reemplace todo el contenido original del área de edición con el código completo a continuación. No lo envuelvas en otro main(). Este ejemplo tiene solo una función de entrada.

Mantengamos el código igual por ahora. Leerá la velocidad actual cada vez que sea necesario dibujarla, organizará los valores y las unidades hacia arriba y hacia abajo; cuando falta una lectura, mostrará una línea horizontal. La siguiente sección lo explica en orden de ejecución.

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

Mire primero los datos y luego la imagen. Supongamos que esta vez speed es { value: 42.3, unit: "km/h" }:

1. const speed = $data.current.speed Obtenga esta lectura. Aquí speed es un objeto que contiene valores numéricos y unidades, no el número en sí.
2. speed?.value == null busca mediciones ausentes. Cuando el objeto no existe o el valor está vacío, se selecciona '—'; cuando el valor es 0, esta rama no se tomará.
3. Math.round(speed.value) redondea 42.3 a 42 y lo entrega al primer Text para su visualización. El redondeo sólo afecta la visualización de este medidor y no modifica la lectura original.
4. El segundo Text muestra speed.unit. Cuando actualmente no hay unidades, ?? $env.speedUnit usa la unidad de velocidad del entorno de visualización actual.
5. VStack organiza dos textos uno encima del otro y spacing={8} controla el espacio entre ellos.

$env.foreground y $env.accent proporcionan el texto y los colores de acento para el tema actual. Estos colores se actualizarán cuando cambie el tema.

No utilice speed?.value || '—' para juzgar las mediciones ausentes: JavaScript tratará los ceros válidos como valores falsos, lo que provocará que la línea horizontal se muestre incorrectamente al estacionar.

Haga clic en Vista previa en la parte inferior del editor. Debería ver un número de velocidad mayor en la parte superior y unidades más pequeñas en la fila inferior. Los números en la vista previa son valores simulados, que no requieren arrancar el vehículo y no necesariamente son iguales a la velocidad medida por el teléfono móvil en ese momento.

Luego haga tres pequeñas modificaciones y luego obtenga una vista previa cada vez:

Echa un vistazo a los diferentes tamaños y temas claros y oscuros. Cuando el contenido se recorta a un tamaño determinado, primero reduzca el tamaño de la fuente o el espaciado y luego observe. No utilice una gran cantidad de desplazamientos x/y para ocultar problemas de diseño.

Si ocurre un error, restáurelo al estado original y verifique de acuerdo con el número de línea en el registro. Al obtener una vista previa, la esquina superior derecha es Registros; después de cerrar la vista previa y volver al estado de edición, la esquina superior derecha vuelve a Guardar. Una vista previa exitosa solo significa que este conjunto de entradas de simulación se puede mostrar y los datos reales deben verificarse en el siguiente paso.

Cierre la vista previa, haga clic en Guardar, salga del editor y busque "Mi velocidad" en la biblioteca de instrumentos. Abra Más（…）→ Editar panel nuevamente, haga clic en + para agregarlo y finalmente haga clic en Listo.

En este punto, la tarjeta cambia para leer la velocidad real. Puede ponerlo y el medidor de velocidad incorporado en la misma página para verificación: cuando usan el mismo campo de velocidad básica, los valores deben corresponder; Debido a los diferentes métodos de retención decimal, la visualización puede ser ligeramente diferente.

En este punto, el primer instrumento está completo. En el próximo artículo, reemplace "obtener velocidad" con "obtenga su propio parámetro OBD" y podrá seguir utilizando el diseño y el código de visualización.