Bạn đã bao giờ muốn thay đổi hình nền giao diện Lovelace của Home Assisntant? Với bài viết này, không chỉ hình nền được hiển thị trên giao diện mà còn thay đổi theo thời tiết. Để tiện hình dung, bạn hãy xem video bên dưới.
Mặc dù tiêu đề là thay đổi theo thời tiết, nền này có thể thay đổi theo trạng thái – state của bất kì entity nào, có thể là cảm biến thời gian, nhiệt độ, ngày trong tuần/cuối tuần, người ở nhà, chó mèo ở nhà, tâm trạng bạn vui hay buồn v.v..
Và lần nữa, mặc dù tiêu đề nói đến hình nền động, bạn có thể sử dụng video hoặc cả ảnh tĩnh từ web hay trên chính máy chủ Home Assistant để làm hình nền, tuỳ theo sở thích của mình.
Hình nền động đặc biệt rất thích hợp cho:
- Các màn hình điều khiển Home Assistant lớn dạng treo tường hay để bàn. Sẽ rất tuyệt vời nếu bạn vừa ngủ dậy và thấy giao diện Hass thể hiện khung cảnh bình minh rực rỡ đầy phấn khởi tương ứng với điều kiện thời tiết nắng đẹp bên ngoài.
Nền động cũng giúp giảm hiện tượng lưu ảnh và hiện tượng làm phiền người trong phòng đối với các màn hình điều khiển luôn mở. - Khi bạn muốn sử dụng một view cho mục đích riêng như điều khiển các thiết bị giải trí, điều khiển phòng ngủ v.v..
Khi đó hiển thị nền tương ứng với loại hoạt động hoặc không gian của các thiết bị trong view (như TV/đèn trang trí) sẽ rất ấn tượng và phù hợp. - Và nhiều mục đích khác như sử dụng cho một số thành viên đặc biệt hoặc thiết bị đặc biệt chẳng hạn.
Cài đặt Lovelace sử dụng nền động
Ở đây ta sẽ sử dụng custom_module Lovelace Animated Background của tác giả Villhellm để làm nền động và thay đổi theo ngữ cảnh. Bạn cũng cần thêm một entity để hiển thị nền tuỳ theo trạng thái của entity đó. Dưới đây chúng tôi sẽ sử dụng entity weather.konnected vốn có sẵn trong Home Assistant.
Bạn có thể cài đặt module này qua HACS bằng cách tìm với từ khoá Background.
Sau đó ấn vào Lovelace Animated Background, chọn INSTALL. Chờ một lúc để việc cài đặt hoàn tất, tiếp sau hãy ấn ADD TO LOVELACE để thêm module này vào Lovelace.
Nếu bạn chưa biết về HACS thì có thể xem tại đây: Cài đặt và sử dụng HACS.
Bạn cũng có thể tải về và cài đặt module Lovelace Animated Background theo cách thủ công từ hướng dẫn trên github của tác giả. Tuy nhiên, bạn nên sử dụng HACS vì sự tiện lợi, nhanh chóng và dễ quản lý.
Sau khi thêm thành công Lovelace Animated Background vào Lovelace, ta sẽ cấu hình để sử dụng các ảnh/video làm nền cho Lovelace.
Lưu ý rằng không giống với các custom_card ta thường dùng, đây là một module và do đó không hề tạo ra card mới nào cả. Ta sẽ sử dụng luôn cấu hình của module này để áp dụng vào Dashboard hay View và chỉ có thể áp dụng cho hai đối tượng này. Tất nhiên bạn có thể áp dụng cho nhiều View và Dashboard tuỳ theo nhu cầu.
Bên dưới là cấu hình mẫu, để sử dụng, bạn có thể thêm nó vào phần cấu hình cao nhất của file lovelace-ui.yaml nếu sử dụng Lovelace ở chế độ yaml. Với đa số người dùng Lovelace ở chế độ storage/UI (ưu tiên chỉnh sửa qua giao diện), bạn chuyển đến Dashboard muốn áp dụng, chọn chế độ Cấu hình giao diện (Configure UI) > Trình chỉnh sửa cấu hình thô (Raw configuration editor) để chỉnh sửa cấu hình ở mức độ View hay Dashboard.
animated_background:
default_url: "https://cdn.flixel.com/flixel/ypy8bw9fgw1zv2b4htp2.hd.mp4"
entity: "weather.konnected"
state_url:
'sunny':
- "https://cdn.flixel.com/flixel/hlhff0h8md4ev0kju5be.hd.mp4"
- "https://cdn.flixel.com/flixel/zjqsoc6ecqhntpl5vacs.hd.mp4"
- "https://cdn.flixel.com/flixel/jvw1avupguhfbo11betq.hd.mp4"
- "https://cdn.flixel.com/flixel/8cmeusxf3pkanai43djs.hd.mp4"
- "https://cdn.flixel.com/flixel/guwb10mfddctfvwioaex.hd.mp4"
'partlycloudy':
- "https://cdn.flixel.com/flixel/13e0s6coh6ayapvdyqnv.hd.mp4"
- "https://cdn.flixel.com/flixel/aorl3skmssy7udwopk22.hd.mp4"
- "https://cdn.flixel.com/flixel/qed6wvf2igukiioykg3r.hd.mp4"
- "https://cdn.flixel.com/flixel/3rd72eezaj6d23ahlo7y.hd.mp4"
- "https://cdn.flixel.com/flixel/9m11gd43m6qn3y93ntzp.hd.mp4"
- "https://cdn.flixel.com/flixel/hrkw2m8eofib9sk7t1v2.hd.mp4"
'cloudy':
- "https://cdn.flixel.com/flixel/13e0s6coh6ayapvdyqnv.hd.mp4"
- "https://cdn.flixel.com/flixel/aorl3skmssy7udwopk22.hd.mp4"
- "https://cdn.flixel.com/flixel/qed6wvf2igukiioykg3r.hd.mp4"
- "https://cdn.flixel.com/flixel/3rd72eezaj6d23ahlo7y.hd.mp4"
- "https://cdn.flixel.com/flixel/9m11gd43m6qn3y93ntzp.hd.mp4"
- "https://cdn.flixel.com/flixel/hrkw2m8eofib9sk7t1v2.hd.mp4"
'mostlycloudy':
- "https://cdn.flixel.com/flixel/e95h5cqyvhnrk4ytqt4q.hd.mp4"
- "https://cdn.flixel.com/flixel/l2bjw34wnusyf5q2qq3p.hd.mp4"
- "https://cdn.flixel.com/flixel/rrgta099ulami3zb9fd2.hd.mp4"
'clear-night':
- "https://cdn.flixel.com/flixel/x9dr8caygivq5secll7i.hd.mp4"
- "https://cdn.flixel.com/flixel/v26zyfd6yf0r33s46vpe.hd.mp4"
- "https://cdn.flixel.com/flixel/ypy8bw9fgw1zv2b4htp2.hd.mp4"
- "https://cdn.flixel.com/flixel/rosz2gi676xhkiw1ut6i.hd.mp4"
'fog':
- "https://cdn.flixel.com/flixel/vwqzlk4turo2449be9uf.hd.mp4"
- "https://cdn.flixel.com/flixel/5363uhabodwwrzgnq6vx.hd.mp4"
'rainy': "https://cdn.flixel.com/flixel/f0w23bd0enxur5ff0bxz.hd.mp4"
title: Home
views:Trong đó:
entity:entity_id mà trạng thái được sử dụng làm căn cứ chọn nềndefault_url:địa chỉ của file video hay ảnh mặc định nếu entity được chọn có trạng thái không khớp với bất cứ trạng thái nào được liệt kê trong state_url:
Xem phần địa chỉ ở dưới.state_url:danh sách các trạng thái của entity được chọn, mỗi trạng thái này sẽ đi kèm với một hoặc nhiều địa chỉ file nền khác nhau. Nếu có nhiều hơn 2 file cho một trạng thái, file sẽ được chọn ngẫu nhiên.
Bạn cần biết rõ các state có thể xảy ra của entity đã chọn để cấu hình cho phù hợp.title:tên của Dashboard, trong cấu hình này title chủ yếu để minh hoạ vị trí bạn sẽ cấu hình Animated Background module.
Một số tuỳ chọn khác:
included_users:chỉ kích hoạt module khi user được liệt kê trong nàyincluded_devices:chỉ kích hoạt module khi id của thiết bị đang truy cập được liệt kê trong nàyexcluded_users:kích hoạt module trên mọi thiết bị ngoại trừ user được liệt kê trong nàyexcluded_devices:kích hoạt module trên mọi thiết bị ngoại trừ thiết bị được liệt kê trong nàyviews:cấu hình riêng cho từng view
Cấu hình mẫu trông như bên dưới, lưu ý sự khác nhau giữa cấu hình views của module và danh sách views của một Dashboard (dưới cùng).
animated_background:
default_url: "https://cdn.flixel.com/flixel/ypy8bw9fgw1zv2b4htp2.hd.mp4"
included_users:
- konnected
entity: "weather.home"
state_url:
'sunny':
.....
'rainy': "https://cdn.flixel.com/flixel/f0w23bd0enxur5ff0bxz.hd.mp4"
views:
- path: MeditationRoom
config:
default_url: "https://cdn.flixel.com/flixel/ypy8bw9fgw1zv2b4htp2.hd.mp4"
entity: "light.meditation_room"
state_url:
'on': "https://cdn.flixel.com/flixel/8cmeusxf3pkanai43djs.hd.mp4"
'off': "https://cdn.flixel.com/flixel/ypy8bw9fgw1zv2b4htp2.hd.mp4"
title: Home
views:Về các file video nền
Các video này có thời lượng chỉ từ vài giây đến vài chục giây và dung lượng vào khoảng 3-10MB cho mỗi video mức chất lượng FullHD. Các video này thường được gọi là Cinemagraph và được chia sẻ khá nhiều trên Internet. Bạn có thể thử tìm video này trong Youtube với từ khoá “cinemagraph landscape” cho các video quang cảnh hay “cinemagraph city” để tìm các video về hoạt động trong thành phố.
Bạn có thể tải các video này về để dùng ngay hoặc cắt ra thành nhiều đoạn nhỏ đối với các video đã được nối lại. Bạn cũng có thể tự tạo các video này hoặc sử dụng các ảnh tĩnh thay thế (như ảnh của chính ngôi nhà mình, gia đình mình).
Chúng tôi cũng có sẵn một bộ video và cả cấu hình tương ứng, được cắt ra từ video New Zealand Landscape Cinemagraph with PhotoMirage (youtube). Bạn có thể tải về từ Fshare.vn tại đây: link tải về.
Nếu không muốn dùng video, bạn có thể sử dụng liên kết đến các ảnh tĩnh.
Trong cấu hình mẫu ở trên, tác giả Villhellm sử dụng liên kết đến các video nằm trên các CDN (Content Delivery Network), bạn có thể sử dụng các liên kết này mà không cần lo lắng.
Nếu bạn sử dụng các file nằm trên Hass, nên đặt các file này vào bên trong thư mục /config/www/ và sử dụng đường dẫn tương ứng trong cấu hình. Ví dụ ở đây chúng tôi đặt file có tên là home_rain.mp4 bên trong thư mục /config/www/animated_background thì cấu hình tương ứng sẽ là:
animated_background:
entity: "weather.home"
state_url:
'rainy':
- '/local/animated_background/home_rain.mp4'Những thành phần bổ sung
Module Lovelace Animated Card chỉ thay đổi nền của Lovelace Dashboard hay View theo trạng thái entity, bạn có thể sẽ cần thêm một số điều chỉnh với các thành phần khác trong giao diện cho phù hợp.
Dưới đây là các thành phần custom chúng tôi đã sử dụng trong video minh hoạ:
custom_header:
compact_mode: false
background: 'rgba(0,0,0,0.4)'
title: KonnectED
views:
- path: kiosk
title: Panel A
panel: false
badges: []
cards:
- entity: weather.konnected
style: |
ha-card {
--ha-card-background: rgba(255, 255, 255, 0.4);
color: rgb(255, 0, 0);
}
type: weather-forecast
- entity: media_player.mibox3
type: 'custom:mini-media-player'
style: |
ha-card {
--ha-card-background: rgba(255, 255, 255, 0.4);
color: rgb(255, 0, 0);
}Bao gồm:
- Module Custom Header được sử dụng để làm trong suốt phần Header của Dashboard
- Module: card-mod được sử dụng để làm trong suốt và thay đổi màu chữ của các card
Chúng tôi sẽ có bài viết riêng về các module hay card này sau.
Cảm ơn bạn đã xem bài viết này!
konnectED Team.
