Hi All -
I’m working on my first dashboard. I’ve been using HA for some time now but finally bit the bullet to do a dashboard with the primary interface being a touchscreen monitor and a 3d mockup of the house. Mockup done in SweetHome3D. I’ve generated the “lights on” layers for each room, etc. that’s all gone great.
However, running into an issue with how HA handles scaling/stretching pictures that I haven’t been able to solve. Trying to keep this as concise as possible:
- Monitor is 2650x1440. Plan on running fully kiosk, side bar hidden, only selectors at the top to switch to different views on the dashboard
- I can generate the picture at basically any resolution I want from SH3d. Most recently used 2800x1535. This left a lot of unused space on each side.
- So cropped it to 1742x1535.
- Goal for dashboard is picture as above right justified of maximal size, left column left open for clock/weather/badges/scene selection and so on (see picture).
- WIth ChatGPT help I have the picture above. I want that picture enlarged to maximal size w/o scrolling, shifted over to the right to create more space on the left hand side.
- Was trying to get rid of the wasted “black” space on either side of the picture, but when I do this to the cropped size as above, it isn’t working out well at all.
I’ve tried to have ChatGPT help with this for hours now and I’m not getting anywhere. I’m not a YAML expert and I’m reaching the limits of my knoweldge and google-fu here…
REALLY apprecaite any help! My YAML is below if that’s helpful.
type: custom:layout-card
layout_type: custom:grid-layout
card_mod:
style: |
ha-card {
height: 100vh; /* full viewport */
padding: 0;
}
ha-card > div { height: 100%; }
layout:
grid-template-columns: 360px 1fr
grid-template-rows: 1fr
column-gap: 8px
row-gap: 0
grid-template-areas: |
"left right"
cards:
- type: vertical-stack
view_layout:
grid-area: left
cards:
- type: entities
title: Controls
entities:
- light.kitchen
- light.living_room
- switch.dehumidifier
- type: button
name: All Lights Off
icon: mdi:lightbulb-off
tap_action:
action: call-service
service: homeassistant.turn_off
target:
entity_id:
- light.kitchen
- light.living_room
- light.hallway
- type: picture-elements
view_layout:
grid-area: right
image: /local/dashboard/main/1st floor downsize10.png
card_mod:
style: |
hui-image {
width: 100%;
height: 100%;
display: block;
}
hui-image$ img {
width: 100% !important;
height: 100% !important;
object-fit: contain !important; /* whole image visible */
object-position: center right !important; /* bias to right side */
display: block;
}
elements:
- type: icon
entity: light.living_room
icon: mdi:lightbulb
tap_action:
action: toggle
style:
top: 58%
left: 74%
transform: translate(-50%, -50%)
"--iron-icon-fill-color": rgba(255,221,0,0.95)
- type: image
entity: light.kitchen
image: /local/dashboard/main/overlays/kitchen-glow.png
style:
top: 40%
left: 82%
width: 20%
transform: translate(-50%, -50%)
opacity: 0
state_filter:
"on": opacity(1) brightness(1.05)
"off": opacity(0)
