Change color of elements

Third party integrations Floorplan
1

Hi,

I want to change color of an element in my floorplan, that is not an entity in homeassistant.
Want to use it to light up and grey out buttons in my svg-file I use to toogle layers, so color changes on mouse-click.
Is that possible, or do I have to use input_boolean and use states for that?

2

And one more thing, what are people here using to duplicate their entities? Make a group with just one entity, and use that group as the duplicate?

3

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", ""));
        if (power < 10)
          return "heater-off";
        if (power < 200)
          return "heater-low";
        if (power < 600)
          return "heater-mid";
        if (power < 1000)
          return "power-high";
        else
          return "power-burning";
        '

And here is the corresponding entry in floorplan.css:

.heater-low {
  fill: #ceb1b1 !important;
  fill-opacity: 1 !important;
}
.heater-mid {
  fill: #db7d7d !important;
  fill-opacity: 1 !important;
}
.heater-high {
  fill: #e54747 !important;
  fill-opacity: 1 !important;
}
.heater-burning {
  fill: #ff0000 !important;
  fill-opacity: 1 !important;
}

I’m a big fan of color coding (even do this with my scuba tanks!!!), so love this feature…

3 Likes
4

And i just posted something on this a few minutes ago here: https://community.home-assistant.io/t/how-to-set-up-layers-for-different-floorplans/39920/16

When using different layers, you may find that you want to use the same entity in different layers. I found an easy workaround for this for most of my devices, ie MQTT devices. The workaround I found for these duplicate entities is to create a new entity per different layer as follows:

  • name: “Stairs”
    command_topic: milight/EDIT/rgb_cct/1
    state_topic: milight/updates/EDIT/rgb_cct/1
    <<: &MILIGHT_PARAMS
    platform: mqtt_json
    computed_color: true
    color_temp: true
    brightness: true
  • name: “Upstairs Stairs”
    command_topic: milight/EDIT/rgb_cct/1
    state_topic: milight/updates/EDIT/rgb_cct/1
    <<: *MILIGHT_PARAMS #copy of light.stairs created for floorplan multilayers
    Not the prettiest solution, as it adds a lot of unneeded code, but it works. Since these duplicated entities use the same MQTT topics, their statuses are linked and update at the same time on all layers. Sweet!

For the only other type of entity that I have on several layers, ie. camera, I just created a group with only that entity. This kinda works, but looks a bit crappy… Snapshot displays, but unnecessary info is added and no correct status (‘Streaming’, ‘Recording’ or ‘Idle’) is associated. I might have to look into @pkozul’s latest published camera implementation of floorplan, but that would involve editing the changes made in the HA-floorplant.htm and that could take more time than I have.

Let me know, if you found another more elegant solution…

5

Thank you! Seems like the way to go is to link it to a HA entity to work :blush: And thanks for det extra info on the color changes based on value on the
sensor :blush:

6

Thanks :blush: btw, you are not using v. 1.0.7.4 because of the custom json script for changing layers? I use v.1.0.7.4 floorplan.html without problems with the custom json script.

7

Do you mean Javascript? Does 1.0.7.4 work with the custom_js.js? If yes, the original one or the edited one I posted earlier?

8

Yes, I`m sorry, ment javascript. And yes, 1.0.7.4 works with custom_js.js (the one you posted). The only thing I did was add the script at the top of ha-floorplan.html. So no need for any configuration for me at least.

9

OK, thanks for the tip. I shall try it soon!

10

Your script was just too good :slight_smile:
But I have a problem with my animation. Have an element that is a door. It was working before, but not anymore, not shure of the reason. It just fly off the screen.
Can you see what`s wrong?

Floorplan.yaml:

    - name: Door
      entities:
        - sensor.sensative_strips_access_control
      states:
        - state: '23'
          class: 'door_closed'
        - state: '22'
          class: 'door_open'

Floorplan.css:

/* Animation */

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

.door_open {
  fill: #ff0000 !important;
  animation-duration: 4s;
  animation-name: rotate90;
  animation-fill-mode: forwards;
}

/* Doors */

/* Doors that open to the bottom right */
#sensor\.sensative_strips_access_control {
  transform-origin: bottom right;
}
11

Bit oldish question here, but let’s not have a loose end. Add
transform-box:fill-box;
to the style of your door property. Then the doors swing instead of flying.

Strange though, my Inkscape deletes this setting when I press Set -button. So I can only add it in notepad/CLI afterwards.

12

yes, already pointed out that multiple times in other threads, forgot to update this thread.
Well, I update this in floorplan.css, so no problem here.

13

in the css file says uknown property Fill… why is that?