Spans two files… ui-lovelace.yaml (in the particular grid you want to display):
- type: custom:button-card
entity: climate.family_room
name: Living Room
aspect_ratio: 1.3/1
template:
- base
- climate
- icon_climate
From the button_card_templates.yaml
climate:
template:
- circle
variables:
circle_input: >
[[[ return entity === undefined || entity.attributes.current_temperature; ]]]
state_display: >
[[[ return entity.attributes.hvac_action ]]]
custom_fields:
circle: >
[[[
if (entity && entity.attributes.current_temperature) {
let input = variables.circle_input == null ? ' ' : `${parseInt(variables.circle_input)}<tspan font-size="10">°F</tspan>`,
stroke_color = '#b2b2b2',
fill_color = variables.state !== 'idle' ? 'rgba(255,255,255,0.04)' : 'none';
return `
<svg viewBox="0 0 50 50">
<circle cx="25" cy="25" r="20.5" stroke="${stroke_color}" stroke-width="1.5" fill="${fill_color}" />
<text x="50%" y="54%" fill="#8d8e90" font-size="14" text-anchor="middle" alignment-baseline="middle" dominant-baseline="middle">${input}</text>
</svg>
`;
}
]]]
styles:
card:
- background-color: >
[[[
if (entity.attributes.hvac_action === "heating") {
return 'rgba(204, 51, 0, 0.4)';
} else if (entity.attributes.hvac_action === "cooling") {
return '#0099cc';
} else {
return 'rgba(115, 115, 115, 0.2)';
}
]]]
icon_climate:
styles:
custom_fields:
icon:
- width: 75%
- margin-left: -10%
- fill: >
[[[ return variables.state === 'cool' || variables.state === 'fan_only' ? '#5daeea' : '#9da0a2'; ]]]
custom_fields:
icon: >
<svg viewBox="0 0 128 128">
<path d="M59.2.065C38.633 1.373 19.793 13.16 8.583 31.733c-1.657 2.745-3.988 7.853-5.218 11.43a69.144 69.144 0 0 0-2.236 8.25C.25 55.78.053 58.063.053 64c0 5.661.036 6.215.655 10.133 4.163 26.383 24.568 47.56 50.812 52.737 1.822.36 2.333.441 4.747.758 3.98.521 11.486.521 15.466 0 2.415-.317 2.925-.399 4.747-.759 4.359-.861 8.235-2.047 12.427-3.8 20.254-8.474 34.959-27.22 38.385-48.936.619-3.918.655-4.472.655-10.133 0-5.661-.036-6.215-.655-10.133-3.158-20.012-15.802-37.489-33.876-46.822-7.072-3.652-13.73-5.666-22.43-6.787C69.678.089 61.045-.052 59.2.065m-7.413 16.193c6.234.956 10.842 5.534 11.947 11.872.138.788.16 4.003.16 23.794v22.883l1.043 1.077A21.143 21.143 0 0 1 70.99 90.69a21.155 21.155 0 0 1-9.709 17.78c-12.097 7.875-28.327 1.54-32.046-12.507-.644-2.43-.838-6.717-.4-8.816.989-4.737 2.732-8.13 5.805-11.303l.985-1.017.002-22.511c0-24.16-.006-23.816.535-25.756 1.934-6.94 8.655-11.371 15.626-10.302m-3.859 6.998c-2.3.595-4.188 2.37-5.004 4.707l-.31.89-.029 24.718-.028 24.718-.772.525c-3.32 2.263-6.158 6.793-6.158 9.833v.313h28.376l-.066-.453c-.544-3.735-2.899-7.482-6.045-9.62l-.932-.632V71.04h-8.853v-3.413h8.853v-7.254h-8.853V56.96h8.853v-7.253h-8.853v-3.414h8.853V39.04h-8.853v-3.413h8.853v-3.242c0-3.135-.009-3.271-.265-4.156-1.077-3.716-5.006-5.945-8.767-4.973M104.8 49.813l8.746 8.747H78.454l8.746-8.747c4.81-4.81 8.77-8.746 8.8-8.746.03 0 3.99 3.936 8.8 8.746m-.027 28.4L96 86.987l-8.773-8.774-8.774-8.773h35.094l-8.774 8.773"/>
</svg>
1 Like
HOme1234
February 22, 2022, 7:19pm
2797
Hi Folks, am really interested in this dashboard but i have failed to intergrate it to my home assistant. i have followed all the steps. When i restart my home assistant it goes in safe mode and when i delete the files and restart the system goes back to normally opening. I have poor langauge in programming. Please can someone help me with the updated ui code and guides or ready codes.
theRKS
February 22, 2022, 10:46pm
2798
Perfect! , Thank you, like the way u have used hvac_action, makes more sense for my setup.
theRKS
February 22, 2022, 10:48pm
2799
Did u tried below link? It worked perfectly for me.
Hi all, first post in this thread from me.
I have been working on setting up this dashboard and its going good so far, however, I can’t for the life of me find out where (sensor.template_domain_counter) the domain counters are coming from in the history popup.
My best guess is they are added from a appdaemon script, I don’t want to add appdaemon just for them at the moment so if that is the case then ill comment them out and move on.
Any one know how the sensor is set up?
I can see the issue, the row that the control card is in is having its height set by the media card.
what you will need to look at doing have the sections on the side all one section and then use a vertical stack to remove the gap.
under the hood this is just a css grid, so you can use this as a reference CSS Grid Layout
Tarlak
February 24, 2022, 5:33pm
2803
Hi all,
I need a little help, i try to use the notify variable in the footer template with this yaml
- type: custom:button-card
name: >
<ha-icon icon="mdi:battery-heart-outline"></ha-icon>
tap_action:
!include popup/battery.yaml
variables:
notifiy: >
[[[
let nbrbat = states['sensor.template_etat_batterie'].state;
if (nbrbat) {
return nbrbat;
}
]]]
template: footer
normally nbrbat contains an integer , which comes from my sensor states[‘sensor.template_etat_batterie’].state
May be i don’t understand what does the notify section, for me the notify is use to show a litte number around the button ? Can’t someone help me please ?
I’ve not updated the readme yet
false = no notification
let nbrbat = states['sensor.template_etat_batterie'];
if (nbrbat) {
return parseInt(nbrbat.state);
}
1 Like
Tarlak
February 25, 2022, 7:45am
2805
Thanks for you response, i try your solution but no number appear i think i miss something :p, i look forward when you put it in the readme :p, i got lot of thing to do before this come to an hurry
Tarlak
February 25, 2022, 10:58am
2807
My bad !! you’ve better eyes than mine !! thanks a lot, it works like a charm !!
Hello Gerard,
I love your work, can you share the button_card_template code ?
THX
theRKS
February 26, 2022, 7:46pm
2809
Any recommendation on where i can find svg’s for Securing Home(Armed, Unarmed, Away ), Media Room (FireTv, XBox or movies)?
Sounds like you got it fixed, happy to help.
i use this link to find icons https://materialdesignicons.com/ , then i use this link SVG Path Editor · aydos.com to scale them up to use in the cards , depending on the icon the scale factor is 1.3 to 1.7
2 Likes
mkhattab
February 27, 2022, 8:37am
2813
Not yet managed to fix it. I’m trying right now.
cyberphox
February 27, 2022, 1:54pm
2814
@danieljarhult I’d love to see the code for those weather widgets, batteries and the emoji ones!
edit: wiat I think I see you shared above!
Not a problem, let me know how you go and if you need any more help, I’m ok with the layout and I’m getting ok at templates. It’s just the home assistance specific things that I have no idea about and google can only get you so far.
