Hi to all, is possible to Add a notification icon to chips card? Like this? Thanks 
Add visible: [] to the view as shown in the screenshot below. This will make it visible to no users. @Adnan_Hossain
1 Like
I wonder if there are ways to re-use yaml config files.
Most of my rooms have lights
some type of other devices in a form of switch or fan
and some sensors. mostly motion or window/door
this is an example of a room
icon: mdi:silverware-fork-knife
path: "dining-room"
cards:
- type: "custom:button-card"
template: chip_back
variables:
ulm_chip_back_path: /ui-lovelace-minimalist/home
- type: "custom:button-card"
template: card_title
name: Dining Room
- type: "custom:button-card"
template: card_title
label: Lights
- type: custom:auto-entities
card:
type: grid
columns: 2
square: false
card_param: cards
filter:
include:
- domain: light
area: Dining Room
options:
type: "custom:button-card"
template: card_light_slider_collapse
variables:
ulm_card_light_enable_slider: true
ulm_card_light_enable_collapse: true
- domain: switch
area: Dining Room
entity_id: /^.*light.*$/
options:
type: "custom:button-card"
template: card_light_slider_collapse
variables:
ulm_card_light_enable_slider: true
ulm_card_light_enable_collapse: true
- type: "custom:button-card"
template: card_title
label: Other Devices
- type: custom:auto-entities
card:
type: grid
columns: 2
square: false
card_param: cards
filter:
include:
- domain: switch
area: Dining Room
options:
type: "custom:button-card"
template: card_binary_sensor
variables:
- ulm_card_binary_sensor_alert: false
show_last_changed: true
- domain: fan
area: Dining Room
options:
type: "custom:button-card"
template: card_binary_sensor
variables:
- ulm_card_binary_sensor_alert: false
show_last_changed: true
- type: "custom:button-card"
template: card_title
label: "Sensors"
- type: custom:auto-entities
card:
type: grid
columns: 2
square: false
card_param: cards
filter:
include:
- attributes:
device_class: motion
area: Dining Room
options:
type: "custom:button-card"
template: card_binary_sensor
variables:
- ulm_card_binary_sensor_alert: false
show_last_changed: true
- attributes:
device_class: moving
area: Dining Room
options:
type: "custom:button-card"
template: card_binary_sensor
variables:
- ulm_card_binary_sensor_alert: false
show_last_changed: true
sort:
method: name
The only difference between this and my Baby Room for is the literally the name of the area.
would be so cool if I could find a way to âtemplatizeâ the yaml and re-use it.
Another thing that would be impressive would be if I could also find a way to not display the title card if there were no auto entities.
Any ETA on 0.0.10? Been pretty quiet with updates lately
Hi Ben, like your card. I have succesfully added it to my config but the media player part is not working. "Blue_playing" doesn't work I just get a strange error picture. Any suggestions how to fix it? Where did you get that sonos icon if I may ask?
I have 2 rows of chips, a permanent and a conditional one. The first row works fine, but I have an issue with the second row, hope you can help me to fix it. I have a binary sensor which turns on if any of the conditional chips are to be showed. I use this to conditionally display the horizontal stack, which contains the conditional chip(s). I would like to left align the displayed chips like I have in the permanent row, but no matter how many conditional chips I have, the systems divides the horizontal stack into n equal parts and put 1 chip in each, see screenshots (for 2 and for 4 chips):
Can any of you guide me how to align the chips within the horizontal stack? Thank you.
1 Like
Here are the _playing templates I use below. What is the error you are getting? Also make sure itâs all lower case too 
---
green_playing:
state:
- styles:
icon:
- color: "rgba(var(--color-green),1)"
img_cell:
- background-color: "rgba(var(--color-green), 0.2)"
value: "playing"
blue_playing:
state:
- styles:
icon:
- color: "rgba(var(--color-blue),1)"
img_cell:
- background-color: "rgba(var(--color-blue), 0.2)"
value: "playing"
pink_playing:
state:
- styles:
icon:
- color: "rgba(var(--color-pink),1)"
img_cell:
- background-color: "rgba(var(--color-pink), 0.2)"
value: "playing"
red_playing:
state:
- styles:
icon:
- color: "rgba(var(--color-red),1)"
img_cell:
- background-color: "rgba(var(--color-red), 0.2)"
value: "playing"
orange_playing:
state:
- styles:
icon:
- color: "rgba(var(--color-orange),1)"
img_cell:
- background-color: "rgba(var(--color-orange), 0.2)"
value: "playing"
yellow_playing:
state:
- styles:
icon:
- color: "rgba(var(--color-yellow),1)"
img_cell:
- background-color: "rgba(var(--color-yellow), 0.2)"
value: "playing"
teal_playing:
state:
- styles:
icon:
- color: "rgba(var(--color-teal),1)"
img_cell:
- background-color: "rgba(var(--color-teal), 0.2)"
value: "playing"
Sonos icons are from this integration: GitHub - elax46/custom-brand-icons: Custom brand icons for Home Assistant
Thanks! Will try to add these templates and see if it is working then. I don' really get an error just a broken picture which doesn't function
1 Like
I tried adding your custom_alarm template and adding some shields but whatever I try it keeps doing this, I tried changing I think every width to try make it fit but they stay the same width. I also tried adding the âarmingâ state but that doesnât even show up. I bascially want Disarmed-Arming-Away-Home-Night, any advise?
It may very well be me sucking in grids and the new CSS.
Share your code but itâs most likely the column gap property Iâd say. Try making it smaller and see what happens, or possibly remove altogether!?!?
The column-gap is currently set to 2 and I changed the width of the item to 40px in stead of 80px. For testing purposes I removed the arming which didnât show up anyway⊠As said maybe my grid is off, I know f*ck all about the CSS fractions. Thanks!
custom_alarm:
styles:
card:
- border-radius: 'var(--border-radius)'
- box-shadow: 'var(--box-shadow)'
- padding: 12px
grid:
- grid-template-areas: "'item1' 'item2'"
- grid-template-columns: "1fr"
- grid-template-rows: "min-content min-content"
- row-gap: 12px
custom_fields:
item1:
card:
type: custom:button-card
template:
- "icon_info"
entity: '[[[ return variables.ulm_custom_alarm_grid_state ]]]'
tap_action:
action: more-info
label: '[[[ return states[variables.ulm_custom_alarm_grid_state].state ]]]'
styles:
card:
- background-color: 'rgba(0,0,0,0)'
state:
- value: 'disarmed'
label: 'Disarmed'
icon: "mdi:shield-off"
styles:
icon:
- color: 'rgba(var(--color-green), 1)'
img_cell:
- background-color: 'rgba(var(--color-green-bg), 1.0)'
- value: 'arming'
label: 'Arming'
icon: "mdi:shield-outline"
styles:
icon:
- color: 'rgba(var(--color-yellow), 1)'
img_cell:
- background-color: 'rgba(var(--color-yellow-bg), 1.0)'
- value: 'armed_away'
label: 'Armed away'
icon: "mdi:shield-lock"
styles:
icon:
- color: 'rgba(var(--color-red), 1)'
img_cell:
- background-color: 'rgba(var(--color-red-bg), 1.0)'
- value: 'armed_home'
label: 'Armed home'
icon: "mdi:shield-home"
styles:
icon:
- color: 'rgba(var(--color-red), 1)'
img_cell:
- background-color: 'rgba(var(--color-red-bg), 1.0)'
- value: 'armed_night'
label: 'Armed night'
icon: "mdi:shield-moon"
styles:
icon:
- color: 'rgba(var(--color-red), 1)'
img_cell:
- background-color: 'rgba(var(--color-red-bg), 1.0)'
item2:
card:
type: custom:button-card
template: custom_alarm_state_grid_item_list
custom_fields:
disarm:
card:
type: custom:button-card
icon: mdi:shield-off
template: custom_alarm_state_grid_job_state_item_list_items
entity: '[[[ return variables.ulm_custom_alarm_grid_state ]]]'
state:
- value: 'disarmed'
icon: "mdi:shield-off"
styles:
icon:
- color: 'var(--google-green)'
card:
- background-color: 'rgba(0,0,0,0)'
- border-radius: 'var(--border-radius-bar)'
# tap_action:
# action: call-service
# service: alarm_control_panel.alarm_disarm
# service_data:
# entity_id: '[[[ return variables.ulm_custom_alarm_grid_state ]]]'
# haptic: success
# arming:
# card:
# type: custom:button-card
# icon: mdi:shield-outline
# template: custom_alarm_state_grid_job_state_item_list_items
# entity: '[[[ return variables.ulm_custom_alarm_grid_state ]]]'
# state:
# - value: 'arming'
# icon: "mdi:shield-outline"
# styles:
# icon:
# - color: 'var(--google-yellow)'
# card:
# - background-color: 'rgba(0,0,0,0)'
# - border-radius: '4px'
# # tap_action:
# # action: call-service
# # service: alarm_control_panel.alarm_arm_
# # service_data:
# # entity_id: '[[[ return variables.ulm_custom_alarm_grid_state ]]]'
# # haptic: success
away:
card:
type: custom:button-card
icon: mdi:shield-lock
template: custom_alarm_state_grid_job_state_item_list_items
entity: '[[[ return variables.ulm_custom_alarm_grid_state ]]]'
state:
- value: 'armed_away'
icon: "mdi:shield-lock"
styles:
icon:
- color: 'var(--google-red)'
card:
- background-color: 'rgba(0,0,0,0)'
- border-radius: '4px'
# tap_action:
# action: call-service
# service: alarm_control_panel.alarm_arm_away
# service_data:
# entity_id: '[[[ return variables.ulm_custom_alarm_grid_state ]]]'
# haptic: success
night:
card:
type: custom:button-card
icon: mdi:shield-moon
template: custom_alarm_state_grid_job_state_item_list_items
entity: '[[[ return variables.ulm_custom_alarm_grid_state ]]]'
state:
- value: 'armed_night'
icon: "mdi:shield-moon"
styles:
icon:
- color: 'var(--google-red)'
card:
- background-color: 'rgba(0,0,0,0)'
- border-radius: '4px'
# tap_action:
# action: call-service
# service: alarm_control_panel.alarm_arm_night
# service_data:
# entity_id: '[[[ return variables.ulm_custom_alarm_grid_state ]]]'
# haptic: success
home:
card:
type: custom:button-card
icon: mdi:shield-home
template: custom_alarm_state_grid_job_state_item_list_items
entity: '[[[ return variables.ulm_custom_alarm_grid_state ]]]'
state:
- value: 'armed_home'
icon: "mdi:shield-home"
styles:
icon:
- color: 'var(--google-red)'
card:
- background-color: 'rgba(0,0,0,0)'
- border-radius: '4px'
# tap_action:
# action: call-service
# service: alarm_control_panel.alarm_arm_home
# service_data:
# entity_id: '[[[ return variables.ulm_custom_alarm_grid_state ]]]'
# haptic: success
custom_alarm_state_grid_item_list:
styles:
card:
- box-shadow: none
- padding: 0px
- border-radius: 'var(--border-radius-bar)'
- pointer-events: none
- background-color: 'rgba(var(--color-theme), 0.05)'
- justify-items: center
- width: 40px
grid:
- grid-template-areas: "'disarm away night home'"
- grid-template-columns: "1fr 1fr 1fr 1fr"
- grid-template-rows: "1fr"
- column-gap: 2px
- justify-items: center
img_cell:
- justify-items: center
custom_alarm_state_grid_job_state_item_list_items:
show_icon: true
show_name: false
size: 24px
tap_action:
action: none
styles:
card:
- box-shadow: none
- padding: 2px
- border-radius: 'var(--border-radius)'
- place-self: center
- height: 40px
- width: 40px
- pointer-events: auto
- background-color: transparent
grid:
- grid-template-areas: '"i"'
icon:
- color: var(--google-grey)
Thanks for the idea, but it did not work. I forgot to mention that Iâm using the layout-card custom component, and depending on the orientation and resolution, I apply a 2, 3 or 4-column arrangement. The conditional card is always expanding through all the columns, and as you can see on the screenshots, works perfectly for the permanent row. The only difference between the 2 rows is the conditional display of the icons and if no icon to be displayed, to the horizontal stack too. So adding the conditional option to the horizontal stack would cause the issue of the second row, but I donât know what styling could fix the alignment of the icons.
@CM000n, do you have an idea, because my layout is based on your shared code (however you are not hiding the horizontal stack, when there is no icon to be displayed). Thank you.
Hey @clemalex
Great work. I am looking at a fan control for my 6 speed DC fan. I have the 6 speeds, light on/off and summer/winter modes control through broad link and wanting a button card to showcase it.
Could you please let me know how to implement this card?
Much appreciated 
Would you be able to share the code for this and show us how to achieve this? Please and thank you.
1 Like
How do you get the chip to display the time left on a timer ?
Some minor customization on the chip, my YAML:
type: 'custom:button-card'
template:
- chip_mdi_icon_state
- custom_fan_timer
variables:
ulm_chip_mdi_icon_state_icon: mdi:fan
ulm_chip_mdi_icon_state_entity: fan.mi_smart_standing_fan_1x
ulm_chip_mdi_icon_state_fan_timer_entity: number.mi_smart_standing_fan_1x_delay_off_countdown
and the customization in a separate YAML file:
custom_fan_timer:
icon: |
[[[
var fan_timer_icon = "mdi:fan";
if (states[variables.ulm_chip_mdi_icon_state_fan_timer_entity].state > 0){
var fan_timer_icon = "mdi:fan-clock";
}
return fan_timer_icon;
]]]
label: |
[[[
var fan_timer_label = states[variables.ulm_chip_mdi_icon_state_fan_timer_entity].state;
var hours = ~~(fan_timer_label / 60);
var minutes = fan_timer_label % 60;
if (fan_timer_label == 0){
return "";
} else if (minutes < 10){
return hours + ":0" + minutes;
} else {
return hours + ":" + minutes;
}
]]]
2 Likes
How did you get the remaining value of the timer in that number entity ?
I have the exact same issue with conditional chips. Any tips would be appreciated !