Создайте первый спидометр

Откройте Ещё（…）→ Свои приборы на панели управления и выберите Добавить прибор. Новый счетчик уже оснащен входом базовой скорости.

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 будет рассматривать действительные нули как ложные значения, что приведет к неправильному отображению горизонтальной линии при парковке.

Нажмите Предпросмотр в нижней части редактора. Вы должны увидеть большее число скорости вверху и меньшие единицы в нижнем ряду. Числа в предварительном просмотре представляют собой смоделированные значения, которые не требуют запуска автомобиля и не обязательно равны скорости, измеренной мобильным телефоном в данный момент.

Затем внесите три небольшие модификации и каждый раз просматривайте:

Ознакомьтесь с различными размерами, а также светлыми и темными темами. Если контент обрезан до определенного размера, сначала уменьшите размер шрифта или интервал, а затем наблюдайте. Не используйте большое количество смещений x/y, чтобы скрыть проблемы с компоновкой.

При возникновении ошибки верните ее в исходное состояние и проверьте по номеру строки в журнале. При предварительном просмотре верхний правый угол — Журнал; после закрытия предварительного просмотра и возврата в состояние редактирования правый верхний угол возвращается к Сохранить. Успешный предварительный просмотр означает только то, что этот набор входных данных моделирования может быть отображен, а фактические данные необходимо проверить на следующем этапе.

Закройте предварительный просмотр, нажмите Сохранить, выйдите из редактора и найдите «My Speed» в библиотеке инструментов. Откройте Ещё（…）→ Редактировать панель приборов еще раз, нажмите +, чтобы добавить его, и, наконец, нажмите Готово.

В этот момент карта изменится и начнет считывать фактическую скорость. Вы можете поместить его и встроенный измеритель скорости на одну страницу для проверки: когда они используют одно и то же базовое поле скорости, значения должны совпадать; из-за различных методов сохранения десятичных дробей отображение может немного отличаться.

На этом этапе первый инструмент готов. В следующей статье замените «получить скорость» на «получить свой собственный параметр OBD», и код макета и отображения можно будет продолжать использовать.