Floorplan : need help for image path with template code please

Olivier974 · November 24, 2022, 9:01pm

Hello,

i try to display an image .svg with the same name of the entity_id area : example : “light.desk” entity_id is in “office” area, “light.table” is in “livingroom” area and my .svg are office.svg and livingroom.svg but need some help with the template please:

- name: Room
  entities:
      - entity: light.desk
        element: area.office
      - entity: light.table
        element: area.livingroom
   tap_action: light.toggle
   state_action:
      action: call-service
      service: floorplan.image_set
      service_data: /local/floorplan/${area_name(trigger.entity_id)}.svg

but the error is “area_name not define”…i understang my template is not good…but can figured it out how achieved that bymyself…

i try with “area_id” but thats not the problem, the first problem is to format text correctly…

in jinja

{{ area_id('light.desk') }}

give

office

what is i expected to

so how use {{area_name(trigger.entity_id)}} in my service_data: please?

OzGav · November 25, 2022, 10:41am

The first question is why? If we understand why you are trying to insert these SVGs perhaps we can show a better way. Illustrations will help!

Olivier974 · November 25, 2022, 1:32pm

Hello @OzGav

the idea is to replace only the zone with a bright svg when on :

actually i have a grey masq on each room and its not very nice :

thats why

complete code :

            - name: Room
              entities:
                - entity: light.led_salon
                  element: area.salon
                - entity: light.led_sejour
                  element: area.sejour
                - entity: light.led_bureau_light
                  element: area.bureau
                - entity: light.led_cuisine
                  element: area.chambre_olive
                - entity: light.led_cuisine_2
                  element: area.chambre_olive
                - entity: light.led_porche
                  element: area.porche
                - entity: light.led_entree
                  element: area.entree
                - entity: light.projecteur_terrasse
                  element: area.terrasse
                - entity: light.led_couloir_bas
                  element: area.couloir_bas
                - entity: light.led_wc_bas
                  element: area.wc_bas
                - entity: light.led_couloir_haut
                  element: area.escaliers
                - entity: light.strip_cuisine_bas
                  element: area.cuisine_bas
                - entity: light.strip_cuisine_haut
                  element: area.cuisine_haut
                - entity: light.led_sdb_bas
                  element: area.sdb_bas
              tap_action: light.toggle
              state_action:
                action: call-service
                service: floorplan.class_set
                service_data: '${(entity.state === "on") ? "light-on" : "light-off"}'
            - name: Background
              entities:
                - entity: sensor.time_of_day
                  element: area.terrain
              state_action:
                action: call-service
                service: floorplan.image_set
                service_data: |
                  >
                   var imageName = ''; 
                   switch (entity.state) { 
                     case 'Dawn': imageName ='18h'; break; 
                     case 'Morning': imageName = '9h'; break; 
                     case 'Midday': imageName = '12h'; break; 
                     case 'Afternoon': imageName = '13h'; break;
                     case 'Dusk': imageName = '6h'; break; 
                     case 'Night': imageName = '21h'; break;
                   } 
                   return '/local/floorplan/maison_' + imageName + '.svg';
            - name: Temperature
              entities:
                - sensor.mi_bureau_temperature
                - sensor.mi_sejour_temperature
                - sensor.mi_chambre_olive_temperature
              state_action:
                - service: floorplan.text_set
                  service_data: >-
                    ${(entity.state !== undefined) ? Math.round(entity.state *
                    10) / 10 + "°" : "unknown"}
                - service: floorplan.class_set
                  service_data:
                    class: static-temp
          stylesheet: /local/floorplan/maison.css
        full_height: true
        type: custom:floorplan-card

petro · November 25, 2022, 1:58pm

the js templates do not have access to the jinja functions. So things like area_name or area_id will not work in a js template.

Olivier974 · November 25, 2022, 2:36pm

thanks @petro

its rude…but its so clear and precise.

petro · November 25, 2022, 2:41pm

not really sure how my response was rude…

Olivier974 · November 25, 2022, 5:02pm

sorry i meaned hard to hear…english is not my native language…my apologize

OzGav · November 25, 2022, 7:26pm

You don’t need to insert SVG s to do that. You can just assign a class to show or hide. Look at this example and see if it is doing what you want Floorplanner Home Example - Floorplan for Home Assistant

Olivier974 · November 26, 2022, 7:33am

Look at my code, thats already what i do. The goal was to change the image of the room when the light goes on, what is really better than just ungrey the room…but i ask too much, as @petro said its impossible, programming limitation.

Thats not a big deal, i think i have already spend too much time with floorplan…its a really long long…way when you want to make it nice and add a lot of device…lol

Thanks both for your help, have a nice weekend

OzGav · November 26, 2022, 9:36am

If you are making the room dark by using a grey mask then that is one way to do it but not the usual. What most people do is create a dark version of the house and make that the background image. Then you place the light version of each room on top and show or hide those images.

@petro was reacting to your use of jinja. Using floorplan to show a nice bright image of your room is absolutely achievable. Indeed I even have light spill out of the open doors and through the windows

Olivier974 · November 26, 2022, 9:50am

yes, understand, but i already have a switching background image for time of day, so not sure i can add each room on top…

OzGav · November 26, 2022, 12:13pm

So are you saying you want a day time background and a lights on image for that and then a night time background and a different lights on image for that?

Edit: Have a look and see if this is the answer for you Change svg image based on entity state · Discussion #244 · ExperienceLovelace/ha-floorplan · GitHub

Olivier974 · November 26, 2022, 1:49pm

thanks, already done in my code : i have 5 background images : 6h , 12h, 13h, 18h, and 21h, with the @exetico sample.

It use “switch” and case, what is ok for 5 case, but i have 21 light…thats why i search a simple way.

Thanks for your help anyway, i “just” need to do the switch and case for 21 lights lol, not sure am i ready to spend more time on this

OzGav · November 26, 2022, 10:52pm

Ok. Possibly with JavaScript and functions you will be able to achieve this. Have a look at this for some inspiration How to pass entity id to browser_mod popup · Discussion #252 · ExperienceLovelace/ha-floorplan · GitHub

Olivier974 · November 27, 2022, 5:29pm

thanks/ i have a look and its seems complicated to understand what the code really do, i will take time to understand and adapt, thanks for your help.