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';

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!