API başvurusu

Özel araçlar View ağacını döndürmek için main() kullanır. Burada betik yapısını, çalışan arayüzü ve çizim bileşenlerini tanıtıyoruz ve çeşitli API'lere giriş sağlıyoruz.

küresel nesne

CapDrive, aşağıdaki global nesneleri kendiniz içe aktarmanıza veya oluşturmanıza gerek kalmadan doğrudan enstrümantasyon komut dosyasında sağlar. main() içinde okunabilir ve veri elde etmek, görüntüleme ortamına uyum sağlamak, geçici durumu kaydetmek ve günlükleri çıkarmak için kullanılabilirler.

nesne	Amaç ve ortak erişim yöntemleri
$data	Sürüş verileri. Mevcut örneği `$data.current` aracılığıyla okuyun ve bu yolculuğun son 30 saniyesindeki örnekleri `$data.history` aracılığıyla okuyun.
$env	Mevcut enstrümanın mevcut boyutlar, tema renkleri, birimler, dil ve `$env.width`, `$env.foreground` gibi görüntüleme modu dahil görüntüleme ortamı.
$sessionStorage	Geçerli araç örneğinin geçerli yolculuk içindeki geçici durumu. Okumak için `get(key)` ve kaydetmek için `set(key, value)` kullanın; Yolculuğu sonlandırırken veya cihazı yeniden yüklerken silin.
console	Komut dosyası günlüğü. Verilerin ve teşhis bilgilerinin çıktısını almak için `console.log(...)`, `console.warn(...)` ve diğer yöntemleri kullanın.

$data ve $env Uygulama tarafından güncellenir ve salt okunur girişlerdir. Bu değer, main() her çağrıldığında okunur; Verilerin okunmuş kopyasının değiştirilmesi gerçek sürüş verilerini değiştirmeyecektir. $ nesne adının bir parçasıdır, $env.width'yi doğrudan kullanın ve bir işlev çağrısı olarak yazılmasına gerek yoktur.

Çizim içeriğini tanımlayın

Enstrüman komut dosyasındaki main(), JSX tarafından açıklanan ekranı döndürür. Her JSX düğümü, boyutu, rengi ve diğer çizim davranışlarını kontrol eden niteliklere ve son resmi oluşturan iç içe geçmiş ilişkilere sahip yerleşik bir View'dir.

Aşağıdaki betiğin tamamı bir sayı ve bir birim satırı çizmektedir. VStack iki Text yukarı ve aşağı düzenler, spacing aralığı ayarlar, fontSize yazı tipi boyutunu ayarlar ve renk, geçerli görüntüleme ortamı tarafından sağlanır.

function main() {
  return (
    <VStack spacing={6}>
      <Text fontSize={48} color={$env.foreground}>
        78
      </Text>
      <Text fontSize={14} color={$env.accent}>
        km/h
      </Text>
    </VStack>
  );
}

JavaScript ifadesi JSX'nin {}'sinde kullanılabilir. Sabit 78 değerini hesaplama sonucuyla değiştirin; metin girişle birlikte değişecektir; hesaplama sonucu aynı zamanda renk, boyut veya yay açısı gibi niteliklere de aktarılabilir.

$data: sürüş verileri

$data.current alanları bu enstrümanın giriş tanımlayıcısından gelir. Gösterge ayarları → Giriş bağlantıları alanına yerel değeri girin veya OBD parametresini seçin ve Parametre yapılandırması yönetim tanımına dahil edin. Aşağıda karşılık gelen tanımlayıcının tanımlandığı varsayılmaktadır.

Örnek erişim yöntemi	Giriş tanımı ve dönüş içeriği
`$data.current.speed`	Temel hız girişi, `{ value, unit }` değerini döndürür.
`$data.current.gForce`	`longitudinal`, `lateral`, `combined` ve birimleri içeren temel G değeri girişi.
`$data.current.location`	Boylam, enlem ve birimleri içeren temel konum girişi.
`$data.current.elapsed`	Saniye cinsinden temel kaydedilen süre girişi.
`$data.current.recording`	Bir Boolean değeri döndüren temel kayıt durumu girişi.
`$data.current.coolant`	OBD girilir ve araç parametreleri bağlandıktan sonra `{ value, unit }` veya `null` değerini döndürür.
`$data.current.limit`	Sayısal giriş doğrudan bir sayı döndürür.
`$data.current.label`	Metin girişi doğrudan bir dize döndürür.
`$data.current.showUnit`	Girişi değiştirin ve doğrudan bir Boole değeri döndürün.
`$data.current.style`	Bir öğe seçin ve seçilen dizeyi döndürün.

$data.history, eskiden yeniye doğru düzenlenmiş olarak mevcut yolculuğun son 30 saniyesini kapsar ve örnekleme alanı current ile tutarlıdır; sabit giriş geçerli yapılandırmayı kullanır. Pencere boş olabilir veya eksik testler içerebilir. OBD değeri bir harita değişmezi olabilir, ilk önce tür kontrol edilmelidir. Sıfırın null'den farklı bir anlamı vardır. Tam giriş, birimler ve geçmiş kuralları.

$env: Görüntüleme ortamı

$env geçerli enstrümanın bulunduğu görüntüleme alanını tanımlar. Kartı yeniden boyutlandırdıktan, temaları değiştirdikten veya HUD girdikten sonra Uygulama güncellenmiş bir ortam sağlar. Bu değerlere dayanan hesaplamalar main() içine yerleştirilmelidir.

Alan	Anlamı ve kullanımı
`$env.width`、`$env.height`	Geçerli cihazın mevcut genişliği ve yüksekliği ekran noktalarındadır. Yazı tipi boyutunu, çapını veya uç nokta koordinatlarını hesaplamak için kullanılabilir.
`$env.foreground`、`$env.accent`	Geçerli temanın metin rengi ve vurgu rengi doğrudan `color`, `stroke`, `background` ve diğer renk niteliklerine aktarılabilir.
`$env.dark`	Koyu görünümün kullanılıp kullanılmayacağı, türü booleandır.
`$env.mode`	Görüntüleme modu, değer `'instruments'` veya `'hud'`'dir.
`$env.speedUnit`	Geçerli hız görüntüleme birimi, değer `'km/h'` veya `'mph'`'dir. Okumanın kendi birimi olduğunda, ilk önce okumanın `unit`'si kullanılır.
`$env.language`	Uygulamanın geçerli dil tanımlayıcısı; örneğin `'zh-Hans'`.
`$env.reduceMotion`	Sistemde azaltılmış dinamik efektler etkinleştirilmiş olsa da, tekrarlanan animasyonu buna göre ayarlayabilirsiniz.
`$env.obdDevice`	Şu anda bağlı olan cihaz için `{ id, name }` veya hiçbir cihaz hazır değilse `null`.

Örneğin, mükemmel bir daire yerleştirmeye uygun maksimum çapı elde etmek için Math.min($env.width, $env.height) kullanın ve metnin temayı takip etmesini sağlamak için $env.foreground kullanın. Tam ekran ortamı tanımı.

Örnek: Verilerle ve görüntüleme ortamlarıyla çalışma

Sayaç ayarlarında hızı seçin. Aşağıdaki komut dosyası mevcut hızı okur, kartın genişliğine ve yüksekliğine göre yazı tipi boyutunu hesaplar, tema renklerini kullanır ve okuma tarafından sağlanan birimleri görüntüler. Hız eksik olduğunda yatay bir çizgi görüntülenir; geçerli bir sıfır 0 olarak görüntülenir.

function main() {
  const speed = $data.current.speed;
  const fontSize = Math.min(64, $env.width * 0.25, $env.height * 0.5);

  return (
    <VStack spacing={6}>
      <Text fontSize={fontSize} color={$env.foreground}>
        {speed?.value == null ? '—' : Math.round(speed.value)}
      </Text>
      <Text fontSize={14} color={$env.accent}>
        {speed?.unit ?? $env.speedUnit}
      </Text>
    </VStack>
  );
}

Veriler güncellendiğinde bir sonraki aramada yeni hız kullanılacaktır; kart boyutu veya teması değiştiğinde yazı tipi boyutu ve rengi yeni ortam değerlerini kullanacaktır. Tepe değerleri ve diğer durumları aynı yolculukta biriktirmeniz gerekiyorsa $sessionStorage kullanmaya devam edebilirsiniz; gerçek girişi kontrol etmeniz gerekiyorsa, hata ayıklama sırasında günlüğün çıktısını almak için console.log('speed', speed) komutunu kullanabilirsiniz.

Ekran güncellemesi

Geçerli giriş, giriş tanımı veya görüntüleme ortamı değiştiğinde, CapDrive en son $data ve $env'yi sağlar, tüm dosyayı yeni yerel kapsamda yürütür ve ardından bu sefer tanımlanan main()'yi çağırır. Üst düzey hesaplamalar da yeniden yürütülür ve sıradan değişkenler farklı zamanlarda korunmaz. Aynı girişler atlanır; yalnızca en son bekleyen giriş işlenirken tutulur. Geçmiş penceresi bakımı ve dahili örnekleme zamanı değişiklikleri tek başına yürütmeyi tetiklemez; açıkça tanımlanmış zaman girişi değişiklikleri yapar.

Komut dosyaları için sabit bir sıklık yoktur; gerçek güncellemeler giriş ve işlem süresine bağlıdır. Yayılma durumu için $sessionStorage kullanın; Çizim sonu tarafından bağımsız olarak yürütülen nitelik geçişi için animations kullanın. Sürekli döngülerden veya beklemelerin engellenmesinden kaçınmak için main() eşzamanlı olarak tamamlanmalıdır.

İlgili işletim arayüzleri

main(): Senaryo girişi. Bu girişi okuyun ve çizilecek View, dizi veya boş içeriği eşzamanlı olarak döndürün.
animations: View öznitelik değişiklikleri için süre, eğri ve tekrarlama gibi geçiş davranışlarını ayarlayın.
Color / Gradient: Renk, HDR renk, doğrusal degrade, radyal degrade ve açısal degrade oluşturun.
İçe aktar ve paylaş: Cihaz paketinin konfigürasyonunu, komut dosyalarını, kaynaklarını ve dışa aktarma yöntemlerini anlayın.

Bileşenleri çizin

Ekranları kaplar aracılığıyla düzenleyin ve bunlara metin, grafik ve veri görünümleri yerleştirin. Aşağıda tüm yerleşik View amaçlarına göre listelenmektedir; her bileşen sayfası kullanımı, özellikleri, varsayılan davranışı ve kombinasyon örneklerini açıklar.

içerik

Okumaları, birimleri, simgeleri ve resimleri görüntüleyin veya başlıklı ölçüm cihazı içerik alanını kullanın.

Text

Okumayı, birimleri veya açıklayıcı metni görüntüleyin. Yazı tipi, yazı tipi boyutu, hizalama, satır kaydırma ve kesme ayarlanabilir; içerik eşit şekilde bir dizeye dönüştürülür ve boş değerler boş olarak görüntülenir.

Symbol

Hız göstergesi, termometre gibi sistem simgelerini çizmek için SF Symbols kullanın. Sembol yazı tipi boyutu, yazı tipi ağırlığı ve renklendirme yöntemi ayarlanabilir. Belirli bir sembolün mevcut olup olmadığı cihaz sistemine bağlıdır.

Image

Logo, dekoratif arka plan veya döşeme dokusu gibi bir gösterge kaynağından bir görüntü görüntüler. source Ölçekleme, kırpma veya yineleme yöntemini mevcut boyutlara ayarlamak için kaynak adını kullanın.

CardContent

Başlık, doğru içerik ve gövde metni içeren bir araç yapısı sağlar. renderer metni, şekilleri, grafikleri veya tabloları düzenlemek için kullanılabilecek başlık ve kenar boşlukları hariç contentSize değerini alır.

düzen

Birden fazla View düzenleyin, kalan alanı ayırın ve yatay, dikey, yığılmış ve ölçeklendirilmiş düzenler oluşturun.

HStack

View altyazılarını soldan sağa, simge ve sayıların, sayıların ve birimlerin vb. yatay kombinasyonlarına uygun şekilde düzenleyin. spacing bitişik aralığı ayarlar, alignment bu satır içindeki üst ve alt veya metin taban çizgisi hizalamasını ayarlar.

VStack

View alt başlıklarını, başlıkların, ana sayıların ve birimlerin dikey kombinasyonuna uygun şekilde yukarıdan aşağıya doğru düzenleyin. spacing bitişik aralığı ayarlar ve alignment bu sütundaki sol ve sağ hizalamayı ayarlar.

ZStack

Arka plan, ölçek ve merkez okumaları için uygun olan birden fazla View öğesini aynı alanda istifleyin. View çocukları sırayla çizilir ve alignment bunların kapsayıcı içindeki ortak hizalama konumunu belirler.

Spacer

İçeriği her iki tarafa da itmek için Yığın'da kalan alanı ayırın veya içerik için elastik mesafe ayırın. minLength minimum uzunluğu ayarlar; açık width veya height boyutu karşılık gelen yönde sabitleyebilir.

RadialLayout

Ölçekleri, sayıları veya sembolleri bir dairenin etrafına dağıtın. radius, merkezden View yerleşim merkezine olan mesafeyi kontrol eder ve startAngle ve sweepAngle dağıtım aralığını kontrol eder.

RepeatedLayout

Sürekli hareket eden ölçekler ve pusulalar için uygun olan, kırpma penceresindeki bir deseni periyodik olarak çoğaltır. period tekrar aralığını ayarlar, value ve anchor geçerli değerin nereye hizalanacağını belirler.

grafikler

Arka plan, kontur ve açı gibi özelliklerle işaretler, ilerlemeler, çizgiler ve özel ana hatlar çizin ve görünümü kontrol edin.

Rectangle

Arka planlar, ilerleme çubukları ve kenarlıklarla birlikte kullanılmak üzere isteğe bağlı yuvarlatılmış köşelere sahip bir dikdörtgen çizer. background iç kısmı doldurur, stroke konturları, lineWidth ve strokePosition konturun genişliğini ve konumunu kontrol eder.

Circle

Mevcut alan içerisinde dairesel ilerlemeye ve metre ölçeklerine uygun mükemmel bir daire veya yay çizer. Çap, genişlik ve merkezin daha küçük değerini alır. startAngle ve sweepAngle görüntü aralığını kontrol eder. Çemberin tamamı kapatıldığında arka plan doldurulabilir.

Ellipse

Belirli bir genişlik ve yükseklik dahilinde bir elips veya eliptik yay çizer. Başlangıç açısı, süpürme açısı, dolgu ve kontur ile eliptik ölçekler veya dekoratif ana hatlar oluşturulabilir.

Arc

Başlangıç açısına ve süpürme açısına göre, ölçek yayları ve ilerleme gösterimi için uygun eliptik bir yay çizin. Kenarlık genişlik ve yüksekliğe göre belirlenir. Konturun genişliği, uç noktası ve konumu yapılandırılabilir ve arka planın tamamen kapatıldığında doldurulmasına izin verilir.

Line

Yerel koordinatlarda iki uç nokta arasına düz bir çizgi çizer. Gösterge çizgileri, işaretler ve bölücüler için uygundur; rengi, genişliği, çizgi ve uç nokta stillerini ayarlayabilirsiniz.

Polyline

Bir dizi noktayı sırayla birleştirerek bir sürekli çizgi çizin. closed son noktayı ve ilk noktayı kapalı bir kontur oluşturacak şekilde bağlayabilir ve doldurmaya izin verir; koordinatlar mevcut View'deki nokta sayısını kullanır.

Path

Taşıma, çizgi, dörtlü, kübik, yay ve kapatma gibi komutlarla yollar oluşturun. İşaretçileri, eğrileri ve birleştirilmiş ana hatları özelleştirmek ve dolgu kuralları ile konturları ayarlamak için uygundur.

Kombinasyonlar ve Malzemeler

Birleştirilmiş içeriğe küresel efektler uygulayın veya buzlu cam malzeme yüzeyini boyayın.

Group

Birden fazla View'yi bir bütün halinde birleştirerek şeffaflık, döndürme veya diğer özel efektleri eşit şekilde uygulayın. View çocuğu dış kabın düzenleme kurallarına uyar ve özel efektler sentezlenen sonuçların tamamına uygulanır.

Material

İçerik alanı oluşturmak için metin ve grafiklerle üst üste gelebilecek buzlu cam malzemenin yüzeyini çizin. type şu anda frosted'ı destekliyor, style malzeme kalınlığını kontrol ediyor; görünür etki, arkasındaki içeriğe bağlıdır.

Grafikler ve Haritalar

Veri serilerini eğriler ve histogramlar halinde çizin veya konumları ve rotaları görüntüleyin.

LineChart

Gerçek x/y değerlerine sahip veri serisini bir eğri olarak çizin. Hız ve zaman gibi trendlere uygundur, koordinat aralıklarını, eksenleri ve etiketleri destekler; eksik y değerleri satır bölümlerini kesecektir.

BarChart

Her veri öğesini kategorik değerleri karşılaştırmak için uygun bir çubuk olarak çizin. Yatay veya dikey olarak düzenlenebilir, sayısal aralıklar, kategori etiketleri ve sayısal etiketler ayarlanabilir ve pozitif ve negatif değerleri destekleyebilir.

Map

Metre içindeki haritaları, konumları ve rotaları görüntüleyin. Rota noktaları sağlamak için path kullanılarak kamera merkezi, yönlendirme, yakınlaştırma ve harita stili ayarlanabilir; kullanıcının konumunu takip etmek geçerli konumlandırma verileri gerektirir.

Tip ve beyan dosyaları

Yaygın türler, boyutlar, kenar boşlukları, dönüşümler, konturlar, animasyonlar ve grafik verileri gibi yapıları merkezi olarak tanımlar. Düzenleyici aynı API için tür ipuçları sağlar ve bildirim dosyaları ayrıca harici düzenleyiciler tarafından kullanılmak üzere indirilebilir.

Ortak türler

capdrive.d.ts