Device Dashboard trên Mobile

Khi user tap vào một thiết bị trong app mobile, màn hình chi tiết hiển thị. Bạn có thể tùy chỉnh hoàn toàn màn hình này bằng dashboard.

Cấu hình

Mức độ Device Profile (áp dụng cho cả loại)

Thiết lập dashboard mặc định cho tất cả thiết bị cùng profile:

VieLang IoT > Device Profiles > [Profile] > Mobile dashboard:

Enable mobile dashboard: ✓
Dashboard:               [Temperature Sensor Dashboard]
State entity parameter:  deviceId

Mức độ từng thiết bị (ghi đè profile)

Device Details > Mobile dashboard:

Use profile default: ✗
Dashboard:           [Custom Device Dashboard]

Thiết kế Dashboard cho Mobile

Dashboard trên mobile cần tối ưu cho màn hình nhỏ.

Bố cục khuyến nghị

Viewport: 390px × 844px (iPhone 14)

┌──────────────────────┐
│  [Device Name]       │ ← Header card
│  Status: Online 🟢   │
│  Last seen: 1s ago   │
├──────────────────────┤
│  Temperature  25.5°C │ ← Value card (big font)
│  Humidity     60%    │
├──────────────────────┤
│  [Chart 24h]         │ ← Mini chart
│  ____/\____/\_____   │
├──────────────────────┤
│  [RPC Buttons]       │ ← Action buttons
│  [Reboot] [Config]   │
└──────────────────────┘

Widget phù hợp mobile

Widget	Phù hợp
Value Card	✓✓✓ (giá trị lớn, dễ đọc)
Line Chart (mini)	✓✓
Status indicator	✓✓✓
RPC Button	✓✓✓
Alarm List	✓✓
Gauge	✓✓
Map	✓ (GPS tracking)

State Entity Parameter

Tham số deviceId được truyền vào dashboard để load đúng thiết bị:

Dashboard state: default
State entity parameter: deviceId

→ Dashboard nhận device entity
→ Tất cả widget alias tự động resolve về đúng thiết bị

Multiple States (Màn hình phân tầng)

Dashboard có thể có nhiều state cho phép drill-down:

State 1: Overview (mặc định)
  - Temperature card
  - Humidity card
  - [Xem lịch sử] button → State 2

State 2: History
  - Line chart 7 ngày
  - Data table
  - [Quay lại] button → State 1

State 3: Settings
  - Threshold configuration
  - Alert settings

RPC Actions trên Mobile

Widget RPC Button cho phép user điều khiển thiết bị:

Button: Reboot
  Method: reboot
  Params: {}
  Confirmation: "Bạn có chắc muốn khởi động lại?"
  Success message: "Đã gửi lệnh reboot"

Button: Set Threshold
  Method: setThreshold
  Params: { value: ${input} }  ← lấy từ input field

GPS Location (Bản đồ)

Nếu thiết bị có attribute latitude và longitude:

Widget: Route Map
Keys: latitude, longitude
Tracking: realtime update

App mobile hiển thị vị trí thiết bị trên bản đồ.

Dashboard Actions (Mobile Actions)

Thêm action vào toolbar của mobile:

Action 1:
  Name: Gọi hỗ trợ
  Icon: phone
  Type: Open URL
  URL: tel:+84123456789

Action 2:
  Name: Báo cáo lỗi
  Icon: bug_report
  Type: Navigate to dashboard state: report

Xem thêm Mobile Actions.

Performance Tips

Giới hạn số widget per dashboard (< 10 trên mobile)
Dùng time range ngắn mặc định (last 1 hour thay vì 24h)
Tránh widget nặng như large data table trên mobile
Dùng value card thay chart khi chỉ cần giá trị hiện tại
Set refresh rate hợp lý (30-60s thay vì realtime)