ปัญหาของสมาร์ทโฮม 5 App
ปัญหาที่พบบ่อยที่สุดในผู้ใช้สมาร์ทโฮมระยะแรก: มีอุปกรณ์ครบ แต่ต้องเปิด App ต่างๆ กัน App กล้อง, App แอร์, App ไฟ, App ประตู, App IAQ ความสะดวกที่ควรได้กลับกลายเป็นภาระ
Home Assistant Lovelace Dashboard แก้ปัญหานี้โดยรวมทุกระบบไว้ใน Interface เดียวที่กำหนดเองได้ทั้งหมด
หลักการออกแบบ Dashboard Mobile-First
คนไทย 85% ใช้สมาร์ทโฮมผ่านมือถือเป็นหลัก (ไม่ใช่ Tablet หรือ Desktop) ดังนั้น Dashboard ต้องออกแบบสำหรับหน้าจอ 6-7 นิ้วก่อน
หลัก 3S: Simple, Scannable, Swift
- Simple: ข้อมูลสำคัญที่สุด 5-7 ชิ้นในหน้าแรก ไม่ใช่ทุกอย่าง
- Scannable: ดูสถานะทั้งบ้านได้ใน 3 วินาที
- Swift: กดปุ่มที่ใช้บ่อยที่สุดได้ใน 1 Tap
โครงสร้าง Dashboard ที่แนะนำ
Tab 1: Home Overview (หน้าแรก)
yaml
type: vertical-stack
cards:
- type: glance
title: "สถานะบ้าน"
entities:
- entity: sensor.home_pm25
name: PM2.5
- entity: sensor.living_room_co2
name: CO2
- entity: sensor.home_temperature
name: อุณหภูมิ
- entity: sensor.electricity_today
name: ไฟฟ้าวันนี้
- entity: binary_sensor.front_door
name: ประตูหน้า
- entity: alarm_control_panel.home_alarm
name: ระบบ Alarm
- type: horizontal-stack
cards:
- type: button
entity: scene.good_morning
name: Good Morning
icon: mdi:weather-sunny
- type: button
entity: scene.good_night
name: Good Night
icon: mdi:weather-night
- type: button
entity: scene.away_mode
name: ออกจากบ้าน
icon: mdi:home-export-outline
Tab 2: Security
yaml
type: vertical-stack
cards:
- type: picture-glance
title: "กล้องหน้าบ้าน"
camera_image: camera.front_door
entities:
- entity: lock.front_door
- entity: binary_sensor.front_door_sensor
- type: alarm-panel
entity: alarm_control_panel.home_alarm
states:
- arm_home
- arm_away
- arm_night
Tab 3: IAQ Health
yaml
type: vertical-stack
cards:
- type: history-graph
title: "CO2 ย้อนหลัง 24 ชม."
entities:
- entity: sensor.bedroom_co2
name: ห้องนอน
- entity: sensor.living_room_co2
name: ห้องนั่งเล่น
hours_to_show: 24
- type: gauge
entity: sensor.home_pm25
name: PM2.5 ภายในบ้าน
min: 0
max: 100
severity:
green: 0
yellow: 25
red: 50
Tab 4: Energy
yaml
type: energy-distribution
title: "พลังงานวันนี้"
Card ที่ช่วยประหยัดเวลามากที่สุด: Conditional Card
แสดงข้อมูลเฉพาะเมื่อจำเป็น ไม่รกหน้าจอ:
yaml
type: conditional
conditions:
- entity: sensor.home_pm25
state_not: "0"
above: 35
card:
type: markdown
content: >-
## ⚠️ PM2.5 สูง: {{ states('sensor.home_pm25') }} μg/m³
เปิดเครื่องฟอกอากาศหรือปิดหน้าต่าง
Theme สำหรับผู้สูงอายุ
ถ้าผู้สูงอายุใช้งาน Dashboard ด้วย ให้ตั้ง Theme พิเศษ:
yaml
# themes.yaml
elderly_theme:
modes:
light:
primary-text-color: "#000000"
secondary-text-color: "#333333"
card-background-color: "#FFFFFF"
primary-color: "#1976D2"
ha-card-border-radius: "16px"
- Font Size ขั้นต่ำ 18px
- ปุ่มขนาดใหญ่ขั้นต่ำ 48x48px
- Contrast Ratio 4.5:1 ตามมาตรฐาน WCAG AA
KPI Dashboard ที่ดี
- Load Time < 2 วินาที: Dashboard ช้า = ไม่ใช้
- Tap Target ≥ 48px: สำหรับ Accessibility ทุกวัย
- Context Switch < 2 Tap: จากหน้าแรกถึงการควบคุมใดก็ได้ ไม่เกิน 2 ครั้ง
- Widget Count < 12 per Tab: มากกว่านี้ทำให้สับสน