@Bottesford Ah, thank you! That is the missing link, I didn’t realize that the rectangle didn’t get replaced but it is easy enough to modify with the css so you don’t see it.
Hi all,
I just started on floorplan and did some animation on door opening which is kinda cool. Is there a way to do for window? I only manage to open one side of the window as 1 ID can only be used on 1 object. Grouping doesnt work since I want the window to have 2 different animation (i.e 1 rotate clockwise and the other counter clockwise). Can anyone teach me on how I can use 1 sensor to trigger 2 different animation on 2 objects?
2 Likes
Really excited by the possibilities, started sketching our floor plan, worried I’m going to go a little crazy with having the plan make me want to add extra sensors for doors and windows that I wasn’t planning on having originally. We’re installing a Sense electrical meter and a Flō water meter both are, in theory able to detect specific points of use (appliances, water fixtures) by their usage signature. Curious how/if i should try to represent active points of use like that in the house.
2 Likes
Oh! I like the idea of showing the exterior for our Solar, and local weather station detailed data, nice!
so for someone who dont understood how to change background color how do i change that to black?
Accidentally asked this in the ‘Show your floor plan’ thread:
- Does anyone know how to turn a Chromecast TV off via floorplan, and if it’s playing something, maybe display something relevant to the content on the floor plan?
I tried using service: toggle and that can turn the TV on, but clicking it again makes it idle instead of powering the TV off.
Also I’d love it if the TV image instantly changed when I click it, but since that only powers the TV on and keeps it in the ‘off’ state, the CSS for idle/paused/playing doesn’t activate until I actually start casting a video.
- Has anyone managed to change Floorplan elements based on things like time of day and weather? I’d like to dynamically change the background of my floor plan.
I upgraded to the latest version of HASS and it seems like my animations have stopped working for my lights. I can still click on the icons to toggle the lights but the colour doesn’t change anymore. It worked before the update and I haven’t changed anything. Are there any breaking changes to be aware of?
Also, I can have the floorplan background change with the active theme using:
svg, svg * {
pointer-events: all !important;
background-color: var(--primary-background-color);
}
But when I try to set a specific background colour, it doesn’t work and shows the default white, any ideas?
svg, svg * {
pointer-events: all !important;
background-color: var(–variable-name, #37464f);
}I tray to change colors of some object depending on outside temperature.
I try like this, but not working:
- name: fp_temperature_oudside_front_changing_colors
entities:
- sensor.433_temperature_01_temperature
states:
- state: ‘< 18’
class: ‘green’
- state: ‘< 30’
class: ‘red’
Which program did you use for the layout? I like the light effects how you do that?
Check this post:
2 Likes
The program is called Sketch, by Bohemian Code, its a pretty common vector drawing app for Mac.
The light glows are just circles with radial gradient as a fill going from yellow to transparent. In the cases of the non-round shapes like rooms or exterior lights I just started with a circle then added extra points to follow the path of the exterior.
I was thinking I could use either radius or transparency for showing the brightness of lights that are dimmable. And in the case of the bedroom lights map the color of the glow to the color temperature of the lights for Hue.
1 Like
Thanks for info.
Thanks for help. Working great 
Can you share that temp sensor image from dining room?
How about using animations like door open or temperature gauge with real temperature show?
Is this possible with floorplan?
I have two object one is rectangle and second is text. The rectangle is working and changing colors depending on outside temperature, but where text is temperature is not displayed?
my code:
- name: fp_temperature_oudside_front
entities:
- sensor.433_temperature_01_temperature
text_template: '${entity.state ? entity.state : "unknown"}'
class_template: '
var temp = parseFloat(entity.state.replace("°", ""));
if (temp < 0)
return "temp-freeze";
else if (temp < 10)
return "temp-low";
else if (temp < 22)
return "temp-mid";
else
return "temp-high";
'
It is possible to have same ID on two objects? How? Or I am doing all wrong?
Door animation can be achieved yes:
CSS:
@keyframes rotate90 {
100% {
transform: rotate(90deg);
}
}
@keyframes rotateReset90 {
0% {
transform: rotate(90deg);
}
100% {
transform: none;
}
}
.door_closed {
fill: #008000 !important;
animation-duration: 4s;
animation-name: rotateReset90;
transform-box: fill-box;
}
.door_open {
fill: #ff0000 !important;
animation-duration: 4s;
animation-name: rotate90;
animation-fill-mode: forwards;
transform-box: fill-box;
}
/* Doors */
/* Doors that open to the bottom right */
#sensor\.doorsensor {
transform-origin: bottom right;
}
For a temperature gauge that changes the temperature I think it is possible with changing the picture depending on temperature, but I think everyone here just use the text template to show temperature, which would be much easier. I don’t think the naun project have that much icons anyway, so then you have to edit the icons yourself.
1 Like
You can have the same entity id on two objects by grouping them in inkscape.
But I don’t think that work when using text_template. What you can do is just have the entity_id on the text, and that will change color. If you want the rectangle to change the color, and not the text, just make a template for your sensor, then use one for each.
1 Like
Thanks for info, I will tray that when door sensor arrives 
I try that but text is only changing colors, no numbers. How you do that If you wanna show one sensor on multiple object like my color + temperature?