How to display images depending on entity state in ha-floorplan

I decided to use ha-floorplan because of its benefit to interact with the entities within a SVG image in defined areas and the possibilty to display different states depending on current values. At least I understood that it should work like this.

What I am trying to implement:

  1. floorplan image depending on time of day
  2. swap images of an entity depending on the current state - i.e. state of cover/shutter/blind

What I have done so far:
I have installed ha-floorplan as described in the official docs with the origin lovelace code and adapted the SVG image and the entity configuration.

According to 1:
I have found a (working) image swap configuration for the type “picture-elements” which uses the entitiy sun.sun to get the sun elevation. Unfortunately I am not able to use it in ha-floorplan for some reason.

Here is the code in lovelace:

type: picture-elements
panel: true
image: /local/floorplan/background/floorplan_morning.svg
elements:
  - type: image
    entity: sensor.background
    state_image:
      morning: /local/floorplan/background/floorplan_morning.svg
      noon: /local/floorplan/background/floorplan_noon.svg
      evening: /local/floorplan/background/floorplan_evening.svg
      night: /local/floorplan/background/floorplan_night.svg
    style:
      left: 50%
      top: 50%
      width: 100%
    tap_action:
      action: none

I tried to use a SVG without a background image. The idea: On the sensors state change the background image (layer “background” in the SVG) should change as well - without success:

groups:
  - name: background
    entities:
      - sensor.background
    image_template: ' var imageName = ""; switch (entity.state) {  case "morning": imageName = "floorplan_morning"; break; case "noon": imageName = "floorplan_noon"; break; case "evening": imageName = "floorplan_evening"; break; case "night": imageName = "floorplan_night"; break; } return "/local/floorplan/background/" + imageName + ".png"

According to 2.
I’m not able to replace the images of the shutter. Here my attempts:

    - element: covertest
      entity: cover.covertest
      image_template: >-
        var coverstate = sensor.position_covertest;
        if (coverstate < 1) return '/local/floorplan/coverclosed.png’; 
        else if (coverstate == 100) return '/local/floorplan/coveropened.png';
        else return '/local/floorplan/coverclosed.png';

and

    - entity: sensor.position_covertest
      image: /local/floorplan/coverclosed.png
      state_image:
        '0': /local/floorplan/coverclosed.png
        '100': /local/floorplan/coveropened.png
      style:
        left: 50%
        top: 50%
        width: 100%
      title: Cover test
      type: image

Is there anybody who might help me with these issues? Thanks in advance!

From what I am using, I think your last post is ‘almost’ fine… it misses a dot.png for the line ‘0’
And I never used a combi with image and state_image in an entity…should not be needed

Thanks for your replay!
The missing dot has occured by reediting the code. I fixed it meanwhile. I removed the “image” as you suggested, but it did not fix my problem.

hmm… so below a excerpt of my setup which works fine for me…I am not (!) using svg…only png, not sure if there is a limitation on the type tbh
Can you maybe detail what is not working and do you have any visible effects? e.g. when I make typos during the setup I see some rotating icon indicating it is not OK, e.g. picture not found or entity wrong or similar.

type: picture-elements
image: /local/floorplan/home/downstairs_day_small.png
elements:
  - type: image
    entity: light.living_room_left_color
    state_image:
      'off': /local/floorplan/home/transparent_square.png
      'on': /local/floorplan/home/light_on.png
    style:
      top: 26.6%
      left: 50.5%
      width: 5%
  - type: image
    entity: camera.nas_thuis_tp_link_c310
    camera_image: camera.nas_thuis_tp_link_c310
    style:
      left: 87%
      top: 90%
      width: 10%
      heigth: 10%
  - type: image
    entity: camera.tapo_camera_545d_hd
    state_image:
      idle: /local/floorplan/home/surveillance_camera.png
      'off': /local/floorplan/home/invisible.png
    style:
      top: 87%
      left: 51%
      width: 3%
      border: 3px dotted yellow

I think it it is special issue with ha-floorplan which uses SVG images.
As I wrote I am able to configure picture-element cards.

Here is the current florplan with the selected entity:


As you can see, the entity is highlighted, but the image does not change.

I tried with SVG in the background now, also fine.
Could you maybe fully reset the cache of your browser or try the InPrivate/Ingcognito version?

Tried in private mode and with cleared cache. No change.
And I am sure that the background image itself is not the problem, further more the type which is defined.

You use type: picture-elements - ha-floorplan uses type: custom:floorplan-card

Here is my complete lovelace configuration for the floorplan:

title: Home
views:
  - title: Floorplan
    path: floorplan
    theme: Google Dark Theme
    badges: []
    panel: true
    cards:
      - type: vertical-stack
        cards:
          - type: horizontal-stack
            cards:
              - type: custom:floorplan-card
                panel: true
                config:
                  image: /local/floorplan/background/floorplan_morning.svg
                  stylesheet: /local/floorplan/floorplan.css
                  log_level: info
                  console_log_level: info
                  defaults:
                    hover_action: hover-info
                    tap_action: more-info
                  rules:
                    - element: shutter_covertest
                      entity: sensor.position_covertest
                      state_image:
                        '0': /local/floorplan/coverclosed.png
                        '100': /local/floorplan/coveropened.png
                      style:
                        left: 50%
                        top: 50%
                        width: 100%
                      title: Cover test
                      type: image

At the beginning of this post you pasted type:picture-elements, this is what I am using so I compared with that. If you are using something completely different then my comparison makes no sense.
With the last pated parts I have no experience and will not enter in trial/error

…sometimes you just need a little hint…
I was able to solve my problem.

ha-floorplan uses another semantic. You have to define the behaviour of your elements within the “rules:” section. The key for both is to set up “service: floorplan.image_set” und configure the whished behaviour in “service_data:”

Here is my working lovelace configuration for ha-floorplan:

type: custom:floorplan-card
panel: true
config:
  image: /local/floorplan/background/floorplan.svg
  stylesheet: /local/floorplan/floorplan.css
  log_level: info
  console_log_level: info
  defaults:
    hover_action: hover-info
    tap_action: more-info
  rules:
    # COVER STATE
    - entity: cover.covertest
      element: shutter_covertest
      state_action:
        action: call-service
        service: floorplan.image_set
        service_data:
          image: >
            ${ entity.state === "open" ?
            "/local/floorplan/coveropen.svg" :
            "/local/floorplan/coverclosed.svg" }
    # BACKGROUND DEPENDING ON TIME OF DAY
    - element: background
      entity: sensor.background
      tap_action: false
      hover_action: false
      state_action:
        action: call-service
        service: floorplan.image_set
        service_data: |
          >
           var imageName = ''; 
           switch (entity.state) { 
             case 'morning': imageName ='morning'; break; 
             case 'noon': imageName = 'noon'; break; 
             case 'evening': imageName = 'evening'; break; 
             case 'night': imageName = 'night'; break;  
           } 
           return '/local/floorplan/background/floorplan_' + imageName + '.svg';
2 Likes

Well… I am happy it worked, still too complex for the purpose I am using it for :slight_smile:

me too :laughing:
Thanks for pushing me in the right direction!

Hi. I am wanting to do something similar with your sample code below. What do I need to create in inkscape in order for the image to show up on my floorplan?

  # BACKGROUND DEPENDING ON TIME OF DAY
    - element: background
      entity: sensor.background
      tap_action: false
      hover_action: false
      state_action:
        action: call-service
        service: floorplan.image_set
        service_data: |
          >
           var imageName = ''; 
           switch (entity.state) { 
             case 'morning': imageName ='morning'; break; 
             case 'noon': imageName = 'noon'; break; 
             case 'evening': imageName = 'evening'; break; 
             case 'night': imageName = 'night'; break;  
           } 
           return '/local/floorplan/background/floorplan_' + imageName + '.svg';

You just need a shape the same shape as your image and the size you want. You give that an ID of sensor.background

Hello. Thanks for the reply. I got the image to dispaly on my floorplan now by creating a square and adding id of input_select.mr_ac_mode. My next hurdle is trying to figure out how I can change the color of the fan base from the 3 different cases below. I want the fan to have a color of orange, cool or purple. The different svg has the color; however the fan color is transparent

- entity: input_select.mr_ac_mode
  tap_action: false
  hover_action: false
  state_action:     
    service: floorplan.image_set
    service_data: |
      >
       var imgName = ''; 
       switch (entity.state) { 
         case 'Normal Heat': imgName = 'heat'; break;
         case 'Normal Cool': imgName = 'cool'; break;
         case 'Fan': imgName = 'air'; break;
         case 'Off': imgName = 'heat'; break;
       } 
       return '/local/lovelace/floorplan/img/fan-' + imgName + '.svg';

I think is because of this css style, but I am not able to create a css to just isolate the entity alone. The fill: none is causing the color not to show. Though, I do need this in place as a gobal style.

g#entities path {
	stroke: var(--paper-item-icon-color);
	stroke-width: 1px;
	stroke-opacity: 1;
	fill: none;
}

I think I am over thinking this and may not even need the different svg files. What I am to acheive at the end is have different fan color spinning base on the state of the input select entity. When it is off, hide the fan. So I try to assign different css class, but failed doing so. This is what I have, but not working.

- entities:
  - input_select.mr_ac_mode
  hold_action: more-info          
  state_action:
    service: floorplan.class_set
    service_data: |
      >
        var stat = (entity.state);
        if (stat === "Normal Heat") return "aircon status-heat";
        else if (stat === "Normal Cool") return "aircon status-cool";
        else if (stat === "Fan") return "aircon status-fan";
        else if (stat === "Off") return "aircon status-off";
        else return "unknown";

Have a look at the home example which shows you how to spin an object and separately how to change the fill colour of an object using floorplan.class_set Home Example - Floorplan for Home Assistant

You can have multiple service calls under the one state action the ring example shows you the syntax for that Ring Example - Floorplan for Home Assistant

1 Like