Lovelace: Button card

[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)

[soo]

Hi!
One day i saw “button card template is missing” and noticed that code in lovelace dashboards for button_card_templates disappeared and YAML starts with

title: Home
views:

I had a backup, so I restored it, but it disappeared again and again after approx one hour. I can’t see anything in logs (I have an error log level). How can I define button_card_templates in Lovelace dashboards?

[soo]

now my dashboard looks like this
please help

[Mariusthvdb (Marius)]

small update:

using theme variables with:

  opacity-on: rgba(255,100,100,0.8)
  opacity-off: rgba(100,255,255,0.8)

works fine, proving the variable is at least set correctly and merged using the id: in the button templates.

probably should conclude (again, or, after all) that using a color variable in the rgba(), simply isn’t allowed?

[RomRider]

It is allowed if the css variable is defined as name: 123, 123, 123 which I forgot to mention in my initial message

[RomRider]

Your button-card templates are missing from your lovelace config

[Mariusthvdb (Marius)]

Now you lost me… really sorry but I don’t understand what to do.

In my theme I am merely following the main variables primary-color and card-background-color, so no where do I set the rgb numbers myself.

I can’t either, because there are several themes used, all with their own coloring set.

Please give it one more thought how I could use these ‘named’ variables with the opacity?

[RomRider]

Look, just do what works for you, there’s no one size fits all way to tackle problems in the web world.
In your post above you had something which worked for you, just use that.

[Mariusthvdb (Marius)]

well, thats just it, I haven’t found a way to use opacity on a named variable, but I’ll take it elsewhere, thanks for the support and suggestions!

for reference: I also tried, as a final option, to have the main theme colors like primary-color: set with rgb values (mine were set in hex) so to follow your last suggestion to the letter. unfortunately that doesnt help either. so for now: I haven’t found a way to use a color variable name in the rgba() construct to have it use an opacity.

[RomRider]

To recap:

1. In your theme: my-color: 123, 123, 123. Note this is not a color, it’s just 3 numbers separated by a coma.
   Use it like this: color: rgba(var(--my-color), 0.5)
2. In your theme: my-color: rgba(123, 123, 123, 0.5)
   Use it like this: color: var(--my-color)

That’s the 2 options. It’s not possible to re-use an existing color css variable you’ll have to to duplicate it.

[Mariusthvdb (Marius)]

great idea, and now I see what you said before.

copied the colors of primary-color in to a new primary variable name:

  # Main colors
  primary-color: '#1675C9'                                            # Header
  primary: 22, 117, 201

and use it like:

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

or as an intermediary theme color:

  opacity-on: rgba(var(--primary),0.8)

used as

          card:
            - background-color: var(--opacity-on))

unfortunately no such luck…

Edit:
Of course I need to select the theme…. Duh
Success! Thanks!

[soo]

@RomRider

Your button-card templates are missing from your lovelace config

please read my first message in the topic!

[RomRider]

Are you using lovelace YAML mode? If not, you might be using some custom views which rewrites the dashboard. If so it seems to be an issue with that other custom resource.

[anon36468094]

Just testing the triggers_update but it’s not working for me. The card is only updated by the entity but not form the triggers_update entity. Is there anything i’m doing wrong?

type: custom:button-card
entity: binary_sensor.voordeur
triggers_update:
  - binary_sensor.achterdeur

[RomRider]

triggers_update updates the card (which is useful if you have javascript templates) but the card doesn’t reflect the state of what is defined in triggers_update if that’s your intent.

[JM123]

Can I use an if statement to set the “top” and “left” styles? I cannot get this to work…

          - type: 'custom:button-card'
            entity: input_select.page
            style:
              top: >
                [[[
                  if (entity.state == 'Lighting') return '215px';
                  if (entity.state == 'Home') return '175px';
                  else return '500px';
                ]]]
              left: >
               [[[
                if (entity.state == 'Lighting') return '270px';
                if (entity.state == 'Home') return '175px';
                else return '500px';
               ]]]

[RomRider]

style is part of card-mod, it doesn’t support javascript templates but I believe you can use jinja2 templates with card-mod.

[JM123]

I thought so, but I was told otherwise… Card-Mod Post

I’ve tried the jinja2 templates also without success

              top: > 
                {% if is_state('input_select.tablet_page','Lighting') %} 
                  215px 
                {% else %} 
                  500px
                {% endif %}

[RomRider]

I see, this is for a picture element I guess.
The format is not correct, it should be something like:

card_mod:
  style: |
    :host {
      top: jinja here;
      left: jinja here;
    }