เอกสาร API

เครื่องมือวัดแบบกำหนดเองใช้ main() เพื่อส่งคืนแผนผัง View ที่นี่เราจะแนะนำโครงสร้างสคริปต์ การรันอินเทอร์เฟซและส่วนประกอบการวาด และจัดเตรียมทางเข้าไปยัง API ต่างๆ

วัตถุระดับโลก

CapDrive จัดเตรียมออบเจ็กต์ส่วนกลางต่อไปนี้ในสคริปต์เครื่องมือวัดโดยตรง โดยไม่จำเป็นต้องนำเข้าหรือสร้างออบเจ็กต์ด้วยตนเอง สามารถอ่านได้ใน main() และใช้เพื่อรับข้อมูล ปรับให้เข้ากับสภาพแวดล้อมการแสดงผล บันทึกสถานะชั่วคราวและบันทึกเอาต์พุต

วัตถุ	วัตถุประสงค์และวิธีการเข้าถึงทั่วไป
$data	ข้อมูลการขับขี่ อ่านตัวอย่างปัจจุบันผ่าน `$data.current` และอ่านตัวอย่าง 30 วินาทีสุดท้ายของทริปนี้ผ่าน `$data.history`
$env	สภาพแวดล้อมการแสดงผลของเครื่องมือปัจจุบัน รวมถึงขนาด สีของธีม หน่วย ภาษา และโหมดการแสดงผล เช่น `$env.width`, `$env.foreground`
$sessionStorage	สถานะชั่วคราวของอินสแตนซ์เครื่องมือปัจจุบันภายในการเดินทางปัจจุบัน ใช้ `get(key)` เพื่ออ่าน และ `set(key, value)` เพื่อบันทึก; ชัดเจนเมื่อสิ้นสุดการเดินทางหรือโหลดอุปกรณ์ใหม่
console	บันทึกสคริปต์ ใช้ `console.log(...)`, `console.warn(...)` และวิธีการอื่นๆ เพื่อส่งออกข้อมูลและข้อมูลการวินิจฉัย

$data และ $env ได้รับการอัปเดตโดยแอปและเป็นอินพุตแบบอ่านอย่างเดียว ค่านี้จะถูกอ่านทุกครั้งที่เรียกใช้ main(); การแก้ไขสำเนาการอ่านข้อมูลจะไม่เปลี่ยนแปลงข้อมูลการขับขี่จริง $ เป็นส่วนหนึ่งของชื่ออ็อบเจ็กต์ ใช้ $env.width โดยตรง และไม่จำเป็นต้องเขียนเป็นการเรียกใช้ฟังก์ชัน

กำหนดเนื้อหาการวาดภาพ

main() ในสคริปต์เครื่องดนตรีจะส่งคืนหน้าจอที่อธิบายโดย JSX แต่ละโหนด JSX เป็น View ในตัว โดยมีคุณลักษณะที่ควบคุมขนาด สี และพฤติกรรมการวาดภาพอื่นๆ และความสัมพันธ์แบบซ้อนที่สร้างภาพสุดท้าย

สคริปต์ฉบับสมบูรณ์ด้านล่างจะดึงตัวเลขและแถวหน่วย VStack จัดเรียง Text สองตัวขึ้นและลง spacing ตั้งค่าระยะห่าง fontSize ตั้งค่าขนาดตัวอักษร และสีที่ได้มาจากสภาพแวดล้อมการแสดงผลปัจจุบัน

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 สามารถใช้ใน {} ของ JSX ได้ แทนที่ 78 คงที่ด้วยผลการคำนวณ และข้อความจะเปลี่ยนไปตามอินพุต ผลการคำนวณยังสามารถส่งผ่านไปยังคุณลักษณะต่างๆ เช่น สี ขนาด หรือมุมโค้งได้

$data: ข้อมูลการขับขี่

ฟิลด์ของ $data.current มาจากตัวระบุอินพุตของเครื่องดนตรีนี้ กรอกค่าเนทิฟใน การตั้งค่ามาตรวัด → การผูกอินพุต หรือเลือกพารามิเตอร์ OBD และใส่เกียร์ลงในคำจำกัดความการจัดการ การกำหนดค่าพารามิเตอร์ ข้อมูลต่อไปนี้จะถือว่ามีการกำหนดตัวระบุที่เกี่ยวข้องแล้ว

ตัวอย่างวิธีการเข้าถึง	นิยามอินพุตและส่งคืนเนื้อหา
`$data.current.speed`	อินพุตความเร็วพื้นฐาน ส่งคืน `{ value, unit }`
`$data.current.gForce`	อินพุตค่า G พื้นฐาน รวมถึง `longitudinal`, `lateral`, `combined` และหน่วย
`$data.current.location`	ข้อมูลตำแหน่งพื้นฐาน รวมถึงลองจิจูด ละติจูด และหน่วย
`$data.current.elapsed`	ข้อมูลระยะเวลาที่บันทึกพื้นฐานเป็นวินาที
`$data.current.recording`	อินพุตสถานะบันทึกพื้นฐาน ส่งกลับค่าบูลีน
`$data.current.coolant`	OBD เป็นอินพุตและส่งกลับ `{ value, unit }` หรือ `null` หลังจากเชื่อมโยงพารามิเตอร์ยานพาหนะ
`$data.current.limit`	การป้อนตัวเลขจะส่งกลับตัวเลขโดยตรง
`$data.current.label`	การป้อนข้อความจะส่งกลับสตริงโดยตรง
`$data.current.showUnit`	สลับอินพุตและส่งกลับค่าบูลีนโดยตรง
`$data.current.style`	เลือกรายการและส่งกลับสตริงที่เลือก

$data.history ครอบคลุม 30 วินาทีสุดท้ายของการเดินทางปัจจุบัน จัดเรียงจากเก่าไปหาใหม่ และฟิลด์การสุ่มตัวอย่างสอดคล้องกับ current; อินพุตคงที่ใช้การกำหนดค่าปัจจุบัน หน้าต่างอาจว่างเปล่าหรือมีการทดสอบที่ขาดหายไป ค่าของ OBD อาจเป็นค่าตัวอักษรของแผนที่ ควรตรวจสอบประเภทก่อน ศูนย์มีความหมายแตกต่างจาก null ข้อมูลเต็ม หน่วย และกฎประวัติ.

$env: สภาพแวดล้อมการแสดงผล

$env อธิบายพื้นที่แสดงผลซึ่งเป็นที่ตั้งของเครื่องมือปัจจุบัน หลังจากปรับขนาดการ์ด เปลี่ยนธีม หรือเข้าสู่ HUD แอปจะมีสภาพแวดล้อมที่อัปเดต การคำนวณที่อาศัยค่าเหล่านี้ควรอยู่ใน main()

สนาม	ความหมายและการใช้งาน
`$env.width`、`$env.height`	ความกว้างและความสูงที่มีอยู่ของอุปกรณ์ปัจจุบันอยู่ในจุดหน้าจอ สามารถใช้ในการคำนวณขนาดตัวอักษร เส้นผ่านศูนย์กลาง หรือพิกัดจุดสิ้นสุด
`$env.foreground`、`$env.accent`	สีข้อความและสีเน้นของธีมปัจจุบันสามารถส่งผ่านไปยัง `color`, `stroke`, `background` และคุณลักษณะสีอื่นๆ ได้โดยตรง
`$env.dark`	ไม่ว่าจะใช้ลักษณะที่ปรากฏสีเข้ม ชนิดเป็นบูลีน
`$env.mode`	โหมดการแสดงผล ค่าคือ `'instruments'` หรือ `'hud'`
`$env.speedUnit`	หน่วยแสดงความเร็วปัจจุบัน ค่าคือ `'km/h'` หรือ `'mph'` เมื่อการอ่านมีหน่วยของตัวเอง `unit` ของการอ่านจะถูกใช้ก่อน
`$env.language`	ตัวระบุภาษาปัจจุบันของแอป เช่น `'zh-Hans'`
`$env.reduceMotion`	ไม่ว่าระบบจะเปิดใช้งานเอฟเฟ็กต์ไดนามิกที่ลดลงหรือไม่ก็ตาม คุณสามารถปรับภาพเคลื่อนไหวซ้ำได้ตามนั้น
`$env.obdDevice`	`{ id, name }` สำหรับอุปกรณ์ที่เชื่อมต่ออยู่ในปัจจุบัน หรือ `null` หากไม่มีอุปกรณ์ใดพร้อม

ตัวอย่างเช่น ใช้ Math.min($env.width, $env.height) เพื่อให้ได้เส้นผ่านศูนย์กลางสูงสุดที่เหมาะสำหรับการวางวงกลมที่สมบูรณ์แบบ และใช้ $env.foreground เพื่อทำให้ข้อความเป็นไปตามธีม คำจำกัดความของสภาพแวดล้อมการแสดงผลแบบเต็ม.

ตัวอย่าง: การทำงานกับข้อมูลและสภาพแวดล้อมการแสดงผล

เลือกความเร็วในการตั้งค่ามิเตอร์ สคริปต์ต่อไปนี้อ่านความเร็วปัจจุบัน คำนวณขนาดแบบอักษรตามความกว้างและความสูงของการ์ด ใช้สีของธีม และแสดงหน่วยที่ได้จากการอ่านข้อมูล เส้นแนวนอนจะปรากฏขึ้นเมื่อความเร็วหายไป ศูนย์ที่ถูกต้องจะแสดงเป็น 0

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

เมื่ออัพเดตข้อมูลแล้วจะใช้ความเร็วใหม่ในการโทรครั้งถัดไป เมื่อขนาดการ์ดหรือธีมเปลี่ยนแปลง ขนาดตัวอักษรและสีจะใช้ค่าสภาพแวดล้อมใหม่ หากคุณต้องการสะสมค่าสูงสุดและสถานะอื่นๆ ในการเดินทางเดียวกัน คุณสามารถใช้ $sessionStorage ต่อไปได้ หากคุณต้องการตรวจสอบอินพุตจริง คุณสามารถใช้ console.log('speed', speed) เพื่อส่งออกบันทึกระหว่างการดีบัก

อัพเดตหน้าจอ

เมื่ออินพุต คำจำกัดความอินพุต หรือสภาพแวดล้อมการแสดงผลเปลี่ยนแปลง CapDrive จะจัดเตรียม $data และ $env ล่าสุด ดำเนินการไฟล์ทั้งหมดในขอบเขตโลคัลใหม่ จากนั้นเรียกใช้ main() ที่กำหนดไว้ในครั้งนี้ การคำนวณระดับบนสุดจะถูกดำเนินการอีกครั้ง และตัวแปรทั่วไปจะไม่ถูกคงไว้ตามช่วงเวลา อินพุตที่เหมือนกันจะถูกข้ามไป เฉพาะอินพุตที่รอดำเนินการล่าสุดเท่านั้นที่จะยังคงอยู่ในการประมวลผล การบำรุงรักษาหน้าต่างประวัติและการเปลี่ยนแปลงเวลาตัวอย่างภายในเพียงอย่างเดียวไม่ทำให้เกิดการดำเนินการ การเปลี่ยนแปลงการป้อนข้อมูลเวลาที่กำหนดไว้อย่างชัดเจนทำ

ไม่มีความถี่คงที่สำหรับสคริปต์ การอัปเดตจริงขึ้นอยู่กับอินพุตและเวลาในการประมวลผล ใช้ $sessionStorage สำหรับสถานะช่วง; ใช้ animations สำหรับการเปลี่ยนแปลงแอตทริบิวต์ ซึ่งดำเนินการอย่างอิสระโดยส่วนท้ายของรูปวาด main() ควรดำเนินการให้เสร็จสิ้นพร้อมกันเพื่อหลีกเลี่ยงการวนซ้ำอย่างต่อเนื่องหรือการบล็อกการรอ

อินเตอร์เฟซการดำเนินงานที่เกี่ยวข้อง

main(): รายการสคริปต์ อ่านอินพุตนี้และส่งคืนเนื้อหา View อาร์เรย์ หรือว่างที่จะวาดพร้อมกัน
animations: กำหนดพฤติกรรมการเปลี่ยนแปลง เช่น ระยะเวลา เส้นโค้ง และการทำซ้ำสำหรับการเปลี่ยนแปลงแอตทริบิวต์ของ View
Color / Gradient: สร้างสี, สี HDR, การไล่ระดับสีเชิงเส้น, การไล่ระดับสีในแนวรัศมี และการไล่ระดับสีเชิงมุม
นำเข้าและแบ่งปัน: ทำความเข้าใจการกำหนดค่า สคริปต์ ทรัพยากร และวิธีการส่งออกของแพ็คเกจเครื่องมือ

วาดส่วนประกอบ

จัดระเบียบหน้าจอผ่านคอนเทนเนอร์และวางข้อความ กราฟิก และข้อมูลลงในมุมมองเหล่านั้น ต่อไปนี้แสดงรายการ View ในตัวทั้งหมดตามวัตถุประสงค์ หน้าส่วนประกอบแต่ละหน้าจะอธิบายการใช้งาน คุณสมบัติ พฤติกรรมเริ่มต้น และตัวอย่างการรวมกัน

เนื้อหา

แสดงค่าที่อ่านได้ หน่วย ไอคอน และรูปภาพ หรือใช้ชื่อพื้นที่เนื้อหามิเตอร์

Text

แสดงการอ่าน หน่วย หรือข้อความอธิบาย สามารถตั้งค่าแบบอักษร ขนาดแบบอักษร การจัดแนว การตัดบรรทัด และการตัดทอนได้ เนื้อหาจะถูกแปลงเป็นสตริงอย่างสม่ำเสมอและค่าว่างจะแสดงเป็นค่าว่าง

Symbol

ใช้ SF Symbols เพื่อวาดไอคอนระบบ เช่น มาตรวัดความเร็ว เทอร์โมมิเตอร์ สามารถตั้งค่าขนาดตัวอักษรสัญลักษณ์ น้ำหนักตัวอักษร และวิธีการระบายสีได้ จะมีสัญลักษณ์เฉพาะหรือไม่นั้นขึ้นอยู่กับระบบของอุปกรณ์

Image

แสดงรูปภาพจากทรัพยากรมาตรวัด เช่น โลโก้ พื้นหลังตกแต่ง หรือพื้นผิวกระเบื้อง source ใช้ชื่อทรัพยากรเพื่อตั้งค่าวิธีการปรับขนาด ครอบตัด หรือทำซ้ำตามขนาดที่มีอยู่

CardContent

ให้โครงสร้างเครื่องดนตรีพร้อมชื่อเรื่อง เนื้อหาที่ถูกต้อง และข้อความเนื้อหา ข้อความ renderer จะได้รับ contentSize ลบชื่อเรื่องและระยะขอบ ซึ่งสามารถใช้เพื่อจัดเรียงตัวเลข กราฟ หรือแผนภูมิ

เค้าโครง

จัดเรียง View หลายรายการ จัดสรรพื้นที่ที่เหลือ และสร้างเค้าโครงแนวนอน แนวตั้ง เรียงซ้อน และปรับขนาด

HStack

จัดเรียงคำบรรยาย View จากซ้ายไปขวา เหมาะสำหรับการผสมไอคอนและตัวเลข ตัวเลขและหน่วยในแนวนอน ฯลฯ spacing ตั้งค่าระยะห่างที่อยู่ติดกัน alignment ตั้งค่าด้านบนและด้านล่าง หรือการจัดแนวพื้นฐานของข้อความภายในบรรทัดนี้

VStack

จัดเรียงคำบรรยาย View จากบนลงล่าง เหมาะสำหรับชื่อเรื่อง หมายเลขหลัก และหน่วยรวมกันในแนวตั้ง spacing ตั้งค่าระยะห่างที่อยู่ติดกัน และ alignment ตั้งค่าการจัดตำแหน่งด้านซ้ายและขวาภายในคอลัมน์นี้

ZStack

ซ้อน View หลายรายการในพื้นที่เดียวกัน เหมาะสำหรับการอ่านพื้นหลัง สเกล และตรงกลาง ลูก View ถูกวาดตามลำดับ และ alignment ตั้งค่าตำแหน่งการจัดตำแหน่งทั่วไปภายในคอนเทนเนอร์

Spacer

จัดสรรพื้นที่ที่เหลืออยู่ใน Stack เพื่อดันเนื้อหาทั้งสองด้านหรือจองระยะห่างแบบยืดหยุ่นสำหรับเนื้อหา minLength กำหนดความยาวขั้นต่ำ ชัดเจน width หรือ height สามารถกำหนดขนาดในทิศทางที่สอดคล้องกัน

RadialLayout

แจกมาตราส่วน ตัวเลข หรือสัญลักษณ์รอบๆ วงกลม radius ควบคุมระยะห่างจากจุดศูนย์กลางถึงจุดศูนย์กลางโครงร่างของ View และ startAngle และ sweepAngle ควบคุมช่วงการกระจาย

RepeatedLayout

ทำซ้ำรูปแบบเป็นระยะๆ ในหน้าต่างการครอบตัด ซึ่งเหมาะสำหรับการเคลื่อนย้ายเครื่องชั่งและวงเวียนอย่างต่อเนื่อง period กำหนดช่วงเวลาการทำซ้ำ value และ anchor กำหนดว่าค่าปัจจุบันจะอยู่ในแนวใด

กราฟิก

วาดเครื่องหมาย ความก้าวหน้า เส้น และโครงร่างแบบกำหนดเอง และควบคุมลักษณะที่ปรากฏด้วยคุณสมบัติต่างๆ เช่น พื้นหลัง เส้นขีด และมุม

Rectangle

วาดรูปสี่เหลี่ยมผืนผ้าที่มีมุมโค้งมนเพื่อใช้กับพื้นหลัง แถบความคืบหน้า และเส้นขอบ background เติมภายใน, stroke สโตรก, lineWidth และ strokePosition ควบคุมความกว้างและตำแหน่งของสโตรก

Circle

วาดวงกลมหรือส่วนโค้งที่สมบูรณ์แบบภายในพื้นที่ที่มีอยู่ เหมาะสำหรับความก้าวหน้าของวงกลมและสเกลมิเตอร์ เส้นผ่านศูนย์กลางจะใช้ค่าความกว้างและศูนย์กลางน้อยกว่า startAngle และ sweepAngle ควบคุมช่วงการแสดงผล เมื่อปิดวงกลมทั้งหมด ก็สามารถเติมพื้นหลังได้

Ellipse

วาดวงรีหรือส่วนโค้งวงรีภายในความกว้างและความสูงที่กำหนด เกล็ดวงรีหรือโครงร่างการตกแต่งสามารถเกิดขึ้นได้จากมุมเริ่มต้น มุมกวาด การเติม และระยะชัก

Arc

วาดส่วนโค้งวงรีตามมุมเริ่มต้นและมุมกวาด เหมาะสำหรับส่วนโค้งของสเกลและการแสดงความคืบหน้า เส้นขอบถูกกำหนดโดยความกว้างและความสูง กำหนดความกว้าง จุดสิ้นสุด และตำแหน่งของเส้นขีดได้ และอนุญาตให้เติมพื้นหลังได้เมื่อปิดสนิท

Line

วาดเส้นตรงระหว่างจุดปลายสองจุดในพิกัดท้องถิ่น เหมาะสำหรับเส้นบ่งชี้ เครื่องหมายถูก และตัวแบ่ง คุณสามารถตั้งค่าสี ความกว้าง ขีดกลาง และรูปแบบจุดสิ้นสุดได้

Polyline

วาดเส้นหลายเส้นโดยเชื่อมต่อชุดจุดตามลำดับ closed สามารถเชื่อมต่อจุดสุดท้ายและจุดแรกเพื่อสร้างรูปร่างแบบปิด และอนุญาตให้เติมได้ พิกัดใช้จำนวนจุดใน View ปัจจุบัน

Path

สร้างเส้นทางด้วยคำสั่ง เช่น ย้าย เส้น รูปสี่เหลี่ยม ลูกบาศก์ ส่วนโค้ง และปิด เหมาะสำหรับการปรับแต่งพอยน์เตอร์ เส้นโค้ง และโครงร่างแบบรวม และการตั้งค่ากฎการเติมและเส้นขีด

การผสมผสานและวัสดุ

ใช้เอฟเฟ็กต์ระดับโลกกับเนื้อหาที่รวมกัน หรือทาสีพื้นผิววัสดุกระจกฝ้า

Group

รวม View หลายรายการเข้าด้วยกัน โดยใช้ความโปร่งใส การหมุน หรือเอฟเฟกต์พิเศษอื่น ๆ อย่างสม่ำเสมอ เด็ก View ปฏิบัติตามกฎการจัดเรียงของคอนเทนเนอร์ภายนอก และใช้เอฟเฟกต์พิเศษกับผลลัพธ์สังเคราะห์ทั้งชุด

Material

วาดพื้นผิวของวัสดุกระจกฝ้า ซึ่งสามารถซ้อนทับกับข้อความและกราฟิกเพื่อสร้างพื้นที่เนื้อหาได้ ขณะนี้ type รองรับน้ำค้างแข็ง style ควบคุมความหนาของวัสดุ เอฟเฟกต์ที่มองเห็นได้นั้นขึ้นอยู่กับเนื้อหาที่อยู่ด้านหลัง

แผนภูมิและแผนที่

ลงจุดชุดข้อมูลเป็นเส้นโค้งและฮิสโตแกรม หรือแสดงตำแหน่งและเส้นทาง

LineChart

พล็อตชุดข้อมูลด้วยค่า x/y จริงเป็นเส้นโค้ง เหมาะสำหรับแนวโน้ม เช่น ความเร็วและเวลา รองรับช่วงพิกัด แกน และป้ายกำกับ ค่า y ที่หายไปจะทำให้ส่วนของเส้นแตก

BarChart

พล็อตแต่ละรายการข้อมูลเป็นแท่ง เหมาะสำหรับการเปรียบเทียบค่าหมวดหมู่ สามารถจัดเรียงในแนวนอนหรือแนวตั้ง กำหนดช่วงตัวเลข ป้ายหมวดหมู่ และป้ายตัวเลข และรองรับค่าบวกและค่าลบ

Map

แสดงแผนที่ สถานที่ และเส้นทางภายในมิเตอร์ สามารถตั้งค่าศูนย์กล้อง การวางแนว การซูม และรูปแบบแผนที่ได้ โดยใช้ path เพื่อระบุจุดเส้นทาง การติดตามตำแหน่งของผู้ใช้ต้องใช้ข้อมูลตำแหน่งที่ถูกต้อง

ประเภทและไฟล์ประกาศ

ประเภททั่วไปจะกำหนดโครงสร้างจากส่วนกลาง เช่น ขนาด ระยะขอบ การแปลง เส้นขีด ภาพเคลื่อนไหว และข้อมูลแผนภูมิ ตัวแก้ไขให้คำแนะนำประเภทสำหรับ API เดียวกัน และยังสามารถดาวน์โหลดไฟล์การประกาศเพื่อใช้งานโดยตัวแก้ไขภายนอกได้

ชนิดข้อมูลทั่วไป

capdrive.d.ts