Hi, Thanks for the previous informations 
Iām now working on some automations recall buttons on the UI. Which will be the best way to to that? I have an automation triggered by an helper.
Will it be possible to use a chip to trigger an automation?
Donāt forget to āfixā the styling 
style: |
ha-card {
box-shadow: var(--box-shadow) !important;
border-radius: var(--border-radius) !important;
padding: 12px !important;
}
1 Like
Grand! Thanks for this. Looks alot better.
I thought you understood. I read the documentation you felt me. From what I understand, everything under the id is what changes, right?
Iāll pass you the code in case you see something wrong. The only thing I did was change the color of the icon when the state is on.
However I got the first few lines of code to work and changed the state from info to toggle
---
card_pablo_room:
tap_action:
id: "action_id"
action: "more-info"
color: "var(--google-grey-500)"
show_icon: true
show_name: true
show_label: true
size: "20px"
label: >-
[[[
if (entity.state !="unavailable"){
if (entity.state =="off"){
var bri = Math.round(entity.attributes.brightness / 2.55);
return "Off";
}else{
var bri = Math.round(entity.attributes.brightness / 2.55);
return (bri ? bri : "0") + "%";
}
}else{
return "Unavailable";
}
]]]
styles:
card:
- border-radius: "20px"
- box-shadow: "var(--box-shadow)"
- padding: "12px"
grid:
- grid-template-areas: "'i toggle' 'n n' 'l l'"
- grid-template-columns: "1fr 1fr"
- grid-template-rows: "min-content"
icon:
- color: "rgba(var(--color-theme),0.2)"
img_cell:
- background-color: "rgba(var(--color-theme),0.05)"
- border-radius: "50%"
- place-self: "center"
- width: "42px"
- height: "42px"
name:
- align-self: "end"
- justify-self: "start"
- font-weight: "bold"
- font-size: "14px"
- margin-left: "12px"
- margin-top: "12px"
label:
- justify-self: "start"
- align-self: "start"
- font-weight: "bolder"
- font-size: "12px"
- filter: "opacity(40%)"
- margin-left: "12px"
state:
- justify-self: "start"
- align-self: "start"
- font-weight: "bolder"
- font-size: "12px"
- filter: "opacity(40%)"
- margin-left: "12px"
custom_fields:
toggle:
card:
entity: "[[[ return entity.entity_id ]]]"
name: "[[[ return name ]]]"
state:
- value: "on"
id: "id_on"
icon: "mdi:lightbulb"
styles:
icon:
- color: "rgba(var(--color-yellow),1)"
img_cell:
- background-color: "rgba(var(--color-yellow), 0.2)"
- value: "off"
icon: "mdi:lightbulb-off"
tap_action:
action: "toggle"
type: "custom:button-card"
template: "widget_icon"
card_pablo_room_mod:
template:
card_pablo_room
tap_action:
id: "action_id"
action: "toggle"
custom_fields:
toggle:
card:
entity: "[[[ return entity.entity_id ]]]"
name: "[[[ return name ]]]"
state:
- value: "on"
id: "id_on"
icon: "mdi:sofa"
styles:
icon:
- color: "rgba(var(--color-blue),1)"
img_cell:
- background-color: "rgba(var(--color-blue), 0.2)"
is it possible to add a proximity sensor to the Person Card?
So my goal is to show āabsentā and how far away a person is.
Yes, it is possible, look around here:
2 Likes
Hi,
If I donāt make a mistake, you must uncomment the code from line 17 to 35 in this file card_cover.yaml.
Donāt forget to reload UI-Minimalist by pressing the C key on your dashboard and reload UI-minimalist
Hey all.
I have my phone dashboard pretty much done. Now for the tablet. Has anyone got some examples they can share, with how they are dealing with the extra real estate?
Also for anyone using Sonarr and Radarr ect upcoming media cards. Sam Wakefield wrote some awesome custom code to modernise the card and make it look so much better, works really well with Minimalist (as you can see by the pics)
Im wondering if one of the devs can see the value of templating it and make it into its own card for us?
This is code for my media view, which has;
Recently Added
Upcoming TV
Upcoming Movies
Again, credit to Sam Wakefield and the card makers for their awesome work
title: "Media"
path: "media"
cards:
- type: "custom:button-card"
template: chip_back
variables:
ulm_chip_back_path: home
- type: horizontal-stack
cards:
- type: picture-elements
image: /local/box.png
card_mod:
style: |
ha-card {
height: 648px !important;
width: 1px !important;
overflow: visible !important;
background: transparent;
}
elements:
- type: custom:upcoming-media-card
title: Recently Added
label:
date: ddmm
style:
top: 5px
left: 5px
width: 1px
height: 260px
transform: translate(0%, 0%)
entity: sensor.plex_recently_added
image_style: poster
flag: false
icon: none
max: 6
box_shadows: false
border_color: transparent
accent_color: transparent
title_text: $empty
line1_text: $day, $date
line2_text: $number - $runtime
line3_text: $empty
line4_text: $empty
title_size: large
line1_size: large
text_shadows: false
card_mod:
style: |
ha-card.type-custom-upcoming-media-card {
background: transparent;
padding: 0px !important;
box-shadow: none;
overflow: visible !important;
}
ha-card > div {
padding: 0px !important;
}
#main.plex_poster {
margin: 0px !important;
overflow: visible !important;
position: absolute !important;
width: 148px !important;
}
#main.plex_poster:nth-of-type(2) {
left: 181px !important;
}
#main.plex_poster:nth-of-type(3) {
left: 0px !important;
top: 350px;
}
#main.plex_poster:nth-of-type(4) {
top: 350px;
left: 181px !important;
}
#main.plex_poster:nth-of-type(5) {
top: 625px;
left: 0px !important;
}
#main.plex_poster:nth-of-type(6) {
top: 625px;
left: 181px !important;
}
.plex_poster .plex_container_poster {
border-radius: 10px;
box-shadow: 5px 5px 20px rgba(0, 0, 0, 0.2);
margin: 0px;
padding: 0px;
width: 168px;
height: 258px;
}
.plex_poster .plex_svg_poster {
margin: 0px;
position: absolute;
top: 166px;
left: 0px;
width: 153px !important;
border-radius: 0px 10px 10px 0px;
background-color: rgba(44, 45, 67, 0.6);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
transition-duration: 150ms;
}
.plex_poster .plex_svg_poster:hover {
opacity: 0%;
transition-duration: 200ms;
}
.plex_line0_poster {
font-size: 14px !important;
}
.plex_line1_poster {
font-size: 21px !important;
fill: white !important;
opacity: 80%;
}
.plex_line2_poster {
font-size: 22px !important;
fill: white !important;
opacity: 80%;
}
- type: custom:upcoming-media-card
title: Upcoming TV
date: ddmm
style:
top: 900px
left: 5px
width: 1px
height: 260px
transform: translate(0%, 0%)
entity: sensor.sonarr_upcoming_media
image_style: poster
flag: false
icon: none
max: 6
box_shadows: false
border_color: transparent
accent_color: transparent
title_text: $empty
line1_text: $day, $date
line2_text: $number - $runtime
line3_text: $empty
line4_text: $empty
title_size: large
line1_size: large
text_shadows: false
card_mod:
style: |
ha-card.type-custom-upcoming-media-card {
background: transparent;
padding: 0px !important;
width: 229px !important;
height: 260px !important;
box-shadow: none;
overflow: visible !important;
}
ha-card > div {
padding: 0px !important;
}
#main.sona_poster {
margin: 0px !important;
overflow: visible !important;
position: absolute !important;
width: 148px !important;
}
#main.sona_poster:nth-of-type(2) {
left: 181px !important;
}
#main.sona_poster:nth-of-type(3) {
left: 0px !important;
top: 350px;
}
#main.sona_poster:nth-of-type(4) {
top: 350px;
left: 181px !important;
}
#main.sona_poster:nth-of-type(5) {
top: 620px;
left: 0px !important;
}
#main.sona_poster:nth-of-type(6) {
top: 620px;
left: 181px !important;
}
.sona_poster .sona_container_poster {
border-radius: 10px;
box-shadow: 5px 5px 20px rgba(0, 0, 0, 0.2);
margin: 0px;
padding: 0px;
width: 168px;
height: 258px;
}
.sona_poster .sona_svg_poster {
margin: 0px;
position: absolute;
top: 166px;
left: 0px;
width: 153px !important;
border-radius: 0px 10px 10px 0px;
background-color: rgba(44, 45, 67, 0.6);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
transition-duration: 150ms;
}
.sona_poster .sona_svg_poster:hover {
opacity: 0%;
transition-duration: 200ms;
}
.sona_line0_poster {
font-size: 14px !important;
}
.sona_line1_poster {
font-size: 21px !important;
fill: white !important;
opacity: 80%;
}
.sona_line2_poster {
font-size: 22px !important;
fill: white !important;
opacity: 80%;
}
- type: custom:upcoming-media-card
title: Upcoming Movies
date: ddmm
style:
top: 1800px
left: 5px
width: 1px
height: 260px
transform: translate(0%, 0%)
entity: sensor.radarr_upcoming_media
image_style: poster
flag: false
icon: none
max: 6
box_shadows: false
border_color: transparent
accent_color: transparent
title_text: $empty
line1_text: $date
line2_text: $empty
line3_text: $empty
line4_text: $empty
title_size: large
line1_size: large
text_shadows: false
card_mod:
style: |
ha-card.type-custom-upcoming-media-card {
background: transparent;
padding: 0px !important;
width: 229px !important;
height: 260px !important;
box-shadow: none;
overflow: visible !important;
}
ha-card > div {
padding: 0px !important;
}
#main.rada_poster {
margin: 0px !important;
overflow: visible !important;
position: absolute !important;
width: 168px;
}
#main.rada_poster:nth-of-type(2) {
left: 181px !important;
}
#main.rada_poster:nth-of-type(3) {
top: 350px;
left: 0px !important;
}
#main.rada_poster:nth-of-type(4) {
left: 181px !important;
top: 350px;
}
#main.rada_poster:nth-of-type(5) {
left: 0px !important;
top: 400px;
}
#main.rada_poster:nth-of-type(6) {
left: 181px !important;
top: 400px;
}
.rada_poster .rada_container_poster {
border-radius: 10px;
box-shadow: 5px 5px 20px rgba(0, 0, 0, 0.2);
margin: 0px;
padding: 0px;
width: 168px;
height: 258px;
}
.rada_poster .rada_svg_poster {
margin: 0px;
position: absolute;
top: 5px;
left: 5px;
width: 51px !important;
height: 28px;
border-radius: 20px;
background-color: rgba(44, 45, 67, 0.3);
backdrop-filter: blur(5px);
-webkit-backdrop-filter: blur(5px);
padding: 0px 0px 2px 7px;
}
.rada_line0_poster {
font-size: 0px !important;
}
.rada_line1_poster {
font-size: 55px !important;
fill: white !important;
opacity: 90%;
}
1 Like
Hey, thanks for your help! That did not work. There are also two more commented sections (138-156 and 195-213). I also tried to uncomment them without any success. I think that feature is not finished yet. Here is the comment on GitHub regarding popup cover card.
Is there a chip to show an entity state and itās icon? The chips Iāve seen need me to pass in an icon string (ex. mdi:flower).
Hi all,
What card can we use with buttons?
Ive tried the light card and the input boolean card and both open the default popup, not press the button?
Thanks
Loving this UI, but has anyone got any good idea how to fix the lag on climate cards? Increasing and decreasing the temperature on my heaters (Mill wifi) is very slow causing like a few seconds delay on every click, so WAF not very high on this part . I was possibly thinking of using a input_number template and then some automation if it has been changed to then trigger an temperature update, which would make it seem more seamless for the user, but maybe someone has a better idea?
not sure what i did, but the colors stopped rendering on the UI. i tried to add a banner card (not from the minimalist collection. i removed the code for that card and now all my minimalist cards render without colors. I reloaded the component in hacs, cleared browser cache, reloaded minimalist ui, refreshed, and still nothing. anyone got any ideas? here is what the default dashboard looks like.
I think you need to apply one of the Minimalist themes (desktop or mobile) in the settings (bottom left corner in the application under your username).
1 Like
If anyone is interested in adding the connection type (Wi-Fi or cellular) and the battery status (charging, SoC) to the person card, here is my trial (this is my first āworkā, so issues might occure):
The template code (thanks for imswel for the original one):
---
find_my_phone_button:
template:
- "ulm_custom_card_person_language_variables"
tap_action:
action: "toggle"
icon: "mdi:volume-high"
name: "[[[ return variables.ulm_custom_card_person_findmy; ]]]"
size: "1.4em"
styles:
icon:
- color: "rgba(var(--color-blue),1)"
name:
- font-size: "1.06em"
- letterspacing: "0.015em"
grid:
- grid-template-areas: "'i n'"
- grid-column-gap: "0.3em"
card:
- color: "rgba(var(--color-blue),1)"
- background: "rgba(var(--color-blue),0.2"
- border-radius: "0.6em"
- padding: "1em 1.4em"
- width: "max-content"
- font-size: "1.06em"
- font-weight: "500"
- letter-spacing: "0.015em"
- box-shadow: "none"
custom_card_person:
template:
- "icon_info_bg"
- "ulm_language_variables"
- "ulm_custom_card_person_language_variables"
- "custom_popup_person"
variables:
ulm_card_person_use_entity_picture: false
ulm_card_person_zones: ""
triggers_update: "all"
show_entity_picture: "[[[ return variables.ulm_card_person_use_entity_picture ]]]"
show_label: true
show_name: true
icon: "mdi:face-man"
entity_picture: >
[[[
if (variables.ulm_card_person_use_entity_picture == true){
return states[variables.ulm_card_person_entity].attributes.entity_picture;
} else{
return null;
}
]]]
label: >
[[[
var location = states[variables.ulm_card_person_entity].state
if (location == "unavailable"){
return variables.ulm_unavailable;
} else if (location == "not_home"){
return variables.ulm_custom_card_person_not_home;
} else{
return (location == "home") ? variables.ulm_custom_card_person_home : location;
}
]]]
name: "[[[ return states[variables.ulm_card_person_entity].attributes.friendly_name ]]]"
entity: "[[[ return variables.ulm_card_person_entity; ]]]"
styles:
icon:
- color: "rgba(var(--color-theme), 0.9)"
- width: >
[[[
if (variables.ulm_card_person_use_entity_picture == true){
return "42px";
} else {
return "20px";
}
]]]
img_cell:
- place-self: center left
grid:
- grid-template-areas: "'i n network battery' 'i l network battery'"
- grid-template-columns: "auto 1fr auto auto"
- justify-items: "center"
custom_fields:
notification:
- border-radius: "50%"
- position: "absolute"
- left: "38px"
- top: "8px"
- height: "16px"
- width: "16px"
- border: "2px solid var(--card-background-color)"
- font-size: "12px"
- line-height: "14px"
- background-color: >
[[[
if (states[variables.ulm_card_person_entity].state == 'home') {
return "rgba(var(--color-blue),1)";
} else {
return "rgba(var(--color-green),1)";
}
]]]
network:
- align-self: center
battery:
- align-self: center
custom_fields:
notification: >
[[[
var zones = variables.ulm_card_person_zones;
var person_location = states[variables.ulm_card_person_entity].state;
if (person_location !== 'home'){
for (const item of zones){
if (person_location == states[item]?.attributes?.friendly_name){
var icon = (states[item].attributes.icon !== null) ? states[item].attributes.icon : 'mdi:help-circle';
return '<ha-icon icon="' + icon + '" style="width: 10px; height: 10px; color: var(--primary-background-color);"></ha-icon>';
} else if (person_location == 'not_home'){
return '<ha-icon icon="mdi:home-minus" style="width: 10px; height: 10px; color: var(--primary-background-color);"></ha-icon>';
}
}
} else{
return '<ha-icon icon="mdi:home-variant" style="width: 10px; height: 10px; color: var(--primary-background-color);"></ha-icon>';
}
]]]
battery: |
[[[
if (states[variables.ulm_card_person_battery_state].state =='charging') {
return `<ha-icon
icon="mdi:battery-charging"
style="width: 14px; height: 14px; color: rgba(var(--color-theme), 0.9)">
</ha-icon><span style="font-size: 14px; font-weight: bold; color: rgba(var(--color-theme), 0.9)">${states[variables.ulm_card_person_battery_level].state}%</span>`;
} else {
return `<ha-icon
icon="mdi:battery"
style="width: 14px; height: 14px; color: rgba(var(--color-theme), 0.9)">
</ha-icon><span style="font-size: 14px; font-weight: bold; color: rgba(var(--color-theme), 0.9)">${states[variables.ulm_card_person_battery_level].state}%</span>`;
}
]]]
network: |
[[[
if (states[variables.ulm_card_person_wifi_connection].state !='<not connected>' ) {
return `<ha-icon
icon="mdi:wifi"
style="width: 16px; height: 16px; padding-right: 5px; color: rgba(var(--color-theme), 0.9)">
</ha-icon>`;
} else {
return `<ha-icon
icon="mdi:signal"
style="width: 16px; height: 16px; padding-right: 5px; color: rgba(var(--color-theme), 0.9)">
</ha-icon>`;
}
]]]
custom_popup_person:
tap_action:
action: "fire-dom-event"
browser_mod:
command: "popup"
title: "[[[ return states[variables.ulm_card_person_entity].attributes.friendly_name ]]]"
style:
$: >
[[[
if (hass.themes.theme.includes("desktop")){
var dialog = `
.mdc-dialog__surface{
border-radius: var(--border-radius) !important;
}
`;
} else{
var dialog = "";
}
return `
*{
--secondary-background-color: none !important;
}
${dialog}
`;
]]]
hui-vertical-stack-card:
$: >
button-card {
align-self: center;
padding: 0.2em 0 2.3em 0;
}
hui-entities-card{
padding: 0.8em 1.4em;
}
$hui-entities-card$: >
ha-card{
box-shadow: none;
}
$hui-history-graph-card$: >
.content {
padding: 0 2.4em !important;
}
ha-card{
box-shadow: none;
}
$hui-glance-card$: >
ha-card{
box-shadow: none;
}
$hui-map-card:
$: >
ha-icon-button {
color: rgba(var(--color-blue),1);
}
$ha-map:
$: >
.leaflet-control-attribution {
display: none;
}
.leaflet-touch .leaflet-control-layers, .leaflet-touch .leaflet-bar {
border: 2px solid rgba(var(--color-blue),0.4) !important;
}
.leaflet-bar a {
background-color: rgba(var(--color-blue),0.2) !important;
color: rgba(var(--color-blue),1) !important;
}
.leaflet-bar a:first-child {
border-bottom: 2px solid rgba(var(--color-blue),0.4) !important;
}
.leaflet-pane.leaflet-tile-pane {
filter: contrast(95%);
}
card:
type: "vertical-stack"
cards:
- type: "entities"
entities:
- entity: "[[[ return variables.ulm_card_person_entity; ]]]"
secondary_info: "last-changed"
- type: "history-graph"
entities:
- entity: "[[[ return variables.ulm_card_person_entity; ]]]"
- type: "glance"
show_state: false
entities:
- entity: "[[[ return variables.ulm_card_person_wifi_tracker; ]]]"
name: "WiFi"
icon: "mdi:wifi"
style: &state >
state-badge{
color: {{ 'rgba(var(--color-blue),1)' if is_state(config.entity, 'home') }};
filter: {{ 'opacity(100%)' if is_state(config.entity, 'home') else 'opacity(40%)'}};
}
- entity: "[[[ return variables.ulm_card_person_gps_tracker; ]]]"
name: "GPS"
icon: "mdi:map-marker"
style: *state
- type: "custom:button-card"
template:
- "find_my_phone_button"
entity: "[[[ return variables.ulm_card_person_findmy_script; ]]]"
- type: "map"
aspect_ratio: "12x10"
default_zoom: 16
entities: "[[[ return [variables.ulm_card_person_gps_tracker]; ]]]"
The language file:
---
ulm_custom_card_person_language_variables:
variables:
ulm_custom_card_person_home: "home"
ulm_custom_card_person_not_home: "away"
ulm_custom_card_person_findmy: "Find my phone"
And the card variables:
- type: 'custom:button-card'
template: custom_card_person
variables:
ulm_card_person_entity: person.your_name
ulm_card_person_battery_state: sensor.your_phone_battery_state
ulm_card_person_battery_level: sensor.your_phone_battery_level
ulm_card_person_wifi_connection: sensor.your_phone_wifi_connection
ulm_card_person_wifi_tracker: device_tracker.your_phone
ulm_card_person_gps_tracker: device_tracker.your_phone
ulm_card_person_findmy_script: script.find_your_phone
ulm_card_person_use_entity_picture: false
ulm_card_person_zones:
- zone.your_place
Improvements are welcome, especially on styling.
11 Likes
thanks! that was it. i forgot that i cleared the cache on the browser to troubleshoot some issue, that must have cleared the theme in the settings.
For the find my phone button I would recommend a confirmation. And a generic service call filled with some more variables.
tap_action:
confirmation:
text: '[[[ return variables.ulm_custom_card_person_findmy_confirmation ]]]'
action: call-service
service: '[[[ return variables.ulm_custom_card_person_findmy_notify_device ]]]'
service_data:
title: '[[[ return variables.ulm_custom_card_person_findmy_notification_title ]]]'
message: '[[[ return variables.ulm_custom_card_person_findmy_notification_message ]]]'
data:
ttl: 0
importance: high
priority: high
tag: Find
channel: alarm_stream
1 Like
Really getting into this now, great piece of work, my dashboards are finally looking decent!!
Only a small thing - I guess itās possible? - if Iāve got Light/Dark set to āAutoā in my profile, how can I force Minimalist to use the Light mode? (Normally have Dark but want to use Light on my wall panel display!)
Sidebar-Username-Theme, there you can choose āAutomatic-Light-Darkā.
What is anyone using for button entities?
Iām finding all cards just open the popup, not āpressā the button.
EDIT
Sorry, maybe some people are reading this and thinking what the hell am I talking about LOL
- type: "custom:button-card"
template: card_input_boolean
entity: button.coffee_machine_button
name: Coffee Machine
EDIT 2
OK worked out the button issue. Most cards that cant ātoggleā default back to āmore-infoā
Anyone trying to use a button enttity can use the script card EG:
- type: horizontal-stack
cards:
- type: "custom:button-card"
template: card_script
variables:
ulm_card_script_title: Coffee Machine
ulm_card_script_icon: "mdi:coffee"
tap_action:
action: call-service
service: button.press
service_data:
entity_id: button.coffee_machine_button
1 Like