3. Quy tắc giao diện Windows Host

3.1 Layout Landing Window (Bố cục tổng thể)

• Bố cục hai vùng: Control Panel nằm ở phần nhỏ bên trái (có thể thu gọn/ẩn hoàn toàn); Workspace nằm ở phần lớn bên phải.
• Loại bỏ Console/Terminal thô: Ở phiên bản UI chính thức, loại bỏ hoàn toàn terminal log để giao diện thoáng sạch.

3.2 Layout Workspace (Vùng làm việc chính bên phải)

• 3.2.1 Tab Display (Màn hình phụ):
  • Khung trên cùng: Sơ đồ đồ họa trực quan kéo thả sắp xếp vị trí màn hình ảo (Drag-and-drop screen layout).
  • Khung giữa: Dropdown chỉnh Độ phân giải & Tần số quét xếp cạnh nhau. Ngay dưới là nút Apply bắt buộc nhấn để áp dụng thay đổi.
  • Khung dưới: Các thanh trượt điều chỉnh hiển thị (từ -50 đến +50): Độ sáng màn hình tablet/độ sáng hình ảnh, độ bão hòa màu toàn dải, độ bão hòa từng kênh màu Red/Green/Blue, và độ tương phản.
  • Chi tiết thanh trượt: Nút `-` ở đầu trái và `+` ở đầu phải để tăng/giảm chính xác `1` đơn vị. Nút **Reset** bên phải đưa thông số về `0`.
• 3.2.2 Tab Camera (Máy ảnh):
  • Tối giản tối đa để hiển thị live webcam truyền về từ Android. Các cấu hình đẩy sang Control Panel bên trái.
  • Chính giữa dưới cùng: Bộ 3 nút thao tác nổi: **Capture** (Chụp ảnh), **Record/Stop** (Quay/Dừng), và **Flip Camera** (Đổi camera trước/sau).
  • Góc dưới bên phải: Nút **Full Screen** để xem camera toàn màn hình.
• 3.2.3 Tab Audio I/O (Âm thanh):
  • Thiết kế dạng **Dual-Lane Audio Console** chia dọc 2 làn song song: Làn **INPUT** (Micro thu từ Android) và Làn **OUTPUT** (Phát âm thanh PC ra Android).
  • Mỗi làn gồm cần gạt Volume fader dọc lớn, LED dB Meter nhảy động, đồ thị EQ 5-band kéo thả điểm nút trực quan và các nút lọc nhanh (AEC, Noise Suppression, Spatial 3D).

3.3 Control Panel (Bảng điều khiển Sidebar trái)

• 3.3.1 Nút điều khiển chung & Nút thu nhỏ:
  • Đỉnh: Tên ứng dụng `WDX`, tên thiết bị di động kết nối kèm LED chỉ báo, và cổng kết nối khả dụng (Wi-Fi/Bluetooth).
  • Giữa: 3 nút chuyển tab xếp dọc `Display`, `Camera`, `Audio I/O`.
  • Đáy: Bộ 3 nút ngang `Setting`, `Connection`, `Info` (Click sẽ hiện popup Modal ở chính giữa cửa sổ ứng dụng).
  • Nút ẩn/thu gọn (Minimize Sidebar): Nút gạt mỏng (latch) dọc ở biên giới chia Control Panel/Workspace. Click vào để thu gọn Sidebar về bên trái (chiều rộng bằng 0).
• 3.3.2 Bảng cài đặt riêng của từng tab:
  • Nằm ở giữa Control Panel. Ví dụ ở tab Camera, đây là nơi chọn ống kính camera, bitrate, fps và chất lượng stream.

3.4 Nút bấm và Màu sắc trên Windows (Buttons & Colors)

• Tương tác chuột (Click targets): Hiệu ứng hover làm sáng viền kính, phong cách slider/fader dẹt phẳng tối giản.
• Màu sắc: Tông tối (#08090d), Emerald chỉ kết nối tốt, Amber chỉ truyền tải dữ liệu hoạt động.

3.5 Kích thước & co giãn cửa sổ (Sizing & Responsiveness)

Quy tắc bố cục KHÔNG được để co giãn tuỳ tiện theo cửa sổ — chốt từ thử nghiệm thực tế 2026-06-13, áp dụng cho cả UI sản phẩm cuối:

• Control Panel rộng CỐ ĐỊNH theo pixel: bảng điều khiển trái có chiều rộng cố định (giá trị hiện dùng 400 px), KHÔNG co giãn khi phóng to/thu nhỏ cửa sổ. Mọi thành phần bên trong (nút, thẻ thiết bị, cụm điều khiển camera) tính theo pixel để bố cục ổn định.
• Khung Preview giữ ĐÚNG TỈ LỆ, đo theo dp: vùng preview luôn giữ tỉ lệ khung hình thật của luồng (không kéo méo theo cửa sổ); kích thước thu phóng đo theo dp và co giãn vừa khung, nhưng tỉ lệ không đổi. Phần dư quanh khung là viền đen (letterbox).
• Tỉ lệ preview bám luồng + hướng cảm biến: tỉ lệ lấy theo độ phân giải đang stream; nếu camera xoay 90°/270° (theo SENSOR_ORIENTATION) thì hoán đổi rộng↔cao để hình đúng chiều (điện thoại thường lệch 90° so với tablet).
• Giới hạn kích thước tối thiểu cửa sổ: không cho thu nhỏ dưới 1280 × 800 (logic px, scale theo DPI) để Control Panel cố định + Preview luôn đủ chỗ hiển thị.
• Khi thu phóng: chỉ vùng Preview/Workspace đổi kích thước (giữ tỉ lệ); Control Panel giữ nguyên bề rộng.
• Ưu tiên Preview, log không chiếm chỗ: Preview/Workspace luôn được ưu tiên không gian. Trong UI test, khung log ẩn mặc định và bật/tắt bằng nút trên thanh tiêu đề (không chia đôi màn hình với preview); ở UI sản phẩm cuối loại bỏ hẳn console (xem 3.1).