첫 속도 계기 만들기

대시보드에서 더 보기（…）→ 사용자 지정 계기을 열고 새 계기 추가을 선택합니다. 새로운 미터에는 이미 기본 속도 입력이 제공됩니다.

1. 편집기 상단에 있는 이름을 클릭하고 계기 설정으로 이동하여 이름을 "My Speed"로 지정합니다.
2. 입력 바인딩 옆의 기어를 클릭하여 매개변수 설정을 엽니다. 속도 입력 확인: 식별자는 speed, 유형은 기본 데이터, 소스는 속도입니다. 누락된 경우 매개변수 추가를 사용하여 새로 만드세요.
3. 완료을 클릭하여 설정을 저장하고 편집 영역으로 돌아갑니다.

스크립트는 $data.current.speed을 통해 속도를 읽습니다. 여기서 필드 이름은 입력 식별자에서 나옵니다. 편집기는 정의된 대로 유형 힌트를 제공합니다. 이 예에는 OBD 바인딩이 필요하지 않습니다.

편집 영역의 전체 원본 내용을 아래의 전체 코드로 바꿉니다. 다른 main()에 포장하지 마십시오. 이 예에는 입력 기능이 하나만 있습니다.

지금은 코드를 동일하게 유지하겠습니다. 그려야 할 때마다 현재 속도를 읽고 값과 단위를 위아래로 정렬합니다. 누락된 판독값이 있으면 수평선이 표시됩니다. 다음 섹션에서는 실행 순서대로 설명합니다.

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

먼저 데이터를 보고 그다음에 사진을 보세요. 이번에는 speed이 { value: 42.3, unit: "km/h" }이라고 가정합니다.

1. const speed = $data.current.speed 읽어보세요. 여기서 speed은 숫자 자체가 아닌 숫자 값과 단위를 포함하는 객체입니다.
2. speed?.value == null은 누락된 측정값가 있는지 확인합니다. 개체가 존재하지 않거나 값이 비어 있으면 '—'이 선택됩니다. 값이 0이면 이 분기가 수행되지 않습니다.
3. Math.round(speed.value)은 42.3을 42로 반올림하고 표시하기 위해 첫 번째 Text에 제공합니다. 반올림은 이 미터의 표시에만 영향을 미치며 원래 판독값은 수정하지 않습니다.
4. 두 번째 Text은 speed.unit을 표시합니다. 현재 단위가 없는 경우 ?? $env.speedUnit는 현재 디스플레이 환경의 속도 단위를 사용합니다.
5. VStack은 두 개의 텍스트를 서로 위에 정렬하고 spacing={8}은 두 텍스트 사이의 간격을 제어합니다.

$env.foreground 및 $env.accent은 현재 테마에 대한 텍스트 및 강조 색상을 제공합니다. 이 색상은 테마가 변경되면 업데이트됩니다.

누락된 측정값를 판단하기 위해 speed?.value || '—'을 사용하지 마십시오. JavaScript은 유효한 0을 잘못된 값으로 처리하므로 주차 시 수평선이 잘못 표시됩니다.

편집기 하단에서 미리보기을 클릭하세요. 상단에는 더 큰 속도 숫자가, 하단 행에는 더 작은 단위가 표시되어야 합니다. 미리보기에 나오는 숫자는 시뮬레이션된 값으로, 차량 시동이 필요하지 않으며, 이때 휴대폰으로 측정한 속도와 반드시 동일하지는 않습니다.

그런 다음 세 가지 작은 수정을 하고 매번 미리 봅니다.

다양한 크기와 밝은 테마와 어두운 테마를 확인해 보세요. 콘텐츠가 특정 크기로 잘릴 경우 먼저 글꼴 크기나 간격을 줄인 후 관찰하세요. 레이아웃 문제를 해결하기 위해 많은 수의 x/y 오프셋을 사용하지 마십시오.

오류가 발생한 경우 원래 상태로 복원한 후 로그의 라인 번호를 확인하세요. 미리보기할 때 오른쪽 상단은 로그입니다. 미리보기를 닫고 편집 상태로 돌아가면 오른쪽 상단이 저장로 돌아갑니다. 성공적인 미리보기는 이 시뮬레이션 입력 세트가 표시될 수 있으며 다음 단계에서 실제 데이터를 확인해야 함을 의미합니다.

미리보기를 닫고 저장 을 클릭한 다음 편집기를 종료하고 기기 라이브러리에서 "My Speed"를 찾으세요. 더 보기（…）→ 대시보드 편집 을 다시 열고 + 을 클릭하여 추가한 다음 마지막으로 완료 을 클릭합니다.

이 시점에서 카드는 실제 속도를 읽도록 변경됩니다. 확인을 위해 동일한 페이지에 내장된 속도계를 넣을 수 있습니다. 동일한 기본 속도 필드를 사용하는 경우 값이 일치해야 합니다. 소수점 유지 방법이 다르기 때문에 표시가 약간 다를 수 있습니다.

이 시점에서 첫 번째 악기가 완성되었습니다. 다음 기사에서는 "속도 가져오기"를 "자신만의 OBD 매개변수 가져오기"로 바꾸면 레이아웃과 표시 코드를 계속 사용할 수 있습니다.