Nope nothing, not a single log unfortunately!
Think I may have got there at last. Try this:
tap_action:
action: call-service
service: vacuum.send_command
service_data:
entity_id: vacuum.robomac
command: reset_consumable
params:
- >
[[[ return states['input_select.robomac_reset'].state + '_time'; ]]]
There were a couple of issues. Needing to pass the parameter as a yaml list, and a missing .state to return the entity state in a javascript template. If it works, you should in theory be also able to set it out like this:
params: ["[[[ return states['input_select.robomac_reset'].state + '_time'; ]]]"]
Hi all
the last couple of days I began making my first custom buttons.
I need some help. mainly to understand if this can be done or not. ( I think not).
so I have the following simple button with the below code which is working. Donât pay attention to the icons etc.
aspect_ratio: 1/0.6
name: Laundry
show_icon: false
color: steelblue
size: 45%
tap_action:
action: fire-dom-event
browser_mod:
command: popup
deviceID: b4dcdef6_ec5cae64
title: Bath Lights
card:
type: entities
entities:
- entity: switch.bath_light_1
- entity: switch.bath_light_2
- entity: switch.wc_light
- type: divider
- entity: sensor.temperature_purifier
secondary_info: last-changed
- entity: input_number.how_water_temperature
- entity: input_number.water_heater_minutes
- entity: switch.sonoff_100099b6de
- entity: sensor.water_heater_daily_time
- entity: sensor.water_heater_time_on
secondary_info: last-changed
- type: divider
- entity: sensor.bath_temp_2
secondary_info: last-changed
show_name: true
entity: sensor.temperature_31
show_state: true
state:
- value: 20
operator: <
color: red
- value: 20
operator: '>='
color: steelblue
styles:
card:
- background-color: '#00000'
- border-radius: 10%
- font-size: 11px
- color: steelblue
type: custom:button-card
Here is what I need ideally.
I would like (somehow) to add one more entity the binary.sensor.openclose42 and just show itâs state.
It is a door contact so I would like to saw âwindow:open or closeâ, or just open-close below or above the temperature.
Can this be done?
Works perfectly, thanks so much!!!
How can I remove the name and icon from the graph part?
- type: custom:button-card
entity: sensor.ckb_value
aspect_ratio: 1/1
show_icon: false
custom_fields:
graph:
card:
type: sensor
entity: sensor.ckb_value
graph: line
style: |
ha-card {
box-shadow: none;
}
styles:
custom_fields:
graph:
- filter: opacity(50%)
- overflow: unset
card:
- overflow: unset
grid:
- grid-template-areas: '"n" "graph"'
- grid-template-columns: 1fr
- grid-template-rows: 1fr min-content min-content
hold_action:
action: more-info
Try this.
type: custom:button-card
entity: sensor.bathroom_temperature
aspect_ratio: 1/1
show_icon: false
custom_fields:
graph:
card:
type: sensor
name: ' '
icon: ' '
entity: sensor.bathroom_temperature
graph: line
style: ha-card {
box-shadow: none; }
styles:
custom_fields:
graph:
- filter: opacity(50%)
- overflow: unset
card:
- overflow: unset
grid:
- grid-template-areas: '"n" "graph"'
- grid-template-columns: 1fr
- grid-template-rows: 1fr min-content min-content
hold_action:
action: more-info
No name or icon.
1 Like
trying to style a button-card header with my button template:
button_default_title:
aspect_ratio: 12/1
tap_action:
action: none
styles:
card:
- background-color: var(--background-color-off)
- color: var(--text-color-off)
- font-size: 24px
# - font-weight: bold
- padding: 16px
name:
- justify-self: left
to have the same look as my regular card headers, which use:
card_mod: &header
style: |
.card-header {
background-color: var(--background-color-off);
color: var(--text-color-off);
padding-top: 0px;
padding-bottom: 0px;
margin: 0px 0px 16px 0px;
}
(only need the button-card as header because of the fact I sometimes need to have a tap_action/hold action)
however, this is the result:
left the custom:button-card, right the regular entities card with the card-mod.
even though CSS Padding tells us padding: 16px should set it for all sides, I can not make it happen. It does change the left-side padding, but not the top and bottom. Ive also tried padding-top/padding-bottom, but that is fruitless also.
setting
name:
- padding-top: 16px
- padding-bottom: 16px
doesnt work eitherâŚ
but taking out aspect_ratio is getting really close:
button_default_title:
# aspect_ratio: 12/1
tap_action:
action: none
styles:
card:
- background-color: var(--background-color-off)
- color: var(--text-color-off)
- font-size: 24px
# - font-weight: bold
- padding-left: 16px
- padding-top: 8px
- padding-bottom: 8px
name:
- justify-self: left
Anyone around to help me make it happen 100% ?
thanks for having a look!
hello, I would like to create a button card that changes the background of the card to me when a template sensor varies as an attribute has an entity_picture.
type: custom:button-card
name: Radio
entity: input_boolen.web_radio
styles:
card:
- background: |
[[[
return ââ + states[âsensor.template_radio_provaâ].attributes.entity_picture;
]]]
- background-size: cover
- background-blend-mode: screen
I am in my novice
Hi All. In the button card example, how can i make the custom field icon spin and change color when state is âONâ 
Cant figure out to rewrite the code correctly.
temp: >
[[[
return `<ha-icon
icon="mdi:thermometer"
style="width: 12px; height: 12px; color: yellow;">
</ha-icon><span>${entity.state}°C</span>`
]]]
``´´Can we use new templating with custom button?
according to docs:
Avoid using
states.sensor.temperature.state, instead usestates('sensor.temperature'). It is strongly advised to use thestates(),is_state(),state_attr()andis_state_attr()as much as possible, to avoid errors and error message when the entity isnât ready yet (e.g., during Home Assistant startup).
tried replacing templates from states[''].state to states('') but it always gives error
hey guys,
i´m trying to get a button like this.
somehow i just dont manage to figure out how the grid stuff works.
3 button on the bottom should call a service when it´s getting taped.
anyone has something similar working already that i could copy and modify?
Why donât use the templates of âminimalistâ straight away, which Is what you are showing?
the only template i found is the cover template and somehow i didnât figure out what all i gotta change. made some small steps, might have to look into it again.
It Is under UI/config/minimalist-templates
1 Like
Donât think so. Use javascript between [[[ and ]]]. Itâs a challenge moving between yaml and javascript depending on the context. Hereâs an example that works with button-card:
tap_action:
action: call-service
service: >
[[[
if ( states['alarm_control_panel.house'].attributes.arm_up_state == 'not_ready_to_arm' )
return 'script.do_nothing';
else
return 'script.append_number_to_alarm_code';
]]]
Unfortunately no, I didnât find a solution. Does anybody have an idea?
cover.set_cover_position â Doesnât work.
Anyone can help here?
I have this code this does not work:
type: custom:button-card
tap_action:
action: call-service
service: cover.set_cover_position
service_data:
position: 75
target:
entity_id: cover.master_bedroom_shutter_1
name: Master Bedroom 75 Left
entity: cover.master_bedroom_shutter_1
It gives me this error:
Failed to call service cover/set_cover_position. must contain at least one of entity_id, device_id, area_id.
Strange is if I use regular button al works fine, for example this code works:
type: button
tap_action:
action: call-service
service: cover.set_cover_position
service_data:
position: 75
target:
entity_id: cover.master_bedroom_shutter_1
name: Master Bedroom 75 Left
entity: cover.master_bedroom_shutter_1As this is a custom card, I donât think it uses the target keyword in service calls.
Does this work?
type: custom:button-card
tap_action:
action: call-service
service: cover.set_cover_position
service_data:
entity_id: cover.master_bedroom_shutter_1
position: 75
Yes, it works.
the entidy:id has to be placed in service_data.
Thanx.
