I actually posted this on Discord and got zero replies. I want to make a dashboard that will display on a normal HDTV from a raspberry pi in kiosk mode. It should be in a 2x2 configuration, with a google image (slide show basically) in upper left, custom calendar in upper right, to-do list 1 lower left, and to-do list 2 lower right. Seems simple enough. Everything is up to date, and running on normal HAAS OS on RPi4.
I have tried many different approaches.
I have tried:
Horizontal stack
Vertical stack
Combining the above 2
custom:mod-card
custom:layout-card
Modifying card size
Modifying with CSS
What I am showing
type: picture-entity
entity: camera.google_photos_favorites_media
Layout card options tried
type: custom:layout-card
layout_type: grid
grid-template-rows: 50% 50% # Tried, %, FR, pixels, auto
grid-template-columns: auto
Explicit card width
card_mod:
style: |
ha-card {
width: 100%; # Ensure it's responsive to the column
}
Inline CSS
style: |
ha-card {
width: 300px;
height: 300px;
}
Here is my latest code.
> type: custom:layout-card
> layout_type: custom:grid-layout
> grid-template-rows: auto
> grid-template-columns: 50% 50%
> cards:
> - type: picture-entity
> entity: camera.google_photos_favorites_media
> view_layout:
> position: main
> style: |
> ha-card {
> width: 150px;
> height: 150px;
> }
> img {
> width: 25%; # Ensure image respects the width of the card
> height: auto; # Ensure the image keeps its aspect ratio
> object-fit: contain; # You can use 'contain' or 'cover' depending on how you want the image to scale
> }
> - type: custom:week-planner-card
> calendars:
> - entity: calendar.o_donnell_family_calendar
> card_mod:
> style: |
> ha-card {
> width: 50%; # Force it to stay within the grid cell
> }
> - type: todo-list
> entity: todo.patrick
> title: Patrick
> card_mod:
> style: |
> ha-card {
> width: 50%; # Force it to stay within the grid cell
> }
> - type: todo-list
> entity: todo.rory
> title: Rory
> card_mod:
> style: |
> ha-card {
> width: 50%; # Force it to stay within the grid cell
> }
You did noit defined grid areas, nor assigned them to cards to position these within proper cells.
Alo your code is missing some layout_options. Try this:
type: custom:layout-card
layout_type: custom:grid-layout
layout_options:
grid-template-columns: 50% 50%
grid-template-rows: auto auto
grid-template-areas: |
"a b"
"c d"
cards:
- type: picture-entity
entity: camera.google_photos_favorites_media
view_layout:
position: a
- type: custom:week-planner-card
calendars:
- entity: calendar.o_donnell_family_calendar
view_layout:
position: b
- type: todo-list
entity: todo.patrick
title: Patrick
view_layout:
position: c
- type: todo-list
entity: todo.rory
title: Rory
view_layout:
position: d
This way it should not be necessary to force size of the cards using card-mod. Also do not forget to put dashbord into Panel mode.
@mirekmal That was amazing. Almost exactly what I wanted, but the picture pushed everything down, especially those in portrait format. So being an enthusiastic dummy, I changed grid-template-rows to 50% 50% and that did not fix it. I read further about putting it into panel mode. The only one in the visual dashboard editor was Panel (1 card). That made the picture HUGE again, and turned off the other cards. I got back to the first image, but don’t know how to get into panel mode without destroying it.
Then entire grid card shloud take all dashboard real estate. If you do this on card level, it will expand only one card within the grid to take whole screen. If you made it as above and it takkes whole screen then it is something strange happening, I’ve never experienced…
Here is example of very similar setup I have in one of my dashboards with house plan (there are 4 picture elements cards representing individual floors):
And configuration of the only card in this dashboard showing these floors:
type: custom:layout-card
layout_type: custom:grid-layout
layout_options: # for on screen view
grid-template-columns: 50% 50%
grid-template-rows: auto auto
grid-template-areas: |
"a f"
"g b"
mediaquery: # for phone/narrow screen view
"(max-width: 1200px)":
grid-template-columns: 100%
grid-template-rows: auto auto auto auto
grid-template-areas: |
"a"
"f"
"g"
"b"
cards:
# code below repeats for each floor, putting picture element cards in different grid cells
- type: picture-elements
image: /local/attic.png
view_layout:
position: a
elements:
- entity: binary_sensor.tv_room_motion_sensor
style:
"--state-binary_sensor-on-color": red
"--paper-item-icon-color": "#BFBFBF"
left: 72%
top: 63%
tap_action:
action: none
type: state-icon
.....
# repeating above code for all 4 floors
First and foremost, let me thank you for helping me with this. What you posted is very close, but I tried 50% 50% on grid template rows and it didn’t seem to work. I followed your suggestions and may be in the “something strange” category.
You can see in this picture that the image does not constrain in height and I loose my to-do lists.
Well, lots of playing with card-mod, but I finally found something that works for scaling image into size of cell without distorting the image and fitting it into grid cell precisely. Perhaps will wor for you (look for comment about added code, this is what changed):
type: custom:layout-card
layout_type: custom:grid-layout
layout_options: # for on screen view
grid-template-columns: 50% 50%
grid-template-rows: auto auto
grid-template-areas: |
"a f"
"g b"
mediaquery: # for phone/narrow screen view
"(max-width: 1200px)":
grid-template-columns: 100%
grid-template-rows: auto auto auto auto
grid-template-areas: |
"a"
"f"
"g"
"b"
cards:
# code below repeats for each floor, putting picture element cards in different grid cells
- type: picture-elements
# here is the start of new code added to previous solution
card_mod:
style:
hui-image:
$: |
#image {
aspect-ratio: 1/1;
object-fit: contain;
}
# the end of added styling code
image: /local/attic.png
view_layout:
position: a
elements:
- entity: binary_sensor.tv_room_motion_sensor
style:
"--state-binary_sensor-on-color": red
"--paper-item-icon-color": "#BFBFBF"
left: 72%
top: 63%
tap_action:
action: none
type: state-icon
.....
# repeating above code for all 4 floors
Here is sample of how it looks - I added dummy image of washing mahine that is way taller than square image of floor plan, so it got scaled to fit the grid cell and black bars were added at sides to fit the cell without distoring the image:
