Do you have a guide for install youre setup?
I have manage to install matt config before.
Can i just copy all or do manually need to change something.
Maybe some guideline how the setup it up or some requirement before install. Do I need to wipe Matt config before and start all over ?
its Working!! thx 
Yes, I have found that file. The question is, do I need the icon file stored somewhere?
When I look at the code from example the hue_lamp. I see a path etc.
Ok I have a very noob question, the installation says
ui-lovelace.yamlbutton_card_templates folderpopup folderthemes foldersidebar.yamlBut where do I paste these folders to? Just insider the main area where I have configuration.yaml etc present? or somewhere specific?
Did anyone has a nanoleaf and use it with with matts ui?
I try to get this effect-button:
on the light popup from my nanoleaf light:
But I had no idea how this could work.
I dived into your code 
When I’m correct you switch based on heating / idle, right.
For me your code is already difficult , but I think for my situation it’s even more complex, and I can’t figure it out 
.
This my entity:
What I try to accomplish…
The havc_mode are ‘off’ auto and heat.
Havc_mode ‘off’
Grey out button and icon ( like the device is off )
State _display: Uit
Havc_mode auto
Button background colour ( like the device is on ) and the icon green
State_display: Auto
Havc_mode heat
Button background colour (like device is on)
And the icon red
State_display: Heat
You have the same as me, use the current climate state. havc_action. What you show are the modes your climate can do.
I understand, that’s correct.
But I always monitor the “auto”
For example:
Now ad this moment my wife is in het salon working, because every day she starts and ends ad different times, she manual sets the target temp.
Now the status is heat, but under action it’s idle.
Edit: from the other side, when I use your approach, I see it only when it’s really asking for heat?
Here is my code:
sidebar.yaml
- sensor:
- unique_id: sidebartime
state: template
attributes:
time: >
{% set hours = now().strftime('%H') %}
{% set minutes = now().strftime('%M') %}
<span class="time">
{{ hours }}<span class="time-colon">:</span>{{ minutes }}
</span>
- unique_id: sidebar
state: template
attributes:
time: >
{% set hours = now().strftime('%H') %}
{% set minutes = now().strftime('%M') %}
<span class="time">
{{ hours }}<span class="time-colon">:</span>{{ minutes }}
</span>
date: >
<font color='#6a7377'><b>
{% if strptime(states('sensor.date'), '%Y-%m-%d').day != None %}
{% set days = ['Maandag', 'Dinsdag', 'Woensdag', 'Donderdag', 'Vrijdag', 'Zaterdag', 'Zondag'] %}
{% set months = ['Januari', 'Februari', 'Maart', 'April', 'Mei', 'Juni',
'Juli', 'Augustus', 'September', 'Oktober', 'November', 'December'] %}
{{ days[now().weekday()] }}
{{ strptime(states('sensor.date'), '%Y-%m-%d').day }} {{ months[now().month-1] }}
{% endif %}
</b></font>
agenda: >
<font color='#ffffff' size='4px'>
{% for i in range(0, 8) %}
{% if is_state('sensor.ical_timenmieke_event_' + i|string,'unavailable') %}
{% elif as_timestamp(state_attr('sensor.ical_timenmieke_event_' + i|string, "start"))|timestamp_custom('%-d')
== as_timestamp(now())|timestamp_custom('%-d') %}
📅   {{ as_timestamp(state_attr('sensor.ical_timenmieke_event_' + i|string, "start")) | timestamp_custom('%H:%M') }}
{{ state_attr('sensor.ical_timenmieke_event_' + i|string, "summary") }}<br>
{% endif %}
{% endfor%}
</font>
- unique_id: sidebar2
state: template
attributes:
time: >
{% set hours = now().strftime('%H') %}
{% set minutes = now().strftime('%M') %}
<span class="time">
{{ hours }}<span class="time-colon">:</span>{{ minutes }}
</span>
date: >
<font color='#6a7377'><b>
{% if strptime(states('sensor.date'), '%Y-%m-%d').day != None %}
{% set days = ['Maandag', 'Dinsdag', 'Woensdag', 'Donderdag', 'Vrijdag', 'Zaterdag', 'Zondag'] %}
{% set months = ['Januari', 'Februari', 'Maart', 'April', 'Mei', 'Juni',
'Juli', 'Augustus', 'September', 'Oktober', 'November', 'December'] %}
{{ days[now().weekday()] }}
{{ strptime(states('sensor.date'), '%Y-%m-%d').day }} {{ months[now().month-1] }}
{% endif %}
</b></font>
- unique_id: sidebar3
state: template
attributes:
date: >
{% if strptime(states('sensor.date'), '%Y-%m-%d').day != None %}
{% set days = ['Maandag', 'Dinsdag', 'Woensdag', 'Donderdag', 'Vrijdag', 'Zaterdag', 'Zondag'] %}
{% set months = ['Januari', 'Februari', 'Maart', 'April', 'Mei', 'Juni',
'Juli', 'Augustus', 'September', 'Oktober', 'November', 'December'] %}
{% set hours = now().strftime('%H') %}
{% set minutes = now().strftime('%M') %}
<span class="time">{{ hours }}<span class="time-colon">:</span>{{ minutes }} </span>
<font color='#6a7377'><b>
{{ days[now().weekday()] }}
{{ strptime(states('sensor.date'), '%Y-%m-%d').day }} {{ months[now().month-1] }}
{% endif %}
</b></font>
- unique_id: sidebar_weather
state: template
attributes:
weather: >
{% set entity = 'sensor.wupws_weather_1d' %}
{% if not is_state(entity, 'unknown') %}
{% set weather = states('sensor.wupws_weather_1d') %}
<font color='#6a7377'><b>Vandaag</font></b><br><font color='#6a7377' size='4px'>{{ weather }}</font>
{% else %}
{% set weather2 = states('sensor.wupws_weather_1n') %}
<font color='#6a7377'><b>Vanavond</font></b><br><font color='#6a7377' size='4px'>{{ weather2 }}</font>
{% endif %}
- unique_id: sidebar_vacuum
state: template
attributes:
vacuum: >
{% set entity_id = 'vacuum.dollie' %}
{% set entity_id = 'vacuum.dollie' %}
{% if is_state(entity_id, 'cleaning') %}
<b>Dollie is aan het stofzuigen</b>
{% elif is_state(entity_id, 'returning') %}
<b>Dollie is klaar</b>
{% endif %}
- unique_id: sidebar_vacuum2
state: template
attributes:
vacuum: >
{% set entity_id = 'vacuum.herman' %}
{% set entity_id = 'vacuum.herman' %}
{% if is_state(entity_id, 'cleaning') %}
<b>Herman is aan het maaien</b>
{% elif is_state(entity_id, 'returning') %}
<b>Herman gaat terug naar station</b>
{% endif %}
- unique_id: sidebar_active
state: template
attributes:
active: >
<b>
{% set lights = [
states.light.bios_spots,
states.light.eettafel,
states.light.gevellampen,
states.light.haard_licht,
states.light.inloopkast,
states.light.keuken_spots_channel_1,
states.light.keukennis_spot,
states.light.kookeiland_spots,
states.light.lamp_schuifpui,
states.light.luifel_boven,
states.light.luifel_onder_channel_1,
states.light.muurspots,
states.light.sauna,
states.light.slaapkamer_licht,
states.light.spiegel_channel_1,
states.light.tuin_lampen,
states.light.voordeur_licht,
states.light.woonkamer_licht_achter,
states.light.woonkamer_licht_voor,
states.light.zwembad_verlichting
] %}
{% set devices = [
states.media_player.samsung_the_frame_43,
states.climate.airconditioning
] %}
{% set lights_on = lights | selectattr('state','eq','on') | list %}
{% set lights_name = lights | selectattr('state','eq','on') | map(attribute='name') | join(', ') %}
{% set devices_on = devices | selectattr('state','search','(on|cool|fan_only|playing)') | list %}
{% set devices_name = devices_on | map(attribute='name') | join(', ') %}
{% if (lights_on | length == 0) and (devices_on | length > 0) %}
{{ devices_name | regex_replace(',([^,]*)$',' och\\1') }} is aan
{% elif (lights_on | length == 1) and (devices_on | length == 1) %}
{{ lights_name }} en {{devices_name }} zijn aan
{% elif (lights_on | length == 1) and (devices_on | length > 1) %}
{{ lights_name }}, {{ devices_name | regex_replace(',([^,]*)$',' och\\1') }} zijn aan
{% elif (lights_on | length > 1) and (devices_on | length == 1) %}
{{ lights_on | length }} lampen en {{ devices_name }} zijn aan
{% elif (lights_on | length > 1) and (devices_on | length > 1) %}
{{ lights_on | length }} lampen, {{ devices_name | regex_replace(',([^,]*)$',' och\\1') }} zijn aan
{% elif (lights_on | length == 1) and (devices_on | length == 0) %}
{{ lights_name }} is aan
{% elif (lights_on | length > 1) and (devices_on | length == 0) %}
{{ lights_on | length }} lampen zijn aan
{% endif %}
</b>
- unique_id: sidebar_beregening
state: template
attributes:
beregening: >
[[[
if (states['input_boolean.irrigation_cycle1_running'].state == 'on')
var cycle = 'cycle1';
else if (states['input_boolean.irrigation_cycle2_running'].state == 'on')
var cycle = 'cycle2';
else if (states['input_boolean.irrigation_cycle3_running'].state == 'on')
var cycle = 'cycle3';
else
var cycle = 'cycle0';
var zone = '{{ zone }}';
var zone_name = states['input_text.irrigation_' + zone + '_name' ].state;
var zone_timer_status = entity.state;
if (cycle == 'cycle0')
return zone_name;
else if (zone_timer_status == 'active')
return 'Watering ' + zone_name;
else
return zone_name;
]]]
lovelace-ui.yaml sidebar part
- type: vertical-stack
view_layout:
grid-area: sidebar
cards:
- type: custom:button-card
entity: sensor.template_sidebar
template: sidebar
- type: custom:button-card
entity: sensor.template_sidebar_weather
template: sidebar
- type: custom:button-card
entity: sensor.template_sidebar_vacuum
template: sidebar
tap_action:
!include popup/footer_vacuum.yaml
- type: custom:button-card
entity: sensor.template_sidebar_vacuum2
template: sidebar
- type: custom:button-card
entity: sensor.template_sidebar_active
template: sidebar
tap_action:
!include popup/active.yaml
- type: horizontal-stack
mode: horizontal
cards:
- type: custom:button-card
entity: person.tim
entity_picture: /local/timkleur2.png
show_entity_picture: true
show_name: false
tap_action:
!include popup/tim.yaml
state:
- value: 'not_home'
styles:
card:
- filter: opacity(50%)
icon:
- filter: grayscale(90%)
template: footer2
card_mod:
style: |
ha-card {
margin: 2vh;
}
- type: custom:button-card
entity: person.mieke
entity_picture: /local/miekekleur2.png
show_entity_picture: true
show_name: false
tap_action:
!include popup/mieke.yaml
state:
- value: 'not_home'
styles:
card:
- filter: opacity(50%)
icon:
- filter: grayscale(90%)
template: footer2
card_mod:
style: |
ha-card {
margin: 2vh;
}
card_mod:
style: |
ha-card {
border: none;
--card-height: inherit !important;
position: absolute;
bottom: 4vh;
left: 6vh;
}
@media (max-width: 400px) {
ha-card {
position: inherit;
}
}
did you manage to solve it already? Maybe it has to do with an upgrade of Hass since after moving the docker the latest image was pulled.
Anybody else having the same issue?
i fixed it by updating card_mod and clearing cache then its back to normal.
Nice! did the same. I also change this:A different take on designing a Lovelace UI - #5453 by VietNgoc
Hi,
Its not working. Its showing “null”
Do anyone know? and have some nice sidebar for “uptime” also 
- sensor:
- unique_id: sidebar
state: template
attributes:
time: >
{% set hours = now().strftime('%H') %}
{% set minutes = now().strftime('%M') %}
<span class="time">
{{ hours }}<span class="time-colon">:</span>{{ minutes }}
</span>
date: >
<font color='#6a7377'><b>
{% if strptime(states('sensor.date'), '%Y-%m-%d').day != None %}
{% set days = ['Måndag', 'Tisdag', 'Onsdag', 'Torsdag', 'Fredag', 'Lördag', 'Söndag'] %}
{% set months = ['Januari', 'Februari', 'Mars', 'April', 'Maj', 'Juni',
'Juli', 'Augusti', 'September', 'Oktober', 'November', 'December'] %}
{{ days[now().weekday()] }}<br>
{{ strptime(states('sensor.date'), '%Y-%m-%d').day }} {{ months[now().month-1] }}
{% endif %}
</b></font>
agenda: >
<font color='#ffffff' size='4px'>
{% for i in range(0, 8) %}
{% if is_state('sensor.ical_privat_event_0' + i|string,'unavailable') %}
{% elif as_timestamp(state_attr('sensor.ical_privat_event_0' + i|string, "start"))|timestamp_custom('%-d')
== as_timestamp(now())|timestamp_custom('%-d') %}
📅   {{ as_timestamp(state_attr('sensor.ical_privat_event_0' + i|string, "start")) | timestamp_custom('%H:%M') }}
{{ state_attr('sensor.ical_privat_event_0' + i|string, "summary") }}<br>
{% endif %}
{% endfor%}
</font>
greet: >
<b>
{% set time = now().hour %}
{% if time <= 1 %} God natt {{'\U0001F611'}}
{% elif time <= 3 %} God natt {{'\U0001F62A'}}
{% elif time <= 5 %} God natt {{'\U0001F634'}}
{% elif time <= 7 %} God morgon {{'\U0001F4A9'}}
{% elif time <= 9 %} God morgon {{'\u2615\uFE0F'}}
{% elif time <= 10 %} God morgon {{'\U0001F642'}}
{% elif time <= 13 %} God dag {{'\U0001F60A'}}
{% elif time <= 15 %} God dag {{'\U0001F60E'}}
{% elif time <= 17 %} God dag {{'\U0001F44B\U0001F3FB'}}
{% elif time <= 19 %} God kväll {{'\U0001F44B\U0001F3FB'}}
{% elif time <= 22 %} God kväll {{'\U0001F60C'}}
{% elif time <= 23 %} God kväll {{'\U0001F974'}}
{% else %} God kväll {{'\U0001F974'}}
{% endif %}
</b>
active: >
<b>
{% set lights = [
states.light.hall,
states.light.sovrum_tak,
states.light.sovrum_sang,
states.light.sovrum_tv_slinga,
states.light.badrum,
states.light.kok_lounge,
states.light.kok_diskmaskin,
states.light.kok_kylskap,
states.light.vardagsrum_matbord,
states.light.vardagsrum_golv,
states.light.vardagsrum_soffa,
states.light.vardagsrum_tv_bord,
states.light.vardagsrum_tv_slinga,
] %}
{% set devices = [
states.switch.eluttag,
states.switch.kamera,
states.switch.uvc_g3_dome_privacy_mode,
states.switch.ps5_321_power,
states.media_player.apple_tv,
states.media_player.sony_tv,
states.media_player.lg_tv
] %}
{% set lights_on = lights | selectattr('state','eq','on') | list %}
{% set lights_name = lights | selectattr('state','eq','on') | map(attribute='name') | join(', ') %}
{% set devices_on = devices | selectattr('state','search','(on|cool|fan_only|playing)') | list %}
{% set devices_name = devices_on | map(attribute='name') | join(', ') %}
{% if (lights_on | length == 0) and (devices_on | length > 0) %}
{{ devices_name | regex_replace(',([^,]*)$',' och\\1') }} är på
{% elif (lights_on | length == 1) and (devices_on | length == 1) %}
{{ lights_name }} och {{devices_name }} är på
{% elif (lights_on | length == 1) and (devices_on | length > 1) %}
{{ lights_name }}, {{ devices_name | regex_replace(',([^,]*)$',' och\\1') }} är på
{% elif (lights_on | length > 1) and (devices_on | length == 1) %}
{{ lights_on | length }} lampor och {{ devices_name }} är på
{% elif (lights_on | length > 1) and (devices_on | length > 1) %}
{{ lights_on | length }} lampor, {{ devices_name | regex_replace(',([^,]*)$',' och\\1') }} är på
{% elif (lights_on | length == 1) and (devices_on | length == 0) %}
{{ lights_name }} är på
{% elif (lights_on | length > 1) and (devices_on | length == 0) %}
{{ lights_on | length }} lampor är på
{% else %}
<font color='#6a7377'>Allt är avstängt</font>
{% endif %}
</b>
mailbox: >
{% set mailbox = states('sensor.mail_delivery_13157') %}
{% if mailbox | int(default=0) > 0 %}
{{ '\U0001F4EC' }} <font color='#6a7377'><b>Antal dagar till postutdelning ({{ mailbox }})</b></font>
{% endif %}
vacuum: >
{% set entity_id = 'vacuum.billy' %}
{% if is_state(entity_id, 'cleaning') %}
<b>Billy dammsuger</b>
{% elif is_state(entity_id, 'returning') %}
<b>Billy är färdig</b>
{% endif %}
weather: >
{% set entity = 'weather.openweathermap' %}
{% if not is_state(entity, 'unknown') %}
{% set temp = state_attr(entity, 'temperature') | round %}
{% set precip = state_attr(entity, 'forecast')[0]['precipitation'] | round %}
Känns som {{ temp }}° med {{ 'ingen risk för regn' if precip == 0
else precip | string + 'mm regn \u2614\uFE0F' }}
{% else %}
Kan inte läsa in väder...
{% endif %}
up_time: >
state: >
System Uptime:
{% set up_time = as_timestamp(now()) - as_timestamp(states('sensor.uptime')) %}
{% if up_time == 0 %}
Just restarted...
{% else %}
{% set minutes = (up_time // 60) | int %}
{% set hours = (minutes // 60) %}
{% set days = (hours // 24) %}
{% set weeks = (days // 7) %}
{% set minutes = (minutes % 60) %}
{% set hours = (hours % 24) %}
{% set days = (days % 7) %}
{% macro phrase(value, name) %}
{%- set value = value %}
{%- set end = 's' if value > 1 else '' %}
{{- '{} {}{}'.format(value, name, end) if value | int > 0 else '' }}
{%- endmacro %}
{% if weeks > 0 %}
{% set text = [ phrase(weeks, 'week'), phrase(days, 'day') ] | select('!=','') | list | join(', ') %}
{% elif days > 0 %}
{% set text = [ phrase(weeks, 'week'), phrase(days, 'day'), phrase(hours, 'hour') ] | select('!=','') | list | join(', ') %}
{% else %}
{% set text = [ phrase(weeks, 'week'), phrase(days, 'day'), phrase(hours, 'hour'), phrase(minutes, 'min') ] | select('!=','') | list | join(', ') %}
{% set last_comma = text.rfind(',') %}
{% if last_comma != -1 %}
{% set text = text[:last_comma] + ' and' + text[last_comma + 1:] %}
{% endif %}
{% endif %}
{{ text }}
{% endif %}
try changing sensor.ical_privat_event_0 to sensor.ical_privat_event_
Use this button card template which uses the more-info-card as popup. You might need to tweak the template to your liking.
light:
template:
- base
- circle
- loader
variables:
circle_input: >
[[[
if (entity) {
// if light group get brightness from child to remove bounce
let child = entity.attributes.entity_id,
brightness = child && states[child[0]].attributes.brightness
? Math.round(states[child[0]].attributes.brightness / 2.54)
: Math.round(entity.attributes.brightness / 2.54);
return brightness === 0 && entity.state !== 'off'
? 1
: brightness
}
]]]
circle_input_unit: '%'
light_entity: '[[[ return entity.entity_id ]]]'
double_tap_action:
action: fire-dom-event
browser_mod:
service: browser_mod.sequence
data:
sequence:
- service: browser_mod.popup
data:
sequence:
style: >
--popup-background-color: transparent;
--popup-border-width: 0px;
content:
type: custom:more-info-card
entity: '[[[ return variables.light_entity; ]]]'
card_mod:
style:
more-info-card:
$ha-card:
.: |
state-card-content {
display: none !important;
}
more-info-light {
padding: 10px !important;
}
$: |
.card-header {
display: none !important;
}
more-info-light:
$: |
ha-attributes {
display: none !important;
}
.buttons {
margin-bottom: 0 !important;
}
.buttons md-outlined-icon-button:nth-child(2) {
display: none !important;
}
.controls {
margin-bottom: 0 !important;
}
Example:
For some reason it’s not working for the 
%
The state display changed do that worked.
The background colour of the tile changed, so that worked.
What is not working, the colour of the icon is not changing, and in the circle the set temperature is displayed instead of the current temperature.
What am I doing wrong?
verwarming:
template:
- base
- circle
variables:
state: >
[[[
if (entity) {
return entity.attributes.hvac_action
}
]]]
state_on: >
[[[
return ['heating'].indexOf(!entity || entity.attributes.hvac_action) !==-1;
]]]
circle_input: >
[[[
if (entity) {
return entity.state === 'idle'
? Math.round(entity.attributes.current_temperature).toString()
: entity.attributes.hvac_action === "heating"
? Math.round(entity.attributes.current_temperature).toString()
: Math.round(entity.attributes.current_temperature).toString();
}
]]]
circle_input_unit: '°C'
state_display: >
[[[ return variables.state === 'idle' || variables.state === 'heat' ? 'Inactive' : 'Heating'; ]]]
styles:
card:
- background-color: >
[[[
return variables.state === 'heating'
? 'rgba(255, 255, 255, 0.85)'
: 'rgba(115, 115, 115, 0.25)';
]]]
- color: >
[[[
return variables.state === 'heating'
? '#4b5254'
: '#97989c';
]]]
Here you have 2 of the same data, mine is:
circle_input: >
[[[
if (entity) {
return entity.state === 'idle'
? Math.round(entity.attributes.current_temperature).toString()
: entity.attributes.hvac_action === "heating"
? Math.round(entity.attributes.temperature).toString()
: Math.round(entity.attributes.current_temperature).toString();
}
]]]
To change the icon color you have to go through icons.yaml and add styles.
icon_climate:
styles:
custom_fields:
icon:
- width: 78%
- margin-left: -10%
- fill: >
[[[ return variables.state === 'heating' || variables.state === 'off' ? '#ff8100' : '#9da0a2'; ]]]
It dident work with youre code, i did also change to “event_”
This is my code that works for me for now…
When i have something in my calender its always showing “emty” state after becuse i have set my range to 5 (loop). I want to hide everything that is not a event that day.
Exempel;
Only show 09:00 Emad, 10:30 Yasmine, 12:30 Josef and nothing after! I dont want to show “Kalender tom”
If the calender dosent have anything that day i want to publice a message "“
Ingen aktivitet planerad”
agenda: >
<font color='#ffffff' size='4px'>
{% set events_found = false %}
{% for i in range(0, 5) %}
{% if is_state('sensor.ical_privat_event_' + i|string,'unavailable') or
state_attr('sensor.ical_privat_event_' + i|string, "start") is none %}
📅 Kalender tom.<br>
{% elif as_timestamp(state_attr('sensor.ical_privat_event_' + i|string, "start"))|timestamp_custom('%-d')
== as_timestamp(now())|timestamp_custom('%-d') %}
📅   {{ as_timestamp(state_attr('sensor.ical_privat_event_' + i|string, "start")) | timestamp_custom('%H:%M') }}
{{ state_attr('sensor.ical_privat_event_' + i|string, "summary") }}<br>
{% set events_found = true %}
{% endif %}
{% endfor %}
{% if not events_found %}
📅 Kalender tom
{% endif %}
</font>
