Picture Element - change icon color based on area

Configuration Frontend
1

Hello!
I kept searching on the forum how to display a sensor tag (based on area) in picture elements but I didn’t find any solution.
In my case, I have a sensor (sensor.chipolo_area) with the attributes Area ID and Area name (living , bathroom, bedroom, etc.).
I can’t change the color of the icon when the tag sensor is in the respective location. In the case below (Area ID bathroom)

type: picture-elements
image: /local/FloorPlan/floorplan.png
elements:
  - type: state-icon
    entity: sensor.chipolo_area
    tap_action:
      action: more-info
    style:
      top: 79%
      left: 80%
    card_mod:
      style: |
        :host {
          --card-mod-icon-color:
          {% if area_id=='bathroom' %}
             red
          {% endif %}
            green
        }

Thanks in advance for your help!

2

Untested: try “area_id(config.entity)”.

Btw, what is a use-case?
You placed a particular entity on a card - and you are supposed to know it’s area. Means - no need of card-mod.
Also , the template has an error: if a condition is true, then “color: red green”. Seems you missed “else”.

3

@ildar_gabdullin

Basically I need to show the icon only when the object is in that room. Otherwise, no.

I’m trying to use Bermuda BLE and plan integration to help an elderly person find in which room they left their cell phone and various items that have tags attached. It is easier for him to look at a tablet with a large display (which only displays the plan) mounted on the wall and see on the plan in which room the respective objects are located.

I mention that I do not know how to modify the code. I just tried to modify a code presented on the forum.

4

Can’t you use the style filter to set colour based on state ? It’s in the docs for picture element card

5

Correct me if I am wrong.

  1. There are objects which are tracked in which room they are located. Means - these objects have either a state or an attribute with a value pointing to a room.
  2. On PE card you need to show a state-badge with “top/left” dependently on a room.

Means:

  1. This is not about changing an icon color.
  2. You need to set “top/left” dynamically by card-mod for every tracked object dependently on it’s stage/attribute (which is NOT some “area” - because an “area” is something static set by a user).

Totally appreciate the initial goal.