Hi,
this is for the custom card, but I am using this one:
https://ui-lovelace-minimalist.github.io/UI/usage/cards/card_room/
your using
- type: horizontal-stack
cards:
- type: 'custom:button-card'
template:
- card_room
- red_no_state
name: Wohnzimmer
entity: light.licht_wohnzimmer
icon: mdi:sofa
ie
entity: light.licht_wohnzimmer, this need to be your temp sensor not the light enitity
oh wow, I should have a break and check the other day before asking for help. Thanks!
Is there a way to format the temperature to be without decimals by any chance?
strangely, the are all set to be with .1 precision, but show with .12 precision in the dashboard and everywhere else.
you could try my modded room card, it based on the original room card.
1 Like
Iāll have a look at them
If you happen to be using zigbee2mqtt you will need to go to the z2m dashboard and set the decimal there. Just load up the dashboard, select the sensor you want to change, then Settings (specific). if I remember correctly the change will go into effect the next time the sensor checks in/temp change.
2 Likes
Iām trying to setup a button on the card_room card that will send my vacuum robot to that room (spot clean) - Iām struggling with the yaml though - can anyone help?
I get the following error when clicking entity_2:
Failed to call service vacuum/send_command. required key not provided @ data['command']
- type: "custom:button-card"
template:
- card_room
- yellow_no_state
name: Bedroom
entity: sensor.bedroom_air_purifier_temperature
icon: mdi:bed
tap_action:
action: navigate
navigation_path: "bedroom"
variables:
label_use_temperature: true
label_use_brightness: false
entity_1:
entity_id: light.bedroom_ceiling_light
templates:
- yellow_on
tap_action:
action: toggle
service_data:
entity_id: light.bedroom_ceiling_light
entity_2:
entity_id: vacuum.henry
templates:
- blue_no_state
tap_action:
action: call-service
service: vacuum.send_command
data:
command: app_segment_clean
params:
- segments:
- 16
repeat: 1
target:
entity_id: vacuum.henry
Here is my working Call Service code:
service: vacuum.send_command
data:
command: app_segment_clean
params:
- segments:
- 16
repeat: 1
target:
entity_id: vacuum.henry
I think Iāve worked it out, using a script and variable:
This seems to work - I created a script and pass the room number:
alias: Vacuum Room
sequence:
- service: vacuum.send_command
data:
command: app_segment_clean
params:
- segments:
- "{{ room }}"
repeat: 1
target:
entity_id: vacuum.henry
mode: queued
icon: mdi:robot-vacuum
entity_4:
entity_id: vacuum.henry
templates:
- blue_on
tap_action:
action: call-service
service: script.vacuum_room
service_data:
room: '16'
Hello everyone, Iām looking for some help, please.
Iām installing minimalist ui as per the instructions but afterwards I cannot restart as I keep getting this error.
Package frontend setup failed. Component frontend has duplicate key 'state-icon-color'
If I remove the following from my configuration file the error disappears and I can reboot.
frontend:
themes: !include_dir_merge_named themes
This is the only theme that I have installed, so Iām unsure why the message is stating that I have a duplicate key?
Any help would be very much appreciated.
Thank you.
Remove any frontend integration from your config. You are probably stating it already and wherever is set it has that key already.
1 Like
Thank you very much. You were correct.
I have been doing this long enough to know better, and I can not believe I did not think of that!
Thank you for your assistance.
Cheers,
andyblac
Iām trying to modify the ācard_esh_welcomeā card by combining the weather card used by you.
How can I fix these problems? (reduce top space, remove shadows and border)
This is the wip code:
welcome_card:
template: "ulm_language_variables"
variables:
ulm_weather: "[[[ return variables.ulm_weather]]]"
entity_1:
color: >
[[[
var colors = ['yellow', 'blue', 'red', 'purple','green', 'pink'];
var color = colors[Math.floor(Math.random() * colors.length)];
return color;
]]]
entity_2:
color: >
[[[
var colors = ['yellow', 'blue', 'red', 'purple','green', 'pink'];
var color = colors[Math.floor(Math.random() * colors.length)];
return color;
]]]
entity_3:
color: >
[[[
var colors = ['yellow', 'blue', 'red', 'purple','green', 'pink'];
var color = colors[Math.floor(Math.random() * colors.length)];
return color;
]]]
entity_4:
color: >
[[[
var colors = ['yellow', 'blue', 'red', 'purple','green', 'pink'];
var color = colors[Math.floor(Math.random() * colors.length)];
return color;
]]]
entity_5:
color: >
[[[
var colors = ['yellow', 'blue', 'red', 'purple','green', 'pink'];
var color = colors[Math.floor(Math.random() * colors.length)];
return color;
]]]
show_icon: false
show_label: true
show_name: false
styles:
grid:
- grid-template-areas: >
[[[
if(variables.ulm_card_esh_welcome_collapse && states[variables.ulm_card_esh_welcome_collapse].state == 'on'){
return "\'item1\' \'item2\' ";
} else {
return "\'item1\' \'item2\' \'item3\'";
}
]]]
- grid-template-columns: "1fr"
- grid-template-rows: "min-content min-content"
- row-gap: "0px"
card:
- border-radius: "var(--border-radius)"
- box-shadow: "var(--box-shadow)"
- padding: "10px"
- cursor: "default"
- "--mdc-ripple-press-opacity": 0 # prevent click animation
custom_fields:
item3:
- display: >
[[[
if(variables.ulm_card_esh_welcome_collapse && states[variables.ulm_card_esh_welcome_collapse].state == 'on'){
return "none";
} else {
return "block";
}
]]]
item4:
- display: >
[[[
if(variables.ulm_card_esh_welcome_collapse && states[variables.ulm_card_esh_welcome_collapse].state == 'on'){
return "none";
} else {
return "block";
}
]]]
custom_fields:
item1:
card:
type: "custom:button-card"
show_icon: false
show_label: false
show_name: true
show_entity_picture: false
name: |
[[[
var today = new Date();
var time = today.getHours()
let welcome = '';
if (time >= '18'){
welcome = variables.ulm_evening;
} else if (time >= '12'){
welcome = variables.ulm_afternoon;
} else if (time >= '5'){
welcome = variables.ulm_morning;
} else {
welcome = variables.ulm_hello;
}
return welcome + ', ' + ' <br>' + user.name + '!';
]]]
styles:
name:
- align-self: "start"
- justify-self: "start"
- font-weight: "bold"
- font-size: "24px"
- margin-left: "16px"
grid:
- grid-template-areas: "'i n' 'i l'"
- grid-template-columns: "min-content auto"
- grid-template-rows: "min-content min-content"
- text-align: "start"
card:
- box-shadow: "none"
- padding: "2px"
- cursor: "default"
- "--mdc-ripple-press-opacity": 0 # prevent click animation
item2:
card:
type: custom:stack-in-card
mode: vertical
cards:
- type: custom:clock-weather-card
entity: weather.openweathermap
forecast_days: 5
locale: en-GB
hide_today_section: false
hide_forecast_section: true
hide_clock: false
hide_date: false
hourly_forecast: true
use_browser_time: true
card_mod:
style: |
ha-card {
height: 136px !important;
}
- type: custom:hourly-weather
entity: weather.openweathermap
num_segments: 18 # optional, defaults to 12
name: "" # optional, defaults to "Hourly Weather"
card_mod:
style: |
ha-card {
height: 90px !important;
}
- type: custom:clock-weather-card
entity: weather.openweathermap
sun_entity: sun.sun
weather_icon_type: fill
animated_icon: true
forecast_days: 7
locale: en-GB
time_format: 24
date_pattern: P
hide_today_section: true
hide_forecast_section: false
hide_clock: false
hide_date: false
hourly_forecast: false
use_browser_time: true
styles:
card:
- box-shadow: "none"
- padding: "0px"
- cursor: "default"
- "--mdc-ripple-press-opacity": 0 # prevent click animation
item3:
card:
type: "custom:button-card"
template: "card_esh_welcome_nav"
styles:
card:
- border-radius: "none"
- box-shadow: "none"
- padding: "4px"
- cursor: "default"
- "--mdc-ripple-press-opacity": 0 # prevent click animation
variables:
entity_1: "[[[ return variables.entity_1 ]]]"
entity_2: "[[[ return variables.entity_2 ]]]"
entity_3: "[[[ return variables.entity_3 ]]]"
entity_4: "[[[ return variables.entity_4 ]]]"
entity_5: "[[[ return variables.entity_5 ]]]"
card_esh_welcome_title:
tap_action:
action: "none"
show_icon: false
show_label: true
show_name: true
styles:
label:
- justify-self: "start"
- font-weight: "bold"
- font-size: "1rem"
- opacity: "0.4"
name:
- justify-self: "start"
- font-weight: "bold"
- font-size: "20px"
grid:
- grid-template-areas: "'n' 'l'"
- grid-template-columns: "1fr"
- grid-template-rows: "min-content min-content"
card:
- background-color: "rgba(0,0,0,0)"
- box-shadow: "none"
- height: "auto"
- width: "auto"
- margin-top: "-10px"
- margin-left: "16px"
- margin-bottom: "-15px"
- cursor: "default"
- "--mdc-ripple-press-opacity": 0 # prevent click animation
card_esh_welcome_nav:
show_icon: false
show_name: true
show_label: false
styles:
grid:
- grid-template-areas: |
[[[
return "'" + [(variables.entity_1?.nav ? 'item1' : ''),
(variables.entity_2?.nav ? 'item2' : ''),
(variables.entity_3?.nav ? 'item3' : ''),
(variables.entity_4?.nav ? 'item4' : ''),
(variables.entity_5?.nav ? 'item5' : '')].join(' ') + "'";
]]]
- grid-template-columns: |
[[[
return [(variables.entity_1?.nav ? '1fr' : ''),
(variables.entity_2?.nav ? '1fr' : ''),
(variables.entity_3?.nav ? '1fr' : ''),
(variables.entity_4?.nav ? '1fr' : ''),
(variables.entity_5?.nav ? '1fr' : '')].join(' ');
]]]
- grid-template-rows: "min-content"
- justify-items: "center"
card:
- border-radius: "var(--border-radius)"
- box-shadow: "var(--box-shadow)"
- padding: "12px"
- overflow: "visible"
custom_fields:
item1:
card:
type: "custom:button-card"
template: "card_esh_welcome_pill_nav"
variables:
number_of_nav_pills: |
[[[
return [variables.entity_1?.nav,
variables.entity_2?.nav,
variables.entity_3?.nav,
variables.entity_4?.nav,
variables.entity_5?.nav].filter(el => el !== undefined).length;
]]]
entity: "[[[ return variables.entity_1; ]]]"
item2:
card:
type: "custom:button-card"
template: "card_esh_welcome_pill_nav"
variables:
number_of_nav_pills: |
[[[
return [variables.entity_1?.nav,
variables.entity_2?.nav,
variables.entity_3?.nav,
variables.entity_4?.nav,
variables.entity_5?.nav].filter(el => el !== undefined).length;
]]]
entity: "[[[ return variables.entity_2; ]]]"
item3:
card:
type: "custom:button-card"
template: "card_esh_welcome_pill_nav"
variables:
number_of_nav_pills: |
[[[
return [variables.entity_1?.nav,
variables.entity_2?.nav,
variables.entity_3?.nav,
variables.entity_4?.nav,
variables.entity_5?.nav].filter(el => el !== undefined).length;
]]]
entity: "[[[ return variables.entity_3; ]]]"
item4:
card:
type: "custom:button-card"
template: "card_esh_welcome_pill_nav"
variables:
number_of_nav_pills: |
[[[
return [variables.entity_1?.nav,
variables.entity_2?.nav,
variables.entity_3?.nav,
variables.entity_4?.nav,
variables.entity_5?.nav].filter(el => el !== undefined).length;
]]]
entity: "[[[ return variables.entity_4; ]]]"
item5:
card:
type: "custom:button-card"
template: "card_esh_welcome_pill_nav"
variables:
number_of_nav_pills: |
[[[
return [variables.entity_1?.nav,
variables.entity_2?.nav,
variables.entity_3?.nav,
variables.entity_4?.nav,
variables.entity_5?.nav].filter(el => el !== undefined).length;
]]]
entity: "[[[ return variables.entity_5; ]]]"
card_esh_welcome_pill_nav:
tap_action:
action: "navigate"
navigation_path: "[[[ return variables.entity?.nav; ]]]"
show_icon: false
show_label: false
show_name: false
state:
- operator: "template"
value: "[[[ return !variables.entity?.nav; ]]]"
styles:
card:
- display: "none"
styles:
grid:
- grid-template-areas: "'item1' 'item2'"
- grid-template-columns: "1fr"
- grid-template-rows: "1fr 1fr"
- row-gap: "12px"
- justify-items: "center"
- column-gap: "auto"
card:
- border-radius: "50px"
- place-self: "center"
- width: "[[[ return (52 * (1+(5-Math.max(variables.number_of_nav_pills, 3))*0.25)) + 'px'; ]]]"
- height: "[[[ return (84 * (1+(5-Math.max(variables.number_of_nav_pills, 3))*0.25)) + 'px'; ]]]"
- 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
color: "var(--google-grey)"
custom_fields:
item1:
card:
type: "custom:button-card"
tap_action:
action: "navigate"
navigation_path: "[[[ return variables.entity?.nav; ]]]"
show_icon: true
show_label: false
show_name: false
icon: "[[[ return variables.entity?.icon ]]]"
styles:
icon:
- color: "[[[ return `rgba(var(--color-${variables.entity?.color}), 1)`;]]]"
- width: "[[[ return (20 * (1+(5-Math.max(variables.number_of_nav_pills, 3))*0.25)) + 'px'; ]]]"
img_cell:
- background-color: "[[[ return `rgba(var(--color-${variables.entity?.color}), 0.20)`;]]]"
- border-radius: "50%"
- width: "[[[ return (42 * (1+(5-Math.max(variables.number_of_nav_pills, 3))*0.25)) + 'px'; ]]]"
- height: "[[[ return (42 * (1+(5-Math.max(variables.number_of_nav_pills, 3))*0.25)) + 'px'; ]]]"
grid:
- grid-template-areas: "i"
card:
- box-shadow: "none"
- border-radius: "50px"
- padding: "5px"
state:
- value: "on"
styles:
card:
- overflow: "visible"
- box-shadow: |
[[[
if (hass.themes.darkMode){
return "0px 2px 4px 0px rgba(0,0,0,0.80)";
} else {
return "var(--box-shadow)";
}
]]]
item2:
card:
type: "custom:button-card"
tap_action:
action: "navigate"
navigation_path: "[[[ return variables.entity?.nav; ]]]"
show_icon: false
show_label: false
name: "[[[ return variables.entity?.name ]]]"
styles:
name:
- font-weight: "bold"
- font-size: "[[[ return (9.5 * (1+(5-Math.max(variables.number_of_nav_pills, 3))*0.25)) + 'px'; ]]]"
- width: "[[[ return (33 * (1+(5-Math.max(variables.number_of_nav_pills, 3))*0.25)) + 'px'; ]]]"
- padding-bottom: "7px"
grid:
- grid-template-areas: "n"
card:
- box-shadow: "none"
- padding: "0px 5px 5px 5px"
- margin-top: "-5px"
- border-radius: "50px"
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 7fr 1fr"
- 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:
- 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: "navigate"
navigation_path: "/lovelace-mobile/temperature"
entity: "[[[ return variables.ulm_weather]]]"
styles:
card:
- width: "100px"
- 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
item3:
card:
type: "custom:button-card"
template: "chip_mdi_icon_only"
variables:
ulm_chip_mdi_icon_only_icon: "mdi:cog-outline"
tap_action:
action: "navigate"
navigation_path: "/config/dashboard"
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
thx
1 Like
if you are wanting to just see at as one card, it will ALL have to be in one card.
but 1st check your indent level for
styles:
card:
- box-shadow: "none"
- padding: "0px"
- cursor: "default"
- "--mdc-ripple-press-opacity": 0 # prevent click animation
make sure the stack-in-card has this block of code too, if that is the border your trying to hide. I see you have it for the stuff in the stack-in-card, which is correct, but fo you want to hide the border of the stack-in-card, it will need one too.
I want to do some sort of a adaptive dashboard in the sense that for wide displays Iāll display 3 cards, while for narrower displays only 2 (hiding the 3rd one).
Just by using grid-template-areas, it doesnāt seem possible that I can hide a card named by a grid-area entry. Am I getting this wrong? Or whatās the approach to hide/show some cards for a certain display width?
edit: I know I can use extra_styles and css to hide it, but I was wondering if thereās a way to make use of the grid configuration yaml.
try using state-switch
2 Likes
Hmmm, I was able to switch between displaying 2 cards/entities depending on the width of the display, but Iām having a hard time figuring out how to set the narrow card to be empty.
For example
- view_layout:
grid-area: "card5"
type: custom:state-switch
entity: mediaquery
states:
"(min-width: 1000px)":
type: markdown
content: more than 1000 px
"all":
type: "custom:button-card"
template: "card_generic"
entity: light.office
This switches between the text and the light switch, but Iād like āallā to be empty instead, but it expects an element.
donāt use the all state, just remove it .
1 Like
Working on my first dashboard, and still pretty new to Home Assistant. Making good progress on my dashboard, but having a problem trying to change an icon in the Room Card. Specifically Iām trying to change one of the entities to have an icon that is different from what is assigned to the entity. Here is my yaml:
entity_2:
entity_id: cover.master_bedroom_slider
icon: mdi:arrow-up-bold
templates:
- green_on
tap_action:
action: call-service
service: cover.open_cover
service_data:
entity_id: cover.master_bedroom_slider
Iām trying to change the ācoverā icon to be an up arrow (mdi:arrow-up-bold)
Any help is appreciated!
Bill
that is not supported in the default room card, but take a look at my custom room card, it has loads of additional features.
https://community.home-assistant.io/t/my-custom-cards-for-minimalist-ui
I be happen to help in that thread i you need help settingup, or have any questions