Frontend 4x4 Layout with 1 Box in middle

Hi all!

I am trying to get a 4x4 layout, where the middle card is double the size of the rest.
Basically a single card that is double the height and width in the middle, surrounded by 12 single cards.

I almost have it working, but the middle row needs to be larger:
image

Any tips?

Got it working :slight_smile:

custom layout-card.

Details? I’d like to do something similar for my cameras. Thanks!

Sure. I’ll post config tomorrow when I am home.

The sensor indicating last camera triggered is updated in Node Red. Rest of the code is here, using a couple of custom cards you can probably find easily on google.

title: My Awesome Home
resources:
  - url: /local/plugins/card-modder.js?v=1
    type: js
  - url: /local/plugins/card-tools.js?v=1
    type: js
  - url: /local/plugins/mini-graph-card-bundle.js?v=0.4.2
    type: module    
  - url: /local/plugins/popup-card.js?v=1
    type: js
  - url: /local/plugins/state-switch.js?v=1
    type: js       
  - url: /local/plugins/layout-card.js?v=1
    type: js       
    
    
views:

    # View tab title.
  - title: CCTV
    panel: true
    icon: mdi:cctv
    cards:
      - type: custom:layout-card
        layout: horizontal
        max_width: [25%, 50%, 25%]
        cards:
          - type: vertical-stack
            cards:
               - type: picture-glance
                 title: 11
                 entities: []
                 camera_image: camera.backdoor
               - type: picture-glance
                 title: 10
                 entities: []
                 camera_image: camera.backdoor_gate
               - type: picture-glance
                 title: 12
                 entities: []
                 camera_image: camera.backyard_ne
               - type: picture-glance
                 title: 4
                 entities: []
                 camera_image: camera.backyard_nw
          - type: vertical-stack
            cards:
              - type: horizontal-stack
                cards:
                  - type: picture-glance
                    title: 13
                    entities: []
                    camera_image: camera.backyard_sw
                  - type: picture-glance
                    title: 7
                    entities: []
                    camera_image: camera.driveway   
              - type: conditional
                conditions:
                  - entity: sensor.last_camera
                    state: "1"
                card:
                  type: picture-glance
                  title: 1
                  entities: []
                  camera_image: camera.front  
                  camera_view: live
              - type: conditional
                conditions:
                  - entity: sensor.last_camera
                    state: "2"
                card:
                  type: picture-glance
                  title: 2
                  entities: []
                  camera_image: camera.kitchen   
                  camera_view: live
              - type: conditional
                conditions:
                  - entity: sensor.last_camera
                    state: "3"
                card:
                  type: picture-glance
                  title: 3
                  entities: []
                  camera_image: camera.office  
                  camera_view: live
              - type: conditional
                conditions:
                  - entity: sensor.last_camera
                    state: "4"
                card:
                  type: picture-glance
                  title: 4
                  entities: []
                  camera_image: camera.backyard_nw   
                  camera_view: live 
              - type: conditional
                conditions:
                  - entity: sensor.last_camera
                    state: "5"
                card:
                  type: picture-glance
                  title: 5
                  entities: []
                  camera_image: camera.livingroom    
                  camera_view: live
              - type: conditional
                conditions:
                  - entity: sensor.last_camera
                    state: "6"
                card:
                  type: picture-glance
                  title: 6
                  entities: []
                  camera_image: camera.tbd    
                  camera_view: live
              - type: conditional
                conditions:
                  - entity: sensor.last_camera
                    state: "7"
                card:
                  type: picture-glance
                  title: 7
                  entities: []
                  camera_image: camera.driveway   
                  camera_view: live 
              - type: conditional
                conditions:
                  - entity: sensor.last_camera
                    state: "8"
                card:
                  type: picture-glance
                  title: 8
                  entities: []
                  camera_image: camera.garage_1   
                  camera_view: live 
              - type: conditional
                conditions:
                  - entity: sensor.last_camera
                    state: "9"
                card:
                  type: picture-glance
                  title: 9
                  entities: []
                  camera_image: camera.garage_2    
                  camera_view: live
              - type: conditional
                conditions:
                  - entity: sensor.last_camera
                    state: "10"
                card:
                  type: picture-glance
                  title: 10
                  entities: []
                  camera_image: camera.backdoor_gate  
                  camera_view: live
              - type: conditional
                conditions:
                  - entity: sensor.last_camera
                    state: "11"
                card:
                  type: picture-glance
                  title: 11
                  entities: []
                  camera_image: camera.backdoor  
                  camera_view: live
              - type: conditional
                conditions:
                  - entity: sensor.last_camera
                    state: "12"
                card:
                  type: picture-glance
                  title: 12
                  entities: []
                  camera_image: camera.backyard_ne   
                  camera_view: live
              - type: conditional
                conditions:
                  - entity: sensor.last_camera
                    state: "13"
                card:
                  type: picture-glance
                  title: 13
                  entities: []
                  camera_image: camera.backyard_sw     
                  camera_view: live
              - type: horizontal-stack
                cards:
                  - type: picture-glance
                    title: 1
                    entities: []
                    camera_image: camera.front
                  - type: picture-glance
                    title: 8
                    entities: []
                    camera_image: camera.garage_1    
          - type: vertical-stack
            cards:
               - type: picture-glance
                 title: 9
                 entities: []
                 camera_image: camera.garage_2
               - type: picture-glance
                 title: 3
                 entities: []
                 camera_image: camera.office
               - type: picture-glance
                 title: 5
                 entities: []
                 camera_image: camera.livingroom
               - type: picture-glance
                 title: 2
                 entities: []
                 camera_image: camera.kitchen

Thanks! I use node red too.

Just trying to make sure I’m following what you’re doing here…

Is this a “ring” of video feeds in small windows around the perimeter with the larger window in the center automatically switching to and showing the camera that last triggered motion (as defined/set by Node Red)?

Thanks,

-joni-

Yes that’s it. The smaller feeds are the slow update, the one in the middle is live.

What’s your node red flow?