Chỉnh sửa thêm: bố cục, hoạt ảnh và chia sẻ

Đầu tiên hãy thực hành thêm biểu tượng bên cạnh tốc độ. Ví dụ đầy đủ bên dưới chỉ hiển thị số cố định 78 để dễ dàng nhìn thấy các thay đổi về bố cục; nó vẫn chưa chạm tới tốc độ thực tế.

Lớp bên ngoài HStack sắp xếp các biểu tượng và nội dung ở bên phải trái và phải. Bên phải VStack sắp xếp các số và đơn vị lên xuống. Vì vậy, những gì bạn thấy là hai cấp độ: toàn bộ dòng được sắp xếp sang trái và phải, còn văn bản được sắp xếp lên xuống.

Hãy thử ba sửa đổi theo trình tự: thay đổi lớp bên ngoài spacing={12} thành 24, các biểu tượng và văn bản sẽ cách xa nhau hơn; thay đổi lớp bên trong spacing={4} thành 12, các số và đơn vị sẽ cách xa nhau hơn; thay đổi lớp bên trong alignment="leading" thành "trailing" và hai dòng văn bản sẽ được căn chỉnh về bên phải.

Lưu ý các trục căn chỉnh: HStack dùng alignment để căn theo chiều dọc, còn VStack căn theo chiều ngang. x/y là độ lệch hiển thị, không phải khoảng cách; chúng không thay đổi vị trí bố cục của nội dung bên cạnh.

Sau khi xác định được bố cục, hãy thay thế 78 cố định bằng biểu thức đọc trong ví dụ về tốc độ đầu tiên và chọn tốc độ trong cài đặt dữ liệu. Bằng cách này, bạn chỉ thay đổi một điều mỗi lần luyện tập.

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

Ví dụ này chuyển đổi tốc độ thành góc cung, sau đó thêm phần chuyển tiếp để thay đổi góc. Đầu tiên chọn tốc độ cơ bản trong cài đặt đồng hồ rồi dán mã.

speed / 200 lấy tỷ lệ tương ứng với 200, giới hạn ở 0…1 và sau đó nhân với 360, đây là góc hiện tại cần vẽ. Ví dụ: khi tốc độ là 50 thì góc là 90° và khi tốc độ là 100 thì góc là 180°. Số 200 ở đây là phạm vi ví dụ, sử dụng giá trị trong đơn vị tốc độ hiện tại, có thể được sửa đổi theo công cụ của riêng bạn.

startAngle={-90} đặt điểm bắt đầu lên trên cùng; sweepAngle xác định số góc cần quét tính từ điểm bắt đầu. property: 'sweepAngle' trong animations có nghĩa là tạo hiệu ứng cho sự thay đổi của thuộc tính này: khi thay đổi từ 90° thành 180°, phải mất 0,25 giây để hoàn tất quá trình chuyển đổi.

Hãy thử thay đổi duration thành 1 và xem vòng cung đi theo mục tiêu mới chậm hơn. Hoạt ảnh không làm tăng tần suất lấy mẫu của dữ liệu thực và cũng không tự động biến vòng cung thành hoạt ảnh được tính giờ; phải có một góc mục tiêu mới để thay đổi xảy ra.

Đoạn mã sau hiển thị một đường ngang khi không có tốc độ mà không ngụy trang bài kiểm tra bị thiếu thành 0. Các cung chỉ được vẽ cho các số đọc hợp lệ.

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

Đóng bản xem trước và lưu đồng hồ trước khi xuất từ ​​menu của đồng hồ đã lưu. .instrument chứa mã, tài nguyên hình ảnh và định nghĩa đầu vào, có thể được gửi hoặc lưu vào "tệp" thông qua bảng chia sẻ hệ thống. Các giá trị mặc định trong định nghĩa sẽ được xuất. Các giá trị đầu vào được thay đổi trên thiết bị này sẽ không được xuất. OBD liên kết thiết bị không được xuất.

Người nhận mở nó bằng CapDrive và vẫn cần được thêm vào trang qua Sửa bảng đồng hồ sau khi nhập. Đặt giá trị, văn bản hoặc tùy chọn của riêng bạn trong Liên kết đầu vào; đầu vào OBD chọn thông số xe tương ứng của thiết bị nhận.

Khi chia sẻ đồng hồ đo RPM hoặc nhiệt độ nước làm mát, hãy nêu rõ loại thông số nào của xe là bắt buộc và nơi cần đọc. Miễn là mã định danh đầu vào được giữ nguyên, việc đóng lại thiết bị không yêu cầu sửa đổi mã. Kiểm tra các kích thước và chủ đề khác nhau trước khi chia sẻ cũng như kiểm tra thông tin cá nhân trong mã, nội dung và văn bản mặc định.

Những gì đang được chỉnh sửa trên máy tính là bản thảo nhạc cụ hiện đang mở trên điện thoại. Trước tiên, hãy nhập trình chỉnh sửa của nhạc cụ này trên điện thoại di động, sau đó kết nối theo thứ tự sau:

1. Kết nối iPhone và máy tính vào cùng mạng Wi-Fi.
2. Mở Chỉnh sửa từ xa trong trình chỉnh sửa di động và đợi địa chỉ xuất hiện.
3. Nhập địa chỉ đầy đủ hiển thị trên điện thoại của bạn vào trình duyệt máy tính. Không sử dụng địa chỉ phiên cũ và đừng nhầm localhost của máy tính với địa chỉ điện thoại của bạn.
4. Giữ phiên chỉnh sửa trên thiết bị di động của bạn mở, sửa đổi nội dung nào đó dễ nhận biết trên máy tính của bạn, chẳng hạn như kích thước phông chữ, sau đó xem trước các thay đổi trên điện thoại di động của bạn.
5. Sau khi chỉnh sửa hoàn tất, hãy quay lại điện thoại di động để lưu thiết bị và xác nhận nó trên bảng điều khiển thực tế.

Nếu không thể mở được địa chỉ, trước tiên hãy xác nhận rằng hai thiết bị thực sự nằm trên cùng một mạng và phiên di động vẫn đang chạy. Tắt tính năng chỉnh sửa từ xa, thoát khỏi trình chỉnh sửa hoặc chuyển ứng dụng sang chế độ nền sẽ dừng phiên; sau khi mở lại, địa chỉ hiện đang hiển thị trên điện thoại sẽ được sử dụng.

Kết nối này sử dụng HTTP cục bộ không được mã hóa và không có mật khẩu đăng nhập riêng. Một thiết bị có quyền truy cập vào địa chỉ LAN này có thể đọc hoặc sửa đổi bản nháp hiện tại và các tài nguyên của nó hoặc xem nhật ký chỉnh sửa. Do đó, nó chỉ được kích hoạt trên một mạng đáng tin cậy. Sau khi chỉnh sửa xong, chỉnh sửa từ xa sẽ được đóng và lưu trên điện thoại.

Trước tiên hãy xác định xem đó là sự cố về mã hay sự cố dữ liệu

Khi bản xem trước trực tiếp báo lỗi, trước tiên hãy xem số dòng trong nhật ký. Kiểm tra dấu ngoặc đơn, tên thuộc tính và kiểu dữ liệu; Ví dụ: gọi toFixed trên một chuỗi và việc định vị không có tín hiệu là hai vấn đề khác nhau.

Khi bản xem trước bình thường nhưng công cụ thực tế không có giá trị, trước tiên hãy kiểm tra nguồn dữ liệu. Kiểm tra vị trí của tốc độ cơ bản, kiểm tra danh sách tham số thiết bị cho OBD, sau đó kiểm tra dữ liệu và biểu thức đọc được chọn bởi thiết bị. Đừng thay thế bài kiểm tra còn thiếu bằng một con số cố định và cho rằng kết nối đã được sửa.

Nội dung bị chen chúc hoặc bị cắt xén

Đầu tiên hãy thu nhỏ nó thành "một vùng chứa + một dòng văn bản", xác nhận khoảng trống có sẵn, sau đó đặt lại từng biểu tượng, dòng văn bản thứ hai và đồ họa. Kiểm tra chiều rộng, chiều cao, kích thước phông chữ và khoảng cách cố định. Sử dụng Stack để sắp xếp nội dung; sử dụng transform khi cần dịch, chia tỷ lệ hoặc xoay tổng thể.

Hoạt hình không có tác dụng

Trước tiên hãy xác nhận rằng bản thân thuộc tính đích đang thực sự thay đổi, sau đó xác nhận rằng animations.property trỏ đến thuộc tính này. Đã sửa lỗi sweepAngle={180} không tự quay chỉ vì hoạt ảnh được khai báo. Trước tiên, hãy xác minh dữ liệu đã thay đổi trong bản xem trước, sau đó cập nhật dữ liệu thực tế.

Kiểm tra toàn bộ trước khi lưu

Kiểm tra giao diện ở các kích cỡ khác nhau và chủ đề sáng và tối; xác minh các số 0 hợp lệ, số đo còn thiếu và số đọc văn bản; đóng bản xem trước và lưu trước khi thêm thước đo vào trang để kiểm tra dữ liệu thực tế. Chỉ khi hình thức bên ngoài, mã và số đọc thực khớp với nhau thì thiết bị mới có thể được hoàn thành.