Hi guys, have a weird issue, and it seems it’s related to button card somehow…
If I use button card, sometimes (and I can’t pin it down…after restart always) it turns on with just 1% brightness. Driving me nuts
Here is my lovelace config:
- type: "custom:button-card"
entity: light.office_desk
icon: mdi:desk-lamp
name: Bed
styles:
card:
- font-size: 12px
- padding: 6%
grid:
- position: relative
name:
- font-weight: bold
- font-size: 13px
label:
- font-size: 13px
- font-weight: bold
icon:
- margin-bottom: 15px
state:
- value: 'off'
styles:
card:
- filter: opacity(50%)
icon:
- filter: grayscale(100%)
show_label: true
show_state: false
size: 24px
color: auto
hold_action:
action: more-info
layout: icon_label
label: >
[[[ var bri = Math.round(entity.attributes.brightness / 2.55); if
(entity.state === 'on') return (bri ? (bri+"%") : '') ]]]
1 Like
I don’t see any reason specific to button-card that could lead to that.
tap_action:
action: call-service
service: light.toggle
service_data:
brightness: 255
entity_id: entity
odiv
November 8, 2019, 10:43am
2675
Hello everybody!
1 Like
Thanks!
This is the config…without all the css stuff
- type: "custom:button-card"
entity: light.ikea_kitchen
icon: mdi:ceiling-light
name: Kitchen
tap_action:
action: call-service
service: light.toggle
service_data:
brightness: 255
entity: light.ikea_kitchen
Sorry, I edited the original post to correct it
That did the trick! Awesome, much appreciated
Makis
November 8, 2019, 2:36pm
2679
Hi
type: 'custom:button-card'
entity: climate.living_room_ac
icon: 'mdi:cube'
color: 'rgb(28, 128, 199)'
name: Living Room AirCon
font-size: 2px
state:
- value: 'off'
color: 'rgb(134, 134, 134)'
styles:
card:
- height: 140px
- width: 140px
- font-size: 14px
Also please tell me how can I change the images with custom or even better if there are some ready ones I could “download”?
Trying to migrate over from tiles-card and everything works so far.
The only thing I haven’t figured out yet is how do I allow the button card to sit within another card.
To make it more visually clear:
1st row is button-card
2nd row is tiles-card
I tried with - type: entities but that won’t work because they’ll sort vertical instead of horizontal.
- type: horizontal-stack
cards:
- type: custom:button-card
color_type: card
styles:
card:
- height: 40px
icon:
- height: 25px
icon: mdi:desktop-classic
tap_action:
action: call-service
service: script.scene_computer
- type: custom:button-card
color_type: card
styles:
card:
- height: 40px
icon:
- height: 25px
icon: mdi:apple
tap_action:
action: call-service
service: script.scene_apple_tv
Thanks!
VDRainer
November 9, 2019, 6:34pm
2681
Not sure if it helps, but you can use the horizontal-stack in entities with
- type: entities
title: your title
show_header_toggle: false
entities:
- type: custom:hui-horizontal-stack-card
cards:
- type: custom:button-card
...
1 Like
This is perfect! Exactly what I was looking for!
ffm777
November 10, 2019, 10:47am
2683
Hi,
DaveUK83
November 11, 2019, 10:16pm
2684
Evening all! Slowly getting my head around HA, but i’ve been playing around with button card for the past 2 hours and don’t seem to be getting anywhere fast! I can create various things, however I just can’t get them to look how I want!
Would anyone be able to point me int he right direction on how to create something very similar to these four media boxes? (chromecast, xbox one, playstation and xbox 360)
I created that using the mini media player plugin, but it dosen’t allow the tile to change colour when it’s in use. Hopefully I can create something similar that does that, then add the volume control on top.
Would really appreciate any help, pointers or guideance.
I’ve tried using this example code, however the sizes are all out. I can work out who to add style to this code.
type: horizontal-stack
cards:
- type: 'custom:button-card'
name: Chromecast
entity: switch.chromecast
icon: 'mdi:cast'
- type: 'custom:button-card'
name: Xbox One
entity: switch.xboxone
icon: 'mdi:xbox'
- type: 'custom:button-card'
name: Playstation 3
entity: switch.playstation_2
icon: 'mdi:playstation'
- type: 'custom:button-card'
name: Xbox 360
entity: switch.xbox360
icon: 'mdi:xbox'
Seems i’m heading in the right direction, but just need a bit of help getting there!
yes, here you go (note the rounded corners are gone, I’ve taken that out of my theme for now). the floating effect is also set in the theme. its as easy as :
# ha-card-border-radius: '6px'
ha-card-box-shadow: '0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19)'
full set:
type: vertical-stack
cards:
- type: horizontal-stack
cards:
- type: custom:button-card
template: horizontal-filler
- type: 'custom:button-card'
name: Hassio version info
template: button_default_title
- type: custom:button-card
template: horizontal-filler
- type: horizontal-stack
cards:
- type: custom:button-card
template: horizontal-filler
- type: custom:button-card
template: button_updater
entity: binary_sensor.updater
name: Updater
- type: custom:button-card
color_type: blank-card
- type: custom:button-card
color_type: blank-card
- type: custom:button-card
color_type: blank-card
- type: custom:button-card
template: horizontal-filler
- type: horizontal-stack
cards:
- type: custom:button-card
template: horizontal-filler
- !include /config/lovelace/includes/include_button_updater.yaml
- type: custom:button-card
template: button_updater
entity: binary_sensor.ha_update_available
name: Update available
- type: custom:button-card
template: button_body
entity: sensor.ha_current_version
name: Current version
- type: custom:button-card
template: button_body
entity: sensor.ha_local_version
name: Local version
- type: custom:button-card
template: horizontal-filler
using this include:
type: custom:button-card
template: button_body
entity: 'binary_sensor.updater'
icon: 'mdi:home-assistant'
aspect_ratio: 1/1
name: Hassio
show_state: false
styles:
card:
- font-size: 10px
grid:
- grid-template-areas: '"i i" "n n" "current current" "local local" '
name:
- align-self: middle
- padding-bottom: 4px
icon:
- color: >
[[[ if (states['binary_sensor.ha_update_available'].state == 'on') return 'green'; return 'grey'; ]]]
- width: 30%
- animation: >
[[[
if (states['binary_sensor.ha_update_available'].state == 'on') return 'blink 2s ease infinite';
]]]
custom_fields:
current:
- align-self: start
- justify-self: start
- --text-color-sensor: >
[[[ if (states['binary_sensor.ha_update_available'].state == 'on') return 'green'; return 'grey'; ]]]
- --animation: >
[[[
if (states['binary_sensor.ha_update_available'].state == 'on') return 'blink 2s ease infinite';
]]]
local:
- align-self: start
- justify-self: start
custom_fields:
current: >
[[[
return `<ha-icon icon='mdi:home-assistant' style='width: 12px; height: 12px; color: deepskyblue;'>
</ha-icon><span>Current:</span> <span style='color: var(--text-color-sensor);animation: var(--animation)'>${states['sensor.ha_current_version'].state}</span>`
]]]
local: >
[[[
return `<ha-icon
icon='mdi:home-assistant'
style='width: 12px; height: 12px; color: deepskyblue;'>
</ha-icon><span>Local: <span style='color: grey;'>${states['sensor.ha_local_version'].state}</span></span>`
]]]
and button templates:
button_updater:
button_updater:
template: button_body
styles:
icon:
- color: >
[[[ if (entity.state == 'on') return 'green'; return 'grey'; ]]]
- animation: >
[[[
if (entity.state == 'on') return 'blink 2s ease infinite';
]]]
state:
- color: >
[[[ if (entity.state == 'on') return 'green'; return 'grey'; ]]]
- animation: >
[[[
if (entity.state == 'on') return 'blink 2s ease infinite';
]]]
button_body:
button_body:
color: auto
size: 30%
aspect_ratio: 1/1
show_state: true
show_label: true
tap_action:
action: more-info
haptic: light
hold_action:
action: more-info
haptic: success
styles:
icon:
- color: grey
lock:
- color: red
card:
- color: 'var(--primary-color)'
- background-color: 'var(--paper-card-background-color)'
- padding-left: 5px
name:
- text-overflow: unset
- white-space: unset
- word-break: break-word
- text-align: start
- justify-self: start
- font-weight: bold
- font-family: Helvetica
- font-size: 13px
label:
- text-align: start
- font-size: 11px
- font-family: Helvetica
- justify-self: start
state:
- text-align: start
- font-size: 11px
- font-family: Helvetica
- justify-self: start
- text-transform: capitalize
- font-weight: bold
grid:
- grid-template-areas: '"i" "n" "s" "l"'
- grid-template-columns: 1fr
- grid-template-rows: 1fr min-content min-content
img_cell:
- justify-content: start
- align-items: start
2 Likes
DaveUK83
November 12, 2019, 10:43am
2686
Solved - Post below
However the code i’ve used seems to display them as 1x4.
type: horizontal-stack
cards:
- type: 'custom:button-card'
name: Chromecast
entity: switch.chromecast
icon: 'mdi:cast'
layout: name_state
styles:
card:
- height: 60px
- width: 160px
icon:
- color: red
- height: 50px
- width: 50px
- type: 'custom:button-card'
name: Xbox One
entity: switch.xboxone
icon: 'mdi:xbox'
layout: name_state
styles:
card:
- height: 60px
- width: 160px
icon:
- color: green
- height: 50px
- width: 50px
- type: horizontal-stack
cards:
- type: 'custom:button-card'
name: Playstation 3
entity: switch.playstation_2
icon: 'mdi:playstation'
- type: 'custom:button-card'
name: Xbox 360
entity: switch.xbox360
icon: 'mdi:xbox'
- type: 'custom:button-card'
name: Playstation 3
entity: switch.playstation_2
icon: 'mdi:playstation'
layout: name_state
styles:
card:
- height: 60px
- width: 160px
icon:
- color: red
- height: 50px
- width: 50px
- type: 'custom:button-card'
name: Xbox 360
entity: switch.xbox360
icon: 'mdi:xbox'
layout: name_state
styles:
card:
- height: 60px
- width: 160px
icon:
- color: green
- height: 50px
- width: 50px
DaveUK83
November 12, 2019, 11:09am
2687
Thanks @Mariusthvdb
I managed to play around with the code you posted above and created this which seems to have worked a treat!
type: vertical-stack
cards:
- type: horizontal-stack
cards:
- type: 'custom:button-card'
name: Chromecast
entity: switch.chromecast
icon: 'mdi:cast'
layout: name_state
styles:
card:
- height: 60px
- width: 165px
icon:
- height: 50px
- width: 50px
- type: 'custom:button-card'
name: Xbox One
entity: switch.xboxone
icon: 'mdi:xbox'
layout: name_state
styles:
card:
- height: 60px
- width: 165px
icon:
- height: 50px
- width: 50px
- type: horizontal-stack
cards:
- type: 'custom:button-card'
name: Playstation 3
entity: switch.playstation_2
icon: 'mdi:playstation'
layout: name_state
styles:
card:
- height: 60px
- width: 165px
icon:
- height: 50px
- width: 50px
- type: 'custom:button-card'
name: Xbox 360
entity: switch.xbox360
icon: 'mdi:xbox'
layout: name_state
styles:
card:
- height: 60px
- width: 165px
icon:
- height: 50px
- width: 50px
cool, nothing to it is there
since you use this:
layout: name_state
styles:
card:
- height: 60px
- width: 165px
icon:
- height: 50px
- width: 50px
for each card, you might as well create a template and use that template on each button-card, to create cleaner code.
DaveUK83
November 12, 2019, 11:32am
2689
Sounds like a good idea, however i’m just happy I managed to solve this! Will look into that when i’ve built my knowledge up a bit more!
DaveUK83
November 12, 2019, 12:00pm
2690
This is what i’ve got for my state, so that when the Chromecast is on, the card will go red.
- type: 'custom:button-card'
name: Chromecast
entity: switch.chromecast
icon: 'mdi:cast'
layout: name_state
color_type: card
color: auto
state:
- value: 'on'
color: red
styles:
card:
- height: 60px
icon:
- height: 50px
- width: 50px
This does work to an extent! When you turn the chromecast on, the card goes red - However if you navigate to another tab and back again, then it looks like this:
Is that just a quirk, or something i’ve got wrong in my code?
jcreynolds
November 13, 2019, 4:36am
2691
Really enjoying your card. I have a question about a couple of scenarios that impact the look of my button cards. I have specified my width and height in the style of the card to make the cards look more uniform. This works just fine, until the side menu is expanded, when it expands it pushes the cards to the left. When this occurs the right side of the card is cropped off as if it were behind the card. The other scenario that I have this happen to is if i use a non HD display <1920x1080. I am using this card in conjunction with Loven’s layout card. Here are code snippets and a screenshot showing the issue.
Layout-Card:
- type: custom:layout-card
max_width: [12%, 22%, 22%, 22%, 22%]
column_num: 5
max_columns: 5
Button-Card
- type: vertical-stack
cards:
- type: horizontal-stack
cards:
- type: custom:button-card
entity: switch.kitcans3way
name: Recessed Lights
icon: mdi:lightbulb-outline
label: >
[[[
var bri = states['light.kitcanspri'].attributes.brightness;
return 'Brightness: ' + (Math.round(((bri/255)*100)) ? Math.round(((bri/255)*100)) : '0') + '%';
]]]
show_label: true
show_state: true
styles:
card:
- background-image: url("/local/images/darkpanel.jpg")
- background-repeat: no-repeat
- background-color: rgba(50,50,50,0.3)
- background-size: 100% 200px
- border: solid 1px rgba(100,100,100,0.3)
- border-radius: 10px
- box-shadow: 3px 3px rgba(0,0,0,0.4)
- overflow: hidden
- border: 1px solid
- border-color: '#3b3a3a'
- height: 124px
- width: 195px
label:
- color: gray
- font-size: 9px
- justify-self: start
- padding: 0px 10px
state:
- justify-self: start
- font-size: 10px
- padding: 0px 10px
state:
- value: 'on'
icon: mdi:lightbulb-on-outline
styles:
state:
- color: green
- value: 'off'
styles:
state:
- color: red
card:
- filter: brightness(40%)
tap_action:
action: toggle
hold_action:
action: more-info
Edit: Can confirm that setting up using layout-card has no impact its simply because of the forced widths. Is there a better way to do it? Percent based?
maurizio53
November 13, 2019, 12:36pm
2692
What is the meaning of these errors looked at the chrome console?
The cards related to the page are working as expected…
