šŸ“ 100% Templatable Lovelace Configurations

In the first block of code, ā€œ- elementsā€ is ONLY used in a picture-elements card. This is probably what you need:

 - badges: []
    cards:
      - type: 'custom:config-template-card'
        entities:
          - sensor.png_timestamp
        card:
          type: picture
          image: >-
            ${states['sensor.sim_1'].state+'?v='+states['sensor.png_timestamp'].state}
          tap_action:
            action: none

if you donā€™t plan on having a tap_action, you can leave it out. Sorry, Iā€™m not familiar with the custom layout card, so you will need to retrofit those statements.

Thanks a lot, but it isnā€™t working.
I get a message:

I really like: config-template-card, but I donā€™t understand how to combine it with color-lite-card

Your problem is not the color-lite-card, your problem is that you have skipped a required field of the config-template-card; entities. https://github.com/iantrich/config-template-card#options

Edit: Looks like you have it inside the color-lite-card config, instead of the config-template-card config.

type: custom:config-template-card
entities:
  - light.zal_parent_glazki_91
card:
  ...etc
1 Like

Thanks Ian for the correction. I had my example correct in my test setup with the required entities: aligned properly at the top. I just hate how HA rearranges your Lovelace code after a save. It put entities: at the very bottom and when I copy/pasted for this post, it got mistaken for the color-lite config.

1 Like

@GaryOkie and @iantrich
Thanks for the help guys. It works great.

- type: 'custom:config-template-card'
             entities:
              - light.zal_parent_glazki_91
              - light.zal_osnovnoi_svet_93
              - light.zal_rgbw_controll_85
             style: 
                top: 29.7%
                left: 45.1%
                width: 25.5%
             card:
               type: 'custom:color-lite-card'
               entity: light.zal_rgbw_controll_85
               color_image: >-
                ${this.hass.states['light.zal_parent_glazki_91'].state === 'on' || this.hass.states['light.zal_osnovnoi_svet_93'].state === 'on'? 
                '/local/ui/floorplan_v2/livingroom_led.png' : '/local/ui/floorplan_v2/livingroom_led4.png'}
1 Like

Hi there! :smiley:

So I feel like Iā€™m super close. Iā€™ve included everything you recommended (a timestamp is now sent with the path in a JSON MQTT message) and in a way it sort of works.

Weirdly, however, the first time the lovelace page updates following the sensor changing/updating, you get a broken image. If I then refresh the page, the image then loads fully. Thatā€™s odd. Because itā€™s like everything is in place for it to workā€¦and it doesnā€™t for some reason. Thanks for your help. Not sure if @Mrianphill had to counter this problem somehow??

Cheers guys

Screenshot 2020-05-07 at 21.00.27

can you post your lovelace code please? Did you try the webpage card as an alternative to picture? It will also accept an implicit URL starting with /local/ā€¦ for the image.

Iā€™ll try the webpage card, thanks for the tip. Upgrading to the latest and greatest HA didnā€™t solve the issue. Sadly.

I wonder if the error is this one (from Chromeā€™s dev view console)
ā€œUncaught (in promise) DOMException: Failed to execute 'whenDefined' on 'CustomElementRegistry': "picture" is not a valid custom element nameā€

This is my lovelace code

  - badges: []
    cards:
      - card:
          image: >-
            ${states['sensor.incoming_caller_picture_path'].state+'?v='+states['sensor.incoming_call_timestamp'].state}
          tap_action:
            action: none
          type: picture
        entities:
          - sensor.incoming_call_timestamp
        type: 'custom:config-template-card'
    layout: horizontal
    path: radio2
    title: Radio2
    type: 'custom:layout-card'

Wonder if Iā€™ll just have to go the generic camera route

@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>

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 }}

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

lock_camera_demo

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.

1 Like

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

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. =)

1 Like

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,

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

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.

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

1 Like

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
image

and this is the entity
image

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

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