Good evening,
I added your sidebar_active to me, so where should be shown which lights are still on. but unfortunately I only get the status unavailable …
Use the configuration as inspiration. It is not plug and play.
Do you do this in the button card cause I don’t get it to work.
- type: custom:button-card
entities:
- card: "custom:mini-graph-card"
noPadding: true
cardOptions:
name: Humidity
entities:
- sensor.tunex_b301_hum
name: Vardagsrum Temp
style:
width: 10%
custom_fields:
icon_lamp: >
<ha-icon icon="mdi:thermometer"></ha-icon>
styles: *icon_lamp_styles
template: base
tap-action:
action: more-info
this looks nice, I haven’t had success getting mine to display like this, I think it because im using home kit card and it kind of works a little different than mattias implementation.
But all in all this post was exactly what I needed to create a minimalistic dashboard
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
1 Like
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!
1 Like
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.
