Tạo mặt đồng hồ bằng Watch Face Studio

Hướng dẫn này mô tả các cửa sổ và công cụ chính có trong Watch Face Studio (WFS).

Hình 1. Màn hình chính của Watch Face Studio.

Công cụ

WFS bao gồm các công cụ sau:

• Add Component (Thêm thành phần): mở danh sách các thành phần bạn có thể thêm vào mặt đồng hồ.
• Forward (Tiến) và Backward (Lùi): di chuyển một thành phần đã chọn lên trước hoặc ra sau.
• Group (Nhóm) và Ungroup (Huỷ nhóm): nhóm nhiều thành phần lại với nhau để có thể kiểm soát như một thành phần hoặc huỷ nhóm các thành phần.
• Mask (Mặt nạ): che tất cả hoặc một phần của các lớp khác dựa trên đường viền của hình dạng cho lớp dưới cùng.
• Build (Tạo): mở hộp thoại tạo.
• Run on Device (Chạy trên thiết bị): mở hộp thoại để xem trước mặt đồng hồ trên thiết bị.

Thành phần

Bạn có thể thêm bao nhiêu thành phần tuỳ ý vào mặt đồng hồ của mình. Bạn cũng có thể sử dụng một nguồn thiết kế tuỳ chỉnh cho các thành phần. Ví dụ: hiển thị dữ liệu nhịp tim hoặc số bước bằng một thành phần văn bản, hoặc thêm một hình ảnh tuỳ chỉnh để chạy một ứng dụng.

Loại thành phần

Thành phần được hỗ trợ được mô tả trong các phần sau.

Canvas mặt đồng hồ

Đặt màu canvas cho lớp dưới cùng của mặt đồng hồ:

Văn bản

Các trường văn bản là văn bản thông thường theo mặc định. Văn bản thông thường ở dạng tĩnh và không thay đổi. Trong cửa sổ thuộc tính cho trường văn bản, bạn có thể thay đổi trường văn bản từ văn bản thường sang văn bản dữ liệu. Văn bản dữ liệu sẽ thay đổi và được điền dựa trên các thẻ.

Để biết thêm thông tin, hãy xem bài viết Biểu thức thẻ.

Chọn tuỳ chọn Apply Curved-Text (Áp dụng văn bản cong) để tạo văn bản cong theo mặt đồng hồ:

Xác định đường cong của văn bản bằng cách đặt Chiều rộng (W) và Chiều cao (H). Nếu bạn thay đổi chiều rộng (W) và chiều cao (H), kích thước của thành phần văn bản sẽ tự động thay đổi. Để xác định vị trí văn bản, hãy chọn một trong các giá trị đặt trước trong phạm vi. Bạn có thể tạo thêm các phạm vi bằng cách chỉ định giá trị Start (Bắt đầu) và Angular distance (Khoảng cách góc). Đặt hướng của văn bản theo chiều kim đồng hồ (CW) hoặc ngược chiều kim đồng hồ (CCW).

Hình dạng

Thêm nhiều hình dạng, bao gồm cả hình elip và hình chữ nhật.

Hình ảnh

Nhập hình ảnh tuỳ chỉnh.

Ảnh động

Nhập chuỗi hình ảnh cho ảnh động, như mô tả trong các bước sau.

1. Tạo chuỗi ảnh động bằng một chương trình thiết kế, chẳng hạn như Adobe Flash hoặc Adobe Premiere.
2. Nhấp vào Add Component > Animation (Thêm thành phần > Ảnh động) để thêm các tệp ảnh động vào mặt đồng hồ.
3. Chọn một chuỗi hình ảnh từ trình duyệt tệp, sau đó nhấp vào Upload (Tải lên).
4. Chỉnh sửa ảnh động bằng cách thay đổi thứ tự của hình ảnh, xoá hình ảnh hoặc thêm hình ảnh.

5. Đặt Trigger value (Giá trị trình kích hoạt) để xác định thời điểm bạn muốn phát ảnh động.

   Đặt giá trị trình kích hoạt thành WatchFace on để bắt đầu chạy ảnh động ngay khi mặt đồng hồ hiển thị. Các tuỳ chọn khác bao gồm Tap (Nhấn), Every Sec (Mỗi giây), Every Min (Mỗi phút) và Every Hour (Mỗi giờ). Bạn cũng có thể trì hoãn quá trình bắt đầu bằng cách sử dụng Delay (Độ trễ) rồi nhập số giây vào.

Các tuỳ chọn bổ sung cho ảnh động bao gồm:

• Auto replay (Tự động phát): ngay lập tức lặp lại ảnh động sau khi hoàn tất cho đến khi xảy ra sự kiện gián đoạn, chẳng hạn như tắt màn hình.
• Repeat delay (Độ trễ lặp lại): đặt độ trễ giữa các lần lặp lại của ảnh động lặp lại.
• Resume Playback (Tiếp tục phát): xác định xem nên tiếp tục phát ảnh động hay bắt đầu lại từ đầu khi quá trình phát bị dừng do gián đoạn, chẳng hạn như do nhận được một thông báo hoặc có cuộc gọi điện thoại.
• Hide before playing (Ẩn trước khi phát): xác định xem có ẩn ảnh động cho đến khi quá trình phát được kích hoạt hay không.
• Hide after finished (Ẩn sau khi kết thúc): xác định xem có ẩn ảnh động khi quá trình phát hoàn tất hay không.

Nội dung đa phương tiện

Nhập các hình ảnh động có sẵn như tệp AGIF, Lottie hoặc WEBP.

Thêm một hình ảnh đa phương tiện như mô tả trong các bước sau:

1. Nhấp vào Thêm thành phần > Đa phương tiện.
2. Chọn tệp từ trình duyệt tệp, sau đó nhấp vào Tải lên.
3. Đặt Trigger Value (Giá trị trình kích hoạt) thành thời gian bắt đầu của ảnh động.

Lưu ý rằng kích thước tệp, độ phân giải và số khung hình của hình ảnh đa phương tiện có thể ảnh hưởng đến mức tiêu thụ pin và hiệu suất của thiết bị. Hình ảnh đa phương tiện được tải theo cách không đồng bộ trong quá trình hoạt động, đồng thời có thể có độ trễ khi phát tuỳ thuộc vào các chức năng trên đồng hồ của người dùng và nhiều đặc điểm của hình ảnh.

Kim đồng hồ

Thêm kim giờ, kim phút và kim giây cho đồng hồ:

Mở trình duyệt tệp để chọn tệp hình ảnh cần nhập cho mỗi kim.

Các kim của đồng hồ kim có thuộc tính Rotation (Xoay). Thuộc tính này bao gồm các tuỳ chọn sau:

• Sync with (Đồng bộ hoá với)
• Time Zone (Múi giờ)
• Rotate (Xoay)
• Value (Giá trị)
• Movement Effect (Hiệu ứng chuyển động)

Tuỳ chọn Sync With (Đồng bộ hoá với) có các lựa chọn sau:

• Hour in Day (Giờ trong ngày)
• Minute in Hour (Phút trong giờ)
• Second in Minute (Giây trong phút)
• Day of Month (Ngày trong tháng)
• Month of Year (Tháng trong năm)
• Day of Week (Ngày trong tuần)
• Day of Year (Ngày trong năm)
• Moon Phase (Tuần trăng)

Lựa chọn Second in Minute (Giây trong phút) chỉ hoạt động với hiệu ứng chuyển động Sweep (Mượt). Hiệu ứng này được đặt tự động khi bạn thêm thành phần kim giây:

Đồng hồ số

Các tuỳ chọn cho đồng hồ số gồm có Date (Ngày) và Time (Giờ):

Khi thêm Date (Ngày), hãy thêm thành phần văn bản bằng thẻ ngày. Chế độ hiển thị mặc định cho ngày là DAY_WEEK_S MON_S DAY_1_31_Z.

Khi thêm Time (Thời gian), hãy thêm thành phần văn bản bằng thẻ đồng hồ số. Chế độ hiển thị mặc định cho thời gian số là HOUR_1_12_Z:MIN_Z:SEC_Z.

Thanh tiến trình

Hãy thêm thanh tiến trình vào mặt đồng hồ để theo dõi các hoạt động. Các tuỳ chọn cho thành phần thanh tiến trình bao gồm một thanh tiến trình dạng tuyến tính và dạng tròn. Xác định vị trí của thanh tiến trình bằng cách chọn một trong 6 giá trị đặt trước trong phạm vi. Bạn có thể tạo thêm các phạm vi bằng cách chỉ định Start (Bắt đầu) và Angular distance (Khoảng cách góc). Đặt hướng của thanh tiến trình theo chiều kim đồng hồ hoặc ngược chiều kim đồng hồ.

Quản lý thành phần

Hãy quản lý các thành phần bằng công cụ WFS. Bạn có thể thêm, nhóm, huỷ nhóm và sắp đặt các thành phần trên mặt đồng hồ như mô tả trong phần sau.

Thêm thành phần

Thêm một thành phần bằng nút +:

Khi bạn thêm một thành phần, thành phần đó sẽ được đặt ở vị trí mặc định trên canvas. Thành phần này được tự động chọn để bạn có thể dễ dàng sửa đổi.

Nhóm hoặc huỷ nhóm các thành phần

Nhóm là sự kết hợp của một hoặc nhiều thành phần. Bạn có thể nhóm tất cả các thành phần. Bạn cũng có thể huỷ nhóm các thành phần.

Che hoặc để lộ các thành phần

Khi bạn sử dụng nhóm mặt nạ, hình dạng của lớp dưới cùng sẽ xác định khu vực hiển thị của nhóm mặt nạ. Các lớp trên của lớp dưới cùng chỉ xuất hiện qua đường viền hình của lớp dưới cùng.

Ví dụ: nếu bạn đặt một hình ảnh bên trong hình tam giác ở lớp dưới cùng và một hình ảnh cũng như ảnh động trong các lớp phía trên, thì hình ảnh và ảnh động sẽ chỉ xuất hiện thông qua đường viền hình tam giác của lớp dưới cùng.

Để tạo nhóm mặt nạ, hãy làm như sau:

1. Chọn các lớp bạn muốn nhóm.
2. Chọn Mask (Mặt nạ) từ khu vực phím tắt hoặc nhấp chuột phải vào các lớp rồi chọn Mask (Mặt nạ).

Để giải phóng nhóm mặt nạ trong cửa sổ các lớp, hãy làm như sau:

1. Chọn nhóm mặt nạ.
2. Chọn Unmask (Mở mặt nạ) từ khu vực phím tắt hoặc nhấp chuột phải vào các lớp rồi chọn Unmask (Mở mặt nạ).

Cửa sổ xem trước

Cửa sổ xem trước là khu vực làm việc chính khi thiết kế mặt đồng hồ.

Thêm tất cả các thành phần trên mặt đồng hồ vào canvas hiển thị trong cửa sổ xem trước. Trên canvas, hãy kéo các phần tử vào vị trí, thay đổi kích thước, sắp xếp và xoay các phần tử đó.

Cửa sổ lớp

Cửa sổ lớp hiển thị danh sách các thành phần và nhóm được hiển thị trong cửa sổ xem trước. Theo mặc định, mỗi thành phần đều có lớp riêng.

Trong cửa sổ lớp này, bạn có thể sử dụng các thao tác sau:

• Tìm kiếm: tìm kiếm các lớp theo tên.
• Hiển thị/Ẩn: hiển thị hoặc ẩn lớp. Các lớp ẩn không được hiển thị trong cửa sổ xem trước.
• Màu giao diện: bật/tắt màu giao diện của bạn.
• Đổi tên: thay đổi tên lớp bằng cách nhấp đúp vào trường tên rồi nhập một tên mới.

Nếu bạn nhấp chuột phải vào các lớp, các tuỳ chọn sau trên trình đơn sau sẽ hiển thị:

• Lock/Unlock (Khoá/Mở khoá): khoá lớp để lớp đó không di chuyển trên canvas.
• Group/Ungroup (Nhóm/Huỷ nhóm): nhóm nhiều thành phần lại với nhau để có thể kiểm soát như một thành phần hoặc huỷ nhóm các thành phần.
• Mask/Unmask (Mặt nạ/Mở mặt nạ): che tất cả hoặc một phần của các lớp khác dựa trên đường viền hình của lớp dưới cùng hoặc loại bỏ lớp khỏi nhóm mặt nạ.
• Swap image (Hoán đổi hình ảnh): di chuyển tệp hình ảnh từ lớp này sang lớp khác. Chỉ hiển thị cho hình ảnh.
• Layer color (Màu lớp): thêm nhãn màu vào lớp để phân biệt các lớp.

Dòng có điều kiện

Các dòng có điều kiện cho phép bạn hiện và ẩn các thành phần trên mặt đồng hồ, đồng thời kiểm soát hành vi của các thành phần đó. Sử dụng các dòng có điều kiện để thay đổi giao diện của mặt đồng hồ theo những điều kiện nhất định, chẳng hạn như thời gian, số bước, pin hoặc sự kiện.

Khi bạn thêm một thành phần, điều kiện thời gian sẽ được đặt theo mặc định. Để điều chỉnh các điều kiện này, hãy nhấp vào biểu tượng điều kiện trên lớp mong muốn. Để đặt điều kiện cần lặp lại, hãy nhấp chuột phải vào khu vực khung rồi chọn Loop (Vòng lặp).

Vui lòng lưu ý rằng các lớp không hiển thị không làm giảm hiệu suất hoặc ảnh hưởng đến thời lượng pin.

Bạn có thể đặt mặt đồng hồ để phản hồi với thời gian, số bước, trạng thái pin hoặc một sự kiện, như mô tả trong các phần sau.

Giờ

Mặt đồng hồ của bạn có thể linh hoạt thay đổi dựa trên các khoảng thời gian. Ví dụ: mặt đồng hồ có thể sáng vào ban ngày rồi tối dần sau một khoảng thời gian nhất định. Bạn có thể đặt thời gian theo giờ, phút hoặc giây.

Thêm điều kiện thời gian bằng cách thực hiện theo các bước sau:

1. Tạo các lớp.
2. Đặt khoảng thời gian để kiểm soát thời điểm hiển thị từng lớp. Chọn thanh bắt đầu rồi chọn phạm vi thời gian.
3. Nhấp và kéo từ thanh bắt đầu sang thanh kết thúc.
4. Lặp lại các bước 2 và 3 để đặt khoảng thời gian cho từng lớp.
5. Nhấp vào Run (Chạy) để xem trước các thay đổi.

Để hiển thị các mặt đồng hồ khác nhau cho chế độ cài đặt 12 giờ và 24 giờ dựa trên chế độ cài đặt đã chọn trên điện thoại của người dùng, hãy làm như sau:

1. Thêm 2 thành phần của đồng hồ số, thành phần đầu tiên cho phiên bản 12 giờ và thành phần thứ hai cho phiên bản 24 giờ.
2. Đặt các thành phần này vào cùng một vị trí.
3. Thêm các điều kiện 12 giờ và 24 giờ vào các dòng có điều kiện của thành phần.
4. Đặt khoảng thời gian để hiển thị thành phần đồng hồ số đầu tiên cho lớp 12 giờ ở định dạng 12 giờ và hiển thị lớp còn lại ở định dạng 24 giờ.

Kiểm soát thời gian

Thanh trượt điều khiển thời gian cho phép bạn xem mặt đồng hồ trong thực tế. Hãy sử dụng tính năng này để xem trước mặt đồng hồ sẽ thay đổi như thế nào trong suốt cả ngày. Kéo thanh trượt đến các thời điểm cụ thể hoặc xem ảnh động trên mặt đồng hồ bằng cách sử dụng nút phát và nút tua đi.

Số bước

Bạn có thể thiết kế mặt đồng hồ để thay đổi linh hoạt theo số bước của người dùng. Ví dụ: bạn có thể tạo mặt đồng hồ thay đổi dựa trên tỷ lệ phần trăm mục tiêu số bước hằng ngày đã đạt được.

Pin

Bạn có thể thiết kế mặt đồng hồ để thay đổi linh hoạt theo tỷ lệ phần trăm pin hiện có của đồng hồ.

Sự kiện

Bạn có thể thiết kế mặt đồng hồ để linh hoạt thay đổi theo trạng thái thiết bị, chẳng hạn như pin yếu hoặc thông báo chưa đọc. Để làm việc này, hãy chọn sự kiện mong muốn và hình ảnh hoặc ảnh động bạn muốn hiển thị trong lúc diễn ra sự kiện đó.

Cửa sổ thuộc tính

Mỗi thành phần có một loạt các thuộc tính có thể sửa đổi. Ví dụ: bạn có thể thay đổi màu của các số trên đồng hồ số hoặc chọn xem kim đồng hồ có đo giờ, phút hay giây hay không.

Bảng điều khiển hành động

Bảng điều khiển hành động trong cửa sổ thuộc tính cho phép các hành động tương tác với mặt đồng hồ của bạn. Ví dụ: bạn có thể cho phép người dùng nhấn vào một thành phần để thay đổi hình ảnh, mở các ứng dụng khác nhau hoặc đo nhịp tim.

Kiểu

Sử dụng thẻ kiểu để thay đổi kiểu của lớp đã chọn. Bạn có thể thêm kiểu cho hình ảnh, hình ảnh đa phương tiện, chỉ mục và các thành phần kim đồng hồ. Bạn có thể thêm tối đa 30 màu giao diện và 10 hình ảnh.

Sử dụng Customization Editor (Trình chỉnh sửa tuỳ chỉnh) để áp dụng kiểu tuỳ chỉnh cho các thành phần.

Trong hộp thoại Customization Editor (Trình chỉnh sửa tuỳ chỉnh), bạn có thể tuỳ chỉnh kiểu của từng thành phần, lớp và tên. Bạn cũng có thể sắp xếp lại hoặc hợp nhất các kiểu trong hộp thoại này.

Bạn có thể thêm tối đa 30 màu giao diện vào thẻ Style (Kiểu). Mỗi màu giao diện có thể có tối đa 3 biến thể màu.

Đặt các màu này trong thẻ Layer (Lớp) hoặc Properties (Thuộc tính). Trong thẻ Layer (Lớp), hãy đặt màu sắc bằng cách bật/tắt biểu tượng Apply Theme Color (Áp dụng màu giao diện) tối đa 3 lần:

Trong thẻ Properties (Thuộc tính), hãy đặt màu sắc bằng cách chọn nút chọn Apply Theme Color (Áp dụng màu giao diện):

Màu

Áp dụng màu đã chỉ định cho thành phần hoặc lưu màu giao diện cho mặt đồng hồ. Đối với các chức năng, giao diện màu ban đầu có thang màu xám.

Giao diện hình ảnh

Sửa đổi giao diện của hình ảnh bằng các chế độ điều khiển sau:

• Hue (Tông màu): kiểm soát tông màu.
• Saturate (Độ bão hoà): giúp tăng hoặc giảm độ sống động của màu hình ảnh.
• Lightness (Độ sáng): giúp màu hình ảnh sáng hơn.

Giao diện văn bản

Sử dụng thẻ Giao diện văn bản để đặt căn chỉnh văn bản và kiểu phông chữ. Trang trí văn bản bằng cách chọn Add Bitmap Font (Thêm phông chữ Bitmap) trong phần Project Settings (Cài đặt dự án). Nếu bạn muốn sử dụng kích thước phông chữ mặc định trong số các phông chữ bitmap đã thêm vào dự án, hãy chọn hộp đánh dấu Apply Default Font Size (Áp dụng kích thước phông chữ mặc định).

Chạy

Bạn có thể chạy mặt đồng hồ trong WFS ở bảng Run (Chạy). Bạn có thể điều chỉnh thời gian, ngày, mức pin thiết bị, số bước của người dùng, nhịp tim của người dùng hoặc giá trị con quay hồi chuyển trong WFS để kiểm thử giao diện của mặt đồng hồ trong nhiều trường hợp. Bạn cũng có thể điều chỉnh bất kỳ kiểu nào khác được đặt trong Customization Editor (Trình chỉnh sửa tuỳ chỉnh), bao gồm cả số thông báo chưa đọc, biểu thức thẻ hoặc dòng có điều kiện. Bạn có thể đặt chế độ xem trước Run (Chạy) thành bật hoặc luôn bật. Khi sử dụng chế độ luôn bật, WFS hiển thị giá trị Current-On Pixel Ratio (Tỷ lệ điểm ảnh hiện tại) và nút Analyze (Phân tích).

Kiểm thử mặt đồng hồ trên một thiết bị bằng tuỳ chọn Run on device (Chạy trên thiết bị).

Để biết thêm thông tin chi tiết, vui lòng xem bài viết Kiểm thử mặt đồng hồ.