Daha fazla düzenleme: yerleşim, animasyon ve paylaşım

İlk önce hızın yanına bir simge ekleme alıştırması yapın. Aşağıdaki tam örnek, düzen değişikliklerinin görülmesini kolaylaştırmak için yalnızca 78 sabit sayısını göstermektedir; henüz gerçek hıza ulaşmıyor.

Dış katman HStack simgeleri ve içeriği sağ tarafta, solda ve sağda düzenler. Sağda VStack sayıları ve birimleri yukarı ve aşağı doğru düzenleyin. Gördüğünüz şey iki düzeydir: satırın tamamı sola ve sağa, metin ise yukarı ve aşağı düzenlenmiştir.

Üç değişikliği sırayla deneyin: spacing={12} dış katmanını 24 olarak değiştirin, simgeler ve metin birbirinden daha uzakta olacaktır; spacing={4} iç katmanını 12 olarak değiştirin, sayılar ve birimler birbirinden daha uzakta olacaktır; iç katman alignment="leading"'yi "trailing" olarak değiştirin; metnin iki satırı sağa hizalanacaktır.

Hizalama eksenlerine dikkat edin: HStack, alignment ile dikey hizalamayı kontrol ederken VStack yatay hizalama yapar. x/y aralık değil, görsel kaydırmalardır; yanlarındaki içeriğin yerleşim konumunu değiştirmezler.

Düzen belirlendikten sonra sabit 78 ifadesini ilk hız örneğindeki okuma ifadesi ile değiştirin ve veri ayarlarından hızı seçin. Bu şekilde her pratik yaptığınızda yalnızca bir şeyi değiştirirsiniz.

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

Bu örnek, hızı bir yay açısına dönüştürür ve ardından açı değişikliği için bir geçiş ekler. Öncelikle sayaç ayarlarında temel hızı seçin ve ardından kodu yapıştırın.

speed / 200, 0…1 ile sınırlı olan 200'e göre oranı alır ve ardından çizilecek mevcut açı olan 360 ile çarpılır. Örneğin, hız 50 olduğunda açı 90° olur ve hız 100 olduğunda açı 180° olur. Buradaki 200, kendi cihazınıza göre değiştirilebilen mevcut hız birimindeki değeri kullanan örnek bir aralıktır.

startAngle={-90} başlangıç ​​noktasını en üste koyar; sweepAngle başlangıç ​​noktasından itibaren kaç açının taranacağını belirler. animations içindeki property: 'sweepAngle', bu özniteliğin değişimini canlandırmak anlamına gelir: 90°'den 180°'ye değiştirilirken, geçişin tamamlanması 0,25 saniye sürer.

duration'yi 1 olarak değiştirmeyi deneyin ve yayın yeni hedefi daha yavaş takip etmesini izleyin. Animasyon, gerçek verilerin örnekleme frekansını artırmaz veya yayı otomatik olarak zamanlı bir animasyona dönüştürmez; Değişikliğin gerçekleşmesi için yeni bir hedef açısının olması gerekir.

Aşağıdaki kod, hız olmadığında eksik testi sıfır olarak gizlemeden yatay bir çizgi görüntüler. Yaylar yalnızca geçerli sayısal okumalar için çizilir.

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

Kaydedilen enstrümanın menüsünden dışa aktarmadan önce önizlemeyi kapatın ve enstrümanı kaydedin. .instrument, sistem paylaşım paneli aracılığıyla "dosyalara" gönderilebilen veya kaydedilebilen kodu, görüntü kaynaklarını ve giriş tanımlarını içerir. Tanımdaki varsayılan değerler dışa aktarılır. Yerel olarak değiştirilen giriş değerleri dışa aktarılmaz. OBD aygıt bağlamaları dışa aktarılmaz.

Alıcı bunu CapDrive ile açar ve içe aktardıktan sonra yine de sayfaya Gösterge panelini düzenle aracılığıyla eklenmesi gerekir. Giriş bağlantıları'de kendi değerlerinizi, metninizi veya seçeneklerinizi ayarlayın; OBD girişi, alıcı cihazın ilgili araç parametrelerini seçer.

RPM veya soğutma sıvısı sıcaklık göstergelerini paylaşırken, hangi araç okumasının gerekli olduğunu ve nereye bağlı olduğunu belirtin. Giriş tanımlayıcısı korunduğu sürece cihazın yeniden bağlanması kodun değiştirilmesini gerektirmez. Paylaşmadan önce farklı boyutları ve temaları kontrol edin ve kod, varlıklar ve varsayılan metindeki kişisel bilgileri kontrol edin.

Bilgisayarda düzenlenen şey, şu anda telefonda açık olan enstrüman taslağıdır. Öncelikle bu enstrümanın düzenleyicisine cep telefonunuzda girin ve ardından aşağıdaki sırayla bağlanın:

1. iPhone'u ve bilgisayarı aynı Wi-Fi ağına bağlayın.
2. Mobil düzenleyicide Uzaktan düzenleme dosyasını açın ve adresin görünmesini bekleyin.
3. Telefonunuzda görüntülenen tam adresi bilgisayarınızın tarayıcısına girin. Eski oturum adresini kullanmayın ve bilgisayarınızın yerel ana bilgisayarını telefonunuzun adresiyle karıştırmayın.
4. Mobil düzenleme oturumunuzu açık tutun, yazı tipi boyutu gibi bilgisayarınızda kolayca tanımlanabilecek bir şeyi değiştirin ve ardından değişiklikleri cep telefonunuzdan önizleyin.
5. Düzenleme tamamlandıktan sonra cep telefonuna dönerek enstrümanı kaydedin ve bunu gerçek gösterge panelinde onaylayın.

Adres açılamıyorsa öncelikle iki cihazın gerçekten aynı ağda olduğunu ve mobil oturumun hala çalıştığını doğrulayın. Uzaktan düzenlemeyi kapatmak, düzenleyiciden çıkmak veya uygulamayı arka plana geçirmek oturumu durduracaktır; yeniden açıldıktan sonra telefonda görüntülenen adres kullanılacaktır.

Bu bağlantı, ayrı bir oturum açma parolası olmadan şifrelenmemiş yerel HTTP kullanıyor. Bu LAN adresine erişimi olan bir cihaz, mevcut taslağı ve kaynaklarını okuyabilir veya değiştirebilir ya da düzenleme günlüğünü görüntüleyebilir. Bu nedenle yalnızca güvenilir bir ağda etkinleştirilir. Düzenleme tamamlandıktan sonra uzaktan düzenleme kapatılır ve telefona kaydedilir.

Öncelikle bunun bir kod sorunu mu yoksa bir veri sorunu mu olduğunu belirleyin

Önizleme doğrudan bir hata bildirdiğinde öncelikle günlükteki satır numarasına bakın. Parantezleri, özellik adlarını ve veri türlerini kontrol edin; örneğin bir dizede toFixed'yi çağırmak ve hiçbir sinyalin yerini tespit etmek iki farklı sorundur.

Önizleme normalse ancak gerçek enstrümanın değeri yoksa, önce veri kaynağını kontrol edin. Temel hız için konumlandırmayı kontrol edin, OBD için cihaz parametre listesini kontrol edin ve ardından cihaz tarafından seçilen verileri ve okuma ifadesini kontrol edin. Eksik testi sabit bir sayı ile değiştirmeyin ve bağlantının düzeldiğini düşünmeyin.

İçerik bir araya toplanmış veya kırpılmış

Öncelikle onu "bir kapsayıcı + bir satır metin" şeklinde küçültün, kullanılabilir alanı onaylayın ve ardından simgeyi, ikinci metin satırını ve grafikleri birer birer geri koyun. Sabit genişliği, yüksekliği, yazı tipi boyutunu ve aralığını kontrol edin. İçeriği düzenlemek için Yığın'ı kullanın; genel çeviri, ölçeklendirme veya döndürme gerektiğinde transform kullanın.

Animasyonun etkisi yok

Öncelikle hedef niteliğin kendisinin gerçekten değiştiğini doğrulayın ve ardından animations.property öğesinin bu niteliği işaret ettiğini doğrulayın. Animasyon bildirildiği için sweepAngle={180}'nin kendi kendine dönmemesi düzeltildi. Önce önizlemede değiştirilen verileri doğrulayın ve ardından gerçek verilere göre güncelleyin.

Kaydetmeden önce tam bir kontrol yapın

Görünümü farklı boyutlarda ve açık ve koyu temalarda kontrol edin; geçerli sıfırları, eksik ölçümleri ve metin okumalarını doğrulayın; Gerçek verileri kontrol etmek için göstergeyi sayfaya eklemeden önce önizlemeyi kapatın ve kaydedin. Cihaz ancak görünüm, kod ve gerçek okumalar eşleştiğinde tamamlanabilir.