i see your door icon, is it animated?
or is this the default “icon_closet” icon ?
Yep its the closet icon indeed.
Welp, restored backup and updated every addon again, sidebar still works so I have no clue what broke it in the first place then lol …
@larsvb88 The update broke more than the sidebar. Due to the fact it’s running on a new BT engine and Python 3.0 more addons break with this update unfortunatly. I think rolling back to 6.7 is the best (for me) at this point.
1 Like
That’s sad, did look forced breaking changes but couldn’t find any particular that would affect the sidebar template. Hmm also roll back to a previous backup for now
Mine broke too. But checking the logs showed it was because somehow the sidebar entity was duplicated and it wouldn’t allow two entities with the same name/ID.
So for now I’ve renamed it in template to sidebar2 and referenced that in the UI yaml and everything is running smoothly on the new HA core.
Someone explain to me how it works and what the card lock icon Gives?
hey
perhaps you can help me, i use this code, but now the tilt animation is gone and the biggest problem my graph is not rounded at the bottom and the graph gradient is not high enough, i tried it now for hours, but i had no luck.
can you please help?
- type: custom:button-card
template:
- temperature
- icon_climate
entity: sensor.multisensor_ankleidezimmer
name: Temp
tap_action:
action: none
hold_action:
action: none
custom_fields:
graph:
card:
entities:
- entity: sensor.multisensor_ankleidezimmer
color_thresholds:
- value: 0
color: "#276696"
- value: 69
color: "#228C22"
- value: 75
color: "#d35400"
- value: 76
color: "#c0392b"
and the code from the button-card-templates
temperature:
template:
- base
show_name: true # Hides Card Name
show_state: true # Hides Card state
state_display: >
[[[ return ' '; ]]]
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}°C</text></svg>`; } ]]]
graph:
card:
type: "custom:mini-graph-card"
height: 140
hours_to_show: 24
points_per_hour: 1
line_width: 8
font_size: 75
decimals: 0
animate: true
show:
name: false
icon: false
state: false
legend: false
labels: false
labels_secondary: false
points: false
color_thresholds:
- value: 0
color: "#276696"
- value: 69
color: "#228C22"
- value: 75
color: "#d35400"
- value: 76
color: "#c0392b"
styles:
custom_fields:
graph: [bottom: 8%, left: 2%, width: 123%, position: absolute, margin: 0% 0% -13% -14%]
icon:
- width: 67%
- fill: "#9da0a2"
circle:
- display: initial
- width: 90%
- margin: -6% -5% 0 0
- justify-self: end
- opacity: 1
could you explain what you exactly renamed?
I’m assuming you used my code? A different take on designing a Lovelace UI - #3181 by mobiustorr
I had changed how my code is laid out so maybe you can try the latest version of what I did.
ui-lovelace.yaml:
- type: custom:button-card
entity: sensor.my_ecobee_temperature
name: Temp
tap_action: !include popup/livingroom_temperature.yaml
hold_action:
action: none
custom_fields:
graph:
card:
entities:
- entity: sensor.my_ecobee_temperature
- 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_name: true # Hides Card Name
show_state: true # Hides Card state
state_display: >
[[[ return ' '; ]]]
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}°F</text></svg>`; } ]]]
graph:
card:
type: "custom:mini-graph-card"
height: 140
hours_to_show: 24
points_per_hour: 1
line_width: 8
font_size: 75
decimals: 0
show:
name: false
icon: false
state: false
legend: false
labels: false
labels_secondary: false
points: false
color_thresholds:
- value: 65
color: "#276696"
- value: 75
color: "#228C22"
- value: 76
color: "#d35400"
- value: 78
color: "#c0392b"
styles:
custom_fields:
graph: [bottom: 0%, left: 0%, width: 128%, position: absolute, margin: 0% 0% -13% -14%]
icon:
- width: 67%
- fill: "#9da0a2"
circle:
- display: initial
- width: 90%
- margin: -6% -5% 0 0
- justify-self: end
- opacity: 1
As for fixing the graph not rounding at the bottom of the card, verify you have the “overflow” setting in button_card_templates.yaml. It is near the bottom of the code below.
#################################################
# #
# BASE #
# #
#################################################
base:
template:
- settings
- tilt
- extra_styles
variables:
state_on: >
[[[ return ['on', 'home', 'cool', 'fan_only', 'playing', 'unlocked'].indexOf(entity === undefined || entity.state) !== -1; ]]]
state: >
[[[ return entity === undefined || entity.state; ]]]
entity_id: >
[[[ return entity === undefined || entity.entity_id; ]]]
media_on: >
[[[ return entity === undefined || ['playing', 'paused'].indexOf(entity.state) !== -1; ]]]
media_off: >
[[[ return entity === undefined || ['off', 'idle', 'standby', 'unknown', 'unavailable'].indexOf(entity.state) !== -1; ]]]
entity_picture: >
[[[ return entity === undefined || entity.attributes.entity_picture; ]]]
timeout: >
[[[ return entity === undefined || Date.now() - Date.parse(entity.last_changed); ]]]
tilt_options: >
[[[
let options = {
max: 5,
scale: 1.06,
glare: true,
'max-glare': 0.15,
perspective: 800,
speed: 800,
parallax: '25px'
}
if (this._config.template.includes('conditional_media')) {
options.scale = options.scale % parseInt(options.scale) / 2 + parseInt(options.scale);
options.perspective = options.perspective * 2;
return options;
}
return options;
]]]
aspect_ratio: 1/1
show_state: true
show_icon: false
state_display: >
[[[ if (variables.state === true) return variables.translate_unknown; ]]]
tap_action:
ui_sound_tablet: |
[[[
let screensaver = states[variables.entity_tablet] === undefined ||
states[variables.entity_tablet].state;
if (variables.state === 'off' && screensaver === 'off') {
hass.callService('media_player', 'play_media', {
entity_id: variables.entity_browser_mod,
media_content_id: '/local/sound/on.m4a',
media_content_type: 'music'
});
}
if (variables.state_on && screensaver === 'off') {
hass.callService('media_player', 'play_media', {
entity_id: variables.entity_browser_mod,
media_content_id: '/local/sound/off.m4a',
media_content_type: 'music'
});
}
]]]
action: toggle
haptic: medium
hold_action:
haptic: success
styles:
grid:
- grid-template-areas: |
"icon circle"
"n n"
"s s"
- grid-template-columns: repeat(2, 1fr)
- grid-template-rows: auto repeat(2, min-content)
- gap: 1.3%
- align-items: start
name:
- justify-self: start
- line-height: 121%
state:
- justify-self: start
- line-height: 115%
card:
- border-radius: var(--custom-button-card-border-radius)
- -webkit-tap-highlight-color: rgba(0,0,0,0)
- transition: none
- padding: 11.5% 10.5% 10.5% 11.5%
- overflow: hidden
- --mdc-ripple-color: >
2 Likes
yeah correct, you are complete right,
- overflow: hidden
did the trick, I would never have found that, thank you very much for the help
can you perhaps share your icon ?
icon_temp
icon_temp:
styles:
custom_fields:
icon:
- margin-top: 2%
custom_fields:
icon: >
<svg viewBox="10 5 50 50">
<style>@keyframes animate{0%{transform: scale(0.85);}20%{transform: scale(1.1);}40%{transform: scale(0.95);}60%{transform: scale(1.03);}80%{transform: scale(0.97);}100%{transform: scale(1);}}.animate{animation: animate 0.8s; transform-origin: center;}</style>
<path fill="#9da0a2" d="M41.74 10.852v2h-7.75v-2zm-3.25 4.36h-4.5v2h4.5zm-4.5 6.36h7.75v-2h-7.75zm4.5 2.36h-4.5v2h4.5zm-4.5 6.36h7.75v-2h-7.75zM35.2 41.685A10.14 10.14 0 0 1 25.074 51.81a10.14 10.14 0 0 1-10.125-10.125c0-3.618 1.9-6.906 5-8.725V10.006c0-2.826 2.3-5.125 5.125-5.125s5.125 2.3 5.125 5.125V32.96c3.1 1.817 5 5.106 5 8.725zm-2 0c0-3.07-1.706-5.845-4.453-7.24l-.547-.278v-24.16a3.13 3.13 0 0 0-3.125-3.125 3.13 3.13 0 0 0-3.125 3.125v24.16l-.547.278a8.09 8.09 0 0 0-4.453 7.24c0 4.48 3.645 8.125 8.125 8.125s8.125-3.645 8.125-8.125zm-1.666 0a6.47 6.47 0 0 1-6.459 6.458 6.47 6.47 0 0 1-6.458-6.458 6.46 6.46 0 0 1 4.796-6.233l.37-.1v-22.23h2.583v22.23l.37.1a6.46 6.46 0 0 1 4.796 6.233zm-6.14-4.305c-.154-.684-.842-1.134-1.543-.974a5.31 5.31 0 0 0-4.158 5.207 1.29 1.29 0 0 0 2.58 0c0-1.277.902-2.41 2.147-2.7.692-.16 1.13-.85.974-1.543z"/>
</svg>
3 Likes
thank you , but in your code the 3d function is not avaiable?
your code
mattias code
1 Like
The 3D tilting works for me. I don’t think I did anything special to enable it besides adding it to the configuration.yaml and having the vanilla-tilt.min.js in config/www/.
lovelace:
mode: yaml
resources:
[ { url: /hacsfiles/apexcharts-card/apexcharts-card.js, type: module },
{ url: /hacsfiles/mini-graph-card/mini-graph-card-bundle.js, type: module },
{ url: '/local/community/mini-graph-card/mini-graph-card-bundle.js', type: module },
{ url: /hacsfiles/bar-card/bar-card.js, type: module },
{ url: /hacsfiles/button-card/button-card.js, type: module },
{ url: /hacsfiles/kiosk-mode/kiosk-mode.js, type: module },
{ url: /hacsfiles/light-entity-card/light-entity-card.js, type: module },
{ url: /hacsfiles/light-popup-card/light-popup-card.js, type: module },
{ url: /hacsfiles/lovelace-layout-card/layout-card.js, type: module },
{ url: /hacsfiles/lovelace-slider-entity-row/slider-entity-row.js, type: module },
{ url: /hacsfiles/lovelace-xiaomi-vacuum-map-card/xiaomi-vacuum-map-card.js, type: module },
{ url: /hacsfiles/swipe-card/swipe-card.js, type: module },
{ url: /hacsfiles/compass-card/compass-card.js, type: module },
{ url: /hacsfiles/lovelace-state-switch/state-switch.js, type: module },
{ url: '/local/calendar-card.js?v=3.109.1', type: module },
{ url: '/local/custom-lovelace/upcoming-media-card/upcoming-media-card.js', type: js },
{ url: '/local/custom_icons.js?v=28082021', type: module },
{ url: '/local/marked.min.js?v=4.0.12', type: module },
{ url: '/local/vanilla-tilt.min.js?v=1.7.2', type: module },
{ url: /local/font.css, type: css } ]
perhaps you missunderstand me, the generally 3d tilting works well, but only when i use your code the 3d titlting doesnt work.
that’s strange
the only different is that i use this code to integrate the card, but the card is working
{ url: /hacsfiles/mini-graph-card/mini-graph-card-bundle.js, type: module },
EDIT
has done I forgot to define the tap_action
1 Like
Good morning, who solved the problem with the sidebar and can give us a tip?
If anyone plans to use my code, I updated it so that the “°F” font size for my custom “temperature” button template matches with Matt’s in his “climate” button template.
#################################################
# #
# TEMPERATURE #
# #
#################################################
temperature:
template:
- base
show_name: true # Hides Card Name
show_state: true # Hides Card state
state_display: >
[[[ return ' '; ]]]
custom_fields:
circle: >
[[[ {
const temperature = Math.round(entity.state);
const input = `<tspan font-size="10">°F</tspan>`;
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}${input}</text></svg>`; } ]]]
graph:
card:
type: "custom:mini-graph-card"
height: 140
hours_to_show: 24
points_per_hour: 1
line_width: 8
font_size: 75
decimals: 0
show:
name: false
icon: false
state: false
legend: false
labels: false
labels_secondary: false
points: false
color_thresholds:
- value: 65
color: "#276696"
- value: 75
color: "#228C22"
- value: 76
color: "#d35400"
- value: 78
color: "#c0392b"
styles:
custom_fields:
graph: [bottom: 0%, left: 0%, width: 128%, position: absolute, margin: 0% 0% -13% -14%]
icon:
- width: 67%
- fill: "#9da0a2"
circle:
- display: initial
- width: 90%
- margin: -6% -5% 0 0
- justify-self: end
- opacity: 1
hi… did you made the dryer svg 
Why does my update popup look like this even though there is a HASS update available? When I click update, the inscription appears in the lower left corner and nothing happens.
Where to get the switch.docker watchtower?
Hello. could you share me the time_picker template? Thank you