Más edición: diseño, animación y compartir

Primero practica agregando un ícono al lado de la velocidad. El ejemplo completo a continuación solo muestra el número fijo 78 para que los cambios de diseño sean fáciles de ver; todavía no alcanza la velocidad real.

La capa exterior HStack organiza los íconos y el contenido en el lado derecho, izquierdo y derecho. A la derecha VStack organiza los números y las unidades hacia arriba y hacia abajo. Entonces, lo que ves son dos niveles: toda la línea está dispuesta de izquierda a derecha, y el texto está dispuesto de arriba a abajo.

Pruebe tres modificaciones en secuencia: cambie la capa exterior spacing={12} a 24, los íconos y el texto estarán más separados; cambie la capa interna spacing={4} a 12, los números y unidades estarán más separados; cambie la capa interna alignment="leading" a "trailing", y las dos líneas de texto se alinearán a la derecha.

Observe los ejes de alineación: HStack usa alignment para alinear verticalmente, mientras que VStack alinea horizontalmente. x/y son desplazamientos visuales, no espacios: no cambian la posición de los elementos vecinos en el diseño.

Una vez determinado el diseño, reemplace el 78 fijo con la expresión de lectura en el primer ejemplo de velocidad y seleccione la velocidad en la configuración de datos. De esta manera solo cambias una cosa cada vez que practicas.

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 ejemplo convierte la velocidad en un ángulo de arco y luego agrega una transición para el cambio de ángulo. Primero seleccione la velocidad base en la configuración del medidor y luego pegue el código.

speed / 200 obtiene la relación relativa a 200, limitada a 0…1 y luego multiplicada por 360, que es el ángulo actual que se va a dibujar. Por ejemplo, cuando la velocidad es 50, el ángulo es 90° y cuando la velocidad es 100, el ángulo es 180°. El 200 aquí es un rango de ejemplo, utilizando el valor en la unidad de velocidad actual, que puede modificarse según su propio instrumento.

startAngle={-90} coloca el punto de partida en la parte superior; sweepAngle determina cuántos ángulos barrer desde el punto inicial. El property: 'sweepAngle' en animations significa animar el cambio de este atributo: al cambiar de 90° a 180°, se necesitan 0,25 segundos para completar la transición.

Intente cambiar duration a 1 y observe cómo el arco sigue al nuevo objetivo más lentamente. La animación no aumenta la frecuencia de muestreo de los datos reales ni convierte automáticamente el arco en una animación cronometrada; debe haber un nuevo ángulo objetivo para que se produzca el cambio.

El siguiente código muestra una línea horizontal cuando no hay velocidad, sin disfrazar la prueba faltante como cero. Los arcos se dibujan sólo para lecturas 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' },
      ]}
    />
  );
}

Cierre la vista previa y guarde el instrumento antes de exportarlo desde el menú del instrumento guardado. .instrument contiene código, recursos de imágenes y definiciones de entrada, que se pueden enviar o guardar en "archivos" a través del panel para compartir del sistema. Se exportan los valores predeterminados en la definición. Los valores de entrada modificados localmente no se exportan. Los enlaces de dispositivos OBD no se exportan.

El destinatario lo abre con CapDrive y aún debe agregarse a la página mediante Editar panel después de la importación. Establezca sus propios valores, texto u opciones en Vinculaciones de entrada; La entrada OBD selecciona los parámetros correspondientes del vehículo del dispositivo receptor.

Cuando comparta indicadores de RPM o temperatura del refrigerante, indique qué lectura del vehículo se requiere y dónde está vinculada. Mientras se conserve el identificador de entrada, volver a vincular el dispositivo no requiere modificar el código. Verifique diferentes tamaños y temas antes de compartir, y verifique la información personal en el código, los recursos y el texto predeterminado.

Lo que se está editando en la computadora es el borrador del instrumento actualmente abierto en el teléfono. Primero ingrese al editor de este instrumento en el teléfono móvil y luego conéctese en el siguiente orden:

1. Conecte el iPhone y la computadora a la misma red Wi-Fi.
2. Abra Edición remota en el editor móvil y espere a que aparezca la dirección.
3. Ingrese la dirección completa que se muestra en su teléfono en el navegador de su computadora. No utilice la dirección de sesión anterior y no confunda el host local de su computadora con la dirección de su teléfono.
4. Mantenga abierta su sesión de edición móvil, modifique algo fácilmente identificable en su computadora, como el tamaño de fuente, y luego obtenga una vista previa de los cambios en su teléfono móvil.
5. Una vez completada la edición, regrese al teléfono móvil para guardar el instrumento y confírmelo en el panel de instrumentos real.

Si no se puede abrir la dirección, primero confirme que los dos dispositivos estén efectivamente en la misma red y que la sesión móvil aún esté ejecutándose. Desactivar la edición remota, salir del editor o cambiar la aplicación a segundo plano detendrá la sesión; después de reabrir, se utilizará la dirección que se muestra actualmente en el teléfono.

Esta conexión utiliza HTTP local sin cifrar y sin contraseña de inicio de sesión separada. Un dispositivo con acceso a esta dirección LAN puede leer o modificar el borrador actual y sus recursos, o ver el registro de edición. Por lo tanto, sólo está habilitado en una red confiable. Una vez completada la edición, la edición remota se cierra y se guarda en el teléfono.

Primero determine si es un problema de código o un problema de datos.

Cuando la vista previa informa directamente un error, primero mire el número de línea en el registro. Verifique los paréntesis, los nombres de propiedades y los tipos de datos; llamar a toFixed en una cadena, por ejemplo, y no localizar ninguna señal son dos problemas diferentes.

Cuando la vista previa es normal pero el instrumento real no tiene valor, verifique primero la fuente de datos. Verifique el posicionamiento de la velocidad básica, verifique la lista de parámetros del dispositivo para OBD y luego verifique los datos y la expresión de lectura seleccionados por el instrumento. No reemplace la prueba que falta con un número fijo y piense que la conexión está fija.

El contenido está amontonado o recortado

Primero redúzcalo a "un contenedor + una línea de texto", confirme el espacio disponible y luego vuelva a colocar el ícono, la segunda línea de texto y los gráficos uno por uno. Verifique el ancho, alto, tamaño de fuente y espaciado fijos. Utilice Stack para organizar el contenido; utilice transform cuando se requiera traducción, escalado o rotación general.

La animación no tiene ningún efecto.

Primero confirme que el atributo de destino en sí está realmente cambiando y luego confirme que animations.property apunte a este atributo. Se corrigió que sweepAngle={180} no girara solo porque se declaraba la animación. Primero verifique con los datos modificados en la vista previa y luego actualice con los datos reales.

Haz una verificación completa antes de guardar

Verifique la apariencia en diferentes tamaños y temas claros y oscuros; verificar ceros válidos, medidas faltantes y lecturas de texto; cierre la vista previa y guárdela antes de agregar el medidor a la página para verificar los datos reales. Sólo cuando la apariencia, el código y las lecturas reales coincidan se podrá completar el instrumento.