CSS script not working for covers

Hi all,

My covers repeat open when they are actually closed. That’s because the fact that they only close to 29%. In my HA-floorplanner, I’m trying to make my blinds visible when they are closed, and invisible when they are open (obviously). For some reason, my if then else statement is not working:

- name: Cover Controls
                    entities:
                      - element: cover.front
                        entity: group.living_covers
                    tap_action:
                      action: more-info
                    state_action:
                      - action: call-service
                        service: floorplan.class_set
                        class: >
                          {% if state_attr('cover.192_168_1_xx',
                          'current_position') <= 30 and 
                                state_attr('cover.192_168_1_xx', 'current_position') <= 30 %}
                            cover.closed
                          {% else %}
                            cover.open
                          {% endif %}

And this is the css part:

.cover-open {
  visibility: hidden !important;
}

.cover-closed {
  visibility: visible;
  opacity: 0.9;
}

Does anyone have an idea what I’m doing wrong ?

Kr,

Bart

You may need to convert your cover position to an integer.

| int(0)

That was my initial thought too, but the developer tools say the attribute is a float. So that should work. I know too little about floorplan to say anything else.

If I google though, I see ${ templates, not {{ so are you sure you can use jinja2 templates here? if it is a frontend thing, it may require something else. It seems to require javascript, which makes sense in the fronend.

1 Like

I was just looking at that too🧐 It is JavaScript based on what I see.

@weemaba999 Examples are also showing a different format with service_data as well…

- entities:
    - binary_sensor.kitchen
    - binary_sensor.laundry
  state_action:
    action: call-service
    service: floorplan.class_set
    service_data:
      class:  '${....}'

Thanks Guys,

Unfortunately, that didn’t do the trick:

state_action:
                      - action: call-service
                        service: floorplan.class_set
                        service_data:
                          class: >-
                            {% if state_attr('cover.192_168_1_19',
                            'current_position') <= 30 and 
                                  state_attr('cover.192_168_1_62', 'current_position') <= 30 %}
                              cover.closed
                            {% else %}
                              cover.open
                            {% endif %}

As Edwin pointed out and I agree, I don’t think you can use Jinja2.

Strange,

I think you can use jinja2 here, but still can’t get it to work

Test some simpler code to be sure jinja works

Did you convert the position to an integer?

I installed the floorplan plugin and worked through the examples. Jinga2 doesn’t work with templating, you have to use JavaScript.

This would be an example of the correct method for reference the corresponding action.

state_action:
    action: call-service
    service: floorplan.class_set
    service_data:
      class: '${(entity.state === "on") ? "motion-on" : "motion-off"}'

That did the trick,

Thanks a lot !

Another question I have: for some reason, when I use grouping of lights using group.kitchen_lights for example, the light entity is not showing the svg element with correct light. Anyone have an idea to do so ?

Kr,

Bart

I am not using a floorplan.
But if I unite several light entities into a group - then I see a properly colored state-badge for this light group entity.

I think my issues is related due to the fact that the group entity has not attributes that contain the RGB color:

- name: Lights
                      entities:
                        - element: light.glowHaard
                          entity: light.hue_lightstrip_plus_1
                        - element: light.glowBar
                          entity: light.hue_lightstrip_bar
                        - element: light.glowKast
                          entity: light.hue_lightstrip_kast
                        - element: light.glowGang
                          entity: group.hal_lights
                        - element: light.glowBart
                          entity: light.hue_go_master
                        - element: light.glowJessie
                          entity: light.hue_go_master_2
                        - element: light.glowBerging
                          entity: light.hue_white_lamp_1_berging
                        - element: light.glowKitchen
                          entity: group.keuken_lights
                      tap_action: light.toggle
                      state_action:
                        service: floorplan.style_set
                        service_data: |
                          >
                            var elements = {
                            'light.hue_lightstrip_kast': 'light.glowKast',
                            'light.hue_go_master': 'light.glowBart',
                            'light.hue_go_master_2': 'light.glowJessie',
                            'light.hue_lightstrip_plus_1': 'light.glowHaard',
                            'light.hue_lightstrip_bar': 'light.glowBar',
                            'group.hal_lights': 'light.glowGang',
                            'light.hue_white_lamp_1_berging': 'light.glowBerging',
                            'group.keuken_lights': 'light.glowKitchen'
                          };
                            var entityId = entity.entity_id;
                            var element = elements[entityId];
                            
                            var color = 'rgb(0, 0, 0)';
                            var fillOpacity = 0;  // Correcte variabelenaam

                            if (entity.attributes.rgb_color) {
                              var rgb = entity.attributes.rgb_color;
                              color = `rgb(${rgb[0]}, ${rgb[1]}, ${rgb[2]})`;
                              fillOpacity = 1;
                            }

                            var style = `fill: ${color}; fill-opacity: ${fillOpacity};`;

                            return {
                              elements: [element],
                              style: style,
                            };

Are the bulbs in the group all the same bulb type from the same manufacturer?

When grouping it matters as Ildar mentioned.

For example adding a white only bulb to a group of color changing bulbs will cause issues with what you are trying to implement

'light.hue_white_lamp_1_berging': 'light.glowBerging'

In the hall, there might be a difference. But for the group keuken_lights, they are the same:

I’ll test a group out on my system with HaFloorPlan. I also run mostly all Hue bulbs.

Much appreciated, thanks a lot !

1 Like