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
I looked at the scripts document more closely and realized my mistake. I needed to use “data_template:” instead of “data:” in the YAML when supplying the channel number in the script. So this works:
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_template:
channel: '{{ channel_num }}'
Thank you. I just realized that as well. It is working now with that change.
Icon size is relative to what?
This code gives me an icon about a third of the height of the card. How can I make it bigger?
- type: custom:button-card
icon: 'mdi:home'
name: Home
show_name: false
color_type: icon
size: 100%
color: white
styles:
card:
- height: 60px
- background-color: '#4cd137'
I’ve also tried changing size to 50px, and I’ve tried styling the icon like this:
- type: custom:button-card
icon: 'mdi:home'
name: Home
show_name: false
color_type: icon
color: white
styles:
card:
- height: 60px
- background-color: '#4cd137'
icon:
- height: 50px
Found solution in topic. However cant get 3 colors to function correctly. Always get RED color.
- type: "custom:button-card"
entity: sensor.speedtest_ping
show_state: true
- type: "custom:button-card"
entity: sensor.speedtest_ping
show_state: true
show_label: false
show_icon: false
show_entity_picture: true
name: "Ping"
# name: '[[[ if (sensor.speedtest_ping > 25) return "Above 25"; else return "Below 25" ]]]'
color_type: card
entity_picture: /local/png_logo/ping1.png
state:
- operator: template
value: return sensor.speedtest_ping.state > 20
styles:
card:
# - color: '#bf4040'
- background-color: '#bf4040' #RED
- operator: template
value: return entity.state > 8
styles:
card:
# - color: '#bf4040'
- background-color: '#c78822' # ORANGE
- operator: template
value: return entity.state < 7
styles:
card:
# - color: '#bf4040'
- background-color: '#819662' # GREEN
Hi
I am trying to setup button card for sensor.speedtest_ping (numeric state).
NB: also cant get ICON template name and Icon template color… - If I enable commented icon template Name - my card disappears from UI.
try:
name: '[[[ if (entity.state > 25) return "Above 25"; return "Below 25"; ]]]'
as for all the state templates: you need to enclose these in the square brackets. [[[ ]]]
label: >
[[[ return entity.state; ]]]
Marius, thanks for Name solution! Worked fine.
Petro, could you please be more specific - I am tooo nubie for templates…
How can I switch betwwen 2 background colors? where should i place " < number" ?
That reply was for @sparkydave.
in regards to the value? It wouldn’t be a template, it would be a style based on state. Don’t use template, just use operator as greater than or less than. If you use a template, you need to convert the state to a number.
Ok. - style based on state
How to mention “> 8” , “>20”, “<6” for states? I need just an example of correct state condition with < or >
state:
- operator: template
value: return sensor.speedtest_ping.state > 20
styles:
card:
- background-color: '#bf4040' #RED
- operator: template
value: return sensor.speedtest_ping.state > 8
styles:
card:
- background-color: '#c78822' # ORANGE
- operator: template
value: sensor.speedtest_ping.state < 7
styles:
card:
- background-color: '#819662' # GREEN
operator: ">"
value: 8
You’re over thinking it. It’s all covered in the docs for the card. No templates required.
Ok… only now I got what is exactly “>” in operator… Thanks !
Just happy) It works.