you’re trying to get the state from an entity that doesn’t exist.
1 Like
Yes, you’re right… i have a media_player not loaded…
ok, been busy doing other things, now back on these buttons, trying to work out how to have an image on the left and text on the right, all effectively on the same line, not text lower than image?
Any ideas?
I am starting to try simplifying some of my buttons with templates. I figured out the basics, but I am a little confused how to handle the tap_action: and state: sections of my buttons most simply with a template. I would appreciate a littel help if possible.
button config:
- type: custom:button-card
name: AndroidTV
icon: mdi:android
template: remote-input
tap_action:
service_data:
source: Fire TV
state:
- operator: template
value: >
[[[ return states['media_player.main_zone'].attributes.source === 'Fire TV' ]]]
- type: custom:button-card
name: PS4
icon: mdi:playstation
template: remote-input
tap_action:
service_data:
source: PS4
state:
- operator: template
value: >
[[[ return states['media_player.main_zone'].attributes.source === 'PS4' ]]]
template config:
remote:
color_type: icon
color: "var(--primary-text-color)"
styles:
card:
- border-radius: 10px
remote-input:
template: remote
entity: media_player.main_zone
tap_action:
action: call-service
service: media_player.select_source
service_data:
entity_id: media_player.main_zone
state:
color: "var(--primary-color)"
Been updating my custom cards and am now getting this error in my Chrome console. Looks like it’s coming from Button Card. Any ideas?
button-card.js:1767 BUTTON-CARD Version 3.0.0
hui-stack-card.ts:97 Uncaught TypeError: Cannot read property 'replaceChild' of null
at HTMLElement._rebuildCard (hui-stack-card.ts:97)
at HTMLElement.t.addEventListener.once (hui-stack-card.ts:85)
at r (fire_event.ts:76)
at create-card-element.ts:111
I’m just starting to create my light button cards using a template copied from this thread and I have an issue with the buttons stacking on top of each other. I tried hard cache reloading etc. Any idea why this is happening?
lovelace:
- entity: light.kitchen_light_level
icon: 'mdi:rice'
name: Kitchen
template: light_button
type: 'custom:button-card'
- entity: light.alfresco_spotlight
icon: 'mdi:spotlight-beam'
name: Alfresco Spotlight
template: light_button
type: 'custom:button-card'
- entity: light.bedroom_lamp
name: Bedroom Lamp
template: light_button
type: 'custom:button-card'
- entity: light.couch_light
name: Couch Light
template: light_button
type: 'custom:button-card'
button_card_templates:
light_button:
hold_action:
action: more-info
label: >
[[[ var bri = Math.round(entity.attributes.brightness / 2.55); if
(entity.state === 'on') return (bri ? (bri+"%") : '') ]]]
layout: icon_label
show_label: true
show_name: true
state:
- styles:
card:
- box-shadow: '0px 0px 10px 3px #F9C536'
icon:
- color: '#F9C536'
value: 'on'
aspect_ratio: 1/1
styles:
card:
- width: 100px
- height: 100px
- border-radius: 15px
- margin: 5px 5px 0px 0px
- padding: 0px 0px
- '--paper-card-background-color': 'rgba(40, 40, 40, 0.7)'
grid:
- grid-template-rows: 42px auto 0px
- grid-template-columns: 42px auto
icon:
- width: 30px
- color: white
label:
- font-size: 12px
- font-weight: bold
- color: white
name:
- justify-self: start
- align-self: end
- padding: 9px 10px
- font-size: 12px
- font-weight: bold
- color: white
tap_action:
action: toggle
EDIT: Guessing I have to put them into vert / horizontal stacks…
EDIT 2: Nope, that didn’t work-
- type: vertical-stack
cards:
- type: horizontal-stack
cards:
- type: 'custom:button-card'
entity: light.alfresco_spotlight
icon: 'mdi:spotlight-beam'
template: light_button
- type: 'custom:button-card'
entity: light.kitchen_light_level
icon: 'mdi:rice'
name: Kitchen
template: light_button
- type: 'custom:button-card'
entity: light.dining_lights
template: light_button
- type: horizontal-stack
cards:
- type: 'custom:button-card'
entity: light.couch_light
template: light_button
- type: horizontal-stack
cards:
- type: 'custom:button-card'
entity: light.bedroom_lamp
template: light_button
You can use aspect_ratio instead. Fixed width is fixed width unfortunately. Nothing I can do there.
tap_action is not yet possible, you have to redefine the whole object
But for state, you should merge them by id: 3 bullet here
Probably because you have defined a width and a height in the styles of card at the same time as aspect_ratio. Those are 2 mutually exclusive settings.
Anyone familiar if there is a way to force a name definition to be presented as two lines? I’m getting the issue that depending on whether its laptop or ios, it breaks differently. If I add padding, its fine on the laptop but goes to three lines on the phone.
The ideal solution would always display the name as two lines.
- type: "custom:button-card"
template: light_button
entity: light.crown_molding
name: Crown Molding
icon: mdi:crown
hold_action:
action: more-info
entity: light.crown_molding
styles:
name:
- color: var(--primary-text-color)
- text-overflow: unset
- white-space: unset
- word-break: break-word
- padding-left: 5px
- padding-right: 5px
I’ve tried these suggestions without any luck: https://stackoverflow.com/questions/3790454/how-do-i-break-a-string-over-multiple-lines
You could do
name: Window <br> Lights
That fixed it, thanks. I didn’t see them described as mutually exclusive anywhere.
Im trying to split a template sensor into lines. sensor.afc
my sensor attributes reads as follows.
Ravens 7 2 0 Steelers 5 5 0 Browns 4 6 0 Bengals 0 9 0
But I would like to have it show like this:
Ravens 7 2 0
Steelers 5 5 0
Browns 4 6 0
Bengals 0 9 0
Is there anyway to split the state in this card?
This is just what the doctor ordered. Much obliged!
Something like this should do the trick:
const words = entity.state // replace this with where your value comes from if it's not the state.
const re = /\b[\w']+(?:[^\w\n]+[\w']+){0,3}\b/
return words.split(re).join('<br/>')
1 Like
Hello.
Would someone mind helping on the below. I want to get the two “BBC one” cards below my media player to be deeper, like the stand alone version below the two buttons.
I also want to pad the text over slightly so it doesnt end right on the edge of the button, but cannot work out how to control height of the card?
- type: horizontal-stack
cards:
- type: custom:button-card
entity: switch.skyq_bbconelounge
show_entity_picture: true
name: BBC one
#show_name: true
show_icon: false
show_label: false
show_state: false
styles:
grid:
- grid-template-areas: '"i n" "i s" "i l"'
card:
- padding: 0px
img_cell:
- justify-content: start
name:
- justify-self: center
- padding-left: 0px
entity_picture: "/local/images/remote/bbconefaded2.png"
I am getting the below error in my log very frequently. Any thoughts on how to remedy?
IPAddress/community_plugin/button-card/button-card.js:1369:12 Uncaught TypeError: t.substr is not a function
Sorry for the lame question, I don’t know how to search for an answer. When I try to use the sample cards in the description. Some of the characters are changing after saving. I also tried the RAW editor.
Sample code:
custom_fields:
temp: >
[[[
return `<ha-icon
icon="mdi:thermometer"
style="width: 12px; height: 12px; color: yellow;">
</ha-icon><span>${entity.state}°C</span>`
]]]
Code i have after the saving:
custom_fields:
temp: |
[[[
return `<ha-icon
icon="mdi:thermometer"
style="width: 12px; height: 12px; color: yellow;">
</ha-icon><span>${entity.state}°C</span>`
]]]
Basically almost all > symbols change to | symbol, but not all. I believe, this is the reason, why the more complicated template based button cards are not working for me. What do I do wrong?
Being new to this card I’m having some trouble. I used copied code from this thread to get my light template working to show the brightness level, which is great. Now I’m trying something different and not having any luck. Hopefully someone can please help me.
I’d like to have a button that displays the current selection of an input_select in place of where I have the dimmer setting in this example
This is what I currently have for the above example:
button_card_templates:
light_button:
hold_action:
action: more-info
label: >
[[[ var bri = Math.round(entity.attributes.brightness / 2.55); if
(entity.state === 'on') return (bri ? (bri+"%") : '') ]]]
layout: icon_label
show_label: true
show_name: true
state:
- styles:
card:
- box-shadow: '0px 0px 10px 3px #F9C536'
icon:
- color: '#F9C536'
value: 'on'
styles:
card:
- width: 100px
- height: 100px
- border-radius: 15px
- margin: 5px 5px 0px 0px
- padding: 0px 0px
- '--paper-card-background-color': 'rgba(40, 40, 40, 0.7)'
grid:
- grid-template-rows: 42px auto 0px
- grid-template-columns: 42px auto
icon:
- width: 30px
- color: white
label:
- font-size: 12px
- font-weight: bold
- color: white
name:
- justify-self: start
- align-self: end
- padding: 9px 10px
- font-size: 12px
- font-weight: bold
- color: white
tap_action:
action: toggle
Hoping to create a similar template called input_select_button and use minimal code in the main lovelace such as:
- type: 'custom:button-card'
entity: input_select.dishwasher_status
template: status_button
If someone could please point me in the right direction, that would be awesome, cheers.
Hi,
I’m trying to create a button that calls a script passing a parameter, however I’m having trouble figuring out the correct syntax or even if this is possible. I’ve looked through this thread and read some examples of how to do this however I could not get any of them to work. Here is my latest attempt at this:
This is my button card config:
- cards:
- action: call-service
icon: 'mdi:music'
name: Classis Rock
size: 50px
tap_action:
action: call-service
service: script.script_great_room_channel
service_data:
channel_num: 722
type: 'custom:button-card'
This is my script:
script_great_room_channel:
sequence:
- service: remote.turn_on
entity_id: remote.great_room
data:
activity: "Television"
- service: remote.harmony_change_channel
entity_id: remote.great_room
data:
channel: '{{ channel_num }}'
The error I get when trying this is: expected int for dictionary value @ data[‘channel’]
I don’t believe the channel_num value is being passed into the script at all. I’ve trying to have a number of buttons that turn my TV on and switch to a specific channel, but I don’t want to have a distinct script for each of the different buttons/channels.
Any help with this would be very much appreciated. Thank you in advance.
Paul
Your indention in the script looks wrong, your variables only seem to be indented by one space.
Not sure if that will solve your problem though?
Also
Your data for the channel part of your script should be data_template
1 Like