ok, answering to myself here, for reference, and some followup:
Appeared there was a space in the attribute I hadn’t noticed, so the split had to be at that space, and not the semi-colon. Also, since the split is now made on the space, the ending semi colon appears in the output, so I need to cut-off that also, which leads to this
entity.attributes.awareness_level.split(’ ')[1].slice(0,-1)
and the Button is starting to be useful:
the icon is a bit of a hack for now and I will work on that later. First, Id like to have the custom_field for Level, which now is:
level: >
[[[
return `<ha-icon
icon=${'mdi:numeric-' + entity.attributes.awareness_level.split(';')[0] + '-box'}
style='width: 12px; height: 12px;'>
</ha-icon><span>Level: <span style='color: var(--text-color-sensor);'>${entity.attributes.awareness_level.split(' ')[1].slice(0,-1)}</span></span>`
]]]
use a var somehow to make it more readable, and to caplitalize the first letter. A bit like this:
level:
- padding-bottom: 2px
- align-self: middle
- justify-self: start
- --text-color-sensor: >
[[[ return entity.attributes.awareness_level.split(';')[1]; ]]]
- --color-name: >
[[[function capitalizeFirstLetter(string) {
return string.charAt(0).toUpperCase() + string.slice(1).toLowerCase();
}
var id = entity.attributes.awareness_level.split(' ')[1].slice(0,-1);
return capitalizeFirstLetter(id);]]]
no matter what I try though, I cant get it to show in the button using the var(–color-name) in the custom_field config. Please help and see what I could do to use that?
to proof the template itself is correct, Ive tested it in the name field for the button:
