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
Hi @henkkeumus I couldn’t change the color of the line. Tried many things but it didn’t work.
Is this where I have to place the color attribute?
graph:
card:
type: sensor
entity: >
[[[ return entity.entity_id; ]]]
graph: line
card_mod:
style: |
.header, .value, .measurement {
display: none !important;
}
Mobiustorr,
Hope you can help me out, I’ve tried using your code for the custom temperature buttons and it appears that i can get the basic design just not the graph any idea what I’m doing wrong here.
Issue
ui-lovelace.yaml
button_card_templates.yaml
Do you have the mini-graph-card installed via HACS? Also, next time post your code using the preformatted text tool, not as a picture.
Using the HA app on iPhone 11, the time/date sensor attributes do not render. Does anyone else have this same problem and/or fix ?
I do yes,
lovelace:
mode: yaml #use ui-lovelace.yaml
resources:
[
{ url: /hacsfiles/apexcharts-card/apexcharts-card.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-card-mod/card-mod.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: "/local/calendar-card.js?v=3.109.1", type: module },
{ url: "/local/custom_icons.js?v=28082021", type: module },
{ url: "/local/mini-graph-card-bundle.js?v=0.11.0", 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 },
Try creating that card in your Lovelace dashboard (might need to create a test dashboard with lovelace ui enabled) and see if you have errors. If so, you might have to try using what I did to enable mini-graph-card.js in my confirmation.yaml. I posted it earlier in the thread.
thanks for all the help mobiustorr, ended up finding that my link to local resources was incorrect i had
{ url: "/local/mini-graph-card-bundle.js?v=0.11.0", type: module },
```instead should have been
{ url: "/local/community/mini-graph-card-bundle.js?v=0.11.0", type: module },
Hej @Mattias_Persson.
Firstly, thank you. For the amount of time and effort you have put into sharing with the community and also helping us mere muggles to achieve the same effects with our not so exciting dashboards.
I have spent a lot of time going through your code, and through countless posts in this thread to help me evolve my dashboard, however with over 3000 posts, obviously I haven’t managed to read them all.
The main problem I have, is that no matter how many posts I scroll through, I cannot for the life of me work out how to simply change the icons in the button cards. I have managed to copy others’ examples, such as an Xbox button and LED strip etc, but I can’t see where to change the icons, without creating an entire SVG?
I know that this question has come up a lot in this thread, so apologies if I’m just being stupid. But do you have a how-to post or anything that just says how to change the icon on the cards, without using an animated SVG? As an example, changing the icon for the Alexa in my screenshot?
I’m okay at coding, but I suck with graphic design. Any help would be greatly appreciated.
Thanks again for your time and effort