How can i display entity name if its single entity name from group like this ?
and if multiple then like this
I’ve used decluttering card to achieve this but its its lot of work, doesn’t work properly on mobile and i want to display them as badge
Very difficult to answer given that you have not told us anything about the custom card you are using to create these non standard icons or provided any configuration.
decluttering card with custom templates
here is the card
type: vertical-stack
cards:
- type: grid
columns: 4
square: false
cards:
- type: 'custom:decluttering-card'
template: badge_persons_button
variables:
- name: Presence
- type: 'custom:decluttering-card'
template: badge_lights_button
variables:
- name: Lights
- type: 'custom:decluttering-card'
template: badge_motion_button
variables:
- name: Motion
template -
decluttering_templates:
badge_lights_button:
default:
- entity: sensor.number_of_lights_on
- name: Lights
- icon: 'mdi:lightbulb'
- background_color: var(--button-card-on-background)
- text_color: var(--button-card-on-text-color)
- svg_path: >-
M12,2A7,7 0 0,0 5,9C5,11.38 6.19,13.47 8,14.74V17A1,1 0 0,0
9,18H15A1,1 0 0,0 16,17V14.74C17.81,13.47 19,11.38 19,9A7,7 0 0,0
12,2M9,21A1,1 0 0,0 10,22H14A1,1 0 0,0 15,21V20H9V21Z
- svg_fill_on: var(--paper-item-icon-active-color)
- svg_path_on: >-
M 12,2 C 8.1340068,2 5,5.1340068 5,9 c 0,2.38 1.19,4.47 3,5.74 V 17 c
0,0.552285 0.4477153,1 1,1 h 6 c 0.552285,0 1,-0.447715 1,-1 V 14.74 C
17.81,13.47 19,11.38 19,9 19,5.1340068 15.865993,2 12,2
- cust_1_text_color: var(--button-card-cust-1-on-text-color)
- state:
- value: '0'
styles:
card:
- color: var(--button-card-text-color)
custom_fields:
svg_icon:
- '--paper-item-icon-active-color': var(--paper-item-icon-color)
- background-color: var(--button-card-background-color)
cust_1:
- color: var(--button-card-cust-1-text-color)
- value: unavailable
styles:
icon:
- color: var(--button-card-disabled-text-color)
name:
- color: var(--button-card-disabled-text-color)
custom_fields:
svg_icon:
- '--paper-item-icon-active-color': var(--button-card-disabled-text-color)
cust_1:
- color: var(--button-card-disabled-text-color)
card:
type: 'custom:decluttering-card'
template: badge_button_svg
variables:
- entity: '[[entity]]'
- name: '[[name]]'
- icon: '[[icon]]'
- svg_fill: '[[svg_fill]]'
- svg_path: '[[svg_path]]'
- svg_fill_on: '[[svg_fill_on]]'
- svg_path_on: '[[svg_path_on]]'
- color: '[[color]]'
- color_type: '[[color_type]]'
- background_color: '[[background_color]]'
- text_color: '[[text_color]]'
- text_transform: none
- cust_1_text_color: '[[cust_1_text_color]]'
- cust_1_icon_color: '[[cust_1_icon_color]]'
- cust_1_field: >-
[[[ if ( entity.state == '0' ) return 'Off'; else if ( entity.state
== '1' ) return states['sensor.only_light_on'].state + ' Light On';
else return entity.state + ' Lights On'; ]]]
- state: '[[state]]'
- hold_action:
action: more-info
- tap_action:
action: fire-dom-event
browser_mod:
command: popup
hide_header: false
title: '[[name]]'
large: true
card:
type: vertical-stack
cards:
- type: horizontal-stack
cards:
- type: 'custom:button-card'
template: shoulder_blank_card
- type: 'custom:layout-card'
min_columns: 1
max_columns: 3
cards: null
- type: 'custom:button-card'
template: shoulder_blank_card
badge_button_svg:
default:
- cust_1_field: ''
- cust_2_field: ''
- corner_field: ''
- corner_2_field: ''
- color: auto
- color_type: icon
- lock:
enabled: false
duration: 5
unlock: tap
- state:
- value: 'on'
styles:
card:
- color: var(--button-card-on-text-color)
custom_fields:
cust_1:
- color: var(--button-card-cust-1-on-text-color)
- background-color: var(--button-card-on-background)
- value: unavailable
styles:
icon:
- color: var(--button-card-disabled-text-color)
name:
- color: var(--button-card-disabled-text-color)
custom_fields:
svg_icon:
- '--button-card-light-color-no-temperature': var(--button-card-disabled-text-color)
cust_2:
- color: var(--button-card-disabled-text-color)
- border_radius: var(--button-card-border-radius)
- background_color: var(--button-card-background-color)
- text_color: var(--button-card-text-color)
- corner_text_color: var(--button-card-corner-text-color)
- text_transform: capitalize
- corner_2_text_color: var(--button-card-corner-text-color)
- cust_1_text_color: var(--button-card-cust-1-text-color)
- cust_2_text_color: var(--button-card-cust-2-text-color)
- lock_color: var(--button-card-lock-color)
- svg_fill: var(--button-card-svg-off-color)
- svg_fill_on: var(--button-card-light-color-no-temperature)
card:
type: 'custom:button-card'
style: |
ha-card {
background: none;
box-shadow: none;
}
entity: '[[entity]]'
icon: '[[icon]]'
aspect_ratio: 4/6
show_name: false
show_icon: false
color: '[[color]]'
color_type: '[[color_type]]'
show_last_changed: false
lock: '[[lock]]'
styles:
card:
- padding: 8%
- font-size: 12px
- font-weight: bold
- text-transform: '[[text_transform]]'
- border-radius: '[[border_radius]]'
- color: '[[text_color]]'
- box-shadow: none;
grid:
- grid-template-areas: '"svg_icon" "cust_1"'
- grid-template-rows: 4fr 2fr
custom_fields:
svg_icon:
- display: flex
- justify-content: center
- align-items: center
- align-self: center
- justify-self: center
- margin: none
- height: 50%
- width: 50%
- padding-bottom: 20.4%
- padding-top: 20.4%
- padding-left: 22%
- padding-right: 22%
- background-color: '[[background_color]]'
- border-radius: 50%
- aspect_ratio: 1/1
cust_1:
- line-height: 15px
- height: 29px
- overflow: hidden
- text-overflow: ellipsis
- display: '-webkit-box'
- '-webkit-box-orient': vertical
- '-webkit-line-clamp': 2
- justify-content: center
- align-items: self-start
- align-self: normal
- place-self: normal
- padding-top: 4px
- padding-bottom: 2px
- align-self: center
- justify-self: center
- color: '[[cust_1_text_color]]'
- '--icon-color-sensor': '[[cust_1_icon_color]]'
- white-space: unset
- word-break: break-word
custom_fields:
svg_icon: >-
[[[ const state = entity.state === 'on' ? 'animate' : null; return
`<svg viewBox='0 0 24 24'> <path fill='[[svg_fill]]'
d='[[svg_path]]'/> <path class='${state}' fill='[[svg_fill_on]]'
d='[[svg_path_on]]'/> </svg>`; ]]]
cust_1: '[[cust_1_field]]'
tap_action: '[[tap_action]]'
hold_action: '[[hold_action]]'
double_tap_action: '[[double_tap_action]]'
state: '[[state]]'
badge_persons_button:
default:
- entity: sensor.number_of_persons_home
- name: Presence
- icon: 'mdi:account-circle'
- background_color: var(--button-card-on-background)
- text_color: var(--button-card-on-text-color)
- svg_path: >-
M12,19.2C9.5,19.2 7.29,17.92 6,16C6.03,14 10,12.9 12,12.9C14,12.9
17.97,14 18,16C16.71,17.92 14.5,19.2 12,19.2M12,5A3,3 0 0,1 15,8A3,3 0
0,1 12,11A3,3 0 0,1 9,8A3,3 0 0,1 12,5M12,2A10,10 0 0,0 2,12A10,10 0
0,0 12,22A10,10 0 0,0 22,12C22,6.47 17.5,2 12,2Z
- svg_fill_on: var(--paper-item-icon-active-color)
- svg_path_on: >-
M12,19.2C9.5,19.2 7.29,17.92 6,16C6.03,14 10,12.9 12,12.9C14,12.9
17.97,14 18,16C16.71,17.92 14.5,19.2 12,19.2M12,5A3,3 0 0,1 15,8A3,3 0
0,1 12,11A3,3 0 0,1 9,8A3,3 0 0,1 12,5M12,2A10,10 0 0,0 2,12A10,10 0
0,0 12,22A10,10 0 0,0 22,12C22,6.47 17.5,2 12,2Z
- cust_1_text_color: var(--button-card-cust-1-on-text-color)
- state:
- value: '0'
styles:
card:
- color: var(--button-card-text-color)
custom_fields:
svg_icon:
- '--paper-item-icon-active-color': var(--paper-item-icon-color)
- background-color: var(--button-card-background-color)
cust_1:
- color: var(--button-card-cust-1-text-color)
- value: unavailable
styles:
icon:
- color: var(--button-card-disabled-text-color)
name:
- color: var(--button-card-disabled-text-color)
custom_fields:
svg_icon:
- '--paper-item-icon-active-color': var(--button-card-disabled-text-color)
cust_1:
- color: var(--button-card-disabled-text-color)
card:
type: 'custom:decluttering-card'
template: badge_button_svg
variables:
- entity: '[[entity]]'
- name: '[[name]]'
- icon: '[[icon]]'
- svg_fill: '[[svg_fill]]'
- svg_path: '[[svg_path]]'
- svg_fill_on: '[[svg_fill_on]]'
- svg_path_on: '[[svg_path_on]]'
- color: '[[color]]'
- color_type: '[[color_type]]'
- background_color: '[[background_color]]'
- text_color: '[[text_color]]'
- text_transform: none
- cust_1_text_color: '[[cust_1_text_color]]'
- cust_1_icon_color: '[[cust_1_icon_color]]'
- cust_1_field: >-
[[[ if ( entity.state == '0' ) return 'Nobody Home'; else if (
entity.state == '1' ) return states['sensor.only_person_home'].state
+ ' Home'; else return entity.state + ' Persons Home'; ]]]
- state: '[[state]]'
- hold_action:
action: more-info
- tap_action:
action: fire-dom-event
browser_mod:
command: popup
hide_header: false
title: '[[name]]'
large: false
card:
type: vertical-stack
cards:
- type: horizontal-stack
cards:
- type: 'custom:button-card'
template: shoulder_blank_card
- type: 'custom:layout-card'
min_columns: 1
max_columns: 3
cards: null
- type: 'custom:button-card'
template: shoulder_blank_card
badge_motion_button:
default:
- entity: sensor.number_of_motion_sensors_on
- name: Lights
- icon: 'mdi:run'
- background_color: var(--button-card-on-background)
- text_color: var(--button-card-on-text-color)
- svg_path: >-
M16.5,5.5A2,2 0 0,0 18.5,3.5A2,2 0 0,0 16.5,1.5A2,2 0 0,0 14.5,3.5A2,2
0 0,0
16.5,5.5M12.9,19.4L13.9,15L16,17V23H18V15.5L15.9,13.5L16.5,10.5C17.89,12.09
19.89,13 22,13V11C20.24,11.03 18.6,10.11 17.7,8.6L16.7,7C16.34,6.4
15.7,6 15,6C14.7,6 14.5,6.1
14.2,6.1L9,8.3V13H11V9.6L12.8,8.9L11.2,17L6.3,16L5.9,18L12.9,19.4M4,9A1,1
0 0,1 3,8A1,1 0 0,1 4,7H7V9H4M5,5A1,1 0 0,1 4,4A1,1 0 0,1
5,3H10V5H5M3,13A1,1 0 0,1 2,12A1,1 0 0,1 3,11H7V13H3Z
- svg_fill_on: var(--paper-item-icon-active-color)
- svg_path_on: >-
m 16.5,5.5 c 1.104569,0 2,-0.8954305 2,-2 0,-1.1045695 -0.895431,-2
-2,-2 -1.104569,0 -2,0.8954305 -2,2 0,1.1045695 0.895431,2 2,2 m
-3.6,13.9 1,-4.4 2.1,2 v 6 h 2 v -7.5 l -2.1,-2 0.6,-3 C 17.89,12.09
19.89,13 22,13 V 11 C 20.24,11.03 18.6,10.11 17.7,8.6 L 16.7,7 C
16.34,6.4 15.7,6 15,6 14.7,6 14.5,6.1 14.2,6.1 L 9,8.3 V 13 h 2 V 9.6
l 1.8,-0.7 -1.6,8.1 -4.9,-1 -0.4,2 7,1.4
- cust_1_text_color: var(--button-card-cust-1-on-text-color)
- state:
- value: '0'
styles:
card:
- color: var(--button-card-text-color)
custom_fields:
svg_icon:
- '--paper-item-icon-active-color': var(--paper-item-icon-color)
- background-color: var(--button-card-background-color)
cust_1:
- color: var(--button-card-cust-1-text-color)
- value: unavailable
styles:
icon:
- color: var(--button-card-disabled-text-color)
name:
- color: var(--button-card-disabled-text-color)
custom_fields:
svg_icon:
- '--paper-item-icon-active-color': var(--button-card-disabled-text-color)
cust_1:
- color: var(--button-card-disabled-text-color)
card:
type: 'custom:decluttering-card'
template: badge_button_svg
variables:
- entity: '[[entity]]'
- name: '[[name]]'
- icon: '[[icon]]'
- svg_fill: '[[svg_fill]]'
- svg_path: '[[svg_path]]'
- svg_fill_on: '[[svg_fill_on]]'
- svg_path_on: '[[svg_path_on]]'
- color: '[[color]]'
- color_type: '[[color_type]]'
- background_color: '[[background_color]]'
- text_color: '[[text_color]]'
- text_transform: none
- cust_1_text_color: '[[cust_1_text_color]]'
- cust_1_icon_color: '[[cust_1_icon_color]]'
- cust_1_field: >-
[[[ if ( entity.state == '0' ) return 'Clear'; else if (
entity.state == '1' ) return
states['sensor.only_motion_sensor_on'].state + ' Motion'; else
return 'Motion In ' + entity.state + ' Rooms'; ]]]
- state: '[[state]]'
- hold_action:
action: more-info
- tap_action:
action: fire-dom-event
browser_mod:
command: popup
hide_header: false
title: '[[name]]'
large: false
card:
type: vertical-stack
cards:
- type: horizontal-stack
cards:
- type: 'custom:button-card'
template: shoulder_blank_card
- type: 'custom:layout-card'
min_columns: 1
max_columns: 3
cards: null
- type: 'custom:button-card'
template: shoulder_blank_card
i am looking for more easy way instead of using decluttering card
There’s this: