Lovelace: Button card

[pedolsky]

In your last both attempts I cannot find the background image. Could you show the relevant piece of code, please?

[Mariusthvdb (Marius)]

I don’t have a background image for the buttons, they only should have a color, like they do…

the background image for the horizontal stack is like here Lovelace: Button card - #5611 by Mariusthvdb

[pedolsky]

No problem. For example, this is my structure:

[pedolsky]

So you mixed up the examples with your code and this won’t t work.

[Mariusthvdb (Marius)]

adding to the above, you can/must do that for all dashboards:

button_card_templates: !include lovelace/buttons/button_card_templates.yaml

you can reference the same file in all of your templates, there’s really not much sense in organizing these cf the packages. to give you an idea, here’s my templates file, which holds templates that are used in all dashboards, give or take a few, that are only used in a single dashboard. But, when changing the Lovelace config, moving a card from one to the other dashboard, you dont have to think about the templates location at all.

[Mariusthvdb (Marius)]

not sure what you are saying here, but I posted the full config of my stack-in-card. to that I only want to add some opacity for the individual button-cards backgrounds.

[pedolsky]

Mmh… here:

@Mariusthvdb

      custom_fields:
        bgi:
          - position: absolute
          - left: 0
          - top: 0
          - width: 100%
          - height: 100%
          - background-size: cover
          - background-position: center
          - opacity: 0.1

and here:

@Mariusthvdb

      custom_fields:
        bg:
          - position: absolute
          - opacity: 1
    custom_fields:
      bg: ''

…no image

[Mariusthvdb (Marius)]

so? that is on purpose. as said, I don’t want an image in the button. I want the background to have opacity. to reveal some of the background image of the stack, that is the whole idea…

[RomRider]

Ah, then why not just use rgba(r, g, b, alpha) as a color for the background? alpha is the opacity of the color.

[Mariusthvdb (Marius)]

that sound totally feasible if I set that on the button it would have to be merged by id, because this is in the template for my switches:

styles_state_default_auto: #icon color follows light color, so not set in state 'on'
  state:
    - value: 'on'
      styles:
        card:
          - color: var(--text-color-on)
          - background-color: var(--background-color-on)
      id: state-on

    - value: 'off'
      styles:
        card:
          - color: var(--text-color-off)
          - background-color: var(--background-color-off)
        icon:
          - color: var(--icon-color-off)
      id: state-off

o heck, I cant use rgba() with the variables… that’s why! I forgot, sorry

though it isn’t a solution for my issue here (really need the theme variables) it does work with a fixed color:

  - type: custom:button-card
    template:
      - button_switch
      - spin
#    styles:
#      card:
#        - position: relative
#      custom_fields:
#        bg:
#          - position: absolute
#          - background: ivory
#          - opacity: 0.5
#    custom_fields:
#      bg: ''

#    style: |
#      ha-card {opacity: 0.9;}
    entity: switch.vijverpomp_links
    triggers_update: sensor.vijverpomp_links_actueel
    name: Pomp left
    state:
      - value: 'on'
        id: state-on
        styles:
          card:
            - background-color: 'rgba(255,255,240,0.5)'
      - value: 'off'
        id: state-off
        styles:
          card:
            - background-color: 'rgba(255,255,240,0.2)'

though it seems to also adjust the visibility of the other elements?

[RomRider]

You can do it this way: background-color: rgba(var(--color), 0.5); (replace the css variable with the appropriate one)

[klogg]

@pedolsky
Maybe I’m missing something but it looks like you are only using one file for button templates in this dashboard? What about if my package doesn’t use a dashboard but just a single view under ui-lovelace.yaml

e.g.

I’d like to do something like this:

title: My HA

button_card_templates:
  !include lovelace/standard_button_card_templates.yaml
  !include lovelace/package_button_card_templates.yaml

views:
  - lovelace/standard_view_1.yaml   # <- Buttons in these two standard views are based
  - lovelace/standard_view_2.yaml   #    on templates in this file.
  - lovelace/package_view.yaml      # <- Buttons in this view are based on templates in this file         
                                    #    which can be shared with the package.

@Mariusthvdb Thanks but I think that splitting out templates for a package could be useful when sharing the package. Having all templates in one file would mean splitting the file before sharing or sharing every template from my entire config.

RomRider - is there any chance/possibility that this might be something that could be made possible in the future?

[Mariusthvdb (Marius)]

@klogg

Thanks but I think that splitting out templates for a package could be useful when sharing the package

Yes, I understand that, and my whole backend is configured in packages. These of course are frontend files, and have another ‘order’.

None of the views or Lovelace-ui is are ‘packages’ after all.

added to that, lets say you have button templates for a switch, and you’d have switches in more than 1 dashboard, you’d still have to point to the templates and duplicate these for all dashboards, which would take away from the beauty of the templates in the first place…

[Mariusthvdb (Marius)]

grrr… cant make it happen:

    state:
      - value: 'on'
        id: state-on
        styles:
          card:
            - background-color: 'rgba(var(--background-color-on),1.0)'
      - value: 'off'
        id: state-off
        styles:
          card:
            - background-color: 'rgba(var(--background-color-off),0.2)'

tried unquoted too, no change, simply no background (left button)

[RomRider]

Right…
You should define another css variable then in your theme with directly the rgba value and use that other variable instead.

[pedolsky]

The image I was talking about is the background image. As I said, it is one possible way to solve the inherit-problem. No offense.

[poldim]

Does anyone know if you can condition the spin function of an icon with something? I’m trying to use a template but it’s just always spinning.

            state:
              - value: 'on'
                spin: >-
                    [[[
                      if (states['switch.heater_heat'].state == "on")
                        return "true";
                      else
                        return "false";
                    ]]]

[pedolsky]

Hey klogg, I‘m discovering yaml mode yet, but I think flexibility and possibility are vast. For the beginning, I broke everything down one by one to get a feeling for it, of course this is not mandatory.

[jarrah]

@Mariusthvdb

      - border-top: >
          [[[
            if (entity.state == 'on') return '0.5rem solid var(--button-card-light-color)';
            return null;
          ]]]

I like this new top bar colour too!

[Mariusthvdb (Marius)]

I tried it with:

  opacity-on: rgba(var(--background-color-on),0.8)
  opacity-off: rgba(var(--background-color-off),0.8)

in my theme, and

    state:
      - value: 'on'
        id: state-on
        styles:
          card:
            - background-color: var(--opacity-on)
      - value: 'off'
        id: state-off
        styles:
          card:
            - background-color: var(--opacity-off)

is that what you suggest?
even tried the main variables in the theme:

  opacity-on: rgba(var(--primary-color),0.8)
  opacity-off: rgba(var(--card-background-color),0.8)