編集を続ける：配置・アニメーション・共有

まず、速度の横にアイコンを追加する練習をしてください。以下の完全な例では、レイアウトの変更をわかりやすくするために、固定番号 78 のみを示しています。まだ実際の速度を反映していません。

外層のHStackは、右側のアイコンとコンテンツを左右に配置します。右側の VStack では、数字と単位を上下に配置します。したがって、表示される内容は 2 つのレベルになります。行全体が左右に配置され、テキストが上下に配置されます。

3 つの変更を順番に試してください。外側のレイヤー spacing={12} を 24 に変更すると、アイコンとテキストがさらに離れます。内側の層 spacing={4} を 12 に変更すると、数値と単位がさらに離れます。内側のレイヤー alignment="leading" を "trailing" に変更すると、2 行のテキストが右揃えになります。

整列する軸に注意してください。HStack の alignment は上下方向の整列を指定し、VStack は左右方向に整列します。x/y は間隔ではなく見た目のオフセットであり、隣の要素のレイアウト位置は変えません。

レイアウトが決まったら、固定の78を最初の速度例の読み取り式に置き換えて、データ設定で速度を選択します。こうすることで、練習するたびに変更する点は 1 つだけになります。

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 は、0…1 に制限された 200 を基準とした比率を取得し、描画される現在の角度である 360 を掛けます。たとえば、速度が 50 の場合、角度は 90°、速度が 100 の場合、角度は 180° になります。ここでの 200 は、現在の速度単位の値を使用した範囲の例であり、ご使用の機器に応じて変更できます。

startAngle={-90} は開始点を先頭に置きます。 sweepAngle は、開始点からスイープする角度の数を決定します。 animations の property: 'sweepAngle' は、この属性の変化をアニメーション化することを意味します。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 でファイルを開きますが、インポート後に ダッシュボードを編集 経由でページに追加する必要があります。 入力の割り当て で独自の値、テキスト、またはオプションを設定します。 input OBD は、受信側デバイスの対応する車両パラメータを選択します。

RPM または冷却水温度計を共有する場合は、どの車両の測定値が必要か、およびそれがどこに拘束されているかを明記してください。入力識別子が保持されている限り、デバイスを再バインドするときにコードを変更する必要はありません。共有する前にさまざまなサイズとテーマを確認し、コード、アセット、デフォルトのテキストに個人情報が含まれていないか確認してください。

コンピュータ上で編集されているのは、現在携帯電話で開いている楽器のドラフトです。まず携帯電話で本機器のエディタに入り、以下の順序で接続してください。

1. iPhone とコンピュータを同じ Wi-Fi ネットワークに接続します。
2. モバイル エディタで リモート編集 を開き、アドレスが表示されるまで待ちます。
3. 携帯電話に表示されている完全なアドレスをコンピュータのブラウザに入力します。古いセッション アドレスを使用しないでください。また、コンピュータのローカルホストと電話のアドレスを間違えないでください。
4. モバイル編集セッションを開いたままにし、フォント サイズなど、コンピュータ上で簡単に識別できるものを変更してから、携帯電話で変更をプレビューします。
5. 編集完了後、携帯電話に戻って計測器を保存し、実際の計測器パネルで確認してください。

アドレスを開けない場合は、まず 2 つのデバイスが実際に同じネットワーク上にあり、モバイル セッションがまだ実行中であることを確認します。リモート編集をオフにしたり、エディターを終了したり、アプリをバックグラウンドに切り替えたりすると、セッションが停止します。再開後は、現在携帯電話に表示されているアドレスが使用されます。

この接続では、別のログイン パスワードを使用せずに、暗号化されていないローカル HTTP を使用します。この LAN アドレスにアクセスできるデバイスは、現在のドラフトとそのリソースを読み取りまたは変更したり、編集ログを表示したりできる場合があります。したがって、信頼されたネットワーク上でのみ有効になります。編集が完了すると、リモート編集が終了し、電話機に保存されます。

まずコードの問題なのかデータの問題なのかを判断します

プレビューでエラーが直接報告された場合は、まずログの行番号を確認します。括弧、プロパティ名、データ型を確認してください。たとえば、文字列に対して toFixed を呼び出すことと、シグナルが見つからないことは、2 つの異なる問題です。

プレビューは正常だが、実際の機器に値がない場合は、まずデータ ソースを確認してください。基本速度の位置決めを確認し、OBD のデバイスパラメータリストを確認し、機器が選択しているデータと読み取り式を確認してください。欠測値を固定の数値に置き換えて、接続が修正されたと考えないでください。

コンテンツが密集しているか切り取られている

まず「コンテナ1個＋テキスト1行」に縮小し、空き容量を確認してから、アイコン、テキスト2行目、グラフィックを1つずつ元に戻します。幅、高さ、フォント サイズ、間隔が固定されているかどうかを確認します。スタックを使用してコンテンツを整理します。全体的な移動、拡大縮小、または回転が必要な場合は、transform を使用してください。

アニメーションは効果がありません

まずターゲット属性自体が実際に変更されていることを確認し、次に animations.property がこの属性を指していることを確認します。アニメーションが宣言されているだけで sweepAngle={180} が自動的に回転しない問題を修正しました。まずプレビューで変更されたデータを確認し、次に実際のデータに対して更新します。

保存する前に完全なチェックを行ってください

さまざまなサイズと明るいテーマと暗いテーマでの外観を確認します。有効なゼロ、欠落している測定値、およびテキストの読み取り値を確認します。ゲージをページに追加する前にプレビューを閉じて保存し、実際のデータを確認してください。外観、コード、実際の測定値が一致して初めて機器は完成します。