Dynamic background color | Home Assistant | Page 1

inner marten Apr 4, 2024, 2:43 PM

#

I might be able to help with this. I have something similar set up but I use card-mod to do it and I use RGBA. (I'll probably convert the card-mod portion in to JS later this evening so it can be used directly in the custom:button-card but here's some code that might help until then. )

#

styles:
      card:
        - background: >-
            [[[ return "linear-gradient(to bottom, transparent 60%, " +
            variables.background_color + " 10%)" ]]]``` is the syntax to get just the linear gradient.

#

Then the card-mod way:yaml card_mod: style: | ha-card { background: rgba(255,255,255,0.1); {% if state_attr(config.entity, "color_mode") == "xy" %} {% set r = state_attr(config.entity, 'rgb_color')[0] %} {% set g = state_attr(config.entity, 'rgb_color')[1] %} {% set b = state_attr(config.entity, 'rgb_color')[2] %} background-color: rgba( {{r}}, {{g}}, {{b}}, 0.2 ); //--button-card-light-color: rgba( {{r}}, {{g}}, {{b}}, 1 ); //--button-card-light-color-no-temperature: rgba( {{r}}, {{g}}, {{b}}, 1 ); --card-mod-icon-color: rgba( {{r}}, {{g}}, {{b}}, 1 ); //--primary-text-color: rgba( {{r}}, {{g}}, {{b}}, 0.99 ); //--secondary-text-color: rgba( {{r}}, {{g}}, {{b}}, 0.50 ); {% elif state_attr(config.entity, "color_mode") == "color_temp" %} --card-mod-icon-color: yellow; --primary-text-color: white; {% elif is_state(config.entity, 'off') %} background: none; --card-mod-icon-color: rgb(28, 28, 28); --primary-text-color: rgb(128, 128, 128); {%- endif %} }there's a bunch of extra stuff in here but it is just easier to paste the whole thing.

brave crystal Apr 4, 2024, 10:37 PM

#

Thanks, very helpful!

inner marten Apr 5, 2024, 1:36 AM

#

So, I got it working. And I actually learned something new while developing this method.

Template literals (Template strings)
Template literals are literals delimited with backtick () characters, allowing for multi-line strings, string interpolation with embedded expressions, and special constructs called tagged templates. ~~This code is super-basic and still needs a bit more refinement before it is actually usable. It breaks when the light is turned off (because there's no RGB.)~~```yaml type: custom:button-card entity: light.bedroom1 triggers_update: all name: | [[[ if (entity.state == "on") { var entity = "light.bedroom1"; var a = states[entity].attributes; var r = a.rgb_color[0]; var g = a.rgb_color[1]; var b = a.rgb_color[2]; return rgba(${r},${g},${b},1); } else return "none"; ]]] styles: card: - background-color: | [[[ if (entity.state == "on") { var a = entity.attributes; var r = a.rgb_color[0]; var g = a.rgb_color[1]; var b = a.rgb_color[2]; return rgba(${r},${g},${b},1)`;
}
else return "none";
]]]```Note the two methods of calling which entity is to be used; name & background-color are different. Name shows calling a (potentially) different entity; background-color uses the entity defined in the card.
EDIT: Code updated to handle state to prevent breaking when the light is off.

brave crystal Apr 5, 2024, 2:07 AM

#

Yeah nice. I guess just need some logic for a fallback color when it's off. Should be pretty easy to work around.

inner marten Apr 5, 2024, 2:33 AM

#

Code updated to handle state.

brave crystal Apr 5, 2024, 6:20 AM

#

Thanks for your help. This is where I've ended up with a nice little dynamic gradient that mutes some of the color (drops saturation), and reduces brightness significantly over the gradient.

        [[[
          if (entity.state == 'on') {
            var hue = entity.attributes.hs_color[0];
            var sat = (entity.attributes.hs_color[1])*0.75;
            var val = (entity.attributes.brightness/255)*100;
            return `linear-gradient(15deg, hsl(${hue},${sat*0.6}%,${val*0.3}%), hsl(${hue},${sat}%,${val}%) 100%)`;
          } else {
            return 'none';
          }
        ]]]

#

Now I just need to work out how the hell grid layout/absolute positioning works and how to add additional cards in there similar to the room cards in the Minimalist UI pack.

nova haven Apr 22, 2024, 11:09 PM

#

@inner marten I was wondering if you would be able to help with this but with images instead? This is what I have so far, but can't get it to work.

views:
  - title: Clock
    cards:
      - type: custom:button-card
        variables:
          var_background_img: sensor.viewassist_backgrounds
        styles:
          card:
            - background: >
                [[[
                   var b_img = states[variables.var_background_img].state;
                   return 'center / cover no-repeat url(${b_img})' 
                ]]]

#

The entity 'sensor.viewassist_backgrounds' is a template sensor that picks a random file in a folder. Here is what the state is when grabbing via jinja2
{{ states.sensor.viewassist_backgrounds.state }} = "/local/viewassist/backgrounds/cuddy-buzz-1.jpg"

brave crystal Apr 22, 2024, 11:38 PM

#

Two potential things there: missing semicolon on your return line, meaning it's not a valid JS line, and I believe /local/ is remapped to /www/ for external access.

nova haven Apr 22, 2024, 11:46 PM

#

Added the smicolon to the bottom line, and it still doesn't show the image.
If I replace ${b_img} with the state of the entity '/local/viewassist/backgrounds/cuddy-buzz-1.jpg', it shows up as expected on the dashboard

nova haven Apr 23, 2024, 2:06 AM

#

Figured it out. Need to change this section under card.

            - background: >-
                [[[ return "center / cover no-repeat url(" + states[variables.var_background_img].state + ")";
                ]]]

#Dynamic background color