Edit lanjutan: tata letak, animasi, dan berbagi

Latihan pertama menambahkan ikon di sebelah kecepatan. Contoh lengkap di bawah ini hanya menampilkan nomor tetap 78 agar perubahan tata letak mudah dilihat; itu belum mencapai kecepatan sebenarnya.

Lapisan luar HStack menyusun ikon dan konten di sisi kanan kiri dan kanan. Di sebelah kanan VStack susunlah angka dan satuan ke atas dan ke bawah. Jadi yang Anda lihat adalah dua tingkat: seluruh baris disusun kiri dan kanan, dan teks disusun atas dan bawah.

Coba tiga modifikasi secara berurutan: ubah lapisan luar spacing={12} menjadi 24, ikon dan teks akan semakin terpisah; ubah lapisan dalam spacing={4} menjadi 12, angka dan satuannya akan semakin jauh; ubah lapisan dalam alignment="leading" menjadi "trailing", dan dua baris teks akan rata ke kanan.

Perhatikan sumbu perataan: HStack menggunakan alignment untuk perataan vertikal, sedangkan VStack meratakan secara horizontal. x/y adalah pergeseran visual, bukan jarak; keduanya tidak mengubah posisi tata letak konten di sebelahnya.

Setelah tata letak ditentukan, ganti 78 tetap dengan ekspresi pembacaan pada contoh kecepatan pertama, dan pilih kecepatan dalam pengaturan data. Dengan cara ini Anda hanya mengubah satu hal setiap kali Anda berlatih.

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

Contoh ini mengubah kecepatan menjadi sudut busur, lalu menambahkan transisi untuk perubahan sudut. Pertama pilih kecepatan dasar di pengaturan meteran lalu tempelkan kodenya.

speed / 200 mendapatkan rasio relatif terhadap 200, dibatasi pada 0…1 dan kemudian dikalikan dengan 360, yang merupakan sudut saat ini yang akan ditarik. Misalnya, jika kecepatannya 50, sudutnya adalah 90°, dan jika kecepatannya 100, sudutnya adalah 180°. 200 di sini adalah contoh rentang, menggunakan nilai dalam satuan kecepatan saat ini, yang dapat dimodifikasi sesuai instrumen Anda sendiri.

startAngle={-90} menempatkan titik awal di atas; sweepAngle menentukan berapa banyak sudut yang harus disapu dari titik awal. property: 'sweepAngle' dalam animations berarti menganimasikan perubahan atribut ini: ketika mengubah dari 90° ke 180°, dibutuhkan 0,25 detik untuk menyelesaikan transisi.

Coba ubah duration menjadi 1 dan lihat alurnya mengikuti target baru dengan lebih lambat. Animasi tidak meningkatkan frekuensi pengambilan sampel data nyata, juga tidak secara otomatis mengubah busur menjadi animasi berwaktu; harus ada sudut sasaran baru agar perubahan dapat terjadi.

Kode berikut menampilkan garis horizontal ketika tidak ada kecepatan, tanpa menyamarkan tes yang hilang sebagai nol. Busur digambar hanya untuk pembacaan numerik yang valid.

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

Tutup pratinjau dan simpan instrumen sebelum mengekspor dari menu instrumen yang disimpan. .instrument berisi kode, sumber gambar, dan definisi masukan, yang dapat dikirim atau disimpan ke "file" melalui panel berbagi sistem. Nilai default dalam definisi diekspor. Nilai masukan yang diubah secara lokal tidak diekspor. OBD pengikatan perangkat tidak diekspor.

Penerima membukanya dengan CapDrive dan masih perlu ditambahkan ke halaman melalui Edit dasbor setelah mengimpor. Tetapkan nilai, teks, atau opsi Anda sendiri di Pengikatan masukan; masukan OBD memilih parameter kendaraan yang sesuai pada perangkat penerima.

Saat berbagi RPM atau pengukur suhu cairan pendingin, sebutkan pembacaan kendaraan mana yang diperlukan dan di mana batasnya. Selama pengidentifikasi masukan dipertahankan, pengikatan ulang perangkat tidak memerlukan modifikasi kode. Periksa berbagai ukuran dan tema sebelum berbagi, dan periksa informasi pribadi dalam kode, aset, dan teks default.

Yang sedang diedit di komputer adalah draft instrumen yang sedang dibuka di ponsel. Pertama-tama masuk ke editor instrumen ini di ponsel, lalu sambungkan dengan urutan berikut:

1. Hubungkan iPhone dan komputer ke jaringan Wi-Fi yang sama.
2. Buka Edit jarak jauh di editor seluler dan tunggu hingga alamatnya muncul.
3. Masukkan alamat lengkap yang ditampilkan di ponsel Anda ke browser komputer Anda. Jangan gunakan alamat sesi lama, dan jangan salah mengira localhost komputer Anda sebagai alamat ponsel Anda.
4. Biarkan sesi pengeditan seluler Anda tetap terbuka, ubah sesuatu yang mudah dikenali di komputer Anda, seperti ukuran font, lalu pratinjau perubahannya di ponsel Anda.
5. Setelah pengeditan selesai, kembali ke ponsel untuk menyimpan instrumen dan mengonfirmasinya di panel instrumen sebenarnya.

Jika alamat tidak dapat dibuka, pastikan terlebih dahulu bahwa kedua perangkat memang berada di jaringan yang sama dan sesi seluler masih berjalan. Menonaktifkan pengeditan jarak jauh, keluar dari editor, atau mengalihkan aplikasi ke latar belakang akan menghentikan sesi; setelah dibuka kembali, alamat yang saat ini ditampilkan di ponsel akan digunakan.

Koneksi ini menggunakan HTTP lokal tidak terenkripsi tanpa kata sandi login terpisah. Perangkat dengan akses ke alamat LAN ini mungkin dapat membaca atau mengubah draf saat ini dan sumber dayanya, atau melihat log edit. Oleh karena itu, ini hanya diaktifkan pada jaringan tepercaya. Setelah pengeditan selesai, pengeditan jarak jauh ditutup dan disimpan di telepon.

Pertama tentukan apakah itu masalah kode atau masalah data

Saat pratinjau langsung melaporkan kesalahan, pertama-tama lihat nomor baris di log. Periksa tanda kurung, nama properti, dan tipe data; memanggil toFixed pada sebuah string, misalnya, dan tidak menemukan sinyal adalah dua masalah yang berbeda.

Jika pratinjaunya normal tetapi instrumen sebenarnya tidak memiliki nilai, periksa sumber datanya terlebih dahulu. Periksa posisi kecepatan dasar, periksa daftar parameter perangkat untuk OBD, lalu periksa data dan ekspresi pembacaan yang dipilih oleh instrumen. Jangan mengganti tes yang hilang dengan nomor tetap dan menganggap koneksi sudah diperbaiki.

Konten dipadatkan atau dipotong

Pertama-tama kecilkan menjadi "satu wadah + satu baris teks", konfirmasikan ruang yang tersedia, lalu masukkan kembali ikon, baris teks kedua, dan grafik satu per satu. Periksa lebar, tinggi, ukuran font, dan spasi tetap. Gunakan Stack untuk mengatur konten; gunakan transform ketika terjemahan, penskalaan, atau rotasi keseluruhan diperlukan.

Animasi tidak berpengaruh

Pertama-tama konfirmasikan bahwa atribut target itu sendiri benar-benar berubah, lalu konfirmasikan bahwa animations.property menunjuk ke atribut ini. Memperbaiki sweepAngle={180} yang tidak berputar sendiri hanya karena animasi dideklarasikan. Verifikasi terlebih dahulu dengan data yang diubah di pratinjau, lalu perbarui dengan data sebenarnya.

Lakukan pemeriksaan lengkap sebelum menyimpan

Periksa tampilan dalam berbagai ukuran dan tema terang dan gelap; memverifikasi angka nol yang valid, pengukuran yang hilang, dan pembacaan teks; tutup pratinjau dan simpan sebelum menambahkan pengukur ke halaman untuk memeriksa data sebenarnya. Hanya jika tampilan, kode, dan pembacaan sebenarnya cocok, instrumen dapat diselesaikan.