สร้างมาตรวัดความเร็วแรก

เปิด เพิ่มเติม（…）→ มาตรวัดที่กำหนดเอง ในแดชบอร์ดแล้วเลือก เพิ่มมาตรวัดใหม่ มิเตอร์ใหม่มาพร้อมกับอินพุตความเร็วพื้นฐานอยู่แล้ว

1. คลิกที่ชื่อที่ด้านบนของโปรแกรมแก้ไข ไปที่ การตั้งค่ามาตรวัด และตั้งชื่อว่า "ความเร็วของฉัน"
2. คลิกเฟืองข้าง การผูกอินพุต เพื่อเปิด การกำหนดค่าพารามิเตอร์ ตรวจสอบอินพุตความเร็ว: ตัวระบุคือ speed ประเภทคือ ข้อมูลพื้นฐาน แหล่งที่มาคือ ความเร็ว หากไม่มี ให้ใช้ เพิ่มพารามิเตอร์ เพื่อสร้างใหม่
3. คลิก เสร็จสิ้น เพื่อกลับและบันทึกการตั้งค่า จากนั้นกลับสู่พื้นที่แก้ไข

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

แทนที่เนื้อหาต้นฉบับทั้งหมดของพื้นที่แก้ไขด้วยโค้ดที่สมบูรณ์ด้านล่าง อย่ารวมไว้ใน main() อื่น ตัวอย่างนี้มีฟังก์ชันรายการเดียวเท่านั้น

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

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

ดูข้อมูลก่อนแล้วค่อยดูภาพ สมมติว่าเวลานี้ speed คือ { value: 42.3, unit: "km/h" }:

1. const speed = $data.current.speed อ่านข้อความนี้ ในที่นี้ speed เป็นวัตถุที่มีค่าตัวเลขและหน่วย ไม่ใช่ตัวเลขเอง
2. speed?.value == null ตรวจสอบค่าที่อ่านไม่ได้ เมื่อไม่มีอ็อบเจ็กต์หรือค่าว่างเปล่า '—' จะถูกเลือก เมื่อค่าเป็น 0 สาขานี้จะไม่ถูกนำไปใช้
3. Math.round(speed.value) ปัดเศษ 42.3 เป็น 42 และมอบให้กับ Text แรกเพื่อแสดง การปัดเศษจะส่งผลต่อการแสดงผลของมิเตอร์นี้เท่านั้น และไม่ได้ปรับเปลี่ยนการอ่านค่าเดิม
4. Text ตัวที่สองจะแสดง speed.unit เมื่อไม่มีหน่วยในขณะนี้ ?? $env.speedUnit จะใช้หน่วยความเร็วของสภาพแวดล้อมการแสดงผลปัจจุบัน
5. VStack จัดเรียงข้อความสองข้อความให้อยู่เหนือข้อความอื่น และ spacing={8} ควบคุมระยะห่างระหว่างข้อความทั้งสอง

$env.foreground และ $env.accent จัดเตรียมข้อความและสีเน้นเสียงสำหรับธีมปัจจุบัน สีเหล่านี้จะอัปเดตเมื่อธีมเปลี่ยนไป

อย่าใช้ speed?.value || '—' เพื่อตัดสินค่าที่อ่านไม่ได้: JavaScript จะถือว่าศูนย์ที่ถูกต้องเป็นค่าเท็จ ส่งผลให้เส้นแนวนอนแสดงไม่ถูกต้องเมื่อจอดรถ

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

จากนั้นทำการแก้ไขเล็กๆ น้อยๆ สามรายการ แล้วดูตัวอย่างในแต่ละครั้ง:

ตรวจสอบขนาดและธีมสว่างและมืดที่แตกต่างกัน เมื่อเนื้อหาถูกครอบตัดตามขนาดที่กำหนด ขั้นแรกให้ลดขนาดแบบอักษรหรือระยะห่าง จากนั้นจึงสังเกต อย่าใช้ออฟเซ็ต x/y จำนวนมากเพื่อปกปิดปัญหาโครงร่าง

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

ปิดการแสดงตัวอย่าง คลิก บันทึก ออกจากโปรแกรมแก้ไขและค้นหา "ความเร็วของฉัน" ในไลบรารีเครื่องดนตรี เปิด เพิ่มเติม（…）→ แก้ไขแดชบอร์ด อีกครั้ง คลิก + เพื่อเพิ่ม และสุดท้ายคลิก เสร็จสิ้น

ณ จุดนี้ การ์ดจะเปลี่ยนเพื่ออ่านความเร็วจริง คุณสามารถใส่มันและมาตรวัดความเร็วในตัวในหน้าเดียวกันเพื่อตรวจสอบ: เมื่อใช้ฟิลด์ความเร็วพื้นฐานเดียวกัน ค่าควรสอดคล้องกัน เนื่องจากวิธีการเก็บทศนิยมที่แตกต่างกัน การแสดงผลจึงอาจแตกต่างกันเล็กน้อย

ณ จุดนี้ เครื่องดนตรีชิ้นแรกก็เสร็จสมบูรณ์ ในบทความถัดไป แทนที่ "get speed" ด้วย "get your own OBD parameter" และคุณยังสามารถใช้โครงร่างและโค้ดการแสดงผลต่อไปได้