Getting creative with Lovelace heading cards

Share your Projects!
,
1

A little thing I cooked up using the new heading card

This is the outcome

  • All entities are clickable (to more-info)
  • State coloring (and icons) for temp and humidity is KLUDGED (see the horrific way that has to be done as demonstrated in the release party)
  • next steps…
    – Group by floors
    – Add aggregated (templated ) readings for the floors
    – Sort rooms by walkthrough order
    – Implement sorting (with chips)

Protecting the names of the innocents :slight_smile: (except my old lady)

image
image472×588 38.2 KB

Using…

File: title_room_climate.yaml
This is the decluttering template

drop_the_anchors:

  # ----------------------------------
  # Reusable Tap-Action to More Info
  # ----------------------------------
  tap_action_more_info:
    <<: &tap_action_more_info
      tap_action:
        action: more-info
  # ----------------------------------
  # Reusable Admin Filter
  # ----------------------------------
  list_visibility_admin:
    <<: &list_visibility_admin
      visibility:
      - condition: user
        users:
        - 969d74402a041c71ee053a61383e31ee
        - 1664f1295cf93e8b763f30a58eaacda4

# This is the name of the decluttering template
title_room_climate:
  default:
  - area_id: 'library'
  - area_name: 'Library'
  card:

    type: heading
    heading: '[[area_name]]'
    heading_style: subtitle
    badges:

    - type: entity
      entity: 'sensor.climate_[[area_id]]_temperature_throttled'
      visibility:
      - condition: numeric_state
        entity: 'sensor.climate_[[area_id]]_temperature_throttled'
        above: -50
        below: 19
      color: light-blue
      icon: mdi:snowflake
      name: Cool
      <<: *tap_action_more_info

    - type: entity
      entity: 'sensor.climate_[[area_id]]_temperature_throttled'
      visibility:
      - condition: numeric_state
        entity: 'sensor.climate_[[area_id]]_temperature_throttled'
        above: 19
        below: 23
      color: amber
      name: Warm
      icon: mdi:sun-snowflake-variant
      <<: *tap_action_more_info

    - type: entity
      entity: 'sensor.climate_[[area_id]]_temperature_throttled'
      visibility:
      - condition: numeric_state
        entity: 'sensor.climate_[[area_id]]_temperature_throttled'
        above: 22.999
        below: 30
      color: red
      name: Hot
      icon: mdi:weather-sunny
      <<: *tap_action_more_info

    - type: entity
      entity: 'sensor.climate_[[area_id]]_humidity_throttled'
      color: light-blue
      <<: *tap_action_more_info


    - type: entity
      entity: 'sensor.climate_[[area_id]]_battery_throttled'
      color: state
      <<: *tap_action_more_info
      <<: *list_visibility_admin

File: custom_templates/cards/ae_climate_room_list.jinja
This is the jinga custom template that fetches and ‘massages’ the data

This macro in turn uses other macros to filter down the areas to a list of ‘real rooms’, excluding ‘rooms’ like ‘person’, ‘system’ (we all have those right?)

{%- macro ae_title_room_climate() -%}
    {%- from 'rooms.jinja' import get_real_rooms -%}
    {%- set rooms = get_real_rooms().split(',')|list -%}
    {%- set ns = namespace(cards=[]) -%}
    {% for room_id in rooms -%}
        {%- set entity_temperature_throttled = 'sensor.climate_{}_temperature_throttled'.format(room_id) -%}
        {% if not has_value(entity_temperature_throttled) -%}
            {% continue -%}
        {% endif -%}
        {%- set ns.cards = ns.cards + [
            dict(
                type = 'custom:decluttering-card',
                template = 'title_room_climate',
                variables = [ dict( area_id = room_id), dict(area_name = area_name(room_id) ) ],
            )
        ] -%}
    {%- endfor %}
    {{- ns.cards|list|to_json() -}}
{%- endmacro -%}

This is what the jinja ouitputs

[
  {
    "type": "custom:decluttering-card",
    "template": "title_room_climate",
    "variables": [
      {
        "area_id": "kitchen"
      },
      {
        "area_name": "Kitchen"
      }
    ]
  },
  {
    "type": "custom:decluttering-card",
    "template": "title_room_climate",
    "variables": [
      {
        "area_id": "landing"
      },
      {
        "area_name": "Hallway Landing"
      }
    ]
  },
]

File: custom_templates/cards/ae_climate_room_list.jinja
This is the Lovelace YAML that consumes the jinja template output


# ---------------------------------------------------------------------------------------------
# Room Climate Grid
# ---------------------------------------------------------------------------------------------
type: vertical-stack
cards:
- type: heading
  heading: Climate (Rooms)
- type: custom:auto-entities
  show_empty: true
  card:
    type: custom:stack-in-card
    mode: vertical
    keep:
      margin: true
      outer_padding: true
      border_radius: true
  card_param: cards
  filter:
    template: |-
      {%- from "cards/ae_climate_room_list.jinja" import ae_title_room_climate -%}
      {{- ae_title_room_climate()|from_json() -}}
9 Likes