Hi,
For the love of god, I can’t seem to get/find the option on how to spread an image over a picture entity card.
I’ve set a livesteam which is now covering the half of the button, this seems odd. Is there a way to cover the whole button?
Did you find a solution to it… Anyone?
Can you provide you entire card code, especially if it is nested in a stack card?
Thank you so much!
type: custom:button-card
entity: switch.lounge_socket
show_state: false
show_entity_picture: true
show_name: false
state:
- entity_picture: /local/gridpoweron.svg
value: 'off'
- entity_picture: /local/gridpoweron.svg
value: 'on'
- entity_picture: /local/gridpoweroff.svg
value: unavailable
styles:
card:
- padding: 1px
- height: 80px
entity_picture:
- width: 100%
- height: 100%
Here’s what it looks like:
So if it’s OFF you want the button height to be 80px?
So, basically I want this card to show if the grid power if on or off based on the state of the entity (switch.lounge_socket). What would be the best way to do so?
In the above example I have the two images with different background colors, green and red, with the respective state, on and off.
If I could do it with a card mod of some sort with only tex SVGs (for state only) and have the card color changed via css it would be really nice.
I can make .SVGs myself no problem there.
No, I don’t know what it does, I was just experimenting.
I just want the image to fill the card and not change size based on the state.
I will put together a few ways. This can be accomplished with most any card. What type of card is most prevalent on your dashboard/s?
I have these cards:
Button Card
Entity Card
Picture Entity Card
Picture Elements Card
Custom: Banner Card
Custom: Button-Card
Though most used are:
“Custom: Button-Card” and “Entity Card”
1 Like
type: custom:button-card
entity: switch.lounge_socket
layout: name_state
show_state: true
show_name: true
show_icon: false
name: GRID POWER
styles:
card:
- border-radius: 0px
state:
- value: 'off'
styles:
card:
- background-color: red
- text-transform: uppercase
- value: 'on'
styles:
card:
- background-color: green
- text-transform: uppercase
- value: unknown
styles:
card:
- background-color: yellow
- color: black
- text-transform: uppercase
1 Like
I really appreciate this! Thank you for all the help!
So, I played around a bit and changed the code to suite my style:
type: custom:button-card
entity: switch.sonoff_socket
show_state: false
show_name: true
show_icon: false
styles:
card:
- border-radius: 0px
state:
- value: 'off'
styles:
card:
- background-color: rgb(0,204,0)
- border-radius: 8px
name: GRID POWER ON
- value: 'on'
styles:
card:
- background-color: rgb(0,204,0)
- border-radius: 8px
name: GRID POWER ON
- value: unknown
styles:
card:
- background-color: red
- color: black
- border-radius: 8px
name: GRID POWER OFF
- value: unavailable
styles:
card:
- background-color: red
- color: black
- border-radius: 8px
name: GRID POWER OFF
2 more things that I’d like to change in this:
- Make tapping the card do nothing (so it only reflects the state and not interact)
- Can I have my .svg as name based on the state “On” or “Off” (because it looks kind of out-of-place in my setup, smaller and a little different font)
Here’s how it looks:
Let’s try this first before SVGs
type: custom:button-card
entity: switch.sonoff_socket
show_state: false
show_name: true
show_icon: false
tap_action:
action: none
styles:
card:
- border-radius: 0px
state:
- value: 'off'
styles:
card:
- background-color: rgb(0,204,0)
- border-radius: 8px
name:
- font-size: 20px
- font-family: Times New Roman
name: GRID POWER ON
- value: 'on'
styles:
card:
- background-color: rgb(0,204,0)
- border-radius: 8px
name:
- font-size: 20px
- font-family: Times New Roman
name: GRID POWER ON
- value: unknown
styles:
card:
- background-color: red
- color: black
- border-radius: 8px
name:
- font-size: 20px
- font-family: Times New Roman
name: GRID POWER OFF
- value: unavailable
styles:
card:
- background-color: red
- color: black
- border-radius: 8px
name:
- font-size: 20px
- font-family: Times New Roman
name: GRID POWER OFF
Do you know the font; you are using?
1 Like
Yes, of course I know the font… It’s Exo not sure how I can use it like this.
Isn’t there anyway I can use the svgs
Yes sir, we should switch to a variable format to simplify. Give me a few…
With variables
type: custom:button-card
entity: switch.sonoff_socket
tap_action:
action: none
aspect_ratio: 2/1
show_name: false
show_icon: false
variables:
'on': |
[[[ return states["switch.sonoff_socket"].state == 'on' ]]]
'off': |
[[[ return states["switch.sonoff_socket"].state == 'off' ]]]
styles:
card:
- background-image: |
[[[
if (variables.on) return 'url(/local/gridpoweron.svg)';
if (variables.off) return 'url(/local/gridpoweroff.svg)';
else {return 'url(/local/gridpoweroff.svg)';
}
]]]
- background-size: 100%
- background-repeat: no-repeat
- background-position: top center
- '--keep-background': 'true'
Without variables
type: custom:button-card
entity: switch.sonoff_socket
tap_action:
action: toggle
aspect_ratio: 2/1
show_name: false
show_icon: false
styles:
card:
- background-image: >
[[[ return entity.state === 'on' ? 'url(/local/gridpoweron.svg)' :
'url(/local/gridpoweroff.svg)';
]]]
- background-size: 100%
- background-repeat: no-repeat
- background-position: top center
- '--keep-background': 'true'
1 Like
Can’t thank you enough for this help…
Got it working just as I wanted to…
Thank you so much!!