Air conditioner "airflow" animation using CSS

[mrtxilya]

Hello all!

I finally made an animation of a working air conditioner!

The solution is a little crutch, but it is made on pure css and js.

First you need to perfectly place a lot of "particles" (circles) on the svg (I placed 60 in two rows for better results).
This is the most boring part.
All particles must have the same name with a number (particle1, particle2, particle3, ..., particle60) and be placed in "sensors" group.
The particles must be placed in their "starting" position in a single line (taking into account the perspective).
Use temporary lines to line up the "particles".

After that, on the floorplan card, you need to set the class and style for the "particles".
We set the class and style (with random animation time) for all 60 particles at once with a javascript loop.
Code (YAML):

                - entities:
                    - climate.bk_ac
                  state_action:
                    - action: call-service
                      service: floorplan.class_set
                      service_data: |
                        >
                          let elements = [];
                          for (let i = 1; i <= 60; i++) {
                            elements.push(`bk_ac_air_particle${i}`); 
                          } 
                          let new_class = `bk_ac_air_particle`;
                          if(entity.state !== undefined && entity.state !== "off" && entity.state !== "unavailable"){
                            new_class += ` bk_ac_air_particle-moving`;
                            if (entity.state !== "heat"){
                              new_class += ` bk_ac_air_particle-cool`;
                            } else {
                              new_class += ` bk_ac_air_particle-heat`;
                            }
                          }
                          new_class = `bk_ac_air_particle bk_ac_air_particle-moving bk_ac_air_particle-cool`;
                          return {
                            elements: elements,
                            class: new_class,
                          };
                    - action: call-service
                      service: floorplan.style_set
                      service_data: |
                        >
                          let elements = [];
                          for (let i = 1; i <= 60; i++) {
                            elements.push(`bk_ac_air_particle${i}`);
                          } 
                          let new_style = ``;
                          if(entity.state !== undefined && entity.state !== "off" && entity.state !== "unavailable"){
                            let min_animation_speed = 0.5;
                            let add_max_random_speed = 0.5;
                            let animation_speed_multiplier = 2;
                            if(entity.attributes.fan_mode === "HIGH"){ 
                              animation_speed_multiplier = 0.5;
                            }
                            if(entity.attributes.fan_mode === "MID" || entity.attributes.fan_mode === "MID_HIGH"){ 
                              animation_speed_multiplier = 1;
                            }
                            let animation_speed = (min_animation_speed + Math.floor((Math.random() * add_max_random_speed) * 1000) / 1000) * animation_speed_multiplier;
                            let animation_delay = (Math.floor(Math.random() * 1000) / 1000) * animation_speed_multiplier;
                            new_style = `animation: ac_particle_flow ${animation_speed}s linear infinite; animation-delay: ${animation_delay}s`;
                          }
                          return {
                            elements: elements,
                            style: new_style,
                          };

You also need to add animation to the css file (you need to determine the direction of movement of the particles and the time of their appearance based on your floorplan image).
Code (CSS):

@keyframes ac_particle_flow {
    0% {
        opacity: 0%;
    }
    30% {
	opacity: 0%;	
    }
    31% {
	opacity: 100%;
    }
    100% {
	transform: translate(-100px,-40px);
        opacity: 0%;
    }
}

#sensors .bk_ac_air_particle {
	display:none;
	opacity:0;
}

#sensors .bk_ac_air_particle.bk_ac_air_particle-moving {
    	display:block;
}

#sensors .bk_ac_air_particle.bk_ac_air_particle-heat {
	fill:orange;
}
#sensors .bk_ac_air_particle.bk_ac_air_particle-cool {
	fill:cyan;
}

As a result, you should get something like this:

The animation speeds up when the fan speed is high. Also, when the heating mode is set, the particles will be orange.

The source files with the example are in the attached zip archive.
The example code has been slightly modified for demonstration purposes.
In the yaml file, you need to delete lines 38-40:

// FOR DEMONSTRATION SET IT ON
new_class = `bk_ac_air_particle bk_ac_air_particle-moving bk_ac_air_particle-cool`;
//

Uncomment line 54:
// if(entity.state !== undefined && entity.state !== "off" && entity.state !== "unavailable"){
And delete line 55:
if (true){

floorplan_ac_animation.zip

[OzGav]

I think maybe use style_set for the whole thing then you can control all aspects of your styling at once?

P.S. Please post your final solution as this sounds very cool (pun intended!)

[exetico]

Hi

I'm actually not using the option to generate entity-actions like this. I don't get why I've missed that way of generating class_set-entity code.

I guess the style_set would be the best way of doing this. Else, you should take a look at SCSS and generate the animations in the style.

There's many examples on the internet, but I'm not sure if that's too advance for you?
https://codepen.io/natewiley/pen/QWGdZJ
https://codepen.io/hf666/pen/WVrpWe

With that said. You're not really giving me a chance to play around with things, not that no SVG is shared 😄 ...

---

TO BE UPDATED...
_Simulating ... "the next day", cause I forgot to post the anser...

---

It's now the next day, and I ended playing around with one of the examples to get a better understand on how to play with translate3d..

You'll need to use SCSS, and generate the CSS - but I think that a way better solution - if you can live without "true randomness".
👉 https://codepen.io/exetico/pen/XWYJwjG?editors=1100

If you're not into advance CSS, i think it's a bit hard to understand the code.. But hey... Fell free to use the codepen, if you're ready for a challenge.

It's also possible to control the angle of the movements, but I've not spend time on that part ;) ...

[exetico]

@mrtxilya So, did you take a look at it?

[mrtxilya]

Sorry for the long feedback.
Thanks for your ideas!

I tried the style_set again for many svg elements (particles) and found that the js code works for each element separately and I got a unique random for each element. This is just what I need.

I decided to do everything on pure css (I had to manually place 60 "particles" on svg).

I also tried to use a svg mask to hide the particles that were in front of the conditioner but in the end I couldn't do it and solved the problem by cleverly placing the particles in the starting position.

I also had to determine the moment in the animation when particles "come out" of the air conditioner and should be visible.

I will rename the discussion and post a simplified example of what I got.

[ahonxxx]

Sorry for the long feedback. Thanks for your ideas!

I tried the style_set again for many svg elements (particles) and found that the js code works for each element separately and I got a unique random for each element. This is just what I need.

I decided to do everything on pure css (I had to manually place 60 "particles" on svg).

I also tried to use a svg mask to hide the particles that were in front of the conditioner but in the end I couldn't do it and solved the problem by cleverly placing the particles in the starting position.

I also had to determine the moment in the animation when particles "come out" of the air conditioner and should be visible.

I will rename the discussion and post a simplified example of what I got.

Hello, I have installed your example and made an animation of water pipe running. I want to ask whether there is a simple way to implement water pipe running?