styles:
card:
…
…
- padding: 0
1 Like
can you post the code for the circle with the 100%??
or someone else?
Here you go…a few types to play with 
Change Icon Color
show_name: true
show_icon: true
type: custom:button-card
state:
- value: 'on'
color: red
- value: 'off'
color: green
tap_action:
action: more_info
entity: binary_sensor.zigbee_garage_motion
name: Garage Motion
show_name: true
show_icon: true
type: custom:button-card
state:
- value: 'on'
color: red
- value: 'off'
color: green
tap_action:
action: more_info
entity: binary_sensor.zigbee_garage_door
name: Garage Door
Change Icon Color AND Background Color
show_name: true
show_icon: true
type: custom:button-card
state:
- value: 'on'
color: red
styles:
card:
- background-color: black
- value: 'off'
color: green
styles:
card:
- background-color: orange
tap_action:
action: toggle
entity: binary_sensor.zigbee_garage_motion
name: Garage Motion
show_name: true
show_icon: true
type: custom:button-card
state:
- value: 'on'
color: red
styles:
card:
- background-color: black
- value: 'off'
color: green
styles:
card:
- background-color: orange
tap_action:
action: toggle
entity: binary_sensor.zigbee_garage_door
name: Garage Door
And some animation
color: auto
color_type: card
entity: binary_sensor.zigbee_garage_motion
name: Garage Motion
state:
- value: 'on'
color: yellow
icon: mdi:motion-sensor
styles:
card:
- animation: blink 2s ease infinite
- operator: default
color: green
type: custom:button-card
color: auto
color_type: card
icon: mdi:door
entity: binary_sensor.zigbee_garage_door
name: Garage Door
state:
- value: 'on'
color: yellow
icon: mdi:alert
styles:
card:
- animation: blink 2s ease infinite
- operator: default
color: green
type: custom:button-card
2 Likes
I want some help with the use off mediaquery in the card attribute, I Want to use different widths for the card in different media screen sizes.
I have this so far, but not working
card:
- background: url('https://demo.home-assistant.io/stub_config/bedroom.png')
- background-size: cover
#- width: 417px #1920x1080
- height: 234px #1920x1080
- padding-top: 0px
- padding-bottom: 0px
- width: >
[[[
if window.matchMedia('(max-width: 414px)');
return' 410px';
]]]
Have a look here:
https://community.home-assistant.io/t/lovelace-button-card/65981/6470
Copy and paste the whole code in an empty card and change the light entity to your needs.
1 Like
thank you.
is it possible to reload the card for example every 30 seconds?
i use varaibles to show a poster of a movie, but it only changes if i reload the page.
the triggers_update: all works not very well, he updates the posters every second or every 2 seconds. is it possible to define a time or a script or template or something else?
Is it possible what I trying to achieve?
I’m trying to use an If statement to control what’s displayed for the state on my card.
When my Pool pump is off he card looks like:
when its running:
The fan turns green and spins when the pump is on.
below it is the word ‘On’, I would a like a single icon, and for it to show the power being used by the pump.
Currently this is shown in the button above, so I’ve got two icons for the pump, which isn’t a good layout.
I tried to use an if statement to say:
If the pump is on show the power rating from the sensor reading the pump power
If it’s off show the word 'Off"
My if staement is half way down (line 63)
Is this possible, or am I wasting my time?
TIA
type: grid
cards:
- type: custom:button-card
entity: binary_sensor.garage_door
show_icon: true
show_name: true
aspect_ratio: 1/.9
tap_action:
action: toggle
entity_id: switch.sonoff_100077f6f7
name: Garage
icon: mdi:garage-variant
state:
- value: 'on'
icon: mdi:garage-open-variant
color: rgb(255,0,0)
- value: 'off'
color: rgb(0,255,0)
- type: entities
entities:
- entity: sensor.waze_travel_time
name: '-'
show_header_toggle: false
title: KEMH
state_color: false
- type: button
tap_action:
action: toggle
entity: sensor.shelly_shsw_pm_a4cf12f3d92a_current_consumption
icon: mdi:fan
name: Pool Pump
show_state: true
- type: custom:button-card
name: Disco
aspect_ratio: 1/.75
state:
- value: 'on'
color: white
styles:
icon:
- animation:
- blink 4s linear infinite
tap_action:
action: toggle
entity: switch.shelly_shsw_1_8caab561bd89
icon: mdi:string-lights
- type: custom:button-card
name: Porch
aspect_ratio: 1/.75
state:
- value: 'on'
color: white
styles:
icon:
- animation:
- blink 4s linear infinite
tap_action:
action: toggle
entity: switch.sonoff_1000772a50
icon: mdi:string-lights
- type: custom:button-card
name: Pool Pump
show_state:='[[[ if (states["switch.sonoff_1000772a50"].state > 'on') return sensor.shelly_shsw_pm_a4cf12f3d92a_current_consumption; else return 'Off']]]'
state:
- value: 'on'
color: green
spin: true
tap_action:
action: toggle
entity: switch.shelly_shsw_pm_a4cf12f3d92a
icon: mdi:fan
- type: button
tap_action:
action: toggle
entity: light.boys_lounge_lamp_level_light_color_on_off
name: Boys Lamp
- type: button
tap_action:
action: toggle
entity: light.pit_table_lamp_level_light_color_on_off
name: Pit Lamp
- type: button
tap_action:
action: toggle
entity: light.upper_hall_light_level_light_color_on_off
name: Upper Hall
square: false
Good afternoon all!
I hope someone can help me with this. I have a button where the image changes on the state of a light. Now, the width of the button is too much. See the first light grey button. How to slim down the button?
type: custom:button-card
entity: light.bevochtiger
name: ' '
show_entity_picture: true
show_state: false
tap_action:
action: toggle
state:
- entity_picture: https://www.nederland.fm/i/l/538nonstop.gif
value: 'off'
styles:
card:
- ghbackground-color: rgba(0, 0, 0, 0.0)
- box-shadow: none
- border-radius: 0px
- padding-top: 0px
- padding-bottom: 0px
- margin-bottom: 0px
name:
- font-size: 0px
- color: yellow
- align-self: middle
- padding-top: 0px
- padding-bottom: 0px
- entity_picture: https://i.imgur.com/Cm7I4QX.png
value: 'on'
styles:
card:
- gbackground-color: rgba(0, 0, 0, 0.0)
- box-shadow: none
- border-radius: 100px
- padding-top: 0px
- padding-bottom: 0px
- margin-bottom: 0px
name:
- font-size: 0px
- color: yellow
- align-self: middle
- padding-top: 0px
- padding-bottom: 0px
In additon: the grey background on the first one is for illustration. I know how to remove the background, but I want the button to be smaller without the image to be smaller.
Thanks for this great work. It has improved my mobile UI tremendously.
I use proximity to both trigger events when someone is close to a zone and also to get a sense of how far someone is from home. To do this I want to change the size of the icon, but I am struggling to get it to work properly. I can enter size: 30% for example, and everything works great. But when I try to use a template I do not see any change.
This clearly shows that proximity is picking up my movements correct.
The button card doesn’t show any change in size.
The code Is am using is:
- entity: proximity.trevor
size:
- operator: template
value: |
[[[
var dst = 1.0 * states['proximity.trevor'].state;
var sz = dst < 0.1 ? '100' : Math.round(100.0/Math.log10(dst/0.1));
return sz + '%';
]]]
styles:
card:
- height: 100px
state:
- value: 100
operator: '>'
id: value_on
icon: mdi:home-export-outline
- value: 100
operator: <=
id: value_off
icon: mdi:home-account
template: standard
color_type: icon
name: Trevor
label: |
[[[
return states['proximity.trevor'].attributes.dir_of_travel;
]]]
show_label: true
show_last_changed: false
type: custom:button-card
I knw that the math is correct because I can output the values of dst and sz on the label:
name: Trevor
label: |
[[[
var dst = 1.0 * states['proximity.trevor'].state;
var sz = dst < 0.1 ? '100' : Math.round(100.0/Math.log10(dst/0.1));
return dst + ' : ' + sz + ' : ' + states['proximity.trevor'].attributes.dir_of_travel;
]]]
Agreed.
Mobile is where custom:button-card really sings. I normally like to have a “dense” UI anyway, but on mobile, getting the most (readable) information on the screen is vital.
Any idea what I am doing incorrectly for the size of the icon?
@MilesAheadToo , I haven’t had any luck using the size property. I haven’t dug into it to figure out why, but I work around it by using CSS on the card style. This example sets height and width, but I don’t remember if that’s the CSS I manipulated last time I was doing it. You can try other CSS and see what it does. You can affect quite a lot. Review the documentation on github for other parts of the card you can define styles for.
type: custom:button-card
entity: switch.office_neon
styles:
card:
- height: 50px
- width: 50px
Do you have full code for the update card?
Hi
Anyone can help me passing a helper in the button card service call action?
This works
However, when I make a card like this, I get the error
type: custom:button-card
name: Set limit<br />to xx
show_state: true
icon: mdi:battery-negative
confirmation:
text: '[[[ return `Are you sure, pal?` ]]]'
styles:
card:
- height: 85px
name:
- font-size: 14px
- padding: 5px
state:
- font-size: 14px
- padding: 1px
color: grey
icon:
- color: grey
tap_action:
action: call-service
service: skodaconnect.set_charge_limit
service_data:
device_id: c885bfeeb8bd2af7035e4c611f1a8e25
limit: '{{states(''input_number.setchargelimitnumber'')|int}}'
Strange, considering the helper is actually a number meeting the criterium (and see above also the service call works with the helper set to the same value when running it in the test env). I think it is passing it as a string rather than a number or something (despite me trying to force it as int)
Try double-quote (“) around that entity instead of two single-quotes in a row (‘’).
trying to display information from two sources on one button, I’m trying to use an IF statement, is that the right way to go?
show_state:='[[[ if (states["switch.sonoff_1000772a50"].state > 'on') return sensor.shelly_shsw_pm_a4cf12f3d92a_current_consumption; else return 'Off']]]'
@alanbarn, I see a few things in that you will need to change.
- show_state expects a boolean and is used to show or hide the state. You want to use state_display instead.
- you don’t want an
=after the colon. The syntax for yaml isproperty: 'value'for strings. - Your check of
> 'on'probably isn’t doing what you want. Typically you would be checking==or!=for s string value. - your first return is an entity_id, but unquoted. You really want to return the state value of the entity instead.
Can you help I want to make a hexagon button can this been done? If so can share some code.
Thanks