getting the same thing on none used button templates
edit:
HA restart seemed to fix it.
2 questions …
how do I change the font from velux to screen ?
And when I change the color of the timer, when I restart It changes back to blue. What am I doing wrong ?
Hey, I’m using the custom_card_esh_welcome and I’m really looking for help to customize the settings chip on the right. I’d like to change it to turn on/off the entity ‘switch.adguard_protection’ as well as change it’s icon/color depending on if it’s on or off. Right now I’ve changed the chip to call the service but I can’t figure out how to make the icon yellow with mdi:shield-check when the state is on, and red with mdi:shield-off when the state is off.
Below is what I have now, which toggles the switch but doesn’t update the icon. I tried adding ‘img_cell’ and ‘icon’ to the styles section but I’m not sure how to configure it properly. I’m hoping someone can help, thanks in advance!
item3:
card:
type: "custom:button-card"
template: "chip_mdi_icon_only"
variables:
ulm_chip_mdi_icon_only_icon: "mdi:shield-check"
tap_action:
action: "call-service"
service: "switch.toggle"
service_data:
entity_id: "switch.adguard_protection"
entity: "switch.adguard_protection"
styles:
card:
- align-self: "end"
- box-shadow: >
[[[
if (hass.themes.darkMode){
return "0px 2px 4px 0px rgba(0,0,0,0.80)";
} else {
return "var(--box-shadow)";
}
]]]
- "--mdc-ripple-press-opacity": 0.12 # allow click animation
This used to happen to me sometimes (but has not in a long time. It always meant I just needed to go back to the card and re-download it. Never figured out why bnut the problem always went away quickly.)
I am Having an issue showing the color wheel to show.
I have the variable added from the doc. Any idea? Color temperature does work correctly.
The URL for Music Assistant is /d5369777_music_assistant_beta/ingress
The custom card automatically adds /ui-lovelace-minimalist/ before the address. I am looking for a way for it to not do that.
I can add the whole URL http://local_url:port/d5369777_music_assistant_beta/ingress and it will navigate to it just fine but then it doesn’t work if I try to access it from outside the local network
still error on page loading, I have to refresh serval times or restart HA.
This is the error from browser console
[Error] anonymous@
_evalTemplate@https://homeassistant.local:8123/hacsfiles/button-card/button-card.js:425:9393
@https://homeassistant.local:8123/hacsfiles/button-card/button-card.js:425:12392
forEach@[native code]
_buildStyleGeneric@https://homeassistant.local:8123/hacsfiles/button-card/button-card.js:425:12357
_getIconHtml@https://homeassistant.local:8123/hacsfiles/button-card/button-card.js:519:161
_gridHtml@https://homeassistant.local:8123/hacsfiles/button-card/button-card.js:499:544
_cardHtml@https://homeassistant.local:8123/hacsfiles/button-card/button-card.js:479:32
render@https://homeassistant.local:8123/hacsfiles/button-card/button-card.js:425:6933
update@https://homeassistant.local:8123/hacsfiles/button-card/button-card.js:1:19879
performUpdate@https://homeassistant.local:8123/hacsfiles/button-card/button-card.js:1:16767
@https://homeassistant.local:8123/hacsfiles/button-card/button-card.js:1:16426
render (button-card.js:425:6967)
update (button-card.js:1:19880)
performUpdate (button-card.js:1:16768)
(anonymous function) (button-card.js:1:16427)
[Error] Failed to load resource: the server responded with a status of 404 (Not Found) (light-entity-card.js.map, line 0)
it’s only effecting button templates that are not being using used,as you can in Bathroom where none of the sensor button templates are used it shows errors on 4 of the 5 sensors buttons that can be used.
Oh I got it. I’m sure it’s not 100% right, but it works. I was adding the icon and coloring under the ‘styles’ section of the chip instead of adding the section for ‘states’. Code below works for me incase any needs the reference.
item3:
card:
type: "custom:button-card"
template: "chip_mdi_icon_only"
variables:
ulm_chip_mdi_icon_only_icon: "mdi:shield-check"
tap_action:
action: "call-service"
service: "switch.toggle"
service_data:
entity_id: "switch.adguard_protection"
entity: "switch.adguard_protection"
styles:
card:
- align-self: "end"
- box-shadow: >
[[[
if (hass.themes.darkMode){
return "0px 2px 4px 0px rgba(0,0,0,0.80)";
} else {
return "var(--box-shadow)";
}
]]]
- "--mdc-ripple-press-opacity": 0.12 # allow click animation
state:
- value: "on"
icon: "mdi:shield-check"
styles:
icon:
- color: "rgba(var(--color-yellow),1)"
card:
- background-color: "rgba(var(--color-yellow), 0.2)"
- value: "off"
icon: "mdi:shield-off"
styles:
icon:
- color: "rgba(var(--color-red),1)"
card:
- background-color: "rgba(var(--color-red), 0.2)"
1 Like
Thanks for this. I’ve been trying to customise as well, and this put me in the right direction. Code attached also, just in case it helps anyone else.
card_esh_welcome_topbar:
show_icon: false
show_label: false
show_name: true
styles:
grid:
- grid-template-areas: "'item1 item2 item3'"
- grid-template-columns: "1fr auto auto"
- grid-template-rows: "min-content"
# - justify-items: "center"
card:
- border-radius: "var(--border-radius)"
- box-shadow: "var(--box-shadow)"
- padding: "12px"
- cursor: "default"
- "--mdc-ripple-press-opacity": 0 # prevent click animation
custom_fields:
item1:
card:
type: "custom:button-card"
template: "chips"
tap_action:
action: "call-service"
service: "input_boolean.toggle"
service_data:
entity_id: "[[[ return variables.ulm_card_esh_welcome_collapse ]]]"
show_icon: true
icon: "mdi:chevron-up"
entity: "[[[ return variables.ulm_card_esh_welcome_collapse ]]]"
styles:
grid:
- grid-template-areas: "'i'"
card:
- align-self: "start"
- box-shadow: >
[[[
if (hass.themes.darkMode){
return "0px 2px 4px 0px rgba(0,0,0,0.80)";
} else {
return "var(--box-shadow)";
}
]]]
- visibility: "[[[ return variables.ulm_card_esh_welcome_collapse ? 'visible' : 'hidden'; ]]]"
- "--mdc-ripple-press-opacity": 0.12 # allow click animation
state:
- value: "on"
icon: "mdi:chevron-down"
styles:
icon:
- color: "rgb(var(--color-theme))"
item2:
card:
type: "custom:button-card"
template: "chip_weather_date"
variables:
ulm_weather: "[[[ return variables.ulm_weather]]]"
tap_action:
action: "more-info"
entity: "[[[ return variables.ulm_weather]]]"
styles:
card:
- align-self: "end"
- box-shadow: >
[[[
if (hass.themes.darkMode){
return "0px 2px 4px 0px rgba(0,0,0,0.80)";
} else {
return "var(--box-shadow)";
}
]]]
- "--mdc-ripple-press-opacity": 0.12 # allow click animation
- margin-right: 12px
item3:
card:
type: "custom:button-card"
template: "chip_mdi_icon_state"
variables:
ulm_chip_mdi_icon_state_entity: sensor.recycling
ulm_chip_mdi_icon_state_icon: mdi:recycle
tap_action:
action: "more-info"
entity: "sensor.recycling"
styles:
card:
- align-self: "end"
- box-shadow: >
[[[
if (hass.themes.darkMode){
return "0px 2px 4px 0px rgba(0,0,0,0.80)";
} else {
return "var(--box-shadow)";
}
]]]
- "--mdc-ripple-press-opacity": 0.12 # allow click animation
state:
- value: "on"
icon: "mdi:recycle"
styles:
icon:
- color: "rgba(var(--color-green),1)"
card:
- background-color: "rgba(var(--color-green), 0.2)"
1 Like
Oh thanks, I like your “auto” columns. I feel like it will help with adding multiple chips. I’ll try it out soon. 
So what am I doing wrong that the color pallette to now show up?
here is what I have in the YAML for the dashboard
- type: "custom:button-card"
template:
- card_light
entity: light.kitchen_window_light
variables:
ulm_card_light_enable_popup: true
ulm_card_light_color_palette: select.wled_color_palette
I also can confirm I do have “My Cards Bundle aka slider-card” and “Light Entity Card” installed
Hey guys,
how can i realize the following feature on the adaptive mode:
I want to use the room card and if i tap on the room a popup on the right with additional information shoudl open. On a mobile phone there will be no popup. In that case i want to open a new view on tap.
How can i do those two tap actions depending on the screen size?
Thank you for your help!
for anyone interested my issues was the python_scripts/set_state.py causing the issue, since I have removed it, I have had no issues on my dashboard loading.
Hello, i wondering if there is any way to manage different Dashboard for multi User ?
Can someone help! I’m trying to get the room-card working. This one.
I get,
Button-card template 'card_room' is missing!
Where can I find this card_room template? I cant even find it on github, it is not in my buttom_card_templates directory and i cannot find the file that needs to go in there.
Thanks
Hi,
you can find it here:
https://ui-lovelace-minimalist.github.io/UI/usage/cards/card_room/?h=card_room#usage
Good evening, anyone knows why does the interface doesn’t appear in the mobile app?
On the pc it works fine
Thanks from me too seeing your posts i got the courage to play around as well. Very happy with the result
When I use that, I just get
Button-card template 'card_room' is missing!
hi,
---
card_room:
template:
- "ulm_translation_engine"
variables:
label_use_temperature: true
label_use_brightness: false
double_tap_action:
action: "call-service"
service: "input_select.select_option"
service_data:
option: "[[[ return variables.ulm_input_select_option ]]]"
entity_id: "[[[ return variables.ulm_input_select ]]]"
color: "var(--google-grey-500)"
size: "45%"
aspect_ratio: "1/1"
show_icon: true
show_label: true
show_name: true
icon: "mdi:sofa-single"
label: |-
[[[
if (variables.label_use_temperature) {
return (entity?.attributes?.current_temperature || entity?.attributes?.temperature || entity?.attributes?.device_temperature || entity?.state || '-') + (entity?.attributes?.unit_of_measurement || '°C');
} else if (variables.label_use_brightness && entity?.state == "on" && entity?.attributes?.brightness != null) {
let bri = Math.round(entity?.attributes?.brightness / 2.55);
return (bri ? bri : "0") + "%";
}
return variables.ulm_translation_state;
]]]
state:
- value: "unavailable"
styles:
custom_fields:
notification:
- border-radius: "50%"
- border: "2px solid var(--card-background-color)"
- width: "24.5px"
- height: "24.5px"
- position: "absolute"
- left: "50%"
- top: "50%"
- transform: "translate(-50%,-50%)"
- margin-top: "35%"
- margin-left: "-35%"
- line-height: 0
- display: "grid"
- background-color: "[[[ return 'rgba(var(--color-red),1)'; ]]]"
styles:
icon:
- color: "rgba(var(--color-theme),0.2)"
label:
- justify-self: "start"
- align-self: "start"
- font-weight: "bold"
- font-size: "14px"
- filter: "opacity(40%)"
- margin-left: "12px"
- max-width: "[[[ return `calc(100% - (12px + ${!variables?.entity_1 && !variables?.entity_2 ? 5 : 0}px))`; ]]]"
- text-overflow: "ellipsis"
- overflow: "hidden"
- margin-top: "[[[ return !variables?.entity_1 ? '-24%' : '-10%'; ]]]"
name:
- justify-self: "start"
- align-self: "end"
- font-weight: "bold"
- font-size: "18px"
- margin-left: "12px"
- margin-bottom: "[[[ return !variables?.entity_1 ? (!variables?.entity_2 ? '15.8%' : '24%') : '10%'; ]]]"
- max-width: "[[[ return `calc(100% - (12px + ${!variables?.entity_2 ? 5 : 0}px))`; ]]]"
- text-overflow: "ellipsis"
- overflow: "hidden"
state:
- justify-self: "start"
- font-weight: "bold"
- font-size: "12px"
- filter: "opacity(40%)"
- margin-left: "6px"
img_cell:
- background-color: "rgba(var(--color-theme),0.05)"
- border-radius: "50%"
- width: "75%"
- height: "75%"
- max-width: "none"
- max-height: "none"
- position: "absolute"
- left: "50%"
- top: "50%"
- transform: "translate(-50%,-50%)"
- margin-top: "25%"
- margin-left: "-25%"
grid:
- grid-template-areas: "[[[ return !variables?.entity_1 ? (!variables?.entity_2 ? `'n n n' 'l l i3' 'i i i4'` : `'n n i2' 'l l i3' 'i i i4'`) : `'n n n i1' 'l l l i2' 'i i . i3' 'i i . i4'`; ]]]"
- grid-template-columns: "[[[ return !variables?.entity_1 ? '1fr 1fr 1fr' : '1fr 1fr 1fr 1fr'; ]]]"
- grid-template-rows: "[[[ return !variables?.entity_1 ? '1fr 1fr 1fr' : '1fr 1fr 1fr 1fr'; ]]]"
- justify-items: "center"
card:
- border-radius: "20px"
- box-shadow: "var(--box-shadow)"
- padding: "5px"
custom_fields:
i1: &widget_icon_room_styling
- border-radius: "50%"
- width: "80%"
- height: "80%"
- line-height: 0
- display: "grid"
i2: *widget_icon_room_styling
i3: *widget_icon_room_styling
i4: *widget_icon_room_styling
custom_fields:
notification: >
[[[
if (entity?.state == 'unavailable'){
return '<ha-icon icon="mdi:exclamation" style="width: 50%; height: 50%; color: var(--primary-background-color);"></ha-icon>';
}
]]]
i1:
card:
type: "custom:button-card"
template: >
[[[
let templates = [ 'widget_icon_room' ];
if (variables?.entity_1?.templates?.length) {
templates.push(...variables.entity_1.templates);
}
return templates;
]]]
variables: "[[[ return variables?.entity_1; ]]]"
state:
- operator: "template"
value: "[[[ return !variables.entity_1; ]]]"
styles:
card:
- display: "none"
entity: "[[[ return variables?.entity_1?.entity_id; ]]]"
i2:
card:
type: "custom:button-card"
template: >
[[[
let templates = [ 'widget_icon_room' ];
if (variables?.entity_2?.templates?.length) {
templates.push(...variables.entity_2.templates);
}
return templates;
]]]
variables: "[[[ return variables?.entity_2; ]]]"
state:
- operator: "template"
value: "[[[ return !variables.entity_2; ]]]"
styles:
card:
- display: "none"
entity: "[[[ return variables?.entity_2?.entity_id; ]]]"
i3:
card:
type: "custom:button-card"
template: >
[[[
let templates = [ 'widget_icon_room' ];
if (variables?.entity_3?.templates?.length) {
templates.push(...variables.entity_3.templates);
}
return templates;
]]]
variables: "[[[ return variables?.entity_3; ]]]"
state:
- operator: "template"
value: "[[[ return !variables.entity_3; ]]]"
styles:
card:
- display: "none"
entity: "[[[ return variables?.entity_3?.entity_id; ]]]"
i4:
card:
type: "custom:button-card"
template: >
[[[
let templates = [ 'widget_icon_room' ];
if (variables?.entity_4?.templates?.length) {
templates.push(...variables.entity_4.templates);
}
return templates;
]]]
variables: "[[[ return variables?.entity_4; ]]]"
state:
- operator: "template"
value: "[[[ return !variables.entity_4; ]]]"
styles:
card:
- display: "none"
entity: "[[[ return variables?.entity_4?.entity_id; ]]]"
widget_icon_room:
variables:
tap_action:
action: "toggle"
hold_action:
action: "more-info"
tap_action:
action: "[[[ return variables?.tap_action?.action ? variables.tap_action.action : 'none'; ]]]"
entity: "[[[ return variables.tap_action.entity; ]]]"
navigation_path: "[[[ return variables.tap_action.navigation_path; ]]]"
url_path: "[[[ return variables.tap_action.url_path; ]]]"
service: "[[[ return variables.tap_action.service; ]]]"
service_data: "[[[ return variables.tap_action.service_data; ]]]"
hold_action:
action: "[[[ return variables?.hold_action?.action ? variables.hold_action.action : 'none'; ]]]"
entity: "[[[ return variables.hold_action.entity; ]]]"
navigation_path: "[[[ return variables.hold_action.navigation_path; ]]]"
url_path: "[[[ return variables.hold_action.url_path; ]]]"
service: "[[[ return variables.hold_action.service; ]]]"
service_data: "[[[ return variables.hold_action.service_data; ]]]"
size: "15px"
color: "var(--google-grey)"
show_icon: true
show_name: false
styles:
icon:
- width: "50%"
- height: "50%"
- line-height: "0"
- color: "rgba(var(--color-theme),0.2)"
img_cell:
- border-radius: "50%"
- background-color: "rgba(var(--color-theme),0.05)"
grid:
- grid-template-areas: "'i'"
card:
- height: "100%"
- box-shadow: "none"
- padding: "0px"
- border-radius: "50%"