how can i add this to the sidebar to show the energy use in a chart ?
Many thanks for the reply. I’ve done as I think you meant and got a partially working dashboards. The cards with entities are working and animating but the popups don’t seem to work. The light popup come up but errors as follows
Custom element doesn’t exist: light-popup-card.
type: custom:light-popup-card
… the rest of the card code
Other popups do nothing e.g. the TV popup.
I think it’s because I deleted some of the references to the popup cards in my dashboard code.
In the Dashboard main code how did you replace the “!include” lines which error if I leave them as they are. For example
hold_action:
!include popup/vardagsrum_tv.yaml
What do I replace these with ?
I got two issues I would appreciate help with.
-
I’m having issues with my mini-graph-card not filling up the full width of the button-card despite using the same code previous people have used without issues. In addition, the name is in the wrong place.
-
I used extra_styles to achieve the same look for my mini-graph-cards but am observing a blurring that is happening to my icons and circles. The icons and circles sharp up if I animate my mouse over the button-card. But the icons and circles go blurry again if I idle my mouse for a few seconds.
This is what I’m using for the ui-lovelace.yaml:
#################################################
# #
# BEDROOM #
# #
#################################################
- type: grid
title: Bedroom
view_layout:
grid-area: bedroom
columns: 2
cards:
- type: custom:button-card
entity: sensor.bedroom_temperature
name: Temp
tap_action: !include popup/livingroom_weather.yaml
hold_action:
action: none
custom_fields:
graph:
card:
entities:
- entity: sensor.bedroom_temperature
color_thresholds:
- value: 0
color: "#276696"
- value: 69
color: "#228C22"
- value: 75
color: "#d35400"
- value: 76
color: "#c0392b"
- entity: sensor.nightstate
color: gray
y_axis: secondary
show_line: false
show_points: false
show_legend: false
show_labels: false
template:
- temperature
- icon_temp
button-card-templates.yaml:
#################################################
# #
# TEMPERATURE #
# #
#################################################
temperature:
template:
- base
show_state: false
custom_fields:
circle: >
[[[ {
const temperature = Math.round(entity.state);
return `<svg viewBox="0 0 50 50"><circle cx="25" cy="25" r="20.5" stroke="#313638" stroke-width="1.5" fill="#FFFFFF08" style="
transform: rotate(-90deg); transform-origin: 50% 50%;" />
<text x="50%" y="54%" fill="#8d8e90" font-size="14" text-anchor="middle" alignment-baseline="middle" dominant-baseline="middle" dominant-baseline="middle">${temperature}°</text></svg>`; } ]]]
graph:
card:
type: "custom:mini-graph-card"
hours_to_show: 24
points_per_hour: 4
line_width: 8
font_size: 75
decimals: 0
show:
name: false
icon: false
state: false
legend: false
labels: false
points: false
color_thresholds:
- value: 0
color: "#276696"
- value: 69
color: "#228C22"
- value: 75
color: "#d35400"
- value: 76
color: "#c0392b"
styles:
name: [top: 57%, left: 0%, width: 100%, position: absolute]
custom_fields:
graph: [bottom: 0%, left: 0%, width: 100%, position: absolute]
circle:
- display: initial
- width: 90%
- letter-spacing: 0.03vw
- margin: -6% -6% 0 0
- justify-self: end
- opacity: 1
icon:
- width: 67%
- fill: "#9da0a2"
The extra_styles added to the temperature button_card_templates to get the full width look and some-what fix for the name positioning. Observing the icon and circle blurring when there is no mouse activity over the button-card:
extra_styles: |
#name, #state {
text-align: left;
font-size: 1.32vw;
letter-spacing: -0.02vw;
padding: 0.55vw 1.2vw 0.5vw 1.2vw;
}
/* portrait */
@media screen and (max-width: 1200px) {
#name, #state {
font-size: 3vw;
letter-spacing: 0.12vw;
}
}
/* phone */
@media screen and (max-width: 800px) {
#name, #state {
font-size: 3vw;
letter-spacing: 0.12vw;
padding: 0.55vw 1.2vw 0.5vw 1.2vw;
}
}
Thanks!
sadly in ui mode, !include is not working. So you need to copy the !include code into tap action.
Hi
Thanks for sharing your code, im getting same issue with “temp” being placed at the bottom off the button
Did you managed to fix it ?
I made a custom SVG icon for the roborock
When i edit the SVG i get the code
Presume i edit button_card_templates.yaml
and make a new icon section but my code looks difffernt to the ones i can see in there
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="320" height="304" xmlns:v="https://vecta.io/nano"><style><![CDATA[.B{fill:#e9e9e9}.C{fill:#d6d6d6}.D{fill:#cacaca}.E{fill:#fff}.F{fill:#c1c1c1}]]></style><path d="M0 0v304h320V0H0z" class="F"/><path d="M142 3v1h4l-4-1z" class="C"/><path d="M146 3l1 1-1-1z" class="B"/><path d="M6 154c12.765-5.957 11.07-26.878 14.721-39C27.634 92.053 40.894 70.708 58 54.015 120.291-6.774 223.198 1.882 274.844 72c11.75 15.953 19.615 33.843 24.411 53 2.637 10.535.279 23.638 11.745 29 0-98.759-96.538-169.72-191-146.105C68.485 20.774 24.826 62.322If you`re using Illustrator, you need to create only 1 compound path. That way you going to get results similar of those you see here. You can take most of this infos off too.
i have replaced the icon_imac code as an example
custom_fields:
icon: >
[[[
let state = variables.state_on && variables.timeout < 2000 ? 'on' : null;
return `
<svg viewBox="0 0 50 50">
<style>
@keyframes on {
from {
opacity: 0.5;
transform: scale(0.6);
}
100% {
opacity: 1;
}
}
.on {
animation: on 0.8s cubic-bezier(0.25, 1, 0.5, 1);
transform-origin: center;
}
</style>
<path class="${state}" d="M0 0v304h320V0H0z" class="F"/><path d="M142 3v1h4l-4-1z" class="C"/><path d="M146 3l1 1-1-1z" class="B"/><path d="M6 154c12.765-5.957 11.07-26.878 14.721-39C27.634 92.053 40.894 70.708 58 54.015 120.291-6.774 223.198 1.882 274.844 72c11.75 15.953 19.615 33.843 24.411 53 2.637 10.535.279 23.638 11.745 29 0-98.759-96.538-169.72-191-146.105C68.485 20.774 24.826 62.322"/>
</svg>
`;
]]]
but icon doesnt show
when i saved as SVG using illustrator it had like 3 pages of code which cant be right, even when running through nano.
this is my SVG code
d=“M207.5 127a7.5 7.5 0 0 0 7.5-7.5v-8a7.5 7.5 0 1 0-15 0v8a7.5 7.5 0 0 0 7.5 7.5zm48 0a7.5 7.5 0 0 0 7.5-7.5v-8a7.5 7.5 0 1 0-15 0v8a7.5 7.5 0 0 0 7.5 7.5zm131.354 185.792L375 306.865v-69.099c9.29-3.138 16-11.93 16-22.266 0-12.958-10.542-23.5-23.5-23.5H335v-8.5a7.5 7.5 0 0 0-7.5-7.5H311v-40.5c0-26.05-12.595-49.213-32.014-63.721.003-.093.014-.185.014-.279V45.766c9.29-3.138 16-11.93 16-22.266C295 10.542 284.458 0 271.5 0S248 10.542 248 23.5c0 10.336 6.71 19.128 16 22.266v17.209C254.07 58.507 243.076 56 231.5 56s-22.57 2.507-32.5 6.975V45.766c9.29-3.138 16-11.93 16-22.266C215 10.542 204.458 0 191.5 0S168 10.542 168 23.5c0 10.336 6.71 19.128 16 22.266V71.5c0 .094.011.186.014.279C164.595 86.287 152 109.45 152 135.5V176h-16.5a7.5 7.5 0 0 0-7.5 7.5v8.5H95.5C82.542 192 72 202.542 72 215.5c0 10.336 6.71 19.128 16 22.266v69.099l-11.854 5.927A7.5 7.5 0 0 0 72 319.5v24a7.5 7.5 0 0 0 4.146 6.708l16 8c1.077.539 2.222.793 3.349.793 2.751 0 5.4-1.52 6.714-4.147a7.5 7.5 0 0 0-3.354-10.062L87 338.865v-14.729l8.5-4.25 8.5 4.25V335.5a7.5 7.5 0 1 0 15 0v-16a7.5 7.5 0 0 0-4.146-6.708L103 306.865V239h25v32.5c0 26.05 12.595 49.213 32.014 63.721-.003.093-.014.185-.014.279v48c0 10.336 6.71 19.128 16 22.266V416h-16.5a7.5 7.5 0 0 0-6.665 4.06L138.415 448H135.5a7.5 7.5 0 1 0 0 15h72a7.5 7.5 0 0 0 7.5-7.5v-32a7.5 7.5 0 0 0-7.5-7.5H191v-10.234c9.29-3.138 16-11.93 16-22.266v-32.513c.167.001.332.013.5.013h48c.168 0 .333-.012.5-.013V383.5c0 10.336 6.71 19.128 16 22.266V416h-16.5a7.5 7.5 0 0 0-7.5 7.5v32a7.5 7.5 0 0 0 7.5 7.5h72a7.5 7.5 0 1 0 0-15h-2.915l-14.42-27.94A7.5 7.5 0 0 0 303.5 416H287v-10.234c9.29-3.138 16-11.93 16-22.266v-48c0-.094-.011-.186-.014-.279C322.405 320.713 335 297.55 335 271.5V239h25v67.865l-11.854 5.927A7.5 7.5 0 0 0 344 319.5v16a7.5 7.5 0 1 0 15 0v-11.365l8.5-4.25 8.5 4.25v14.729l-11.854 5.927c-3.704 1.852-5.206 6.357-3.354 10.062 1.313 2.628 3.963 4.148 6.714 4.147a7.48 7.48 0 0 0 3.349-.793l16-8a7.5 7.5 0 0 0 4.146-6.708v-24a7.5 7.5 0 0 0-4.147-6.707zM271.5 15a8.51 8.51 0 0 1 8.5 8.5 8.51 8.51 0 0 1-8.5 8.5 8.51 8.51 0 0 1-8.5-8.5 8.51 8.51 0 0 1 8.5-8.5zm-80 0a8.51 8.51 0 0 1 8.5 8.5 8.51 8.51 0 0 1-8.5 8.5 8.51 8.51 0 0 1-8.5-8.5 8.51 8.51 0 0 1 8.5-8.5zm8.5 433h-44.705l8.774-17H200v17zm107.705 0H263v-17h35.931l8.774 17zM367.5 224a8.51 8.51 0 0 1-8.5-8.5 8.51 8.51 0 0 1 8.5-8.5 8.51 8.51 0 0 1 8.5 8.5 8.51 8.51 0 0 1-8.5 8.5zm-136-153c35.565 0 64.5 28.935 64.5 64.5v8.5H167v-8.5c0-35.565 28.935-64.5 64.5-64.5zM167 159h129v17H167v-17zm-71.5 48a8.51 8.51 0 0 1 8.5 8.5 8.51 8.51 0 0 1-8.5 8.5 8.51 8.51 0 0 1-8.5-8.5 8.51 8.51 0 0 1 8.5-8.5zm21.903 17c1.027-2.638 1.597-5.503 1.597-8.5s-.57-5.862-1.597-8.5H128v17h-10.597zM183.5 392a8.51 8.51 0 0 1-8.5-8.5 8.51 8.51 0 0 1 8.5-8.5 8.51 8.51 0 0 1 8.5 8.5 8.51 8.51 0 0 1-8.5 8.5zm8.5-30.403c-2.638-1.027-5.503-1.597-8.5-1.597s-5.862.57-8.5 1.597v-17.572c5.38 2.421 11.069 4.27 17 5.447v12.125zM143 271.5V191h81v25h-24.5c-17.369 0-31.5 14.131-31.5 31.5s14.131 31.5 31.5 31.5H224v57h-16.5c-35.565 0-64.5-28.935-64.5-64.5zm56.5-7.5c-9.098 0-16.5-7.402-16.5-16.5s7.402-16.5 16.5-16.5h64c9.098 0 16.5 7.402 16.5 16.5s-7.402 16.5-16.5 16.5h-64zm80 128a8.51 8.51 0 0 1-8.5-8.5 8.51 8.51 0 0 1 8.5-8.5 8.51 8.51 0 0 1 8.5 8.5 8.51 8.51 0 0 1-8.5 8.5zm8.5-30.403c-2.638-1.027-5.503-1.597-8.5-1.597s-5.862.57-8.5 1.597v-12.125c5.931-1.177 11.62-3.026 17-5.447v17.572zm32-90.097c0 35.565-28.935 64.5-64.5 64.5H239v-57h24.5c17.369 0 31.5-14.131 31.5-31.5S280.869 216 263.5 216H239v-25h81v80.5zm15-64.5h10.597c-1.027 2.638-1.597 5.503-1.597 8.5s.57 5.862 1.597 8.5H335v-17z”/>
thanks for helping get started with a custom UI. CSS and all this template stuff is well over my head but i got a few things working. I dont nearly have as many items (or equal items) in each room and was looking to change the UI up a bit. But the shape of the box doesnt allow for a big name field at the bottom. I was wondering if instead of the square looking buttons if i could make a longer button with the icon to the left and the entity name to the right - kind of how the footer looks, allowing for more chars.
Also because there might only be 1 or 2 items a room, there is a lot of wasted space in the grid on some of these items. I have yet to put all my items for each room, but looking for suggestions on better ways to maybe fill out the screen.
I should mention, i changed the font size in order for the basement light names to fully show up.
I have removed the sidebar as it took up too much screen estate - how do i increase the gap between the button/tiles and the homeassistant menu?
my code in lovelace-ui.yaml is
views:
- type: custom:grid-layout
path: 0
layout:
#default
margin: 0
grid-gap: var(--custom-layout-card-padding)
grid-template-columns: repeat(4, 1fr) 0
grid-template-rows: 0 repeat(2, fit-content(100%)) 0fr
grid-template-areas: |
"sidebar1 . . . ."
"kitchen livingroom hallway main-bedroom ."
"garden landing office home ."
Hey @Mattias_Persson,
When i try to remove transform: translateZ from container, Name on the blur_overlay go behind that blur effect. I couldnt make it done properly. Can you help me with that ? Why is that happening ?
any insight into this please?
mattias
if i do that i get this
layout:
#default
margin: 0
grid-gap: var(--custom-layout-card-padding)
grid-template-columns: repeat(4, 1fr) 0
grid-template-rows: 0 repeat(2, fit-content(100%)) 0fr
grid-template-areas: |
". . . . . ."
". kitchen livingroom hallway main-bedroom ."
". solar landing office home ."
". footer footer footer footer ."
mediaquery:
#phone
makes the gap massive
Yeah, because you didn’t edit grid-template-columns
same
margin: 0
grid-gap: var(--custom-layout-card-padding)
grid-template-columns: repeat(3, 1fr) 0
grid-template-rows: 0 repeat(2, fit-content(100%)) 0fr
grid-template-areas: |
". . . . . ."
". kitchen livingroom hallway main-bedroom ."
". solar landing office home ."
". footer footer footer footer ."
mediaquery:
#phone
my mistak i missed the 0!!