By âon topâ I mean in a layer like this 
Is it possible?
yes that would be nice.
I would be even more interested in an overlay_image. Usecase: Have a button with the image of a person(device_tracker), and overlay it with an image for the zone theyâre in.
Right now I have rather complex templates to accomplish that, and, more importantly, have many dedicated zoned icons for all persons in my houshold.
If Overlaying were possible, it would seriously cut down on the templates, and the amount of dedicated images.
could this be done with a custom_field: zone_image, have the base person image fill the full button, and show the custom zone_image in a corner?
âupdateâ
this seems to be a start:
button_picture_family_overlay:
size: 75%
show_state: false
show_label: false
show_name: false
show_entity_picture: true
color_type: card
aspect_ratio: 1/1
tap_action:
action: more-info
haptic: light
hold_action:
action: more-info
haptic: success
custom_fields:
zone_picture: '<img src="/local/flags/Nl.png" height= 50% width= 50%>'
styles:
custom_fields:
zone_picture:
- align-items: flex-start
- justify-content: flex-end
- padding: 2px 2px
# - opacity: 0.5
- position: absolute
- left: 45%
- bottom: 10%
card:
- border-radius: 6px
- box-shadow: '0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19)'
entity_picture:
- border-radius: 6px
state:
though I am totally confused as to the workings of left and right in the styles, and the way it interacts with the height and width in the html tag for the image. (I need the image to be in the corner of the image, and not the button. Since the image is scaled at 75% this is an extra challenge, and I donât know eg if I should use padding at all, and some of the other layout properties.)
More importantly even, I need a template for this in the entity_picture field:
{% set person = states.device_tracker.life360_name %}
{% set zones = states.zone | map(attribute='name')|list %}
{% if person.state == 'home' %} ' '
{% elif person.attributes.country_code and person.attributes.country_code != 'nl' and
person.state not in zones and
person.state not in ['moving', 'driving'] %}
/local/zones/overlay_{{person.attributes.country_code}}.png
{% else %}
/local/zones/overlay_{{person.state|lower|replace(' ','_')}}.png
{% endif %}
where the first line should be using the entity of the button. Hope you can help me here, would really be magic!
Okay, after another try I get the community tab. So something is fixed.
how can I get this template to show the image it points to in a custom_fields:
custom_fields:
zone_image: >
'<img src= states["sensor.person_overlay_image"].state;height= 50% width= 50%>'
the state is in the form of: /local/zones/not_home.png and of course there are images for the zonesâŚ
thanks for having a look and assist.
Like that (plus your img format was wrong):
custom_fields:
zone_image: >
[[[
return `<img src="${states["sensor.person_overlay_image"].state}" style="height: 50%; width: 50%;">`
]]]
thanks!
I can see of the correct sensor 
need some time to position it correctly now.
(deleted a previous posting, because i made an error causing it to not show correctly.) ignore the edit.
still would love a suggestion for post
which I made into a dedicated post on Rewrite this Jinja template to JS for use in Button-card concerning the template.
Hope you can find some time to have a look
Hi guys!
I am working with my project and I am trying to get an icon in the label section.
I get it to work if I set it like:
var icon_one = âmdi:door-openâ;
But how shall I do if I want to set that mdi so it mirrors the icon another sensor is having?
I want to show the icon of sensor.battery_kitchen_pir_sensor without 25 more lines in the lovelaceâŚ
Is it possible to fix that? Like something maybe like this?
var icon_one = âmdi: + {{ states.binary_sensor.motion_sensor_158d000165fff0.attributes.icon }}â or something?
youâre mixing JS and Jinja here which wonât goâŚ
if anything would work, try this:
[[[
var icon_one = 'mdi:' + states['binary_sensor.motion_sensor_158d000165fff0'].attributes.icon;
return icon_one;
]]]
if this would work (getting the attribute icon from your sensor), it would most likely already contain the âmdi:â bit in the attribute? if so, then leave that out of the template.
can you show the template in jinja ? does this {{ states.binary_sensor.motion_sensor_158d000165fff0.attributes.icon }} or {{ state_attr('binary_sensor.motion_sensor_158d000165fff0','icon') }}actually show an output in the dev-template?
if youâve set the binary_sensor with a device_class, it doesnât show the icon as attribute.
btw, please note that this is not valid for the custom_fields that need yet another language coding/syntax, and would be in the form of:
[[[ return `<ha-icon icon="mdi:lock-alert" style="width: 22px; height: 22px;"> </ha-icon>` ]]]
1 Like
I copypasted the wrong sensor in my question⌠Sorry! The sensor was sensor.battery_hallway_temp_sensor that is an template sensor only changing the icon according to the battery.
If I try {{ states.sensor.battery_hallway_temp_sensor.attributes.icon }} or {{ state_attr('sensor.battery_hallway_temp_sensor','icon') }}both of them return mdi:battery-50 so I guess this must be on the correct way 
I got it to work thx for the help!
var icon_one = states[âsensor.battery_hallway_smoke_sensorâ].attributes.icon; did the trick
In a regular computer browser, this plugin works fine.
But on a Kindle Fire in Fully Kiosk Browser, I get a red block with âCustom element doesnât exist: button-cardâ.
I saw some posts in this thread from a year ago that said custom components are a relatively new tech and not all browsers support them. Iâm not familiar with what exactly a âcustom componentâ is in the browser contextâŚIâve not heard the term before as some kind of standard or common framework. Given that itâs a full year later and there are still browser support issues, what should I be asking the developer of Fully Kiosk to do, exactly?
Your tablet probably doesnât support ES6 JacaScript. Making it impossible to show those cards. I have an iPad 3d gen which has the same problems. There are no ways to overcome this! You will either have to use core-cards or buy a new tablet.
I do have to mention that mods to cards (e.g. card-mod and markdown-mod do work with older tablets, donât confuse it with card-modder and useful-markdown-mod though as those can not be read by older tabs).
The problem is Amazon is running old webkit on their tablets. For custom cards to be able to work we would have to either have to sacrifice functionality and write in pure JavaScript or employ some form of translation such as Babel for the older browsers. Both require time and effort for devs already volunteering their time.
1 Like
I use a Kindle with fully kiosk and this card works for me. I have called is a âtype: jsâ and not module in the resource definition.
I rooted my Fire tablet and installed LineageOS. Runs Fully Kiosk perfectly and much smoother.
@RomRider is it possible to have the border-radius templated like is possible with the card-mod? For example
{{ states(âinput_select.border_radiusâ) }}?
In the input select I have the variables like 12px coded. This seems to work fine with card-mod but I canât figure out how to do this with your card (if even possible).
I know I can just apply card-mod to your card but that makes it impossible to use it as a template with decluttering cards.
The reason is that I have a few cards that all use a single template but I also have a few that I donât want a border-radius applied to or a different border-radius.
So I want to be able to have the option to either use the input_boolean to change the border-radius or the variable in decluttering card. (I hope you understand what I mean)
That should work (probably?):
styles:
card:
# remove the "+ 'px'" if it's already in your state
- border-radius: "[[[ return states['input_select.border_radius'].state + 'px' ]]]"
I had px already in the code. This seems to work. Thanks a lot. I literally tried so many different configurations.
Thanks a lot @RomRider
is there a difference between the style = height/width in the zone_image template, and the use of the
styles:
custom_fields:
zone_image:
width:
height:
I cant seem to pin it down completely, though it seems to show alright now, on smaller button cards (3 in 1row). If I have only 1 button, which is then much larger, the overlay (zone_image) doesnt enlarge proportionally
correct size for 3 in a row
incorrectly sized on larger button (seems even smaller):
using this for the card now:
button_picture_family:
size: 75%
show_state: false
show_label: false
show_name: false
show_entity_picture: true
color_type: card
aspect_ratio: 1/1
tap_action:
action: more-info
entity: >
[[[
var id = entity.entity_id.split('_')[2];
return 'group.' + id;
]]]
haptic: light
hold_action:
action: more-info
entity: >
[[[
var id = entity.entity_id.split('_')[2];
return 'group.' + id;
]]]
haptic: success
entity_picture: >
[[[
var id = entity.entity_id.split('_')[2];
return states['sensor.' + id + '_picture'].state;
]]]
styles:
entity_picture:
- border-radius: 6px
custom_fields:
zone_image:
- align-items: flex-start
- justify-content: flex-end
- padding: 2px 2px
- position: absolute
- right: 12%
- bottom: 10%
- height: 30%
- width: 30%
card:
- border-radius: 6px
- box-shadow: '0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19)'
- background-color: >
[[[
var id = entity.entity_id.split('_')[2];
return states['sensor.' + id + '_background_color'].state
]]]
custom_fields:
zone_image: >
[[[
var id = entity.entity_id.split('_')[2];
return `<img src= "${states['sensor.' + id + '_overlay_image'].state}" style="height: 30px; width: 30px;">`
]]]
1 Like
can you help, by explain, i want to the same, but without zone sensor, iâm only using one entity which is the device tracker.
can you help with the code?
this is the entity device_tracker.b4_f1_da_ec_sd_sd
depends really, on what you want. If you want a button with the entity_picture of the device_tracker, the code is posted above. Just leave out the custom_field parts. and adjust a template to your setup.
If you need something else, you should be a bit more specificâŚ