← Quay lại chỉ dẫn chung
2. Quy tắc giao diện Android Client
2.1 Layout Landing Window (Bố cục khi khởi động)
- Ngăn ngừa rung giật giao diện (Anti-jitter): Cố định kích thước Control Panel (Rộng 300dp ở ngang, Cao 320dp ở dọc) làm mỏ neo cố định. Vùng Preview co giãn tự do theo diện tích thừa.
- Phân bố vị trí Control Panel theo hướng xoay thiết bị:
- Phone Portrait (Điện thoại dọc): Control Panel nằm ngang ở đáy (Bottom Sheet, cao 320dp).
- Phone Landscape (Điện thoại ngang): Cầm 2 tay, thuận ngón cái phải → Control Panel nằm BÊN PHẢI.
- Tablet Landscape (Màn hình ngang máy tính bảng): Giống giao diện PC → Control Panel nằm BÊN TRÁI.
- Tablet Portrait (Máy tính bảng dọc): Control Panel nằm dưới đáy dạng Bottom Sheet.
- Thiết bị tỷ lệ vuông/màn gập (iPad, Galaxy Fold): Khi tỷ lệ rộng/cao từ 0.8 đến 1.25, tự động đổi hướng xếp thành dạng dọc (Preview trên, Panel dưới) giúp tăng diện tích xem 16:9 lên 43.5%.
2.2 Layout Workspace (Vùng Preview chính)
- Tỉ lệ khung hình (Aspect Ratio): Luôn bật chế độ
BoxFit.contain để video tự khít vùng chứa lớn nhất mà không bị méo hay cắt góc.
- Tương thích góc Camera: Camera xoay dọc tự động chuyển sang tỷ lệ 3:4, camera xoay ngang dùng tỷ lệ 4:3.
- Audio visualizer: Dải sóng âm động giãn nở đầy không gian Preview khi kích hoạt Tab Audio.
2.3 Control Panel (Bảng điều khiển chi tiết)
- 2.3.1 Nút điều khiển chung (General Controls):
- Header: Tên ứng dụng `WDX` ở trên cùng và Trạng thái kết nối hiển thị bên cạnh (Connected/Disconnected) bằng đèn LED màu sắc. Loại bỏ nút Connect thô.
- Footer: Hai nút cài đặt hệ thống `Setting` và `Info` nằm ở đáy.
- 2.3.2 Bảng cài đặt riêng của từng tab:
- Tab chuyển đổi: 3 tab `Display`, `Camera`, `Audio I/O` xếp ngang (khi Panel nằm dọc) hoặc xếp dọc (khi Panel nằm ngang).
- Nội dung cấu hình riêng:
- Display: Công tắc bật stream màn hình PC, danh sách dropdown chọn độ phân giải.
- Camera: Bật/Tắt preview, Bật/Tắt stream camera lên PC, chọn FPS/Resolution, chọn cụm Camera.
- Audio I/O: Tùy chọn bật mic/loa, đo âm lượng.
2.4 Nút bấm và Màu sắc trên Android (Buttons & Colors)
- Target chạm tối thiểu: `48 x 48 dp` cho mọi tương tác chạm.
- Màu sắc nhận diện: Indigo (#6366f1) cho màn hình phụ, Cyan (#06b6d4) cho Camera, Pink (#d946ef) cho Audio, và Emerald (#10b981) cho kết nối thành công.