Buat instrumen kecepatan pertama

Buka Lainnya（…）→ Instrumen khusus di dasbor dan pilih Tambahkan instrumen baru. Meteran baru sudah dilengkapi dengan input kecepatan dasar.

1. Klik nama di bagian atas editor, buka Pengaturan instrumen, dan beri nama "Kecepatan Saya".
2. Klik roda gigi di sebelah Pengikatan masukan untuk membuka Konfigurasi parameter. Periksa input kecepatan: pengenalnya adalah speed, tipenya adalah Data dasar, sumbernya adalah Kecepatan. Jika tidak ada, gunakan Tambah parameter untuk membuat yang baru.
3. Klik Selesai untuk kembali dan menyimpan pengaturan, lalu kembali ke area pengeditan.

Script membaca kecepatan melalui $data.current.speed; di sini nama bidang berasal dari pengidentifikasi input. Editor memberikan petunjuk tipe seperti yang ditentukan. Contoh ini tidak memerlukan pengikatan OBD.

Ganti seluruh konten asli area pengeditan dengan kode lengkap di bawah ini. Jangan membungkusnya dengan main() lain. Contoh ini hanya memiliki satu fungsi entri.

Biarkan kodenya tetap sama untuk saat ini. Ia akan membaca kecepatan saat ini setiap kali perlu digambar, menyusun nilai dan satuan ke atas dan ke bawah; bila ada pembacaan yang hilang maka akan muncul garis horizontal. Bagian selanjutnya menjelaskannya dalam urutan eksekusi.

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

Lihat datanya dulu, baru gambarnya. Misalkan kali ini speed adalah { value: 42.3, unit: "km/h" }:

1. const speed = $data.current.speed Dapatkan bacaan ini. Disini speed adalah objek yang berisi nilai dan satuan numerik, bukan angka itu sendiri.
2. speed?.value == null memeriksa tes yang hilang. Jika objek tidak ada atau nilainya kosong, '—' dipilih; ketika nilainya 0, cabang ini tidak akan diambil.
3. Math.round(speed.value) membulatkan 42.3 ke 42 dan memberikannya ke Text pertama untuk ditampilkan. Pembulatan hanya mempengaruhi tampilan meteran ini dan tidak mengubah pembacaan aslinya.
4. Text kedua menampilkan speed.unit. Jika saat ini tidak ada satuan, ?? $env.speedUnit menggunakan satuan kecepatan dari lingkungan tampilan saat ini.
5. VStack menyusun dua teks satu di atas yang lain, dan spacing={8} mengontrol spasi di antara keduanya.

$env.foreground dan $env.accent memberikan warna teks dan aksen untuk tema saat ini. Warna-warna ini akan diperbarui ketika tema berubah.

Jangan gunakan speed?.value || '—' untuk menilai tes yang terlewat: JavaScript akan menganggap angka nol yang valid sebagai nilai yang salah, menyebabkan garis horizontal ditampilkan secara tidak benar saat parkir.

Klik Pratinjau di bagian bawah editor. Anda akan melihat angka kecepatan yang lebih besar di atas dan satuan yang lebih kecil di baris bawah. Angka-angka dalam pratinjau adalah nilai simulasi, yang tidak perlu menghidupkan kendaraan, dan belum tentu sama dengan kecepatan yang diukur oleh ponsel saat ini.

Kemudian buat tiga modifikasi kecil, lalu pratinjau setiap kali:

Lihatlah berbagai ukuran dan tema terang dan gelap. Saat konten dipotong pada ukuran tertentu, kurangi ukuran font atau spasi terlebih dahulu, lalu amati. Jangan gunakan offset x/y dalam jumlah besar untuk menutupi masalah tata letak.

Jika terjadi kesalahan, kembalikan ke keadaan semula dan periksa sesuai nomor baris di log. Saat melihat pratinjau, pojok kanan atas adalah Log; setelah menutup pratinjau dan kembali ke status pengeditan, sudut kanan atas kembali ke Simpan. Pratinjau yang berhasil hanya berarti kumpulan input simulasi ini dapat ditampilkan, dan data aktual perlu diperiksa pada langkah berikutnya.

Tutup pratinjau, klik Simpan, keluar dari editor dan temukan "Kecepatan Saya" di perpustakaan instrumen. Buka Lainnya（…）→ Edit dasbor lagi, klik + untuk menambahkannya, dan terakhir klik Selesai.

Pada titik ini kartu berubah untuk membaca kecepatan sebenarnya. Anda dapat meletakkannya dan pengukur kecepatan bawaan di halaman yang sama untuk verifikasi: bila keduanya menggunakan bidang kecepatan dasar yang sama, nilainya harus sesuai; karena metode retensi desimal yang berbeda, tampilan mungkin sedikit berbeda.

Pada titik ini, instrumen pertama telah selesai. Di artikel berikutnya, ganti "dapatkan kecepatan" dengan "dapatkan parameter OBD Anda sendiri", dan tata letak serta kode tampilan dapat terus digunakan.