Hướng dẫn làm pin thay thổi theo thời gian và thời tiết cơ bản
Hãy làm card hiển thị pin đẹp và thú vị hơn với thay đổi theo thời gian trong ngày hoặc khi thời tiết thay đổi
Yêu cầu cần thiết
Các plugin yêu cầu từ HACS cần cài như sau
– Card mod
– Lovelace Fluid Level Background Card
– Lovelace Card Templater
Gõ tên các plugin này trong HACS để tiến hành download
Tạo biến trợ giúp phục vụ hiển thị
Mình sử dụng 6 biến trợ giúp dưới đây giúp nhận diện tình hình thời gian thời tiết để hiển thị ra ngoài
Cách tạo các biến trợ giúp này các bạn hãy vào Cài đặt -> Thiết bị và dịch vụ -> Biến trợ giúp. Sau đó bấm vào nút Tạo biến trợ giúp loại biến trợ giúp là công tắc. Sau đó đặt tên giống như hình bên trên của mình để sau này dùng code khỏi cần chỉnh sửa. Hoặc bạn nào lười thao tác tạo thủ công có thể vào thẳng file configuration.yaml thêm vào đoạn sau:
input_boolean:
hien_pin_dem:
name: Hiện pin đêm
hien_pin_may:
name: Hiện pin mây
hien_pin_mua:
name: Hiện pin mưa
hien_pin_mua_giong:
name: Hiện pin mưa giông
hien_pin_ngay:
name: Hiện pin ngày
hien_pin_sunrise_sunset:
name: Hiện pin sunrise - sunsetTạo tự động hoá để điều khiển chỉ 1 công tắc được bật
Vì khi hiển thị mình chỉ được hiện một ảnh nên mình sẽ làm một tự động hóa chỉ cho phép bật 1 công tắc duy nhất trong số 6 công tắc vừa tạo ở trên.
Các bạn vào Cài đặt -> Tự động hóa và Cảnh tạo tự động hóa mới sau đó dán đoạn code Yaml này vào
alias: Chỉ hiện 1 pin
description: ""
triggers:
- entity_id:
- input_boolean.hien_pin_dem
- input_boolean.hien_pin_mua
- input_boolean.hien_pin_sunrise_sunset
- input_boolean.hien_pin_ngay
- input_boolean.hien_pin_mua_giong
- input_boolean.hien_pin_may
to: "on"
trigger: state
actions:
- data:
entity_id: |
{% set id = trigger.entity_id %} {% set all = [
'input_boolean.hien_pin_dem',
'input_boolean.hien_pin_mua',
'input_boolean.hien_pin_sunrise_sunset',
'input_boolean.hien_pin_ngay',
'input_boolean.hien_pin_mua_giong',
'input_boolean.hien_pin_may'
] %} {{ all | reject('equalto', id) | list }}
action: input_boolean.turn_off
mode: singleXong phần cho phép 1 công tắt duy nhất trong nhóm được bật.
Tạo tự động hóa điều khiển công tắc theo thời gian và thời tiết
Phần này là phần phức tạp nè. Bạn cần xác nhận cho mình cái biến điều khiển thời tiết của nhà bạn là gì nhé. Ví dụ của mình là weather.forecast_nha các bạn ghi chú nó lại để cần dùng.
Dưới đây là tự động hóa điều khiển công tắc theo thời gian và thời tiết.
alias: Điều khiển hiển thị Card thông tin theo thời tiết và thời gian
description: >-
Tự động bật/tắt các input_boolean để hiển thị card phù hợp dựa trên thời tiết,
thời gian và mức độ ưu tiên.
triggers:
- entity_id: weather.forecast_nha
trigger: state
- minutes: /1
trigger: time_pattern
- event: start
trigger: homeassistant
actions:
- target:
entity_id:
- input_boolean.hien_pin_mua_giong
- input_boolean.hien_pin_mua
- input_boolean.hien_pin_may
- input_boolean.hien_pin_ngay
- input_boolean.hien_pin_sunrise_sunset
- input_boolean.hien_pin_dem
action: input_boolean.turn_off
data: {}
- choose:
- conditions:
- condition: state
entity_id: weather.forecast_nha
state: lightning-rainy
sequence:
- target:
entity_id: input_boolean.hien_pin_mua_giong
action: input_boolean.turn_on
data: {}
- conditions:
- condition: state
entity_id: weather.forecast_nha
state: rainy
sequence:
- target:
entity_id: input_boolean.hien_pin_mua
action: input_boolean.turn_on
data: {}
- conditions:
- condition: time
after: "08:00:00"
before: "16:00:00"
- condition: state
entity_id: weather.forecast_nha
state: cloudy
sequence:
- target:
entity_id: input_boolean.hien_pin_may
action: input_boolean.turn_on
data: {}
- conditions:
- condition: time
after: "08:00:00"
before: "16:00:00"
sequence:
- target:
entity_id: input_boolean.hien_pin_ngay
action: input_boolean.turn_on
data: {}
- conditions:
- condition: or
conditions:
- condition: time
after: "05:00:00"
before: "08:00:00"
- condition: time
after: "16:00:00"
before: "18:00:00"
sequence:
- target:
entity_id: input_boolean.hien_pin_sunrise_sunset
action: input_boolean.turn_on
data: {}
- conditions:
- condition: or
conditions:
- condition: time
after: "18:00:00"
- condition: time
before: "05:00:00"
sequence:
- target:
entity_id: input_boolean.hien_pin_dem
action: input_boolean.turn_on
data: {}
mode: single
Các bạn thay thế weather.forecast_nha bằng thực thể dự báo thời tiết của bạn đang dùng. và chuyển sang bước cuối cùng
Card hiển thị pin theo thời gian và thời tiết
Đây là phần hiển thị card được dán ở trang hiển thị các bạn chỉ việc tạo card và dán mã bên dưới
type: horizontal-stack
cards:
- type: picture-elements
elements:
- type: custom:fluid-level-background-card
entity: sensor.jk_bms_bms0_state_of_charge
style:
z-index: 1
top: 58%
left: 40.8%
transform: translate(-44.7%, -29%)
width: 100%
height: 100%
card_mod:
style: |
ha-card {
text-align: center;
--ha-card-border-color: transparent !important;
box-shadow: none !important;
background: none !important;
border-radius: 50px;
overflow: hidden;
}
#container, .container {
width: 31.3% !important;
height: 49% !important;
position: relative !important;
border-radius: 15px !important;
margin-left: 38.2%;
margin-top: 6%;
opacity: 0.5;
overflow: hidden;
}
level_color: rgb(82, 171, 255)
severity:
- color: rgb(242, 17, 17)
value: 0
- color: rgb(245, 210, 37)
value: 25
- color: rgb(28, 198, 255)
value: 40
- color: rgb(17, 242, 81)
value: 80
fill_entity: input_boolean.dang_sac
full_value: "110"
card:
type: markdown
content: >
PIN
**{{ states('sensor.jk_bms_bms0_state_of_charge') | float | round(0)
}}**%
image: https://geek.naai.studio/content/images/bat-light.png
card_mod:
style:
hui-image $: |
img {
z-index: 1 !important;
position: relative !important;
right: 0px;
top: 0px;
width: 100% !important;
opacity: 1
}
visibility:
- condition: state
entity: input_boolean.hien_pin_ngay
state: "on"
- type: picture-elements
elements:
- type: custom:fluid-level-background-card
entity: sensor.jk_bms_bms0_state_of_charge
style:
z-index: 1
top: 58%
left: 40.8%
transform: translate(-44.7%, -29%)
width: 100%
height: 100%
card_mod:
style: |
ha-card {
text-align: center;
--ha-card-border-color: transparent !important;
box-shadow: none !important;
background: none !important;
border-radius: 50px;
overflow: hidden;
}
#container, .container {
width: 31.3% !important;
height: 49% !important;
position: relative !important;
border-radius: 15px !important;
margin-left: 38.2%;
margin-top: 6%;
opacity: 0.3;
overflow: hidden;
}
level_color: rgb(82, 171, 255)
severity:
- color: rgb(242, 17, 17)
value: 0
- color: rgb(245, 210, 37)
value: 25
- color: rgb(28, 198, 255)
value: 40
- color: rgb(17, 242, 81)
value: 80
fill_entity: input_boolean.dang_sac
full_value: "110"
card:
type: markdown
content: >
PIN
**{{ states('sensor.jk_bms_bms0_state_of_charge') | float | round(0)
}}**%
image: https://geek.naai.studio/content/images/bat-dark.png
card_mod:
style:
hui-image $: |
img {
z-index: 1 !important;
position: relative !important;
right: 0px;
top: 0px;
width: 100% !important;
opacity: 1
}
visibility:
- condition: state
entity: input_boolean.hien_pin_dem
state: "on"
- type: picture-elements
elements:
- type: custom:fluid-level-background-card
entity: sensor.jk_bms_bms0_state_of_charge
style:
z-index: 1
top: 60%
left: 40.8%
transform: translate(-44.7%, -29%)
width: 100%
height: 100%
card_mod:
style: |
ha-card {
text-align: center;
--ha-card-border-color: transparent !important;
box-shadow: none !important;
background: none !important;
border-radius: 50px;
overflow: hidden;
}
#container, .container {
width: 31.3% !important;
height: 48% !important;
position: relative !important;
border-radius: 20px !important;
margin-left: 38.2%;
margin-top: 6%;
opacity: 0.2;
overflow: hidden;
}
level_color: rgb(82, 171, 255)
severity:
- color: rgb(242, 17, 17)
value: 0
- color: rgb(245, 210, 37)
value: 25
- color: rgb(28, 198, 255)
value: 40
- color: rgb(17, 242, 81)
value: 80
fill_entity: input_boolean.dang_sac
full_value: "110"
card:
type: markdown
content: >
PIN
**{{ states('sensor.jk_bms_bms0_state_of_charge') | float | round(0)
}}**%
image: https://geek.naai.studio/content/images/bat-rain.png
card_mod:
style:
hui-image $: |
img {
z-index: 1 !important;
position: relative !important;
right: 0px;
top: 0px;
width: 100% !important;
opacity: 1
}
visibility:
- condition: state
entity: input_boolean.hien_pin_mua
state: "on"
- type: picture-elements
elements:
- type: custom:fluid-level-background-card
entity: sensor.jk_bms_bms0_state_of_charge
style:
z-index: 1
top: 61%
left: 40.8%
transform: translate(-44.7%, -29%)
width: 100%
height: 100%
card_mod:
style: |
ha-card {
text-align: center;
--ha-card-border-color: transparent !important;
box-shadow: none !important;
background: none !important;
border-radius: 50px;
overflow: hidden;
}
#container, .container {
width: 31.3% !important;
height: 47% !important;
position: relative !important;
border-radius: 20px !important;
margin-left: 38.2%;
margin-top: 6%;
opacity: 0.4;
overflow: hidden;
}
level_color: rgb(82, 171, 255)
severity:
- color: rgb(242, 17, 17)
value: 0
- color: rgb(245, 210, 37)
value: 25
- color: rgb(28, 198, 255)
value: 40
- color: rgb(17, 242, 81)
value: 80
fill_entity: input_boolean.dang_sac
full_value: "110"
card:
type: markdown
content: >
PIN
**{{ states('sensor.jk_bms_bms0_state_of_charge') | float | round(0)
}}**%
image: https://geek.naai.studio/content/images/bat-sunrise.png
card_mod:
style:
hui-image $: |
img {
z-index: 1 !important;
position: relative !important;
right: 0px;
top: 0px;
width: 100% !important;
opacity: 1
}
visibility:
- condition: state
entity: input_boolean.hien_pin_sunrise_sunset
state: "on"
- type: picture-elements
elements:
- type: custom:fluid-level-background-card
entity: sensor.jk_bms_bms0_state_of_charge
style:
z-index: 1
top: 61%
left: 40.8%
transform: translate(-44.7%, -29%)
width: 100%
height: 100%
card_mod:
style: |
ha-card {
text-align: center;
--ha-card-border-color: transparent !important;
box-shadow: none !important;
background: none !important;
border-radius: 50px;
overflow: hidden;
}
#container, .container {
width: 31.3% !important;
height: 47% !important;
position: relative !important;
border-radius: 20px !important;
margin-left: 38.2%;
margin-top: 6%;
opacity: 0.3;
overflow: hidden;
}
level_color: rgb(82, 171, 255)
severity:
- color: rgb(242, 17, 17)
value: 0
- color: rgb(245, 210, 37)
value: 25
- color: rgb(28, 198, 255)
value: 40
- color: rgb(17, 242, 81)
value: 80
fill_entity: input_boolean.dang_sac
full_value: "110"
card:
type: markdown
content: >
PIN
**{{ states('sensor.jk_bms_bms0_state_of_charge') | float | round(0)
}}**%
image: https://geek.naai.studio/content/images/bat-rain-light.png
card_mod:
style:
hui-image $: |
img {
z-index: 1 !important;
position: relative !important;
right: 0px;
top: 0px;
width: 100% !important;
opacity: 1
}
visibility:
- condition: state
entity: input_boolean.hien_pin_mua_giong
state: "on"
- type: picture-elements
elements:
- type: custom:fluid-level-background-card
entity: sensor.jk_bms_bms0_state_of_charge
style:
z-index: 1
top: 61%
left: 40.8%
transform: translate(-44.7%, -29%)
width: 100%
height: 100%
card_mod:
style: |
ha-card {
text-align: center;
--ha-card-border-color: transparent !important;
box-shadow: none !important;
background: none !important;
border-radius: 50px;
overflow: hidden;
}
#container, .container {
width: 31.3% !important;
height: 47% !important;
position: relative !important;
border-radius: 18px !important;
margin-left: 38.2%;
margin-top: 6%;
opacity: 0.3;
overflow: hidden;
}
level_color: rgb(82, 171, 255)
severity:
- color: rgb(242, 17, 17)
value: 0
- color: rgb(245, 210, 37)
value: 25
- color: rgb(28, 198, 255)
value: 40
- color: rgb(17, 242, 81)
value: 80
fill_entity: input_boolean.dang_sac
full_value: "110"
card:
type: markdown
content: >
PIN
**{{ states('sensor.jk_bms_bms0_state_of_charge') | float | round(0)
}}**%
image: https://geek.naai.studio/content/images/bat-cloudy.png
card_mod:
style:
hui-image $: |
img {
z-index: 1 !important;
position: relative !important;
right: 0px;
top: 0px;
width: 100% !important;
opacity: 1
}
visibility:
- condition: state
entity: input_boolean.hien_pin_may
state: "on"