Nobody can help me, please?
I’m going crazy
Thank you…
to use custom fields you need to use “button-card”
Button Card ( install via hacs)
then just take the sample code from
Custom field sample
then you can check Hass config for how he realized full circle in the layout (what you looking for starts at line 318)
Sorry mate, I have no clue how to make this flexible and not depending on 20sec. 
Maybe @Mariusthvdb would be so kind and give you an answer.
Yes, I noticed this, too. I know use this one:
label: |
[[[
var l = entity.last_changed;
var last_date = new Date(l);
var now_date = Date.now();
var diff = now_date - last_date;
var msec = diff;
var dd = Math.floor(msec / 1000 / 60 / 60 / 24);
msec -= dd * 1000 * 60 * 60 * 24;
var hh = Math.floor(msec / 1000 / 60 / 60);
msec -= hh * 1000 * 60 * 60;
var mm = Math.floor(msec / 1000 / 60);
msec -= mm * 1000 * 60;
var ss = Math.floor(msec / 1000);
msec -= ss * 1000;
var ddtext = '00';
if (dd > 0){ ddtext = String(dd) + ' T. ';}
if (ddtext.length == 1){ddtext = ddtext + ' T. '};
if (ddtext == '00'){ddtext = ' '};
var hhtext = '00';
if (hh > 0){ hhtext = String(hh) + ' Std. ';}
if (hhtext.length == 1){hhtext = hhtext + ' Std. '};
if (hhtext == '00'){hhtext = ' '};
var mmtext = '00';
if (mm > 0){ mmtext = String(mm) + ' min. ';}
if (mmtext.length == 1) { mmtext = mmtext + ' min. '};
if (mmtext == '00'){mmtext = 'wenigen Sekunden'};
var sstext = '00';
if (ss > 0) { sstext = String(ss) + ' sek.';}
if (sstext.length == 1) { sstext = sstext + ' sek.'};
if (sstext == '00'){sstext = ' '};
return `(zuletzt vor ${(ddtext + hhtext + mmtext )})`;
]]]
Not at a Mac just now but please stay calm. Going Mad is not good 
and not necessary in this topic of super helpful people…
So, my advice is to start small. Add a item per item and check.
Please have a look at my gist for button_card_templates and look for a notification custom_field. The link is in my profile
You should be able to copy that, adjust a few entities and load it in your button
I’ve opted to expand this challenge to it’s own thread … since it may not fit just under the button-card, and I’m open to all options to get the job done.
I’ve got a challenge on my hands.
It may not be challenging for you beautiful people, but hey ho, that’s why I’m here seeking brains that aren’t as frazzled as mine. 
Background
I’ve tried doing what I’m about to describe using a picture-entity card - got most of the way there with separate images, but for some I get a spinner of death after a certain number of entity state images (I think it was after 8…).
So two options to overcome this - a: card-mod… or b: custom button card!
Here I am trying out the custom button card solution and it’s getting too late for me to get it working on own.
My challenges (to me and) to you!
-
I’m trying to create a card that displays a picture of my car - as an SVG image. (The easy part)
-
I’m trying to update the fill colour of various paths (identified by class tags) based on the state of a sensor entity. (my javascript is weak… and googling says I’m the only one mad enough to try it in lovelace and the custom components I’ve got… or I’m using the wrong search terms).
-
Each item is on a different sensor: eg, front right door lock = sensor.car_front_door_right, front left window = sensor.car_front_left_window
-
I’m not sure where to put the javascript so it’ll update (I’ve got a hunch, but am I right?) the one image from multiple sensors…
Below is where I got to so far, I’ll carry on hacking away
YAML card:
- type: 'custom:button-card'
# template:
# - card_generic_swap
entity: sensor.ml71nym_car
show_entity_picture: true
entity_picture: /local/EQA/EQA-Merc-Top-RHD.svg
# extra_styles: >
# [[[
# let
# ]]]
show_icon: false
show_label: false
show_name: false
show_state: false
styles:
card:
- height: 190px
- border-radius: 14px
- box-shadow: none
# - font-size: 30px
- text-align: left
- cursor: default
entity_picture:
- width: 95%
- transform: >
[[[
if (states['sensor.front_right_door'].state == "Open")
return "
.theClassOfThePathInTheSVG {
filter: hue-rotate(180deg);
}";
if (states['sensor.front_right_door'].state == "Open")
return "
.theClassOfThePathInTheSVG {
filter: hue-rotate(180deg);
}";
if (states['sensor.front_right_door'].state == "Open")
return "
.theClassOfThePathInTheSVG {
filter: hue-rotate(180deg);
}";
]]]
# - color: [] # >
# [[[
# var svgHolder = document.querySelector('svg#carOutline');
# svgHolder.onload = function () {
# var svgDocument = svgHolder.contentDocument;
# var style = svgDocument.createElementNS("http://www.w3.org/2000/svg", "style");
# // Now (ab)use the @import directive to load make the browser load our css // '@import url("/css/your-dynamic-css.css");'; or..
# style.textContent = "<style>
# .bvl-icon-lamp-outline{
# fill:rgba(var(--rgb-primary-text-color), 0.7);
# }
# </style>";
# var svgElem = svgDocument.querySelector('svg');
# svgElem.insertBefore(style, svgElem.firstChild);
# ]]]
img_cell:
- border-radius: 14px
- height: 100%
# custom_fields:
Sample of SVG Image with sample classes: carOutline, doorHandle_rearLeft, doorHandle_rearRight,
doorHandle_frontLeft,doorHandle_frontRight … can be found here on dropbox.
Hey
making sure i understand you correctly
if i use custom fields i can put the code inside the button config without creating a custom sensor in the configuration.yaml ? and it will update properly ?
Thanks for your time @yaruslavm and @Mariusthvdb
I’ve already install “button-card” repository.
I try to read the sample code and all the readme of repo but I don’ t understant how it works.
I’d love to see the yaml code for create a button that activate input.boolean.scaldabagno_temporizzato and, in the same button, a circle with the timer timer.scaldabagno
With the code I can understand what each line of code does.
I’m not able with codes.
For example, Yaruslavm, in your circle code (from 324 line) I don’t understand why there isn’t an entity.
What does the circle show?
Please, could you show me the code for create this kind of button?
Would be the best example to start with
Thank you, bye!
@Marcoletto @yaruslavm some confusion going on because I think I answered to the wrong person, sorry for that. Anyways. seems you both have an issue (understanding the workings of button-card). Why dont you post the button-card config you now have, along with a screenshot, so we can go from there.
no use simply pasting a working button for me, because it wouldn’t help you guys understand your own use case…
as for updating a button card, it should automatically update on the used entities. However, in several cases it needs to be explicitly pointed to entities beyond the config. Maybe with the timer, you need to set the triggers_update: config option on that timer?
hey @Mariusthvdb
The ask :
i wanted my card to have last changed status shown on the card in a following format “1m” “2h” “1d”.
Method 1: failed
- type: custom:button-card
entity: binary_sensor.contact_sensor
icon: mdi:door
name: logic in label
show_state: true
show_label: true
label: |
[[[
var l = entity.last_changed;
var t,s=(new Date()-new Date(l))/1e3;
return (
(t=Math.floor(s/86400))?t+(t>1?"d":" day"):
(t=Math.floor(s/3600))?t+(t>1?"h":" h"):
(t=Math.floor(s/60))?t+(t>1?"m":" m"):
(t=Math.floor(s))!==1?t+"s":" sec")
]]]
Managed to see the text exactly as i wanted but it is not getting updated unless i refresh the browser ( or other entities related to the card)
Method 2:partial success
Removed the label and used the “show_last_changed: true” i can see the status and it is updated without refreshing the browser. but i want to change the display from “10 minutes ago” to “10m”
Method 3: full success but have questions
button:
- type: custom:button-card
entity: binary_sensor.contact_sensor
icon: mdi:door
name: template +label
show_state: true
show_label: true
label: |
[[[
var d = states['sensor.front_door'].state;
return d;
]]]
template sensor:
sensor:
- platform: template
sensors:
#----- Front door
front_door:
value_template: >
{%- set time = (as_timestamp(now()) - as_timestamp(states.binary_sensor.contact_sensor.last_changed)) | int %}
{%- set minutes = ((time % 3600) // 60) %}
{%- set hours = ((time % 86400) // 3600) %}
{%- set days = (time // 86400) %}
{% if time < 60 %}
'<1m'
{%- else -%}
{%- if time > 86400 -%}
{{days}}d
{%- else -%}
{%- if time > 3600 -%}
{{hours}}h
{%- else -%}
{%- if time > 60 -%}
{{minutes}}m
{%- endif -%}
{%- endif -%}
{%- endif -%}
{% endif %}
so the questions i have :
- can i have multiple entities in the template sensor so i don’t need to clutter config file.
- if i use method #2 can i somhow change the display from “10 minutes ago” to “10m”
1 Like
@Mariusthvdb you are right, the code done by others is never a way to improve the knowledge.
Unfortunately I don’t have a config of my button card because I’m not able to write down.
I only wrote this:
type: custom:button-card
entity: input_boolean.scaldabagno_temporizzato
name: Scaldabagno temporizzato
icon: mdi:thermometer-plus
color: auto
size: 12%
aspect_ratio: 4/1
and the result is this:
I would like to trasform the button above in the botton below:
A result like this one:
Thank you!
first off: I think if you have such specific demands for the output, a template sensor indeed is best, because you have 100% control.
can you use multiple entities in the template sensor: not sure what you want? I suppose anything possible please describe what you want so we can answer more helpful…
method 2 and change to 10m: I dont think so. It uses a predefined format that the current frontend makes of these timestamp sensors.
yes, that is the use for the custom_field notification, as I mentioned before. You add the template for that, and ofc the definition for the notification itself.
You got to see it like this:
the button needs a config for the various fields in the button and styling of those places, and it needs the content for those fields.
Many are predefined, and can be used out of the box. If those int suffice, you have 100% freedom to do as you like with custom_fields. for which you then again need to provide a config and styling on the one hand, and content on the other.
here is my template for the custom_field:My Button card templates · GitHub
type: custom:button-card
template: styles_cf_notification
entity: input_boolean.scaldabagno_temporizzato
name: Scaldabagno temporizzato
icon: mdi:thermometer-plus
color: auto
#size: 12% # not sure why you have 12% there, take it out, and see if the default is ok now
aspect_ratio: 1/1 # <-- since you needed a square button, use 1/1 ;-)
then you need tp provide the custom_field itself to the button
custom_fields:
notification: >
[[[ return entity.state; ]]]
1 Like
the new behavior of binary_sensors having a ternary (…) state ‘unknown’ poses some serious issues… my button cards for motion_sensors always showed ‘Clear’ or ‘Detected’. the new unknown state of the button is really ugly and shows when the switch turning the motion sensor on/off is off.
I tried to mitigate that using a state_display:
button_motion:
variables:
id: >
[[[ return 'switch.' + entity.entity_id.split('.')[1]; ]]]
state_display: >
[[[ return states[variables.id].state == 'off' ? 'Turned off' : entity.state; ]]]
which I thought works ok. However, I now notice that changes Clear/Detected to Off/On … entity.state alright.
Is there no way to add the state_display only for the states[variables.id].state == 'off' ? Ofc I tried it under a state: operator: template, but had no luck, anti isnt listed GitHub - custom-cards/button-card: ❇️ Lovelace button-card for home assistant
@romrider, would you accept a FR for adding state_display to state: ?
without state_display:
with state_display:
edit
I had brainwave:
state_display: >
[[[ if (states[variables.id].state == 'off') return 'Turned off'; ]]]
to only pull out the specific state, and not touch behavior otherwise.
makes it happen… though because I have learned early on not to use unguarded templates, it tried
state_display: >
[[[ return states[variables.id].state == 'off' ? 'Turned off' : null ; ]]]
and that too seems to behave properly
Thank you @Mariusthvdb,
here you are the code; I’ m not able to understand; ah… I am a noob 
What’s my errors?
I have a pet tracker (via SureHA) and I want to track the last change. I can’t use show_last_changed because that resets when the server restarts. This is the template code that works in Lovelace I came up with, but I can’t seem to get it to work in the button.
{{ relative_time(strptime(state_attr('binary_sensor.katniss', 'since'), '%Y-%m-%dT%H:%M:%S%z')) }}
Any ideas?
You can do that instead and it will revert to the default way of showing the state:
state_display: >
[[[ return states[variables.id].state == 'off' ? 'Turned off' : undefined; ]]]
Edit: I’ve seen you’ve answered yourself also with that solution
Yeah . Though : undefined would be better?
You didn’t copy the template… do you have button_card_template configured at all?
Check the documentation for that
Same result as null or not returning anything
1 Like