idro
(Fabio)
May 16, 2024, 11:10am
1
Hello,
I’m using this part of code inside a card:
custom_fields:
battery: |
[[[
if (states["sensor.m2007j22g_battery_state"].state == "charging")
return `<ha-icon
icon="mdi:battery-charging"
style="width: 20px; height: 20px;"></ha-icon
<span>${states['sensor.m2007j22g_battery_level'].state}%</span>`
]]]
In the <span> tag, which is the command to use in order to choose the character dimension of battery level (XY%)?
idro
(Fabio)
May 16, 2024, 12:00pm
4
It’s a personID entity
I’m using a button-card
if you want I could paste the whole code, it’s rather long.
petro
(Petro)
May 16, 2024, 12:01pm
5
idro:
It’s a personID entity
What’s the actual entity_id? because right now you have sensor.m2007j22g_battery_state
and sensor.m2007j22g_battery_level
and I’m not convinced those entity_id’s are correct.
Can you take a screenshot of them in developer tools → states page please?
1 Like
NathanCu
(Nathan Curtis)
May 16, 2024, 12:02pm
6
Right now we have absolutely no idea what you are trying to do or if there’s even a question - so yes please
idro
(Fabio)
May 16, 2024, 12:08pm
7
Here you are the code:
type: custom:swipe-card
parameters:
effect: coverflow
cards:
- type: custom:button-card
entity: person.fabio
show_name: false
show_icon: false
styles:
card:
- height: 230px
- width: 230px
- padding: 4%
- background-image: url("/local/fabio_emoji_saluto.webp")
- background-size: 100%
- background-repeat: no-repeat
- background-position: top center
- '--keep-background': 'true'
custom_fields:
battery:
- align-self: right
- position: absolute
- right: 3%
- top: 4%
- color: >-
[[[ if (states["sensor.m2007j22g_battery_level"].state <= 30)
return "#e45649"; if
(states["sensor.m2007j22g_battery_level"].state <= 50) return
"#ffa229"; if (states["sensor.m2007j22g_battery_state"].state ==
"charging") return "#ce7bca"; else return "#50A14F"; ]]]
headphones:
- align-self: right
- position: absolute
- left: 23%
- right: 15%
- top: 4%
- color: >-
[[[ if (states["binary_sensor.m2007j22g_headphones"].state ==
"on") return "#FFFF00"; else return "#FFFF00"; ]]]
ringer:
- align-self: right
- position: absolute
- left: 3%
- top: 4%
- color: >-
[[[ if (states["sensor.m2007j22g_ringer_mode"].state == "silent")
return "#e45649"; if (states["sensor.m2007j22g_ringer_mode"].state
== "vibrate") return "#FFA500"; else return "#50A14F"; ]]]
bluetooth:
- align-self: right
- position: absolute
- left: 34%
- right: 50%
- top: 4%
- color: >-
[[[ if (states["binary_sensor.m2007j22g_bluetooth_state"].state ==
"on") return "#0226f0"; else return "#0226f0"; ]]]
wifi:
- align-self: right
- position: absolute
- left: 11%
- right: 50%
- top: 4%
- color: >-
[[[ if (states["binary_sensor.m2007j22g_wifi_state"].state ==
"on") return "#e45649"; if
(states["binary_sensor.m2007j22g_wifi_state"].state == "off")
return "#e45649"; else return "#e45649"; ]]]
music:
- align-self: right
- position: absolute
- left: 35%
- right: 2%
- top: 4%
- color: >-
[[[ if (states["binary_sensor.m2007j22g_music_active"].state ==
"on") return "#52adff"; else return "#52adff"; ]]]
custom_fields:
battery: |
[[[
if (states["sensor.m2007j22g_battery_state"].state == "charging")
return `<ha-icon
icon="mdi:battery-charging"
style="width: 20px; height: 20px;"></ha-icon
<span>${states['sensor.m2007j22g_battery_level'].state}%</span>`
else
return `<ha-icon
icon="mdi:battery"
style="width: 18px; height: 18px;"></ha-icon
<span>${states['sensor.m2007j22g_battery_level'].state}%</span>`
]]]
headphones: |
[[[
if (states["binary_sensor.m2007j22g_headphones"].state == "on")
return `<ha-icon
icon="mdi:headphones"
style="width: 22px; height: 22px;">
</ha-icon>`
else
return `<ha-icon
icon="mdi:headphones-off"
style="width: 22px; height: 22px;">
</ha-icon>`
]]]
ringer: |
[[[
if (states["sensor.m2007j22g_ringer_mode"].state == "silent")
return `<ha-icon
icon="mdi:cellphone-off"
style="width: 22px; height: 22px;">
</ha-icon>`
if (states["sensor.m2007j22g_ringer_mode"].state == "vibrate")
return `<ha-icon
icon="mdi:vibrate"
style="width: 22px; height: 22px;">
</ha-icon>`
else
return `<ha-icon
icon="mdi:cellphone"
style="width: 22px; height: 22px;">
</ha-icon>
<span> ${states['sensor.m2007j22g_volume_level_ringer'].state}</span>`
]]]
bluetooth: |
[[[
if (states["binary_sensor.m2007j22g_bluetooth_state"].state == "on")
return `<ha-icon
icon="mdi:bluetooth"
style="width: 22px; height: 22px;">
</ha-icon>`
else
return `<ha-icon
icon="mdi:bluetooth-off"
style="width: 22px; height: 22px;">
</ha-icon>`
]]]
wifi: |
[[[
if (states["binary_sensor.m2007j22g_wifi_state"].state == "on")
return `<ha-icon
icon="mdi:wifi"
style="width: 22px; height: 22px;">
</ha-icon>`
if (states["binary_sensor.m2007j22g_wifi_state"].state == "off")
return `<ha-icon
icon="mdi:wifi-off"
style="width: 22px; height: 22px;">
</ha-icon>`
if (states["sensor.m2007j22g_wifi_connection"].state != "<not connected>" && states["binary_sensor.m2007j22g_wifi_state"].state == "on")
return `<ha-icon
icon="mdi:wifi-arrow-up-down"
style="width: 22px; height: 22px;">
</ha-icon>`
]]]
music: |
[[[
if (states["binary_sensor.m2007j22g_music_active"].state == "on")
return `<ha-icon
icon="mdi:music"
style="width: 22px; height: 22px;">
</ha-icon>`
else
return `<ha-icon
icon="mdi:music-off"
style="width: 22px; height: 22px;">
</ha-icon>`
]]]
And the screenshot:
petro
(Petro)
May 16, 2024, 12:11pm
8
Ok, so back to your original question… What’s not working? Can you share a screenshot of what it looks like, and a screenshot of what you expect?
All looks good for the most part.
Do you want to get the icon associated with the current battery level?
idro
(Fabio)
May 16, 2024, 12:17pm
9
In the card, that code (excluding the webp image) brings me this:
I’d like, other than to choose the icons dimension, to decide the numbers (and percentage) dimensions.
Can I do this?
petro
(Petro)
May 16, 2024, 12:25pm
10
what do you mean “decide the numbers and percentage dimensions”? This is not normal lingo. Are you referring to the size of the number, position of the number, and the font?
idro
(Fabio)
May 16, 2024, 12:30pm
11
I’m sorry if I expressed not very well, anyway yes … I mean that.