Do you have sensor.hacs_installed ?
I managed to figure out how to get SVGs to work eventually.
However, when attempting to use fill="var(--light-color)" the colour does not come through, it’s just black.
This happens when I use
icon_nanoleaf:
styles:
custom_fields:
icon:
- width: 78%
- margin-left: -5%
- fill: >
[[[ return variables.state_on ? 'var(--light-color)' : '#9da0a2'; ]]]
and even when I try fill="var(--light-color)" in the SVG path such as:
custom_fields:
icon: >
[[[
return `
<svg viewBox="0 0 900 798">
<path fill="var(--light-color)" style="stroke: none;" d="M393 1.4c0
It does change the colour if I use [[[ return variables.state_on ? '#3282B6' : '#9da0a2'; ]]]
Could it be due to the light using xy colours and not RGB?
- platform: command_line
name: hacs_installed
command: |-
python3 << EOF
import os, json
installed = {"repositories": []}
path = "/config/.storage/hacs/"
for file in os.listdir(path):
name, ext = os.path.splitext(file)
if ext == ".hacs":
hacs_file = path + file
with open(hacs_file, "r") as file:
dict = json.load(file)
name = dict["data"]["full_name"]
installed["repositories"] += [name]
file.close()
print(json.dumps(installed))
EOF
value_template: >
{{ value_json.repositories | count }}
json_attributes:
- repositories
scan_interval: 86400
Review @Mattias_Persson’s code in the other templates and see how he does it with his SVGs. You’ll see your answer there.
I’ve found the problem with my sidebar. If I delete the entries birthdays and waste_collection in my sidebar template the sidebar works. Can anyone solve the problem with these templates?
waste_collection: |
{%- set start_time = state_attr('calendar.hercherweg_18', 'start_time') %}
{%- set end_time = state_attr('calendar.hercherweg_18', 'end_time') %}
{%- set abfall = state_attr('calendar.hercherweg_18', 'message') %}
{%- if start_time != None %}
{%- set time = as_timestamp(start_time) | timestamp_custom('%H:%M') %}
{%- set time_end = as_timestamp(end_time) | timestamp_custom('%H:%M') %}
{%- set hours = as_timestamp(start_time) | timestamp_custom('%H') | int(default=0) / 24 %}
{%- set count = (as_timestamp(start_time) - as_timestamp(now())) / 86400 - hours %}
{%- if count <= 0.0 %}
<b>Heute ist {{ abfall | replace('Entsorgung: ', '') }}</b> {{'\uD83D\uDE9A'}}
{% elif count <= 1.0 %}
Morgen ist {{ abfall | replace('Entsorgung: ', '') }} {{'\uD83D\uDDD1'}}
{%- else %}
In {{ (count + hours) | round }} Tagen ist
{{ abfall | replace('Entsorgung: ', '') }} {{'\uD83D\uDDD1'}}
{%- endif %}
{%- endif %}
birthdays: |
{%- set start_time = state_attr('calendar.geburtstage_2', 'start_time') %}
{%- set end_time = state_attr('calendar.geburtstage_2', 'end_time') %}
{%- set geburtstag = state_attr('calendar.geburtstage_2', 'message') %}
{%- if start_time != None %}
{%- set time = as_timestamp(start_time) | timestamp_custom('%H:%M') %}
{%- set time_end = as_timestamp(end_time) | timestamp_custom('%H:%M') %}
{%- set hours = as_timestamp(start_time) | timestamp_custom('%H') | int(default=0) / 24 %}
{%- set count = (as_timestamp(start_time) - as_timestamp(now())) / 86400 - hours %}
{%- if count <= 0.0 %}
<b>Heute hat {{ geburtstag }}</b> {{'\uD83C\uDF89'}}
{% elif count <= 1.0 %}
Morgen hat {{ geburtstag }} {{'\uD83C\uDF82'}}
{%- else %}
In {{ (count + hours) | round }} Tagen hat
{{ geburtstag }} {{'\uD83C\uDF82'}}
{%- endif %}
{%- endif %}
thx
I have a problem with the person circle. If i start the MQTT Broker i only get “NaNd” in the circle. If i stop the broker i get a time but no update. It worked before the last update i think. Maybe there is a resolution for this error. Thx
Do you have automation done that sends to mqtt when you change the zone?
Yes and nothing changed … only the last update. Now i have to stop the MQTT Broker to get a time in the circle.
I have a question about the mediaquery, I have the following grid in my view
views:
- type: custom:grid-layout
name: home
theme: witbol
path: 0
layout:
#default
grid-gap: var(--custom-layout-card-padding)
grid-template-columns: repeat(4, 1fr) 0
grid-template-rows: 0 repeat(6, fit-content(100%))
grid-template-areas: |
"sidebar . . . ."
"sidebar col1 col2 col3 ."
"sidebar col4 col5 col6 ."
"sidebar col7 col8 col9 ."
"sidebar col10 col11 col12 ."
"sidebar col13 col14 col15 ."
"sidebar footer footer footer ."
mediaquery:
#mobile portrait
"(max-width: 414px)":
grid-row-gap: 10px
grid-template-columns: 3px repeat(1, 1fr) 0
grid-template-rows: repeat(17, fit-content(100%)) 0fr
grid-template-areas: |
"left sidebar right"
"left col1 right"
"left col2 right"
"left col3 right"
"left col4 right"
"left col5 right"
"left col6 right"
"left col7 right"
"left col8 right"
"left col9 right"
"left col10 right"
"left col11 right"
"left col12 right"
"left col13 right"
"left col14 right"
"left col15 right"
#mobile landscape
"(max-width: 735px)":
grid-row-gap: 10px
grid-template-columns: 250px repeat(1, 1fr) 0
grid-template-rows: repeat(16, fit-content(100%)) 0fr
grid-template-areas: |
"sidebar col right"
"sidebar col1 right"
"sidebar col2 right"
"sidebar col3 right"
"sidebar col4 right"
"sidebar col5 right"
"sidebar col6 right"
"sidebar col7 right"
"sidebar col8 right"
"sidebar col9 right"
"sidebar col10 right"
"sidebar col11 right"
"sidebar col12 right"
"sidebar col13 right"
"sidebar col14 right"
"sidebar col15 right"
"sidebar col16 right"
In the default view my sidebar is displayed, in the mobile portrait not as expected.
but also not displayed in the mobile landscape view. but I can’t figure out why?
@r00nster did you fix the issue with “Custom element doesn’t exist: light-popup-card”. I do have the same error, but I don’t know how to fix. light-popup-card seems to be loaded correctly …
Hey @mobiustorr, thanks for the reply.
Apologies, I’m not proficient enough at coding yet to understand what is going wrong.
I believe my current code is correct, as when I try it against a different light entity, the colour shows correctly. Yet when I try it with my Nanoleaf Shapes, it comes through grey.
These are the current attributes for my Nanoleaf light:
It states as using hs as the mode, yet both options are 0, so not sure if that is the issue.
I have reviewed Mattias’ code numerous times, and I always end up back at this section:
extra_styles:
extra_styles: >
[[[
if (entity) {
let hs = entity.attributes.hs_color === undefined,
h = hs || entity.attributes.hs_color[0],
s = hs || entity.attributes.hs_color[1],
l_min = 28,
l_max = 48,
l_calc = entity.attributes.brightness / 2.54 * (l_max - l_min) / 100 + l_min;
var light_color = entity.attributes.color_mode === 'color_temp' || entity.attributes.color_mode === 'brightness'
? `hsl(204, 58%, ${l_calc}%);`
: `hsl(${h}, ${s}%, ${l_calc}%);`;
}
return `
svg {
--light-color:
${ variables.state_on && entity.attributes.brightness !== undefined
? light_color
: variables.state_on && entity.attributes.brightness === undefined
? 'var(--state-icon-active-color);'
: 'var(--state-icon-color);'
}
}
can someone help me with this?
fifty889, It might help to explain a little about what exactly you need help with.
From what I can tell, I can only assume that you need help to place the footer correctly, but that might not be the case - or the whole story.
If I’m correct in my assumption, you might want to take a look at the themes.yaml file.
grid-layout$hui-horizontal-stack-card:
$: |
#root {
flex-wrap: wrap;
justify-content: center;
overflow: visible;
margin-top: 1em;
padding-bottom: 2em;
}
@media screen and (min-width: 1200px) {
#root {
flex-wrap: nowrap;
justify-content: space-between;
overflow: visible;
margin-top: -1.5em;
padding-bottom: 0.8em;
}
}
Play around with the following values:
margin-top: -1.5em;
padding-bottom: 0.8em;
Another thing I often do is that I use the developer tools in a browser from a PC. (F12 on the lovelace website)
Use the Select element tool and point at the footer.
After finding the element, look for the code I mentioned and try changing the values.
If changing these values gets you what you need, change them in themes.yaml and restart the Themes service in HA, then refresh lovelace and verify the changes.
With what exactly? You aren’t saying what you need help with
This looks very nice and want to give it a try.
Can i set this up without loosing my current dashboard views? I’m not sure if I can make everything in 1 day but would still like to use my current view. When everything is done I can easily delete my old setup.
I’m not sure but you can always copy the yaml code of your current dashboard and then create a new one and paste it
1 Like
my promlem is that dashboard is too high for the screen. it always looks like the bottom part is cut off. to see the footer completely you have to scroll down.
@Laffer André thanks for the tips, I’ll take a look at it
I posted the problem here:
Just make another dashboard in Settings->Dashboards
Maybe try this :