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
@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”
@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.
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.
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
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 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.
I don’t have the template configured.
Where I must to configured it?
In the configuration.yaml or in a new yaml file? (maybe button_card_template.yaml ?)
I didn’t find where is the explanation about template in documentation… is a labyrinth of informations
If that is configured correctly, you can ‘call’ the template in your button-card config like you do right now.
Its nothing more than taking out often used bits of yaml, into ‘templates’ so you can re-use those as ‘modules’.
I’m trying to make buttons that look similar to the homekit ones but I can’t get the icons to align to the top left. I even copied and pasted the Homekit button example directly from the github and it wasn’t aligned right either. It always stays centered no matter what I try.
Hello Marius,
about the template I would like to learn in the future; for now I would like to understand how work the code for create a button with another INFO in the right top corner.
So, I’ve wrote this code where I understand some things (see the comments in green)
I’m trying to make the button card behave the same as the standard button card but I can’t figure out the right CSS.
On the left is the default HASS button card, on the right is the custom button card
I already fixed the font color and size but I need the name, state and labels to move up closer to the icon. Currently, the icon seems to have a big margin around it and setting margin to 0 on it doesn’t make any difference.
Also, the name is missing the padding on the sides, does anyone how the defaults?
please describe what you want so we can answer more helpful…
