Hi There,
I have 2 questions.
Thanks for the advice!
For light switches I just use the base template. You could add && entity.attributes.brightness != undefined condition to circle template.
In the icon_* templates. If you want a simple icon use icon: configuration variable or return <ha-icon icon="mdi:home"></ha-icon>
Just make any edit to ui-lovelace and save after editing button_card_templates.yaml
Thanks! Awesome work!
I would like to build a similar UI. But I have already a working interface which I want to keep working. I know I can use different dashboards. But how do you deal with files like sensors.yaml, configuration.yaml, ui-lovelace.yaml, etc. that are also part of the existing UI? How can I avoid breaking the current dashboard when experimenting with this awesome interface?
Can anyone help me to make slice percent like this ?
Pls
Thanks for your reply. But I still don’t know how to fix it. I have changed the time zone to asia, but I find out that me theme color’s change is not following my time zone, could you tell me how to change it ?
How can you have the big text for the time?
@Mattias_Persson this work is stunning both function-wise as well as visually.
I am completely new to HA (working with itf or a couple of weeks and trying to figure out stuff) and I can understand your ability to help everyone here is very limited…but I am confused, shouldn’t it be that if I install HA with your repository, visually speaking it should look the same? (functionality not given obviously). But I feel like it is missing all custom CSS settings (background colors, font styles, layout etc.) How do I add those and where can I find the CSS settings?
Trying to put a dashboard together for my parents that’s both nice looking and easy to use…
Thanks so much in advance
@VincenzoKoestler
If all CSS is missing you probable haven’t selected the right theme
Click on your user account picture (on desktop bottom option in the HA sidebar) and select the theme “tablet”
Also: This dashboard is not exactly for users who are new to HA, there is a LOT in here, custom components, templates, themes, popups, and everything works together in the specific setup… but unless you have the exact same setup as Mattias, it will take tinkering to get this to work as you want
I am not really new to HA, I have been using it for a few years, but it took me around 3 weeks to get everything setup, granted I have made a ton of changes, but still understanding how everything works and interacts takes some time
Multiple ways to go about it, but generally you want to incorporate your sensors in the example config files, or the other way around, whichever seems easier…
For me the easiest method was to backup my complete HA config, add it to a seperate (VM) HA instance so I could always see my old config, then replace my entire config with Matthias example config and port all my old stuff over one by one…
But again: whatever methods suits you best
If you have been using an older version of this dashboard, in the august update the way the clock is rendered has changed.
Check out your template.yaml somewhere between line 10-20 and compare it with the august updates, it adds span class=“time”
Which is referenced in button_card_templates.yaml in the sidebar block under extra styles (the .time block)
Hi everyone,
It’s been a long time but now it’s time to update the dashboard to have the responsive. Thanks for this feature
However, I have a problem on one of my button-card.
If we look at the old version of my dashboard.
I have a temperature button with a grah. To make this button I made a button + a minigraph using the same coordinates to merge in one and it worked fine.
My old yaml code :
- type: custom:mini-graph-card
entities:
- color: '#0066ff'
entity: sensor.temperature_chambre_william
style:
top: 23.9%
left: 23.8%
width: 47.7%
height: 47.7%
height: 325
line_width: 12
align_state: left
group: false
lower_bound: 18
points_per_hour: 2
hour24: true
hours_to_show: 12
show:
{fill: fade, icon: false, name: false, state: false, name_adaptive_color: true, legend: false, points: false, labels: false}
- type: custom:button-card
entity: sensor.temperature_chambre_william
name: William
style:
top: 23.9%
left: 23.8%
width: 47.7%
hold_action: !include popup/temperature_chambre_william.yaml
tap_action: !include popup/temperature_chambre_william.yaml
template:
- thermometre
- icon_thermometre
I want to reproduce this button with the new responsive dashboard.
Does anyone have a clue? I think I’ll have to do some custom css on the minigraph
I do have custom mini graph card setup in some cards
Relevant ui-lovelace.yaml code:
- type: custom:button-card
entity: sensor.lumi_lumi_weather_temperature
name: Temperatuur
tap_action: !include popup/temperature.yaml
hold_action:
action: none
custom_fields:
graph:
card:
entities:
- sensor.lumi_lumi_weather_temperature
template:
- temperature
- icon_temp
variables:
popup_name: Woonkamer
relevant button_cards_templates.yaml code
temperature:
template:
- base
show_state: false
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"
line_color: "#3182b7"
line_width: 4
font_size: 75
show:
name: false
icon: false
state: false
legend: false
labels: false
styles:
name: [top: 57%, left: 0%, width: 100%, position: absolute]
custom_fields:
graph: [bottom: 0%, left: 0%, width: 100%, position: absolute]
circle:
[
top: 6.5%,
left: 54.5%,
width: 3.5vw,
position: absolute,
letter-spacing: 0.03vw,
]
icon:
- width: 67%
- fill: "#9da0a2"
I suspect you will be able to figure it out from this
To me it’s not really clear what you mean with “slice percent” can you elaborate?
Hi, friend. Could you share the code of the icon and the others you made? include, popup
Thank you
Sure, I have NOT created these myself, only converted them to a working format for this dashboard
Washer:
icon_washer:
styles:
custom_fields:
icon:
- width: 70%
- fill: >
[[[ return variables.state === 'none' ? '#9da0a2' : '#3181b7'; ]]]
custom_fields:
icon: >
[[[
return `
<svg viewBox="0 0 50 50">
<path d="M36.8 9.1H26.1V4.9h10.6v4.2zM41 .6v46.8H7V.6h34zm-2.1 2.1H9.1v42.5h29.8V2.7zM12.3 30.4A11.65 11.65 0 0 1 24 18.7a11.65 11.65 0 0 1 11.7 11.7c0 6.5-5.3 11.7-11.7 11.7s-11.7-5.3-11.7-11.7zm20.6 3.5c-.5.2-1 .2-1.5.2-1.1 0-2.2-.4-2.9-1.2a1.38 1.38 0 0 1-.3-.4c-1 1.2-2.6 1.8-4.2 1.8s-3.2-.6-4.2-1.8c-.8 1-2 1.5-3.3 1.5-.5 0-1-.1-1.5-.2 1.5 3.6 5 6.2 9 6.2s7.5-2.6 8.9-6.1zm-18.5-3.5c0 1 1.1 1.6 2.1 1.6.6 0 2.1-.3 2.1-2.7h2.1c0 2.3 2 2.9 3.2 2.9s3.2-.6 3.2-2.9h2.1c0 2.4 1.5 2.7 2.1 2.7 1 0 2.1-.6 2.1-1.6 0-5.3-4.3-9.6-9.6-9.6s-9.4 4.3-9.4 9.6zm-1-21.3c1.2 0 2.1-1 2.1-2.1 0-1.2-1-2.1-2.1-2.1s-2.1 1-2.1 2.1c-.1 1.2.9 2.1 2.1 2.1z"/>
</svg>
`;
]]]
Dryer:
icon_dryer:
styles:
custom_fields:
icon:
- width: 70%
- fill: >
[[[ return variables.state === 'none' ? '#9da0a2' : '#3181b7'; ]]]
custom_fields:
icon: >
[[[
return `
<svg viewBox="0 0 50 50">
<path d="M37.3 9.2H26.2V5h11.1v4.2zM16.2 30.3c0-4.1 3.5-7.4 7.8-7.4s7.8 3.3 7.8 7.4-3.5 7.4-7.8 7.4-7.8-3.3-7.8-7.4zm2.2 0c0 2.9 2.5 5.3 5.6 5.3s5.5-2.4 5.6-5.3c0-2.9-2.5-5.3-5.6-5.3s-5.6 2.4-5.6 5.3zM12.9 9.2c1.2 0 2.2-.9 2.2-2.1S14.1 5 12.9 5s-2.2.9-2.2 2.1c0 1.1 1 2.1 2.2 2.1zM41.8.7v46.5H6.2V.7h35.6zm-2.3 2.2h-31v42.3h31.1V2.9zM11.8 30.3c0-6.4 5.5-11.6 12.2-11.6s12.2 5.2 12.2 11.6S30.7 42 24 42s-12.2-5.2-12.2-11.7zm2.2 0c0 5.2 4.5 9.5 10 9.5s10-4.3 10-9.5-4.5-9.5-10-9.5-10 4.3-10 9.5z"/>
</svg>
`;
]]]
Curtains (opened and closed)
icon_curtains_combined:
styles:
custom_fields:
icon:
- width: 70%
- stroke: >
[[[ return variables.state === 'closed' ? '#3181b7' : '#9da0a2'; ]]]
custom_fields:
icon: >
[[[ if (entity.state === 'open') return '<svg viewBox="0 0 50 50">
<path d="M10 3v44.5M2 1.8v46.5M48 1.8v46.5M1 3h48m-6 44h6m-5.5-11.5v12.7M40 46h3.5m1-43v17.5M40 3v44.5M5.5 3v17.5m1 15l-.2 12.7M10 46H6.5m.5 1H1" stroke-width="2.5"/> </svg> ' ;
else return '<svg viewBox="0 0 50 50"> <path d="M2 3v44M48 3v44M.8 2.5h48.4M38 47.5h11.2M34.5 35v12m.5-.5h3M43.5 2v18M25 3v44M7.5 2v18m9 15v12m-.5-.5h-3m0 1H.8M38.5 32v15m-26-15v15m3.5.5h19M19.5 8v18m12-18v18" stroke-width="2.5"/> </svg>'; ]]]
Temperature
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>
Thaks brother
how stupid…seems like a fckn basic thing to do 
is it weird that I got the stuff you described as difficult working but wasnt able to changr thr theme?
anyway, I have a completely different setup (like literally not using anything he does except plex)
But so far yesterday evening I was able to get the main dashboard and info screen working with my devices (replaced lights, user, NAS with QNAP, Device with iPad)
TVs are not replaced yet so its gonna take a bit more work but I think I made good progress. Thanks for your help! It finally looks how it is supposed to look fml
Until now it was mainly replacing entities but I guess there is much more coming up
@Mattias_Persson - Can I ask, is there a sensible way to merge the changes you make at your github repo with the local versions?
As obviously everyone is modifying the local lovelace-ui.yaml to add in their own entities etc. is the only option for us to edit in the changes you make by hand using github commit logs, or am I missing a smarter way to do this?
Thanks, my issue is solved !