Spinning Fan needs the speed control

Configuration
1

I have the fan spinning using the custom button card. But the card/fan only has a toggle action on/off. (See code below).

How do I add in the High, Medium, Low, Off options as per the popup. And then bring all the fans into a card (eg Entities) card.

Does anyone have sample code which may do this. Or can show me the yaml i need.

image
image603×572 13.3 KB

Customer Button Card Code

type: custom:button-card
aspect_ratio: 4/1
name: Fanny 
state:
  - value: "on"
    color: green
    styles:
      icon:
        - animation:
            - rotating 1s linear infinite
        - height: 50px
        - width: 50px
  - value: "off"
    color: red
tap_action:
  action: toggle
entity: fan.fanny
icon: null
2

It all depends on what info your fan is providing. Can you post what the state data is from developer tools?

image
image1410×386 21.5 KB

There are so many way to accomplish this( variables, templates, etc…)

This basic method may provide some insight on how to access the attributes

type: custom:button-card
aspect_ratio: 4/1
entity: fan.bedroom_fan
name: "[[[ return states['fan.bedroom_fan'].attributes['percentage']+'%';]]]"
icon: mdi:fan
styles:
  icon:
    - color: |
        [[[
          if (states['fan.bedroom_fan'].attributes['percentage'] == '16') return 'red';
          if (states['fan.bedroom_fan'].attributes['percentage'] == '33') return 'green';
          if (states['fan.bedroom_fan'].attributes['percentage'] == '50') return 'blue';
          else return' grey';
        ]]]
    - animation: |
        [[[
          if (states['fan.bedroom_fan'].attributes['percentage'] == '16') return 'rotating 3s linear infinite';
          if (states['fan.bedroom_fan'].attributes['percentage'] == '33') return 'rotating 2s linear infinite';
          if (states['fan.bedroom_fan'].attributes['percentage'] == '50') return 'rotating 1s linear infinite';
          else return 'none';
        ]]]

The code can be paired down a bit, but I wanted to make it as clear as possible for you.

Please provide the source of the picture.

3

Thanks for the code. I added in your code as a custom button and it only gave me on/off. I had similar working with the custom button code.

Below are two types of fans I use with the Bond hub.

image
image936×328 19.7 KB

I would like to get the seperate buton up for High, Medium, Low. Either pop up seperately in a pop up or added to the custom button.

Any suggestions?