Lovelace: Button card

Set your styles in the state with operator: default, it’s better.

1 Like

If I use storage mode for the lovelace (not the yaml mode), where have to be inserted the
template: !include button_card_templates.yaml?

You can’t use includes in storage mode

1 Like

Hello
how can i give an exact size for all the card and exact size for each image?
on the example on the image on the right i cannot see the ‘name’ because it is behind the image
image

cards:
  - name: ILUMINAÇÃO DA SALA
    template: header_marcelo
    type: 'custom:button-card'
  - cards:
      - color: 'rgb(255, 228, 181)'
        color_type: card
        dbltap_action:
          action: more-info
        entity: light.luz_sala_de_estar
        icon: 'mdi:ceiling-light'
        name: SALA DE ESTAR
        show_entity_picture: true
        show_state: true
        size: 62%
        state:
          - entity_picture: /local/images/SalaON.jpg
            value: 'on'
          - value: 'off'
        tap_action:
          action: toggle
        template: cartao
        type: 'custom:button-card'
      - color: 'rgb(255, 228, 181)'
        color_type: card
        dbltap_action:
          action: more-info
        entity: light.luz_sala_de_jantar
        icon: 'mdi:ceiling-light'
        name: SALA DE JANTAR
        show_entity_picture: true
        size: 100%
        state:
          - entity_picture: /local/images/JantarON.jpg
            value: 'on'
          - entity_picture: /local/images/JantarOFF.jpg
            value: 'off'
        styles:
          entity_picture:
            - transform: rotate(180deg)
        tap_action:
          action: toggle
        template: cartao
        type: 'custom:button-card'
      - color: auto
        color_type: card
        dbltap_action:
          action: more-info
        entity: light.yeelight_color1_04cf8c9557ff
        icon: 'mdi:floor-lamp'
        name: Candeeiro de pé
        show_state: true
        show_entity_picture: true
        
        size: 100%
        state:
          - entity_picture: /local/images/salapeon.jpg
            value: 'on'
          - entity_picture: /local/images/salapeoff.jpg
            value: 'off'
        styles:
          entity_picture:
            - transform: rotate(90deg)
        tap_action:
          action: toggle
        template: cartao
        type: 'custom:button-card'
    type: horizontal-stack
  - cards:
      - color: 'rgb(255, 228, 181)'
        color_type: card
        dbltap_action:
          action: more-info
        entity: light.luz_hall
        icon: 'mdi:lightbulb'
        name: HALL
        show_state: true
        show_entity_picture: true
        size: 80%
        state:
          - entity_picture: /local/images/HallOFF.jpg
            value: 'on'
          - entity_picture: /local/images/HallON.jpg
            value: 'off'
        tap_action:
          action: toggle
        template: cartao
        type: 'custom:button-card'
      - color: auto
        color_type: card
        dbltap_action:
          action: more-info
        entity: light.luz_philips_xiaomi
        icon: 'mdi:lamp'
        name: APARADOR
        size: 80%
        tap_action:
          action: toggle
        template: cartao
        type: 'custom:button-card'
      - color: auto
        color_type: card
        dbltap_action:
          action: more-info
          state: null
        entity: light.yeelight_color2_04cf8c842ee1
        icon: 'mdi:television-box'
        name: AMBILIGHT
        size: 80%
        tap_action:
          action: toggle
        template: cartao
        type: 'custom:button-card'
    type: horizontal-stack
type: vertical-stack

Question number 2
is there a way to change color only on the marked area in red ? i dont want the all the card change color when on or off…only that area

thanks
image

I’m struggling with ripple coloring as there is a bug in the component… So for now I won’t release a version with ripple coloring.

I’m also working on adding aspect ratio for your buttons so you’ll not need to specify width and height anymore (example: for a square, aspect ratio would be 1/1) to have buttons the way you want and this will also adapt to whatever the screen size is. I’ll need to modify slightly some CSS, I hope it will not break things too much :blush: but hopefully you’re all using templates now so it will be fast to fix :stuck_out_tongue_winking_eye:

State merging when using template configurations is also incoming alongside with name and entity_picture javascript templating support.


You can use size: xx%, default being 40%

Use a combination of state and style in each state just for the name:

state:
- value: 'on'
  styles:
    name:
      - background-color: your_color
- value: 'off'
  styles:
    name:
      - background-color: other_color
3 Likes

I need some advice from the brain trust. I’m attempting to use button-card to replace custon:fan-control-entity-row and have run into a bit of a wall. Using all of button-card’s new features, I have replicated the look of fan-control-entity-row while adding some nice modifications (like spinning icons).

The challenge has been getting the fan speed buttons to function in the same fashion. With fan-control-entity-row, pressing any one of the speed buttons will do the following:

  • If the fan is off, pressing a speed button will simultaneously turn the fan on and set the fan speed.

  • If the fan is on, pressing a speed button will set the fan speed.

This is where I find myself, stuck at the limits of my YAML knowledge. How does one go about creating logic that not only checks for the current state of the fan but simultaneously calls two services (fan.turn_on and fan.speed) when necessary?

I considered using conditionals to monitor the on/off state of the fan but the concept of passing two separate service calls completely eludes me.

this might help:

      - type: custom:button-card
        template: button_picture_script_small
        entity_picture: '/local/hue_scenes/concentrate.png'
        tap_action:
          action: call-service
          service: script.tiles_set_hue_scene
          service_data:
            option: 'Concentreren'
        state:
          - operator: template
            value: >
              return states['input_select.hue_scenes'].state === 'Concentreren'
            color: '#a2eaf2'
          - operator: default
            color: grey

of course adapt the logic, but it shows how to call a script, and check for state, and act accordingly

1 Like

:clap::clap::clap::clap::clap::clap::clap::clap::clap::clap::clap::clap::clap::partying_face::partying_face::partying_face::partying_face::partying_face:

1 Like

+1 for that, been fiddling with that all day, hoping it wouldn’t be necessary shortly… co cool this is going to be! thx!

So… what I would do is build a template switch that cycles through low, medium, high, and off speeds. I can help you with that if you need it.

I actually thought of doing that but ended up not going down that route since its use might require cycling through all of the speeds to arrive at the intended setting. For me, that would work well but the WAF would take a hit. :slight_smile:

Why not just create a script which takes an entity and a speed as inputs and call this script from 3 buttons with 3 different speeds, the script would turn_on and set the speed at the same time. The last one being off just call the fan.turn_off service? cc: @petro

Also each speed button would light up based on a state template which checks the current speed of the fan

1 Like

Ok, how about this… an entities card with a vertical-in-stack-card, made to look like a button. The vertical stack will contain 1 icon button card, icon only. 1 markdown card with the label. 1 horizontal stack with 4 square buttons, off, low medium high. I’d envision it looking like this:

image

yet another challenge and a bit of a search, cause the button shows a text I can’t explain, probably error code, thought the inspector doesn’t indicate an error, bottom right button:

16

I fear it has to do with the ‘Off’ in the code, but having it quoted should mitigate that?

please have a look at my code for this, the others are exact copies and work perfectly:

      - type: custom:button-card
        template: button_picture_script_small
        name: 'Uit'
        entity_picture: '/local/hue_scenes/off.png'
        tap_action:
          action: call-service
          service: script.tiles_set_hue_scene
          service_data:
            option: 'Off'
        state:
          - operator: template
            value: >
              return states['input_select.hue_scenes'].state === 'Off'
            color: 'lightgrey'
            name:
              color: darkgrey
          - operator: default
            color: grey
            name:
              color: lightgrey

for testing purposes I change the name from ‘Off’ to ‘Uit’, because I would have sworn the error wasn’t there before, but no effect it has. The button does work as intended and changes style on state.

Unfortunately, I’m not at home so I can’t share my precise configuration but this should give you a good visual understanding of my current progress.

image

The above screenshot is of the actual fan-control-entity-row card. My current iteration using button-card is visually near-identical. The entire thing exists within a vertical-in-stack card with multiple button-cards with each card representing a specific visual object (Icon, Name, speed button, etc.).

Functionally, the Icon, Name and On/Off button make the same service call - fan.toggle. There are also object specific graphical tweaks that take place based on the entity state. (Icon spins when the fan is on, etc.).

Really, the final step is figuring out how to get the speed and states acted upon. Based on @Mariusthvdb’s suggestion and @RomRider’s follow up, it sounds like a script may be the correct way forward. Now I need to learn scripting in HA. :stuck_out_tongue:

you need to terminate the line

            value: >
              return states['input_select.hue_scenes'].state === 'Off';

It’s not

name:
  color: xxxx

It’s

styles:
  name:
    - color: xxx

PS: your javascript is fine, no need for parenthesis or ; at the end for 1 line.

1 Like

I was wondering about that, since in my whole setup I terminate JS templates indeed. These buttons apparently don’t need that, and the many I have built so far don’t throw errors or unexpected behavior…

btw, I ve tried it just now, and makes no difference

then you need it in parenthesis

EDIT: You are trying to get the word ‘true’ or ‘false’ there, correct?

Oops, missed that yes. Funny how the color does change as it should. Simply showing the error in the correct color ;0)

No, I need the word ‘Off’ to switch off the lightgroup:

08

now only need to find out why some change the active name color to black, and some don’t, and stay white, while I have nothing set in the config of that button:

see:
40 46 52

and code:

      - type: custom:button-card
        template: button_picture_script_small
        name: Arctic
        entity_picture: '/local/hue_scenes/arctic.png'
        tap_action:
          action: call-service
          service: script.tiles_set_hue_scene
          service_data:
            option: 'Arctische dageraad'
        state:
          - operator: template
            value: >
              return states['input_select.hue_scenes'].state === 'Arctische dageraad'
            color: '#00d0a0'
          - operator: default
            color: grey

      - type: custom:button-card
        template: button_picture_script_small
        name: Relax
        entity_picture: '/local/hue_scenes/relax.png'
        tap_action:
          action: call-service
          service: script.tiles_set_hue_scene
          service_data:
            option: 'Ontspannen'
        state:
          - operator: template
            value: >
              return states['input_select.hue_scenes'].state === 'Ontspannen'
            color: '#ffc059'
          - operator: default
            color: grey

      - type: custom:button-card
        template: button_picture_script_small
        name: Clear
        entity_picture: '/local/hue_scenes/clear.png'
        tap_action:
          action: call-service
          service: script.tiles_set_hue_scene
          service_data:
            option: 'Helder'
        state:
          - operator: template
            value: >
              return states['input_select.hue_scenes'].state === 'Helder'
            color: '#fcdb97'
          - operator: default
            color: grey