Change a Sensor Icon color - Very confused

[claudegel (Claude Gelinas)]

Hi, I’m trying to set different icon depending on state.attributes values via custom UI.

I’ve installed custom UI and customize and did all the setup in configuration.yaml and created a template in customize.yaml which show like this.

climate.sinope_climate_cave:
  templates:
    entity_picture: >
      if (state.attributes.heatLevel < 1) return /local/heat-0.png;
      elif (state.attributes.heatLevel < 21) return /local/heat-1.png;
      elif (state.attributes.heatLevel < 41) return /local/heat-2.png;
      elif (state.attributes.heatLevel < 61) return /local/heat-3.png;
      elif (state.attributes.heatLevel < 81) return /local/heat-4.png;
      else return /local/heat-5.png;

All png are in www folder
Custom UI is in www/custom_ui folder
state.attributes.heatLevel exist and show value from 0 to 100 %
I suspect that I don’t write my template correctly. Could someone help me with the correct syntax ? Thank you

[Mariusthvdb (Marius)]

@claudegel

entity_picture: > if (state.attributes.heatLevel < 1) return /local/heat-0.png; elif (state.attributes.heatLevel < 21) return /local/heat-1.png; elif (state.attributes.heatLevel < 41) return /local/heat-2.png; elif (state.attributes.heatLevel < 61) return /local/heat-3.png; elif (state.attributes.heatLevel < 81) return /local/heat-4.png; else return /local/heat-5.png;

you have to quote the returns:

return '/local/heat-0.png';

use only ‘if’ not ‘elif’

and you can takeout the else in the last line, simply use

return '/local/heat-5.png';

[claudegel (Claude Gelinas)]

I thank you for this reply. I’ve tried it and it didn’t work. no change in my climate card. The icon is still the original one. worst I get flooded by Service “system_log/write” called. sending a strange big log message 12 pages long every 30 second:

data:text/javascript;charset=utf-8,%2F*!%20For%20license%20information%20please%20see%20scripts.js.LICENSE%20*%2F%0A!function(t)%7Bvar%20e%3D%7B%7D%3Bfunction%20i(s)%7Bif(e%5Bs%5D)return%20e%5Bs%5D.
…12 pages…
local%2Fcustom_ui%2Fstate-card-custom-ui.html.js%0A line 27 > Function:0:0 Script error.
kind of dump screen error

[claudegel (Claude Gelinas)]

Hi. I confirm that it dump the file state-card-custom-ui.html every 30 seconds
I’m on CustomUI: 20190113 HA 0.86.4
lines that cause problem in customize.yaml:

climate.sinope_climate_cave:
  templates:
    entity_picture: >
      if (state.attributes.heatLevel < 1) return '/local/heat-0.png';
      if (state.attributes.heatLevel < 21) return '/local/heat-1.png';
      if (state.attributes.heatLevel < 41) return '/local/heat-2.png';
      if (state.attributes.heatLevel < 61) return '/local/heat-3.png';
      if (state.attributes.heatLevel < 81) return '/local/heat-4.png';
      return '/local/heat-5.png';

[claudegel (Claude Gelinas)]

Bingo that works: I just remove the 'state. Thank you very much

’

climate.sinope_climate_cave:
  templates:
    entity_picture: >
      if (attributes.heatLevel < 1) return '/local/heat-0.png';
      if (attributes.heatLevel < 21) return '/local/heat-1.png';
      if (attributes.heatLevel < 41) return '/local/heat-2.png';
      if (attributes.heatLevel < 61) return '/local/heat-3.png';
      if (attributes.heatLevel < 81) return '/local/heat-4.png';
      return '/local/heat-5.png';

[Mariusthvdb (Marius)]

a yes, forgot to mention the indeed, sorry, you only need the part of the state your interested in. see it like this:

states.entity_id.state if (state .....)
states.entity_id.attributes.attribute if (attributes.attribute....)

for another entity use:

if (entities['states.entity_id'].state ......)

btw, please share the code for your card? Id be interested to see how you show these double lined temperatures. Havent seen that before I think.

[claudegel (Claude Gelinas)]

I’m using Sinope thermostat and made a custom component for them as they are not supported yet in HA. You can find my code on my Git:[claudegel/sinope-1](https://github.com/claudegel/sinope-1)
for the second line it’s showing actual temperature:

@property
    def current_temperature(self):
        """Return the current temperature."""
        return self._cur_temp

in the update
self._cur_temp = float(self.sinope_data.data[self.device_id]["data"]["temperature"])

for the last updated info it is

customize: !include customize.yaml
  customize_glob:
    light.*:
      custom_ui_state_card: state-card-custom-ui
      show_last_changed: true
    cover.*:
      custom_ui_state_card: state-card-custom-ui
      show_last_changed: true
    climate.*:
      custom_ui_state_card: state-card-custom-ui
      show_last_changed: true

[Mariusthvdb (Marius)]

thanks, that Custom-ui is all familiar territory to me But it doesn’t show how you display the ‘actuellement: 9.9 C’ below the ‘Inactif 18C’ ?

please show me the full code for that card?

or is all that being done in the CC on https://github.com/claudegel/sinope-1 and is Custom-ui i=only taking care of the show_last_changed?

Cant find it in your code there…

[claudegel (Claude Gelinas)]

show_last_changed is from custom-ui
actuellement: 9.9 C is from the component. It’s the self._cur_temp
This is the room temperature

[Mariusthvdb (Marius)]

@claudegel

actuellement: 9.9 C is from the component. It’s the self._cur_temp

Yes thanks. How do you get it to show on the second line though?

[claudegel (Claude Gelinas)]

@property
def current_temperature(self):
“”“Return the current temperature.”“”
return self._cur_temp

this set the attribute current_temperature and is shown automatically on second line.
The data is from the thermostat with

self._cur_temp = float(device_data[“temperature”])

if you don’t have

@property
    def current_temperature(self):
        """Return the current temperature."""
        return self._cur_temp

the second line won’t show up. So data must be provided by your thermostat and
def current_temperature(self): must be set in your climate component

[Mariusthvdb (Marius)]

I don’t have this card at all nor the thermostat, but that shouldn’t matter, Im simply trying to understand how to get an attributes on the second line below the state, as you do.

must be the code in the python sensor declaration somehow. But I can’t find it in you CC.

for comparisons sake:
I use this very simple python script to create sensors, and set its attributes. Would you know how to expand this and have it show the second line below the state:

##########################################################################################
entity_id = data.get('entity_id')
if not entity_id:
    logger.error('No entity_id provided')
state = data.get('state')
if not state:
    logger.error('No state provided')

if entity_id and state:
#    old_state = hass.states.get(entity_id)
#    if old_state:
#        attrs = old_state.attributes
#    else:
#        attrs = None
    theme = 'red' if state == 'on' else 'green'
    friendlyName = entity_id.split('.')[1].title().replace('_',' ')

    hass.states.set(entity_id, state,{
      'custom_ui_state_card': 'state-card-custom-ui',
      'friendly_name': friendlyName,
      'device_class': 'problem',
      'theme': theme,
      'show_last_changed': 'true'
      })

[claudegel (Claude Gelinas)]

The code to print the second line is in the climate component not in my custom component. I just set the value for current_temperature and the second line is printed. If I don’t provide value for current_temperature nothing is printed on second line.

[Mariusthvdb (Marius)]

@claudegel

The code to print the second line is in the climate component not in my custom component.

I see. Thanks. can you point me to that climate component? Or is it somewhere here: core/homeassistant/components/climate at dev · home-assistant/core · GitHub

maybe @pnbruckner would know how to, based on the above? Show an attribute of an entity on the second line under the state as shown inpost 25 of this thread

can’t do that with custom-ui, and supposedly is in the components code.
thanks for having a look if you would.

[claudegel (Claude Gelinas)]

Yes this is where you’ll find climate component __init__.py

[gh0s7 (Hristo Atanasov)]

Hi folks!
Can we somehow use this templating/scripting inside LovelaceUI?
In my floor plan I have entity of type image representing my TV. I have made custom ambilight behind my tv, and I want to apply a filter of the tv image like: “filter: drop-shadow(0px 0px 10px rgb( >> put somehow the rgb value from ambilight << ))”.
How can I achieve this?

[petro]

Check out this thread. This custom card will allow you to template any card:

100% Templatable Lovelace Configurations

Lovelace Templates I’ve gone and made a crazy card that allows you to pretty much template anything in Lovelace for your card configurations using any information available on the frontend; states, attributes, user, etc. Want state/attribute-based icons? DONE! Want dynamic stacks; vertical vs horizontal based on user? DONE! Want OR conditionals? DONE! The list is pretty much endless and I’m sure you all will come up with some crazy stuff. Be sure to share. Go nuts! Enjoy!

[gh0s7 (Hristo Atanasov)]

Thanks a lot man. It looks exactly what I’m looking for. I will give it a try and I’ll feedback it!

[costy]

I do not know if the right section is, but @Mariusthvdb can help me.
I’d like to get something like that:

Right now I got this:

What do I have to do next?

[pdwonline (When a goat is on the net)]

Soo, in installed the custom-ui files in www, added the custom_component, registered in configuration.yaml and edited my customize.yaml file like this:

automation.smoke_alarm:
  friendly_name: Brandalarm ingeschakeld
  icon: mdi:fire
  icon_color: >
    if (state === 'on') return '#FDD835';
    return '#3F6F9C';

Seems not to work. Then I tried:

automation.smoke_alarm:
  friendly_name: Brandalarm ingeschakeld
  icon: mdi:fire
  icon_color:  green

Which indeed colors the icon green. So the custom_ui thing seems to do something.
What is going wrong?