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%)?
if you want I could paste the whole code, it’s rather long.
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?
Right now we have absolutely no idea what you are trying to do or if there’s even a question - so yes please
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:
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?
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?
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?
I’m sorry if I expressed not very well, anyway yes … I mean that.
You can style a span
