Simple Air Comfort card

[Grandmasterseven]

I made a simple air comfort card.
The black area represents the normal, recommended values. The white dot indicates the current condition.

code:

type: picture-elements
image: local/overlay.svg
card_mod:
  style: |
    ha-card {
      --ha-card-background: var(--temp-background-color) !important;
      --ha-card-border-width: 0px !important;
      --ha-card-border-radius: 5px !important;
      --box-shadow: none !important;
    }    
elements:
  - type: 'custom:button-card'
    entity: sensor.nappali_temperature
    name: Hőmérséklet
    show_state: true
    show_name: false
    show_icon: true
    style:
      left: 20%
      top: 80%
      width: 50% 
    card_mod:
      style: |
        ha-card {
          --ha-card-background: transparent !important;
        }  
  - type: 'custom:button-card'
    entity: sensor.nappali_humidity
    name: Páratartalom
    show_state: true
    show_name: false
    show_icon: true
    style:
      left: 80%
      top: 80%
      width: 50% 
    card_mod:
      style: |
        ha-card {
          --ha-card-background: transparent !important;
        }  
  - show_name: false #middle
    show_icon: false
    aspect_ratio: 1/1
    entity: sensor.nappali_humidity
    style:
      right: 25%
      top: 50%
      height: 25%
      width: 25%        
    type: 'custom:button-card'    
    styles:
      card:
        - border-radius: 50%
        - background-color: rgba(0,0,0,0.65)
        - border-width: 0px       
  - show_name: false #ring
    show_icon: false
    aspect_ratio: 1/1
    entity: sensor.nappali_humidity
    style:
      right: 5%
      top: 50%
      height: 45%
      width: 45%        
    type: 'custom:button-card'    
    styles:
      card:
        - border-radius: 50%
        - background-color: rgba(0,0,0,0)
        - border-width: 5px  
        - border-color: rgba(255,255,255,1) 
  - icon: 'mdi:circle'  #dot
    entity: sensor.nappali_humidity
    show_name: false
    name: ''
    type: 'custom:button-card'    
    size: 20%
    card_mod:
      style: |
        :host {
          {% set humidity_float = states('sensor.nappali_humidity') | float %}
          {% set temperature_float = states('sensor.nappali_temperature') | float %}
          left: {{ 5 + humidity_float }}%;
          bottom: {{ 30 + (temperature_float - 18) * 3.75 }}%;
          transition: bottom 1s, left 1s; 
        }
        ha-card {
          --ha-card-background: transparent !important;
        }  
  - type: 'custom:button-card'
    name: Too Warm
    style:
      right: 20%
      top: 22%
      width: 30%   
    card_mod:
      style: |
        ha-card {
          --ha-card-background: transparent !important;
        }  
  - type: 'custom:button-card'
    name: Cold
    style:
      right: 20%
      top: 78%
      width: 30%  
    card_mod:
      style: |
        ha-card {
          --ha-card-background: transparent !important;
        }  
  - type: 'custom:button-card'
    name: Dry
    style:
      left: 20%
      top: 50%
      width: 20%  
    card_mod:
      style: |
        ha-card {
          --ha-card-background: transparent !important;
        }  
  - type: 'custom:button-card'
    name: Humid
    style:
      left: 83%
      top: 50%
      width: 20%  
    card_mod:
      style: |
        ha-card {
          --ha-card-background: transparent !important;
        }  

overlay.svg

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" />

[agak79]

It looks great, was just what I was looking for. I’ll try it for my mobile view

[agak79]

Update:

I used your card in my default temperature view and it looks great:

[jpleite]

Great cards. Can you explain the changes you did to put the card on a grid and also how did you put the labels rotated?

[agak79]

Yes, I can paste the code, but basically it’s an horizontal stack cards with 2 of this comfort cards:

> type: horizontal-stack
> cards:
>   - type: picture-elements
>     image: local/overlay.svg
>     card_mod:
>       style: |
>         ha-card {
>           --ha-card-background: rgba(158,93,190,0.8) !important;
>           --ha-card-border-width: 0px !important;
>           --ha-card-border-radius: 5px !important;
>           --box-shadow: none !important;
>         }    
>     elements:
>       - type: custom:button-card
>         entity: sensor.salon_temperatura
>         name: Temperatura Salon
>         size: 50%
>         show_state: true
>         show_name: false
>         show_icon: true
>         style:
>           left: 20%
>           top: 80%
>           width: 50%
>         card_mod:
>           style: |
>             ha-card {
>               --ha-card-background: transparent !important;
>             }  
>       - type: custom:button-card
>         entity: sensor.salon_humedad
>         name: Humedad salón
>         size: 50%
>         show_state: true
>         show_name: false
>         show_icon: true
>         style:
>           left: 80%
>           top: 80%
>           width: 50%
>         card_mod:
>           style: |
>             ha-card {
>               --ha-card-background: transparent !important;
>             }
>       - show_name: false
>         show_icon: false
>         aspect_ratio: 1/1
>         entity: sensor.salon_humedad
>         style:
>           right: 25%
>           top: 50%
>           height: 25%
>           width: 25%
>         type: custom:button-card
>         styles:
>           card:
>             - border-radius: 50%
>             - background-color: rgba(178,172,175,0.8)
>             - border-width: 2px
>       - show_name: false
>         show_icon: false
>         aspect_ratio: 1/1
>         entity: sensor.salon_humedad
>         style:
>           right: 5%
>           top: 50%
>           height: 45%
>           width: 45%
>         type: custom:button-card
>         styles:
>           card:
>             - border-radius: 50%
>             - background-color: rgba(0,0,0,0)
>             - border-width: 1px
>             - border-color: rgba(255,255,255,1)
>       - icon: mdi:circle
>         entity: sensor.salon_humedad
>         show_name: false
>         name: ''
>         type: custom:button-card
>         size: 20%
>         card_mod:
>           style: |
>             :host {
>               {% set humidity_float = states('sensor.salon_humedad') | float %}
>               {% set temperature_float = states('sensor.salon_temperatura') | float %}
>               left: {{humidity_float}}%;
>               bottom: {{(temperature_float*3.4054) - 32.649}}%;
>               transition: bottom 1s, left 1s; 
>             }
>             ha-card {
>               --ha-card-background: transparent !important;
>             } 
>       - type: custom:button-card
>         label: Salón
>         show_label: true
>         size: 100%
>         style:
>           right: 1%
>           top: 10%
>           width: 50%
>         styles:
>           label:
>             - font-size: 20px
>         card_mod:
>           style: |
>             ha-card {
>               --ha-card-background: transparent !important;
>             }       
>       - type: custom:button-card
>         label: Calor
>         show_label: true
>         style:
>           right: 20%
>           top: 22%
>           width: 30%
>         styles:
>           label:
>             - font-size: 10px
>         card_mod:
>           style: |
>             ha-card {
>               --ha-card-background: transparent !important;
>             } 
>       - type: custom:button-card
>         label: Frio
>         show_label: true
>         style:
>           right: 20%
>           top: 78%
>           width: 30%
>         styles:
>           label:
>             - font-size: 10px
>         card_mod:
>           style: |
>             ha-card {
>               --ha-card-background: transparent !important;
>             }  
>       - type: custom:button-card
>         label: Seco
>         show_label: true
>         style:
>           left: 22%
>           top: 50%
>           width: 20%
>         styles:
>           label:
>             - font-size: 10px
>             - writing-mode: vertical-rl
>         card_mod:
>           style: |
>             ha-card {
>               --ha-card-background: transparent !important;
>             } 
>       - type: custom:button-card
>         label: Húmedo
>         show_label: true
>         style:
>           left: 78%
>           top: 50%
>           width: 20%
>         styles:
>           label:
>             - font-size: 10px
>             - writing-mode: vertical-lr
>         card_mod:
>           style: |
>             ha-card {
>               --ha-card-background: transparent !important;
>             } 
>   - type: picture-elements
>     image: local/overlay.svg
>     card_mod:
>       style: |
>         ha-card {
>           --ha-card-background: rgba(141,107,156,0.8) !important;
>           --ha-card-border-width: 0px !important;
>           --ha-card-border-radius: 5px !important;
>           --box-shadow: none !important;
>         }    
>     elements:
>       - type: custom:button-card
>         entity: sensor.termometro_gurasoak_temperature
>         name: Temperatura Salon
>         size: 50%
>         show_state: true
>         show_name: false
>         show_icon: true
>         style:
>           left: 20%
>           top: 80%
>           width: 50%
>         card_mod:
>           style: |
>             ha-card {
>               --ha-card-background: transparent !important;
>             }  
>       - type: custom:button-card
>         entity: sensor.termometro_gurasoak_humidity
>         name: Humedad salón
>         size: 50%
>         show_state: true
>         show_name: false
>         show_icon: true
>         style:
>           left: 80%
>           top: 80%
>           width: 50%
>         card_mod:
>           style: |
>             ha-card {
>               --ha-card-background: transparent !important;
>             }
>       - show_name: false
>         show_icon: false
>         aspect_ratio: 1/1
>         style:
>           right: 25%
>           top: 50%
>           height: 25%
>           width: 25%
>         type: custom:button-card
>         styles:
>           card:
>             - border-radius: 50%
>             - background-color: rgba(178,172,175,0.8)
>             - border-width: 2px
>       - show_name: false
>         show_icon: false
>         aspect_ratio: 1/1
>         style:
>           right: 5%
>           top: 50%
>           height: 45%
>           width: 45%
>         type: custom:button-card
>         styles:
>           card:
>             - border-radius: 50%
>             - background-color: rgba(0,0,0,0)
>             - border-width: 1px
>             - border-color: rgba(255,255,255,1)
>       - icon: mdi:circle
>         show_name: false
>         name: ''
>         type: custom:button-card
>         size: 20%
>         card_mod:
>           style: |
>             :host {
>               {% set humidity_float = states('sensor.termometro_gurasoak_humidity') | float %}
>               {% set temperature_float = states('sensor.termometro_gurasoak_temperature') | float %}
>               left: {{humidity_float}}%;
>               bottom: {{(temperature_float*3.4054) - 32.649}}%;
>               transition: bottom 1s, left 1s; 
>             }
>             ha-card {
>               --ha-card-background: transparent !important;
>             } 
>       - type: custom:button-card
>         label: Hab. Gurasoak
>         show_label: true
>         size: 90%
>         style:
>           left: 50%
>           top: 10%
>           width: 70%
>         styles:
>           label:
>             - font-size: 20px
>         card_mod:
>           style: |
>             ha-card {
>               --ha-card-background: transparent !important;
>             }       
>       - type: custom:button-card
>         label: Calor
>         show_label: true
>         style:
>           right: 20%
>           top: 22%
>           width: 30%
>         styles:
>           label:
>             - font-size: 10px
>         card_mod:
>           style: |
>             ha-card {
>               --ha-card-background: transparent !important;
>             } 
>       - type: custom:button-card
>         label: Frio
>         show_label: true
>         style:
>           right: 20%
>           top: 78%

The text in vertical is modified with CSS and card_mod.

[jpleite]

Thank you. It works like a charm! Good work @Grandmasterseven

[Chykan (Andrew)]

@Grandmasterseven or @agak79 The image is from local/overlay.svg? How do I get this into my configuration?
How do I add the following?

[agak79]

I don’t know what you mean. You need any addon to transfer files to you HA server, in the folder indicated

[rujelus22 (Robert)]

I copied the code and got the svg in the correct place but I am not getting the white dot in the middle. Any idea what I am missing?

type: picture-elements
image: local/overlay.svg
card_mod:
  style: |
    ha-card {
      --ha-card-background: var(--temp-background-color) !important;
      --ha-card-border-width: 0px !important;
      --ha-card-border-radius: 5px !important;
      --box-shadow: none !important;
    }    
elements:
  - type: custom:button-card
    entity: sensor.bedroom_temp_temperature
    name: Temperature
    show_state: true
    show_name: false
    show_icon: true
    style:
      left: 20%
      top: 80%
      width: 50%
    card_mod:
      style: |
        ha-card {
          --ha-card-background: transparent !important;
        }  
  - type: custom:button-card
    entity: sensor.bedroom_temp_humidity
    name: Humidity
    show_state: true
    show_name: false
    show_icon: true
    style:
      left: 80%
      top: 80%
      width: 50%
    card_mod:
      style: |
        ha-card {
          --ha-card-background: transparent !important;
        }  
  - show_name: false
    show_icon: false
    aspect_ratio: 1/1
    entity: sensor.bedroom_temp_humidity
    style:
      right: 25%
      top: 50%
      height: 25%
      width: 25%
    type: custom:button-card
    styles:
      card:
        - border-radius: 50%
        - background-color: rgba(0,0,0,0.65)
        - border-width: 0px
  - show_name: false
    show_icon: false
    aspect_ratio: 1/1
    entity: sensor.bedroom_temp_humidity
    style:
      right: 5%
      top: 50%
      height: 45%
      width: 45%
    type: custom:button-card
    styles:
      card:
        - border-radius: 50%
        - background-color: rgba(0,0,0,0)
        - border-width: 5px
        - border-color: rgba(255,255,255,1)
  - icon: mdi:circle
    entity: sensor.bedroom_temp_humidity
    show_name: false
    name: ''
    type: custom:button-card
    size: 20%
    card_mod:
      style: |
        :host {
          {% set humidity_float = states('sensor.bedroom_temp_humidity') | float %}
          {% set temperature_float = states('sensor.bedroom_temp_temperature') | float %}
          left: {{ 5 + humidity_float }}%;
          bottom: {{ 30 + (temperature_float - 18) * 3.75 }}%;
          transition: bottom 1s, left 1s; 
        }
        ha-card {
          --ha-card-background: transparent !important;
        }  
  - type: custom:button-card
    name: Too Warm
    style:
      right: 20%
      top: 22%
      width: 30%
    card_mod:
      style: |
        ha-card {
          --ha-card-background: transparent !important;
        }  
  - type: custom:button-card
    name: Cold
    style:
      right: 20%
      top: 78%
      width: 30%
    card_mod:
      style: |
        ha-card {
          --ha-card-background: transparent !important;
        }  
  - type: custom:button-card
    name: Dry
    style:
      left: 20%
      top: 50%
      width: 20%
    card_mod:
      style: |
        ha-card {
          --ha-card-background: transparent !important;
        }  
  - type: custom:button-card
    name: Humid
    style:
      left: 83%
      top: 50%
      width: 20%
    card_mod:
      style: |
        ha-card {
          --ha-card-background: transparent !important;
        }

[Chykan (Andrew)]

I got the card working but the background is grey because of the overlay.svg.
I placed it in in the right folder I am pretty sure.

Here is my code:

          - type: horizontal-stack
            cards:
              - type: picture-elements
                image: local/overlay.svg
                card_mod:
                  style: |
                    ha-card {
                      --ha-card-background: rgba(60,60,60,0.8) !important;
                      --ha-card-border-width: 0px !important;
                      --ha-card-border-radius: 5px !important;
                      --box-shadow: none !important;
                    }
                elements:
                  - type: custom:button-card
                    entity: sensor.air_conditioning_temperature
                    name: Living Room Temp
                    show_state: true
                    show_name: false
                    show_icon: true
                    style:
                      left: 10%
                      top: 75%
                      width: 50%
                    card_mod:
                      style: |
                        ha-card {
                          --ha-card-background: transparent !important;
                        }  
                  - type: custom:button-card
                    entity: sensor.air_conditioning_humidity
                    name: Living Room Humidity
                    show_state: true
                    show_name: false
                    show_icon: true
                    style:
                      left: 90%
                      top: 75%
                      width: 50%
                    card_mod:
                      style: |
                        ha-card {
                          --ha-card-background: transparent !important;
                        }  
                  - show_name: false
                    show_icon: false
                    aspect_ratio: 1/1
                    entity: sensor.air_conditioning_humidity
                    style:
                      right: 25%
                      top: 41%
                      height: 25%
                      width: 25%
                    type: custom:button-card
                    styles:
                      card:
                        - border-radius: 50%
                        - background-color: rgba(60,60,60,1)
                        - border-width: 0px
                  - show_name: false
                    show_icon: false
                    aspect_ratio: 1/1
                    entity: sensor.air_conditioning_humidity
                    style:
                      right: 5%
                      top: 33%
                      height: 45%
                      width: 45%
                    type: custom:button-card
                    styles:
                      card:
                        - border-radius: 50%
                        - background-color: rgba(0,0,0,0)
                        - border-width: 5px
                        - border-color: rgba(255,255,255,1)
                  - icon: mdi:circle
                    entity: sensor.air_conditioning_humidity
                    show_name: false
                    name: ''
                    type: custom:button-card
                    size: 30%
                    card_mod:
                      style: |
                        :host {
                          {% set humidity_float = states('sensor.air_conditioning_humidity') | float %}
                          {% set temperature_float = states('sensor.air_conditioning_temperature') | float %}
                          left: {{humidity_float }}%;
                          bottom: {{(temperature_float*3) - 32  }}%;
                          transition: bottom 1s, left 1s; 
                        }
                        ha-card {
                          --ha-card-background: transparent !important;
                        }
                  - type: custom:button-card
                    name: Too Warm
                    style:
                      right: 20%
                      top: 5%
                      width: 30%
                    styles:
                      label:
                        - font-size: 20px
                    card_mod:
                      style: |
                        ha-card {
                          --ha-card-background: transparent !important;
                        }  
                  - type: custom:button-card
                    name: Cold
                    style:
                      right: 20%
                      top: 96%
                      width: 30%
                    styles:
                      label:
                        - font-size: 10px
                    card_mod:
                      style: |
                        ha-card {
                          --ha-card-background: transparent !important;
                        }  
                  - type: custom:button-card
                    name: Dry
                    style:
                      left: 22%
                      top: 50%
                      width: 20%
                    styles:
                      label:
                        - font-size: 10px
                        - writing-mode: vertical-rl
                    card_mod:
                      style: |
                        ha-card {
                          --ha-card-background: transparent !important;
                        }  
                  - type: custom:button-card
                    name: Humid
                    style:
                      left: 81%
                      top: 50%
                      width: 20%
                    styles:
                      label:
                        - font-size: 10px
                        - writing-mode: vertical-rl
                    card_mod:
                      style: |
                        ha-card {
                          --ha-card-background: transparent !important;
                        }  
                  - type: custom:button-card
                    entity: sensor.comfort_humid_living_room
                    name: Living Room Humidity
                    show_state: true
                    show_name: false
                    show_icon: false
                    style:
                      left: 90%
                      top: 20%
                      width: 50%
                    card_mod:
                      style: |
                        ha-card {
                           --ha-card-background: transparent !important;
                         } 
                  - type: custom:button-card
                    entity: sensor.comfort_temp_liv
                    name: Living Room Humidity
                    show_state: true
                    show_name: false
                    show_icon: false
                    style:
                      left: 10%
                      top: 20%
                      width: 50%
                    card_mod:
                      style: |
                        ha-card {
                          --ha-card-background: transparent !important;
                        } 
              - type: vertical-stack
                cards:
                  - type: custom:bignumber-card
                    scale: 85px
                    entity: sensor.nad_t785_volume
              - type: horizontal-stack
                cards:
                  - type: picture-elements
                    image: local/overlay.svg
                    card_mod:
                      style: |
                        ha-card {
                          --ha-card-background: rgba(60,60,60,0.8) !important;
                          --ha-card-border-width: 0px !important;
                          --ha-card-border-radius: 5px !important;
                          --box-shadow: none !important;
                        }
                    elements:
                      - type: custom:button-card
                        entity: sensor.air_conditioning_downstairs_temperature
                        name: Living Room Temp
                        show_state: true
                        show_name: false
                        show_icon: true
                        style:
                          left: 10%
                          top: 75%
                          width: 50%
                        card_mod:
                          style: |
                            ha-card {
                              --ha-card-background: transparent !important;
                            }  
                      - type: custom:button-card
                        entity: sensor.air_conditioning_downstairs_humidity
                        name: Living Room Humidity
                        show_state: true
                        show_name: false
                        show_icon: true
                        style:
                          left: 90%
                          top: 75%
                          width: 50%
                        card_mod:
                          style: |
                            ha-card {
                              --ha-card-background: transparent !important;
                            }  
                      - show_name: false
                        show_icon: false
                        aspect_ratio: 1/1
                        entity: sensor.air_conditioning_downstairs_humidity
                        style:
                          right: 25%
                          top: 41%
                          height: 25%
                          width: 25%
                        type: custom:button-card
                        styles:
                          card:
                            - border-radius: 50%
                            - background-color: rgba(60,60,60,1)
                            - border-width: 0px
                      - show_name: false
                        show_icon: false
                        aspect_ratio: 1/1
                        entity: sensor.air_conditioning_downstairs_humidity
                        style:
                          right: 5%
                          top: 33%
                          height: 45%
                          width: 45%
                        type: custom:button-card
                        styles:
                          card:
                            - border-radius: 50%
                            - background-color: rgba(0,0,0,0)
                            - border-width: 5px
                            - border-color: rgba(255,255,255,1)
                      - icon: mdi:circle
                        entity: sensor.air_conditioning_downstairs_humidity
                        show_name: false
                        name: ''
                        type: custom:button-card
                        size: 30%
                        card_mod:
                          style: |
                            :host {
                              {% set humidity_float = states('sensor.air_conditioning_downstairs_humidity') | float %}
                              {% set temperature_float = states('sensor.air_conditioning_downstairs_temperature') | float %}
                              left: {{humidity_float }}%;
                              bottom: {{(temperature_float*3) - 32  }}%;
                              transition: bottom 1s, left 1s; 
                            }
                            ha-card {
                              --ha-card-background: transparent !important;
                            }
                      - type: custom:button-card
                        name: Too Warm
                        style:
                          right: 20%
                          top: 5%
                          width: 30%
                        styles:
                          label:
                            - font-size: 20px
                        card_mod:
                          style: |
                            ha-card {
                              --ha-card-background: transparent !important;
                            }  
                      - type: custom:button-card
                        name: Cold
                        style:
                          right: 20%
                          top: 96%
                          width: 30%
                        styles:
                          label:
                            - font-size: 10px
                        card_mod:
                          style: |
                            ha-card {
                              --ha-card-background: transparent !important;
                            }  
                      - type: custom:button-card
                        name: Dry
                        style:
                          left: 22%
                          top: 50%
                          width: 20%
                        styles:
                          label:
                            - font-size: 10px
                            - writing-mode: vertical-rl
                        card_mod:
                          style: |
                            ha-card {
                              --ha-card-background: transparent !important;
                            }  
                      - type: custom:button-card
                        name: Humid
                        style:
                          left: 81%
                          top: 50%
                          width: 20%
                        styles:
                          label:
                            - font-size: 10px
                            - writing-mode: vertical-rl
                        card_mod:
                          style: |
                            ha-card {
                              --ha-card-background: transparent !important;
                            } 
                      - type: custom:button-card
                        entity: sensor.comfort_humid_downstairs
                        name: Living Room Humidity
                        show_state: true
                        show_name: false
                        show_icon: false
                        style:
                          left: 90%
                          top: 20%
                          width: 50%
                        card_mod:
                          style: |
                            ha-card {
                              --ha-card-background: transparent !important;
                            } 
                      - type: custom:button-card
                        entity: sensor.comfort_temp_downstairs
                        name: Living Room Humidity
                        show_state: true
                        show_name: false
                        show_icon: false
                        style:
                          left: 10%
                          top: 20%
                          width: 50%
                        card_mod:
                          style: |
                            ha-card {
                              --ha-card-background: transparent !important;
                            }

Here is my end result: (I used Node-Red to extract the comfort text)

12/03/2024, 2:39:59 amnode: debug 5
getAirComfort : msg.payload : Object
object
freshness: object
value: "FRESH"
lastOpenWindow: "2024-03-11T18:17:39Z"
acPoweredOn: true
comfort: array[2]
0: object
roomId: 1
temperatureLevel: "COMFY"
humidityLevel: "HUMID"
coordinate: object
radial: 0.62
angular: 32
1: object
roomId: 2
temperatureLevel: "COMFY"
humidityLevel: "HUMID"
coordinate: object
radial: 0.65
angular: 20

[Chykan (Andrew)]

@rujelus22

    card_mod:
      style: |
        :host {
          {% set humidity_float = states('sensor.bedroom_temp_humidity') | float %}
          {% set temperature_float = states('sensor.bedroom_temp_temperature') | float %}
          left: {{ 5 + humidity_float }}%;
          bottom: {{ 30 + (temperature_float - 18) * 3.75 }}%;
          transition: bottom 1s, left 1s; 
        }
        ha-card {
          --ha-card-background: transparent !important;
        }  

Play with this

    card_mod:
      style: |
        :host {
          {% set humidity_float = states('sensor.bedroom_temp_humidity') | float %}
          {% set temperature_float = states('sensor.bedroom_temp_temperature') | float %}
          left: {{ 5 + humidity_float }}%;
          bottom: {{ 30 + (temperature_float - 18) * 3.75 }}%;
          transition: bottom 1s, left 1s; 
        }
        ha-card {
          --ha-card-background: transparent !important;
        }  

Mine is: (Also increased the size of the circle)

  - icon: mdi:circle
    entity: sensor.air_conditioning_humidity
    show_name: false
    name: ''
    type: custom:button-card
    size: 30%
    card_mod:
      style: |
        :host {
          {% set humidity_float = states('sensor.air_conditioning_humidity') | float %}
          {% set temperature_float = states('sensor.air_conditioning_temperature') | float %}
          left: {{humidity_float }}%;
          bottom: {{(temperature_float*3) - 32  }}%;
          transition: bottom 1s, left 1s; 
        }
        ha-card {
          --ha-card-background: transparent !important;
        }

[rujelus22 (Robert)]

Yep editing those numbers brought the white dot in. Thank you.

[Chykan (Andrew)]

YAY! WORKING

UPDATED YAML:

• The previous issue I had with the overlay.svg was because I was using Microsoft Edge. Found out later it was working fine from the mobile and tablet app, subsequently Chrome as well.

• Repaired Styles for the labels. Now changes the font size for the name rather than the label which was not working.

                    - type: custom:button-card
                      name: Cold
                      show_name: true
                      style:
                        right: 20%
                        top: 80%
                        width: 30%
                      styles:
                        name:
                          - font-size: 20px
                      card_mod:
                        style: |
                          ha-card {
                            --ha-card-background: transparent !important;
                          }  

• Repaired text rotation for Dry

                    - type: custom:button-card
                      name: Dry
                      show_name: true
                      style:
                        left: 22%
                        top: 50%
                        width: 20%
                      styles:
                        name:
                          - font-size: 20px
                          - writing-mode: vertical-rl
                          - transform: rotate(180deg)
                      card_mod:
                        style: |
                          ha-card {
                            --ha-card-background: transparent !important;
                          }  

• Repaired text rotation for Humid

                    - type: custom:button-card
                      name: Humid
                      show_name: true
                      style:
                        left: 81%
                        top: 50%
                        width: 20%
                      styles:
                        name:
                          - font-size: 20px
                          - writing-mode: vertical-rl
                      card_mod:
                        style: |
                          ha-card {
                            --ha-card-background: transparent !important;
                          }  

• Added gradient colour to card

                  card_mod:
                    style: |
                      ha-card {
                        --ha-card-background: radial-gradient(circle, black, black, green) !important;
                        --ha-card-border-width: 0px !important;
                        --ha-card-border-radius: 5px !important;
                        --box-shadow: none !important;
                      }

• COMPLETE CODE FOR CARDS BELOW. I have added a few labels to make it easier when editing the yaml, I have also included the text sensors I generated in Node Red with a link.

[Chykan (Andrew)]

Simple Climate Card V3.0

MOBILE OPTIMISED CARD V3.0

- Dewpoint Comfort Colour Change OUTER RING
- Temperature Comfort Colour Change CARD BACKGROUND

• Best if used in a horizontal stack card for two cards side by side or two vertical stack cards side by side, within a horizontal stack card.
  

  

• Multiple cards four or more full width of tablet or wall mount panel.
  

  

type: picture-elements
image: local/overlay.svg
card_mod:
  style: |
    ha-card {
       {% if is_state('sensor.text_temperature_comfort_upstairs','FROSTY') %}
       --ha-card-background: radial-gradient(circle, , black, black, black, mediumblue) !important;
       {% elif is_state('sensor.text_temperature_comfort_upstairs','COLD') %}
       --ha-card-background: radial-gradient(circle, black, black, black, dogerblue) !important;
       {% elif is_state('sensor.text_temperature_comfort_upstairs','CHILLY') %}
       --ha-card-background: radial-gradient(circle, black, black, black, deepskyblue) !important;
       {% elif is_state('sensor.text_temperature_comfort_upstairs','COOL') %}
       --ha-card-background: radial-gradient(circle, black, black, black, mediumaquamarine) !important;
       {% elif is_state('sensor.text_temperature_comfort_upstairs','MILD') %}
       --ha-card-background: radial-gradient(circle, black, black, black, seagreen) !important;
       {% elif is_state('sensor.text_temperature_comfort_upstairs','PERFECT') %}
       --ha-card-background: radial-gradient(circle, black, black, black, limegreen) !important;
       {% elif is_state('sensor.text_temperature_comfort_upstairs','WARM') %}
       --ha-card-background: radial-gradient(circle, black, black, black, gold) !important;
       {% elif is_state('sensor.text_temperature_comfort_upstairs','HOT') %}
       --ha-card-background: radial-gradient(circle, black, black, black, orange) !important;
       {% elif is_state('sensor.text_temperature_comfort_upstairs','BOILING') %}
       --ha-card-background: radial-gradient(circle,  black, black, black, crimson) !important;
       {% endif %}
    }
    ha-card {
      --ha-card-border-width: 0px !important;
      --ha-card-border-radius: 5px !important;
      --box-shadow: none !important;
    }
elements:
  - type: custom:button-card
    name: Card Title
    label: Upstairs
    show_name: false
    show_label: true
    style:
      left: 50%
      top: 5%
      width: 100%
    styles:
      label:
        - font-size: 12px
        - color: silver
    card_mod:
      style: |
        ha-card {
          --ha-card-background: transparent !important;
        } 
  - type: custom:button-card
    name: Text Dew Point Comfort - Upstairs
    entity: sensor.text_dewpoint_comfort_upstairs
    label: >-
      Sensor created in Node Red converts dewpoint to comfort text
      https://github.com/miguelangel-nubla/home-assistant-dewpoint
    show_state: true
    show_name: false
    show_label: false
    show_icon: false
    style:
      right: '-50%'
      top: 14%
      width: 100%
    styles:
      state:
        - font-size: 16px
        - font-weight: bold
    card_mod:
      style: |
        ha-card {
         --ha-card-background: transparent !important;
        } 
  - type: custom:button-card
    name: Sensor 1 - Dewpoint - Upstairs
    entity: sensor.dewpoint_upstairs
    icon: mdi:water-thermometer-outline
    show_state: true
    show_name: false
    show_icon: true
    style:
      left: 20%
      top: 25%
      width: 50%
      transform: translate(-50%, -50%) scale(0.6, 0.6)
    card_mod:
      style: |
        ha-card {
          --ha-card-background: transparent !important;
        } 
  - type: custom:button-card
    name: Sensor 2 - Air Quality - Aquarium
    entity: sensor.aquarium_air_quality_text
    show_state: true
    show_name: false
    show_icon: true
    style:
      left: 80%
      top: 25%
      width: 50%
      transform: translate(-50%, -50%) scale(0.6, 0.6)
    card_mod:
      style: |
        ha-card {
           --ha-card-background: transparent !important;
        } 
  - type: custom:button-card
    name: Sensor 3 - Temperature - Upstairs
    entity: sensor.netatmo_devonport_tas_indoor_temperature
    show_state: true
    show_name: false
    show_icon: true
    style:
      left: 20%
      top: 75%
      width: 50%
      transform: translate(-50%, -50%) scale(0.8, 0.8)
    card_mod:
      style: |
        ha-card {
          --ha-card-background: transparent !important;
        }  
  - type: custom:button-card
    name: Sensor 4 - Humidity - Upstairs
    entity: sensor.netatmo_devonport_tas_indoor_humidity
    show_state: true
    show_name: false
    show_icon: true
    style:
      left: 80%
      top: 75%
      width: 50%
      transform: translate(-50%, -50%) scale(0.8, 0.8)
    card_mod:
      style: |
        ha-card {
          --ha-card-background: transparent !important;
        }
  - type: custom:button-card
    name: Text Temperature Comfort Sensor 3 - Upstairs
    entity: sensor.text_temperature_comfort_upstairs
    label: >-
      Sensor created in node red to grab temperature comfort text
      https://flows.nodered.org/node/node-red-contrib-tado-client. Funtion Node
      Requires msg.payload = msg.payload.comfort[0].temperatureLevel return msg;
    show_state: true
    show_name: false
    show_label: false
    show_icon: false
    style:
      left: 20%
      top: 92%
      width: 50%
    styles:
      state:
        - font-size: 15px
    card_mod:
      style: |
        ha-card {
          --ha-card-background: transparent !important;
        } 
  - type: custom:button-card
    name: Text Humidity Comfort Sensor 4 - Upstairs
    entity: sensor.text_humidity_comfort_upstairs_direct
    label: >-
      Sensor created in node red to grab humidity comfort text
      https://flows.nodered.org/node/node-red-contrib-tado-client. Funtion Node
      Requires msg.payload = msg.payload.comfort[0].humidityLevel return msg;
    show_state: true
    show_name: false
    show_label: false
    show_icon: false
    style:
      left: 80%
      top: 92%
      width: 50%
    styles:
      state:
        - font-size: 15px
    card_mod:
      style: |
        ha-card {
          --ha-card-background: transparent !important;
        } 
  - type: custom:button-card
    name: Outer Ring Limits
    show_name: false
    show_icon: false
    aspect_ratio: 1/1
    entity: sensor.text_dewpoint_comfort_upstairs
    style:
      right: 4.5%
      top: 50%
      height: 45%
      width: 45%
    styles:
      card:
        - border-radius: 50%
        - border-width: 2.5px
        - border-color: rgba(255,255,255,1)
    card_mod:
      style: |
        ha-card {
           {% if is_state('sensor.text_dewpoint_comfort_upstairs','Too Dry') %}
           --ha-card-background: radial-gradient(circle, deepskyblue, 55%, black, black) !important;
           {% elif is_state('sensor.text_dewpoint_comfort_upstairs','Comfy Dry') %}
           --ha-card-background: radial-gradient(circle, mediumaquamarine, 55%, black, black) !important;
           {% elif is_state('sensor.text_dewpoint_comfort_upstairs','Pleasant') %}
           --ha-card-background: radial-gradient(circle, limegreen, 55%, black, black) !important;
           {% elif is_state('sensor.text_dewpoint_comfort_upstairs','Comfortable') %}
           --ha-card-background: radial-gradient(circle, yellowgreen, 55%, black, black) !important;
           {% elif is_state('sensor.text_dewpoint_comfort_upstairs','Sticky Humid') %}
           --ha-card-background: radial-gradient(circle, yellow, 55%, black, black) !important;
           {% elif is_state('sensor.text_dewpoint_comfort_upstairs','Muggy') %}
           --ha-card-background: radial-gradient(circle, gold, 55%, black, black) !important;
           {% elif is_state('sensor.text_dewpoint_comfort_upstairs','Sweltering') %}
           --ha-card-background: radial-gradient(circle, orange, 55%, black, black) !important;
           {% elif is_state('sensor.text_dewpoint_comfort_upstairs','Stifling') %}
           --ha-card-background: radial-gradient(circle, crimson, 55%, black, black) !important;
           {% endif %}
        }
  - type: custom:button-card
    name: Inner Circle Comfort Zone
    show_name: false
    show_icon: false
    aspect_ratio: 1/1
    entity: sensor.text_dewpoint_comfort_upstairs
    style:
      right: 28.5%
      top: 50%
      height: 21%
      width: 21%
    styles:
      card:
        - border-radius: 50%
        - border-width: 0px
    card_mod:
      style: |
        ha-card {
           --ha-card-background: radial-gradient(circle, black, black, grey ) !important;
        {     
  - type: custom:button-card
    name: Floating Circle
    icon: mdi:circle
    show_name: false
    size: 20%
    card_mod:
      style: |
        :host {
          {% set humidity_float = states('sensor.netatmo_devonport_tas_indoor_humidity') | float %}
          {% set temperature_float = states('sensor.netatmo_devonport_tas_indoor_temperature') | float %}
          left: {{ 0.4 + humidity_float }}%;
          bottom: {{((temperature_float-4)*(100-0)/(72.5-27.5))+0}}%;
          transition: bottom 1s, left 1s; 
        }
        ha-card {
          --ha-card-background: transparent !important;
        }
  - type: custom:button-card
    label: Warm
    show_label: true
    style:
      right: 0%
      top: 22%
      width: 50%
    styles:
      label:
        - font-size: 12px
        - color: grey
    card_mod:
      style: |
        ha-card {
          --ha-card-background: transparent !important;
        }  
  - type: custom:button-card
    label: Cold
    show_label: true
    style:
      right: 0%
      top: 79%
      width: 50%
    styles:
      label:
        - font-size: 12px
        - color: grey
    card_mod:
      style: |
        ha-card {
          --ha-card-background: transparent !important;
        }  
  - type: custom:button-card
    label: Dry
    show_label: true
    style:
      left: 22%
      top: 50%
      width: 20%
    styles:
      label:
        - font-size: 12px
        - color: grey
        - writing-mode: vertical-rl
        - transform: rotate(180deg)
    card_mod:
      style: |
        ha-card {
          --ha-card-background: transparent !important;
        }  
  - type: custom:button-card
    label: Humid
    show_label: true
    style:
      left: 79%
      top: 50%
      width: 20%
    styles:
      label:
        - font-size: 12px
        - color: grey
        - writing-mode: vertical-rl
    card_mod:
      style: |
        ha-card {
          --ha-card-background: transparent !important;
        } 

TABLET OR FULL WIDTH PHONE OPTIMISED CARD V3.0

- Dewpoint Comfort Colour Change OUTER RING
- Temperature Comfort Colour Change CARD BACKGROUND

• Optimised for Tablets or Wall Displays, can be used full width on a phone.

type: picture-elements
image: local/overlay.svg
card_mod:
  style: |
    ha-card {
       {% if is_state('sensor.text_temperature_comfort_living','FROSTY') %}
       --ha-card-background: radial-gradient(circle, , black, black, black, mediumblue) !important;
       {% elif is_state('sensor.text_temperature_comfort_living','COLD') %}
       --ha-card-background: radial-gradient(circle, black, black, black, dogerblue) !important;
       {% elif is_state('sensor.text_temperature_comfort_living','CHILLY') %}
       --ha-card-background: radial-gradient(circle, black, black, black, deepskyblue) !important;
       {% elif is_state('sensor.text_temperature_comfort_living','COOL') %}
       --ha-card-background: radial-gradient(circle, black, black, black, mediumaquamarine) !important;
       {% elif is_state('sensor.text_temperature_comfort_living','MILD') %}
       --ha-card-background: radial-gradient(circle, black, black, black, seagreen) !important;
       {% elif is_state('sensor.text_temperature_comfort_living','PERFECT') %}
       --ha-card-background: radial-gradient(circle, black, black, black, limegreen) !important;
       {% elif is_state('sensor.text_temperature_comfort_living','WARM') %}
       --ha-card-background: radial-gradient(circle, black, black, black, gold) !important;
       {% elif is_state('sensor.text_temperature_comfort_living','HOT') %}
       --ha-card-background: radial-gradient(circle, black, black, black, orange) !important;
       {% elif is_state('sensor.text_temperature_comfort_living','BOILING') %}
       --ha-card-background: radial-gradient(circle,  black, black, black, crimson) !important;
       {% endif %}
    }
    ha-card {
      --ha-card-border-width: 0px !important;
      --ha-card-border-radius: 5px !important;
      --box-shadow: none !important;
    }
elements:
  - type: custom:button-card
    name: Card Title
    label: Living Room
    show_name: false
    show_label: true
    style:
      left: 50%
      top: 5%
      width: 100%
    styles:
      label:
        - font-size: 20px
        - color: silver
    card_mod:
      style: |
        ha-card {
          --ha-card-background: transparent !important;
        } 
  - type: custom:button-card
    name: Text Dew Point Comfort - Living Room
    entity: sensor.text_dewpoint_comfort_living
    label: >-
      Sensor created in Node Red converts dewpoint to comfort text
      https://github.com/miguelangel-nubla/home-assistant-dewpoint
    show_state: true
    show_name: false
    show_label: false
    show_icon: false
    style:
      right: '-50%'
      top: 13%
      width: 100%
    styles:
      state:
        - font-size: 25px
        - font-weight: bold
    card_mod:
      style: |
        ha-card {
         --ha-card-background: transparent !important;
        } 
  - type: custom:button-card
    name: Sensor 1 - Dewpoint - Living Room
    entity: sensor.dewpoint_living_room
    icon: mdi:water-thermometer-outline
    show_state: true
    show_name: false
    show_icon: true
    style:
      left: 20%
      top: 25%
      width: 50%
      transform: translate(-50%, -50%) scale(0.8, 0.8)
    card_mod:
      style: |
        ha-card {
          --ha-card-background: transparent !important;
        } 
  - type: custom:button-card
    name: Sensor 2 - CO2 - Living Room
    entity: sensor.netatmo_devonport_tas_indoor_co2
    show_state: true
    show_name: false
    show_icon: true
    style:
      left: 80%
      top: 25%
      width: 50%
      transform: translate(-50%, -50%) scale(0.8, 0.8)
    card_mod:
      style: |
        ha-card {
           --ha-card-background: transparent !important;
        } 
  - type: custom:button-card
    name: Sensor 3 - Temperature - Living Room
    entity: sensor.air_conditioning_temperature
    show_state: true
    show_name: false
    show_icon: true
    style:
      left: 20%
      top: 75%
      width: 50%
    card_mod:
      style: |
        ha-card {
          --ha-card-background: transparent !important;
        }  
  - type: custom:button-card
    name: Sensor 4 - Humidity - Living Room
    entity: sensor.air_conditioning_humidity
    show_state: true
    show_name: false
    show_icon: true
    style:
      left: 80%
      top: 75%
      width: 50%
    card_mod:
      style: |
        ha-card {
          --ha-card-background: transparent !important;
        }
  - type: custom:button-card
    name: Text Temperature Comfort Sensor 3 - Living Room
    entity: sensor.text_temperature_comfort_living
    label: >-
      Sensor created in node red to grab temperature comfort text
      https://flows.nodered.org/node/node-red-contrib-tado-client. Funtion Node
      Requires msg.payload = msg.payload.comfort[0].temperatureLevel return msg;
    show_state: true
    show_name: false
    show_label: false
    show_icon: false
    style:
      left: 20%
      top: 92%
      width: 50%
    styles:
      state:
        - font-size: 20px
    card_mod:
      style: |
        ha-card {
          --ha-card-background: transparent !important;
        } 
  - type: custom:button-card
    name: Text Humidity Comfort Sensor 4 - Living Room
    entity: sensor.text_humid_comfort_living_room_tado
    label: >-
      Sensor created in node red to grab humidity comfort text
      https://flows.nodered.org/node/node-red-contrib-tado-client. Funtion Node
      Requires msg.payload = msg.payload.comfort[0].humidityLevel return msg;
    show_state: true
    show_name: false
    show_label: false
    show_icon: false
    style:
      left: 80%
      top: 92%
      width: 50%
    styles:
      state:
        - font-size: 20px
    card_mod:
      style: |
        ha-card {
          --ha-card-background: transparent !important;
        } 
  - type: custom:button-card
    name: Outer Ring Limits
    show_name: false
    show_icon: false
    aspect_ratio: 1/1
    entity: sensor.text_dewpoint_comfort_living
    style:
      right: 4.5%
      top: 50%
      height: 45%
      width: 45%
    styles:
      card:
        - border-radius: 50%
        - border-width: 5px
        - border-color: rgba(255,255,255,1)
    card_mod:
      style: |
        ha-card {
           {% if is_state('sensor.text_dewpoint_comfort_living','Too Dry') %}
           --ha-card-background: radial-gradient(circle, deepskyblue, 55%, black, black) !important;
           {% elif is_state('sensor.text_dewpoint_comfort_living','Comfy Dry') %}
           --ha-card-background: radial-gradient(circle, mediumaquamarine, 55%, black, black) !important;
           {% elif is_state('sensor.text_dewpoint_comfort_living','Pleasant') %}
           --ha-card-background: radial-gradient(circle, limegreen, 55%, black, black) !important;
           {% elif is_state('sensor.text_dewpoint_comfort_living','Comfortable') %}
           --ha-card-background: radial-gradient(circle, yellowgreen, 55%, black, black) !important;
           {% elif is_state('sensor.text_dewpoint_comfort_living','Sticky Humid') %}
           --ha-card-background: radial-gradient(circle, yellow, 55%, black, black) !important;
           {% elif is_state('sensor.text_dewpoint_comfort_living','Muggy') %}
           --ha-card-background: radial-gradient(circle, gold, 55%, black, black) !important;
           {% elif is_state('sensor.text_dewpoint_comfort_living','Sweltering') %}
           --ha-card-background: radial-gradient(circle, orange, 55%, black, black) !important;
           {% elif is_state('sensor.text_dewpoint_comfort_living','Stifling') %}
           --ha-card-background: radial-gradient(circle, crimson, 55%, black, black) !important;
           {% endif %}
        }
  - type: custom:button-card
    name: Inner Circle Comfort Zone
    show_name: false
    show_icon: false
    aspect_ratio: 1/1
    entity: sensor.text_dewpoint_comfort_living
    style:
      right: 28.5%
      top: 50%
      height: 21%
      width: 21%
    styles:
      card:
        - border-radius: 50%
        - border-width: 0px
    card_mod:
      style: |
        ha-card {
           --ha-card-background: radial-gradient(circle, black, black, grey ) !important;
        {     
  - type: custom:button-card
    name: Floating Circle
    icon: mdi:circle
    show_name: false
    size: 25%
    card_mod:
      style: |
        :host {
          {% set humidity_float = states('sensor.air_conditioning_humidity') | float %}
          {% set temperature_float = states('sensor.air_conditioning_temperature') | float %}
          left: {{ 0.5 + humidity_float }}%;
          bottom: {{((temperature_float-1.5)*(100-0)/(72.5-27.5))+0}}%;
          transition: bottom 1s, left 1s; 
        }
        ha-card {
          --ha-card-background: transparent !important;
        }
  - type: custom:button-card
    label: Warm
    show_label: true
    style:
      right: 0%
      top: 22%
      width: 50%
    styles:
      label:
        - font-size: 20px
        - color: grey
    card_mod:
      style: |
        ha-card {
          --ha-card-background: transparent !important;
        }  
  - type: custom:button-card
    label: Cold
    show_label: true
    style:
      right: 0%
      top: 79%
      width: 50%
    styles:
      label:
        - font-size: 20px
        - color: grey
    card_mod:
      style: |
        ha-card {
          --ha-card-background: transparent !important;
        }  
  - type: custom:button-card
    label: Dry
    show_label: true
    style:
      left: 22%
      top: 50%
      width: 20%
    styles:
      label:
        - font-size: 20px
        - color: grey
        - writing-mode: vertical-rl
        - transform: rotate(180deg)
    card_mod:
      style: |
        ha-card {
          --ha-card-background: transparent !important;
        }  
  - type: custom:button-card
    label: Humid
    show_label: true
    style:
      left: 79%
      top: 50%
      width: 20%
    styles:
      label:
        - font-size: 20px
        - color: grey
        - writing-mode: vertical-rl
    card_mod:
      style: |
        ha-card {
          --ha-card-background: transparent !important;
        } 

[Chykan (Andrew)]

UPDATE: 16 23/04/2023
Flows available to convert numeric temperatures and humidity readings to words are available from here Weather Word Descriptions from Dew Point, Temperature & Tado (Simple Air Comfort Card)

Used this sensor to calculate the dewpoint from my Temperature and Humidity Sensors. Available from the below link
Dew Point Sensor Calculator

Created a flow in node red to convert the numeric dewpoint value to words.

• The Switch Sorts the Values
• msg.topic is used as a filter

Added Dew Point Comfort Text

                    - type: custom:button-card
                      entity: sensor.text_comfort_living
                      name: Living Room Dew Point Comfort
                      label: >-
                        Sensor created in Node Red converts dewpoint to comfort
                        text
                        https://github.com/miguelangel-nubla/home-assistant-dewpoint
                      show_state: true
                      show_name: false
                      show_label: false
                      show_icon: false
                      style:
                        right: '-50%'
                        top: 13%
                        width: 100%
                      styles:
                        state:
                          - font-size: 25px
                          - font-weight: bold
                      card_mod:
                        style: |
                          ha-card {
                            --ha-card-background: transparent !important;
                          } 

Added Dew Point Sensor

                    - type: custom:button-card
                      entity: sensor.dewpoint_living_room
                      name: Living Room Dew Point
                      icon: mdi:water-thermometer-outline
                      show_state: true
                      show_name: false
                      show_icon: true
                      style:
                        left: 20%
                        top: 30%
                        width: 50%
                        transform: translate(-50%, -50%) scale(0.8, 0.8)
                      card_mod:
                        style: |
                          ha-card {
                            --ha-card-background: transparent !important;
                          } 

Added a Dewpoint Comfort Sensor based off this chart:
This now changes the background colour of the outer ring only

Added a Temperature Comfort Sensor based off this chart:
This now changes only the background colour of the card.

FINAL PRODUCT: Optimised for Tablets, Nest Hubs, and my Portrait uPerfect 15.6 Vertical Monitor.

FULL CARDS CAN BE FOUND IN THE PREVIOUS POST.
Full code available here: Simple Air Comfort card - #16 by Chykan

- MOBILE OPTIMISED V3.0 - Used full width on phone in portrait orientation. Two vertical stack cards, within a horizontal stack card.

- MOBILE OPTIMISED - Used full width 1080p Tablet or vertical orientation screen.

TABLET OR FULL WIDTH PHONE OPTIMISED CARD V3.0 - Full Width on Phone

NOTE: There has been a lot of calibration to ensure 50% Humidity sits in the middle of the chart.

MOBILE OPTIMISED Scaling for dot:*

Humidity

• 0.4 shifts right to allow for 20% size of dot.
• 0% is left of card, 50% middle, 100% is right of card.

Temperature

• Change the OldMin Value to shift the dot up an down while maintaining the range and ratio.
• (OldMax - OldMin) Value is the 45% Outer Ring.
• The dot will always stay on the card, 0% is bottom and 100% is top.

NewValue = (((OldValue - OldMin) * (NewMax - NewMin)) / (OldMax - OldMin)) + NewMin

Convert a number range to another range, maintaining ratio

    card_mod:
      style: |
        :host {
          {% set humidity_float = states('sensor.air_conditioning_humidity') | float %}
          {% set temperature_float = states('sensor.air_conditioning_temperature') | float %}
          left: {{ 0.4 + humidity_float }}%;
          bottom: {{((temperature_float-4)*(100-0)/(72.5-27.5))+0}}%;
          transition: bottom 1s, left 1s; 

TABLET OR FULL WIDTH PHONE OPTIMISED Scaling for dot:*

Humidity

• 0.5 shifts right to allow for 25% size of dot.
• 0% is left of card, 50% middle, 100% is right of card.

Temperature

• Change the OldMin Value to shift the dot up an down while maintaining the range and ratio.
• (OldMax - OldMin) Value is the 45% Outer Ring.
• The dot will always stay on the card, 0% is bottom and 100% is top.

    card_mod:
      style: |
        :host {
          {% set humidity_float = states('sensor.netatmo_devonport_tas_indoor_humidity') | float %}
          {% set temperature_float = states('sensor.netatmo_devonport_tas_indoor_temperature') | float %}
          left: {{ 0.5 + humidity_float }}%;
          bottom: {{((temperature_float-1.5)*(100-0)/(72.5-27.5))+0}}%;
          transition: bottom 1s, left 1s; 

The way TADO does it must be with trigonometric functions Someone with a lot more coding know how will have to figure out this one:

Trigonometric functions in CSS  |  Articles  |  web.dev

Thanks @Grandmasterseven and @agak79 fantastic card for Tado Users. I have also setup the card for some outside sensors I have.