fresh-home/lovelace/room_cards/dining_room.yaml

type: picture-elements
#background image
image: /local/bg500x225.png
elements:
  - type: custom:mushroom-template-card
    primary: "{{states('input_select.dining_room_mode')}}"
    entity: input_select.dining_room_mode
    tap_action:
      action: more-info
    style:
      font-style: italic
      left: 25%
      top: 88%

  - type: custom:mushroom-template-card
    primary: '{{states(''sensor.dining_room_multisensor_air_temperature'')}} °F'
    secondary: ''
    icon: ''
    entity: sensor.dining_room_multisensor_air_temperature
    tap_action:
      action: more-info
    style:
      left: 15%
      top: 35%
      font-size: 60px
  # - type: state-label
  #   entity: sensor.dining_room_multisensor_air_temperature
  #   style:
  #     left: 15%
  #     top: 35%
  #     font-size: 180%
  - type: custom:mushroom-template-card
    primary: '{{states(''sensor.dining_room_multisensor_humidity'')}}%'
    secondary: ''
    icon: ''
    entity: sensor.dining_room_multisensor_humidity
    tap_action:
      action: more-info
    style:
      left: 85%
      top: 35%
      font-size: 180%
      text-align: right
  # - type: state-label
  #   entity: sensor.dining_room_multisensor_humidity
  #   style:
  #     left: 85%
  #     top: 35%
  #     font-size: 180%
  #     text-align: right
  #Card title
  - type: custom:mushroom-title-card
    title: "Dining Room"
    style:
      font-size: 130%
      left: -2%
      top: -10%
      transform: initial
  #top left icon spot
  - type: state-icon
    entity: binary_sensor.dining_room_occupied
    style:
      left: 68%
      top: 9%
  #top left icon #2 spot
  # - type: state-icon
  #   entity: group.dining_room_motion
  #   style:
  #     left: 68%
  #     top: 9%
  #top icon spot #3
  # - type: state-icon
  #   entity: switch.shelly_sliding_glass_door
  #   style:
  #     left: 76%
  #     top: 9%
  #   tap_action:
  #     action: toggle
  #top icon spot #3
  - type: state-icon
    entity: binary_sensor.patio_door_contact
    style:
      left: 84%
      top: 9%
    tap_action:
      action: more-info
  #top icon spot #4
  - type: state-icon
    entity: input_boolean.dining_room_occupied
    style:
      left: 92%
      top: 9%
    tap_action:
      action: toggle
    hold_action:
      action: more-info

  #button #2
  - type: "custom:button-card"
    color: auto
    entity: light.dining_room_switch
    show_name: false
    style:
      left: 25%
      top: 65%
    styles:
      card:
        - border-radius: 50px
        - width: 50px
        - height: 50px
      icon:
        - width: 30px
        - height: 30px
    tap_action:
      action: toggle
    hold_action:
      action: more-info

  # - type: conditional
  #   conditions:
  #     - entity: binary_sensor.patio_door_contact
  #       state: 'off'
  #   elements:
  #     type: 'custom:button-card'
  #     color: auto
  #     entity: switch.shelly_sliding_glass_door
  #     show_name: false
  #     style:
  #       left: 50%
  #       top: 65%
  #     styles:
  #       card:
  #         - border-radius: 50px
  #         - width: 50px
  #         - height: 50px
  #       icon:
  #         - width: 30px
  #         - height: 30px
  #     tap_action:
  #       action: toggle
  #     hold_action:
  #       action: more-info

  # - type: conditional
  #   conditions:
  #     - entity: binary_sensor.patio_door_contact
  #       state: 'on'
  #   elements:
  #     type: 'custom:button-card'
  #     color: auto
  #     entity: binary_sensor.patio_door_contact
  #     show_name: false
  #     style:
  #       left: 50%
  #       top: 65%
  #     styles:
  #       card:
  #         - border-radius: 50px
  #         - width: 50px
  #         - height: 50px
  #       icon:
  #         - width: 30px
  #         - height: 30px
  #     tap_action:
  #       action: more-info

  #button #4
  - type: "custom:button-card"
    color: auto
    entity: camera.frigate_cam12
    show_name: false
    show_entity_picture: true
    style:
      left: 75%
      top: 65%
    styles:
      card:
        - width: 50px
        - height: 50px
      icon:
        - width: 45px
        - height: 45px
    tap_action:
      action: navigate
      navigation_path: /ai-yml/ai-cam12

# 12,31,50,69,88
# 14,38,62,86
# 25,50,75
# 33,66
# 50