Skip to content

Custom-card "Heat Pump"

The custom_card_heat_pump allows you to control your HVAC system and all its modes. This card is inspired by Simple Thermostat Card.

Credits

Author: Kam - 2022 Version: 1.0.0

Changelog

1.0.0 Initial release

Images

Heat_pump

Heat_pump_gif

Usage

- type: custom:button-card
  template: custom_card_heat_pump
  entity: climate.heat_pump

Requirements

Entity climate with only heat mode

Modification

If your entity does not have all the available options in the hvac component, modify (delete or comment out) the following part to match your setup. Each button corresponds to a mode of the hvac component.

item3:
      card:
        type: "horizontal-stack"
        cards:
          - type: "custom:button-card"
            template: "widget_icon_juve"
            icon: "mdi:power"
            tap_action:
              action: "call-service"
              service: "climate.set_hvac_mode"
              service_data:
                entity_id: "[[[ return entity.entity_id ]]]"
                hvac_mode: "off"
          - type: "custom:button-card"
            template: "widget_icon_juve"
            icon: "mdi:fire"
            tap_action:
              action: "call-service"
              service: "climate.set_hvac_mode"
              service_data:
                entity_id: "[[[ return entity.entity_id ]]]"
                hvac_mode: "heat"
            ...
          - type: "custom:button-card"
            template: "widget_icon_juve"
            icon: "mdi:snowflake"
            tap_action:
              action: "call-service"
              service: "climate.set_hvac_mode"
              service_data:
                entity_id: "[[[ return entity.entity_id ]]]"
                hvac_mode: "cool"
            ...
          - type: "custom:button-card"
            template: "widget_icon_juve"
            icon: "mdi:sync"
            tap_action:
              action: "call-service"
              service: "climate.set_hvac_mode"
              service_data:
                entity_id: "[[[ return entity.entity_id ]]]"
                hvac_mode: "heat_cool"
            ...
          - type: "custom:button-card"
            template: "widget_icon_juve"
            icon: "mdi:water"
            tap_action:
              action: "call-service"
              service: "climate.set_hvac_mode"
              service_data:
                entity_id: "[[[ return entity.entity_id ]]]"
                hvac_mode: "dry"
            ...
          - type: "custom:button-card"
            template: "widget_icon_juve"
            icon: "mdi:fan"
            tap_action:
              action: "call-service"
              service: "climate.set_hvac_mode"
              service_data:
                entity_id: "[[[ return entity.entity_id ]]]"
                hvac_mode: "fan_only"
            ...
Template Code
custom_card_heat_pump.yaml
---
custom_card_heat_pump:
  show_name: false
  show_icon: false
  template:
    - "icon_info_bg"
    - "ulm_translation_engine"
  hold_action:
    action: "more-info"
  styles:
    grid:
      - grid-template-areas: "'item1' 'item2' 'item3'"
      - grid-template-columns: "1fr"
      - grid-template-rows: "min-content  min-content min-content"
      - row-gap: "12px"
    card:
      - border-radius: "var(--border-radius)"
      - box-shadow: "var(--box-shadow)"
      - padding: "12px"
  custom_fields:
    item1:
      card:
        type: "custom:button-card"
        template:
          - "icon_info"
          - "ulm_translation_engine"
        tap_action:
          action: "more-info"
        entity: "[[[ return entity.entity_id ]]]"
        name: "[[[ return entity.name ]]]"
        label: >-
          [[[
              if(entity.attributes.temperature){
                return (entity.attributes.current_temperature ) + '°' + ' • ' + variables.ulm_translation_state + ' (' + entity.attributes.hvac_action + ')';
              }
              return variables.ulm_translation_state;
          ]]]
        icon: >
          [[[
            var icon = "mdi:thermostat";
            var state = entity.state;
            if (state =='dry') {
              return "mdi:water";
            } else if (state =='heat') {
              return "mdi:fire";
            } else if (state =='cool') {
              return "mdi:snowflake";
            } else if (state =='fan_only') {
              return "mdi:fan";
            } else if (state =='heat_cool') {
              return "mdi:sync";
            }
            return icon;
          ]]]
        state:
          - operator: "template"
            value: "[[[return entity.state == 'dry']]]"
            styles:
              icon:
                - color: "rgba(var(--color, 255, 165, 0),1)"
              img_cell:
                - background-color: "rgba(var(--color, 255, 165, 0),0.2)"
          - operator: "template"
            value: "[[[return entity.state == 'cool']]]"
            styles:
              icon:
                - color: "rgba(var(--color-blue),1)"
              img_cell:
                - background-color: "rgba(var(--color-blue),0.2)"
          - operator: "template"
            value: "[[[return entity.state == 'heat']]]"
            styles:
              icon:
                - color: "rgba(var(--color-red),1)"
              img_cell:
                - background-color: "rgba(var(--color-red),0.2)"
          - operator: "template"
            value: "[[[return entity.state == 'fan_only']]]"
            styles:
              icon:
                - color: "rgba(var(--color, 195, 0, 255),1)"
              img_cell:
                - background-color: "rgba(var(--color, 195, 0, 255),0.2)"
          - operator: "template"
            value: "[[[return entity.state == 'heat_cool']]]"
            styles:
              icon:
                - color: "rgba(var(--color-green),1)"
              img_cell:
                - background-color: "rgba(var(--color-green),0.2)"
    item2:
      card:
        type: "custom:button-card"
        template: "list_items"
        custom_fields:
          item1:
            card:
              type: "custom:button-card"
              template: "widget_icon"
              icon: "mdi:arrow-down"
              tap_action:
                action: "call-service"
                service: "climate.set_temperature"
                service_data:
                  entity_id: "[[[ return entity.entity_id ]]]"
                  temperature: "[[[ return entity.attributes.temperature - entity.attributes.target_temp_step ]]]"
          item2:
            card:
              type: "custom:button-card"
              entity: "[[[ return entity.entity_id ]]]"
              name: "[[[ return entity.attributes.temperature + '°C' ]]]"
              styles:
                card:
                  - box-shadow: "none"
              show_icon: false
              tap_action: "none"
          item3:
            card:
              type: "custom:button-card"
              template: "widget_icon"
              icon: "mdi:arrow-up"
              tap_action:
                action: "call-service"
                service: "climate.set_temperature"
                service_data:
                  entity_id: "[[[ return entity.entity_id ]]]"
                  temperature: "[[[ return entity.attributes.temperature + entity.attributes.target_temp_step ]]]"
    item3:
      card:
        type: "horizontal-stack"
        cards:
          - type: "custom:button-card"
            template: "widget_icon_juve"
            icon: "mdi:power"
            tap_action:
              action: "call-service"
              service: "climate.set_hvac_mode"
              service_data:
                entity_id: "[[[ return entity.entity_id ]]]"
                hvac_mode: "off"
          - type: "custom:button-card"
            template: "widget_icon_juve"
            icon: "mdi:fire"
            tap_action:
              action: "call-service"
              service: "climate.set_hvac_mode"
              service_data:
                entity_id: "[[[ return entity.entity_id ]]]"
                hvac_mode: "heat"
            styles:
              icon:
                - color: |
                    [[[
                      var color = 'rgba(var(--color-theme), 1)';
                      if (entity.state == "heat"){
                        var color = 'rgba(var(--color-red), 1)';
                      }
                      return color;
                    ]]]
              card:
                - background-color: |
                    [[[
                      var bc_color = 'rgba(var(--color-theme),0.05)';
                      if (entity.state == "heat"){
                        var bc_color = 'rgba(var(--color-red), 0.2)';
                      }
                      return bc_color;
                    ]]]
          - type: "custom:button-card"
            template: "widget_icon_juve"
            icon: "mdi:snowflake"
            tap_action:
              action: "call-service"
              service: "climate.set_hvac_mode"
              service_data:
                entity_id: "[[[ return entity.entity_id ]]]"
                hvac_mode: "cool"
            styles:
              icon:
                - color: |
                    [[[
                      var color = 'rgba(var(--color-theme), 1)';
                      if (entity.state == "cool"){
                        var color = 'rgba(var(--color-blue), 1)';
                      }
                      return color;
                    ]]]
              card:
                - background-color: |
                    [[[
                      var bc_color = 'rgba(var(--color-theme),0.05)';
                      if (entity.state == "cool"){
                        var bc_color = 'rgba(var(--color-blue), 0.2)';
                      }
                      return bc_color;
                    ]]]
          - type: "custom:button-card"
            template: "widget_icon_juve"
            icon: "mdi:sync"
            tap_action:
              action: "call-service"
              service: "climate.set_hvac_mode"
              service_data:
                entity_id: "[[[ return entity.entity_id ]]]"
                hvac_mode: "heat_cool"
            styles:
              icon:
                - color: |
                    [[[
                      var color = 'rgba(var(--color-theme), 1)';
                      if (entity.state == "heat_cool"){
                        var color = 'rgba(var(--color-green), 1)';
                      }
                      return color;
                    ]]]
              card:
                - background-color: |
                    [[[
                      var bc_color = 'rgba(var(--color-theme),0.05)';
                      if (entity.state == "heat_cool"){
                        var bc_color = 'rgba(var(--color-green), 0.2)';
                      }
                      return bc_color;
                    ]]]
          - type: "custom:button-card"
            template: "widget_icon_juve"
            icon: "mdi:water"
            tap_action:
              action: "call-service"
              service: "climate.set_hvac_mode"
              service_data:
                entity_id: "[[[ return entity.entity_id ]]]"
                hvac_mode: "dry"
            styles:
              icon:
                - color: |
                    [[[
                      var color = 'rgba(var(--color-theme), 1)';
                      if (entity.state == "dry"){
                        var color = 'rgba(var(--color, 255, 165, 0), 1)';
                      }
                      return color;
                    ]]]
              card:
                - background-color: |
                    [[[
                      var bc_color = 'rgba(var(--color-theme),0.05)';
                      if (entity.state == "dry"){
                        var bc_color = 'rgba(var(--color, 255, 165, 0), 0.2)';
                      }
                      return bc_color;
                    ]]]
          - type: "custom:button-card"
            template: "widget_icon_juve"
            icon: "mdi:fan"
            tap_action:
              action: "call-service"
              service: "climate.set_hvac_mode"
              service_data:
                entity_id: "[[[ return entity.entity_id ]]]"
                hvac_mode: "fan_only"
            styles:
              icon:
                - color: |
                    [[[
                      var color = 'rgba(var(--color-theme), 1)';
                      if (entity.state == "fan_only"){
                        var color = 'rgba(var(--color, 195, 0, 255), 1)';
                      }
                      return color;
                    ]]]
              card:
                - background-color: |
                    [[[
                      var bc_color = 'rgba(var(--color-theme),0.05)';
                      if (entity.state == "fan_only"){
                        var bc_color = 'rgba(var(--color, 195, 0, 255), 0.2)';
                      }
                      return bc_color;
                    ]]]
widget_icon_juve:
  tap_action:
    action: "toggle"
  show_icon: true
  show_name: false
  show_state: true
  styles:
    grid:
      - grid-template-areas: "'i'"
    card:
      - box-shadow: "none"
      - padding: "0px"
      - background-color: "rgba(var(--color-theme),0.05)"
      - border-radius: "14px"
      - place-self: "center"
      - height: "42px"
    icon:
      - color: "rgba(var(--color-theme),0.9)"
  size: "20px"