📝 100% Templatable Lovelace Configurations

[GaryOkie]

@daneboom As I mentioned before, I wasn’t familiar with the custom layout-card, but I compared the examples against your code above, and see it’s not formatted properly. This layout card has its own “cards:” which is used to group multiple cards under 1 layout card. (important since when panel is enabled, you can only have 1 card).

Try this: (Note, it is formatted in the way I prefer for readability, but HA/lovelace will scramble it later if you use the default lovelace GUI editor mode)

  - title: Radio2
    panel: true
    badges: []
    cards:           
      - type: 'custom:layout-card'
        layout: horizontal
        cards:
          - type: 'custom:config-template-card'
            entities:
              - sensor.incoming_call_timestamp
            card:
              type: picture
              image: >-
                ${states['sensor.incoming_caller_picture_path'].state+'?v='+states['sensor.incoming_call_timestamp'].state}
          - type: picture
            image: /local/<another picture beside the first>
          - type: picture
            image: /local/<yet another card in horizontal layout>

Also, I did test that the picture card updates automatically just fine using the implicit /local/ URL and ?v=<timestamp>

[klogg]

Does this card work using an !include for the card?

This example works with an explicit card defined.

Simple Markdown

- type: custom:config-template-card
  variables:
    - states['timer.sitting_room_occupancy_timer'].state
  entities:
    - timer.sitting_room_occupancy_timer
  card:
    type: markdown
    content: "${ vars[0] == 'active' ? '***MOTION DETECTED***' : 'MOTION' }"

This example displays nothing

Markdown as an include

- type: custom:config-template-card
  variables:
    - states['timer.sitting_room_occupancy_timer'].state
  entities:
    - timer.sitting_room_occupancy_timer
  card:
    !include
      - templates/titles.yaml
      - title: "${ vars[3] == 'active' ? '***MOTION DETECTED***' : 'MOTION' }"
        font_family: Oswald

I use the titles.yaml !include` all over the place so I know that is correct but to head off the question, this displays correctly:

- type: custom:config-template-card
  variables:
    - states['timer.sitting_room_occupancy_timer'].state
  entities:
    - timer.sitting_room_occupancy_timer
  card:
    !include
      - templates/titles.yaml
      - title: Some random text
        font_family: Oswald

---

For completeness here is titles.yaml

# lovelace_gen

{% set margin_top = margin_top | default('-0.5em') %}
{% set margin_left = margin_left | default('-0.5em') %}
{% set margin_bottom = margin_bottom | default('-0.5em') %}
{% set background_color = background_color | default('transparent') %}
{% set font_family = font_family | default('var(--primary-font-family)') %}
{% set font_size = font_size | default('20px') %}
{% set color = color | default('auto') %}
{% set padding_left = padding_left | default('0.5em') %}
{% set border_left_color = border_left_color | default('rgba(255, 155, 0)') %}
{% set border_left = border_left | default('3px solid') %}
{% set box_shadow = box_shadow | default('none') %}

# Define header level
{% set header_level = header_level | default('2') %}
{% set mapper = {'1':'#','2':'##','3':'###','4':'####','5':'#####','6':'######'} %}
{% set header_level = mapper[header_level] %}

type: markdown
style: |
  ha-card {
    margin-top: {{ margin_top }};
    margin-left: {{ margin_left }};
    margin-bottom: {{ margin_bottom }};
    background-color: {{ background_color }};
    box-shadow: {{ box_shadow }};
  }
  h2 {
    font-family: {{ font_family }};
    font-size: {{ font_size }};
    font-weight: 100;
    color: {{ color }};
    padding-left: {{ padding_left }};
    border-left: {{ border_left }} {{border_left_color}};
  }
content: >
  {{ header_level }} {{ title }}

[user512]

Very nice card. Simple and useful. I have used it to get the following:

I have a ‘cameras’ top menu where I have 4 cameras live. I wanted to show realtime image with a picture-entity card, as I used to have, but this time, I want the cameras hidden to certain user/users logged in my home assistant. As a plus… with a click on a certain switch for root, I want to re-enable the video feed to that censored users with the click of a button.

It looked so nice and is so simple with Ian’s card that I would like to show you my steps here. Also, would like to share because I haven’t found any reference on the web or on the card’s readme that explains with samples how to use it with different logged users, which is one of the best adventages of this card in my opinion, and make a difference with others. Here we go:

1.- First, create an input_boolean as my personal switch, that I will use as root to let censored users view the video feed at certain times, etc.

---input_boolean.yaml
show_my_cameras:
  name: Show my cameras
  initial: off
----

2.- I have created a blured, black and white picture that will substitute the camera feed for each particular camera once the root censors the camera feed. I have saved the image to www/cameras/blur_chickencam.jpg, in this example.

3.-Edit my old picture-entity CARD with the uncesored camera stream like that, adding the ‘config-template-card’ with it’s variables as you can see here:

type: 'custom:config-template-card'
variables:
  - 'states[''input_boolean.show_my_cameras''].state'
entities:
  - input_boolean.show_my_cameras
card:
  aspect_ratio: 50%
  entity: >-
    ${vars[0] === 'off' && user.id === 'abc12346789034c3445ed4d37489123' ? 'input_boolean.show_my_cameras' : 'camera.chickencam'}
  name: chickencam
  image: /local/cameras/blur_chickencam.jpg
  show_name: true
  show_state: false
  type: picture-entity

EXPLANATION:
-under ‘card:’, you could see my old card, but with the added variables to take that into account.

-vars[0]: corresponds with the value of the first variable declared above under ‘variables:’ label. If you add more variables to the list, the second will be vars[1], and so on…

-Under ‘entities:’ label, is the entity that the card will take into account for checking state changes and adopt new values accordingly if that entity changes.

-the ‘entity:’ label at card:, says something like…: if input_boolean.show_my_cameras value is ‘off’ AND the logged user is ‘Miss Trump’, then assign ‘input_boolean.show_my_cameras’ to the label ‘entity:’. Else give a value of ‘camera.chickencam’. So, if the input_boolean somewhere in the root frontlace has been clicked to off, and the logged user is that user, the camera will show the black and white blured picture. If other user is logged, no matter where the input_boolean lever is set, the camera will show the video feed in all it’s colour and glory.

-You can find the user id number of a certain user, to censor the video stream to him by going to configuration -> users -> Miss Trump -> long number.

It works for me. Hope it helps others. Thanks.

[Marco_Lupieri]

Hi, i have a state-icon in picture element card of my cellular battery sensor. It’s possible to change the color of icon based on battery level?
This is my config:

- type: picture-elements
  image: /local/picture/xxxxxx.png
  style:
    .: |
     ha-card {
       background-color: transparent; border: none; box-shadow: none;
     }
  elements:
    - type: state-label
      entity: person.zzzz
      style:
        color: white
        top: 95%
        left: 50%
    - type: state-icon
        entity: sensor.redmi_note_5_battery_level
        title: Batteria Residua
        style:
          top: 10%
          left: 11%
          --iron-icon-height: 20px
          --iron-icon-width: 20px

Thanks

[toshymaeda (Bruno Maeda)]

Hello. First of all, thanks for this great plugin!
I’m still new in this “HA thing”, and would like to know if you could help me.

I’m using auto-entities card plugin so I can create a card “iterating” the entities of a group:

type: 'custom:auto-entities'
  card:
    title: My Title
    type: entities
    show_header_toggle: false
  filter:
    include:
      - group: my_group_id

Since I needed to have access to some hass variables (e.g. to get the name of the group), my idea was to use my card inside config-template-card. And worked. Great!

The only problem in my implementation:
I have to inform the entities to be watched for changes on the config-template-card. But since the state of the group doesn’t change every time an entity changes, watching for the group causes some inconsistances. So I have to pass every single entity of the group to be watched.

Is it possible to pass only my group and watch for changes in its entities? I also tried using JS to get the list of entities from the group, but it seems the entities attribute doesn’t suport it (it’s treated as simple string).

Thanks.

PS: config-template-card functionalities should be default. =)

[Benouzao]

Hello,

I’m trying to use the config-template-card module, but I can’t seemed to make it work. Here is my ui-lovelace.yaml

  - url: /hacsfiles/config-template-card/config-template-card.js
    type: module
[...]
  - title: Test View
    path: test-view
    badges: []
    type: 'custom:config-templates-card'
    cards:
      - type: entities
        title: "${states['person.benjamin'].state === 'Home' ? 'Ben Home!' : 'Ben Away!'}"
        entities:
          - entity: person.benjamin

For testing purpose only, as you can see, I’m trying to change the value of the Title depending on the person state. Howver, the js code isn’t event interpreted.

I can also see in the console the module is correct loaded.

Can anyone help with guidance/suggestion?

Thanks a lot,

[iantrich (Ian)]

you have a typo in the type, and you don’t have it actually listed as a card, you have it at the view level. It should be in cards and should have all required options set per the documentation

[Benouzao]

Thanks a lot Ian, I got it to work now. I’m still wrappings my head around lovelace and yaml.

My intention is to use the module to enable/disable a view : How can enable a view/tab only when the current user is home?

And I have a feeling this might not work as I planned. Can let me know if that would be feasible?

Thanks a lot.

[iantrich (Ian)]

It is not. You could hide all views and create a conditional with navigation buttons or check out custom-header

[DavidFW1960 (David)]

Why can’t I make this work?

                - entity: sensor.beaufort
                  name: "${'Beaufort force:' + '\xa0'.repeat(2) + states['sensor.beaufort'].state == 12 ? 'Hurricane Force' : states['sensor.beaufort'].state == 11 ? 'Violent Storm' : states['sensor.beaufort'].state == 10 ? 'Storm, whole gale' : states['sensor.beaufort'].state == 9 ? 'Strong/severe gale' : states['sensor.beaufort'].state == 8 ? 'Gale/ fresh gale' : states['sensor.beaufort'].state == 7 ? 'High wind, moderate/near gale' : states['sensor.beaufort'].state == 6 ? 'Strong breeze' : states['sensor.beaufort'].state == 5 ? 'Fresh breeze' : states['sensor.beaufort'].state == 4 ? 'Moderate breeze' : states['sensor.beaufort'].state == 3 ? 'Gentle breeze' : states['sensor.beaufort'].state == 2 ? 'Light breeze' : states['sensor.beaufort'].state == 1 ? 'Light air' : 'Calm' }"

It shows the correct state and the correct ‘Light Breeze’ as the sensor is 2 at the moment… but nothing I do makes it show the name with ‘Beaufort force:’ at the front

and this is the entity

[DavidFW1960 (David)]

also tried:

          - type: 'custom:config-template-card'
            variables:
              - states['sensor.beaufort'].state
            entities:
              - sensor.bom_forecast_0
              - sensor.bom_gosford_air_temp_c
              - sensor.bom_gosford_delta_temp_c
              - sensor.bom_gosford_dew_point_c
              - sensor.bom_gosford_feels_like_c
              - sensor.bom_gosford_rain_today
              - sensor.bom_gosford_relative_humidity
              - sensor.bom_gosford_wind_direction
              - sensor.bom_gosford_wind_speed_kmh
              - sensor.bom_gosford_wind_gust_kmh
              - sensor.bom_gosford_wind_speed_kt
              - sensor.bom_gosford_wind_gust_kt
              - sensor.beaufort
            card:
              type: 'custom:hui-entities-card'
              title: Weather from BOM Australia
              show_header_toggle: false
              entities:
                - entity: sensor.bom_forecast_0
                - entity: sensor.bom_gosford_air_temp_c
                - entity: sensor.bom_gosford_delta_temp_c
                - entity: sensor.bom_gosford_dew_point_c
                - entity: sensor.bom_gosford_feels_like_c
                - entity: sensor.bom_gosford_rain_today
                - entity: sensor.bom_gosford_relative_humidity
                - entity: sensor.bom_gosford_wind_direction
                - entity: sensor.bom_gosford_wind_speed_kmh
                - entity: sensor.bom_gosford_wind_gust_kmh
                - entity: sensor.bom_gosford_wind_speed_kt
                - entity: sensor.bom_gosford_wind_gust_kt
                - entity: sensor.beaufort
                  name: "${'Beaufort force:' + '\xa0'.repeat(2) + vars[0] == 12 ? 'Hurricane Force' : vars[0] == 11 ? 'Violent Storm' : vars[0] == 10 ? 'Storm, whole gale' : vars[0] == 9 ? 'Strong/severe gale' : vars[0] == 8 ? 'Gale/ fresh gale' : vars[0] == 7 ? 'High wind, moderate/near gale' : vars[0] == 6 ? 'Strong breeze' : vars[0] == 5 ? 'Fresh breeze' : vars[0] == 4 ? 'Moderate breeze' : vars[0] == 3 ? 'Gentle breeze' : vars[0] == 2 ? 'Light breeze' : vars[0] == 1 ? 'Light air' : 'Calm'}"
                  icon: mdi:weather-windy

Same result

[DavidFW1960 (David)]

@iantrich are you able to assist with my error above? I can’t work out what I am missing.

[iantrich (Ian)]

try wrapping it with parens

                  name: "${'Beaufort force:' + '\xa0'.repeat(2) + (vars[0] == 12 ? 'Hurricane Force' : vars[0] == 11 ? 'Violent Storm' : vars[0] == 10 ? 'Storm, whole gale' : vars[0] == 9 ? 'Strong/severe gale' : vars[0] == 8 ? 'Gale/ fresh gale' : vars[0] == 7 ? 'High wind, moderate/near gale' : vars[0] == 6 ? 'Strong breeze' : vars[0] == 5 ? 'Fresh breeze' : vars[0] == 4 ? 'Moderate breeze' : vars[0] == 3 ? 'Gentle breeze' : vars[0] == 2 ? 'Light breeze' : vars[0] == 1 ? 'Light air' : 'Calm')}"

[DavidFW1960 (David)]

Doh! I’ll try that tomorrow…

[klogg]

A question about the entities list.

I have an input_text that holds the name of a sensor is there any way to have that sensor watched (not the input_text)?

As a fall back, could I put sensor.time in the list of entities like in a template sensor?

e.g.

The state of input_text.irrigation_sensor_weather_forecast_high_temp is the name of a sensor like ‘sensor.my_sensor’.

type: custom:config-template-card
variables:
  - states['input_text.irrigation_sensor_weather_forecast_high_temp'].state
entities:
  # I want to watch sensor.my_sensor
  - sensor.time

[iantrich (Ian)]

Putting sensor.time in there essentially removes all performance gains put in place. Don’t do that.

Can’t think of a way to accomplish this currently. Add a FR to allow templates in entities

[klogg]

@iantrich

Add a FR to allow templates in entities

Done. Thanks.

[dmertens (Danny)]

States don’t update without manual refresh

Hi, I’m using state-icons, labels, badges in my floorplan but none of them update without a manual refresh of the browser?

Example put this in my floorplan

- type: state-label
              entity: binary_sensor.aqara_raam_bureau
              style:
                top: 85%
                left: 40%  

Works fine in my old floorplan, but now that Ik use the template card because I wan’t to use color for my lights this does not seem to work?

after i manual refresh everything it updates nicely to the new states, any idea why this does not work, or better how to fix this

Thanks!

[iantrich (Ian)]

Without context of how you are using my card I can’t really help you

[dmertens (Danny)]

Hi @iantrich,

I can post my config but this is quid large
So uploaded it to Stack: hopefully this helps, its basically a floorplan build on this setup: https://github.com/lukevink/hass-config-lajv

But I tried it also with al small set-up and also that does not work, as soon as I add the template config it does not update, without no problem

My complete dashboard: https://dmertens.stackstorage.com/s/uWCzHFdknTiYPpE

Small test:

    #############################################################################################################################################
    #                                                                                                                                           #
    #                                                              Custom header config                                                         #
    #                                                                                                                                           #
    #############################################################################################################################################
    
custom_header:
  active_tab_color: var(--state-icon-active-color)
  background: var(--app-header-background-color)
  compact_mode: true
  custom_header: null
  editor_warnings: false
  elements_color: var(--app-header-text-color)
  exceptions:
    - conditions:
        user: pi
      config:
        kiosk_mode: true
  hidden_tab_redirect: false
  tab_indicator_color: var(--state-icon-active-color)
title: Mertens Geysen
views:

    #############################################################################################################################################
    #                                                                                                                                           #
    #                                                              Floorplan View                                                               #
    #                                                                                                                                           #
    #############################################################################################################################################


  - title: Control Rooms
    icon: 'mdi:floor-plan'
    panel: true
    badges: 
    cards:
 
    ###################   config-template-card    #####################

    
      - type: 'custom:config-template-card'
        entities:
          - light.hue_lamp1_wasruimte
          - light.hue_ledstrip1_keuken
          - light.hue_hoge_lamp_woonkamer
          - light.hue_lage_lamp_woonkamer
          - light.hue_ledstrip1_woonkamer
          - light.hue_lamp1_douche
          - light.hue_lamp2_douche
          - light.hue_lamp1_dressing
          - light.hue_lamp2_dressing
          - light.hue_lamp3_dressing
          - light.hue_lamp1_toilet
          - light.hue_lamp1_hal
          - light.hue_lamp1_terras_beneden
          - light.hue_lamp2_terras_beneden
          - light.hue_lamp1_nachthal
          - light.hue_lamp2_nachthal
          - light.hue_lamp3_nachthal
          - light.hue_lamp4_nachthal
          - light.hue_lamp1_badkamer
          - light.hue_lamp1_bureau
          - light.hue_lamp2_bureau
          - light.hue_lamp3_bureau
          - light.hue_lamp4_bureau
          - light.hue_ledstrip1_bureau
          - light.hue_lamp1_michael
          - light.hue_lamp1_master
          - light.hue_lamp2_master
          - light.hue_lamp3_master
          - light.hue_lamp4_master
          - light.hue_lamp1_terras_boven
          - light.hue_lamp2_terras_boven
          - light.hue_lamp3_terras_boven
          - light.hue_lamp4_terras_boven
          - light.hue_lamp5_terras_boven
          - light.hue_lamp6_terras_boven           
          
        card:
        
    ###################   Picture Elements default night card   #####################
          
          type: picture-elements
          image: /local/images/floorplan/v4/avond_3.png 
          style: |
            ha-card:first-child {
              background: rgba(42, 46, 48, 1)
            }
          elements:
          
          
          
     #########################    DAY BASE FLOORPLAN OVERLAY    #########################          
          
            - action: none
              entity: sun.sun
              hold_action:
                action: none
              state_image:
                above_horizon: /local/images/floorplan/v4/dag_6.png
                below_horizon: /local/images/transparent.png
              style:
                height: 100%
                left: 50%
                top: 50%
                width: 100%
              tap_action:
                action: none
              type: image
              
              
       

            - type: state-label
              entity: binary_sensor.aqara_raam_bureau
              style:
                top: 50%
                left: 50%

Thanks!