If anyone is interested here is the code for multple button cards nested in a picture elements card. Simple Air Comfort Card.
It has multiple bits of code that may be of interest to you and customising button card.
V4.0 Simple Air Comfort Card*
Updates with the help of Chat GPT
It took 4 days but I can highly recommend AI to help especially if you are like me and are self taught with yaml.
New Yaml for Floating Circle
- Scales the Floating Circle perfectly with change in card size. No need for different setups. If you want to change the size of the Floating Circle, stipulate the same
height:andwidth: - Floating Circle movement maintains its position no matter how the card is scaled.
- Added variables so you can adjust your Outer Ring Limits and Inner Circle Comfort Zone.
- Floating Circle now blinks red if outside Temp and Humidity limits are exceeded (could be changed for a mould sensor)
New Yaml for Inner Circle Comfort Zone
- Red Ring appears when outside Temp and Humidity limits are exceeded.
Updated Code for Inner Circle Comfort Zone and Floating Circle
- type: custom:button-card
name: Inner Circle Comfort Zone
show_name: false
show_icon: false
aspect_ratio: 1/1
entity: sensor.text_dewpoint_comfort_airport
style:
right: 28.5%
top: 50%
height: 21%
width: 21%
styles:
card:
- border-radius: 50%
- border-width: 0px
card_mod:
style: |
ha-card {
{% set humidity_float = states('sensor.devonport_airport_humidity') | float(0) %}
{% set temperature_float = states('sensor.devonport_airport_temp') | float(0) %}
{% set temp_min = 17 %} {# 17°C = bottom of Outer Ring Limits #}
{% set temp_max = 30 %} {# 30°C = top of Outer Ring Limits #}
{% set humidity_min = 40 %} {# 40% = left of Outer Ring Limits #}
{% set humidity_max = 60 %} {# 60% = right of Outer Ring Limits #}
{# Check if humidity or temperature is outside of limits #}
{% set outside_limits = (humidity_float < humidity_min)