Lovelace cards size - columns

Hi

Try this one

Lg
code:

    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

Hi

How did you get the quote of the day?

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,
I have a similar requirement like @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.
Does anyone have an idea. As I am pretty new to HA I have no experience with custom cards, but I guess it should not be rocket science to do that.

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

@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.
Please note that the following lines are the most relevant ones:

  • 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

Hi,

is this also possible if u dont configure Lovelace through yaml?

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

I am trying something similar with grid-cards. But I am still struggeling.

What I want: The 5 colums should have the same width.
image

What I could manage:

  1. 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.
    Bildschirmfoto 2022-02-03 um 19.16.40

  2. Basically the same code like the 1st. But now with square: true.
    02

  3. Actually only to show how I want it.
    03

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?
Thank you in advance.

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:

image

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