Floorplan for Home Assistant

[Rune_Pedersen]

@vkorn

document.body.style.backgroundColor

so for someone who dont understood how to change background color how do i change that to black?

[poebae (Graham)]

Accidentally asked this in the ‘Show your floor plan’ thread:

1. 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.

2. 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.

[Marauder2]

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);
}

[lpt2007]

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’

[lpt2007]

Which program did you use for the layout? I like the light effects how you do that?

[Zepixir]

Check this post:

Change color of elements

Nice thing with floorplan is to ensure you get all the information you need at a glance. It’s easy to add different classes for different states or sensor values. Here is how I managed to do this on my setup, thanks to the contributors of this community: floorplan.yaml: - name: Water heater power sensor entities: - sensor.water_heater_power text_template: '${entity.state ? entity.state : "unknown"}W' class_template: ' var power = parseFloat(entity.state.replace("W", "…

[jaredzimmerman]

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.

[lpt2007]

Thanks for info.

[lpt2007]

Thanks for help. Working great

[lpt2007]

Can you share that temp sensor image from dining room?

[lpt2007]

How about using animations like door open or temperature gauge with real temperature show?
Is this possible with floorplan?

[lpt2007]

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?

[Zepixir]

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.

[Zepixir]

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.

[lpt2007]

Thanks for info, I will tray that when door sensor arrives

[lpt2007]

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?

[Zepixir]

I think you have done something wrong in inkscape/svg editor then. If you try again:
Make some text in inkscape, and give the correct entity_id to that text. Must be in the top in the layer (not buried in multiple groups etc). Just try again, and see if it works. If you have done anything to the text (combined with the rectangle or something, it is kind of ruined).

To show the temperature multiple places, in inkscape, you just copy and paste the text to the sensor, then group those two texts, remove the entity_id from the original text, and give the group that entity_id instead.

[lpt2007]

You are right. I tray to create two new object and I grouped this object together and its working.

But I still have another problem both rectangle and text changing colors together. I only wanna have rectangle to change color and text must have always black color? How

[Zepixir]

Make a template of your sensor, then make a group in floorplan.yaml with that sensor. And for that sensor, use only the text_template. Then change the entity_id of the text in inkscape, to the template sensor.

[lpt2007]

Now changing colors not working:

I change script from this:

• name: fp_temperature_oudside_front_changin_colors
  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”;

to this:

• name: fp_temperature_oudside_front_changin_colors
  entities:

  • sensor.433_temperature_01_temperature
    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”;
    ’

• name: fp_temperature_oudside_front_to_text
  entities:

  • sensor.433_temperature_01_temperature
    text_template: ‘${entity.state ? entity.state : “unknown”}’