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?

Did anyone get the node red flow code for this? New to Node red and would love to learn from this example. thx

Sorry about that, must have missed the previous message.

Here is my nodered flow:


[
    {
        "id": "f93515bd.20cbf",
        "type": "tab",
        "label": "Last Camera",
        "disabled": false,
        "info": ""
    },
    {
        "id": "a7fd4877.20e9d",
        "type": "mqtt in",
        "z": "f93515bd.20cbf",
        "name": "",
        "topic": "blue_iris/#",
        "qos": "2",
        "datatype": "auto",
        "broker": "2e6fb66b.d1d872",
        "x": 100,
        "y": 40,
        "wires": [
            [
                "8f608c79.90e86"
            ]
        ]
    },
    {
        "id": "ee80dd2b.e87248",
        "type": "debug",
        "z": "f93515bd.20cbf",
        "name": "Your Notification Service",
        "active": true,
        "tosidebar": true,
        "console": true,
        "tostatus": true,
        "complete": "true",
        "targetType": "full",
        "x": 800,
        "y": 100,
        "wires": []
    },
    {
        "id": "eacec533.39cd8",
        "type": "mqtt out",
        "z": "f93515bd.20cbf",
        "name": "Last Camera",
        "topic": "blue_iris/last_camera",
        "qos": "",
        "retain": "",
        "broker": "2e6fb66b.d1d872",
        "x": 730,
        "y": 40,
        "wires": []
    },
    {
        "id": "b41b835c.35ec78",
        "type": "function",
        "z": "f93515bd.20cbf",
        "name": "Select Camera",
        "func": "var topic=msg.topic;\nif (topic==\"blue_iris/binary_sensor/front/state\"){\n    msg.payload=\"1\";\n}\nelse if (topic==\"blue_iris/binary_sensor/kitchen/state\"){\n    msg.payload=\"2\";\n}\nelse if (topic==\"blue_iris/binary_sensor/office/state\"){\n    msg.payload=\"3\";\n}\nelse if (topic==\"blue_iris/binary_sensor/backyardnw/state\"){\n    msg.payload=\"4\";\n}\nelse if (topic==\"blue_iris/binary_sensor/livingroom/state\"){\n    msg.payload=\"5\";\n}\nelse if (topic==\"blue_iris/binary_sensor/tbd/state\"){\n    msg.payload=\"6\";\n}\nelse if (topic==\"blue_iris/binary_sensor/driveway/state\"){\n    msg.payload=\"7\";\n}\nelse if (topic==\"blue_iris/binary_sensor/garage1/state\"){\n    msg.payload=\"8\";\n}\nelse if (topic==\"blue_iris/binary_sensor/garage2/state\"){\n    msg.payload=\"9\";\n}\nelse if (topic==\"blue_iris/binary_sensor/backdoorgate/state\"){\n    msg.payload=\"10\";\n}\nelse if (topic==\"blue_iris/binary_sensor/backdoor/state\"){\n    msg.payload=\"11\";\n}\nelse if (topic==\"blue_iris/binary_sensor/backyardne/state\"){\n    msg.payload=\"12\";\n}\nelse if (topic==\"blue_iris/binary_sensor/backyardsw/state\"){\n    msg.payload=\"13\";\n}\nelse {\n    msg.payload=\"0\";\n}\nmsg.topic = \"blue_iris/last_camera/state\"\nreturn msg;\n",
        "outputs": 1,
        "noerr": 0,
        "x": 520,
        "y": 40,
        "wires": [
            [
                "ee80dd2b.e87248",
                "eacec533.39cd8"
            ]
        ]
    },
    {
        "id": "8f608c79.90e86",
        "type": "switch",
        "z": "f93515bd.20cbf",
        "name": "ready or blink",
        "property": "payload",
        "propertyType": "msg",
        "rules": [
            {
                "t": "eq",
                "v": "ready",
                "vt": "str"
            },
            {
                "t": "eq",
                "v": "blink",
                "vt": "str"
            }
        ],
        "checkall": "true",
        "repair": false,
        "outputs": 2,
        "x": 300,
        "y": 40,
        "wires": [
            [
                "ee80dd2b.e87248"
            ],
            [
                "b41b835c.35ec78",
                "ee80dd2b.e87248"
            ]
        ]
    },
    {
        "id": "2e6fb66b.d1d872",
        "type": "mqtt-broker",
        "z": "",
        "name": "MQTT Server",
        "broker": "11.0.0.71",
        "port": "1883",
        "clientid": "",
        "usetls": false,
        "compatmode": true,
        "keepalive": "60",
        "cleansession": true,
        "birthTopic": "",
        "birthQos": "0",
        "birthPayload": "",
        "closeTopic": "",
        "closeQos": "0",
        "closePayload": "",
        "willTopic": "",
        "willQos": "0",
        "willPayload": ""
    }
]

Awesome, thank you so much!!!