How to image_set and class_set for the same element?

[done7k]

Can NOT set a CLASS for an image.

    - name: weather icon
      entities:
        - weather.home
      state_action:
        - service: floorplan.image_set
          service_data:
            image: /local/floorplan/examples/home/weather-${entity.state}.svg
            cache: true
        - service: floorplan.class_set
          service_data:
            class: weathericon

This does not add the weathericon class to changed image element. If I remove floorplan.image_set the class is added. In another example I change text and set class and both work fine. Why image_set + class_set fail to add class?

[m90att]

I'd be interested in this too as I've got a similar thing on my to do list

[done7k]

Well, there is workaround solution to describe id in CSS instead of class.

#weather\.home {
  fill: var(--primary-text-color);
}

But interesting why class can not be added.

[exetico]

I'm not sure why this comment is related to your question 😊?

If it is, here's some more information about the dots:
https://youtu.be/AmAna4McGs4?t=6m14s

[exetico]

Short answer: The short answer is, that the class_name is updated, before the image is fetched from the network, due to async-executions.

The long answer?
Well, what's how the engine works.

The image_set needs to fetch the resources on the network. Therefore it's calling the async function called loadImage. If a svg-file is requested, we use our loadSvgImage, and else, we default to ´loadBitmapImage. The loadSvg+loadBitmap uses awaitand the thereforeloadImagesis waiting for the image to be returned. **However**, the original service-execution does **not** wait forloadImage` to be done, before it contines with the other actions provided.

So... Due to the async request, it's executed a bit like this:
image_set > loadImage >... (now waiting on image fetch in the background)... > class_set > ... (now the image is done loading) .. > new image is added to the dom > end of scope

So we need to extend the logics in the core of ha-fllorplan for this to work. Check my reply to this answer 😄 .

[m90att]

Well I'm failing at the first hurdle! I've replaced the floorplan.js in the following folder as I can't find the folder that the resource refers to.

/hacsfiles/ha-floorplan/floorplan.js?hacstag=1883234941034

but the version is still showing as v1.0.34.

I'm obviously doing something wrong but I don't know what!

[OzGav]

Possibly a caching problem. Try a different browser or search for how to disable the cache for the browser you are using. In Chrome open the dev tools (F12) and then look in the network tab for a checkbox.

[m90att]

No joy I'm afraid. The cache is disabled by default on my browser and I tried with a couple of browsers. Still showing 1.0.34. Have I made a mistake overwriting I wonder, given the lack of hacsfiles directory (although I guess that may be a pseudonym, like www=local).

[OzGav]

Yes hacsfiles maps to www/community

[exetico]

Hi guys. I'm sorry that I'm a bit late to the afterparty. I picked up something (not COVID, though) and tried the best I could to get through the day with the normal and required workload 😄 .

Maybe you've noticed that @pkozul is back in the game, after a short break from ha-floorplan. He has already implemented his version of "retain classes" if images is swapped. Instead of going from synchronized to async executions, we implemented the needed "awareness" to retain the classes instead. Both takes is very much valid solutions, so I'm not going to push my fix to production. But I'll talk about thinking more async + awaits into the codebase, for sure ;) ...

The short answer: There should already be a fix in 1.0.35, so try and update to that instead 😃 .

[exetico]

@pkozul has changed the logics so classes will be retained. It's pushed to:
https://github.com/ExperienceLovelace/ha-floorplan/releases/tag/1.0.35

You can pick up this update in HACS.

Here's a notes:

• Users who has used the old "logics" as a feature, will need to adapt to the new logics. Hopefully none has done that, else we surly can change the flow, so users are able to select which logics should be used.

[pkozul]

@m90att As @exetico mentioned, there is a new version now available in HACS. Can you please update, and let us know if the weathericon class is now being retained after the image gets loaded. Thanks.

[done7k]

Thank you guys! I have just updated the add-on to 1.0.35 and it adds a class right after the image_set. Works fine. Thank!

[pkozul]

Hi @done7k

That's great. Thanks for letting us know.