I’m facing a problem and I haven’t managed to solve it properly yet. I have made what I believe is a pretty nice dashboard. Only that dashboard is designed on a laptop. The actual dashboard is displayed on wall-mounted Samsung Tab A 7.
On my laptop, I get the dashboard to fill the screen just fine, but on the Samsung tablet, I’m left with a strip at the bottom. I did solve that now by going over the 100% with the placement of some elements and that works fine but for some applications it is not convenient. For example, if you want it to rain on the floor plan when it is also raining outside. Then the animation only takes place on the upper part.
What is also very ugly is that the screen regularly rebuilds and that the lower part of the screen (above 100%) is black for a while.
I have used several methods and so far px works best, but I am sure there is a better and more beautiful method. And there must be someone who has encountered the same problem and has come up with a solution.
Below is a very simplified version of my dashboard. I have removed a lot of things from it and only left a few more or less relevant things.
type: custom:config-template-card
entities:
- binary_sensor.hue_motion
- binary_sensor.room
- sensor.holiday
- sensor.temperature
- sensor.rain
- sensor.wind
- sensor.wind_direction
- sun.sun
- weather.home
card:
type: picture-elements
image: /local/plan/night.png
card_mod:
style: |
ha-card {
height: 800px !important;
width: 1350px !important;
}
elements:
- type: image
image: /local/plan/night.png
tap_action: none
hold_action: none
style:
left: 50%
top: 50%
width: 3800px
- type: image
entity: sun.sun
tap_action: none
hold_action: none
state_image:
above_horizon: /local/plan/gray.png
below_horizon: /local/plan/transparant.png
style:
mix-blend-mode: lighten
opacity: ${ states['sensor.sunlight_opacity'].state }
left: 50%
top: 50%
width: 3800px
- type: image
tap_action: none
hold_action: none
image: /local/plan/testhome.png
style:
left: 60%
top: 60%
width: 100%
- type: image
entity: binary_sensor.hue_motion
tap_action: none
hold_action: none
state_image:
'on': /local/plan/room_red.png
'off': /local/plan/transparent_square.png
unavailable: /local/plan/unavailable.png
style:
filter: ${ "hue-rotate(230deg) saturate(42%)"}
top: 60%
left: 60%
width: 100%
- type: image
entity: person.snuitje
state_image:
home: /local/Droopy.JPG
not_home: /local/plan/transparant.png
unknown: /local/plan/transparant.png
style:
background-color: transparent
border-radius: 10vw
height: 4.0vw
left: 27.5%
top: 8%
width: 4.0vw
tap_action:
action: navigate
navigation_path: /lovelace-tablets/overview
- type: image
image: /local/plan/bar.png
tap_action: none
hold_action: none
style:
left: 5%
top: 50.7%
width: 32%
- type: image
image: /local/plan/bar.png
tap_action: none
hold_action: none
style:
left: 5%
top: 158.2%
width: 32%
- type: image
image: /local/plan/night.png
tap_action: none
hold_action: none
style:
left: 50%
top: 150%
width: 100%
- type: state-label
entity: sensor.time
hold_action:
action: none
style:
color: rgba(255, 255, 255, 0.8)
font-size: 5.41vw
font-weight: 3100
left: 1.7%
letter-spacing: '-0.05vw'
max-width: 1px
top: 8%
tap_action:
action: none
- type: state-label
entity: sensor.date_long
hold_action:
action: none
style:
color: rgba(255, 255, 255, 0.7)
font-size: 1.3vw
font-weight: 600
left: 20.3%
letter-spacing: '-0.05vw'
text-align: left justified
top: 16%
width: 30%
tap_action:
action: none
- type: state-label
entity: sensor.temperature
style:
top: 57%
left: 32%
color: '#e6f25e'
border-radius: 50%
text-align: center
font-80ze: 14px
font-weight: bold
- type: image
entity: sensor.wind_direction
state_image:
CALM: /local/icon/wind/CALM.png
E: /local/icon/wind/E.png
ENE: /local/icon/wind/ENE.png
ESE: /local/icon/wind/ESE.png
'N': /local/icon/wind/N.png
NE: /local/icon/wind/NE.png
NNE: /local/icon/wind/NNE.png
NNW: /local/icon/wind/NNW.png
NW: /local/icon/wind/NW.png
S: /local/icon/wind/S.png
SE: /local/icon/wind/SE.png
SSE: /local/icon/wind/SSE.png
SSW: /local/icon/wind/SSW.png
SW: /local/icon/wind/SW.png
W: /local/icon/wind/W.png
WNW: /local/icon/wind/WNWS.png
WSW: /local/icon/wind/WSW.png
style:
top: 43%
left: 10%
width: 15%
- type: image
entity: sensor.wind
state_image:
1 Beaufort: /local/icon/windkracht/1.png
2 Beaufort: /local/icon/windkracht/2.png
3 Beaufort: /local/icon/windkracht/3.png
4 Beaufort: /local/icon/windkracht/4.png
5 Beaufort: /local/icon/windkracht/5.png
6 Beaufort: /local/icon/windkracht/6.png
7 Beaufort: /local/icon/windkracht/7.png
8 Beaufort: /local/icon/windkracht/8.png
9 Beaufort: /local/icon/windkracht/9.png
10 Beaufort: /local/icon/windkracht/10.png
11 Beaufort: /local/icon/windkracht/11.png
12 Beaufort: /local/icon/windkracht/12.png
style:
top: 43%
left: 10.34%
width: 4%
border-radius: 20%
tap_action:
action: navigate
navigation_path: /lovelace-tablets/weather
- type: state-label
entity: sensor.holiday
hold_action:
action: none
style:
color: rgba(246, 115, 8, 0.7)
font-size: 1.71vw
font-weight: 3100
left: 10%
letter-spacing: '-0.05vw'
text-align: center
top: 83%
width: 30%
tap_action:
action: none
- type: custom:mini-graph-card
entities:
- color: '#385581'
entity: sensor.temperature
- color: red
entity: sensor.temperature_inside
name: Temperature
line_width: 8
hour24: true
group: true
align_icon: left
align_state: right
align_header: left
hours_to_show: 24
show:
fill: fade
icon: false
name: true
state: true
name_adaptive_color: false
labels: hover
legend: false
style:
left: 10%
top: 110.20%
width: 21%
card_mod:
style: |
:host {
overflow: hidden;
Normal when screen filled over 100%
When the screen refreshes