Дальше: расположение, анимация и обмен

Сначала потренируйтесь добавлять значок рядом со скоростью. Полный пример ниже показывает только фиксированный номер 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 определяет, сколько углов нужно провести от начальной точки. property: 'sweepAngle' в animations означает анимацию изменения этого атрибута: при изменении с 90° на 180° для завершения перехода требуется 0,25 секунды.

Попробуйте изменить duration на 1 и наблюдать, как дуга медленнее следует за новой целью. Анимация не увеличивает частоту дискретизации реальных данных и не превращает дугу автоматически в синхронизированную анимацию; Чтобы изменение произошло, должен быть новый целевой угол.

Следующий код отображает горизонтальную линию при отсутствии скорости, не маскируя отсутствующий тест под ноль. Дуги рисуются только для действительных числовых показаний.

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 выбирает соответствующие параметры автомобиля устройства-получателя.

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

На компьютере редактируется проект инструмента, открытый в данный момент на телефоне. Сначала войдите в редактор этого инструмента на мобильном телефоне, а затем подключитесь в следующем порядке:

1. Подключите iPhone и компьютер к одной сети Wi-Fi.
2. Откройте Удалённое редактирование в мобильном редакторе и дождитесь появления адреса.
3. Введите полный адрес, отображаемый на вашем телефоне, в браузере вашего компьютера. Не используйте старый адрес сеанса и не путайте локальный хост вашего компьютера с адресом вашего телефона.
4. Держите сеанс редактирования на мобильном телефоне открытым, измените что-нибудь, что легко идентифицировать на своем компьютере, например размер шрифта, а затем просмотрите изменения на своем мобильном телефоне.
5. После завершения редактирования вернитесь к мобильному телефону, чтобы сохранить прибор и подтвердить его на фактической панели приборов.

Если адрес не может быть открыт, сначала убедитесь, что два устройства действительно находятся в одной сети и мобильный сеанс все еще работает. Отключение удаленного редактирования, выход из редактора или переключение приложения в фоновый режим приведет к остановке сеанса; после повторного открытия будет использоваться адрес, отображаемый в данный момент на телефоне.

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

Сначала определите, является ли это проблемой кода или проблемой данных.

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

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

Содержимое перегружено или обрезано.

Сначала уменьшите его до «один контейнер + одна строка текста», подтвердите доступное пространство, а затем поочередно верните значок, вторую строку текста и графику. Проверьте фиксированную ширину, высоту, размер шрифта и интервал. Используйте Stack для упорядочения контента; используйте transform, когда требуется общий перевод, масштабирование или поворот.

Анимация не имеет никакого эффекта

Сначала убедитесь, что сам целевой атрибут действительно изменяется, а затем убедитесь, что animations.property указывает на этот атрибут. Исправлен sweepAngle={180}, который не вращался сам по себе только потому, что объявлена ​​анимация. Сначала проверьте измененные данные в предварительном просмотре, а затем обновите их с учетом фактических данных.

Перед сохранением выполните полную проверку

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