New request for help. Person status with picture, battery charging icon, etc.

[Trzinka]

Current SVG:

Current view:

Setting for people state-text:

- entity:
    - person.robert
    - person.mojca
    - person.nata
    - person.di
  state_action:
    - service: floorplan.text_set
      service_data: '${(entity.state === "home") ? "doma" : "odsoten"}'
    - service: floorplan.class_set
      service_data:
        class: static-temp
  tap_action: null

This works! But I'm not entirely sure that everything is written as it should be!

Setting for people class_sett:

- entity: person.di
  element: person.di_img
  tap_action: false
  hover_action: false
  state_action:
    - service: floorplan.clas_set
      service_data:
        class: static-temp

Something is wrong here and I can't figure out what! I want to set a class to an element with an id person.di_img according to the HAOS entity: person.di

I've tried so many different combinations of floor plan settings that I'm getting confused.

[OzGav]

Firstly spelling mistake in your second yaml….class

The most important thing to take away is the state_action section executes each time the state of the entity changes. Therefore, the services in that section should do something different depending on what the state of the entity is. At the moment both of your examples don’t have any variation in the class_set section. In this case you should remove that section and just set the element to look however you want it to in the SVG

[Trzinka]

Hi thanks for the replay.

Somehow I managed to figure out what you also figured out my spelling mistake! ;=(((

Image code

- element: person.robert_img
  entity: person.robert
  state_action:
    action: call-service
    service: floorplan.class_set
    service_data: >-
      ${(entity.state === "home") ? "person-home" :
      "person-not_home"}
  tap_action: null
  hover_action: null
- element: person.mojca_img
  entity: person.mojca
  state_action:
    action: call-service
    service: floorplan.class_set
    service_data: >-
      ${(entity.state === "home") ? "person-home" :
      "person-not_home"}
  tap_action: null
  hover_action: null
- element: person.nata_img
  entity: person.nata
  state_action:
    action: call-service
    service: floorplan.class_set
    service_data: >-
      ${(entity.state === "home") ? "person-home" :
      "person-not_home"}
  tap_action: null
  hover_action: null
- element: person.di_img
  entity: person.di
  state_action:
    action: call-service
    service: floorplan.class_set
    service_data: >-
      ${(entity.state === "home") ? "person-home" :
      "person-not_home"}
  tap_action: null
  hover_action: null

Code to display text.

- entity:
    - person.robert
    - person.mojca
    - person.nata
    - person.di
  state_action:
    - service: floorplan.text_set
      service_data: '${(entity.state === "home") ? "doma" : "odsoten"}'
    - service: floorplan.class_set
      service_data:
        class: static-temp
  tap_action: null

By the way, do you know how to set the text to be centered (I couldn't find this option in Inkscape) because it is currently positioned to the left. (doma=home, absent=not home). At home, he is not in the middle under the picture as he is away?

Before I had a card that monitored the person state. I solved this in the new floor plan card.

- type: custom:mushroom-person-card
  card_mod:
    style: |
      mushroom-shape-icon {
        animation: blink 1s linear infinite;
      }          
      @keyframes blink {
        50% {opacity: 0;}
      }
      ha-card {
        background: none;
        }
  entity: person.robert
  icon_type: entity-picture
  hide_name: true
  layout: vertical
  secondary_info: state

and I had a card that monitored the cell phone battery. __

- type: conditional
  conditions:
    - entity: sensor.robert_mobitel_battery_state
      state: charging
  card:
    type: custom:mushroom-template-card
    entity: sensor.robert_mobitel_battery_level
    layout: vertical
    icon_color: yellow
    fill_container: true
    name: Robert
    icon: mdi:battery-charging-medium
    hide_name: true
    primary: >-
      Baterija: {{
      states('sensor.robert_mobitel_battery_level') }}%
- type: conditional
  conditions:
    - entity: sensor.robert_mobitel_battery_state
      state: discharging
  card:
    type: custom:mushroom-template-card
    entity: sensor.robert_mobitel_battery_level
    layout: vertical
    icon: |2
        {% set bl = states('sensor.robert_mobitel_battery_level') | int %}
        {% if bl < 10 %} mdi:battery-outline
        {% elif bl < 20 %} mdi:battery-10
        {% elif bl < 30 %} mdi:battery-20
        {% elif bl < 40 %} mdi:battery-30
        {% elif bl < 50 %} mdi:battery-40
        {% elif bl < 60 %} mdi:battery-50
        {% elif bl < 70 %} mdi:battery-60
        {% elif bl < 80 %} mdi:battery-70
        {% elif bl < 90 %} mdi:battery-80
        {% elif bl < 100 %} mdi:battery-90
        {% elif bl == 100 %} mdi:battery
        {% else %} mdi:battery-unknown
        {% endif %}
    icon_color: |2-
                {% set bl = states('sensor.robert_mobitel_battery_level') | int %}
                {% if bl < 10 %} #cc0c16
                {% elif bl < 20 %} #e61e28
                {% elif bl < 30 %} #e3464e
                {% elif bl < 40 %} orange
                {% elif bl < 50 %} #f0b93a
                {% elif bl < 60 %} #f3f56c
                {% elif bl < 70 %} #f2f536
                {% elif bl < 80 %} #69f095
                {% elif bl < 90 %} #2ee669
                {% elif bl < 100 %} #05ad3b
                {% elif bl == 100 %} #03872d
                {% else %} grey
                {% endif %}
    primary: >-
      Baterija: {{
      states('sensor.robert_mobitel_battery_level') }}%
    tap_action:
      action: more-info
    fill_container: true

Do you have any idea how to solve this with an SVG element that is named the same as the HA entity?

[Trzinka]

Current view:

[OzGav]

Starting with centering text. I have had problems getting this to stick but this is how it should work

[OzGav]

Yes but you can slim it down:

- element: person.robert_img
  entity: person.robert
- element: person.nata_img
  entity: person.nata
- element: person.mojca_img
  entity: person.mojca
- element: person.di_img
  entity: person.di
  state_action:
    service_data: >-
      ${(entity.state === "home") ? "person-home" :
      "person-not_home"}
  tap_action: null
  hover_action: null

[OzGav]

Oh and in your first yaml it is entities not entity

[Trzinka]

Wow. I did it and it works. Is this thanks to the upgrade because I feel like I should have written this to begin with.

[OzGav]

No that is how it always has worked. I am sure I mentioned this in a previous conversation but I couldn't find it.

[Trzinka]

I'm sure you mentioned. I watched an old video that showed how to make a floor plan and I was probably misled by that and I usually don't change what works.

I'm sorry.

[Trzinka]

Hi OzGav!

First of all, thanks for all the help you give me!

As I expected, I need your help, so I am asking if you have time/will for some more advice.

Written in green are the elements that I would like to add to FP. The weather won't be a problem for me, because I already did as you suggested and realized that I don't need so much information in the FP, so I'll just add a few.
The other elements (images) are supposed to open cards that I have already made in HA. If you have time, I would ask you to write to me how it is done?

An example of the card I would like to see when I click on the now named spending.

1. I found pictures of batteries that fit me. According to the code you suggested. Now I have a problem with naming the pictures especially because I would like a different display of the pictures when the phone is charging. How should the new code be according to your suggestion?

- service: floorplan.image_set
  service_data: |
    >
      return '/local/floorplan/images/battery-' + Math.floor(parseFloat(entity.state)/10)*10 + '.png';

2. Since the battery images will be the same for all people (now I have a square where the battery status image will be) the element (later the image when I will name them correctly) in the SVG file is named sensor.di_mobitel_battery_level the same as the ID name in HA. I think it will be best to name it in SVG di_mobitel_battery, robert_mobitel_battery, etc.

What would the code be, given that it is also necessary to monitor whether the mobile phone is charging?

4. Should I rename the image names and how?
   

Thanks again for your effort and help.

[OzGav]

Adjust the path to suit your installation

                - service: floorplan.image_set  
                  service_data:  |
                    >
                      if(hass.states["sensor.robert_mobitel_battery_state"].state === "charging")
                        return "something in here that you want";
                      else
                        return '/local/floorplan/images/stat_sys_battery_' + entity.state + '.png';

[OzGav]

As for opening other views, this is from my floorplan

            - name: Jump to Lounge Remote Page
              element: lounge_remote_touchpoint
              tap_action:
                action: navigate
                navigation_path: /lovelace/lounge_remote

[Trzinka]

Hi thanks for the reply!

It took me a little longer because I had to find the images and adapt them to my needs. This is what it looks like now:

With a little tweaking it all works.

Thanks a lot!