Im trying to do a custom fields button | Home Assistant | Page 1

obtuse sail Dec 6, 2023, 10:29 PM

#

@unborn epoch (tagging you too).
So there was a couple of things wrong in your code. Like @unborn epoch mentioned, custom fields ismissing the underscore between the words. (custom_fields).
Next, custom_fields does not belong in styles. The whole section needed to be "de-indented".
Next, your icon (I don't think) will work because it should be states['light.hall_lights'].state. Also, with that, because you defined the entity for the card (light.hall_lights), here, you can simply use entity.state.

#

Lastly, the code that ended up working for the custom_field: yaml custom_fields: lfan: | [[[ return `<ha-icon icon="mdi:fan" style="width: 12px; height: 12px; color: yellow;"> </ha-icon> ${states['fan.ceiling_fan'].state}` ]]]

#

With the custom_field, you can also incorporate some IF statements to handle the icon and color so, for example, while on perhaps the icon spins and is yellow. But for off, it will be just the fan and gray.

unborn epoch Dec 6, 2023, 10:34 PM

#

Or just put it in the normal states options. If the entity is the same:)

obtuse sail Dec 6, 2023, 10:36 PM

#

There's two different entities in use. One for the light and one for the fan. I imagine there will be more custom_fields under the one currently defined.

robust scroll Dec 7, 2023, 12:13 AM

#

yes I am intending to use 2 different entities

#

actually the entity for the top right icon is a different entity

#

And is it possible to do animations for the top right icon?

#

type: custom:button-card entity: light.hall_lights name: Hall size: 100% icon: >- [[[ if (states['light.hall_lights'] == "off") return "mdi:lightbulb-outline"; else return "mdi:lightbulb" ]]] show_state: true styles: grid: - grid-template-areas: '"i i i lfan lfan" "i i i lfan lfan" "i i i l l" "s s s l l" "n n n n n"' - grid-template-columns: 1fr 1fr 1fr 1fr 1fr - grid-template-rows: 1fr 1fr 1fr 1fr custom_fields: lfan: | [[[ return <ha-icon
icon="mdi:fan"
style="width: 150px; height: 150px; color: yellow;">
</ha-icon> ]]]

#

#

what I want to achieve is like a "quick glance" button to see what services are switched on or off in the hall and I can click on the button to see more details. so there will be icons for different services like lights, fan, A/C in the same button and each icon will light up according to the state of the services.

obtuse sail Dec 7, 2023, 1:14 AM

#

robust scroll And is it possible to do animations for the top right icon?

So... I've been able to get the icon to blink which works fine and I've been able to get the icon to rotate... which does not work fine. I'm not sure what is going on but I have a feeling it has something to do with the layout grid and the placement of the icon. It doesn't spin; it does loop-de-loops...

#

type: custom:button-card
entity: light.hallway
name: Hall
size: 100%
icon: >-
  [[[ if (entity.state == "off") return "mdi:lightbulb-outline"; else return
  "mdi:lightbulb" ]]]
show_state: true
styles:
  card:
    - border-radius: 10%
  grid:
    - grid-template-areas: |
        "i i i lfan lfan" "i i i lfan2 lfan2" "i i i l l" "s s s l l" "n n n n n"
    - grid-template-columns: 1fr 1fr 1fr 1fr 1fr
    - grid-template-rows: 1fr 1fr 1fr 1fr
custom_fields:
  lfan: |
    [[[
      return `<ha-icon icon="mdi:fan"
        style="width: 12px; height: 12px; color: yellow;">
        </ha-icon> ${states['fan.ceiling_fan'].state}`
    ]]]
  lfan2: |
    [[[
      if (states['fan.ceiling_fan'].state == 'off') {
        return `<ha-icon icon="mdi:fan"
        style="width: 12px; height: 12px; color: red;">
        </ha-icon> ${states['fan.ceiling_fan'].state}`}
      if (states['fan.ceiling_fan'].state == 'on') {
        return `<ha-icon icon="mdi:fan"
        style="width: 12px; height: 12px; color: green; animation: blink 2s infinite;">
        </ha-icon> ${states['fan.ceiling_fan'].state}`}
    ]]]```

robust scroll Dec 7, 2023, 1:30 AM

#

#

in the button-card docs there is another place in styles to do it I think.

obtuse sail Dec 7, 2023, 1:31 AM

#

Yeah. That's putting stuff in the styles field which is what I'm currently playing with.

robust scroll Dec 7, 2023, 1:37 AM

#

got it!

#

type: custom:button-card entity: light.hall_lights name: Hall size: 100% icon: >- [[[ if (states['light.hall_lights'] == "off") return "mdi:lightbulb-outline"; else return "mdi:lightbulb" ]]] show_state: true styles: grid: - grid-template-areas: '"i i i lfan lfan" "i i i lfan lfan" "i i i l l" "s s s l l" "n n n n n"' - grid-template-columns: 1fr 1fr 1fr 1fr 1fr - grid-template-rows: 1fr 1fr 1fr 1fr custom_fields: lfan: - align-self: start - justify-self: start - '--text-color-sensor': |- [[[ if ((states["fan.hall_fan"].state == "on") & (states['switch.hall_fan_sw'].state == "on")){ return "blue"; } else if ((states["fan.hall_fan"].state == "off") & (states['switch.hall_fan_sw'].state == "on")){ return "white"; } else if (states['switch.hall_fan_sw'].state == "off") { return "red"; } else { return "yellow"; } ]]] - '--icon-animation': |- [[[ if ((states['fan.hall_fan'].state == "off") & (states['switch.hall_fan_sw'].state == "on")){ return 'rotation_off 1s ease-out'; } else if (states['switch.hall_fan_sw'].state == "off"){ return 'rotation_off 1s ease-out'; } else if ((states['fan.hall_fan'].state == "on") & (states['switch.hall_fan_sw'].state == "on")){ return 'rotation_on 1s linear infinite'; } else { return 'rotation_off'; } ]]]

#

custom_fields: lfan: | [[[ return <ha-icon
icon="mdi:fan"
style="width: 150px; height: 150px; color: var(--text-color-sensor); animation: var(--icon-animation);">
</ha-icon>`
]]]
extra_styles: |
@keyframes rotation_on {
from { transform:rotate(0deg); }
to { transform:rotate(360deg); }
}

@keyframes rotation_off {
from { transform:rotate(0deg); }
to { transform:rotate(180deg); }
}
`

robust scroll Dec 7, 2023, 2:04 AM

#

Thank you!🙏

#

Do they do "nested" if statements in javascript?

#

- animation: | [[[ if ((states['fan.master_fan'].state == "on") & (states['switch.master_fan_sw'].state == "on")){ if(xxxx=="x") return X; else return Y; } else if ((states['fan.master_fan'].state == "on") & (states['switch.master_fan_sw'].state == "off")){ return 'rotation_off 2s ease-out'; } else { return 'rotation_off'; } ]]]

unborn epoch Dec 7, 2023, 8:02 AM

#

If you find it hard to style loose items in the custom fields (such as a spinning icon) you could just nest custom button cards in there instead. Here I have three custom button cards nested, only showing their icon. Then you just apply the css as usual. I think that's easier.

obtuse sail Dec 7, 2023, 8:13 PM

#

Not sure why I didn't get notified of your messages from this thread. It is almost funny that you mention the nested cards because I came to the thread to mention just that. I have an example that you can adapt and do just that. Ultimately, I think it will give you more flexibility and function to go with nested cards.

#Im trying to do a custom fields button