Skip to content

HA Custom Cards by @Galaxy Explorer

Sam Reed edited this page Sep 26, 2023 · 9 revisions

Zone Card

Design inspired by the Evohome controller.

Card features include;

  • Dynamic colour bands and icons
  • Tooltips with climate modes and preset data
  • Configurable number of zones
  • Clickable button to view climate entity
  • Dark and light theme support
  • Simple implementation

ha_zone_card

Above example with nine zones displayed


Prerequisites


Single Zone Example

The below code block is for a one zone called "living_room". Simply create a new manual lovelace card and copy the code block and then update the climate entity for your zone in just two (2) places, that's it. For a more complete installation see the nine zone example beneath.

type: custom:stack-in-card
keep:
  background: 'true'
cards:
  - type: custom:button-card
    entity: climate.living_room
    name: |
      [[[ return entity.attributes.friendly_name; ]]]
    show_name: true
    show_state: false
    show_icon: false
    show_label: true
    label: |
      [[[ return entity.attributes.current_temperature + ' °C'; ]]]
    tooltip: |
      [[[ return 'Preset Mode (' + entity.attributes.preset_mode + ') '; ]]]
    styles:
      card:
        - height: 100px
      label:
        - font-size: 28px
      name:
        - font-size: 16px
        - padding: 0px 0px 10px 0px
      tooltip:
        - font-size: 12px
  - type: custom:button-card
    entity: climate.living_room
    name: Setpoint
    show_name: false
    show_state: false
    show_icon: true
    show_label: true
    color_type: card
    layout: icon_label
    size: 100%
    icon: |
      [[[
        if (entity.attributes.hvac_action == 'off') return 'mdi:power';
        if (entity.attributes.mode.mode == 'temporary_override') return 'mdi:timer';
        if (entity.attributes.mode.mode == 'permanent_override') return 'mdi:autorenew';
        if (entity.attributes.preset_mode == 'eco') return 'mdi:home-analytics';
        if (entity.attributes.preset_mode == 'home') return 'mdi:home-account';
        if (entity.attributes.preset_mode == 'away') return 'mdi:plane-car';
        if (entity.attributes.preset_mode == 'custom') return 'mdi:cog';
        else return 'mdi:radiator';
      ]]]
    label: |
      [[[ return entity.attributes.temperature + ' °C'; ]]]
    tooltip: |
      [[[ return 'Climate Mode (' + entity.attributes.mode.mode + ') '; ]]]
    styles:
      card:
        - height: 36px
        - font-size: 16px
        - color: '#FAFAFA'
        - background-color: |
            [[[
              if (entity.attributes.temperature < '5') return 'dimgray';
              if (entity.attributes.temperature >= '5' && entity.attributes.temperature < '16') return 'steelblue';
              if (entity.attributes.temperature >= '16' && entity.attributes.temperature < '18.5') return 'seagreen';
              if (entity.attributes.temperature >= '18.5' && entity.attributes.temperature < '21.5') return 'darkorange';
              if (entity.attributes.temperature >= '21.5') return 'firebrick';
              else return 'indigo';
            ]]]
      tooltip:
        - font-size: 12px

Multi Zone Example

As above create a new manual lovelace card and copy the code block and then update the climate "living_room" entities with your own. It is easier just to save the manual card first and then re-edit using the GUI configuration, that way you can see the graphical updates as you update the entities. The number of zones can be increased or decreased as required.

type: grid
title: Evohome Zone Card
square: false
columns: 3
cards:
  - type: custom:stack-in-card
    keep:
      background: 'true'
    cards:
      - type: custom:button-card
        entity: climate.living_room
        name: |
          [[[ return entity.attributes.friendly_name; ]]]
        show_name: true
        show_state: false
        show_icon: false
        show_label: true
        label: |
          [[[ return entity.attributes.current_temperature + ' °C'; ]]]
        tooltip: |
          [[[ return 'Preset Mode (' + entity.attributes.preset_mode + ') '; ]]]
        styles:
          card:
            - height: 100px
          label:
            - font-size: 28px
          name:
            - font-size: 16px
            - padding: 0px 0px 10px 0px
          tooltip:
            - font-size: 12px
      - type: custom:button-card
        entity: climate.living_room
        name: Setpoint
        show_name: false
        show_state: false
        show_icon: true
        show_label: true
        color_type: card
        layout: icon_label
        size: 100%
        icon: |
          [[[
            if (entity.attributes.hvac_action == 'off') return 'mdi:power';
            if (entity.attributes.mode.mode == 'temporary_override') return 'mdi:timer';
            if (entity.attributes.mode.mode == 'permanent_override') return 'mdi:autorenew';
            if (entity.attributes.preset_mode == 'eco') return 'mdi:home-analytics';
            if (entity.attributes.preset_mode == 'home') return 'mdi:home-account';
            if (entity.attributes.preset_mode == 'away') return 'mdi:plane-car';
            if (entity.attributes.preset_mode == 'custom') return 'mdi:cog';
            else return 'mdi:radiator';
          ]]]
        label: |
          [[[ return entity.attributes.temperature + ' °C'; ]]]
        tooltip: |
          [[[ return 'Climate Mode (' + entity.attributes.mode.mode + ') '; ]]]
        styles:
          card:
            - height: 36px
            - font-size: 16px
            - color: '#FAFAFA'
            - background-color: |
                [[[
                  if (entity.attributes.temperature < '5') return 'dimgray';
                  if (entity.attributes.temperature >= '5' && entity.attributes.temperature < '16') return 'steelblue';
                  if (entity.attributes.temperature >= '16' && entity.attributes.temperature < '18.5') return 'seagreen';
                  if (entity.attributes.temperature >= '18.5' && entity.attributes.temperature < '21.5') return 'darkorange';
                  if (entity.attributes.temperature >= '21.5') return 'firebrick';
                  else return 'indigo';
                ]]]
          tooltip:
            - font-size: 12px
  - type: custom:stack-in-card
    keep:
      background: 'true'
    cards:
      - type: custom:button-card
        entity: climate.living_room
        name: |
          [[[ return entity.attributes.friendly_name; ]]]
        show_name: true
        show_state: false
        show_icon: false
        show_label: true
        label: |
          [[[ return entity.attributes.current_temperature + ' °C'; ]]]
        tooltip: |
          [[[ return 'Preset Mode (' + entity.attributes.preset_mode + ') '; ]]]
        styles:
          card:
            - height: 100px
          label:
            - font-size: 28px
          name:
            - font-size: 16px
            - padding: 0px 0px 10px 0px
          tooltip:
            - font-size: 12px
      - type: custom:button-card
        entity: climate.living_room
        name: Setpoint
        show_name: false
        show_state: false
        show_icon: true
        show_label: true
        color_type: card
        layout: icon_label
        size: 100%
        icon: |
          [[[
            if (entity.attributes.hvac_action == 'off') return 'mdi:power';
            if (entity.attributes.mode.mode == 'temporary_override') return 'mdi:timer';
            if (entity.attributes.mode.mode == 'permanent_override') return 'mdi:autorenew';
            if (entity.attributes.preset_mode == 'eco') return 'mdi:home-analytics';
            if (entity.attributes.preset_mode == 'home') return 'mdi:home-account';
            if (entity.attributes.preset_mode == 'away') return 'mdi:plane-car';
            if (entity.attributes.preset_mode == 'custom') return 'mdi:cog';
            else return 'mdi:radiator';
          ]]]
        label: |
          [[[ return entity.attributes.temperature + ' °C'; ]]]
        tooltip: |
          [[[ return 'Climate Mode (' + entity.attributes.mode.mode + ') '; ]]]
        styles:
          card:
            - height: 36px
            - font-size: 16px
            - color: '#FAFAFA'
            - background-color: |
                [[[
                  if (entity.attributes.temperature < '5') return 'dimgray';
                  if (entity.attributes.temperature >= '5' && entity.attributes.temperature < '16') return 'steelblue';
                  if (entity.attributes.temperature >= '16' && entity.attributes.temperature < '18.5') return 'seagreen';
                  if (entity.attributes.temperature >= '18.5' && entity.attributes.temperature < '21.5') return 'darkorange';
                  if (entity.attributes.temperature >= '21.5') return 'firebrick';
                  else return 'indigo';
                ]]]
          tooltip:
            - font-size: 12px
  - type: custom:stack-in-card
    keep:
      background: 'true'
    cards:
      - type: custom:button-card
        entity: climate.living_room
        name: |
          [[[ return entity.attributes.friendly_name; ]]]
        show_name: true
        show_state: false
        show_icon: false
        show_label: true
        label: |
          [[[ return entity.attributes.current_temperature + ' °C'; ]]]
        tooltip: |
          [[[ return 'Preset Mode (' + entity.attributes.preset_mode + ') '; ]]]
        styles:
          card:
            - height: 100px
          label:
            - font-size: 28px
          name:
            - font-size: 16px
            - padding: 0px 0px 10px 0px
          tooltip:
            - font-size: 12px
      - type: custom:button-card
        entity: climate.living_room
        name: Setpoint
        show_name: false
        show_state: false
        show_icon: true
        show_label: true
        color_type: card
        layout: icon_label
        size: 100%
        icon: |
          [[[
            if (entity.attributes.hvac_action == 'off') return 'mdi:power';
            if (entity.attributes.mode.mode == 'temporary_override') return 'mdi:timer';
            if (entity.attributes.mode.mode == 'permanent_override') return 'mdi:autorenew';
            if (entity.attributes.preset_mode == 'eco') return 'mdi:home-analytics';
            if (entity.attributes.preset_mode == 'home') return 'mdi:home-account';
            if (entity.attributes.preset_mode == 'away') return 'mdi:plane-car';
            if (entity.attributes.preset_mode == 'custom') return 'mdi:cog';
            else return 'mdi:radiator';
          ]]]
        label: |
          [[[ return entity.attributes.temperature + ' °C'; ]]]
        tooltip: |
          [[[ return 'Climate Mode (' + entity.attributes.mode.mode + ') '; ]]]
        styles:
          card:
            - height: 36px
            - font-size: 16px
            - color: '#FAFAFA'
            - background-color: |
                [[[
                  if (entity.attributes.temperature < '5') return 'dimgray';
                  if (entity.attributes.temperature >= '5' && entity.attributes.temperature < '16') return 'steelblue';
                  if (entity.attributes.temperature >= '16' && entity.attributes.temperature < '18.5') return 'seagreen';
                  if (entity.attributes.temperature >= '18.5' && entity.attributes.temperature < '21.5') return 'darkorange';
                  if (entity.attributes.temperature >= '21.5') return 'firebrick';
                  else return 'indigo';
                ]]]
          tooltip:
            - font-size: 12px
  - type: custom:stack-in-card
    keep:
      background: 'true'
    cards:
      - type: custom:button-card
        entity: climate.living_room
        name: |
          [[[ return entity.attributes.friendly_name; ]]]
        show_name: true
        show_state: false
        show_icon: false
        show_label: true
        label: |
          [[[ return entity.attributes.current_temperature + ' °C'; ]]]
        tooltip: |
          [[[ return 'Preset Mode (' + entity.attributes.preset_mode + ') '; ]]]
        styles:
          card:
            - height: 100px
          label:
            - font-size: 28px
          name:
            - font-size: 16px
            - padding: 0px 0px 10px 0px
          tooltip:
            - font-size: 12px
      - type: custom:button-card
        entity: climate.living_room
        name: Setpoint
        show_name: false
        show_state: false
        show_icon: true
        show_label: true
        color_type: card
        layout: icon_label
        size: 100%
        icon: |
          [[[
            if (entity.attributes.hvac_action == 'off') return 'mdi:power';
            if (entity.attributes.mode.mode == 'temporary_override') return 'mdi:timer';
            if (entity.attributes.mode.mode == 'permanent_override') return 'mdi:autorenew';
            if (entity.attributes.preset_mode == 'eco') return 'mdi:home-analytics';
            if (entity.attributes.preset_mode == 'home') return 'mdi:home-account';
            if (entity.attributes.preset_mode == 'away') return 'mdi:plane-car';
            if (entity.attributes.preset_mode == 'custom') return 'mdi:cog';
            else return 'mdi:radiator';
          ]]]
        label: |
          [[[ return entity.attributes.temperature + ' °C'; ]]]
        tooltip: |
          [[[ return 'Climate Mode (' + entity.attributes.mode.mode + ') '; ]]]
        styles:
          card:
            - height: 36px
            - font-size: 16px
            - color: '#FAFAFA'
            - background-color: |
                [[[
                  if (entity.attributes.temperature < '5') return 'dimgray';
                  if (entity.attributes.temperature >= '5' && entity.attributes.temperature < '16') return 'steelblue';
                  if (entity.attributes.temperature >= '16' && entity.attributes.temperature < '18.5') return 'seagreen';
                  if (entity.attributes.temperature >= '18.5' && entity.attributes.temperature < '21.5') return 'darkorange';
                  if (entity.attributes.temperature >= '21.5') return 'firebrick';
                  else return 'indigo';
                ]]]
          tooltip:
            - font-size: 12px
  - type: custom:stack-in-card
    keep:
      background: 'true'
    cards:
      - type: custom:button-card
        entity: climate.living_room
        name: |
          [[[ return entity.attributes.friendly_name; ]]]
        show_name: true
        show_state: false
        show_icon: false
        show_label: true
        label: |
          [[[ return entity.attributes.current_temperature + ' °C'; ]]]
        tooltip: |
          [[[ return 'Preset Mode (' + entity.attributes.preset_mode + ') '; ]]]
        styles:
          card:
            - height: 100px
          label:
            - font-size: 28px
          name:
            - font-size: 16px
            - padding: 0px 0px 10px 0px
          tooltip:
            - font-size: 12px
      - type: custom:button-card
        entity: climate.living_room
        name: Setpoint
        show_name: false
        show_state: false
        show_icon: true
        show_label: true
        color_type: card
        layout: icon_label
        size: 100%
        icon: |
          [[[
            if (entity.attributes.hvac_action == 'off') return 'mdi:power';
            if (entity.attributes.mode.mode == 'temporary_override') return 'mdi:timer';
            if (entity.attributes.mode.mode == 'permanent_override') return 'mdi:autorenew';
            if (entity.attributes.preset_mode == 'eco') return 'mdi:home-analytics';
            if (entity.attributes.preset_mode == 'home') return 'mdi:home-account';
            if (entity.attributes.preset_mode == 'away') return 'mdi:plane-car';
            if (entity.attributes.preset_mode == 'custom') return 'mdi:cog';
            else return 'mdi:radiator';
          ]]]
        label: |
          [[[ return entity.attributes.temperature + ' °C'; ]]]
        tooltip: |
          [[[ return 'Climate Mode (' + entity.attributes.mode.mode + ') '; ]]]
        styles:
          card:
            - height: 36px
            - font-size: 16px
            - color: '#FAFAFA'
            - background-color: |
                [[[
                  if (entity.attributes.temperature < '5') return 'dimgray';
                  if (entity.attributes.temperature >= '5' && entity.attributes.temperature < '16') return 'steelblue';
                  if (entity.attributes.temperature >= '16' && entity.attributes.temperature < '18.5') return 'seagreen';
                  if (entity.attributes.temperature >= '18.5' && entity.attributes.temperature < '21.5') return 'darkorange';
                  if (entity.attributes.temperature >= '21.5') return 'firebrick';
                  else return 'indigo';
                ]]]
          tooltip:
            - font-size: 12px
  - type: custom:stack-in-card
    keep:
      background: 'true'
    cards:
      - type: custom:button-card
        entity: climate.living_room
        name: |
          [[[ return entity.attributes.friendly_name; ]]]
        show_name: true
        show_state: false
        show_icon: false
        show_label: true
        label: |
          [[[ return entity.attributes.current_temperature + ' °C'; ]]]
        tooltip: |
          [[[ return 'Preset Mode (' + entity.attributes.preset_mode + ') '; ]]]
        styles:
          card:
            - height: 100px
          label:
            - font-size: 28px
          name:
            - font-size: 16px
            - padding: 0px 0px 10px 0px
          tooltip:
            - font-size: 12px
      - type: custom:button-card
        entity: climate.living_room
        name: Setpoint
        show_name: false
        show_state: false
        show_icon: true
        show_label: true
        color_type: card
        layout: icon_label
        size: 100%
        icon: |
          [[[
            if (entity.attributes.hvac_action == 'off') return 'mdi:power';
            if (entity.attributes.mode.mode == 'temporary_override') return 'mdi:timer';
            if (entity.attributes.mode.mode == 'permanent_override') return 'mdi:autorenew';
            if (entity.attributes.preset_mode == 'eco') return 'mdi:home-analytics';
            if (entity.attributes.preset_mode == 'home') return 'mdi:home-account';
            if (entity.attributes.preset_mode == 'away') return 'mdi:plane-car';
            if (entity.attributes.preset_mode == 'custom') return 'mdi:cog';
            else return 'mdi:radiator';
          ]]]
        label: |
          [[[ return entity.attributes.temperature + ' °C'; ]]]
        tooltip: |
          [[[ return 'Climate Mode (' + entity.attributes.mode.mode + ') '; ]]]
        styles:
          card:
            - height: 36px
            - font-size: 16px
            - color: '#FAFAFA'
            - background-color: |
                [[[
                  if (entity.attributes.temperature < '5') return 'dimgray';
                  if (entity.attributes.temperature >= '5' && entity.attributes.temperature < '16') return 'steelblue';
                  if (entity.attributes.temperature >= '16' && entity.attributes.temperature < '18.5') return 'seagreen';
                  if (entity.attributes.temperature >= '18.5' && entity.attributes.temperature < '21.5') return 'darkorange';
                  if (entity.attributes.temperature >= '21.5') return 'firebrick';
                  else return 'indigo';
                ]]]
          tooltip:
            - font-size: 12px
  - type: custom:stack-in-card
    keep:
      background: 'true'
    cards:
      - type: custom:button-card
        entity: climate.living_room
        name: |
          [[[ return entity.attributes.friendly_name; ]]]
        show_name: true
        show_state: false
        show_icon: false
        show_label: true
        label: |
          [[[ return entity.attributes.current_temperature + ' °C'; ]]]
        tooltip: |
          [[[ return 'Preset Mode (' + entity.attributes.preset_mode + ') '; ]]]
        styles:
          card:
            - height: 100px
          label:
            - font-size: 28px
          name:
            - font-size: 16px
            - padding: 0px 0px 10px 0px
          tooltip:
            - font-size: 12px
      - type: custom:button-card
        entity: climate.living_room
        name: Setpoint
        show_name: false
        show_state: false
        show_icon: true
        show_label: true
        color_type: card
        layout: icon_label
        size: 100%
        icon: |
          [[[
            if (entity.attributes.hvac_action == 'off') return 'mdi:power';
            if (entity.attributes.mode.mode == 'temporary_override') return 'mdi:timer';
            if (entity.attributes.mode.mode == 'permanent_override') return 'mdi:autorenew';
            if (entity.attributes.preset_mode == 'eco') return 'mdi:home-analytics';
            if (entity.attributes.preset_mode == 'home') return 'mdi:home-account';
            if (entity.attributes.preset_mode == 'away') return 'mdi:plane-car';
            if (entity.attributes.preset_mode == 'custom') return 'mdi:cog';
            else return 'mdi:radiator';
          ]]]
        label: |
          [[[ return entity.attributes.temperature + ' °C'; ]]]
        tooltip: |
          [[[ return 'Climate Mode (' + entity.attributes.mode.mode + ') '; ]]]
        styles:
          card:
            - height: 36px
            - font-size: 16px
            - color: '#FAFAFA'
            - background-color: |
                [[[
                  if (entity.attributes.temperature < '5') return 'dimgray';
                  if (entity.attributes.temperature >= '5' && entity.attributes.temperature < '16') return 'steelblue';
                  if (entity.attributes.temperature >= '16' && entity.attributes.temperature < '18.5') return 'seagreen';
                  if (entity.attributes.temperature >= '18.5' && entity.attributes.temperature < '21.5') return 'darkorange';
                  if (entity.attributes.temperature >= '21.5') return 'firebrick';
                  else return 'indigo';
                ]]]
          tooltip:
            - font-size: 12px
  - type: custom:stack-in-card
    keep:
      background: 'true'
    cards:
      - type: custom:button-card
        entity: climate.living_room
        name: |
          [[[ return entity.attributes.friendly_name; ]]]
        show_name: true
        show_state: false
        show_icon: false
        show_label: true
        label: |
          [[[ return entity.attributes.current_temperature + ' °C'; ]]]
        tooltip: |
          [[[ return 'Preset Mode (' + entity.attributes.preset_mode + ') '; ]]]
        styles:
          card:
            - height: 100px
          label:
            - font-size: 28px
          name:
            - font-size: 16px
            - padding: 0px 0px 10px 0px
          tooltip:
            - font-size: 12px
      - type: custom:button-card
        entity: climate.living_room
        name: Setpoint
        show_name: false
        show_state: false
        show_icon: true
        show_label: true
        color_type: card
        layout: icon_label
        size: 100%
        icon: |
          [[[
            if (entity.attributes.hvac_action == 'off') return 'mdi:power';
            if (entity.attributes.mode.mode == 'temporary_override') return 'mdi:timer';
            if (entity.attributes.mode.mode == 'permanent_override') return 'mdi:autorenew';
            if (entity.attributes.preset_mode == 'eco') return 'mdi:home-analytics';
            if (entity.attributes.preset_mode == 'home') return 'mdi:home-account';
            if (entity.attributes.preset_mode == 'away') return 'mdi:plane-car';
            if (entity.attributes.preset_mode == 'custom') return 'mdi:cog';
            else return 'mdi:radiator';
          ]]]
        label: |
          [[[ return entity.attributes.temperature + ' °C'; ]]]
        tooltip: |
          [[[ return 'Climate Mode (' + entity.attributes.mode.mode + ') '; ]]]
        styles:
          card:
            - height: 36px
            - font-size: 16px
            - color: '#FAFAFA'
            - background-color: |
                [[[
                  if (entity.attributes.temperature < '5') return 'dimgray';
                  if (entity.attributes.temperature >= '5' && entity.attributes.temperature < '16') return 'steelblue';
                  if (entity.attributes.temperature >= '16' && entity.attributes.temperature < '18.5') return 'seagreen';
                  if (entity.attributes.temperature >= '18.5' && entity.attributes.temperature < '21.5') return 'darkorange';
                  if (entity.attributes.temperature >= '21.5') return 'firebrick';
                  else return 'indigo';
                ]]]
          tooltip:
            - font-size: 12px
  - type: custom:stack-in-card
    keep:
      background: 'true'
    cards:
      - type: custom:button-card
        entity: climate.living_room
        name: |
          [[[ return entity.attributes.friendly_name; ]]]
        show_name: true
        show_state: false
        show_icon: false
        show_label: true
        label: |
          [[[ return entity.attributes.current_temperature + ' °C'; ]]]
        tooltip: |
          [[[ return 'Preset Mode (' + entity.attributes.preset_mode + ') '; ]]]
        styles:
          card:
            - height: 100px
          label:
            - font-size: 28px
          name:
            - font-size: 16px
            - padding: 0px 0px 10px 0px
          tooltip:
            - font-size: 12px
      - type: custom:button-card
        entity: climate.living_room
        name: Setpoint
        show_name: false
        show_state: false
        show_icon: true
        show_label: true
        color_type: card
        layout: icon_label
        size: 100%
        icon: |
          [[[
            if (entity.attributes.hvac_action == 'off') return 'mdi:power';
            if (entity.attributes.mode.mode == 'temporary_override') return 'mdi:timer';
            if (entity.attributes.mode.mode == 'permanent_override') return 'mdi:autorenew';
            if (entity.attributes.preset_mode == 'eco') return 'mdi:home-analytics';
            if (entity.attributes.preset_mode == 'home') return 'mdi:home-account';
            if (entity.attributes.preset_mode == 'away') return 'mdi:plane-car';
            if (entity.attributes.preset_mode == 'custom') return 'mdi:cog';
            else return 'mdi:radiator';
          ]]]
        label: |
          [[[ return entity.attributes.temperature + ' °C'; ]]]
        tooltip: |
          [[[ return 'Climate Mode (' + entity.attributes.mode.mode + ') '; ]]]
        styles:
          card:
            - height: 36px
            - font-size: 16px
            - color: '#FAFAFA'
            - background-color: |
                [[[
                  if (entity.attributes.temperature < '5') return 'dimgray';
                  if (entity.attributes.temperature >= '5' && entity.attributes.temperature < '16') return 'steelblue';
                  if (entity.attributes.temperature >= '16' && entity.attributes.temperature < '18.5') return 'seagreen';
                  if (entity.attributes.temperature >= '18.5' && entity.attributes.temperature < '21.5') return 'darkorange';
                  if (entity.attributes.temperature >= '21.5') return 'firebrick';
                  else return 'indigo';
                ]]]
          tooltip:
            - font-size: 12px

Schedule Card

Zone schedule switchpoints shown in a grid

ramses_cc _zone_schedule


Prerequisites


Zone Schedule Example

Create a new manual lovelace card and copy the code block and then update the climate entity on line 2 for your given zone. Repeat the process for each zone.

type: custom:button-card
entity: climate.dining_room
show_icon: false
show_state: false
show_name: false
show_label: true
label: |
  [[[ return entity.attributes.friendly_name; ]]]
styles:
  grid:
    - grid-template-columns: 1.3fr 1fr 1fr 1fr 1fr
    - grid-template-rows: auto
    - grid-template-areas: |
        "l l l l l"
        ". am_title am_title pm_title pm_title"
        "day_0 day_0_time_1 day_0_setpoint_1 day_0_time_3 day_0_setpoint_3"
        "day_0 day_0_time_2 day_0_setpoint_2 day_0_time_4 day_0_setpoint_4"
        "day_1 day_1_time_1 day_1_setpoint_1 day_1_time_3 day_1_setpoint_3"
        "day_1 day_1_time_2 day_1_setpoint_2 day_1_time_4 day_1_setpoint_4"
        "day_2 day_2_time_1 day_2_setpoint_1 day_2_time_3 day_2_setpoint_3"
        "day_2 day_2_time_2 day_2_setpoint_2 day_2_time_4 day_2_setpoint_4"
        "day_3 day_3_time_1 day_3_setpoint_1 day_3_time_3 day_3_setpoint_3"
        "day_3 day_3_time_2 day_3_setpoint_2 day_3_time_4 day_3_setpoint_4"
        "day_4 day_4_time_1 day_4_setpoint_1 day_4_time_3 day_4_setpoint_3"
        "day_4 day_4_time_2 day_4_setpoint_2 day_4_time_4 day_4_setpoint_4"
        "day_5 day_5_time_1 day_5_setpoint_1 day_5_time_3 day_5_setpoint_3"
        "day_5 day_5_time_2 day_5_setpoint_2 day_5_time_4 day_5_setpoint_4"
        "day_6 day_6_time_1 day_6_setpoint_1 day_6_time_3 day_6_setpoint_3"
        "day_6 day_6_time_2 day_6_setpoint_2 day_6_time_4 day_6_setpoint_4"
    - width: 480px
    - height: 450px
    - padding: 20px
  card:
    - width: 100%
    - height: 480px
    - padding: 0px
    - font-size: 16px
  label:
    - font-size: 22px
    - justify-self: start
    - padding-left: 10px
    - padding-bottom: 10px
  custom_fields:
    am_title:
      - border-bottom-style: solid
      - border-bottom-width: 2px
      - border-color: var(--divider-color)
    pm_title:
      - border-bottom-style: solid
      - border-bottom-width: 2px
      - border-color: var(--divider-color)
    day_0:
      - justify-self: end
      - padding-right: 10px
    day_1:
      - justify-self: end
      - padding-right: 10px
    day_2:
      - justify-self: end
      - padding-right: 10px
    day_3:
      - justify-self: end
      - padding-right: 10px
    day_4:
      - justify-self: end
      - padding-right: 10px
    day_5:
      - justify-self: end
      - padding-right: 10px
    day_6:
      - justify-self: end
      - padding-right: 10px
    day_0_time_2:
      - border-bottom-style: solid
      - border-bottom-width: 2px
      - border-color: var(--divider-color)
    day_0_setpoint_2:
      - border-bottom-style: solid
      - border-bottom-width: 2px
      - border-color: var(--divider-color)
    day_0_time_4:
      - border-bottom-style: solid
      - border-bottom-width: 2px
      - border-color: var(--divider-color)
    day_0_setpoint_4:
      - border-bottom-style: solid
      - border-bottom-width: 2px
      - border-color: var(--divider-color)
    day_1_time_2:
      - border-bottom-style: solid
      - border-bottom-width: 2px
      - border-color: var(--divider-color)
    day_1_setpoint_2:
      - border-bottom-style: solid
      - border-bottom-width: 2px
      - border-color: var(--divider-color)
    day_1_time_4:
      - border-bottom-style: solid
      - border-bottom-width: 2px
      - border-color: var(--divider-color)
    day_1_setpoint_4:
      - border-bottom-style: solid
      - border-bottom-width: 2px
      - border-color: var(--divider-color)
    day_2_time_2:
      - border-bottom-style: solid
      - border-bottom-width: 2px
      - border-color: var(--divider-color)
    day_2_setpoint_2:
      - border-bottom-style: solid
      - border-bottom-width: 2px
      - border-color: var(--divider-color)
    day_2_time_4:
      - border-bottom-style: solid
      - border-bottom-width: 2px
      - border-color: var(--divider-color)
    day_2_setpoint_4:
      - border-bottom-style: solid
      - border-bottom-width: 2px
      - border-color: var(--divider-color)
    day_3_time_2:
      - border-bottom-style: solid
      - border-bottom-width: 2px
      - border-color: var(--divider-color)
    day_3_setpoint_2:
      - border-bottom-style: solid
      - border-bottom-width: 2px
      - border-color: var(--divider-color)
    day_3_time_4:
      - border-bottom-style: solid
      - border-bottom-width: 2px
      - border-color: var(--divider-color)
    day_3_setpoint_4:
      - border-bottom-style: solid
      - border-bottom-width: 2px
      - border-color: var(--divider-color)
    day_4_time_2:
      - border-bottom-style: solid
      - border-bottom-width: 2px
      - border-color: var(--divider-color)
    day_4_setpoint_2:
      - border-bottom-style: solid
      - border-bottom-width: 2px
      - border-color: var(--divider-color)
    day_4_time_4:
      - border-bottom-style: solid
      - border-bottom-width: 2px
      - border-color: var(--divider-color)
    day_4_setpoint_4:
      - border-bottom-style: solid
      - border-bottom-width: 2px
      - border-color: var(--divider-color)
    day_5_time_2:
      - border-bottom-style: solid
      - border-bottom-width: 2px
      - border-color: var(--divider-color)
    day_5_setpoint_2:
      - border-bottom-style: solid
      - border-bottom-width: 2px
      - border-color: var(--divider-color)
    day_5_time_4:
      - border-bottom-style: solid
      - border-bottom-width: 2px
      - border-color: var(--divider-color)
    day_5_setpoint_4:
      - border-bottom-style: solid
      - border-bottom-width: 2px
      - border-color: var(--divider-color)
custom_fields:
  am_title: AM
  pm_title: PM
  day_0: Monday
  day_0_time_1: |
    [[[ return entity.attributes.schedule[0].switchpoints[0].time_of_day; ]]]
  day_0_time_2: |
    [[[ return entity.attributes.schedule[0].switchpoints[1].time_of_day; ]]]
  day_0_time_3: |
    [[[ return entity.attributes.schedule[0].switchpoints[2].time_of_day; ]]]
  day_0_time_4: |
    [[[ return entity.attributes.schedule[0].switchpoints[3].time_of_day; ]]]
  day_0_setpoint_1: >
    [[[ return entity.attributes.schedule[0].switchpoints[0].heat_setpoint +
    '°C'; ]]]
  day_0_setpoint_2: >
    [[[ return entity.attributes.schedule[0].switchpoints[1].heat_setpoint +
    '°C'; ]]]
  day_0_setpoint_3: >
    [[[ return entity.attributes.schedule[0].switchpoints[2].heat_setpoint +
    '°C'; ]]]
  day_0_setpoint_4: >
    [[[ return entity.attributes.schedule[0].switchpoints[3].heat_setpoint +
    '°C'; ]]]
  day_1: Tuesday
  day_1_time_1: |
    [[[ return entity.attributes.schedule[1].switchpoints[0].time_of_day; ]]]
  day_1_time_2: |
    [[[ return entity.attributes.schedule[1].switchpoints[1].time_of_day; ]]]
  day_1_time_3: |
    [[[ return entity.attributes.schedule[1].switchpoints[2].time_of_day; ]]]
  day_1_time_4: |
    [[[ return entity.attributes.schedule[1].switchpoints[3].time_of_day; ]]]
  day_1_setpoint_1: >
    [[[ return entity.attributes.schedule[1].switchpoints[0].heat_setpoint +
    '°C'; ]]]
  day_1_setpoint_2: >
    [[[ return entity.attributes.schedule[1].switchpoints[1].heat_setpoint +
    '°C'; ]]]
  day_1_setpoint_3: >
    [[[ return entity.attributes.schedule[1].switchpoints[2].heat_setpoint +
    '°C'; ]]]
  day_1_setpoint_4: >
    [[[ return entity.attributes.schedule[1].switchpoints[3].heat_setpoint +
    '°C'; ]]]
  day_2: Wednesday
  day_2_time_1: |
    [[[ return entity.attributes.schedule[2].switchpoints[0].time_of_day; ]]]
  day_2_time_2: |
    [[[ return entity.attributes.schedule[2].switchpoints[1].time_of_day; ]]]
  day_2_time_3: |
    [[[ return entity.attributes.schedule[2].switchpoints[2].time_of_day; ]]]
  day_2_time_4: |
    [[[ return entity.attributes.schedule[2].switchpoints[3].time_of_day; ]]]
  day_2_setpoint_1: >
    [[[ return entity.attributes.schedule[2].switchpoints[0].heat_setpoint +
    '°C'; ]]]
  day_2_setpoint_2: >
    [[[ return entity.attributes.schedule[2].switchpoints[1].heat_setpoint +
    '°C'; ]]]
  day_2_setpoint_3: >
    [[[ return entity.attributes.schedule[2].switchpoints[2].heat_setpoint +
    '°C'; ]]]
  day_2_setpoint_4: >
    [[[ return entity.attributes.schedule[2].switchpoints[3].heat_setpoint +
    '°C'; ]]]
  day_3: Thursday
  day_3_time_1: |
    [[[ return entity.attributes.schedule[3].switchpoints[0].time_of_day; ]]]
  day_3_time_2: |
    [[[ return entity.attributes.schedule[3].switchpoints[1].time_of_day; ]]]
  day_3_time_3: |
    [[[ return entity.attributes.schedule[3].switchpoints[2].time_of_day; ]]]
  day_3_time_4: |
    [[[ return entity.attributes.schedule[3].switchpoints[3].time_of_day; ]]]
  day_3_setpoint_1: >
    [[[ return entity.attributes.schedule[3].switchpoints[0].heat_setpoint +
    '°C'; ]]]
  day_3_setpoint_2: >
    [[[ return entity.attributes.schedule[3].switchpoints[1].heat_setpoint +
    '°C'; ]]]
  day_3_setpoint_3: >
    [[[ return entity.attributes.schedule[3].switchpoints[2].heat_setpoint +
    '°C'; ]]]
  day_3_setpoint_4: >
    [[[ return entity.attributes.schedule[3].switchpoints[3].heat_setpoint +
    '°C'; ]]]
  day_4: Friday
  day_4_time_1: |
    [[[ return entity.attributes.schedule[4].switchpoints[0].time_of_day; ]]]
  day_4_time_2: |
    [[[ return entity.attributes.schedule[4].switchpoints[1].time_of_day; ]]]
  day_4_time_3: |
    [[[ return entity.attributes.schedule[4].switchpoints[2].time_of_day; ]]]
  day_4_time_4: |
    [[[ return entity.attributes.schedule[4].switchpoints[3].time_of_day; ]]]
  day_4_setpoint_1: >
    [[[ return entity.attributes.schedule[4].switchpoints[0].heat_setpoint +
    '°C'; ]]]
  day_4_setpoint_2: >
    [[[ return entity.attributes.schedule[4].switchpoints[1].heat_setpoint +
    '°C'; ]]]
  day_4_setpoint_3: >
    [[[ return entity.attributes.schedule[4].switchpoints[2].heat_setpoint +
    '°C'; ]]]
  day_4_setpoint_4: >
    [[[ return entity.attributes.schedule[4].switchpoints[3].heat_setpoint +
    '°C'; ]]]
  day_5: Saturday
  day_5_time_1: |
    [[[ return entity.attributes.schedule[5].switchpoints[0].time_of_day; ]]]
  day_5_time_2: |
    [[[ return entity.attributes.schedule[5].switchpoints[1].time_of_day; ]]]
  day_5_time_3: |
    [[[ return entity.attributes.schedule[5].switchpoints[2].time_of_day; ]]]
  day_5_time_4: |
    [[[ return entity.attributes.schedule[5].switchpoints[3].time_of_day; ]]]
  day_5_setpoint_1: >
    [[[ return entity.attributes.schedule[5].switchpoints[0].heat_setpoint +
    '°C'; ]]]
  day_5_setpoint_2: >
    [[[ return entity.attributes.schedule[5].switchpoints[1].heat_setpoint +
    '°C'; ]]]
  day_5_setpoint_3: >
    [[[ return entity.attributes.schedule[5].switchpoints[2].heat_setpoint +
    '°C'; ]]]
  day_5_setpoint_4: >
    [[[ return entity.attributes.schedule[5].switchpoints[3].heat_setpoint +
    '°C'; ]]]
  day_6: Sunday
  day_6_time_1: |
    [[[ return entity.attributes.schedule[6].switchpoints[0].time_of_day; ]]]
  day_6_time_2: |
    [[[ return entity.attributes.schedule[6].switchpoints[1].time_of_day; ]]]
  day_6_time_3: |
    [[[ return entity.attributes.schedule[6].switchpoints[2].time_of_day; ]]]
  day_6_time_4: |
    [[[ return entity.attributes.schedule[6].switchpoints[3].time_of_day; ]]]
  day_6_setpoint_1: >
    [[[ return entity.attributes.schedule[6].switchpoints[0].heat_setpoint +
    '°C'; ]]]
  day_6_setpoint_2: >
    [[[ return entity.attributes.schedule[6].switchpoints[1].heat_setpoint +
    '°C'; ]]]
  day_6_setpoint_3: >
    [[[ return entity.attributes.schedule[6].switchpoints[2].heat_setpoint +
    '°C'; ]]]
  day_6_setpoint_4: >
    [[[ return entity.attributes.schedule[6].switchpoints[3].heat_setpoint +
    '°C'; ]]]