If this is your card padding
padding: 11.5% 10.5% 10.5% 11.5%
try this on your graph
margin: -11.5% -10.5% -10.5% -11.5%
All right, use entity.attributes.percentage or you can have an input helper in the background and track that state. Also I see no colors defined, only --button-card-light-color and that is a variable for lights?
I may be showing my ignorance here, but yes --button-card-light-color is for lights, I was just using a variable with a predictable colour. I’ve since changed it to ‘goldenrod’ for testing purposes.
You suggest entity.attributes.percentage rather than variables.circle_input? if so, results are the same - the only time the background color updates is when I close/reopen the popup.
I’ve attached a capture of what I am experiencing (sorry for the quality, first time doing this)
edit: I think it has something to do with the browser_mod popup not refreshing. I took all my buttons outside of the popup and the buttons behave as I expected them to.
Yup, just tried it too. I don’t know if it’s always been like that or not
card_mod solution
- type: custom:button-card
entity: fan.climate_fan_only
tap_action:
action: call-service
service: fan.set_percentage
service_data:
percentage: 33
entity_id: fan.climate_fan_only
card_mod:
style: |
ha-card {
background-color: {{ 'red' if is_state_attr(config.entity, 'percentage', 33) }};
}
added my fix in the buttoncard template yaml
Hi, I want the icon on to be an attribute, not a state
- type: custom:button-card
entity: climate.livingroom
name: Thermostat
tap_action:
!include popup/living_climate.yaml
template:
- base
- icon_climate
- climate
variables:
circle_input: >
[[[
if (entity) {
return entity.state === 'heat' ?
entity.attributes.temperature :
entity.attributes.current_temperature;
}
]]]
icon_climate:
styles:
custom_fields:
icon:
- width: 78%
- margin-left: -10%
- fill: >
[[[ return variables.attributes.hvac_modes === 'heat' || variables.state === 'fan_only' ? '#5daeea' : '#9da0a2'; ]]]
custom_fields:
icon: >
<svg viewBox="0 0 50 50">
<path d="M36.8 1.2v1.7a5.34 5.34 0 0 1-5.3 5.3H18.4a5.34 5.34 0 0 1-5.3-5.3V1.2c-2.6.4-4.7 2.8-4.7 5.6v36.5c0 3.1 2.6 5.7 5.7 5.7h21.8c3.1 0 5.7-2.6 5.7-5.7V6.8c0-2.8-2.1-5.2-4.8-5.6zm-1.7 35.6c-.2 0-.4 0-.5-.1-.4-.1-1.2-.2-2.4-.6-.5-.2-.8-.3-1.2-.4-.3-.1-.7-.3-1.4-.5-1-.4-1.5-.5-1.9-.6-.5-.1-1.1-.2-1.9-.2s-1.4.2-1.9.4c-1 .3-1.8.7-2.1.9l-.6.3a9.75 9.75 0 0 1-1.4.6c-.3.1-.9.3-1.6.3h-.3c-.4 0-1 0-2-.2-.3-.1-.6-.1-.8-.2v-2.7l1.3.3c.5.1 1.3.2 1.7.2.5 0 .9-.2 1.1-.2.4-.1.6-.2 1-.4.2-.1.4-.2.7-.4.4-.2 1.3-.7 2.5-1 .6-.2 1.4-.4 2.5-.5s2 .1 2.5.2c.6.1 1.2.3 2.2.7l1.5.5c.3.1.6.2 1 .4 1 .3 1.8.5 2.1.5h.1v2.7zm0-6c-.2 0-.4 0-.5-.1-.4-.1-1.2-.2-2.4-.6-.5-.2-.8-.3-1.2-.4-.3-.1-.7-.3-1.4-.5-1-.4-1.5-.5-1.9-.6-.5-.1-1.1-.2-1.9-.2s-1.4.2-1.9.4c-1 .3-1.8.7-2.1.9l-.6.3a9.75 9.75 0 0 1-1.4.6c-.3.1-.9.3-1.6.3h-.3c-.4 0-1 0-2-.2-.3-.1-.6-.1-.8-.2v-2.7l1.3.3c.5.1 1.3.2 1.7.2.5 0 .9-.2 1.1-.2.4-.1.6-.2 1-.4.2-.1.4-.2.7-.4.4-.2 1.3-.7 2.5-1 .6-.2 1.4-.4 2.5-.5s2 .1 2.5.2c.6.1 1.2.3 2.2.7l1.5.5c.3.1.6.2 1 .4 1 .3 1.8.5 2.1.5h.1v2.7zm0-6c-.2 0-.4 0-.5-.1-.4-.1-1.2-.2-2.4-.6-.5-.2-.8-.3-1.2-.4-.3-.1-.7-.3-1.4-.5-1-.4-1.5-.5-1.9-.6-.5-.1-1.1-.2-1.9-.2s-1.4.2-1.9.4c-1 .3-1.8.7-2.1.9l-.6.3c-.4.2-.8.4-1.4.6-.3.1-.9.3-1.6.3h-.3c-.4 0-1 0-2-.2-.3-.1-.6-.1-.8-.2v-2.7l1.3.3c.5.1 1.3.2 1.7.2.5 0 .9-.2 1.1-.2.4-.1.6-.2 1-.4.2-.1.4-.2.7-.4.4-.2 1.3-.7 2.5-1 .6-.2 1.4-.4 2.5-.5s2 .1 2.5.2c.6.1 1.2.3 2.2.7l1.5.5c.3.1.6.2 1 .4 1 .3 1.8.5 2.1.5h.1v2.7zM15.7 1.9v-.8h18.6V3c0 1.5-1.2 2.8-2.8 2.8H18.4c-1.5 0-2.8-1.2-2.8-2.8V1.9z"/>
</svg>
Hey, on my Media card (Conditional Media) while on “Recent downloaded”, the text appear in the middle of the card instead of the bottom on the blurred area, why is that?
I tried to change the state>padding-bottom but the middle is the lowest I can get it to be
HI Mattias
THank you i try this…
I can get it down, but not the full width…
This is how it looked before:
this is the template:
temperature:
template:
- base
show_state: false
show_name: false
show_last_changed: true
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">${temperature}°</text></svg>`; } ]]]
graph:
card:
type: "custom:mini-graph-card"
color_thresholds:
- color: '#f53a1b'
value: 25
- color: '#ef6a12'
value: 22
- color: '#8ff331'
value: 20
- color: '#00a1ff'
value: 17
line_width: 4
font_size: 75
margin: -11.5% -10.5% -10.5% -11.5%
show:
name: false
icon: false
state: false
legend: false
labels: false
styles:
name: [top: 87%, left: 0%, width: 100%, position: absolute]
label: [top: 85%, left: -15%, width: 100%, position: absolute, font-family: Sf Display, font-size: 0.90vw]
custom_fields:
graph: [bottom: 0%, left: 0%, width: 100%, position: absolute, margin: -11.5% -10.5% -10.5% -11.5%]
circle:
[
top: 1%,
left: 36%,
width: 3.5vw,
position: absolute,
letter-spacing: 0.03vw,
]
icon:
- width: 67%
- fill: "#9da0a2"
And lovelace:
- type: custom:button-card
entity: sensor.temperature_11
tap_action:
action: more-info
name: Temperatur
hold_action:
action: none
custom_fields:
graph:
card:
entities:
- sensor.temperature_11
template:
- temperature
- icon_temp
variables:
popup_name: Wohnzimmer
1 Like
Beauty, it works like a charm. Thank you so much!
I can google, but I’d love to know your suggestions for further reading? Or even ways to better my understanding of the whole system.
Again thank you for your help!
I would like to try this one, Can u also share ur icon_temp code?
@Mattias_Persson hello and congratulations again, this dashboard is fantastic, I have a problem with the display that I cannot solve, I have increased the columns as in the photo but I see them badly only on a PC and on a smartphone as per the attached images
this is phone
this is PC
on tablet instead I see them well, since I would like to use your work on all devices and completely disconnect from storage, how can I solve this problem, I’m hitting my head, this is the grid I used…
views:
- type: custom:grid-layout
path: 0
layout:
#default
margin: 0
grid-gap: var(--custom-layout-card-padding)
grid-template-columns: repeat(5, 1fr) 0
grid-template-rows: 0 repeat(3, fit-content(100%)) 0fr
grid-template-areas: |
"sidebar . . . . ."
"sidebar soggiorno notte scene cucina ."
"sidebar media altro casa test ."
"sidebar footer footer footer footer ."
mediaquery:
#phone
"(max-width: 800px)":
grid-gap: calc(var(--custom-layout-card-padding) * 1.5)
grid-template-columns: 0 repeat(2, 1fr) 0
grid-template-rows: 0 repeat(6, fit-content(100%)) 0fr
grid-template-areas: |
". . . ."
". sidebar sidebar ."
". soggiorno notte ."
". scene altro ."
". test cucina ."
". media casa ."
". footer footer ."
". . . ."
#portrait
"(max-width: 1200px)":
grid-gap: var(--custom-layout-card-padding)
grid-template-columns: repeat(4, 1fr) 0
grid-template-rows: 0 repeat(4, fit-content(100%)) 0fr
grid-template-areas: |
"sidebar . . . ."
"sidebar soggiorno notte cucina ."
"sidebar scene altro test ."
"sidebar media casa . ."
"sidebar footer footer footer ."
cards:
- type: custom:button-card
styles: #extra_styles fix
card:
- display: none
thank you so much in advance for your help
of course…
icon_temp:
custom_fields:
icon: >
<svg viewBox="0 0 50 50">
<path d="M32.8 28.2V8.4A8.28 8.28 0 0 0 24.5.1a8.28 8.28 0 0 0-8.3 8.3v19.7c-2.5 2.3-4.1 5.6-4.1 9.3 0 6.9 5.6 12.4 12.4 12.4s12.4-5.6 12.4-12.4c0-3.7-1.6-7-4.1-9.2zm-8.3 17.5a8.28 8.28 0 0 1-8.3-8.3 8.2 8.2 0 0 1 2.8-6.2l1.4-1.2V8.4c0-2.3 1.9-4.1 4.1-4.1s4.1 1.9 4.1 4.1V30l1.4 1.2c1.7 1.6 2.8 3.8 2.8 6.2a8.28 8.28 0 0 1-8.3 8.3zm-2.1-29h4.1v24.8h-4.1V16.7zm2.1 14.5c3.4 0 6.2 2.8 6.2 6.2s-2.8 6.2-6.2 6.2-6.2-2.8-6.2-6.2 2.8-6.2 6.2-6.2z"/>
</svg>
2 Likes
Hi @xADDRx, you might want to add “overflow: hidden” property to the “base” (in styles > card, around the line 116-117 in button_card_templates.yaml) and then change the margin of “temperature” to “0% 0% -15% -13%”. It’s maybe not the best way to fix it but it works perfectly for me:
3 Likes
now looks better:
but not the full width…
Any Idea?
Hi @danieljarhult , Do you know if you can integrate another calendar in this script. If so, do you know how to write the code?
Yes, change the style to this, it will fix the graph width and the position of the circle:
styles:
name: [top: 87%, left: 0%, width: 100%, position: absolute]
label: [top: 75%, left: 0%, width: 100%, position: absolute, font-family: Sf Display, font-size: 0.90vw]
custom_fields:
graph: [bottom: 0%, left: 0%, width: 130%, position: absolute, margin: 0% 0% -13% -15%]
circle:
[
top: -7%,
left: 20%,
width: 3.5vw,
position: absolute,
letter-spacing: 0.03vw,
]
icon:
- width: 67%
- fill: "#9da0a2"
I moved the label slightly up (“vor 1 Minute”) but if you want to keep it down like you have currently, change the “label: [top: xx%” and increase the number to move it down.
Cheers
2 Likes
THANK YOU!
It works.
should work depending on how you calendar sensor looks like. Send me a direct message with your calendar sensors and a screenshot of their attributes etc and i can take a look.
@danieljarhult I only have two calendars integrated in the iCal sensor, which gives me similar sensors but with different calendars.
At the beginning of the code, it is no problem to add both and it works in the popup calendar.
It is in the lower part of the code then when sensor.ical_johan_kalender_event_1 comes that I do not know how to get sensor.ical_annika_kalender_event_1 so it shows from both calendars.
At a quick glance I spotted some grid inconsistencies
default
grid rows: 0 repeat(3, fit-content(100%)) 0fr = 5
area rows: sidebar sidebar sidebar sidebar = 4
portrait
grid rows: 0 repeat(4, fit-content(100%)) 0fr = 6
area rows: sidebar sidebar sidebar sidebar sidebar = 5
You can also try to disable the theme to see if a style’s messing with the layout