Accessing and changing different elements style properties with different values

[Alfiegerner]

Hi - I think the answer to this might be not possible but just thought I'd check.

My use case is that I have 3 different colour overlays for a room taken from floorplanner, Red, Green, And Blue. I had some custom code in the previous version which would look at the state of the colour lights and apply an opacity level to each layer. Works quite well.

So I was wondering if and how I could replicate this without custom code. it would need a function like:

function handleColour(entity){
  var elementRed =  documentGetElementId(entity.entity_id + '.red').
   //calculate red opacity
   elementRed.setStyle('opacity: ' redOpacity);
   // etc    
}

Is it possible to get a domElement within configuration code e.g. functions, and adjust it's style? I saw the functions were sandboxed that made me think not, but just thought I'd check.

An alternative I thought of is the return value to class_set or style_set could contain an array, eg:

allReturnElements[
  [elements1: [],
  class: clazz],
  [elements2: []
  class: clazz2]
]

But I'm not sure how feasible or useful you'd consider that.

Thanks for looking :)

[pkozul]

Hi @Alfiegerner

Not sure if it's applicable in your scenario, but I wonder if the Light example contains the sort of code you require.

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

As you can see in that example, the service_data is evaluated dynamically, and the returns value contains the target DOM element(s) to be used for the call to floorplan.style_set.

BTW, as you noticed, direct access to the DOM is not supported (due to sandboxing), so the best you can do is tell floorplan which DOM element you want to update via floorplan rules.

Let us know if that helps.

[Alfiegerner]

That will do nicely, thanks very much @pkozul .

[exetico]

Remember to share the final solution 🥳

[Alfiegerner]

Thanks @exetico I will 💯

[Alfiegerner]

Here's the final effect of RGB using floorplanner RGB images . And the config here.

I use similarish config to get lighting effects right when there's multiple lights in the same room.

In floorplanner i've saved off versions of the room with permutations of lights, so I end up with with images called things like:

light.dining.on
light.dining.kichen_spotlights.on
light.dining.lounge.on
etc etc for all permuations.

And then in ha-floorplan select the correct image based on the states of the entities. Config of a simpler example with 2 main lights in a room here. There get's to be a lot of repetition if you have 3 light, In my main living area I have 7 images that get selected from.

I know there's a lots of easier ways to do but I really like the lighting and shadow effects from floorplanner.

So I've managed to get all my code that was in a custom fork into the new version! Very happy with that. Great job guys in making this so flexible.

There might be easier ways to achieve this so let me know if you spot anything. One thing that would help is if functions could return an object with the element and style, rather than redoing that in each inline function, but I couldn't get that to work. Am I right in thinking that functions can only return Strings currently?

Thanks for everything.

[pkozul]

Hi @Alfiegerner

Great work! Really impressive. Thanks for sharing.