Custom button card using call service and state

[soest150 (Peter)]

Hello everybody!

I’ve been using Home Assistant for a while now with a lot of automation for lights, sunscreens, radio, ect. Really love. I recently discovered the custom button cards. I found some nice examples but, I’m stuck with something. I hope someone can help me.

I found a code for a button card which illuminates the background when switched on. It’s like this:
type: custom:button-card
layout: vertical
icon: mdi:led-strip-variant
show_entity_picture: false
name: Kasten
state:

• value: ‘on’
  color: white
  styles:
  card:
  - background: rgb(1, 73, 154, 0.7)
  - box-shadow: 0px 0px 10px 8px orange
  name:
  - font-size: 25px;
  - color: white
  icon:
  - color: white
• value: ‘off’
  color: black
  styles:
  card:
  - background: rgb(10, 10, 10, 0.2)
  name:
  - font-size: 25px;
  - color: black
  icon:
  - color: black
  label: null
  tab_action:
  action: toggle
  entity: light.studeerkamer_kasten
  alignment: center

Works perfectly!

But when I use this to switch on Philips Hue Lights, it switches on to the last scene before switched off. I would like to switch It on on a default scene or default setting. I can do this with a call-service like this:
show_name: true
show_icon: true
type: button
entity: scene.studeerkamer_kasten_ontspannen
name: Studeerkamer kasten
tap_action:
action: call-service
service: light.toggle
target:
entity_id: light.studeerkamer_kasten
data:
rgb_color:
- 255
- 207
- 2
hold_action:
action: toggle
show_state: false
icon: mdi:led-strip-variant

When I combine the two, it switches on like the service does, but the state options used like in the first example, don’t work and don’t do anything.

Is there anybody who can help me with this. I combined it like this, but with now effect:
type: custom:button-card
name: Studeerkamer Kasten
state:

• value: ‘on’
  color: white
  styles:
  card:
  - background: rgb(1, 73, 154, 0.7)
  - box-shadow: 0px 0px 10px 8px orange
  name:
  - font-size: 25px;
  - color: white
  icon:
  - color: white
• value: ‘off’
  color: black
  styles:
  card:
  - background: rgb(10, 10, 10, 0.2)
  name:
  - font-size: 15px;
  - color: black
  icon:
  - color: black
  label: null
  tap_action:
  action: call-service
  service: light.toggle
  target:
  entity_id: light.studeerkamer_kasten
  data:
  rgb_color:
  • 255
  • 207
  • 2
    hold_action:
    action: toggle
    icon: mdi:led-strip-variant
    icon_height: 100px

Thank you very much!!

[LiQuid_cOOled]

I can help you but can you post your code using the community standards? Post 11

How to help us help you - or How to ask a good question

Before we begin… This forum is not a helpdesk The people here don’t work for Home Assistant, that’s an open source project. We are volunteering our free time to help others. Not all topics may get an answer, never mind one that helps you solve your problem. [image] This also isn’t a general home automation forum, this is a forum for Home Assistant and things related to it. Any question about Home Assistant, and about using things with Home Assistant, is welcome here. We can’t help you with eve…

[soest150 (Peter)]

Sorry… I read a lost of posts here and found the code I really like. But than I got stuck. Since I saw a lot of questions, I thought, let’s give it a shot and ask. If it’s not okay, than ignore or delete it…

This is the code I found and used. Works very nice.

type: custom:button-card
layout: vertical
icon: mdi:led-strip-variant
show_entity_picture: false
name: Kasten
state:
  - value: 'on'
    color: white
    styles:
      card:
        - background: rgb(1, 73, 154, 0.7)
        - box-shadow: 0px 0px 10px 8px orange
      name:
        - font-size: 25px;
        - color: white
      icon:
        - color: white
  - value: 'off'
    color: black
    styles:
      card:
        - background: rgb(10, 10, 10, 0.2)
      name:
        - font-size: 25px;
        - color: black
      icon:
        - color: black
      label: null
tab_action:
  action: toggle
entity: light.studeerkamer_kasten
alignment: center

But I would like to use it with a service so the lights switch on with a “default” scene, like this:

show_name: true
show_icon: true
type: button
entity: scene.studeerkamer_kasten_ontspannen
name: Studeerkamer kasten
tap_action:
  action: call-service
  service: light.toggle
  target:
    entity_id: light.studeerkamer_kasten
  data:
    rgb_color:
      - 255
      - 207
      - 2
hold_action:
  action: toggle
show_state: false
icon: mdi:led-strip-variant

It would be awesome if I could use the this part with the “call-service” part:

state:
  - value: 'on'
    color: white
    styles:
      card:
        - background: rgb(1, 73, 154, 0.7)
        - box-shadow: 0px 0px 10px 8px orange
      name:
        - font-size: 25px;
        - color: white
      icon:
        - color: white
  - value: 'off'
    color: black
    styles:
      card:
        - background: rgb(10, 10, 10, 0.2)
      name:
        - font-size: 25px;
        - color: black
      icon:
        - color: black
      label: null

Again, thanks!!

[soest150 (Peter)]

Ha, I solved it myself…

After:

type: custom:button-card

I needed to add the entity as well.