How can pass a state into css class #40

vajonam · 2021-01-30T22:07:12Z

vajonam
Jan 30, 2021

I have question about how I can pass state information into a CSS class?

for example.

sensor.foo_moisture

and in css

.plant {
  fill: red
  height: $sensor.foo_moisture
}

can I do something like that? an example would help! thanks. I kind of have some ideas but wanted to see if there were any ready go examples?

Answered by vajonam

Feb 17, 2021

Thanks this is great. One last thinks, the 46 is pixel height, is it possible to make that a % of the parent container so I don’t need to know the height of the rect. I haven’t found a way. But this exactly what I am after. Thanks.

View full answer

exetico · 2021-01-30T22:15:18Z

exetico
Jan 30, 2021
Maintainer

You're trying to pass an variable as a style option, right? (and not parsing anyting into a class).

I guess the light-example are a great showcase for what you're asking for :-)

https://experiencelovelace.github.io/ha-floorplan/docs/example-light/

You just need to trim it down, for your needs.

If you're trying to do it the other way around, ha-floorplan needs some new logics, to expose attributes as global css variables - but with the JS option, I can't find any good reason to go 'double'. Or well, maybe if the function is cooked down, to only expose a given state, as a css-variable.

I can make a simple example tomorrow, if I remember it 😁

5 replies

vajonam Jan 30, 2021
Author

@exetico

Thanks yeah that is what I was looking at.

So what I am trying to do is fill up a "tank" based on the % of the state. so if the water % of a sensor is 50% then it will show a bar that half full, with html / divs and css there is a concept of relative where divs have parents. not sure how I can do something similar ! I dont want to have to calculate absolute heights. any ideas on this?

exetico Jan 31, 2021
Maintainer

Do you have a SVG-file for it? Please make it as simple as possible, so we can use it as an example, if needed :-)

pkozul Feb 16, 2021
Collaborator

@vajonam

Getting back to your question... we don't have the ability to use HA entities as variables within CSS rules themselves, but the closest thing we can do in floorplan is dynamically generate CSS styles based on HA entities.

The addition of functions makes this more powerful. Have you seen this new feature?

#48

The Ring example shows how functions can be used:

https://experiencelovelace.github.io/ha-floorplan/docs/example-ring/

vajonam Feb 16, 2021
Author

Thanks @pkozul will have look at functions. but regadless it somes like I have to something like have classes like

.moisture-25
.moisture-50
.moisture-70

and using a function to see what band it falls in then return the class.

I am looking to do something like this. https://stackoverflow.com/questions/42013794/svg-water-fill-animation

pkozul Feb 17, 2021
Collaborator

@vajonam

Below is how you can apply a transform (using a clip path) to your SVG element, based on the current state of your HA entity.

In the SVG file, I created an element for the HA entity, that is, a simple rectangle to represent the moisture level (using gradient colours). This rectangle will be the one that gets clipped, based on the value of the HA entity.

I also created another rectangle underneath, just to provide a black border for the rectangle I mentioned above. This rectangle will never get clipped, as we always want to see the black border.

  <rect
     y="152.64606" x="199.4892"
     height="45.840492" width="11.361679"
     id="sensor.moisture_level_border"
     style="display:inline;fill:none;fill-opacity:1;stroke:#000000;stroke-width:0.47347587;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" />
  <rect
     style="display:inline;fill:url(#linearGradient1183);fill-opacity:1;stroke:#000000;stroke-width:0.473;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
     id="sensor.moisture_level"
     width="11.361679" height="45.840492"
     x="199.4892" y="152.64606"
     clip-path="url(#moisture-level-clip-path)" />

In the <defs> section of the SVG, I then created a clip path that gets used by the rectangle mentioned above. As you can see, the clip path contains the exact same rectangle (size, position, etc.) as the the above reactangle. In other words, it's a perfectly matching clip path.

    <clipPath id="moisture-level-clip-path">
      <rect  width="11.361679"  height="45.840492" x="199.4892" y="152.64606" />
    </clipPath>

Finally, the floorplan config. As you can see, the transformation is applied such that the clip path is moved down, based on the current value of the HA entity (moisture level). The value of 46 represents how many pixels high the SVG element is (used some trial and error to get this value right).

      - entity: sensor.moisture_level
        state_action:
          action: call-service
          service: floorplan.style_set
          service_data:
            element: moisture-level-clip-path
            style: |
              transform: translate(0, ${46 - Math.floor(entity.attributes.level / (100 / 46))}px);

BTW, this has now been added to the Home example:

https://experiencelovelace.github.io/ha-floorplan/docs/example-home/

vajonam · 2021-02-17T03:26:52Z

vajonam
Feb 17, 2021
Author

Thanks this is great. One last thinks, the 46 is pixel height, is it possible to make that a % of the parent container so I don’t need to know the height of the rect. I haven’t found a way. But this exactly what I am after. Thanks.

…

On Tue, Feb 16, 2021 at 8:31 PM Petar Kožul ***@***.***> wrote: @vajonam <https://github.com/vajonam> Below is how you can apply a transform (using a clip path) to your SVG element, based on the current state of your HA entity. In the SVG file, I created an element for the HA entity, that is, a simple rectangle to represent the moisture level (using gradient colours). This rectangle will be the one that gets clipped, based on the value of the HA entity. I also created another rectangle underneath, just to provide a black border for the rectangle I mentioned above. This rectangle will never get clipped, as we always want to see the black border. [image: image] <https://user-images.githubusercontent.com/2073827/108143041-08c33a80-711b-11eb-9085-b4cd7061423b.png> <rect y="152.64606" x="199.4892" height="45.840492" width="11.361679" id="sensor.moisture_level_border" style="display:inline;fill:none;fill-opacity:1;stroke:#000000;stroke-width:0.47347587;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" /> <rect style="display:inline;fill:url(#linearGradient1183);fill-opacity:1;stroke:#000000;stroke-width:0.473;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" id="sensor.moisture_level" width="11.361679" height="45.840492" x="199.4892" y="152.64606" clip-path="url(#moisture-level-clip-path)" /> In the <defs> section of the SVG, I then created a clip path that gets used by the rectangle mentioned above. As you can see, the clip path contains the exact same rectangle (size, position, etc.) as the the above reactangle. In other words, it's a perfectly matching clip path. <clipPath id="moisture-level-clip-path"> <rect width="11.361679" height="45.840492" x="199.4892" y="152.64606" /> </clipPath> Finally, the floorplan config. As you can see, the transformation is applied such that the clip path is moved down, based on the current value of the HA entity (moisture level). The value of 46 represents how many pixels high the SVG element is (used some trial and error to get this value right). - entity: sensor.moisture_level state_action: action: call-service service: floorplan.style_set service_data: element: moisture-level-clip-path style: | transform: translate(0, ${46 - Math.floor(entity.attributes.level / (100 / 46))}px); BTW, this has now been added to the Home example: https://experiencelovelace.github.io/ha-floorplan/docs/example-home/ — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#40 (reply in thread)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AABFHNJ57AZUJWRBEHPKYJLS7ML75ANCNFSM4W2WQKSA> .

1 reply

pkozul Feb 17, 2021
Collaborator

@vajonam

Yep, that's doable. Luckily, floorplan provides element as one of the objects available to the code in your rule. Can you try this?

      - entity: sensor.moisture_level
        state_action:
          action: call-service
          service: floorplan.style_set
          service_data:
            element: moisture-level-clip-path
            style: |
              >
              var height = Math.ceil(element.getBBox().height);
              return `transform: translate(0, ${height - Math.floor(entity.attributes.level / (100 / height))}px)`;

vajonam · 2021-02-17T17:14:51Z

vajonam
Feb 17, 2021
Author

works nicely.

3 replies

exetico Feb 17, 2021
Maintainer

If you don't mind, consider to share your SVG. I'm not sure if its possible to share here - but you can try.

vajonam Feb 17, 2021
Author

Example files

SVG, YAML, CSS

exetico Feb 17, 2021
Maintainer

@pkozul - Maybe you should add this to the example(s), and include my personal floorplan, too :-)

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

How can pass a state into css class #40

{{title}}

{{editor}}'s edit

{{editor}}'s edit

Replies: 3 comments 9 replies

{{title}}

{{editor}}'s edit

{{editor}}'s edit

{{title}}

{{title}}

{{editor}}'s edit

{{editor}}'s edit

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

{{editor}}'s edit

{{editor}}'s edit

{{title}}

{{title}}

{{title}}

{{title}}

Select a reply

How can pass a state into css class #40

vajonam Jan 30, 2021

Replies: 3 comments · 9 replies

exetico Jan 30, 2021 Maintainer

vajonam Jan 30, 2021 Author

exetico Jan 31, 2021 Maintainer

pkozul Feb 16, 2021 Collaborator

vajonam Feb 16, 2021 Author

pkozul Feb 17, 2021 Collaborator

vajonam Feb 17, 2021 Author

pkozul Feb 17, 2021 Collaborator

vajonam Feb 17, 2021 Author

exetico Feb 17, 2021 Maintainer

vajonam Feb 17, 2021 Author

exetico Feb 17, 2021 Maintainer

vajonam
Jan 30, 2021

Replies: 3 comments 9 replies

exetico
Jan 30, 2021
Maintainer

vajonam Jan 30, 2021
Author

exetico Jan 31, 2021
Maintainer

pkozul Feb 16, 2021
Collaborator

vajonam Feb 16, 2021
Author

pkozul Feb 17, 2021
Collaborator

vajonam
Feb 17, 2021
Author

pkozul Feb 17, 2021
Collaborator

vajonam
Feb 17, 2021
Author

exetico Feb 17, 2021
Maintainer

vajonam Feb 17, 2021
Author

exetico Feb 17, 2021
Maintainer