It should work as I’m using exactly this for my setup.
That should work:
label: >
[[[
let entityObj = states['[[entity]]']
if (entityObj.attributes && entityObj.attributes.brightness !== undefined) {
var bri = Math.round(entityObj.attributes.brightness / 2.55);
return 'Helligkeit: ' + (bri ? bri : '0') + '%';
} else {
return '';
}
]]]
Hm, I am trying it but it isn’t returning anything. Just a blank popup. This is my current code (shortened)
# lovelace_gen
type: custom:button-card
entity: {{ entity }}
and this is my template:
tap_action:
action: toggle
haptic: light
double_tap_action:
action: call-service
service: browser_mod.popup
service_data:
title: ' '
style:
.: |
:host {
--mdc-theme-surface: rgba(0,0,0,0);
--secondary-background-color: rgba(0,0,0,0);
--ha-card-background: rgba(0,0,0,0);
--mdc-dialog-scrim-color: rgba(0,0,0,0.9);
--mdc-dialog-min-height: 100%;
--mdc-dialog-min-width: 100%;
--mdc-dialog-max-width: 100%;
--paper-slider-knob-color: #FFFFFF !important;
--paper-slider-active-color: #dedede !important;
--switch-checked-button-color: #FFFFFF !important;
--switch-unchecked-button-color: #FFFFFF !important;
--switch-checked-track-color: green !important;
--switch-unchecked-track-color: red !important;
}
app-header, app-toolbar {
background-color: rgba(0,0,0,0.0) !important;
}
mwc-icon-button {
color: #FFF;
}
card:
!include
- '../../rgb_popup.yaml'
- entity: "[[[ return entity.entity_id ]]]"
deviceID:
- this
haptic: heavy
If I replace the entity in the template to a hardcoded one it works perfectly fine. (I did not try hardcoding the first entity in the button config though). Might be caused by lovelace_gen though I am not certain yet. I will play some more tonight when I get home and I’ll let you know the results.
Thanks for your great work (and thanks for the help).
wait, that doesn’t make sense. You’re passing the template, that won’t resolve on the card. can you post your rgb_popup.yaml?
EDIT: I might actually resolve, but I still want to see your card
Sure, sorry dont have a pc at the moment so I took a screenshot. It has a little more code, but it is basically just more colors.
ah ok, first problem is that you’re passing {{ entity }} to the entity field. Which means that the template won’t work because it doesn’t have an entity. It’s a chicken/egg scenario.
So how can I explain this better: the primary field that populates the ‘entity’ variable in templates is provided by the entity field. So you might have to supply 2 separate fields, the template (for all the other fields), and the entity_id.
Or, if you can explain more in full (I might have missed it) what your end goal is, I might be able to come up with a different solution. I’ve spent way too much time with lovelace_gen and these button cards its almost like second nature now.
Well without the button templates. It works fine. I will explain better later. (At the restaurant now). Thanks for your help!
Is it possible to (probably with a template?) set the friendly name of an entity as the name variable? And the label to the area in HA? Basically, I’m trying to find a way where I can use auto-entities card with button card and populate all lights from a specific room. The name should be the friendly name of the entity automatically and the label the area name where that entity is located within HA (eg Living Room). Can this be done with button card?
I’m pretty sure it’s that way by default if you set the entity: property.
I feel like an idiot. I never knew this lol. Using names on around 50 button cards lol… Thanks!
Do you know how to pass on the area where the entity is (set inside HA) to the label propery?
The entities don’t have areas, the devices do, and I don’t know whether devices are exposed via templating.
You are right, I see that now. If I create a light group within configuration.yaml (already have those anyway to control all lights per room). Then it should be possible to use the name of that group light (which is a single entity) as the label automatically with a template right?
Well I think, if you can find all of the entities in that group and check if the current entity is in that list.
Maybe its easier to create separate templates for button cards for each room and then just set the label hardcoded in each template for every room. I think that works with auto-entities as well.
As far as I know, there is no way to retrieve that from the frontend without doing api calls (Doesn’t seem to be provided though the websocket API, but I might be wrong). So unfortunately, I don’t think it’s possible for now.
That’s too bad, thanks for confirming this! I think I’ll just create separate templates for each room and set the label there per room. After the one time setup, all will be automatically either way.
Hi, I have a different question. I tried different variables, but I think I’m not having the correct code to begin with. Basically, I want to add a horizontal-stack (containing button cards) as a custom_field. That part works. However, I’m having issues with the styling. I can’t seem to position the custom_field (called it day) whatever I try as options.
styles:
card:
- background-color: var(--card-background-off)
- font-size: 12px
custom_fields:
day:
- top: 10%
grid:
- grid-template-areas: '"day" "i" "n" "l"'
- grid-template-columns: 1fr
- grid-template-rows: 1fr min-content min-content
img_cell:
- align-self: start
- text-align: start
- position: absolute
- bottom: 5px
label:
- font-size: 12px
state:
- justify-self: start
- padding-left: 10px
- text-transform: lowercase
name:
- font-weight: bold
tap_action:
action: toggle
haptic: medium
I have tried different stuff, like position: absolute but I just can’t seem to change the location of the custom_field. Basically I want that to be at the top center (above the icon). Do you see anything missing from my code?
Screenshot?
The letters in the middle is the custom_field (containing a horizontal-stack with 7 button-cards). And you see the icon, name and label there as well under eachother.
You are missing a row in your grid:
- grid-template-rows: min-content 1fr min-content min-content
Also remove:
custom_fields:
day:
- top: 10%
Thanks! That does work, however it is too much at the top. As I make my windows smaller, the card goes more to the top. On mobile it’s hard to read because it’s going out of bounds almost because of border radius on my cards. Can I set some kind of padding to the custom_fields so it’s a little more down?