Climate

The climate-card, used for a climate entity, displays the current temperature (if available) and the set temperature. With the buttons on the right the temperature can be set higher or lower.

Thermostat Light Thermostat Dark

Usage

📄 /templates/custom_card_climate/custom_card_climate.yaml
type: custom:button-card
template: custom_card_climate
entity: climate.hvac

Template

/dashboard/HaCasa/templates/custom_card_climate/custom_card_climate.yaml
custom_card_climate:
  show_label: true
  show_state: true
  state_display: >
    [[[

    return "Currently " + states[entity.entity_id].attributes.current_temperature
    + '<p style="font-size:10px;display:inline;vertical-align:text-top">°C</p>'

    ]]]
  label: |
    [[[
      return states[entity.entity_id].attributes.temperature + '<sup style="font-size: 40px;">°C</sup>'
    ]]]
  show_icon: false
  styles:
    grid:
      - grid-template-areas: |
          'l buttons'
          'n buttons'
          's buttons'
      - grid-template-rows: min-content min-content
    card:
      - padding: 20px
    name:
      - justify-self: start
      - align-self: start
      - font-family: montserrat
      - font-weight: 500
    label:
      - font-size: 5em
      - justify-self: start
      - align-self: start
      - font-weight: 700
      - font-family: montserrat
    state:
      - justify-self: start
      - color: var(--color-dark-gray)
      - font-size: 12px
      - font-family: montserrat
  custom_fields:
    buttons:
      card:
        type: custom:button-card
        styles:
          grid:
            - grid-template-areas: |
                'item_1'
                'item_2'
            - row-gap: 3rem
          card:
            - padding: 10px
            - background: var(--contrast-background)
        custom_fields:
          item_1:
            card:
              type: custom:button-card
              icon: mdi:chevron-up
              styles:
                icon:
                  - width: 40px
                card:
                  - box-shadow: none
                  - background: none
              tap_action:
                action: call-service
                service: climate.set_temperature
                data:
                  temperature: |
                    [[[
                      return states[entity.entity_id].attributes.temperature + 1;
                    ]]]
                target:
                  entity_id: '[[[ return entity.entity_id ]]]'
          item_2:
            card:
              type: custom:button-card
              icon: mdi:chevron-down
              styles:
                icon:
                  - width: 40px
                card:
                  - box-shadow: none
                  - background: none
              tap_action:
                action: call-service
                service: climate.set_temperature
                data:
                  temperature: |
                    [[[
                      return states[entity.entity_id].attributes.temperature - 1;
                    ]]]
                target:
                  entity_id: '[[[ return entity.entity_id ]]]'

Usage​

Usage