This is the code I used
- card: 'custom:mini-graph-card'
noPadding: true
cardOptions:
name: Humidity
entities:
- sensor.rm4_humidity
Use single quotes in the name, other than that it looks good to me, I don’t know if the css is causing the issue in this case
Hi there @Mattias_Persson, I was wondering if you could share how you clean up your secrets.yaml file before publishing it to GitHub. Do you manually remove secrets or is there some cool workflow I could follow?
Thanks in advance!
Someone can share a clone of your sd card?, Thank you
hi, did you manage it? have the same problem
Hi
I made the config on button_card_templates exactly 
See below for an updated version compared to what you see above:
cover_gang:
aspect_ratio: 1/1
show_state: true
show_icon: false
state:
- value: 'open'
styles:
card: [background-color: 'rgba(255, 255, 255, 0.8)']
name: [color: 'rgba(0, 0, 0, 0.6)']
state: [color: 'rgba(0, 0, 0, 0.6)']
- value: 'opening'
styles:
card: [background-color: 'rgba(255, 255, 255, 0.8)']
name: [color: 'rgba(0, 0, 0, 0.6)']
state: [color: 'rgba(0, 0, 0, 0.6)']
- value: 'closing'
styles:
card: [background-color: 'rgba(255, 255, 255, 0.8)']
name: [color: 'rgba(0, 0, 0, 0.6)']
state: [color: 'rgba(0, 0, 0, 0.6)']
styles:
name:
[top: 57.7%, left: 11%, line-height: 2vw, position: absolute]
state:
[top: 74%, left: 11%, line-height: 2vw, position: absolute]
card:
[font-family: Sf Display, letter-spacing: 0.05vw, font-weight: 400, color: 'rgba(255, 255, 255, 0.3)', font-size: 1.34vw,
background-color: 'rgba(115, 115, 115, 0.2)', border-radius: 0.8vw, box-shadow: none, transition: none]
custom_fields:
circle:
[top: 8.5%, left: 56.2%, width: 3.5vw, position: absolute, letter-spacing: 0.03vw, color: 'rgba(141, 142, 144, 1)']
temp:
[top: 28%, left: 6%, width: 5vw, position: absolute, font-size: 1.2vw, color: 'rgba(141, 142, 144, 1)']
icon:
[top: 8.5%, left: 11.2%, width: 1.5vw, position: absolute, color: 'rgba(141, 142, 144, 1)']
custom_fields:
temp: >
[[[
return states['sensor.gang_sensor_temperature'].state + '°C';
]]]
circle: >
[[[ if (entity.state === 'open') {
const position = states['sensor.velux_position_gang'].state;
const radius = 20.5; const circumference = radius * 2 * Math.PI;
return `<svg viewBox="0 0 50 50"><circle cx="25" cy="25" r="${radius}" stroke="#b2b2b2" stroke-width="1.5" fill="none" style="
transform: rotate(-90deg); transform-origin: 50% 50%; stroke-dasharray: ${circumference}; stroke-dashoffset: ${circumference - position / 100 * circumference};" />
<text x="50%" y="54%" fill="#8d8e90" font-size="14" text-anchor="middle" alignment-baseline="middle">${position}<tspan font-size="10">%</tspan></text></svg>`; } ]]]
icon: >
[[[ return `<ha-icon icon="mdi:thermometer" > </ha-icon>` ]]]
In your lovelace.yaml
- type: custom:button-card
entity: cover.velux_gang
triggers_update:
['cover.velux_gang', 'input_boolean.velux_gang']
style:
top: 51.45%
left: 49.18%
width: 10%
tap_action:
action: call-service
service: cover.toggle
service_data:
entity_id: cover.velux_gang
hold_action: !include popup/velux_gang.yaml
template: cover_gang
the popup
action: call-service
service: browser_mod.popup
service_data:
title: Velux Gang
deviceID: this
card:
type: custom:stack-in-card
cards:
- type: entities
show_header_toggle: false
entities:
- entity: cover.velux_gang
name: Åben/luk
secondary_info: last-changed
style: |
:host {
--paper-item-icon-color:
{% if is_state(config.entity, 'on') %}
#3182b7
{% else %}
#9e9e9e
{% endif %};
}
- type: custom:slider-entity-row
entity: cover.velux_gang
name: Juster manuelt
min: 0
max: 100
step: 1
attribute: position
- entity: automation.open_velux_gang_temp
icon: mdi:chart-bell-curve-cumulative
name: Åben hvis temp > 26 °C
- type: custom:mini-graph-card
entities:
- color: '#385581'
entity: sensor.gang_sensor_temperature
line_width: 8
hour24: true
group: true
align_icon: left
align_state: right
align_header: left
hours_to_show: 24
show:
fill: fade
icon: true
name: true
state: true
name_adaptive_color: false
labels: hover
legend: false
style: |
ha-card {
border-radius: 0.35em;
background: none;
box-shadow: none;
margin-top: -0.4em;
}
.name > span, .state > span.state__value.ellipsis,
.state > span.state__uom.ellipsis {
font-size: 14px !important;
font-weight: 400 !important;
opacity: 1 !important;
}
.name > span {
margin-left: 16px !important;
}
.icon {
margin-left: 31px !important;
}
.state {
margin-top: -36px;
margin-right: 33px;
}
.state > span.state__uom.ellipsis {
margin-top: -3px;
}
.state > div {
opacity: 0;
}
tap_action:
action: none
Let me know if it works
Hi @Mattias_Persson,
I’m just a newbie in the world of HA.
This is the most beautifull dashboard i’ve seen. Congrats!
Is there a walktrough on how to begin doing this beginning from a ‘new’ HA installation?
This would be a great way to get an amazing dashboard and a way to learn the HA ecosystem more in detail.
Thanks in advance,
Kind regards
Thanks for sharing. I had it already working, but de % display i will copie.
@Mattias_Persson or who knows,
Can someone help me how i can get it to fit my ipad screen. When i use full kiosk on the ipad i get a space at the bottom below the corona line (the lighter part). I have tried different things but i am stuck.
Hehe. It’s manually redacted
Thanks for the swift response and congratulations to the great project. It’s really beautiful and a great demonstration for what lovelace can be capable of!
i’m new to home assistant, so i am sorry if the question is silly but… how do i import your repository so that i can get the exact same ui/configuration that you have? i’m aware that entities might be missing etc, but i can’t understand what is that i need to get the UI like yours, i just love it
Hi! If I want to have these borders, where and how can I include these syntaxes?
I’ll be placing this ‘glow in the side’ on a pop up for the sidebar footer.
This will be my indicator if the state is on/off for all the pop up cards in the sidebar footer.
TIA
P.S I tried to include it in themes.yaml and button_card_template.yaml but to no avail. I am not knowledgeable with CSS styles.
Hi again @Mattias_Persson,
Thanks for your support.
For testing, I took your snippet adding your air purifier and switched your switch (switch.air_purifier) to my switch (switch.deltaco_garage_1_1) as below:
- type: custom:button-card
entity: switch.deltaco_garage_1_1
triggers_update: 'switch.deltaco_garage_1_1'
style:
top: 89.5%
left: 38.31%
width: 10%
tap_action:
action: toggle
hold_action: !include popup/sovrum_luftrenare.yaml
custom_fields:
icon_air_purifier: >
<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>
styles:
custom_fields:
icon_air_purifier:
[top: 11%, left: 6.3%, width: 3.05vw, position: absolute,
fill: "[[[ return entity.state === 'on' ? '#5daeea' : '#9da0a2'; ]]]"]
template: ['base', 'loader']
I get the error (in the browser):
ButtonCardJSTemplateError: TypeError: undefined is not an object (evaluating 'states[entity.entity_id.replace(entity.entity_id.split('.')[0], 'input_boolean')].state') [...]
Any ideas based on this?
Thanks!
My Markdown sidebar is not displaying properly. Have I forgotten something or did I something wrong?
You could check if the ‘tablet’ theme is being loaded properly. You need to include the location in configuration.yaml. after that select it for the user you are using or include it in the lovelace yaml of this dashboard.
