Floorplan for Home Assistant

wow, feeling pretty stupid now that i know the answer…
Thanks, I’ll give that a go

Yep, that worked. It turned out to be just “off” like this:

                    - entities:
                        - sensor.z_wave_room_sensor_air_temperature
                        - sensor.pure_hot_cool_link_temperature
                      state_action:
                        - service: floorplan.text_set
                          service_data: >-
                            ${(entity.state !== "off") ? Math.round(entity.state
                            * 10) / 10 + "°C" : "..."}
                        - service: floorplan.class_set
                          service_data:
                            class: static-temp
                        - service: floorplan.class_set
                          service_data: |
                            >
                              var temp = parseFloat(entity.state.replace("°", "OFF")); 
                              if (temp < 17) return "temp-low"; 
                              else if (temp < 22) return "temp-medium"; 
                              else if (temp < 25) return "temp-medium-high"; 
                              else return "temp-high";

Wonderfull…

1 Like

Great. If you don’t want the dots you can have nothing between the quotes

Edit. You shouldn’t need/have those two class set entries. Just the bottom one.

Oh, right. I can remove that forst class_set 'cause i already set a class here…

I’m leaving the dots in for now, just so that I can confirm that everything is still loading without me having to enable the Dyson fan to give me a measured temp.

1 Like

Is it possible to have a day and night floorplan
So in the day it is bright and at night its dark?
Thanks

I would say yes. You can have the very bottom image in the SVG the day image and then immediately above that have a night image. Use an input_boolean to determine when night and day is and use that to control the visibility of the night layer.

Could you give some example of code please.
On how to create a input_boolean

There are a heaps of ways to decide when night is but this is a simple one:

binary_sensor:
  - platform: template
      is_night_time:
        friendly_name: "Is it Night Time Boolean"
        value_template: >-
          {{ is_state('sun.sun', 'below_horizon') }}

Then just a simple rule in your lovelace yaml:

          rules:
            - entities:
                - binary_sensor.is_night_time
              name: Show or Hide the Night Time Image
              state_action:
                service: floorplan.class_set
                service_data: 
                  class: '${(entity.state === "true") ? "always-visible" : "always-invisible"}'

You would then put your two images in your SVG with the night time one on top and label the night time one binary_sensor.is_night_time

edit: CSS is

/* Makes things visible and invisible */
.always-invisible {
  visibility: hidden !important; 
  opacity: 0 !important;
  stroke-opacity: 0 !important;
}

.always-visible {
  visibility: visible !important;
  opacity: 1 !important;
  stroke-opacity: 1 !important;
}
1 Like

Couldn’t get it work.

Actually I had a typo I am not sure if you fixed it. In the rules input_boolean.is_night_time should be binary_sensor.is_night_time I have fixed it in my post above. If you did fix that or if it still doesn’t work you will need to be more specific as to what doesn’t work and what you tried to get it to work.

Can someone help me with a hover action problem.

when I use tap as per below, it works,

    - entity: sensor.tether02_indoor_air_quality_level
      element: text-iaqi-index-cafe-bar
      tap_action:
        action: call-service
        service: floorplan.class_set
        service_data: hover-on

when I use hover it does not

    - entity: sensor.tether02_indoor_air_quality_level
      element: text-iaqi-index-cafe-bar
      hover_action:
        action: call-service
        service: floorplan.class_set
        service_data: hover-on

I have an overide as follows

  defaults:
    hover_action: hover-info
    tap_action: more-info

Can someone give me some pointers?

Thanks!

It’s not clear what you expect to happen. You are just setting a class when you hover? When you say it doesn’t work what do you observe? What do you expect to happen? Are you using the browser dev console to inspect the applied CSS classes? Please also supply your CSS.

Hi,

The css is working as expected, I was tying to highlight that (assuming all css is working as it does what it is supposed to) when I use:

tap_action: the hover function works (when I click the overlay goes to opacity 0)

However when I replace this with:

hover_action:

then the hover css does not do what it is supposed to (set opacity to 0 when I hover)

Here is my full css

/* Entity On/Off */
.entitystate-on {
  opacity: 1!important;
}

.entitystate-off {
  opacity: 0!important;
}

/* Entity vacant/occupied/pending */
.entitystate-Vacant {
  opacity: 0!important;
}

.entitystate-Pending {
  opacity: 0.5!important;
}

.entitystate-Occupied {
  opacity: 1!important;
}

/* Entity true/false */
.entitystate-true {
  opacity: 0 !important;
}

.entitystate-false {
  opacity: 1!important;
}

/* Hover over */
.hover-on {
  opacity: 0 !important;
}

.hover-off {
  opacity: 1 !important;
}


#floorplan  {
  padding: 10px;
}

/* #floorplan svg{
  height: 100vh!important;
} */

svg tspan {
  fill: var(--primary-text-color);
}

/* Animation */

.spinning {
  animation-name: spin;
  animation-duration: 5s;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
  transform-origin: 50% 50%;
  transform-box: fill-box;
}

@keyframes spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

/* SVG shapes */

svg, svg * {
  vector-effect: non-scaling-stroke !important;
  pointer-events: all !important;
}

/* Hover over */
.ha-entity:hover {
  stroke: #03A9F4 !important;
  stroke-width: 1px !important;
  stroke-opacity: 1 !important;
}

/* Binary sensors */

.binary-sensor-on {
  fill: #F9D27C !important;
}

.binary-sensor-off {
  fill: #7CB1F9 !important;
  transition: fill 5s ease;
}

/* Buttons */

.background-on {
  fill: #1ABA92 !important;
}

.background-off {
  fill: #d32f2f !important;
}

.background-on tspan {
  fill: white !important;
}

/* Light Control */

path[id*="area."].light-on{
  opacity: 0 !important;
}

path[id*="area."]{
  opacity: 0.5 !important;
  transition: opacity .25s;
  -moz-transition: opacity .25s;
  -webkit-transition: opacity .25s;
}

/* Things Control */

[id*="thing."].thing-on{
  opacity: 1 !important;
  filter: drop-shadow(0px -5px 3px #ffedde);
  fill: #fffae54f !important;
}

[id*="thing."]{
  opacity: 0 !important;
  transition: opacity .25s;
  -moz-transition: opacity .25s;
  -webkit-transition: opacity .25s;
}

/* Temperature text */

.static-temp, .static-temp tspan {
  fill: #ffffff;
}

/* Spinning fan */

.spinning {
  animation-name: spin;
  animation-duration: 5s;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
  transform-origin: center;
  transform-box: fill-box;
}

@keyframes spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

Yes I can replicate that. I have asked the brains trust what they think and we will get back to you.

is it possible to use state attributes when sending the css selector?

something like this:

            - element: boiler
              entity: climate.lounge
              state_action:
                action: call-service
                service: floorplan.class_set
                service_data: heater-${{ state_attr("climate.lounge", "hvac_action" ) }}

I have tried that but after save, the edit window just goes round and round… any ideas?

Many thanks for any help

This should work:
${entity.attributes.hvac_action}

You can actually access every entity and its attributes in HA, Use the following syntax:
hass.states["climate.lounge"].attributes.hvac_action

1 Like

Hi,

That is not throwing any errors, but for some reason my icons are not changing colour.

I am not sure if it has to do with the type of image used in the svg? I basically converted a png into an svg and then imported into inkskape.

Any ideas?

Here is the corresponding css

.heater-on {
  fill: #B90000 !important;
}
.heater-heat {
  fill: #B90000 !important;
}
.heater-heating {
  fill: #B90000 !important;
}
.heater-idle {
  fill: #00B200 !important;
}
.heater-off {
  opacity: 0 !important;
  transition: fill 5s ease;
}

and here is the rule

            - element: thermostat-study
              entity: climate.study
              state_action:
                action: call-service
                service: floorplan.class_set
                service_data: heater-${entity.attributes.hvac_action}

the opacity css works, however changing the colour does not

as you can see from states, the thermostat is “idle”

This icon below, based on the yaml above should then be green (#00B200)
image

Sorry, this is probably down to my css skills… but any pointers would be most welcome!

Many thanks

Start by inspecting with the browser tools and you should be able to see the class that is applied to that element. See if it changes with the state change. However you will have the problem that if the attribute changes but the state does not then you won’t see any change in the floorplan. You might have to find a way around that. For example, make the entity sensor.date_time and then it will update each minute. If you do this then don’t forget you will have to use the hass entity that I showed above to get access to the required attribute.

Hi

Thank you for raising the question, and provide the needed information to look into the case.

Sadly the short answer is, that hover_action doesn’t allow that kind of action(s).
It’s executed in a more isolated flow. Personally I’d be worried about triggering things a bit too often, if we’re not spending extra time on limiting the executing while the user randomly mouse over a element. However, it shouldn’t be that hard, though. The code stack are currently a bit stuck, cause we’re waiting to roll out a interesting feature, hopefully in the upcoming weeks.

The more technical answer is:
We’re using the handleEntityIdSetHoverOver function in the loadBitmapImage and loadSvgImage flow.
For the entityInfo we’re looking at the rules, and check if hover_action is defined, and use our 'hover-info` solution to show the information.

But it’s possible to add the logics to our solution. I’ve already spend a few hours looking at that part of the code, just to be sure I won’t break anything. That part of the solution is created by OP, so I was not 100% sure about how to expand it.

Before hover:

After hover:

Question:
But it bring us to a big question.

Cause you defined “hover-on” and “hover-off”.

We don’t have a trigger for “hover-off” (onmouseout in the lib we’re using), but only a “hover-on” trigger (onmouseover).

Do you expect ha-floorplan to also trigger a hover-off event? As you hopefully can understand, that requires even more expansion of the code.

I’ve attached a build here, but you only have the hover-on related features:
https://raw.githubusercontent.com/ExperienceLovelace/ha-floorplan/eed9910bdc5bd11151edbebcd5ebb483b1953e71/dist/floorplan.js

Overwrite your existing floorplan.js, and secure that the old one are not hanging in the cache and playing with you.

With that said. Let me know what you think, and PLEASE respond in a new Discussion on GitHub where you create a ref. to the original question from this thread :grinning:. That helps us have a better overview of each question, and sharing solutions in general. Thanks!

In the new thread on Github Discussion, please tell why you’re hardcoding hover as a class, instead of using :hover as the only selector, just so I understand that part, too.

For other people dropping by, please use the new thread:

Thanks.

Hi

There’s a pre-release ready for you:

You can now use the “class_set” on hover_action like so:

      - entities:
          - binary_sensor.garage
        hover_action:
          - service: floorplan.class_set
            service_data: '${element.matches(":hover") ? "is-hovering" : ""}'

For other people dropping by, please use the new thread:

Thanks.

@staff : Please close this one, cause Floorplan now available as a Lovelace card is the new thread :slight_smile: Thanks!