3D Floorplan using lovelace picture-elements card

Ibrahim_Mohamed_Ibra · January 7, 2021, 12:26am

‘floor1.yaml’

type: picture-elements
image: /local/22.jpg
background: center / cover no-repeat url("/local/Untitled10.jpg")fixed
elements:
  # Lighting Overlays...

  # Light Toggles...

  # Floor Toggle
  - type: service-button
    title: 2nd Floor
    service: input_select.select_next
    service_data:
      entity_id: input_select.floorplan_floor
    style:
      top: 15%
      left: 90%
      background: "#eaeaea"
      border-radius: 5%
  - type: service-button
    title: room1
    service: input_select.set_options
    options: "room1"
    service_data:
      entity_id: input_select.1stfloor_room
    style:
      top: 15%
      left: 60%
      background: "#eaeaea"
      border-radius: 5%

  - type: horizontal-stack
    cards:
      - type: conditional
        conditions:
          - entity: input_select.1stfloor_room
            state: "room1"
        card: !include room1.yaml

'room1.yaml`

```type: picture-elements
image: /local/6.jpg
background: center / cover no-repeat url("/local/Untitled10.jpg")fixed
elements:
  # Lighting Overlays...

  # Light Toggles...

  # room Toggle
  - type: service-button
    title: room1
    service: input_select.set_option
    options: ["floor1"]
    service_data:
      entity_id: input_select.floorplan_floor
      
    style:
      top: 15%
      left: 50%
      background: "#eaeaea"
      border-radius: 5%
 
type or paste code here

Ibrahim_Mohamed_Ibra · January 7, 2021, 12:28am

i have already tried that but it didn’t work

fahr · January 7, 2021, 1:02am

I think it would look something like this:

First you would need another input_select for your rooms in your configuration.yaml:

configuration.yaml

input_select:
  floorplan_room:
    name: The room to show when viewing the floorplan.
    options:
      - "Kitchen"
      - "Bedroom"
    initial: "Kitchen"
    icon: mdi:floor-plan

Then your floors as normal:

lovelace/floorplan_complete.yaml

---
title: Floorplan
path: floorplan
panel: true
icon: 'mdi:floor-plan'
cards:
  - type: horizontal-stack
    cards:
      - type: conditional
        conditions:
          - entity: input_select.floorplan_floor
            state: "1st Floor"
        card: !include _floorplan_first_floor.yaml
      
      - type: conditional
        conditions:
          - entity: input_select.floorplan_floor
            state: "2nd Floor"
        card: !include _floorplan_second_floor.yaml

Then on each floor you would have conditional includes for each room:

lovelace/_floorplan_first_floor.yaml

type: horizontal-stack
cards:
  - type: conditional
    conditions:
      - entity: input_select.floorplan_room
        state: "Kitchen"
    card: !include _floorplan_kitchen.yaml
  
  - type: conditional
    conditions:
      - entity: input_select.floorplan_room
        state: "Bedroom"
    card: !include _floorplan_bedroom.yaml

And one of those might look like:

lovelace/_floorplan_kitchen.yaml

type: picture-elements
image: /local/floorplan/kitchen_lights_on.png
elements:
  # Lighting Overlays
  # Light Toggles
  # Sensors and other labels
  # Room Toggles
  - type: service-button
    title: Bedroom
    service: input_select.select_option
    service_data:
      entity_id: input_select.floorplan_room
      option: Bedroom
    style:
      top: 35%
      left: 5%
      background: "#eaeaea"
      border-radius: 5%
  # ... buttons for each room on this floor

Ibrahim_Mohamed_Ibra · January 7, 2021, 4:25pm

it worked but i used the rooms as a new floor because when i defined it as new condtions in each floor it appears to me as new card

lovelace.yaml

title: home
background: center / cover no-repeat url("/local/Untitled10.jpg")fixed
views:
  - id: floorplan
    title: Floorplan
    path: floorplan
    panel: false
    icon: mdi:floor-plan
    cards:
      - type: horizontal-stack
        cards:
          - type: conditional
            conditions:
              - entity: input_select.floorplan_floor
                state: "1st Floor"
                
            card: !include _floorplan_first_floor.yaml
 
          - type: conditional
            conditions:
              - entity: input_select.floorplan_floor
                state: "2nd Floor"
            card: !include _floorplan_second_floor.yaml

          - type: conditional
            conditions:
              - entity: input_select.floorplan_floor
                state: "Bedroom"
                
            card: !include _floorplan_bedroom.yaml
 
          - type: conditional
            conditions:
              - entity: input_select.floorplan_floor
                state: "Kitchen"
            card: !include _floorplan_kitchen.yaml

firstfloor.yaml

type: picture-elements
image: /local/22.jpg
background: center / cover no-repeat url("/local/Untitled10.jpg")fixed

 
elements:
  # Lighting Overlays...

  # Light Toggles...

  # Floor Toggle
  - type: service-button
    title: 2nd Floor
    service: input_select.select_option
    service_data:
      entity_id: input_select.floorplan_floor
      option: 2nd Floor
    style:
      top: 15%
      left: 90%
      background: "#eaeaea"
      border-radius: 5%
  - type: service-button
    title: bedroom
    service: input_select.select_option
    service_data:
      entity_id: input_select.floorplan_floor
      option: Bedroom
    style:
      top: 15%
      left: 50%
      background: "#eaeaea"
      border-radius: 5%

type or paste code here

Ibrahim_Mohamed_Ibra · January 7, 2021, 4:28pm

bedroom.yaml

type: picture-elements
image: /local/6.jpg
background: center / cover no-repeat url("/local/Untitled10.jpg")fixed
elements:
  # Lighting Overlays...

  # Light Toggles...

  # room Toggle
  - type: service-button
    title: 1st floor
    service: input_select.select_option
    service_data:
      entity_id: input_select.floorplan_floor
      option: 1st Floor
    style:
      top: 15%
      left: 50%
      background: "#eaeaea"
      border-radius: 5%

Ibrahim_Mohamed_Ibra · January 7, 2021, 4:31pm

thanks for your help

Maury77 · January 31, 2021, 7:48pm

good morning everyone, I need to insert some cards in my 3d map that need to be resized together with the plan.

But unfortunately I can’t

I try this for a box with gas sensor

type: picture-elements
style:
width: 100%
height: 100%
elements:

type: ‘custom:mod-card’
card:
type: ‘custom:mini-graph-card’
entities:
- sensor.gas_sensor
  name: Gas
  icon: ‘mdi:fire’
  line_color: grey
  style: |
  ha-card {
  background: rgba(0, 0, 0, 0.7);
  border-radius: 25px;
  border: solid 3px rgb(237,245,5);
  width: 47%;
  height: 47%;
  }
  top: 50%
  left: 50%
  width: 20%
type: image
tap_action: none
hold_action: none
entity: light.gazebo
state_image:
‘on’: /local/3dfloor/esterno/gazebo.png
‘off’: /local/3dfloor/trasparente.png
unavailable: /local/3dfloor/trasparente.png
style:
top: 50%
left: 50%
width: 100%

fahr · January 31, 2021, 7:59pm

Could you elaborate a bit more on what issue you are seeing? Are those 2 elements not displaying at all? Are they displaying but don’t resize on a smaller screen? Is it safe to assume the picture-elements card is the root card of your view?

You don’t need to post the entire contents of your yaml file, but maybe enough to give context on the hierarchy of this layout.

Maury77 · January 31, 2021, 9:19pm

I would like to publish personalized cards … like the mini-graph

type: picture-elements
style:
width: 100%
height: 100%
elements:

type: ‘custom:mod-card’
card:
type: ‘custom:mini-graph-card’
entities:
- sensor.gas_sensor
  name: Gas
  icon: ‘mdi:fire’
  line_color: grey
  style: |
  ha-card {
  background: rgba(0, 0, 0, 0.7);
  border-radius: 25px;
  border: solid 3px rgb(237,245,5);
  width: 47%;
  height: 47%;
  }
  top: 50%
  left: 50%
  width: 100%
type: image
tap_action: none
hold_action: none
entity: light.gazebo
state_image:
‘on’: /local/3dfloor/esterno/gazebo.png
‘off’: /local/3dfloor/trasparente.png
unavailable: /local/3dfloor/trasparente.png
style:
top: 50%
left: 50%
width: 100%
type: image
tap_action: none
hold_action: none
entity: light.gazebo
state_image:
‘on’: /local/3dfloor/esterno/gazebo.png
‘off’: /local/3dfloor/trasparente.png
unavailable: /local/3dfloor/trasparente.png
style:
top: 50%
left: 50%
width: 100%
type: image
tap_action: none
hold_action: none
entity: light.luci_notturne
state_image:
‘on’: /local/3dfloor/esterno/esterno_muri.png
‘off’: /local/3dfloor/trasparente.png
unavailable: /local/3dfloor/trasparente.png
style:
top: 50%
left: 50%
width: 100%
type: image
tap_action: none
hold_action: none
entity: light.luci_cancello
state_image:
‘on’: /local/3dfloor/esterno/cancello.png
‘off’: /local/3dfloor/trasparente.png
unavailable: /local/3dfloor/trasparente.png
style:
top: 50%
left: 50%
width: 100%
type: image
tap_action: none
hold_action: none
entity: light.balcone
state_image:
‘on’: /local/3dfloor/esterno/finestra.png
‘off’: /local/3dfloor/trasparente.png
unavailable: /local/3dfloor/trasparente.png
style:
top: 50%
left: 50%
width: 100%
type: image
entity: camera.monitor2
camera_image: camera.monitor2
camera_view: live
style:
top: 85%
left: 89%
width: 20%
border: 2px solid red
border-radius: 10%
image: /local/3dfloor/esterno/esternoseranoluci.png

I want this in the floor

fahr · January 31, 2021, 10:15pm

I think you need to add that card at the end of your elements and you will need to use a more specific placement using top and left. The width also needs to be much less otherwise it will cover your entire floorplan at 100%.

For example I just plopped this card into my floorplan to test it out. And it renders as expected with the graph card shrinking or expanding based on the width of my browser (or orientation of my phone).

type: picture-elements
image: /local/floorplan/first_floor_lights_on.png
elements:
  # Lots of image elements...
  # At the end of the list...
  - type: "custom:mini-graph-card"
    entities:
      - "sensor.dyson_calc_aqi"
    style:
      top: 10%
      left: 20%
      width: 15%

Maury77 · February 1, 2021, 7:46am

yes I had tried this way but I had tried to use the mod card because it was too big and on other devices it does not respect the dimensions

My PC

s

My phone

fahr · February 1, 2021, 4:28pm

Yeah, I’m not sure there’s a good way to do that, to be honest even the floorplan itself (in my case) is too small to be usable on a phone. I only access it via a web browser.

Maury77 · February 2, 2021, 4:38pm

OK no problem

way to customize these cards to make the background transparent or resize them even in height?

fahr · February 3, 2021, 12:23am

I’d imagine you would just specify a height or width in percentage on the custom card so that they resize properly. For a transparent background you would likely have to use card mod like you are already doing above for your sensor.gas_sensor. That being said I didn’t have much luck with that. I could make the background transparent but then I lost the ability to position or resize the custom card. So I’m not 100% sure the card mod plays well with picture-elements.

alexandrechoske · February 15, 2021, 9:07pm

hey @fahr, do you have the icons used on television? Im searching everywhere to find these effects when showing the tv on.

thanks!

fahr · February 17, 2021, 12:59am

I have the image in the original post but you would have to create your own as the size and shape is very specific to my floorplan image.

If you are familiar with any photo editor like gimp or photoshop you can create one using the tip mentioned in the post:

The on image for the TV state is simply a semi-transparent white rectangle that is slightly larger than the TV and has a gaussian blur.

ScorpionSPB · April 21, 2021, 6:26pm

Hi guys, please tell me. I have formed a project. I want to make my house map my main map.
I am missing a weather map on this panel.
How can I combine type: picture-elements and, for example, the standard Weather Panel?
I managed to shape the weather using state-label. But it looks … not very pretty.
And if I add a Card at the bottom, then the card is not displayed.
Sorry for my English. I use google translate.

fahr · April 23, 2021, 3:31am

I don’t know of a way to do this with a builtin card like the weather-forecast card. You can do it with a custom card though by specifiying the custom type. If for example I wanted to add a big number card to my floorplan I would do this:

type: picture-elements
image: /local/floorplan.png
elements
  # ... all the other elements
  - type: "custom:bignumber-card"
    entity: sensor.dark_sky_precip_probability_0d
    title: Chance of Rain Today
    scale: 30px
    style:
      top: 10%
      left: 10%

miguellandre · May 7, 2021, 10:10pm

Hi.
I’m here trying to adjust the icon but I’m not getting it. the icon does not come out of the bottom left corner. what’s wrong? can you help me?
thanks

fahr · May 7, 2021, 10:31pm

Your yaml isn’t indented properly, and you have a null value that should be removed. e.g.

- type: state-icon
  entity: binary_sensor.montion_sensor_158d000228287d
  icon: 'mdi:run'
  style:
    top: 14%
    left: 84%
    # ...