Picture element + grid-card how?

Configuration Frontend
1

Hello

I make some picture element floor plan, and i need use custom:grid-layout in my actual hui-element config.

Unfortunately, it doesn’t want to work for me.
I would like after changing the state of the button below:

          # MENU nowy PARTER
          - type: conditional
            conditions:
              - entity: input_boolean.pietro
                state: "off"
            elements:
              - entity: input_boolean.menu_parter
                style:
                  top: 84.5%
                  left: 65%
                show_entity_picture: true
                show_name: true
                styles:
                  card:
                    - height: 165px
                    - width: 150px
                  name:
                    - font-size: 16px
                  label:
                    - font-size: 10px
                    - color: transparent
                  icon:
                    - width: 110%
                    - color: white
                tap_action:     
                  action: toggle
                type: custom:hui-element
                row_type: custom:button-card

additional menu to appear in the format custom:grid-layout

I tried something like this but unfortunately it didn’t work:

          - type: conditional
            conditions:
              - entity: input_boolean.menu_parter
                state: "on"
            layout:
              grid-template-columns: auto 30px 25%
              grid-template-rows: auto
              grid-template-areas: |
                "header header header"
                "main . sidebar"
                "footer footer footer"
              mediaquery:
                "(max-width: 600px)":
                  grid-template-columns: 100%
                  grid-template-areas: |
                    "header"
                    "sidebar"
                    "main"
                    "footer"
                "(max-width: 800px)":
                  grid-template-columns: 50% 50%
                  grid-template-areas: |
                    "header sidebar"
                    "main main"
                    "footer footer"
            cards:
              - type: entities
                entities:
                  - entity: light.bed_light
                title: "1"
                show_header_toggle: false
                view_layout:
                  grid-area: header
                type: custom:hui-element
                row_type: custom:grid-layout
2
  1. Why do you use custom cards inside hui-element card?
  2. The 2nd code is an impossible mix of custom-layout card with Entities card & Conventional card.

Probably you should explain what design you want to create?

3

First of all thanks for your interest :slight_smile: I have this floor plan:

IMG_2651
IMG_26511920×1261 172 KB

I want to model the menu on something like this:

image
image1152×890 139 KB

for a better explanation: i want to gropu card in grid 2x2

on picture element card using for this Grid Card - Home Assistant

for now i’m doing it one button at a time manually but i’d prefer grid if possible

image1 (1)
image1 (1)1920×1440 156 KB

4

As I said, this is a mixed code.
You are using option from a card X inside a card Y.
Suggest you to:

  1. Remove conditional card, make it simple. You will add it back when other parts are ready.
  2. Then you have a layout-card containing a left stack & a right floorplan. Go to layout-card thread & then find out a proper code for this layout-card.
5

Hi, could you send the code, how to configure picture elements backround with that card layout on the left and the second card on the right?

i don’t know how to set up cards in a card inside of a picture element and that would help me understanding it :slightly_smiling_face:

Thx

6

I am fairly new to HA and picture-elements and have experienced problems related to positioning state-label elements within nested custom:grid-layout. I have followed the instruction in this post without the expected result.

I am trying to make use of nested grids in order to get better control of the positioning of the individual cards. I am using grid area names when naming and allocating. My intention is to create a grid as shown in the picture below with grid-lines, where the value of the state-label card with picture-elements is centered horisontal and vertical in the grid element. The nested grid is placed within the grid element named g5, which is divided into 2 columns.

nested grids
nested grids1505×323 28.8 KB

As can be seen in the picture I can not get the correct height on the grid element g1, which is a state-label card. The card in the nested grid element b5 where the title is shown, also shows the same behaviour that the state-label value is not centered vertically in the area below the title. The blue line indicates the first pixel line after the title.

My configuration is

  - title: Pic-elem Grids
    type: custom:grid-layout
    layout:
      grid-template-columns: 1fr 1fr
      grid-template-rows: auto
      grid-template-areas: |
        "g1 g1"
        "g2 g3"
        "g4 g5"
    cards:
      - type: picture-elements
        state_filter:
          - null
        image: /local/assets/blue1x1.png
        # title: "g1"
        aspect_ratio: 1%
        view_layout:
          grid-area: g1
        elements:
          - type: state-label
            entity: sensor.local_sunrise
            style:
              top: 50%
              left: 50%
              font-size: 2.8rem
              background-color: coral
      - type: entities
        entities:
          - sensor.time
        title: "g2"
        show_header_toggle: false
        view_layout:
          grid-area: g2
      - type: entities
        entities:
          - sensor.time
        # title: "g3"
        show_header_toggle: false
        view_layout:
          grid-area: g3
      - type: entities
        entities:
          - sensor.time
        # title: "g4"
        show_header_toggle: false
        view_layout:
          grid-area: g4
      - type: "custom:layout-card"
        layout_type: grid
        layout:
          grid-template-columns: 1fr 1fr
          grid-template-rows: auto
          grid-template-areas: |
            "a5 b5"
        view_layout:
          grid-area: g5
        cards:
          - type: entities
            entities:
              - entity: sensor.time
            title: "a5"
            show_header_toggle: false
            view_layout:
              grid-area: a5
          - type: picture-elements
            state_filter:
              - null
            image: /local/assets/blue1x1.png
            title: "b5"
            aspect_ratio: 1%
            view_layout:
              grid-area: b5
            elements:
              - type: state-label
                entity: sensor.local_time
                style:
                  top: 50%
                  left: 50%
                  font-size: 2.8rem
                  background-color: coral

I would appreciate any guidance in getting the results I try to achieve.