Custom Button-Card Template for EVOHOME_CC / RAMSES_RF

I’ve put together a template for displaying Evohome heating zones from entities created by the evohome_cc / RAMSES_RF custom component integration. It’s easy to tweak and reasonably compact, whilst displaying a lot of information. It’s designed to be used in a Lovelace grid of two columns for optimum mobile viewing, but will work in a single column too.

Firstly, make sure you have the evohome_cc and the button-card components installed. HACS is the easiest way to do this in my opinion…
evohome_cc / RAMSES_RF: GitHub - zxdavb/evohome_cc: (WIP) HA custom component for evohome_rf
Button Card: GitHub - custom-cards/button-card: ❇️ Lovelace button-card for home assistant

Secondly, edit your Lovelace UI configuration. If you’ve never done this before here are some basic steps:

  • I suggest you do this from a regular web desktop/laptop web browser and not a tablet / mobile.
  • On the Home Assistant dashboard, click on the three-dots icon in the top-right and choose ‘Edit Dashboard’
  • Go and find those three-dots again in the top-right and click a second time on it, this time choosing ‘Raw configuration editor’
  • Did I mention to make sure you’ve already taken a backup?
  • The first row in this file is usually ‘title: SERVER-NAME’, you copy and paste my whole template under this, starting on line 2.

This goes in your Lovelace-UI YAML file:

button_card_templates:
  evohome_tile:
    variables:
      entity_climate: climate.living_room
      entity_heat_demand: sensor.04_029854_heat_demand
      entity_battery: binary_sensor.04_029854_battery_2
      entity_window: binary_sensor.04_029854_window_2
    triggers_update:
      - '[[[ return variables.entity_climate ]]]'
      - '[[[ return variables.entity_heat_demand ]]]'
      - '[[[ return variables.entity_battery ]]]'
      - '[[[ return variables.entity_window ]]]'
    action: more-info
    show_icon: false
    show_name: true
    styles:
      card:
        - padding: 2%
        - background-color: |
            [[[
              var entity_name = variables.entity_climate
              if (entity_name == 'water_heater.stored_hw')
                if(states[entity_name].state == 'off')
                  return "#dddddd"; // grey
                else
                  return "#ff5252"; // red
              if (states[entity_name].attributes['hvac_action'] == 'heating')
                return "#ff5252"; // red
              if (states[entity_name].attributes['preset_mode'] == 'away')
                return "#dec362"; // yellow
              if ((states[entity_name].attributes['heating_type'] == 'electric_heat') && (states[entity_name].state != 'off'))
                return "#73d16b"; // green
              if (states[entity_name].attributes['hvac_action'] == 'idle')
                return "#73d16b"; // green
              if (states[entity_name].state == 'off')
                return "#dddddd"; // grey
              if (states[variables.entity_climate].attributes['hvac_action'] == null)
                return "#6ba5d1"; // blue
              return "#ffffff"; // white
            ]]]
      grid:
        - grid-template-areas: >-
            "n n n" "current_temperature current_temperature setpoint_title"
            "current_temperature current_temperature setpoint_value" "status
            status status" "mode mode mode" "demand demand demand" "battery
            battery battery" "window window window"
        - grid-template-columns: auto
        - grid-template-rows: min-content
      name:
        - color: black
        - font-size: 12px
        - justify-self: start
      custom_fields:
        current_temperature:
          - color: black
          - font-size: 30px
          - font-weight: bold
          - justify-self: start
        setpoint_title:
          - color: black
          - font-size: 10px
          - font-weight: normal
          - justify-self: start
          - font-style: italics
        setpoint_value:
          - color: black
          - margin-top: '-6px'
          - font-size: 17px
          - font-weight: normal
          - justify-self: start
          - font-style: italics
        status:
          - color: black
          - margin-top: 1px
          - font-size: 12px
          - font-weight: normal
          - justify-self: start
          - text-transform: capitalize
        mode:
          - color: black
          - font-style: italics
          - margin-top: 1px
          - font-size: 12px
          - font-weight: normal
          - justify-self: start
          - text-transform: capitalize
        demand:
          - color: black
          - font-size: 14px
          - font-weight: normal
          - justify-self: start
          - text-transform: capitalize
        battery:
          - color: black
          - font-size: 14px
          - font-weight: normal
          - justify-self: start
          - text-transform: capitalize
        window:
          - color: black
          - font-size: 12px
          - font-weight: normal
          - justify-self: start
          - text-transform: capitalize
    custom_fields:
      current_temperature: |
        [[[
          return states[variables.entity_climate].attributes['current_temperature'] + "°C"
        ]]]
      setpoint_title: |
        [[[
          return "Setpoint"
        ]]]
      setpoint_value: |
        [[[
          return states[variables.entity_climate].attributes['temperature'] + "°C"
        ]]]
      status: |
        [[[
          var outputtext
          if (variables.entity_climate == 'water_heater.stored_hw')
            outputtext = states[variables.entity_climate].state + " - " + states[variables.entity_climate].attributes['operation_mode']
          else if (states[variables.entity_climate].attributes['heating_type'] == 'electric_heat')
            outputtext = states[variables.entity_climate].state + " - " + states[variables.entity_climate].attributes['preset_mode']
          //else if (states[variables.entity_climate].attributes['hvac_action'] == null)
          //  outputtext = "On - " + states[variables.entity_climate].attributes['preset_mode'] 
          else
            outputtext = states[variables.entity_climate].attributes['hvac_action'] + " - " + states[variables.entity_climate].attributes['preset_mode']
          return outputtext
        ]]]
      mode: |
        [[[
          if ((states[variables.entity_climate].attributes['preset_mode'] != null) && (states[variables.entity_climate].attributes['preset_mode'] == "temporary") )
            if ((states[variables.entity_climate].attributes['mode'] != null))
              return "Until: " + states[variables.entity_climate].attributes['mode']['until']
            else
              return "No Mode Data"
          else
            if ((states[variables.entity_climate].attributes['mode'] != null))
              return states[variables.entity_climate].attributes['mode']['mode'].split('_').join(' ')
            else
              return "No Mode Data"
        ]]]
      demand: |
        [[[
          var returnstring = "<br><ha-icon icon='mdi:fire' style='width: 12px; height: 12px; color: black;'></ha-icon>&nbsp;"
          if (states[variables.entity_heat_demand].state == null)
            return returnstring + "?"
          else
            return returnstring + Math.round(states[variables.entity_heat_demand].state) + "%"
        ]]]
      battery: |
        [[[
          var returnstring = "<ha-icon icon='mdi:battery-high' style='width: 12px; height: 12px; color: black;'></ha-icon>&nbsp;"
          if (states[variables.entity_battery].attributes['battery_level'] == null)
            return returnstring + "?"
          else
            return returnstring + states[variables.entity_battery].attributes['battery_level']*100 + "%"
        ]]]
      window: |
        [[[
          var returnstring = "<ha-icon icon='mdi:window-open' style='width: 12px; height: 12px; color: black;'></ha-icon>&nbsp;"
          if ( (states[variables.entity_window].attributes['device_id'] == null) || (variables.entity_climate == 'water_heater.stored_hw') || (states[variables.entity_climate].attributes['heating_type'] == 'electric_heat'))
            return "<br>"
          else
            if(states[variables.entity_window].state == 'on')
              return returnstring + 'Open'
            else
              return returnstring + 'Closed'
        ]]]

Now add a new card of type ‘Custom: Button-Card’ and paste the following example. You will need to replace the entity and variables with your appropriate sensor entities. Yes, I know you’ve got to put your climate entity in twice but I can’t figure out how to improve that at the moment.

type: custom:button-card
template: evohome_tile
entity: climate.living_room
variables:
  entity_climate: climate.living_room
  entity_heat_demand: sensor.04_029854_heat_demand
  entity_battery: binary_sensor.04_029854_battery_2
  entity_window: binary_sensor.04_029854_window_2

And this is an example of how to make it look nice in a Grid:

type: grid
cards:
  - type: custom:button-card
    template: evohome_tile
    entity: climate.living_room
    variables:
      entity_climate: climate.living_room
      entity_heat_demand: sensor.04_029854_heat_demand
      entity_battery: binary_sensor.04_029854_battery_2
      entity_window: binary_sensor.04_029854_window_2
  - type: custom:button-card
    template: evohome_tile
    entity: climate.guest_room
    variables:
      entity_climate: climate.guest_room
      entity_heat_demand: sensor.04_029850_heat_demand
      entity_battery: binary_sensor.04_029850_battery_2
      entity_window: binary_sensor.04_029850_window_2
  - type: custom:button-card
    template: evohome_tile
    entity: climate.en_suite
    variables:
      entity_climate: climate.en_suite
      entity_heat_demand: sensor.04_029880_heat_demand
      entity_battery: binary_sensor.04_029880_battery_2
      entity_window: binary_sensor.04_029880_window_2
  - type: custom:button-card
    template: evohome_tile
    entity: climate.main_bedroom
    variables:
      entity_climate: climate.main_bedroom
      entity_heat_demand: sensor.04_059705_heat_demand
      entity_battery: binary_sensor.04_059705_battery_2
      entity_window: binary_sensor.04_059705_window_2
columns: 2
square: false

Update 2021-11-10:

  • Merged the Window entity tweaks into this post.
  • Added some checking for null objects in the ‘Mode’ display. If you notice any more errors from this card caused by null entity objects please let me know. They manifest as a massive ugly blob of error text on your dashboard when you try and display the card.
2 Likes

That’s very nice looking but looks like it’s not working in your card template the variables bit has your own settings
can you recheck the code please ?

The template is fine, but for the cards you would need to substitute my entities for your own. The three variable values at the top of the template are default values. You can put your own default entities in there too.

1 Like

Thanks for this nice overview of the different heating zones. I’m wondering if you might add the open window binary_sensor to the card?

Yup, should be straightforward but I had my window entities disabled. They’re enabled now so once they’ve become available and populated with some data I’ll tweak the template.

Ok here it is then. Your updated template which supports the window open/close entity status too. The end result if embedded in a 2 column grid would look something like this (note that I rebooted Home Assistant recently so the status of some of my entities are currently unknown, hence the ? and blank spaces everywhere):

button_card_templates:
  evohome_tile:
    variables:
      entity_climate: climate.living_room
      entity_heat_demand: sensor.04_029854_heat_demand
      entity_battery: binary_sensor.04_029854_battery_2
      entity_window: binary_sensor.04_029854_window_2
    triggers_update:
      - '[[[ return variables.entity_climate ]]]'
      - '[[[ return variables.entity_heat_demand ]]]'
      - '[[[ return variables.entity_battery ]]]'
      - '[[[ return variables.entity_window ]]]'
    action: more-info
    show_icon: false
    show_name: true
    styles:
      card:
        - padding: 2%
        - background-color: |
            [[[
              var entity_name = variables.entity_climate
              if (entity_name == 'water_heater.stored_hw')
                if(states[entity_name].state == 'off')
                  return "#dddddd"; // grey
                else
                  return "#ff5252"; // red
              if (states[entity_name].attributes['hvac_action'] == 'heating')
                return "#ff5252"; // red
              if (states[entity_name].attributes['preset_mode'] == 'away')
                return "#dec362"; // yellow
              if ((states[entity_name].attributes['heating_type'] == 'electric_heat') && (states[entity_name].state != 'off'))
                return "#73d16b"; // green
              if (states[entity_name].attributes['hvac_action'] == 'idle')
                return "#73d16b"; // green
              if (states[entity_name].state == 'off')
                return "#dddddd"; // grey
              if (states[variables.entity_climate].attributes['hvac_action'] == null)
                return "#6ba5d1"; // blue
              return "#ffffff"; // white
            ]]]
      grid:
        - grid-template-areas: >-
            "n n n" "current_temperature current_temperature setpoint_title"
            "current_temperature current_temperature setpoint_value" "status
            status status" "mode mode mode" "demand demand demand" "battery
            battery battery" "window window window"
        - grid-template-columns: auto
        - grid-template-rows: min-content
      name:
        - color: black
        - font-size: 12px
        - justify-self: start
      custom_fields:
        current_temperature:
          - color: black
          - font-size: 30px
          - font-weight: bold
          - justify-self: start
        setpoint_title:
          - color: black
          - font-size: 10px
          - font-weight: normal
          - justify-self: start
          - font-style: italics
        setpoint_value:
          - color: black
          - margin-top: '-6px'
          - font-size: 17px
          - font-weight: normal
          - justify-self: start
          - font-style: italics
        status:
          - color: black
          - margin-top: 1px
          - font-size: 12px
          - font-weight: normal
          - justify-self: start
          - text-transform: capitalize
        mode:
          - color: black
          - font-style: italics
          - margin-top: 1px
          - font-size: 12px
          - font-weight: normal
          - justify-self: start
          - text-transform: capitalize
        demand:
          - color: black
          - font-size: 14px
          - font-weight: normal
          - justify-self: start
          - text-transform: capitalize
        battery:
          - color: black
          - font-size: 14px
          - font-weight: normal
          - justify-self: start
          - text-transform: capitalize
        window:
          - color: black
          - font-size: 12px
          - font-weight: normal
          - justify-self: start
          - text-transform: capitalize
    custom_fields:
      current_temperature: |
        [[[
          return states[variables.entity_climate].attributes['current_temperature'] + "°C"
        ]]]
      setpoint_title: |
        [[[
          return "Setpoint"
        ]]]
      setpoint_value: |
        [[[
          return states[variables.entity_climate].attributes['temperature'] + "°C"
        ]]]
      status: |
        [[[
          var outputtext
          if (variables.entity_climate == 'water_heater.stored_hw')
            outputtext = states[variables.entity_climate].state + " - " + states[variables.entity_climate].attributes['operation_mode']
          else if (states[variables.entity_climate].attributes['heating_type'] == 'electric_heat')
            outputtext = states[variables.entity_climate].state + " - " + states[variables.entity_climate].attributes['preset_mode']
          //else if (states[variables.entity_climate].attributes['hvac_action'] == null)
          //  outputtext = "On - " + states[variables.entity_climate].attributes['preset_mode'] 
          else
            outputtext = states[variables.entity_climate].attributes['hvac_action'] + " - " + states[variables.entity_climate].attributes['preset_mode']
          return outputtext
        ]]]
      mode: |
        [[[
          if (states[variables.entity_climate].attributes['preset_mode'] == "temporary")
            return states[variables.entity_climate].attributes['mode']['until']
          else
            return states[variables.entity_climate].attributes['mode']['mode'].split('_').join(' ')
        ]]]
      demand: |
        [[[
          var returnstring = "<br><ha-icon icon='mdi:fire' style='width: 12px; height: 12px; color: black;'></ha-icon>&nbsp;"
          if (states[variables.entity_heat_demand].state == null)
            return returnstring + "?"
          else
            return returnstring + Math.round(states[variables.entity_heat_demand].state) + "%"
        ]]]
      battery: |
        [[[
          var returnstring = "<ha-icon icon='mdi:battery-high' style='width: 12px; height: 12px; color: black;'></ha-icon>&nbsp;"
          if (states[variables.entity_battery].attributes['battery_level'] == null)
            return returnstring + "?"
          else
            return returnstring + states[variables.entity_battery].attributes['battery_level']*100 + "%"
        ]]]
      window: |
        [[[
          var returnstring = "<ha-icon icon='mdi:window-open' style='width: 12px; height: 12px; color: black;'></ha-icon>&nbsp;"
          if ( (states[variables.entity_window].attributes['device_id'] == null) || (variables.entity_climate == 'water_heater.stored_hw') || (states[variables.entity_climate].attributes['heating_type'] == 'electric_heat'))
            return "<br>"
          else
            if(states[variables.entity_window].state == 'on')
              return returnstring + 'Open'
            else
              return returnstring + 'Closed'
        ]]]

And an example of how you’d call it from a card:

type: custom:button-card
template: evohome_tile
entity: climate.living_room
variables:
  entity_climate: climate.living_room
  entity_heat_demand: sensor.04_029854_heat_demand
  entity_battery: binary_sensor.04_029854_battery_2
  entity_window: binary_sensor.04_029854_window_2

Update 2021-10-18: I’ve just tweaked the code slightly so as the window status doesn’t show on electric heating zone or DHW cards.

3 Likes

Thanks looks great

Many thanks. I used a lot of your code to do the same approach for mine. More of understanding the concept of Variables and grid as well

1 Like

Would you be able to perhaps share a screenshot of your chosen layout please? I’m just curious as to how other people are presenting their heating systems in HA.

Sure, will do, but I’m working on the design step by step slowly. I’ll share it here by the end

Do you plan on adding boost button for 1 hour?

I’m sorry but I don’t plan on doing that, I like the clean information view and never personally use boost for heating. I’m sure it’s possible if you wanted to play - my starting point would be trying to embed a button-card for calling the boost service as an entity within my existing button-card’s grid layout. It’s probably easiest to create the new button-card first to get it working, and then try embedding it afterwards.

Update - I thought about this for a few more seconds and I’m not certain you can actually embed a button-card in a button-card. I think you’d have to totally change the approach and instead implement a vertical stack instead containing two button cards, and then you’d have to change the logic to control the background colour and make it look like a single tile. It’s basically a very different solution to the one I have built. Happy to be proven wrong though!

Here is my general dashboard look


In the details, I need this: temp, humidity, label if data didn’t change for a long time, yellow fire if Climate device at that room is not idling, and notification if the battery of the sensor goes off
Climate dash2

On a double click it pops-up a mini graph card with the h24h history
On a click, it fires a timer for 15 sec that shows a climate card (or a theater card) on the main screen. I had to decline popup for that as for the low speed of UI than

Here are the codes:
Climate stack:
I use 4-row system, with 2 first always on the screen. Wheather header is expanding more rows

 # Climate display switch
 # Simple weather https://github.com/kalkih/simple-weather-card
- type: 'custom:simple-weather-card'
  entity: weather.home
  name: ""
  tap_action:
    action: call-service
    service: timer.start
    service_data:
      entity_id: timer.climate_display
  style: |
        ha-card {
          border-bottom-right-radius: 0;
          border-bottom-left-radius: 0;
          border-bottom: var(--paper-item-icon-color);
          border-bottom-style: solid;
          border-bottom-width: 0.5px;
          }
          
  # Line1 of temps
- type: horizontal-stack   
  cards:
  - type: custom:decluttering-card
    template: declat_cliamte_graph
    variables:
      - hum_entity_id: sensor.termo3_outside_humidity
      - temp_entity_id: sensor.termo3_outside_temperature
      - clim_intity_id: climate.dummyclimate
      - name: Outdoor
      - timer_entity: timer.outdoor_climate_display

  - type: custom:decluttering-card
    template: declat_cliamte_graph
    variables:
      - hum_entity_id: sensor.xiaomi_lywsd02_badroom_humidity
      - temp_entity_id: sensor.xiaomi_lywsd02_badroom_temperature
      - clim_intity_id: climate.dummyclimate
      - name: Bedroom1
      - timer_entity: timer.k1_bedroom_climate_display

  - type: custom:decluttering-card
    template: declat_cliamte_graph
    variables:
      - hum_entity_id: sensor.termo2_kitchen_k1_humidity
      - temp_entity_id: sensor.termo2_kitchen_k1_temperature
      - clim_intity_id: climate.k1_ac
      - name: K1 Kitchen
      - timer_entity: timer.k1_kitchen_climate_display

# Line2 of Temps
- type: horizontal-stack   
  cards:
  - type: custom:decluttering-card
    template: declat_cliamte_graph
    variables:
      - hum_entity_id: sensor.termo_6_workshop_humidity
      - temp_entity_id: sensor.termo_6_workshop_temperature
      - clim_intity_id: climate.workshop_heat
      - name: Workshop
      - timer_entity: timer.workshop_climate_display

  - type: custom:decluttering-card
    template: declat_cliamte_graph
    variables:
      - hum_entity_id: sensor.termo1_office_humidity
      - temp_entity_id: sensor.termo1_office_temperature
      - clim_intity_id: climate.office_ac
      - name: Office
      - timer_entity: timer.office_climate_display

  - type: custom:decluttering-card
    template: declat_cliamte_graph
    variables:
      - hum_entity_id: sensor.termo5_bedroom_k2_humidity
      - temp_entity_id: sensor.termo5_bedroom_k2_temperature
      - clim_intity_id: climate.dummyclimate
      - name: Master WC
      - timer_entity: timer.dummytimer

# EXTRA Cards         
- type: conditional    
  conditions:
  - entity: timer.climate_display
    state: "active"

  card:
    type: custom:stack-in-card
    mode: vertical
    keep:
      margin: true
      border_radius: true
    cards:
  # Line3 of Temps
    - type: horizontal-stack   
      cards:
      - type: custom:decluttering-card
        template: declat_cliamte_graph
        variables:
          - hum_entity_id: sensor.termo4_hall_k2_humidity
          - temp_entity_id: sensor.termo4_hall_k2_temperature
          - clim_intity_id: climate.dummyclimate
          - name: Hall1
          - timer_entity: timer.dummytimer
    
      - type: custom:decluttering-card
        template: declat_cliamte_graph
        variables:
          - hum_entity_id: sensor.termo4_hall_k2_humidity
          - temp_entity_id: sensor.termo4_hall_k2_temperature
          - clim_intity_id: climate.dummyclimate
          - name: Hall1
          - timer_entity: timer.dummytimer
          
      - type: custom:decluttering-card
        template: declat_cliamte_graph
        variables:
          - hum_entity_id: sensor.termo4_hall_k2_humidity
          - temp_entity_id: sensor.termo4_hall_k2_temperature
          - clim_intity_id: climate.dummyclimate
          - name: Hall1
          # - timer_entity: timer.dummytimer
      
        #   # Line4 of Temps
        # - type: horizontal-stack   
        #   cards:
        #     - type: custom:button-card
        #       template: btc_climate
        #       entity: scene.outdoor
    
        #     - type: custom:button-card
        #       template: btc_climate
        #       entity: scene.bed_time
    
        #     - type: custom:button-card
        #       template: btc_climate
        #       entity: scene.tv_time

Button card template, kudos for @sOckhamSter

btc_climate:
  aspect_ratio: 5/2
  show_icon: false
  show_name: true
  show_last_changed: true
  ### TODO ###
  # tap_action:
  #   action: call-service
  #   service: scene.turn_on
  #   service_data:
  #         entity_id: entity
  variables:
    entity_termo: '[[[ return entity.entity_id ]]]'
    entity_hum: ""
    entity_clim: climate.dummyclimate
  triggers_update: all
    # - '[[[ return variables.entity_termo ]]]'
    # - '[[[ return variables.entity_hum ]]]'
    # - '[[[ return variables.entity_clim ]]]'
  styles:
    card:
      - align-self: center
      - border-radius: 15px
      - border-width: 1px
      - border-style: solid
      - border-color: var(--paper-item-icon-color)
    img_cell:
      - padding-left: 15px
      - justify-content: start
      
    grid:
      - grid-template-areas: '"temp l l l" "temp n n n" "temp hum clim btr"'
      - grid-template-columns: 35% 25% 20% 20%
      - grid-template-rows: 30% 40% 30%
    name:
      - margin-left: 5%
      - font-size: 80%
      - justify-self: start
      - align-self: start
# TODO Relative time - плохо?
    label:
      - margin-left: 5%
      - font-size: 50%
      - justify-self: start
      - color: |
          [[[
            var d = Math.round((Date.now() - Date.parse(states[variables.entity_termo].last_changed))/60/1000);
            var r;
            if (d > 35) r = "var(--secondary-text-color)"; else r = "rgba(0,0,0,0)";
            return r;
          ]]]
    custom_fields:
      temp:
        - font-size: 75%
        - border-radius: 50%
        - width: 65%
        - height: 75%
        - padding: 10%
        - background: var(--paper-item-icon-color)
        - color: white
        - display: grid
        - justify-self: end
        - align-items: center
        - justify-content: center
      hum:
        - font-size: 60%
        - justify-self: start
        - margin-left: 15%
      clim:
        - justify-self: center
        - color: var(--paper-item-icon-active-color)
      btr:
        - justify-self: center
        - color: red
  custom_fields:
    temp: |
      [[[
        return states[variables.entity_termo].state + "°"
      ]]]
    hum: |
      [[[
        return Math.round(states[variables.entity_hum].state) + "%"
      ]]]
    clim: |
      [[[
        if (states[variables.entity_clim].attributes.hvac_action == 'off' || states[variables.entity_clim].attributes.hvac_action == 'idle') 
        return "";
        else return "<ha-icon icon='mdi:fire' style='width: 60%; height: 60%'></ha-icon>";
      ]]]
    btr: |
      [[[
        if (states[variables.entity_termo].attributes.battery < 15) 
        return "<ha-icon icon='mdi:battery-charging-20' style='width: 50%; height: 50%'></ha-icon>";
      ]]]

And a declatering card optimise coding a bit:

declat_cliamte_graph:     # This is the name of a template
  # default:
  #   entity_clim: climate.dummyclimate
  card:
    type: custom:button-card
    template: btc_climate
    entity: '[[temp_entity_id]]'
    name: '[[name]]'
    variables:
      entity_hum: '[[hum_entity_id]]'
      entity_clim: '[[clim_intity_id]]'

    tap_action:
      action: call-service
      service: timer.start
      service_data:
        entity_id: '[[timer_entity]]'

    double_tap_action:
      action: fire-dom-event
      browser_mod:
        command: popup
        title: TestTitle1
        hide_header: true
        card:
          type: custom:stack-in-card
          mode: vertical
          cards:
          - type: custom:mini-graph-card
            name: Outside temperature 24h
            hours_to_show: 24
            points_per_hour: 1
            group_by: hour
            decimals: 1
            hour24: true
            lower_bound: 20
            upper_bound: 90
            height: 120
            show:
              labels: true
              labels_secondary: true
              icon: false
              fill: fade
              legend: false
            color_thresholds:
              - value: 20
                color: "#d428d4"
              - value: 30
                color: "#d676d6"      
              - value: 40
                color: "#43afc4"
              - value: 50
                color: "#4476c2"      
              - value: 60
                color: "#078bf7"  
              - value: 70
                color: "#5600e0"
              - value: 80
                color: "#003596"      
            icon_adaptive_color: true
            entities:
              - entity: '[[hum_entity_id]]'
              - entity: '[[temp_entity_id]]'
                y_axis: secondary
                color: "#ffc21c"
                show_state: true
                show_fill: false
                show_points: true
                smoothing: true

Hope it will help or inspire someone

Hi, I have some problems when creating the button when copy / paste the button card:

Any idea?

Does your climate.evh.kinderkamer entity have any attributes such as hvac_action that this card is using? You can check in the developer dashboard.

Hi, Thanks for the reply.

No there are only these:

image

This a radiator valve (HR92)

Thanks,
Jan

That’ll be the reason then. I created the template purely for Evohome controller climate zone entities created by evohome_cc. If you’re using other types of entities then they just won’t have the data available or in the expected format. You’ll have to dive through the template code and take out or adjust the parts as appropriate. Enable the developer tools, locate your climate entity, and have a look at the data available to you. Here’s an example of one of my climate entities:

Compare that with your climate.evh.kinderkamer entity and wherever I reference a particular attribute in my template, replace the attribute name with the equivalent for your entity.

Hi, I’ve just started with HA so please be gentle. I initially installed the Honeywell TCC integration which logs into the TCC platform and it’s working OK but I was looking to add some more information the view. I really like the look of your integration and I’m OK with the YAML side of things but am really struggling to install the RAMSES integration. All hints and tips welcome. Thank you

@sOckhamSter
How did you put 2 x TRV’s in one zone? Do you mind sharing the code?

Many thanks for this nice card

Like this, but please note that the battery percentage part no longer works (for me anyway) because ramses_cc doesn’t seem to send any charge percentages anymore.

type: custom:button-card
entity: climate.kitchen
variables:
  entity_climate: climate.kitchen
  entity_heat_demand: sensor.04_029876_heat_demand
  entity_battery: binary_sensor.04_029876_battery_2
  entity_heat_demand2: sensor.04_029878_heat_demand
  entity_battery2: binary_sensor.04_029878_battery_2
  entity_battery3: binary_sensor.34_112355_battery_2
  entity_window1: binary_sensor.04_029876_window_open
  entity_window2: binary_sensor.04_029878_window_open
triggers_update:
  - '[[[ return variables.entity_climate ]]]'
  - '[[[ return variables.entity_heat_demand ]]]'
  - '[[[ return variables.entity_battery ]]]'
action: more-info
show_icon: false
show_name: true
styles:
  card:
    - padding: 2%
    - background-color: |
        [[[
          var entity_name = variables.entity_climate
          if (entity_name == 'water_heater.stored_hw')
            if(states[entity_name].state == 'off')
              return "#dddddd"; // grey
            else
              return "#ff5252"; // red
          if (states[entity_name].attributes['hvac_action'] == 'heating')
            return "#ff5252"; // red
          if (states[entity_name].attributes['preset_mode'] == 'away')
            return "#dec362"; // yellow
          if (states[entity_name].attributes['hvac_action'] == 'idle')
            return "#73d16b"; // green
          if (states[entity_name].state == 'off')
            return "#dddddd"; // grey
          if (states[variables.entity_climate].attributes['hvac_action'] == null)
            return "#6ba5d1"; // blue
          return "#ffffff"; // white
        ]]]
  grid:
    - grid-template-areas: >-
        "n n n" "current_temperature current_temperature setpoint_title"
        "current_temperature current_temperature setpoint_value" "status status
        status" "mode mode mode" "demand demand2 battery3" "battery battery2
        battery2" "window1 window2 window2"
    - grid-template-columns: auto
    - grid-template-rows: min-content
  name:
    - color: black
    - font-size: 12px
    - justify-self: start
  custom_fields:
    current_temperature:
      - color: black
      - font-size: 30px
      - font-weight: bold
      - justify-self: start
    setpoint_title:
      - color: black
      - font-size: 10px
      - font-weight: normal
      - justify-self: start
      - font-style: italics
    setpoint_value:
      - color: black
      - margin-top: '-6px'
      - font-size: 17px
      - font-weight: normal
      - justify-self: start
      - font-style: italics
    status:
      - color: black
      - margin-top: 1px
      - font-size: 12px
      - font-weight: normal
      - justify-self: start
      - text-transform: capitalize
    mode:
      - color: black
      - font-style: italics
      - margin-top: 1px
      - font-size: 12px
      - font-weight: normal
      - justify-self: start
      - text-transform: capitalize
    demand:
      - color: black
      - font-size: 14px
      - font-weight: normal
      - justify-self: start
      - text-transform: capitalize
    battery:
      - color: black
      - font-size: 14px
      - font-weight: normal
      - justify-self: start
      - text-transform: capitalize
    demand2:
      - color: black
      - font-size: 14px
      - font-weight: normal
      - justify-self: start
      - text-transform: capitalize
    battery2:
      - color: black
      - font-size: 14px
      - font-weight: normal
      - justify-self: start
      - text-transform: capitalize
    battery3:
      - color: black
      - font-size: 14px
      - font-weight: normal
      - justify-self: start
      - text-transform: capitalize
    window1:
      - color: black
      - font-size: 12px
      - font-weight: normal
      - justify-self: start
      - text-transform: capitalize
    window2:
      - color: black
      - font-size: 12px
      - font-weight: normal
      - justify-self: start
      - text-transform: capitalize
custom_fields:
  current_temperature: |
    [[[
      return states[variables.entity_climate].attributes['current_temperature'] + "°C"
    ]]]
  setpoint_title: |
    [[[
      return "Setpoint"
    ]]]
  setpoint_value: |
    [[[
      return states[variables.entity_climate].attributes['temperature'] + "°C"
    ]]]
  status: |
    [[[
      var outputtext
      if (variables.entity_climate == 'water_heater.stored_hw')
        outputtext = states[variables.entity_climate].state + " - " + states[variables.entity_climate].attributes['operation_mode']
      else if (states[variables.entity_climate].attributes['hvac_action'] == null)
        outputtext = "On - " + states[variables.entity_climate].attributes['preset_mode'] 
      else
        outputtext = states[variables.entity_climate].attributes['hvac_action'] + " - " + states[variables.entity_climate].attributes['preset_mode']
      return outputtext
    ]]]
  mode: |
    [[[
      if ((states[variables.entity_climate].attributes['preset_mode'] != null) && (states[variables.entity_climate].attributes['preset_mode'] == "temporary") )
        if ((states[variables.entity_climate].attributes['mode'] != null))
          return "Until: " + states[variables.entity_climate].attributes['mode']['until']
        else
          return "No Mode Data"
      else
        if ((states[variables.entity_climate].attributes['mode'] != null))
          return states[variables.entity_climate].attributes['mode']['mode'].split('_').join(' ')
        else
          return "No Mode Data"
    ]]]
  demand: |
    [[[
      var returnstring = "<small>Kitchen</small><br><ha-icon icon='mdi:fire' style='width: 12px; height: 12px; color: black;'></ha-icon>&nbsp;"
      if (states[variables.entity_heat_demand].state == null)
        return returnstring + "?"
      else
        return returnstring + states[variables.entity_heat_demand].state + "%"
    ]]]
  battery: |
    [[[
      var returnstring = "<ha-icon icon='mdi:battery-high' style='width: 12px; height: 12px; color: black;'></ha-icon>&nbsp;"
      if (states[variables.entity_battery].attributes['battery_level'] == null)
        return returnstring + "?"
      else
        return returnstring + states[variables.entity_battery].attributes['battery_level']*100 + "%"
    ]]]
  demand2: |
    [[[
      var returnstring = "<small>Dining</small><br><ha-icon icon='mdi:fire' style='width: 12px; height: 12px; color: black;'></ha-icon>&nbsp;"
      if (states[variables.entity_heat_demand2].state == null)
        return returnstring + "?"
      else
        return returnstring + Math.round(states[variables.entity_heat_demand2].state) + "%"
    ]]]
  battery2: |
    [[[
      var returnstring = "<ha-icon icon='mdi:battery-high' style='width: 12px; height: 12px; color: black;'></ha-icon>&nbsp;"
      if (states[variables.entity_battery2].attributes['battery_level'] == null)
        return returnstring + "?"
      else
        return returnstring + states[variables.entity_battery2].attributes['battery_level']*100 + "%"
    ]]]
  battery3: |
    [[[
      var returnstring = "<small>Stat</small><br><ha-icon icon='mdi:battery-high' style='width: 12px; height: 12px; color: black;'></ha-icon>&nbsp;"
      if (states[variables.entity_battery3].attributes['battery_level'] == null)
        return returnstring + "?"
      else
        return returnstring + Math.round(states[variables.entity_battery3].attributes['battery_level']*100) + "%"
    ]]]
  window1: |
    [[[
      var returnstring = "<ha-icon icon='mdi:window-open' style='width: 12px; height: 12px; color: black;'></ha-icon>&nbsp;"
      if (states[variables.entity_window1].attributes['device_id'] == null)
        return "<br>"
      else
        if(states[variables.entity_window1].state == 'on')
          return returnstring + 'Open'
        else
          return returnstring + 'Closed'
    ]]]
  window2: |
    [[[
      var returnstring = "<ha-icon icon='mdi:window-open' style='width: 12px; height: 12px; color: black;'></ha-icon>&nbsp;"
      if (states[variables.entity_window2].attributes['device_id'] == null)
        return "<br>"
      else
        if(states[variables.entity_window2].state == 'on')
          return returnstring + 'Open'
        else
          return returnstring + 'Closed'
    ]]]