I am glad if it was helpful, I don’t need credits for simple thing like this, I am sure you’d find out too.
About using transparent square with red border, it does not work unfortunately, if the image is small, lets say 50x50pxl it will automatically resize it to the floorplan.
In my case I can see the problem because I use state-icon as well, and when a entity is not available it will grayout.
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:
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:
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.
Your setup looks really cool. A bit off-topic: how did you achieve tracking your cats? Fit them with a GPS collar?
@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.
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.
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.
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.
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”
thank you,I was trying to understand this
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
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.
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%
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 }}"
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?
You just need to change the type from state-icon to state-label if you want the temperature as text.
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%
A few questions / things to check:
configuration.yaml?input_select.floorplan_floor? (you can find the value on the states tab in the dev tools)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