Tạo đồng hồ tốc độ đầu tiên

Mở Thêm（…）→ Đồng hồ tùy chỉnh trong bảng điều khiển và chọn Thêm đồng hồ mới. Đồng hồ mới đã đi kèm với đầu vào tốc độ cơ bản.

1. Nhấp vào tên ở đầu trình chỉnh sửa, đi tới Cài đặt đồng hồ và đặt tên là "Tốc độ của tôi".
2. Nhấp vào bánh răng bên cạnh Liên kết đầu vào để mở Cấu hình tham số. Kiểm tra tốc độ đầu vào: mã định danh là speed, loại là Dữ liệu cơ bản, nguồn là Tốc độ. Nếu thiếu, hãy sử dụng Thêm tham số để tạo một cái mới.
3. Nhấp vào Xong để quay lại và lưu cài đặt, sau đó quay lại khu vực chỉnh sửa.

Kịch bản đọc tốc độ thông qua $data.current.speed; ở đây tên trường đến từ mã định danh đầu vào. Trình soạn thảo cung cấp các gợi ý về loại như được xác định. Ví dụ này không yêu cầu ràng buộc OBD.

Thay thế toàn bộ nội dung ban đầu của vùng chỉnh sửa bằng mã hoàn chỉnh bên dưới. Đừng bọc nó trong main() khác. Ví dụ này chỉ có một chức năng nhập.

Bây giờ hãy giữ mã như cũ. Nó sẽ đọc tốc độ hiện tại mỗi lần cần vẽ, sắp xếp các giá trị và đơn vị lên xuống; khi thiếu số đọc sẽ hiển thị một đường ngang. Phần tiếp theo giải thích nó theo thứ tự thực hiện.

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

Nhìn vào dữ liệu đầu tiên, sau đó là hình ảnh. Giả sử lần này speed là { value: 42.3, unit: "km/h" }:

1. const speed = $data.current.speed Đọc bài này đi. Ở đây speed là một đối tượng chứa các giá trị số và đơn vị chứ không phải chính số đó.
2. speed?.value == null kiểm tra các bài kiểm tra còn thiếu. Khi đối tượng không tồn tại hoặc giá trị trống, '—' được chọn; khi giá trị là 0, nhánh này sẽ không được lấy.
3. Math.round(speed.value) làm tròn 42.3 thành 42 và đưa nó vào Text đầu tiên để hiển thị. Việc làm tròn chỉ ảnh hưởng đến màn hình hiển thị của đồng hồ này và không sửa đổi số đọc ban đầu.
4. Text thứ hai hiển thị speed.unit. Khi hiện tại không có đơn vị nào, ?? $env.speedUnit sử dụng đơn vị tốc độ của môi trường hiển thị hiện tại.
5. VStack sắp xếp hai văn bản chồng lên nhau và spacing={8} kiểm soát khoảng cách giữa chúng.

$env.foreground và $env.accent cung cấp văn bản và màu nhấn cho chủ đề hiện tại. Những màu sắc này sẽ cập nhật khi chủ đề thay đổi.

Không sử dụng speed?.value || '—' để đánh giá các số đo bị thiếu: JavaScript sẽ coi các số 0 hợp lệ là giá trị sai, khiến đường ngang hiển thị không chính xác khi đỗ xe.

Nhấp vào Xem trước ở cuối trình chỉnh sửa. Bạn sẽ thấy số tốc độ lớn hơn ở trên cùng và đơn vị nhỏ hơn ở hàng dưới cùng. Các con số trong bản xem trước là các giá trị mô phỏng, không yêu cầu khởi động xe và không nhất thiết phải bằng tốc độ đo bằng điện thoại di động tại thời điểm này.

Sau đó thực hiện ba sửa đổi nhỏ và xem trước mỗi lần:

Kiểm tra các kích cỡ khác nhau và chủ đề sáng và tối. Khi nội dung bị cắt ở một kích thước nhất định, trước tiên hãy giảm kích thước phông chữ hoặc khoảng cách, sau đó quan sát. Không sử dụng số lượng lớn offset x/y để che đậy các vấn đề về bố cục.

Nếu xảy ra lỗi, hãy khôi phục về trạng thái ban đầu và kiểm tra theo số dòng trong nhật ký. Khi xem trước, góc trên bên phải là Nhật ký; sau khi đóng bản xem trước và quay lại trạng thái chỉnh sửa, góc trên bên phải trở về Lưu. Bản xem trước thành công chỉ có nghĩa là bộ đầu vào mô phỏng này có thể được hiển thị và dữ liệu thực tế cần được kiểm tra trong bước tiếp theo.

Đóng bản xem trước, nhấp vào Lưu, thoát trình chỉnh sửa và tìm "Tốc độ của tôi" trong thư viện nhạc cụ. Mở lại Thêm（…）→ Sửa bảng đồng hồ, nhấp vào + để thêm nó và cuối cùng nhấp vào Xong.

Lúc này thẻ chuyển sang đọc tốc độ thực tế. Bạn có thể đặt nó và đồng hồ đo tốc độ tích hợp trên cùng một trang để xác minh: khi chúng sử dụng cùng một trường tốc độ cơ bản, các giá trị sẽ tương ứng; do các phương pháp lưu giữ số thập phân khác nhau nên màn hình hiển thị có thể hơi khác một chút.

Tại thời điểm này, công cụ đầu tiên đã hoàn tất. Trong bài viết tiếp theo, hãy thay thế "nhận tốc độ" bằng "lấy tham số OBD của riêng bạn" và bố cục cũng như mã hiển thị có thể tiếp tục được sử dụng.