3D Floorplan using lovelace picture-elements card

[fahr (Aaron)]

You are correct that it won’t work for what I call the lighting overlays, but it will work for the toggles. e.g.

type: picture-elements
image: /local/floorplan/first_floor_lights_on.png
elements:
  # Lighting Overlays
  - type: image
    entity: switch.front_porch
    tap_action: none
    hold_action: none
    state_image:
      "on": /local/floorplan/transparent_square.png
      "off": /local/floorplan/first_floor_front_porch_lights_off.png
      "unavailable": /local/floorplan/transparent_square.png
    style:
      top: 50%
      left: 50%
      width: 100%

  # Light Toggles
  - type: image
    entity: switch.front_porch
    tap_action:
      action: toggle
    state_image:
      "on": /local/floorplan/transparent_square.png
      "off": /local/floorplan/transparent_square.png
      "unavailable": /local/floorplan/unavailable.png
    style:
      top: 32.2%
      left: 59.1

Which results in this when the entity is unavailable:

[Sp4wN (Ozen)]

Oh right, you don’t use state-icon, I would love to do like yours too, but I have some limitations, I have to show HA Dashbord on a tablet which is vertically mounted on the wall and our living room is crowded with a lot lights and other stuff. I am only couple days on HA, before I was using smartlife app. I couldn’t even add some extra stuff on the floorplan like sensors and thermostat because of the crowded information, by using state-icons I can point it out where to click.

This is how my floorplan looks:

I have to come up with nicer setup, picture-elements is great, I used even for our cat’s to see if they are out or in.

This is the tablet I am talking about, it is (only) 7 inch old Samsung Tab 4 which hangs there last 5 years, and I will get a 10 inch one which fits in that spot and 3D print a holder for it:

[fahr (Aaron)]

Very nicely done, your setup looks great! I agree that the 3d floor plans really don’t translate well to small screens. It’s basically unusable on my phone.

[CDRX2]

Your setup looks really cool. A bit off-topic: how did you achieve tracking your cats? Fit them with a GPS collar?

[Sp4wN (Ozen)]

@fahr Thank you, yes it is little hard to get everything on one screen, I want only one dash too. Added power usage of the house today and temperature and it made even more crowded, that’s why I need a 10 inch tablet met high resolution.

@CDRX2 Thanks, We have a Sureflap cat door connect and using a integration to make that happen, I am the first one with overlay images I believe, it is basically same as the switches, only inside and outside images are separate thus 4 images for 2 cats.

[rousveiga (Rosa)]

Hello! Thank you for the post and tutorial.
I was wondering, would you mind sharing your image files? I’d like to try the tutorial out before I do my actual house.

[CDRX2]

Thanks for the info! Would be a fun thing to add sometime, but I still need to finish many other projects (like my UI) first.

[CDRX2]

Quick update on my delay switching floors. I actually went around it by using a custom:swiper-card that each show a floor. No more button to push, no more delay, a simple swipe and a simple 3D animation are now my way of switching from 1st to 2nd floor.

[mmycjguo]

Great work, can the following operations be detailed? do not really understand
“I then created a new layer for each room with the lights off by duplicating the lights off layer and deleting any part of the duplicated layer that was not part of the room I was creating the image for”

[mmycjguo]

thank you,I was trying to understand this

[tOkra (tOm)]

Hello,
i have a large Room with different lights.
We call them:
Light_1
Light_2
Light_3

If Light_1 goes on, then the whole room should shine.
If Light_2 goes on, then the whole room should shine.
If Light_3 goes on, then the whole room should shine.
If 2 from them going on, the whole room s hould shine.
Only if ALL 3 light are off, the room should be dark.

Is something like that possible?
Can i build a groupr or something? Can u give me an example if somehow is possible?

Thx all for supporting

[mmycjguo]

great work,Can you tell me how to do the following：
“binary_sensor.back_door_camera_armed
binary_sensor.camera_back_door_camera_armed
script.camera_toggle_motion_detection”
sorry,english is not my native language.

[fahr (Aaron)]

I use mostly Philips Hue bulbs so the HA integration already imported groups of lights that I had created in the app. So light.living_room is actually referring to a group of 5 light bulbs. You could very easily create your own group by defining it in your configuration.yaml under a groups section.

groups:
  large_room:
    name: A large room of lights
    entities:
      - light.light_1      
      - light.light_2
      - light.light_3

Then in your lovelace yaml you would simply add a new section that references your group rather than an individual light.

type: picture-elements
image: /local/floorplan/first_floor_lights_on.png
elements:
  # Lighting Overlays
  - type: image
    entity: group.large_room
    tap_action: none
    hold_action: none
    state_image:
      "on": /local/floorplan/transparent_square.png
      "off": /local/floorplan/first_floor_large_room_lights_off.png
      "unavailable": /local/floorplan/transparent_square.png
    style:
      top: 50%
      left: 50%
      width: 100%

  # Light Toggles
  - type: image
    entity: group.large_room
    tap_action:
      action: toggle
    state_image:
      "on": /local/floorplan/transparent_square.png
      "off": /local/floorplan/transparent_square.png
      "unavailable": /local/floorplan/unavailable.png
    style:
      top: 43.34%
      left: 54.2%

[fahr (Aaron)]

That is referring to entities created by the blink integration. The contents of the script.camera_toggle_motion_detection looks like:

blink_toggle_motion_detection:
  alias: Toggle blink camera motion detection
  sequence:
    - service_template: >
        {% if is_state(state_check_entity_id, "off") %}
          camera.enable_motion_detection
        {% else %}
          camera.disable_motion_detection
        {% endif %}
      data_template:
        entity_id: "{{ entity_id }}"

[tOkra (tOm)]

Amazing how you moderate your topic!
I have some sensors for temperature and i want it as number like u did.
But i get only a Icon.

        - type: state-icon
           entity:  sensor.temperature_158d0002c904c0
           style:
             left: 31%
             top: 40%
             color: "#000"
             border-radius: 50%
             text-align: center'
             background-color: "rgba(255, 255, 255, 0.3)"'
             font-size: 11px'
             font-weight: bold '

what i miss?

[fahr (Aaron)]

You just need to change the type from state-icon to state-label if you want the temperature as text.

[Ibrahim_Mohamed_Ibra (Ibrahim Mohamed Ibrahim)]

hello i have done your tutorial but nothing appears for me can you please help me

/config/ui-lovelace.yaml

- id: floorplan
  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

/config/_floorplan_first_floor.yaml

type: picture-elements
image: /local/33.jpg
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: 30%
      left: 30%
      background: "#DA1010"
      border-radius: 60%

[fahr (Aaron)]

A few questions / things to check:

• Do you see the floorplan tab in your dashboard?
• If so did you make sure to define the input_select in your configuration.yaml?
• What is the current state of the input_select.floorplan_floor? (you can find the value on the states tab in the dev tools)

[Ibrahim_Mohamed_Ibra (Ibrahim Mohamed Ibrahim)]

thanks it worked for me
i have another question please in each floor i have three room i want a toggle button to open each room picture How???
sorry my english is not good

[fahr (Aaron)]

I think you mean that you have floor toggles and on each floor you want to have room toggles that only show one particular room?

If that’s the case you would set it up similar to the conditionals you have for the floor toggles and have additional lovelace views that you include that are made up of a base image of a single room with it’s entities.