I’ve a very strange error which i dont know how to resolve.
For the control of my TV, Netflix, Playstation and so on i use scripts which i activate through the frontend of my dashboard. To do so i use the picture entity card and use a toggle action to activate them. So far so good everythings works.
But the thing im facing is. On my browser on the PC (Chrome latest version) the icons appear good without any white spaces. But on my telephone (chrome latest version) i get underneath the icons a white space. I tried solving it with the aspect_ratio but that didn’t help on my phone. Like nothing worked
Webbrowser
Telephone
Does anybody know what can be the problem, i want them to be perfectly filled (im an perfectionist if it comes to this).
Code is found below
cards:
- type: picture-entity
entity: script.1555789712357
tap_action:
action: toggle
state_image:
'on': /local/ziggo.png
'off': /local/ziggo.png
show_state: false
show_name: false
aspect_ratio: 16x11
- type: picture-entity
entity: script.1555789745221
tap_action:
action: toggle
state_image:
'on': /local/netflixlogo.jpg
'off': /local/netflixlogo.jpg
show_state: false
show_name: false
aspect_ratio: 16x11
- type: picture-entity
entity: script.1555789745889
tap_action:
action: toggle
state_image:
'on': /local/playstation.jpg
'off': /local/playstation.jpg
show_state: false
show_name: false
aspect_ratio: 16x11
- type: picture-entity
entity: script.1555789719863
tap_action:
action: toggle
state_image:
'on': /local/off_logo.jpg
'off': /local/off_logo.jpg
show_state: false
show_name: false
aspect_ratio: 16x11
type: horizontal-stack
tom_l
August 7, 2019, 11:00am
2
It’s because the aspect ratio of your picture entity changes on the smaller width phone screen (narrower compared to height).
There does not appear to be a setting to enable picture scaling natively in the card.
You might be able to use card-mod to set the picture css scaling .
EDIT: Just noticed you are specifying an aspect ratio. Try without it.
aspect_ratio: 16x11
Thanks for your reply. Aspect ratio is not working as it shows the same as with my phone
will try card-mod later. I’m not that good in CSS have to take my time for that
tom_l
August 7, 2019, 11:32am
4
Yeah I’m useless with css, hopefully someone here will know the correct way to stretch the image to fit.
I tried but I don’t seem to get the correct code to stretch the image.
Some css expert around here?
I came this far and none of it worked.
- type: picture-entity
entity: script.1555789712357
tap_action:
action: toggle
state_image:
'on': /local/ziggo.png
'off': /local/ziggo.png
show_state: false
show_name: false
style: |
ha-card {
height: 100%;
margin: 0 auto;
}
img. {
display: block;
margin-left: auto;
margin-right: auto;
}
I’m no star if it comes to CSS
Got it eventually working with button-card
cards:
- type: 'custom:button-card'
entity_picture: /local/ziggo.png
show_entity_picture: true
size: 100%
styles:
card:
- border-radius: 10%
tap_action:
action: call-service
service: script.toggle
service_data:
entity_id: script.1555789745221
- type: 'custom:button-card'
entity_picture: /local/netflixlogo.jpg
styles:
card:
- border-radius: 10%
img_cell:
- border-radius: 15%
tap_action:
action: call-service
service: script.toggle
service_data:
entity_id: script.1555789745221
size: 80%
show_entity_picture: true
- type: 'custom:button-card'
entity_picture: /local/playstation.jpg
styles:
card:
- border-radius: 10%
- justify-content: start
- align-items: start
- margin: none
tap_action:
action: call-service
service: script.toggle
service_data:
entity_id: script.1555789745889
show_entity_picture: true
size: 95%
- type: 'custom:button-card'
entity_picture: /local/off_logo.jpg
tap_action:
action: call-service
service: script.toggle
service_data:
entity_id: script.1555789719863
show_entity_picture: true
size: 125%
styles:
card:
- border-radius: 10%
type: horizontal-stack