Xây dựng bảng điều khiển máy chiếu Home Assistant trong khoảng một giờ

• Projector Pilot đã được liên kết với Home Assistant. Hướng dẫn thiết lập bao gồm việc đăng nhập và bật Gửi trạng thái máy chiếu. Bạn nên thấy máy chiếu của mình dưới dạng cảm biến trong Home Assistant trước khi xây dựng bất cứ thứ gì trên đó.
• Bạn đã đồng bộ ít nhất một lần. Cài đặt › Home Automation › Home Assistant › Sync With HA, sau khi dán khối Copy của ứng dụng vào configuration.yaml và khởi động lại Home Assistant. Đây là bước tạo ra các script mà mọi nút điều khiển bên dưới đều gọi.
• Máy chiếu của bạn đang bật trong lúc bạn xây dựng. Các thuộc tính hình ảnh bên dưới hầu như để trống khi máy chiếu ở chế độ chờ.

Dashboard này được nuôi bởi hai nguồn, và sự khác biệt giữa chúng quan trọng ở mọi bước bên dưới.

Cả bốn đều có trong kho HACS mặc định. Trong Home Assistant: HACS › Frontend › Explore & Download Repositories, tìm theo tên, bấm Download, rồi tải lại trình duyệt.

Mọi đoạn mã trên trang này dùng hai chỗ giữ chỗ. Chỉ cần tìm ID của bạn một lần, phần còn lại là sao chép và dán.

• sensor.YOUR_PROJECTOR → Developer Tools › States trong Home Assistant, lọc theo projector_pilot. Sẽ có dạng như sensor.projector_pilot_epson_qb1000b_qb1000w.
• YOURSERIAL → mở ứng dụng, Cài đặt › Home Automation › Home Assistant. Id dẫn xuất từ số sê-ri hiển thị ngay tại đó, và nó là phần giữa của mọi tên script đã đồng bộ: script.projpilot_YOURSERIAL_power_on, script.projpilot_YOURSERIAL_input_hdmi1, v.v.

Bạn cũng có thể lọc Developer Tools › States theo projpilot để xem toàn bộ danh sách điều khiển đã đồng bộ cùng lúc, sau khi khối Copy ở step 1's và Sync đã xong.

1. Settings › Dashboards › Add Dashboard › New dashboard from scratch. Đặt tên là Projector Pilot.
2. Mở nó, rồi nhấn biểu tượng bút chì ở góc trên bên phải để chỉnh sửa.
3. Thêm một chế độ xem. Bố cục nào cũng được; bảng thực tế dùng chồng thẻ mặc định, thẻ này nằm dưới thẻ kia, là cách dễ dán nhất.
4. Để dán YAML, dùng trình đơn ba chấm trên thẻ và chọn Edit in YAML, hoặc trình đơn ba chấm trên bảng điều khiển để mở Raw configuration editor và dán cả chế độ xem cùng lúc.

Cài đặt riêng của chế độ xem, nếu bạn thích tự gõ:

title: Projector Pilot
views:
- title: Projector Pilot
  path: projector-pilot
  icon: mdi:projector
  cards: []

Bắt đầu với thứ chỉ để đọc, để bạn biết ID thực thể của mình đúng trước khi chạm vào bất cứ thứ gì gửi lệnh. Ô này hoạt động trực tiếp ngay khi cảm biến máy chiếu tồn tại, không cần khối Copy, không cần đồng bộ. Thêm một thẻ, Edit in YAML, rồi dán:

type: custom:mushroom-template-card
primary: Brightness
secondary: '{{ state_attr(''sensor.YOUR_PROJECTOR'',''brightness'') }}'
icon: mdi:brightness-6
icon_color: green
layout: vertical
fill_container: true
card_mod:
  style: 'ha-card { background: rgba(18,26,20,0.60); border: 1px solid rgba(61,220,107,0.20);
    border-radius: 16px; box-shadow: 0 6px 22px rgba(0,0,0,0.32); backdrop-filter: blur(8px);
    min-height: 104px; }'

Cùng cấu trúc đó đọc được bất kỳ thuộc tính nào trong ~80 thuộc tính mà cảm biến mang theo: thay brightness bằng contrast, gamma, color_temp, hdr_pq, lamp_hours, bất cứ thứ gì bạn muốn hiển thị trên ô.

Lưu lại. Nếu một con số hoặc từ thật hiện ra, ID thực thể của bạn đúng và mọi thứ bên dưới sẽ hoạt động. Nếu hiển thị trống, hãy quay lại bước 2.

Một tiêu đề trơn chỉ là khoảng trống. Đây là thẻ markdown với nền chuyển màu từ card-mod, và nó biến một chồng ô thành các mục có tên. Mọi mục trên bảng đều bắt đầu bằng một thẻ như thế này, chỉ khác nhãn và biểu tượng cảm xúc.

type: markdown
content: '🔌    **POWER & SOURCE**'
card_mod:
  style: 'ha-card { background: linear-gradient(135deg, rgba(61,220,107,0.30), rgba(16,120,60,0.30));
    border: 1px solid rgba(61,220,107,0.45); border-radius: 14px; box-shadow: 0 6px 20px rgba(0,0,0,0.3); }
    ha-markdown { padding: 12px 20px !important; } ha-markdown p { margin: 0 !important;
    letter-spacing: 3px; color: #eafff0; font-size: 14px; font-weight: 700; }'

Đổi mã biểu tượng cảm xúc và văn bản nhãn; khối card-mod giống hệt nhau ở mọi mục.

Nút này gửi lệnh thay vì chỉ đọc giá trị, nên các script phải tồn tại trước. Nó gọi script.projpilot_YOURSERIAL_power_on, thứ mà ứng dụng chỉ ghi sau khi bạn dán khối Copy vào configuration.yaml, khởi động lại Home Assistant và chạm Sync With HA.

type: custom:mushroom-template-card
primary: Power On
icon: mdi:power
icon_color: green
layout: vertical
fill_container: true
tap_action:
  action: call-service
  service: script.projpilot_YOURSERIAL_power_on
card_mod:
  style: 'ha-card { background: linear-gradient(135deg, rgba(61,220,107,0.16), rgba(16,90,46,0.20));
    border: 1px solid rgba(61,220,107,0.34); border-radius: 16px; box-shadow: 0 6px 22px rgba(0,0,0,0.32);
    min-height: 92px; }'

Cùng một thẻ cho Tắt nguồn, Che màn hình, HDMI 1, HDMI 2, A/V Mute, một chế độ màu hoặc một bộ nhớ ống kính: chỉ nhãn, biểu tượng và service thay đổi.

Thẻ chính ở đầu bảng là một button-card: trạng thái nguồn cỡ lớn, một dòng tóm tắt tạo từ nhiều thuộc tính cùng lúc, và hiệu ứng kính xanh lá trên toàn bộ thẻ chứ không chỉ viền.

type: custom:button-card
entity: sensor.YOUR_PROJECTOR
name: Epson QB1000
show_state: true
show_label: true
size: 48px
state_display: '[[[ return entity.state==''on'' ? ''Powered on'' : ''Standby''; ]]]'
label: '[[[ var a=entity.attributes; return (a.input||''-'')+''  •  ''+(a.color_mode||''-'')+
  ''  •  ''+(a.video_range||''-'')+''  •  ''+(a.lamp_hours||0)+''  h''; ]]]'
styles:
  card:
  - height: 176px
  - background: linear-gradient(135deg, rgba(61,220,107,0.32), rgba(11,64,34,0.6))
  - border: 1px solid rgba(61,220,107,0.5)
  - border-radius: 22px
  - box-shadow: 0 12px 36px rgba(0,0,0,0.42)
  - padding: 20px
  state:
  - color: '[[[ return entity.state==''on'' ? ''#3ddc6b'' : ''#8a9'' ]]]'

Đã rút gọn còn những phần thay đổi theo từng bản cài đặt. Thẻ đầy đủ còn đặt cả vị trí lưới của biểu tượng, tên và nhãn; xem bản tải về ở bước 10 để có tất cả.

Muốn một dải gọn hơn? Thẻ mushroom-chips-card làm cùng việc đó trong một hàng chip nhỏ: trạng thái nguồn, nguồn vào, chế độ màu, dải video và số giờ bóng đèn, mỗi chip là một mẫu đọc state_attr('sensor.YOUR_PROJECTOR', ...). Dùng cái này hoặc cái kia, không dùng cả hai, ở đầu bảng.

Mỗi Cảnh bạn lưu trong ứng dụng sẽ trở thành một script tên script.projpilot_YOURSERIAL_scene_<id> sau khi đồng bộ, và ô cho một Cảnh chính là thẻ nút điều khiển ở bước 6 với tên và biểu tượng Cảnh.

type: custom:mushroom-template-card
primary: Movie Night
icon: mdi:movie-open
icon_color: green
layout: vertical
fill_container: true
tap_action:
  action: call-service
  service: script.projpilot_YOURSERIAL_scene_YOURSCENE1
card_mod:
  style: 'ha-card { background: linear-gradient(135deg, rgba(61,220,107,0.16), rgba(16,90,46,0.20));
    border: 1px solid rgba(61,220,107,0.34); border-radius: 16px; box-shadow: 0 6px 22px rgba(0,0,0,0.32);
    min-height: 92px; }'

Thay YOURSCENE1 bằng id hiển thị cho Cảnh đó trong danh sách điều khiển đã đồng bộ của ứng dụng. Mỗi Cảnh một ô, trong một horizontal-stack.

Cảm biến máy chiếu được Home Assistant ghi lại như mọi cảm biến khác, nên lamp_hours có sẵn lịch sử miễn phí. Không cần cảm biến thêm, không cần helper, không phải cấu hình gì trước, nằm trong mục Bảo trì.

type: custom:mini-graph-card
entities:
- entity: sensor.YOUR_PROJECTOR
  attribute: lamp_hours
  name: Laser hours
name: Laser hours
icon: mdi:lightbulb-on-outline
line_color: '#3ddc6b'
line_width: 4
hours_to_show: 336
points_per_hour: 0.5
height: 96
animate: true
card_mod:
  style: 'ha-card { background: rgba(18,26,20,0.60); border: 1px solid rgba(61,220,107,0.20);
    border-radius: 16px; box-shadow: 0 6px 22px rgba(0,0,0,0.32); backdrop-filter: blur(8px); }'

336 giờ là hai tuần. Số giờ laser và bóng đèn tăng đều đặn chứ không nhảy lung tung, nên khoảng hai tuần thường đủ để thấy xu hướng mà biểu đồ không bị phẳng.

Giao diện hoàn chỉnh, mọi mục và mọi thẻ trong ảnh chụp màn hình ở đầu trang này, với phần giữ chỗ thay cho entity IDs.

1. Tải YAML của giao diện.
2. Mở bằng bất kỳ trình soạn thảo văn bản nào và thay thế, ở mọi nơi xuất hiện: YOUR_PROJECTOR bằng entity id cảm biến máy chiếu của bạn từ bước 2, và YOURSERIAL bằng id dẫn xuất từ số sê-ri của bạn từ bước 2.
3. Trong mục Cảnh gần cuối, thay YOURSCENE1, YOURSCENE2 và YOURSCENE3 bằng ba id Cảnh của riêng bạn, hoặc thêm và xóa ô cho khớp với số Cảnh bạn thực sự có.
4. Trong Home Assistant, mở bảng điều khiển của bạn, biểu tượng bút chì, trình đơn ba chấm, Raw configuration editor, rồi dán vào dưới dạng một chế độ xem.