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
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.
@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'}
Hi there! 
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
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:
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.
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. =)
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
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
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
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')}"
Doh! Iāll try that tomorrowā¦