There must be something else though. I agree its more elegant, but also it does not work when I use it “directly”, it only works when using it via a variable… Thats what made me asking…
If you are trying to eliminate currentTime, currentDate or currentHour then I’d suggest reading up on JavaScript Date getHours() Method
There is nothing else, because the time itself is variable. 
1 Like
Thanks for all the tips. I got it working without the variable. Looks like single quotes are needed for the value… It works now, thanks!
Works with: 'Date().getHours()' >= '9'
Or also with: 'now().hour' >= '9'
okay… I think you just invented a new programming language
hahaha.
Well, I dont know if it was too late in the evening or if its an issue with something else. I could swear yesterday it worked, today it doesnt.
I gave up and am using your code now, that works like a charm. Thank you!
Has anyone managed to create a custom button-card that mirrors the formatting of the native Tile card, including colors, hover effect, etc.?
actually… Mushroom and Minimalist made that before HA did… and they both use the custom button card as a base… Minimalist is very well documented and you can read every line of code they used
Custom:Button Card is JS based while Mushroom is Jinga based on the standard Tile card.
Unfortunately the custom Minimalist UI intergration is looking for new Maintainers
UI-Lovelace-Minimalist
Important
Looking for New Maintainers!
This project is in need of new maintainers! The current maintainers are no longer actively working on it, and without fresh leadership, we may be forced to shut down the project and its associated Discord server.
If you’re passionate about this project and would like to take over its development and community management, we’d love to hear from you!
Hello guys. I need your help to create a button card whereto icon must be BLUE (default OFF HA color) when identity is ON and ORANGE, when identity is OFF.
I would like to use the icon mdi:heating-coil for my card.
The card is very simple… the same as HA but only doing the swapping icon colors
identities:
So… the only thing thing is keeping this layout… the icon should be ORANGE when OFF and BLUE when OFF…
I hope you can help me please…
Thanks
the type “entities” has nothing to do with the custom:button-card… you should check the card-mod to make it work in this way
Hi, can someone please confirm that hold_action and confirmation: work together?
I currently have a card with tap_action: toggle and for this I use confirmation:.
I also have hold_action: more-info but this triggers always the confirmation prompt too.
Same issue on mobile (iOS) as well as pc browser (Safari).
Post whole yaml… my first guess would be that you have “confirmation” indented one step to far left…
I’ve created templates for various cards and for switches I use this:
type: custom:button-card
template: switch_power_card
variables:
power_entity: sensor.zgbplug1_power
name: Charger
entity: switch.zgbplug1
confirmation:
text: "[[[ return `Are you sure about toggling?` ]]]"
And the template: switch_power_card:
switch_power_card:
card_mod:
style: |
ha-card {
transition: 300ms !important;
}
triggers_update:
- '[[[ return variables.power_entity; ]]]'
hold_action:
action: more-info
haptic: medium
entity: '[[[ return variables.power_entity ]]]'
show_icon: true
icon: mdi:power-socket
styles:
grid:
- grid-template-areas: '"i state" "n n"'
- grid-template-columns: 1fr 1fr
- grid-template-rows: 1fr min-content
card:
- padding: 15px
- '--mdc-ripple-press-opacity': 0
img_cell:
- justify-self: start
- width: 26px
- height: 26px
- padding-bottom: 10px
icon:
- width: 26px
- color: var(--contrast1)
name:
- justify-self: start
- font-size: 14px
- color: var(--contrast1)
- opacity: '0.7'
- padding: 2px 0px
custom_fields:
state:
- justify-self: end
- font-size: 16px
- font-weight: 500
- margin-top: '-9px'
custom_fields:
state: |
[[[
var power = parseFloat(states[variables.power_entity].state).toFixed(1) + states[variables.power_entity].attributes.unit_of_measurement;
return `<span>${power}</span>`;
]]]
state:
- value: 'on'
styles:
card:
- background: var(--orange)
name:
- color: var(--black)
icon:
- color: var(--black)
custom_fields:
state:
- color: var(--black)
- value: 'off'
styles:
name:
- color: var(--contrast20)
icon:
- color: var(--contrast20)
custom_fields:
state:
- color: var(--contrast20)
As the confirmation text can vary, it’s outside the template.
If I indent one more step in the card, then the configuration is not valid.
What can I do in this case?
As predicted you have “confirmation” in base config, which means you’ll be asked each time and for every tap, double-tap and hold.
Two examples:
- this one will ask you for everything:
type: custom:button-card
name: Charger
entity: switch.zgbplug1
confirmation:
text: "Are you sure about toggling?"
tap_action:
action: toggle
hold_action:
action: more_info
- this one will ask only for tap, but not when hold:
type: custom:button-card
name: Charger
entity: switch.zgbplug1
tap_action:
action: toggle
confirmation:
text: "Are you sure about toggling?"
hold_action:
action: more_info
note that confirmation is indented right in this one, and it’s positioned under “tap_action”, so it’s not in base config.
Thank you, it works as intended now!
1 Like
Hello all,
I have got a dashboard based on custom buttons mostly. I have added some animations to them when a state changes, either “on” or “off” or “0” or “>0” depending on the entity.
Now this all works fine, which has made myself very proud to be honest. However. There is one issue . The animation dont change instantly. So i built a five minute refresh on the dashboard and then the changed status does show the animation. For example the smart plug of the dishwasher detects a change and used wattage is bigger than zero. Meaning it will kick off the dishwasher animation. It changes icon or color instantly but will only show the animation when the page refresh has triggered or i manually change the page. The animation that are always on for example the home ventilation system keeps working all the time. So the problem is when a status is changed.
type: custom:button-card
entity: sensor.vaatwasser_smart_plug_power
state:
- value: unavailable
styles:
label:
- color: white
- font-size: 8px
- justify-self: middle
- padding: 0px 5px
card:
- background-color: black
- box-shadow: 0px 0px 2px 2px red
- font-size: 8px
- height: null
- width: null
name:
- font-size: 25px;
- color: white
icon:
- color: darkslategray
- value: 0
operator: null
icon: mdi:dishwasher
styles:
card:
- background-color: black
- box-shadow: 0px 0px 5px 0px silver
- font-size: 10px
name:
- font-size: 25px;
- color: white
icon:
- color: white
label:
- color: white
- font-size: 10px
- justify-self: middle
- padding: 0px 5px
- value: 0
operator: ">"
icon: mdi:dishwasher
styles:
card:
- background-color: black
- box-shadow: 0px 0px 2px 2px gold
- font-size: 10px
name:
- font-size: 25px;
- color: white
icon:
- color: white
- animation: shake 400ms ease-in-out infinite, drum 2s ease infinite;
- transform-origin: 50% 110%;
show_name: false
show_icon: true
show_state: true
tap_action:
action: toggle
hold_action:
action: more-info
extra_styles: |
@keyframes shake {
0%, 100% { transform: translate(0, 0) rotate(0); }
20% { transform: translate(0.4px, -0.4px) rotate(-4deg); }
40% { transform: translate(-0.4px, 0.4px) rotate(4deg); }
60% { transform: translate(0.4px, 0.4px) rotate(-4deg); }
80% { transform: translate(-0.4px, -0.4px) rotate(4deg); }
}
@keyframes drum {
50% { clip-path: polygon(0 0, 0 100%, 35% 100%, 34% 68%, 60% 41%, 71% 56%, 65% 74%, 47% 79%, 32% 69%, 35% 100%, 100% 100%, 100% 0); }
}
grid_options:
columns: 3
rows: 1
Does anyone know any trick to get the animation to trigger instantly?
Thank you so much again.
Hi, I’m looking for a way to execute some javascript right after custom-button was rendered.
Edit: ok, found it
customElements.whenDefined("button-card").then(() => {
setTimeout(() => {
let el = this.shadowRoot?.querySelector(...
...
},1);
});
Yes, what is happening is the Javascript inside the shadow dom elements does not get executed because it’s sandboxed. The templates are evaluated explicitly and not the same thing, and this is probably related to some elements working with onclick and some not (button card sets up listeners).
I’ve thought about this and what I think I’d recommend is creating an invisible element with an attribute like data-entity_id and putting it into the dom. This is how you can pass variables around, the value of the attribute should be able to be written and read by any function that executes within the context of that component. I know its been about 15 months but maybe you’ll find this useful, or someone will.
I do love this card. I have an issue with it though. In Jinja2 we have area_name to get the area for an entitity_id. How can I do this in javascript?
In this thread this question has been asked once but was left unanswered.