추가 편집: 배치, 애니메이션, 공유

먼저 속도 옆에 아이콘을 추가하는 연습을 해보세요. 아래의 전체 예에서는 레이아웃 변경 사항을 쉽게 확인할 수 있도록 고정 숫자 78만 표시합니다. 아직 실제 속도를 활용하지 않습니다.

외부 레이어 HStack은 오른쪽과 왼쪽에 아이콘과 콘텐츠를 정렬합니다. 오른쪽에 VStack 숫자와 단위를 위아래로 배열하세요. 따라서 여러분이 보는 것은 두 가지 수준입니다. 전체 줄은 왼쪽과 오른쪽으로 배열되고 텍스트는 위쪽과 아래쪽으로 배열됩니다.

순서대로 세 가지 수정을 시도해 보십시오. 외부 레이어 spacing={12}을 24로 변경하면 아이콘과 텍스트가 더 멀리 떨어져 있게 됩니다. 내부 레이어 spacing={4}를 12로 변경하면 숫자와 단위가 더 멀어집니다. 내부 레이어 alignment="leading"를 "trailing"로 변경하면 두 줄의 텍스트가 오른쪽에 정렬됩니다.

정렬 축을 확인하세요. HStack의 alignment는 위아래 정렬을 제어하고, VStack은 좌우 정렬을 제어합니다. x/y는 간격이 아니라 시각적 오프셋이므로 옆 콘텐츠의 레이아웃 위치를 바꾸지 않습니다.

레이아웃이 결정되면 고정된 78을 첫 번째 속도 예의 읽기 식으로 바꾸고 데이터 설정에서 속도를 선택합니다. 이렇게 하면 연습할 때마다 한 가지만 바꾸게 됩니다.

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

이 예에서는 속도를 호 각도로 변환한 다음 각도 변경에 대한 전환을 추가합니다. 먼저 미터 설정에서 기본 속도를 선택한 다음 코드를 붙여넣습니다.

speed / 200은 200을 기준으로 한 비율을 가져오고 0…1로 제한한 다음 현재 그릴 각도인 360를 곱합니다. 예를 들어, 속도가 50이면 각도는 90°이고, 속도가 100이면 각도는 180°입니다. 여기에서 200은 현재 속도 단위의 값을 사용하는 예시 범위이며, 이는 자신의 장비에 따라 수정될 수 있습니다.

startAngle={-90}은 시작점을 맨 위에 놓습니다. sweepAngle은 시작점에서 스윕할 각도 수를 결정합니다. animations의 property: 'sweepAngle'은 이 속성의 변경을 애니메이션화한다는 의미입니다. 90°에서 180°로 변경하는 경우 전환을 완료하는 데 0.25초가 걸립니다.

duration을 1로 변경하고 호가 새 대상을 더 천천히 따라가는 것을 지켜보세요. 애니메이션은 실제 데이터의 샘플링 빈도를 높이지 않으며 자동으로 호를 시간 제한 애니메이션으로 바꾸지도 않습니다. 변경이 발생하려면 새로운 목표 각도가 있어야 합니다.

다음 코드는 누락된 측정값를 0으로 위장하지 않고 속도가 없을 때 수평선을 표시합니다. 호는 유효한 숫자 판독값에 대해서만 그려집니다.

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

미리보기를 닫고 저장된 기기 메뉴에서 내보내기 전에 기기를 저장하세요. .instrument에는 시스템 공유 패널을 통해 "파일"로 전송하거나 저장할 수 있는 코드, 이미지 리소스 및 입력 정의가 포함되어 있습니다. 정의의 기본값이 내보내집니다. 기기에서 변경한 입력 값은 내보내지지 않습니다. OBD 장치 바인딩은 내보내지지 않습니다.

수신자는 CapDrive를 사용하여 파일을 열지만 가져온 후에는 대시보드 편집을 통해 페이지에 추가해야 합니다. 입력 바인딩에 자신만의 값, 텍스트 또는 옵션을 설정하세요. 입력 OBD는 수신 장치의 해당 차량 매개변수를 선택합니다.

RPM 또는 냉각수 온도 게이지를 공유할 때 어떤 차량 판독이 필요한지, 어디에서 판독해야 하는지 명시하십시오. 입력 식별자가 보존되는 한 장치를 리바인딩할 때 코드를 수정할 필요가 없습니다. 공유하기 전에 다양한 크기와 테마를 확인하고, 코드, 자산, 기본 텍스트에서 개인 정보를 확인하세요.

컴퓨터에서 편집하고 있는 것은 현재 휴대폰에 열려 있는 악기 초안입니다. 먼저 휴대폰에서 본 악기의 에디터에 들어가신 후, 다음 순서로 연결하세요.

1. iPhone과 컴퓨터를 동일한 Wi-Fi 네트워크에 연결하십시오.
2. 모바일 편집기에서 원격 편집을 열고 주소가 나타날 때까지 기다립니다.
3. 휴대폰에 표시된 전체 주소를 컴퓨터 브라우저에 입력하세요. 이전 세션 주소를 사용하지 말고 컴퓨터의 로컬 호스트를 휴대폰 주소로 착각하지 마십시오.
4. 모바일 편집 세션을 열어두고 컴퓨터에서 쉽게 식별할 수 있는 글꼴 크기 등을 수정한 다음 변경 사항을 휴대폰에서 미리 보세요.
5. 편집이 완료되면 휴대폰으로 돌아와 악기를 저장한 후 실제 계기판에서 확인하세요.

주소를 열 수 없는 경우 먼저 두 장치가 실제로 동일한 네트워크에 있고 모바일 세션이 여전히 실행 중인지 확인하세요. 원격 편집을 끄거나, 편집기를 종료하거나, 앱을 백그라운드로 전환하면 세션이 중지됩니다. 다시 열면 현재 휴대전화에 표시된 주소가 사용됩니다.

이 연결은 별도의 로그인 비밀번호 없이 암호화되지 않은 로컬 HTTP를 사용합니다. 이 LAN 주소에 액세스할 수 있는 장치는 현재 초안과 해당 리소스를 읽거나 수정하거나 편집 로그를 볼 수 있습니다. 따라서 신뢰할 수 있는 네트워크에서만 활성화됩니다. 편집이 완료되면 원격 편집이 종료되고 휴대폰에 저장됩니다.

먼저 코드 문제인지 데이터 문제인지 확인하세요.

미리보기에서 오류를 직접 보고하는 경우 먼저 로그의 줄 번호를 살펴보세요. 괄호, 속성 이름, 데이터 유형을 확인하세요. 예를 들어 문자열에서 toFixed을 호출하는 것과 신호를 찾지 못하는 것은 서로 다른 두 가지 문제입니다.

미리보기는 정상인데 실제 악기에 값이 없는 경우 먼저 데이터 소스를 확인하세요. 기본 속도에 대한 위치 결정을 확인하고, OBD에 대한 장치 매개 변수 목록을 확인한 다음 장비에서 선택한 데이터 및 읽기 식을 확인하십시오. 누락된 측정값를 고정된 숫자로 대체하지 말고 연결이 고정되었다고 생각하십시오.

콘텐츠가 서로 뭉쳐져 있거나 잘립니다.

먼저 "컨테이너 1개 + 텍스트 1줄"로 축소하고 사용 가능한 공간을 확인한 다음 아이콘, 텍스트의 두 번째 줄, 그래픽을 하나씩 다시 배치합니다. 고정된 너비, 높이, 글꼴 크기 및 간격을 확인하세요. 콘텐츠를 정렬하려면 스택을 사용하세요. 전체 변환, 크기 조정 또는 회전이 필요한 경우 transform을 사용하십시오.

애니메이션이 효과가 없습니다.

먼저 대상 속성 자체가 실제로 변경되고 있는지 확인한 다음 animations.property이 이 속성을 가리키는지 확인하세요. 애니메이션이 선언되었기 때문에 sweepAngle={180}이 자체적으로 회전하지 않는 문제를 해결했습니다. 먼저 미리보기에서 변경된 데이터로 확인한 후 실제 데이터에 대해 업데이트하세요.

저장하기 전에 전체 확인을 수행하세요.

다양한 크기와 밝은 테마 및 어두운 테마의 모양을 확인하세요. 유효한 0, 누락된 측정값 및 텍스트 판독값을 확인합니다. 실제 데이터를 확인하려면 페이지에 게이지를 추가하기 전에 미리보기를 닫고 저장하세요. 외관, 코드 및 실제 판독값이 일치해야 기기가 완성될 수 있습니다.