Need help custom button card layout

Configuration Frontend
, ,
1

Hi.

I have a question regarding a custom button card. It seemed to be simple but I’m stuck now.

I have a input button (boolean) which triggers an automation for a certain time. To trigger this switch I have a custom button card that calls a service to turn the boolean on. I do not want to make it a toggle because once the helper is turned on it triggers an automation that sets some valves and turns my havac on to vent certain parts of the house.

Now do need to see the state of that helper so i use the service data entry.
As for now everything works accept that I want to have some Icon styling like change the color and make the icon spin.

It works with a normal custom button card but as soon as I want to use “service data”
is does not work anymore.

Could anyone tell me what I’m doing wrong or how te set this up

tap_action:
  action: call-service
  service: input_boolean.turn_on
  service_data:
    entity_id: input_boolean.ventilatie_laag
styles:
  card:
    - theme: mushroom square
    - border-radius: 5%
    - background-color: rgb(29,18,37, 60%)
    - height: 70px
  name:
    - justify-self: center
    - padding-top: 1px
    - padding-bottom: 2px
    - font-weight: italic
    - font-size: 10px
    - text-transform: false
name: |
  [[[
    if (states['input_boolean.ventilatie_laag'].state === "on")
      return "Aan";
    else if (states['input_boolean.ventilatie_laag'].state === "off")
      return "Uit"; 
  ]]] 
icon: |
  [[[
    if (states['input_boolean.ventilatie_laag'].state === "on")
      return "mdi:fan"
     
    else if (states['input_boolean.ventilatie_laag'].state === "off")
      return "mdi:fan-speed-1";
  ]]]
2

There is a dedicated thread for button-card. Suggest to ask there.

3

I cannot find that…

4

OK, you’ve posted the exact same question 3 hours apart (here is the newer one ) Please delete the other to avoid confusion.

Edit: I think a moderator has done this for you now.

5

Is this your question? I don’t understand what you are asking for but happy to help you can explain.

6

Is this what you are asking about? …Try this:

tap_action:
  action: call-service
  service: input_boolean.turn_on
  target:
    entity_id: input_boolean.ventilatie_laag

edit: might also be this:

tap_action:
  action: call-service
  service: input_boolean.turn_on
  data:
    entity_id: input_boolean.ventilatie_laag
7

Hi jchh

I’ve tried this code… I can confirm it is switching but still no result on the icon…

type: custom:button-card
tap_action:
  action: call-service
  service: input_boolean.turn_on
  data:
    entity_id: input_boolean.ventilatie_laag
name: Ventilatie laag
styles:
  card:
    - theme: mushroom square
    - border-radius: 5%
    - background-color: rgb(29,18,37, 60%)
    - height: 50px
  name:
    - justify-self: center
    - padding-top: 1px
    - padding-bottom: 2px
    - font-weight: italic
    - font-size: 11px
    - text-transform: false
icon: mdi:fan
size: 35px
align: left
state:
  - value: 'on'
    color: orange
    styles:
      icon:
        - animation:
            - rotating linear 3s infinite
  - value: 'off'
    color: grey
    styles:
      icon:
        - animation:
            - rotate 3s infinite
8

Ok, I didn’t look at the icon as I didn’t really understand your concern to begin with. I’ll take a look at the icon later.

9

This works…

Thanks for thinking with me!!!

type: custom:button-card
entity: input_boolean.ventilatie_laag
show_state: false
tap_action:
  action: call-service
  service: input_boolean.turn_on
  data:
    entity_id: input_boolean.ventilatie_laag
name: Ventilatie hoog
styles:
  card:
    - theme: mushroom square
    - border-radius: 5%
    - background-color: rgb(29,18,37, 60%)
    - height: 50px
  name:
    - justify-self: center
    - padding-top: 1px
    - padding-bottom: 2px
    - font-weight: italic
    - font-size: 11px
    - text-transform: false
icon: mdi:fan
size: 35px
align: left
state:
  - value: 'on'
    color: orange
    styles:
      icon:
        - animation:
            - rotating linear 0.8s infinite
  - value: 'off'
    color: grey
    styles:
      icon:
        - animation:
            - rotate 1s infinite