Lovelace: Button card

Newcomers · October 11, 2023, 12:25pm

Hi,

I have a custom button with a light as the entity. When the light is off, I would like the state to show as off (which it does) but when the light is on, I would like the state to show the brightness level. I have the code below but it still just shows the state as on instead of brightness level. I know the state display is being called because if I change the variable to text, it changes. Any ideas?

          state:
              - operator: template
                value: >
                  [[[ return states['light.living_room_wall_lights'].state ==
                  'on' ]]]
                state_display: '[[[ entity.attributes.brightness ]]]'

Mats789 · October 11, 2023, 3:14pm

state:
  - value: 'on'
    state_display: |
      [[[
        if (entity.state == 'on' && entity.attributes.brightness)
        return (Math.round(entity.attributes.brightness / 2.55)) + ' %';
        else
        return 'On'
      ]]]

Newcomers · October 15, 2023, 8:46pm

does anyone know how to use the or statement within this card?

I need either of these to be true:

   value: |
      [[[
        return (states['sensor.wiser_heating'].state === 'On')
      ]]]

   value: |
      [[[
        return (states['sensor.wiser_heating_2'].state === 'On')
      ]]]

flobidan · October 17, 2023, 6:24am

And what if both are true? If this can’t be the case, then why not just use if…elseif…

I have e.g. in one card:

      - color: |-
          [[[ 
            if (states["weather.openweathermap"].attributes["wind_speed"] >
            30) return "red";  else if
            (states["weather.openweathermap"].attributes["wind_speed"] > 20)
            return "orange";
            else return "black";
          ]]]

Or for multiple alternatives where there can always only be one hit:

entity_picture: |
  [[[          
    if (states["sensor.openweathermap_condition"].state == "sunny") return "/local/img/weather_animated/day.svg";
    if (states["sensor.openweathermap_condition"].state == "clear-night") return "/local/img/weather_animated/night.svg";
    if (states["sensor.openweathermap_condition"].state == "partlycloudy") return "/local/img/weather_animated/cloudy-day-2.svg";
    if (states["sensor.openweathermap_condition"].state == "cloudy") return "/local/img/weather_animated/cloudy.svg";
    if (states["sensor.openweathermap_condition"].state == "fog") return "/local/img/weather_animated/cloudy.svg";
    if (states["sensor.openweathermap_condition"].state == "rainy") return "/local/img/weather_animated/rainy-5.svg";
    if (states["sensor.openweathermap_condition"].state == "pouring") return "/local/img/weather_animated/rainy-6.svg";
    if (states["sensor.openweathermap_condition"].state == "lightning") return "/local/img/weather_animated/thunder.svg";
    if (states["sensor.openweathermap_condition"].state == "lightning-rainy") return "/local/img/weather_animated/rainy-6.svg";
    if (states["sensor.openweathermap_condition"].state == "snowy") return "/local/img/weather_animated/snowy-6.svg";
    else return "/local/img/weather_animated/weather.svg";
  ]]]

0la1 · October 19, 2023, 2:27pm

Hi,

does someone has a clue why I get this error:

With this code:

    - type: vertical-stack
      cards:
        - type: "custom:button-card"
          template:
            - card_scenes
          variables:
          entity_1:
            entity_id: script.1697722111760
            icon: mdi:netflix
            name: "Netflix"

from this custom card?

https://ui-lovelace-minimalist.github.io/UI/usage/custom_cards/custom_card_scenes/

arganto · October 19, 2023, 5:32pm

Hm. I don’t use it, but try to compare the example from your link

  variables:
    entity_1:
      entity_id: "scene.YOUR_SCENE"

with your

          variables:
          entity_1:
            entity_id: script.1697722111760

0la1 · October 22, 2023, 12:22pm

The issue was that you must have five entities and I tried it with one only. Once I defined the fith entity, it worked.

arganto · October 22, 2023, 2:11pm

No. Perhaps as well. But the main problem was that your indention was wrong as pointed to.

fich · October 28, 2023, 8:55pm

Hi, trying to figure out if there is a way to set colors using css? Feels like there is something I’m missing and after too many hours spent on finding out what, I hope someone can help.

to show a basic example:

type: custom:button-card
styles:
  card:
  - background-color: teal

What I would like to do is use a color from theme/css, or whatever that works

I seem to be able to use css-variables from some themes, but not from my own theme, or what seems like, none of the themes I have downloaded (from hacs) myself.

so, what am I missing?

Ildar_Gabdullin · October 28, 2023, 9:13pm

Here is how to use a color (or any other value) defined in a theme (standard or custom):

if this is what you asked for…

fich · October 28, 2023, 9:40pm

yes, except that I can’t get it to work for my own theme…

this is from the theme-file:

 my_mushroom:

  mush-rgb-red: 244, 67, 54

and then:

type: custom:button-card
styles:
  card:
    - background-color: var(--mush-rgb-red)

And that will not work.
my_mushroom is the theme I use globaly

What am I missing???

Ildar_Gabdullin · October 28, 2023, 9:48pm

Why you have a color defined as “244,67,54” instead of normal “rgb(244,67,54)” ?

fich · October 28, 2023, 10:08pm

that’s what happens when you copy an existing theme and stop thinking

but still not working as I would like.

trying a bit more.
in theme-file:

my_mushroom:
  # Home Assistant override
  text-color: "#fff1cce6"
---
  color1: "#fff1cce6"

this works:

type: custom:button-card
styles:
  card:
    - background-color: var(--text-color)

but not this:

type: custom:button-card
styles:
  card:
    - background-color: var(--color1)

does this mean I can only use css-variables that overrides existing variables? wow, that makes it not so useful, I guess

in that case, is there any other way to define your own css-variables?

Ildar_Gabdullin · October 28, 2023, 10:21pm

I have plenty of my own vars and they are used.

test_minimal:
  some-fake-var: rgba(255,255,0,0.5)
  some-fake-var2: rgba(255,0,255,0.5)

  - type: horizontal-stack
    cards:
      - type: custom:button-card
        styles:
          card:
            - background-color: cyan
      - type: custom:button-card
        styles:
          card:
            - background-color: var(--accent-color)
      - type: custom:button-card
        styles:
          card:
            - background-color: var(--some-fake-var)
      - type: custom:button-card
        styles:
          card:
            - background-color: var(--some-fake-var2)

What the “—” string is doing in your theme code?

fich · October 28, 2023, 10:37pm

oh, the — was just me overthinking it… to show that it wasn’t an override…

but problem solved, so many hours spent on missing one of the fundamentals, so if anyone else is stupid enough to do stuff when you are way to tired, here it comes:

DON’T FORGET TO RELOAD THEMES AFTER CHANGES!!!

thanks for the help anyway, you did help!

Krivatri · October 29, 2023, 9:00am

Hi all,
question: is it possible to transition an icon animation?
for example: a fan has 2 speeds, when the speed changes from low to high or vice versa, can this change gradually instead of instant? (like a slow down or a speed up)

this is the code I’m currently using to change the rotating speed of the spinning fan animation:

styles:
   icon:
     - animation: |
         [[[
           var a = entity.state;
           var b = states['binary_sensor.ventilation_low'].state;
           var c = states['binary_sensor.ventilation_high'].state;
           if (a == 'on' && b == 'on') return 'rotating 2s linear infinite'; 
           if (a == 'on' && c == 'on') return 'rotating 1s linear infinite'; 
           else return 'rotating 0s linear infinite';
         ]]]

simphi · October 29, 2023, 2:25pm

Does somebody else using button cards have a problem when scrolling “over a button” via a mobile device? (see Visual bug when scrolling over button via app/mobile device · Issue #793 · custom-cards/button-card · GitHub)

I am sure it wasn’t like that in the past…

Thank you in advance…

Edit: Seems to be Safari/iOS/macOS related. Can somebody confirm?

fich · October 30, 2023, 12:00pm

check out this channel on youtube, he pretty much shows you everthing you can do re animation, and he is using a fan as example

There are so many options and can’t answer right away if it will do as you want, but seems like it should…

playlist button card

Krivatri · October 31, 2023, 7:06am

thx for the link fich,
I did look at this channel before, but could not find what I was looking for unfortunately.

fich · October 31, 2023, 12:24pm

I had to look through all of them more than once before finding all I looked for, they are packed!

BTW, could ease-in-out instead of linear do what you are looking for?