Greetings @Norik_Krasniqi, I am very new to Hass’ world and I would like you to share how you made this group of icons and their data. Thank you very much!
Here is my current config (the coloring now working right now)
sensor.yaml
- platform: systemmonitor
resources:
- type: disk_use_percent
arg: /home
- type: processor_use
- type: memory_use_percent
- type: last_boot
- type: since_last_boot
- platform: sql
db_url: mysql://XXXXX:XXXXX@localhost/homeassistant
queries:
- name: DB Size
query: 'SELECT table_schema "homeassistant", Round(Sum(data_length + index_length) / 1024 / 1024, 1) "value" FROM information_schema.tables WHERE table_schema="homeassistant" GROUP BY table_schema'
column: 'value'
unit_of_measurement: MB
- platform: speedtest
minute:
- 0
- 15
monitored_conditions:
- download
- upload
- ping
- platform: template
sensors:
since_last_boot_templated:
value_template: >-
{%- set slb = states.sensor.since_last_boot.state.split(' ') -%}
{%- set count = slb | length -%}
{%- set hms = slb[count - 1] -%}
{%- set hms_trimmed = hms.split('.')[0] -%}
{%- set hms_split = hms_trimmed.split(':') -%}
{%- set hours = hms_split[0] | int -%}
{%- if count == 3 -%}
{{ slb[0] ~ ' ' ~ slb[1] ~ ' ' }}
{%- endif -%}
{%- if hours > 0 -%}
{%- if hours == 1 -%}
1 hour
{%- else -%}
{{ hours }} hours
{%- endif -%}
{%- endif -%}
- platform: version
name: Installed Version
- platform: scrape
resource: https://www.home-assistant.io
name: Latest Release
select: ".current-version h1"
value_template: '{{ value.split(":")[1] }}'
2 Likes
Can you help me with a link on how to get the sql stuff set up?
i try this solution in my customize.yaml and it not working to change color of badge for my tempo… Still is RED color.
sensor.eurochron_0001_temp:
state_card_mode: badges
templates:
theme: >
if (state > 29) return 'hot'; else if (state >= 27 ) return 'comfortable'; else return 'cold';
I try change icon color for switch, but when switch is ON all is ok and color is GREEN, but when is off should be RED but it is light blue. Why ?
templates:
hs_color: "if (state === 'on') return [98,158,81]; else if (state === 'off') return [191,27,0];"
My sensor has an attribute “color”, and the values comes like “#6ee86e”.
I cant get this to work:
sensor.nilu_xxx_yyy_pm25:
friendly_name: PM 2.5
templates:
icon_color: >
return attributes.color
Should it work. Is it possible to use the attributes directly?
try:
templates:
theme: >
if (state > 29) return 'hot';
if (state >= 27 ) return 'comfortable';
return 'cold';
try:
templates:
icon_color: >
if (state === 'on') return 'hs[98,158,81]';
return 'hs[191,27,0]';
It works like this with hex colors and rgb colors.
disclaimer: not really sure about the hs color format like hs[98,158,81], I don’t use these. Only hs colors in my setup are with 2 numbers, not 3.
see: home-assistant-custom-ui/docs/features.md at master · andrey-git/home-assistant-custom-ui · GitHub
not sure, never tried it, what happens if you do 
Only comparable sensor I use is where the state of the sensor itself is used in the value_template for its icon. feared endless recursive issue’s but it works just fine.
lets give it a go and report back!
Actually, it works : D
I had a line underneath commented out. When removing this line, it did work.
return attributes.color
# bla bla bla
1 Like
thats because you should end the line with a ;
return attributes.color;
# bla bla bla
should be good to go, and leave all the blabla you want
1 Like
My icon doesn’t change.
I put this in my customize.yaml.
sensor.fibaro_system_fgms001zw5_motion_sensor_temperature_2:
templates:
rgb_color: >
if (state > 25) {
return [0, 128, 0];
} else if (state >= 18 ) {
return [223, 76, 30];
} else {
return [35, 76, 99];
}
sensor.fibaro_system_fgms001zw5_motion_sensor_temperature:
templates:
rgb_color: >
if (state > 25) {
return [0, 128, 0];
} else if (state >= 18 ) {
return [223, 76, 30];
} else {
return [35, 76, 99];
}
I get no errors. Can anybody help me out ?
there’s no icon template? won’t change if you don’t tell it to.
the color won’t change either like this, because you use rgb_color . use icon_color instead and then the correct formatting of the Cdd color you need: https://github.com/andrey-git/home-assistant-custom-ui/blob/master/docs/features.md#icon-color
example:
templates:
icon: >
if (state === 'on') return 'mdi:fridge-filled';
return 'mdi:fridge';
icon_color: >
if (state === 'on') return 'rgb(251, 210, 41)';
return 'rgb(54, 95, 140)';
or
templates:
icon_color: >
if (state > 12) return 'rgb( 192, 39, 30 )';
if (state > 10) return 'rgb( 244, 101, 35 )';
if (state > 8) return 'rgb( 255, 194, 15 )';
if (state > 4) return 'rgb(251, 210, 41)';
return 'rgb(54, 95, 140)';
1 Like
like this ?
sensor.fibaro_system_fgms001zw5_motion_sensor_temperature:
templates:
icon_color: >
if (state > 25) {
return 'rgb(0, 128, 0 )'
} else if (state >= 18 ) {
return 'rgb(223, 76, 00 )'
} else {
return 'rgb(35, 76, 99 )'
}Like this:
sensor.fibaro_system_fgms001zw5_motion_sensor_temperature:
templates:
icon_color: >
if (state > 25) return 'rgb(0, 128, 0 )’;
if (state >= 18 ) return 'rgb(223, 76, 00 )';
return 'rgb(35, 76, 99 )';
sensor.fibaro_system_fgms001zw5_motion_sensor_temperature_2:
templates:
icon_color: >
if (state > 25) return 'rgb(0, 128, 0 )’;
if (state >= 18 ) return 'rgb(223, 76, 00 )';
return 'rgb(35, 76, 99 )';
sensor.fibaro_system_fgms001zw5_motion_sensor_temperature:
templates:
icon_color: >
if (state > 25) return 'rgb(0, 128, 0 )’;
if (state >= 18 ) return 'rgb(223, 76, 00 )';
return 'rgb(35, 76, 99 )';
no changing colour 
I give it up
Do you have custom-ui installed?
I think I did, but not sure if I did it right …
added this to frontend.yaml
extra_html_url:
- /local/custom_ui/state-card-custom-ui.html
extra_html_url_es5:
- /local/custom_ui/state-card-custom-ui-es5.html
and this in config.yaml :
frontend: !include config/frontend.yaml
edit : I get this error
custom_ui/state-card-custom-ui-es5.html.js:2:0 NotSupportedError: Operation is not supported
Should be:
frontend: !include frontend.yaml