İlk hız göstergenizi yapın

Kontrol panelinde Diğer（…）→ Özel göstergeler öğesini açın ve Yeni gösterge ekle öğesini seçin. Yeni sayaç halihazırda bir temel hız girişiyle birlikte geliyor.

1. Düzenleyicinin üst kısmındaki isme tıklayın, Gösterge ayarları adresine gidin ve buna "My Speed" adını verin.
2. Parametre yapılandırması'yi açmak için Giriş bağlantıları'nin yanındaki dişliye tıklayın. Hız girişini kontrol edin: tanımlayıcı speed, tür Temel veriler, kaynak Hız. Eksikse yeni bir tane oluşturmak için Parametre ekle kullanın.
3. Ayarlara geri dönüp kaydetmek için Bitti öğesine tıklayın, ardından düzenleme alanına dönün.

Betik hızı $data.current.speed aracılığıyla okur; burada alan adları giriş tanımlayıcısından gelir. Düzenleyici, tanımlandığı şekilde tür ipuçları sağlar. Bu örnek OBD bağlamasını gerektirmez.

Düzenleme alanının orijinal içeriğinin tamamını aşağıdaki kodun tamamıyla değiştirin. Başka bir main() içine sarmayın. Bu örnekte yalnızca bir giriş işlevi vardır.

Şimdilik kodu aynı tutalım. Her çizilmesi gerektiğinde mevcut hızı okuyacak, değerleri ve birimleri yukarı ve aşağı düzenleyecek; eksik bir okuma olduğunda yatay bir çizgi gösterecektir. Bir sonraki bölümde bunu yürütme sırasına göre açıklıyoruz.

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

Önce verilere, sonra resme bakın. Diyelim ki bu sefer speed { value: 42.3, unit: "km/h" } olsun:

1. const speed = $data.current.speed Bu okumayı alın. Burada speed sayının kendisini değil, sayısal değerleri ve birimleri içeren bir nesnedir.
2. speed?.value == null eksik ölçümleri kontrol eder. Nesne mevcut olmadığında veya değer boş olduğunda '—' seçilir; değer 0 olduğunda bu dallanma alınmayacaktır.
3. Math.round(speed.value), 42.3'yi 42'ye yuvarlar ve görüntülenmesi için ilk Text'e verir. Yuvarlama yalnızca bu sayacın görüntüsünü etkiler ve orijinal okumayı değiştirmez.
4. İkinci Text, speed.unit öğesini görüntüler. Şu anda hiçbir birim olmadığında, ?? $env.speedUnit geçerli görüntüleme ortamının hız birimini kullanır.
5. VStack iki metni üst üste düzenler ve spacing={8} aralarındaki boşluğu kontrol eder.

$env.foreground ve $env.accent geçerli temanın metnini ve vurgu renklerini sağlar. Tema değiştiğinde bu renkler güncellenecektir.

Eksik testleri yargılamak için speed?.value || '—' kullanmayın: JavaScript geçerli sıfırları yanlış değerler olarak değerlendirerek park ederken yatay çizginin yanlış görüntülenmesine neden olur.

Düzenleyicinin alt kısmındaki Önizleme öğesine tıklayın. Üstte daha büyük bir hız numarası ve alt satırda daha küçük birimler görmelisiniz. Önizlemedeki sayılar, aracın çalıştırılmasını gerektirmeyen simüle edilmiş değerlerdir ve cep telefonunun o anda ölçtüğü hıza eşit olması gerekmez.

Daha sonra üç küçük değişiklik yapın ve her seferinde ön izleme yapın:

Farklı boyutlara ve açık ve koyu temalara göz atın. İçerik belirli bir boyutta kırpıldığında, önce yazı tipi boyutunu veya aralığını azaltın ve ardından gözlemleyin. Yerleşim sorunlarını örtbas etmek için çok sayıda x/y ofsetleri kullanmayın.

Bir hata oluşursa, orijinal durumuna geri yükleyin ve günlükteki satır numarasına göre kontrol edin. Önizleme sırasında sağ üst köşe Günlükler; önizlemeyi kapatıp düzenleme durumuna döndükten sonra sağ üst köşe Kaydet'ye döner. Başarılı bir önizleme yalnızca bu simülasyon girişleri setinin görüntülenebileceği ve bir sonraki adımda gerçek verilerin kontrol edilmesi gerektiği anlamına gelir.

Önizlemeyi kapatın, Kaydet öğesine tıklayın, düzenleyiciden çıkın ve cihaz kitaplığında "My Speed" öğesini bulun. Diğer（…）→ Gösterge panelini düzenle dosyasını tekrar açın, eklemek için + öğesine tıklayın ve son olarak Bitti öğesine tıklayın.

Bu noktada kart gerçek hızı okuyacak şekilde değişir. Doğrulama için onu ve yerleşik hız ölçeri aynı sayfaya koyabilirsiniz: aynı temel hız alanını kullandıklarında değerler karşılık gelmelidir; Farklı ondalık tutma yöntemleri nedeniyle ekran biraz farklı olabilir.

Bu noktada ilk enstrüman tamamlanmıştır. Bir sonraki makalede, "hız kazanma" ifadesini "kendi OBD parametrenizi edinin" ile değiştirin; düzen ve görüntüleme kodu kullanılmaya devam edebilir.