Display multiple entity states #466

Trzinka · 2024-10-04T08:27:01Z

Trzinka
Oct 4, 2024

Hi.

I made an entity for the window switch:

  - platform: template
    sensors:
      so_sp_st:
        friendly_name: "Stanje-Senzor oken-Sp"
        value_template: >-
          {% if is_state('binary_sensor.so_sp', 'on') and is_state('binary_sensor.so_sp_1', 'on') %}
            fully_open
          {% elif is_state('binary_sensor.so_sp', 'on') and is_state('binary_sensor.so_sp_1', 'off') %}
            partially_open
          {% else %}
            fully_closed
          {% endif %}

which shows me the current state of the window (open/closed):

Current settings FP.yaml

########################################################
#   Windows state display
########################################################
            - entity: binary_sensor.so_di
              element: window.so_di
              state_action:
                service: floorplan.class_set
                service_data:
                  class: '${(entity.state === "on") ? "window-open" : "window-closed"}'
            - entity: binary_sensor.so_je
              element: window.so_je
              state_action:
                service: floorplan.class_set
                service_data:
                  class: '${(entity.state === "on") ? "window-open" : "window-closed"}'
            - entity: binary_sensor.so_ko
              element: window.so_ko
              state_action:
                service: floorplan.class_set
                service_data:
                  class: '${(entity.state === "on") ? "window-open" : "window-closed"}'
            - entity: binary_sensor.so_ku
              element: window.so_ku
              state_action:
                service: floorplan.class_set
                service_data:
                  class: '${(entity.state === "on") ? "window-open" : "window-closed"}'
            - entity: binary_sensor.so_mi
              element: window.so_mi
              state_action:
                service: floorplan.class_set
                service_data:
                  class: '${(entity.state === "on") ? "window-open" : "window-closed"}'
            - entity: binary_sensor.so_na
              element: window.so_na
              state_action:
                service: floorplan.class_set
                service_data:
                  class: '${(entity.state === "on") ? "window-open" : "window-closed"}'
            - entity: binary_sensor.so_sp
              element: window.so_sp
              state_action:
                service: floorplan.class_set
                service_data:
                  class: '${(entity.state === "on") ? "window-open" : "window-closed"}'
              tap_action: false

and FP.css

#window image {
    display: none;
    mix-blend-mode: lighten;
    animation: 0.75s fade-in linear forwards;
}

@keyframes fade-in {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

#window image.window-open {
    display: block !important;
    opacity: 1;
    z-index: 11 !important;
}

#windows .window-open {
    stroke: #fffffd !important;
    stroke-width: 5px !important;
    opacity: 1 !important;
    z-index: 12;
    filter: blur(2px);
    -o-filter: blur(2px);
    -ms-filter: blur(2px);
    -moz-filter: blur(2px);
    -webkit-filter: blur(2px);
}

Now I would like it to show only the stroke (new elements in SVG file named "partiallyOpen-Sp, partiallyOpen-Na, partiallyOpen-Di ..." and no image for the open window) when the window state is partially open.

Any idea how to do/fix this in FP.yaml?

Thanks.

Answered by OzGav

Oct 16, 2024

Yes no where are you checking for the state of partially_open in fact I don't see reference to binary_sensor.so_sp in your fp.yaml

Given you said this

The idea is to show an image (element: window.so_sp)
and an outer line (element: binary_sensor.so_sp) when the window is open
and a different outer line (element: sensor.so_sp_st) when the window is partially open.
When the window is closed it does not show anything.

I would expect something like:

- entity: sensor.so_sp_st
  element: window.so_sp
  state_action:
    service: floorplan.class_set
    service_data:
      class: '${(entity.state === "fully_closed") ? "closed" : "open"}'

- entity: sensor.so_sp_st
  element: binary_sensor.so_s…

View full answer

Trzinka · 2024-10-15T11:00:21Z

Trzinka
Oct 15, 2024
Author

Hi.

I managed to solve a little bit, but not completely.

A little more detail:
I have 2 sensors on the windows

Example of a closed window

Example of a partially open window

An example of an open window

Above the bottom sensor is the temperature sensor

Example:
The upper sensor named binary_sensor.so_di and the lower binary_sensor.so_di_1 show the `on/off' state!

I made a new sensor

#==========================
# Window sensor-Diane
#==========================
 - platform: template
 sensors:
 so_di_st:
 friendly_name: "Status-Window Sensor-Di"
 value_template: >-
 {% if is_state('binary_sensor.so_di', 'on') and is_state('binary_sensor.so_di_1', 'on') %}
 open
 {% elif is_state('binary_sensor.so_di', 'on') and is_state('binary_sensor.so_di_1', 'off') %}
 partially
 {% else %}
 closed
 {% endif %}

which shows: open, partially and closed state.

In the SVG file I made I created:

In fp.yaml I created:

########################################################
#   Window state display
########################################################
#******************************
# Windows PICTURE state display
#******************************
            - entity: binary_sensor.so_di
              element: window.so_di
              state_action:
                service: floorplan.class_set
                service_data:
                  class: '${(entity.state === "on") ? "open" : "closed"}'
            - entity: binary_sensor.so_je
              element: window.so_je
              state_action:
                service: floorplan.class_set
                service_data:
                  class: '${(entity.state === "on") ? "open" : "closed"}'
            - entity: binary_sensor.so_ko
              element: window.so_ko
              state_action:
                service: floorplan.class_set
                service_data:
                  class: '${(entity.state === "on") ? "open" : "closed"}'
            - entity: sensor.so_ku_st
              element: window.so_ku
              state_action:
                service: floorplan.class_set
                service_data:
                  class: '${(entity.state)}'
            - entity: binary_sensor.so_mi
              element: window.so_mi
              state_action:
                service: floorplan.class_set
                service_data:
                  class: '${(entity.state === "on") ? "open" : "closed"}'
            - entity: sensor.so_na_st
              element: window.so_na
              state_action:
                service: floorplan.class_set
                service_data:
                  class: '${(entity.state)}'
            - entity: sensor.so_sp_st
              element: window.so_sp
              state_action:
                service: floorplan.class_set
                service_data:
                  class: '${(entity.state)}'
              tap_action: false
#****************************
# Window STROKE state display
#****************************
            - entities:
                - binary_sensor.so_je
                - binary_sensor.so_ko
                - binary_sensor.so_mi
              state_action:
                service: floorplan.class_set
                service_data:
                  class: '${(entity.state === "on") ? "open" : "closed"}'
              tap_action: false
#*********************************************
# Window STROKE state display / partially
#*********************************************
            - entities:
                - sensor.so_sp_st
                - sensor.so_na_st
                - sensor.so_di_st
                - sensor.so_ku_st
              state_action:
                service: floorplan.class_set
                service_data:
                  class: '${(entity.state)}'
              tap_action: false

and in CSS file:

/*######################################################
#   Window state display
########################################################
#******************************
# Windows PICTURE state display
#*****************************/
#window image {
    display: none;
    mix-blend-mode: lighten;
    animation: 0.75s fade-in linear forwards;
}

@keyframes fade-in {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

#window image.open {
    display: block !important;
    opacity: 1;
    z-index: 11 !important;
}
/****************************
# Window STROKE state display
#***************************/
#windows .open {
    stroke: #fffffd !important;
    stroke-width: 10px !important;
    opacity: 1 !important;
    z-index: 12;
    filter: blur(2px);
    -o-filter: blur(2px);
    -ms-filter: blur(2px);
    -moz-filter: blur(2px);
    -webkit-filter: blur(2px);
}
/*********************************************
# Window STROKE state display / partially
#********************************************/
#windows .partially {
    stroke: #fffffd !important;
    stroke-width: 10px !important;
    opacity: 1 !important;
    z-index: 12;
    filter: blur(2px);
    -o-filter: blur(2px);
    -ms-filter: blur(2px);
    -moz-filter: blur(2px);
    -webkit-filter: blur(2px);
}

Current view:

#1 The window is closed and shows OK
#2 The window is partially open and shows OK
#3 The window is open and the displayed image layer of the open window does not show the correct stroke around the open window as shown in figure 4
#4 It only has the top sensor and doesn't show the image layer for the open window! It only shows the correct stroke

Example in DevTools

Any idea what I should do??

3 replies

OzGav Oct 15, 2024

Its hard when you include so much but if I isolate one entity:

            - entity: sensor.so_sp_st
              element: window.so_sp
              state_action:
                service: floorplan.class_set
                service_data:
                  class: '${(entity.state)}'
              tap_action: false

#*********************************************
# Window STROKE state display / partially
#*********************************************
            - entities:
                - sensor.so_sp_st
              state_action:
                service: floorplan.class_set
                service_data:
                  class: '${(entity.state)}'
              tap_action: false

This says to me that you have TWO elements in your floorplan. One has the id window.so_sp and the other sensor.so_sp_st and both are reacting to state changes in sensor.so_sp_st. I assume sensor.so_sp_st is one of your template sensors? I also notice that in your CSS .partially and .open are identical so you don't need both of those?

So I am not sure what more to say at the moment. To be able to help you more please just explain what you have with say window 4. I understand there is an open and closed image you want to show and an outline to add also. Please explain what ID you have given to the image and what ID you have given to the outline.

It is hard to see what the

Trzinka Oct 15, 2024
Author

OzGav thanks for the reply.

In my opinion, the main problem is that I have a home assistant entity
example:

binary_sensor.so_sp (physically only one sensor "On all the windows in the house")
and the sensor from the template:
sensor.so_sp_st (physically the upper sensor and another one placed below on the window "On some windows in the house")

For show image (wen open) is example:

- entity: sensor.so_sp_st                      # template sensor from both physical
  element: window.so_sp

For show outline (stroke) (wen open) " I only have those sensors that are only one sensor per window" is example:

- entity: binary_sensor.so_je                # physical sensor
  element: binary_sensor.so_je

and for show outline (stroke) (wen partially_open) "I have two sensors on the window and I use the sensor from the template sensor" is example:

- entity: sensor.so_sp_st                       # template sensor from both physical
  element: sensor.so_sp_st

Trzinka Oct 15, 2024
Author

As I was writing the answer I remembered that it might work

- entity: binary_sensor.so_sp
  element: sensor.so_sp_st
  state_action:
    service: floorplan.class_set
    service_data:
      class: '${(entity.state === "on") ? "open" : "closed"}'

but it doesn't work

Trzinka · 2024-10-16T09:50:46Z

Trzinka
Oct 16, 2024
Author

The idea is to show an image (element: window.so_sp)
and an outer line (element: binary_sensor.so_sp) when the window is open
and a different outer line (element: sensor.so_sp_st) when the window is partially open.
When the window is closed it does not show anything.

4 replies

Trzinka Oct 16, 2024
Author

In my opinion, the problem is that when the window is partially open (entity: sensor.so_sp_st = state/class: partially), the sensor (entity: binary_sensor.so_sp), when it is part of the sensor template, sensor.so_sp_st does not show in the floor plan nothing because it would show that it is open!?

OzGav Oct 16, 2024

Yes no where are you checking for the state of partially_open in fact I don't see reference to binary_sensor.so_sp in your fp.yaml

Given you said this

The idea is to show an image (element: window.so_sp)
and an outer line (element: binary_sensor.so_sp) when the window is open
and a different outer line (element: sensor.so_sp_st) when the window is partially open.
When the window is closed it does not show anything.

I would expect something like:

- entity: sensor.so_sp_st
  element: window.so_sp
  state_action:
    service: floorplan.class_set
    service_data:
      class: '${(entity.state === "fully_closed") ? "closed" : "open"}'

- entity: sensor.so_sp_st
  element: binary_sensor.so_sp
  state_action:
    service: floorplan.class_set
    service_data:
      class: '${(entity.state === "fully_open") ? "open" : "closed"}'

- entity: sensor.so_sp_st
  element: sensor.so_sp_st # See note below
  state_action:
    service: floorplan.class_set
    service_data:
      class: '${(entity.state === "partially_open") ? "open" : "closed"}'

Note: You should not need this element line if it is the same as the entity but I would actually recommend changing this to make things a little clearer but its compleyely up to you.

So what is happening here is the code is monitoring for every state change of your template sensor.

The first section looks for the state of fully closed. If it is then hide your image, if not the show the open window image
The next section looks for fully open and will set the required class if that is the case otherwise I assume this would be hidden
The last section works the same as the last one but looking for that partially open state

I have just shown two classes (open and closed) which could be show and hide but with you wanting to set the stroke on and off you just need to change the classes as ncessary.

Answer selected by Trzinka

Trzinka Oct 16, 2024
Author

Hi OzGav thanks again for your reply and help.

The sensor I made in the template has the following states (exampe: sensor.so.sp.st) "The picture combines several states" :

I named entity abbreviated because of writing in yaml and elsewhere.
Example:
sensor.so.sp.st
sensor = SENZOR/SENSOR.so = SENZOR OKEN/WINDOW SENSOR is an abbreviated name in the Slovenian language.sp is an abbreviated name of the space SPALNICA/BEDROOM in the Slovenian language.st is an abbreviated name of STANJE/STATE in the Slovenian language

The binary_sensor.so_je, (je=JEDILNICA/DINING ROOM) which is NOT part of the template, has states on/off and and through fp.yaml

state_action:
 service: floorplan.class_set
 service_data:
 class: '${(entity.state === "on") ? "open" : "closed"}'

for image layer as you suggested "corrected":

# Template senzor
-------------------------------
- entity: sensor.so_sp_st
  element: window.so_sp
  state_action:
    service: floorplan.class_set
    service_data:
      class: '${(entity.state === "open") ? "open" : "closed"}'
  tap_action: false

# No template senzor
----------------------------
- entity: binary_sensor.so_je
  element: window.so_je
  state_action:
    service: floorplan.class_set
    service_data:
      class: '${(entity.state === "on") ? "open" : "closed"}'

Image layer now works correctly for both types of sensors.

I'm going to keep trying the suggested changes!
Thanks OzGav.

p.s. I'll let you know after I finish installing the newly suggested things.

Trzinka Oct 16, 2024
Author

It also works for a partially open window (sensor from the template).

- entity: sensor.so_sp_st
  element: sensor.so_sp_st
  state_action:
    service: floorplan.class_set
    service_data:
      class: '${(entity.state === "partially") ? "partially" : "closed"}'
  tap_action: false

Trzinka · 2024-10-16T13:41:58Z

Trzinka
Oct 16, 2024
Author

And finally, it also works for an open window (sensor from the template).

- entity: sensor.so_sp_st
  element: binary_sensor.so_sp
  state_action:
    service: floorplan.class_set
    service_data:
      class: '${(entity.state === "open") ? "open" : "closed"}'

0 replies

Trzinka · 2024-10-16T13:50:50Z

Trzinka
Oct 16, 2024
Author

Final result:

0 replies

Trzinka · 2024-10-16T13:53:44Z

Trzinka
Oct 16, 2024
Author

Once upon a time, a smart man wrote ;=))))

OzGav you are a magic man!!!!

Thank you.

0 replies

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Display multiple entity states #466

{{title}}

Replies: 5 comments 7 replies

{{title}}

{{editor}}'s edit

{{editor}}'s edit

{{title}}

{{editor}}'s edit

{{editor}}'s edit

{{title}}

{{editor}}'s edit

{{editor}}'s edit

{{title}}

{{title}}

{{title}}

{{title}}

{{editor}}'s edit

{{editor}}'s edit

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

Select a reply

Display multiple entity states #466

Trzinka Oct 4, 2024

Replies: 5 comments · 7 replies

Trzinka Oct 15, 2024 Author

OzGav Oct 15, 2024

Trzinka Oct 15, 2024 Author

Trzinka Oct 15, 2024 Author

Trzinka Oct 16, 2024 Author

Trzinka Oct 16, 2024 Author

OzGav Oct 16, 2024

Trzinka Oct 16, 2024 Author

Trzinka Oct 16, 2024 Author

Trzinka Oct 16, 2024 Author

Trzinka Oct 16, 2024 Author

Trzinka Oct 16, 2024 Author

Trzinka
Oct 4, 2024

Replies: 5 comments 7 replies

Trzinka
Oct 15, 2024
Author

Trzinka Oct 15, 2024
Author

Trzinka Oct 15, 2024
Author

Trzinka
Oct 16, 2024
Author

Trzinka Oct 16, 2024
Author

Trzinka Oct 16, 2024
Author

Trzinka Oct 16, 2024
Author

Trzinka
Oct 16, 2024
Author

Trzinka
Oct 16, 2024
Author

Trzinka
Oct 16, 2024
Author