Help with decluttering card | Home Assistant | Page 1

marsh fulcrum Jul 23, 2024, 7:33 AM

#

What does your light template look like? You've provided the variables used but not the actual template/card that is supposed to be rendered.
My assumption is whatever card you're using doesn't like HSL and you might need to use RGB.

golden inlet Jul 23, 2024, 1:29 PM

#

marsh fulcrum What does your `light` template look like? You've provided the variables used bu...

‘’’

light:
card:
type: custom:bubble-card
card_type: button
button_type: switch
entity: '[[entity]]'
name: '[[name]]'
button_action:
tap_action:
action: toggle
show_state: '[[show_state]]'
show_last_changed: '[[show_last_changed]]'
icon: '[[icon]]'
columns: '[[columns]]'
card_layout: '[[layout]]'
card_mod:
style: |
bubble-button-card-container {
background-color: ${hass.states['light.apollo_mtr_1_cdb314_rgb_light'].state === 'on' ? hass.states['light.apollo_mtr_1_cdb314_rgb_light'].attributes.rgb_color : 'red'} !important;
}
bubble-icon {
color: ${state === 'on' ? '[[on-color]]' : state === 'off' ? 'var(--error-color)' : 'var(--warning-color)'} !important;
opacity: 0.6 !important;
}
‘’’

#

I tried multiple options for the bubble button card container

#

Doesn’t like setting it to the state of an entity color it seems.

candid sundialBOT Jul 23, 2024, 7:44 PM

#

To format your text as code, enter three backticks on the first line, press Enter for a new line, paste your code, press Enter again for another new line, and lastly three more backticks.
```yaml
example: here
```
Don't forget you can edit your post rather than repeatedly posting the same thing.

golden inlet Jul 23, 2024, 8:19 PM

#

I tried doing it on mobile

#

Didn’t work so well.

#

Don’t think my phone even has that

marsh fulcrum Jul 24, 2024, 1:00 AM

#

Was looking at your code and I think the issue might be with the template strings. I'm at work right now so I can't really test it but I think the ${ stuff } need to have a backtick at the beginning and end.
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals

#

It is the same character used to format code like Tinkerer mentioned. It is a backtick and not a single quotation mark.

golden inlet Jul 24, 2024, 2:22 AM

#

        .bubble-button-card-container {
          background-color: "{{ state_attr('light.apollo_mtr_1_cdb314_rgb_light', 'rgb_color') }}";
        }

#

this doesnt work either 😦

marsh fulcrum Jul 24, 2024, 2:44 AM

#

Your last bit of code looks less likely to work than the first one. I'll look at it when I get home. Overall, the concept looks like it should work. It is just a matter of getting the syntax to work.

golden inlet Jul 24, 2024, 2:47 AM

#

{{ state_attr('light.apollo_mtr_1_cdb314_rgb_light', 'rgb_color')[0], state_attr('light.apollo_mtr_1_cdb314_rgb_light', 'rgb_color')[1], state_attr('light.apollo_mtr_1_cdb314_rgb_light', 'rgb_color')[2]}}

https://i.imgur.com/3K94OTe.png

im trying it in the template editor thing and its outtping this..

#

which needs to be in the format of rgb(255, 255, 255), not

I tried using | join(',') and its still not coming out right.

#

Crazy? I was crazy once. They locked me in a jinja syntax. Jinja syntax makes me crazy

#

#

so if I join with : it works fine but if I put a COMMA its like NOOOOOOOOOOPE

#

#

what a pain in the dk

golden inlet Jul 24, 2024, 3:14 AM

#

marsh fulcrum Your last bit of code looks less likely to work than the first one. I'll look at...

When will u be home? 😢

marsh fulcrum Jul 24, 2024, 3:59 AM

#

golden inlet When will u be home? 😢

Probably not for another hour or two.
In the mean time, take a look at this example that I wrote up that uses card_mod for a different usage.
Card modding a button card to reflect the background as light's RGB. You might be able to adapt this instead.

golden inlet Jul 24, 2024, 4:08 AM

#

JESUS, FINALLY

#

that is way too unnecessarily complex

#

is there really no better way to do that??

      card_mod:
        style: |
          .bubble-button-card-container {
            {% set r = state_attr('[[entity]]', 'rgb_color')[0] %}
            {% set g = state_attr('[[entity]]', 'rgb_color')[1] %}
            {% set b = state_attr('[[entity]]', 'rgb_color')[2] %}
            background: rgba({{r}}, {{g}}, {{b}}, 1);
          }
          .bubble-icon {
            color: ${state === 'on' ? '[[on-color]]' : state === 'off' ? 'var(--error-color)' : 'var(--warning-color)'} !important;
            opacity: 0.6 !important;
          }

#

thats so jank

wild axle Jul 24, 2024, 1:29 PM

#

not sure why you are making this so complex: card_mod: style: | ha-card { background: rgba( {{state_attr(config.entity, 'rgb_color')|join(',')}}, 0.1 ); }

#

did you give that a test at all?

Schermafbeelding_2024-07-24_om_15.29.56.png

marsh fulcrum Jul 24, 2024, 1:55 PM

#

wild axle not sure why you are making this so complex:``` card_mod: style: | ha-card...

He's using a Bubble Card. It does not follow the standard styling. background for this card is actually behind the card (shown in the screenshot in red).
I've been messing with it for the past two or three hours trying to do something a bit simpler but it keeps fighting me. It has its own styling capability which is similar to card_mod but different. Tried the card_mod method. Can get the RGB from the light into the card's background but when the state is off it defaults to rgb(255,200,200) which I cannot seem to get around. Looking at the internal styling now but there seems to be an issue with its own internal entity variable.

golden inlet Jul 24, 2024, 1:57 PM

#

golden inlet is there really no better way to do that?? ```yaml card_mod: styl...

This is working btw it’s just long and complicated

marsh fulcrum Jul 24, 2024, 2:02 PM

#

Your original code set and off state as red. You don't have that currently, right? Because if you can do without the red, then I can be done with with I've been working on and share it.

golden inlet Jul 24, 2024, 2:04 PM

#

I was just doing that for testing.

I’m using bubble and declitrering. If the entity supports color and is a light, use that value. Otherwise use the primary green for on/res for off

#

Decluttering**

wild axle Jul 24, 2024, 2:18 PM

#

marsh fulcrum He's using a Bubble Card. It does not follow the standard styling. `background` ...

yeah, I tested it on type button, but my main suggestion here is the card_mod template itself, which is card agnostic if the correct element is found. Sure, it might need a guard for being off, other than that, no need to first separate the individual r-g-b's and next put them verbosely together again?

#

seems Nitro is handling this the reverse way. Always start with a pure and simple card, figure out all details, and then and only then move the repetetive parts to either a config template, or maybe decluttering. Never start with decluttering unless you know the intricasies

marsh fulcrum Jul 24, 2024, 2:20 PM

#

{{ 'rgb' + config.entity.attributes.rgb_color | string }} worked for simgple RGB in card_mod.

wild axle Jul 24, 2024, 2:22 PM

#

yep, I prefer the state_attr() though, as it is safer for unknowns

Schermafbeelding_2024-07-24_om_16.22.06.png

#

see Warning just above https://www.home-assistant.io/docs/configuration/templating/#states-examples

golden inlet Jul 24, 2024, 2:25 PM

#

I’m using state cards instead of the actual switch cards because switch ones automatically change the background color to undesirable colors

wild axle Jul 24, 2024, 2:25 PM

#

no idea what you mean by that tbh (state card/ switch card)

#

anyways, feel free to make it as complex as you desire 😉

marsh fulcrum Jul 24, 2024, 2:27 PM

#

wild axle seems Nitro is handling this the reverse way. Always start with a pure and simpl...

I disagree. The problem is actually in the documentation and the difference in styling between stock cards and what most custom card use. His code probably would have worked properly but, like I mentioned earlier, there is a problem with the card's entity variable. Because I can get it work if I don't use that variable. yaml styles: | .bubble-button-background { opacity: 1 !important; background-color: ${state === 'on' ? hass.states['light.living_room_lights'].attributes.rgb_color : 'none'} !important; }Also, his original code was in a card_mod block which is not what the internal styling uses. In the screenshot below, you can see that the card tries to use a background of 'none' but then reverts back to rgb(255,200,200).

#

There's even an example in the doc for what he was trying to do but it technically doesn't work in the since of the 'red' color. He just needed to get the RGB plugged into where the example has 'blue'.

golden inlet Jul 24, 2024, 2:30 PM

#

wild axle Jul 24, 2024, 2:30 PM

#

that indeed is very ugly. I never understand why custom card devs use their own methods, and not default to what is used throughout HA. Either Jinja or JS, and use the states in HA

#

above seems like a complex way of what eg button-card does, or custom js in custom-ui for that matter. a pure and simple ternary on the available states background-color: > [[[ return state === 'on' ? states['light.living_room_lights'].attributes.rgb_color : 'none';]]]

#

and yet, this illustrates what I said on the order of things: first get it right in a stand alone card, and if must be, after that start moving to a configuration template or decluttering. And yes, if the card doesnt use the entity variable as it should, an issue could be raised there, it would benefit the acceptance of the card if it did don't you think?

marsh fulcrum Jul 24, 2024, 2:36 PM

#

Yeah. I was trying to wrap my head around how the styling is done and it was making my brain hurt. There is an open issue requesting better variables (or at least more than the single one available. That could help a lot but that could be a major re-write to incorporate that.

#

if the card doesnt use the entity variable as it should, an issue could be raised there, it would benefit the acceptance of the card if it did don't you think?
I went looking to see if there was an open issue but did not find anything regarding the variables. Haven't looked at closed stuff yet.

golden inlet Jul 24, 2024, 2:37 PM

#

I guess I’ll just run it how I have it now because it is working at least…

wild axle Jul 24, 2024, 2:37 PM

#

tbh, I briefly glimpsed (even check the community thread now and then) at bubble card, and quickly figured I had no use for it... even though the looks are cool

golden inlet Jul 24, 2024, 2:38 PM

#

I like it

#

Still wip..

wild axle Jul 24, 2024, 2:39 PM

#

golden inlet I like it

no you dont #1265141521750163517 message

golden inlet Jul 24, 2024, 2:39 PM

#

The issue is decluttering card I think

wild axle Jul 24, 2024, 2:39 PM

#

golden inlet Still wip..

sure, but that doesnt require yet another custom card on the block

golden inlet Jul 24, 2024, 2:39 PM

#

?

wild axle Jul 24, 2024, 2:40 PM

#

I mean we can do that without bubble card

#

but again, it looks cool https://github.com/Clooos/Bubble-Card

#

minimalist and customizable....

golden inlet Jul 24, 2024, 2:42 PM

#

Simple

wild axle Jul 24, 2024, 2:44 PM

#

and yet you are here

#

having very complex issues with configuring this simple card, that does not adhere to HA standards

#

its a bit like Minimalist https://ui-lovelace-minimalist.netlify.app/usage/custom_card_list, the looks are nice and simple, really slick, with endless soptions, the config however is not so simple and sometimes called Maximalist

golden inlet Jul 24, 2024, 2:48 PM

#

Got any other recommendations..?

wild axle Jul 24, 2024, 2:53 PM

#

no such thing as coincidence.... #frontend-archived message

golden inlet Jul 24, 2024, 2:55 PM

#

Wdym

#Help with decluttering card