Add more than 2 color changes to an entity state

[xefil]

Hello!
I'm not really sure if this is florplan related or more simple to HA programmation, btw, here we are.
I’m using this code to change a color of a roller shutter based on the state:

    - entities:
        - cover.rolling_shutter_switch_1
      state_action:
        action: call-service
        service: floorplan.style_set
        service_data:
          style: |
            fill: ${ entity.state === "open" ? "#FF7F7F" : "#BAF5B8" };
            transition: ${ entity.state === "closed" ? "fill 5s ease" : "" };

This handles a state as OPEN and CLOSED.
Until here all works well.
How to implement the option to add 2 more colors for the state OPENING and CLOSING?
When it’s in a CLOSED state, and I open it, it goes to OPENING state until it’s moving, then to OPEN. I would like to add another color for that states.

Thanks!

Simon

[exetico]

Hi Simon,

Are we talking about two new colors, only used for the transaction, or?

I'm not 100% sure what you mean with "moving", if it's not related to CSS-animations.

One way could be to add a class on/off to, and use CSS for the other two colors. But I'm still not 100% sure about what you're trying to accomplish. It sounds like something totally "over done", but maybe I'm wrong! 😀

[xefil]

Hello Tobias,

In the provided example the color changes based on two states, open or closed. What I would like to do is to implement other two states, opening and closing with two additional colors. Actually it switches to red if the state is open and green if closed. Due the roller shutter has a state in opening or closing when it moves, I would like to implement it in the code. The above code works in an if statement. So I mean HA states of the device which are 4. Maybe a case / switch statement would do the job, but not sure if it's then related to this project or more to a syntax issue I can't accomplish. 

Thanks a lot. 

Simon

[exetico]

Hi xefil

I'm sorry for spamming your mailbox - but I'm still waiting for a reply from Petar. I'm not 100% what the best part are, for your request :-)

[xefil]

Don't worry, I'll wait for news ;-)
Thanks @exetico, Simon

[xefil]

HEllo @exetico and @pkozul any news? :-)

[pkozul]

Hi @xefil

I have not tested this, but hopefully this is what you were looking for.

The example below shows how you can use a JavaScript switch statement to handle 4 different states, and generate the appropriate CSS style.

Make sure to set the appropriate fill and transition values, since I just copy/pasted them across all 4 cases.

Does that help?

    - entities:
        - cover.rolling_shutter_switch_1
      state_action:
        action: call-service
        service: floorplan.style_set
        service_data: |
          >
          var fill = '';
          var transition = '';
          
          switch (entity.state) {
            case 'OPENING':
              fill = '#FF7F7F';
              transition = 'fill 5s ease';
            break;

            case 'OPEN':
              fill = '#FF7F7F';
              transition = 'fill 5s ease';
            break;

            case 'CLOSING':
              fill = '#FF7F7F';
              transition = 'fill 5s ease';
            break;

            case 'CLOSED':
              fill = '#FF7F7F';
              transition = 'fill 5s ease';
            break;
          }
          
          return `fill: ${fill}; transition: ${transition};`;

[xefil]

Hope what above is now enough explained @exetico thanks :-)

Simon

[vajonam]

Did you get this working? As long as the entity state shows opening and closing this is quite easy to do. Let me know if you still need help.

[exetico]

Petar are still busy, so I'm not able to provide news related to a "new" feature, supporting this from the ground up - but @vajonam are totally right here. It should be quite easy to do manually.

[vajonam]

in this example I am chagning the speed of animation of a fan icon based on the speed of the fan.

yaml

here the fan entity from home assistant returns low,medium and high which I can read from the entity attribute.

  - entity: fan.office_fan
    element: fan.fan_01
    state_action:
      action: call-service
      service: floorplan.class_set
      service_data:
        class: '${(entity.state === "on") ? "spin-" + entity.attributes.speed : ""}'

I have 3 classes that set based on the entity attribute but can easily changed to entity state if the state has more than 2 responses. IT also changes the colour of the fan, so yellow, orange to dark orange for speeds.

css

.spin-low {
  animation-name: spin;
  animation-duration: 5s;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
  transform-origin: 50% 50%;
  transform-box: fill-box;
  fill: rgb(245 255 0) !important;
  stroke: rgb(245 255 0) !important;
}

.spin-medium {
  animation-name: spin;
  animation-duration: 2.5s;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
  transform-origin: 50% 50%;
  transform-box: fill-box;
  fill: #ffa600 !important;
  stroke: rgb(245 255 0) !important;
}


.spin-high {
  animation-name: spin;
  animation-duration: 1s;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
  transform-origin: 50% 50%; 
  transform-box: fill-box;
  fill: #ff5100 !important;
  stroke: rgb(245 255 0) !important;
}

[xefil]

Hello @vajonam
Thanks for the support but I fear I'm missing something.
Here the snip of the code yaml:

    - entities:
        - cover.rolling_shutter_switch_1
        - cover.rolling_shutter_switch_2
        - cover.rolling_shutter_switch_3
        - cover.rolling_shutter_switch_4
        - cover.rolling_shutter_switch_5
        - cover.rolling_shutter_switch_6
        - cover.rolling_shutter_switch_7
        - cover.rolling_shutter_switch_8
        - cover.rolling_shutter_switch_9
      state_action:
        action: call-service
        service: floorplan.class_set
          service_data:
            class: ${ "cover-" + entity.state }'

And here the CSS:

.cover-open {
  fill: #FF0000 !important;
}

.cover-opening {
  fill: #FFA500 !important;
}

.cover-closing {
  fill: #FFA500 !important;
}

.cover-closed {
  fill: #008000 !important;
  transition: fill 5s ease;
}

The STATE of the item changes between open, opening, closed, closing, but now the css is not applied at all.
I can share the whole css and yaml if needed ;)

Thanks for the help!

Simon

[vajonam]

 class: ${ "cover-" + entity.state }'

looks like you missing a opening single ' quote at the begining. could it be that?

[pkozul]

@xefil

Might also be that your indentation was incorrect (service_data should be at same level as action, service, etc.)?

In any case, another option is to use the short-hand style (i.e. service_data all on a single line):

      state_action:
        action: call-service
        service: floorplan.class_set
        service_data: 'cover-${entity.state}'

[xefil]

Thank you @vajonam that was the issue!!
Now it's correct:

      state_action:
        action: call-service
        service: floorplan.class_set
        service_data:
          class: '${ "cover-" + entity.state }'

And thanks to @pkozul as well, the indentation was wrong either ;)
Now it works... so now I've only to play with the infinite world of CSS!
Don't worry, probably I'll back to ask new questions soon !

Cheers!

Simon

[vajonam]

Use the VS.code addon that will help you find all the yaml formatting issues. I recommend it.

[exetico]

+1. Use the redhat.vscode-yaml, vscode-icons-team.vscode-icons, esbenp.prettier-vscode, lukas-tr.materialdesignicons-intellisense, emilast.logfilehighlighter, oderwat.indent-rainbow, keesschollaart.vscode-home-assistant and usernamehw.errorlens plugins in your VS Code setup. That's a great way to start, if you're facing issues with your YAML-formattings. If you're running a Hass.io powered Home Assistant, take a look at this, else, you can run it in a docker-container if needed - however, you'll need to configure a few things by yourself. But this is way out of topic. I would just like to add it, now we're talking about YAML-formatting issues.