Necessary Requirements
Necessary Requirements
The plugins required from HACS that need to be installed are as follows
– Card mod
– Lovelace Fluid Level Background Card
– Lovelace Card Templater
Type the names of these plugins in HACS to proceed with downloading
Create helper variables for display
I use the 6 helper variables below to detect the time and weather conditions for display
To create these helper variables, go to Settings -> Devices & services -> Helpers. Then click the Create helper button, choose the helper type as a switch. After that, name them the same as in my screenshot above so that later you won’t have to modify the code. Or, if you don’t want to manually create them, you can go directly to the configuration.yaml file and add the following:
input_boolean:
hien_pin_dem:
name: Show night battery
hien_pin_may:
name: Show cloudy battery
hien_pin_mua:
name: Show rainy battery
hien_pin_mua_giong:
name: Show thunderstorm battery
hien_pin_ngay:
name: Show daytime battery
hien_pin_sunrise_sunset:
name: Show sunrise - sunset batteryCreate an automation so that only 1 switch is turned on
Since I can only display one image at a time, I will create an automation that allows only one switch to be turned on among the 6 switches created above.
Go to Settings -> Automations & Scenes to create a new automation, then paste this Yaml code in
alias: Only show 1 battery
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: singleThat’s the part that ensures only a single switch in the group can be turned on.
Create an automation to control the switches based on time and weather
This part is a bit more complicated. You need to identify what the weather entity in your system is. In my case, it’s weather.forecast_nha — make a note of yours because you’ll need it.
Below is the automation that controls the switches based on time and weather.
alias: Control information Card display by weather and time
description: >-
Automatically turn input_booleans on/off to display the appropriate card based on
weather, time and priority level.
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
Replace weather.forecast_nha with the weather forecast entity that you are using, then move on to the last step.
Battery display card based on time and weather
This is the display card that you paste on the dashboard page; you just need to create a card and paste the code below
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: >
BATTERY
**{{ 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: >
BATTERY
**{{ 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: >
BATTERY
**{{ 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: >
BATTERY
**{{ 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: >
BATTERY
**{{ 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: >
BATTERY
**{{ 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"