Hi
Try this one
Lg
type: 'custom:vertical-stack-in-card'
title: Sala
panel: true
cards:
- type: entity-button
entity: switch.luz_cozinha
name: cozinha
tap_action:
action: toggle
hold_action:
action: more-info
- type: horizontal-stack
cards:
- type: entity-button
entity: light.luz_sala_de_estar
hold_action:
action: more-info
icon: 'mdi:ceiling-light'
name: Sala de estar
tap_action:
action: toggle
- type: entity-button
entity: light.luz_sala_de_jantar
hold_action:
action: more-info
name: Sala de Jantar
tap_action:
action: toggle
- type: entity-button
entity: light.yeelight_color2_04cf8c842ee1
hold_action:
action: more-info
icon: mdi:television-box
name: Ambilight TV
tap_action:
action: toggle
- type: entity-button
entity: light.luz_led_exterior
hold_action:
action: more-info
icon: 'mdi:led-on'
name: Led Exterior
tap_action:
action: toggle
- type: entity-button
entity: light.luz_hall
hold_action:
action: more-info
name: Hall entrada
tap_action:
action: toggle
2 Likes
Abraham
December 28, 2020, 7:32pm
22
Hi
How did you get the quote of the day?
byxil
March 21, 2021, 11:14am
23
Hi, the examples I have seen above are easy to do, but I cannot put elements of different widths on a card, such as an ipcam with buttons on the right, I can put them below but not on the right. I want to do this because I have to insert this card with others in a single panel for a tablet and the cam card must be smaller than the maximum size of the single card.
Hello all,@byxil . I´d like to have a picture-elements card covering 2/3 of the width. The rest of the space will be used for dynamic content depending on the overall status of my home and actions on the picture-elements card.
Regards
As assumed it is possible to have uneven ratios in a lovelace dashboards. The "layout-card "(GitHub - thomasloven/lovelace-layout-card: đš Get more control over the placement of lovelace cards. ) card integration from HACS does the trick. I just setup a horizontal layout for the whole view and used the âcolumn_widthsâ option with flex values.
To complete this I added the âKiosk Modeâ (GitHub - maykar/kiosk-mode: đ Hides the Home Assistant header and/or sidebar ) integration from HACS that can hide the side and top menu bar. This in combination with the hotkey F11 (Windows) or the APP âFully Kiosk Browserâ on Android suites my needs.
Here is the result:
Of course this is an alpha status, but I hope you get the idea
@byxil .
Regards
2 Likes
iway
May 16, 2021, 9:10pm
26
@Thagmin Do you have the code for that dashboard? Thanks!
Hey @iway , meanwhile I added some more cards to the 2nd vertival stack. Below you see the YAML.
6 - 9: Definition of the Layout basod on âlayout-cardâ
10: The vertical stack with 2/3 of the width
58: The second vertical stack with 1/3 of the width.
I hope this helps.
Best regards!
views:
- title: Dashboard
path: dashboard
icon: 'mdi:view-dashboard-variant-outline'
panel: false
layout:
column_widths: 2fr 1fr;
width: 400
type: 'custom:horizontal-layout'
badges: []
cards:
- type: vertical-stack
cards:
- type: glance
entities:
- entity: sensor.ent_all_gen_virt_daytime
- entity: input_boolean.ent_util_cov_virt_shading_needed
- entity: vacuum.rocky
show_name: false
show_icon: true
show_state: false
state_color: true
- type: picture-elements
elements:
- type: state-icon
entity: light.ent_fl_lgt_act_dimm
tap_action:
action: toggle
style:
top: 1.5%
left: 42%
transform: 'scale(1,1)'
'--paper-item-icon-color': light-grey
- type: state-icon
entity: binary_sensor.ent_fl_gen_sens_motion_motion
style:
top: 1.5%
left: 47%
transform: 'scale(1,1)'
'--paper-item-icon-color': light-grey
- type: state-icon
entity: cover.ent_wek_wb_cov_act_roll
style:
top: 91%
left: 43%
transform: 'scale(1,1)'
'--paper-item-icon-color': light-grey
- type: state-icon
entity: light.ent_wek_wz_lgt_act_dimm_amb_1
tap_action:
action: toggle
style:
top: 76%
left: 50%
transform: 'scale(1,1)'
'--paper-item-icon-color': light-grey
image: /local/custom_files/dashboard/grundriss_schwabstr.jpg
- type: vertical-stack
cards:
- type: weather-forecast
entity: weather.home
show_forecast: false
name: ' '
secondary_info_attribute: humidity
- type: grid
cards:
- type: glance
entities:
- entity: input_boolean.ent_util_cov_virt_shading_needed
- entity: input_boolean.ent_util_cov_virt_shading_o
- entity: input_boolean.ent_util_cov_virt_shading_s
- entity: input_boolean.ent_util_cov_virt_shading_w
state_color: true
show_name: false
show_state: false
show_icon: true
- type: horizontal-stack
cards:
- type: button
tap_action:
action: call-service
service: input_boolean.toggle
service_data: {}
target:
entity_id: input_boolean.ent_all_gen_bsc_show_gh_timer
entity: binary_sensor.ent_all_gen_virt_gh_timer
show_name: false
show_state: false
- type: button
tap_action:
action: call-service
service: input_boolean.toggle
service_data: {}
target:
entity_id: input_boolean.ent_show_media_player
entity: binary_sensor.ent_all_gen_bsc_media_playing
show_state: false
show_name: false
columns: 2
square: false
- type: conditional
conditions:
- entity: input_boolean.ent_all_gen_bsc_show_gh_timer
state: 'on'
card:
type: vertical-stack
cards:
- type: conditional
conditions:
- entity: sensor.buro_timers
state_not: unavailable
- entity: sensor.buro_alarms
state: unavailable
card:
type: 'custom:googletimers-card'
entity: sensor.buro_timers
alarms_entity: sensor.buro_alarms
title: BĂźro
- type: conditional
conditions:
- entity: sensor.kuche_timers
state_not: unavailable
- entity: sensor.kuche_alarms
state: unavailable
card:
type: 'custom:googletimers-card'
entity: sensor.kuche_timers
alarms_entity: sensor.kuche_alarms
title: KĂźche
- type: conditional
conditions:
- entity: sensor.kinderzimmer_timers
state_not: unavailable
- entity: sensor.kinderzimmer_alarms
state_not: unavailable
card:
type: 'custom:googletimers-card'
entity: sensor.kinderzimmer_timers
alarms_entity: sensor.kinderzimmer_alarms
title: Kinderzimmer
- type: conditional
conditions:
- entity: sensor.wohnzimmer_timers
state_not: unavailable
- entity: sensor.wohnzimmer_alarms
state_not: unavailable
card:
type: 'custom:googletimers-card'
entity: sensor.wohnzimmer_timers
alarms_entity: sensor.wohnzimmer_alarms
title: Wohnzimmer
- type: conditional
conditions:
- entity: input_boolean.ent_show_media_player
state: 'on'
card:
type: vertical-stack
cards:
- type: vertical-stack
cards:
- type: conditional
conditions:
- entity: media_player.buro
state: playing
- entity: media_player.zu_hause
state_not: playing
card:
type: media-control
entity: media_player.buro
- type: conditional
conditions:
- entity: media_player.kinderzimmer
state: playing
- entity: media_player.zu_hause
state_not: playing
card:
type: media-control
entity: media_player.kinderzimmer
- type: conditional
conditions:
- entity: media_player.kuche
state: playing
- entity: media_player.wohnbereich
state_not: playing
- entity: media_player.zu_hause
state_not: playing
card:
type: media-control
entity: media_player.kuche
- type: conditional
conditions:
- entity: media_player.wohnzimmer
state: playing
- entity: media_player.wohnbereich
state_not: playing
- entity: media_player.zu_hause
state_not: playing
card:
type: media-control
entity: media_player.wohnzimmer
- type: conditional
conditions:
- entity: media_player.wohnbereich
state: playing
card:
type: media-control
entity: media_player.wohnbereich
- type: conditional
conditions:
- entity: media_player.zu_hause
state: playing
card:
type: media-control
entity: media_player.zu_hause
- type: conditional
conditions:
- entity: media_player.sonos
state: playing
card:
type: media-control
entity: media_player.sonos
- type: 'custom:atomic-calendar-revive'
name: Kalender
entities:
- entity: calendar.geb_tt
icon: 'mdi:gift'
color: '#f5f257'
- entity: calendar.gemeinsam
icon: 'mdi:account-group'
color: '#13487e'
- entity: calendar.kinder
icon: 'mdi:human-male-child'
color: '#74c6b0'
- entity: calendar.mullabfuhr
icon: 'mdi:delete-empty'
color: '#87260e'
- entity: calendar.wichtig
icon: 'mdi:exclamation-thick'
color: '#b4071a'
calEventTime: true
calShowDescription: false
dateFormat: DD.MM.YYYY
defaultMode: Event
dimFinishedEvents: true
disableCalEventLink: true
disableEventLink: true
enableModeChange: true
europeanDate: true
firstDayOfWeek: 1
fullDayEventText: ''
hiddenEventText: weitere
hideFinishedEvents: true
hoursFormat: 24h
language: de
maxDaysToShow: 7
maxEventCount: 5
showCurrentEventLine: false
showDate: false
showDescription: false
showEventIcon: true
showFullDayProgress: false
showHiddenText: false
showHours: true
showLastCalendarWeek: true
showLoader: true
showLocation: false
showMonth: false
showNoEventsForToday: false
showProgressBar: true
showRelativeTime: false
showWeekDay: true
sortByStartTime: false
startDaysAhead: 0
startTimeFilter: '00:01'
endTimeFilter: '23:59'
untilText: bis
dateSize: 120
descSize: 110
eventCalNameSize: 120
eventTitleSize: 130
timeSize: 120
- title: Testing
path: testing
icon: 'mdi:cog-sync-outline'
badges: []
cards:
- type: entities
entities:
- entity: sensor.ent_all_gen_virt_daytime
name: Tageszeit
- entity: weather.home
- entity: sun.sun
secondary_info: >-
EL= {{ state_attr('sun.sun', 'elevation') }} // AZ= {{
state_attr('sun.sun', 'azimuth') }}
- entity: input_boolean.ent_util_cov_virt_shading_needed
- entity: input_boolean.ent_util_cov_virt_shading_o
- entity: input_boolean.ent_util_cov_virt_shading_s
- entity: input_boolean.ent_util_cov_virt_shading_w
show_header_toggle: false
state_color: true
- type: entities
entities:
- entity: input_boolean.ent_util_wek_gen_virt_auto_state
name: Status
secondary_info: last-changed
- entity: input_select.ent_util_wek_cov_virt_auto_mode
name: Modus
- entity: cover.ent_wek_wb_cov_act_roll
name: Rollladen
- entity: light.ent_wek_wz_lgt_act_dimm_amb_1
name: Licht
secondary_info: brightness
title: Wohn-Ess und Kochbereich
show_header_toggle: false
state_color: true
header:
type: buttons
entities:
- input_select.ent_util_fl_lgt_virt_auto_mode
- type: entities
entities:
- entity: input_boolean.ent_util_fl_gen_virt_auto_state
name: Status
secondary_info: last-changed
- entity: input_select.ent_util_fl_lgt_virt_auto_mode
secondary_info: last-changed
name: Modus
- entity: light.ent_fl_lgt_act_dimm
name: Licht
- entity: binary_sensor.ent_fl_gen_sens_motion_motion
name: Bewegungsmelder
secondary_info: last-changed
header:
type: buttons
entities: []
title: Flur
show_header_toggle: false
state_color: true
- type: horizontal-stack
cards:
- type: button
tap_action:
action: toggle
entity: light.tradfri_driver
- type: button
tap_action:
action: toggle
entity: light.flur
- type: button
tap_action:
action: toggle
entity: light.supergroup
- type: button
tap_action:
action: toggle
entity: light.ent_wek_wz_lgt_act_dimm_amb_1
title: Dashboard
daniel1to
November 1, 2021, 6:46pm
28
Hi,
is this also possible if u dont configure Lovelace through yaml?
Plouf34
November 1, 2021, 7:02pm
29
Is it possible to configure with horizontal or vertical stack (on in another card) card divides in 2 : one 1/3 and second 2/3?
Did you ever find a solution? I am trying to do the same thing.
I did it! I use picture-glance cards as buttons (on the left and right), upon tap, it will change an input_select to the cameraâs name. Each picture-glance card has the static image of a camera (updated every 10 seconds). The center card is a conditional card that loads the live view of the camera in the input_select, the center card is a Frigate WebRTC card. This setup looks good on a PCâs browser and on IOS companion app (in landscape mode).
Fyi, it was really helpful using standard picture-glance cards while building the layout. Once I had a layout I liked, I added on the fancy features.
Here is my whole viewâs config:
- title: Cameras
path: Cameras
icon: mdi:cctv
type: panel
badges: []
cards:
- type: custom:layout-card
layout_type: grid
layout:
grid-template-columns: 20% 60% 20%
grid-template-areas: |
"pic1 vid pic2"
cards:
- type: vertical-stack
view_layout:
grid-area: pic1
cards:
- type: picture-glance
entities: []
camera_image: camera.frontyard
tap_action:
action: call-service
service: input_select.select_option
service_data:
option: frontyard
target:
entity_id: input_select.camera_view
- type: picture-glance
entities: []
camera_image: camera.driveway
tap_action:
action: call-service
service: input_select.select_option
service_data:
option: driveway
target:
entity_id: input_select.camera_view
aspect_ratio: '4:3'
- type: picture-glance
entities: []
camera_image: camera.backyard
tap_action:
action: call-service
service: input_select.select_option
service_data:
option: backyard
target:
entity_id: input_select.camera_view
- type: vertical-stack
view_layout:
grid-area: vid
cards:
- type: conditional
conditions:
- entity: input_select.camera_view
state: frontyard
card:
type: custom:frigate-card
camera_entity: camera.frontyard
live:
provider: webrtc
webrtc:
entity: camera.frontyard_stream
preload: true
view:
default: live
- type: conditional
conditions:
- entity: input_select.camera_view
state: driveway
card:
type: custom:frigate-card
camera_entity: camera.driveway
live:
provider: webrtc
webrtc:
entity: camera.driveway_stream
preload: true
view:
default: live
- type: conditional
conditions:
- entity: input_select.camera_view
state: backyard
card:
type: custom:frigate-card
camera_entity: camera.backyard
live:
provider: webrtc
webrtc:
entity: camera.backyard_stream
preload: true
view:
default: live
- type: conditional
conditions:
- entity: input_select.camera_view
state: basement
card:
type: custom:frigate-card
camera_entity: camera.basement
live:
provider: webrtc
webrtc:
entity: camera.basement_stream
preload: true
view:
default: live
- type: conditional
conditions:
- entity: input_select.camera_view
state: basement_inside
card:
type: custom:frigate-card
camera_entity: camera.basement_inside
live:
provider: webrtc
webrtc:
entity: camera.basement_inside_stream
preload: true
menu:
buttons:
clips: true
view:
default: live
- type: vertical-stack
view_layout:
grid-area: pic2
cards:
- type: picture-glance
entities: []
camera_image: camera.basement
tap_action:
action: call-service
service: input_select.select_option
service_data:
option: basement
target:
entity_id: input_select.camera_view
aspect_ratio: '4:3'
- type: picture-glance
entities: []
camera_image: camera.basement_inside
tap_action:
action: call-service
service: input_select.select_option
service_data:
option: basement_inside
target:
entity_id: input_select.camera_view
Here is my input_select from my configuration.yaml:
input_select:
camera_view:
options:
- frontyard
- backyard
- basement
- driveway
- basement_inside
Good luck!
3 Likes
Balcony
February 3, 2022, 6:23pm
32
I am trying something similar with grid-cards. But I am still struggeling.
What I want: The 5 colums should have the same width.
What I could manage:
First Approach looks quite promising, but I want the big card to the left to have the same width than one of the squared cards.
Basically the same code like the 1st. But now with square: true.
Actually only to show how I want it.
The code for option 1:
type: grid
cards:
- type: button
tap_action:
action: toggle
entity: input_button.test_button
- type: grid
cards:
- type: button
tap_action:
action: toggle
entity: input_button.test_button
- type: button
tap_action:
action: toggle
entity: input_button.test_button
- type: button
tap_action:
action: toggle
entity: input_button.test_button
- type: button
tap_action:
action: toggle
entity: input_button.test_button
- type: button
tap_action:
action: toggle
entity: input_button.test_button
- type: button
tap_action:
action: toggle
entity: input_button.test_button
- type: button
tap_action:
action: toggle
entity: input_button.test_button
- type: button
tap_action:
action: toggle
entity: input_button.test_button
columns: 4
columns: 2
square: false
Since hours I try it, and I think it should be possible with grids. Has anyone an idea?
Balcony
February 3, 2022, 7:36pm
33
Okay, after proper food and a shower I could make it! Sorry for disturbing, but maybe someone else is also interested. It is a grid with 5 columns. In the grid is one card and 4 grids, each with one column. I really like the look. The Grid Card - Home Assistant is really powerful!
Here my result:
Here the code:
type: grid
cards:
- type: button
tap_action:
action: toggle
entity: input_button.test_button
- type: grid
cards:
- type: button
tap_action:
action: toggle
entity: input_button.test_button
- type: button
tap_action:
action: toggle
entity: input_button.test_button
columns: 1
- type: grid
cards:
- type: button
tap_action:
action: toggle
entity: input_button.test_button
- type: button
tap_action:
action: toggle
entity: input_button.test_button
columns: 1
- type: grid
cards:
- type: button
tap_action:
action: toggle
entity: input_button.test_button
- type: button
tap_action:
action: toggle
entity: input_button.test_button
columns: 1
- type: grid
cards:
- type: button
tap_action:
action: toggle
entity: input_button.test_button
- type: button
tap_action:
action: toggle
entity: input_button.test_button
columns: 1
columns: 5
2 Likes
