Custom-ui Tiles template not working,

HI

In my Tiles setup Ive used his without issue to set the entity picture:

   - entity: device_tracker.w_presence
            style_template: >  
            return 'background-image: url(\"/local/tiles/family/w_' + state + '.png\")';

w_home.png, w_not_home.png show up just fine.

I now want to add another picture for when state is not ‘home’ or ‘not_home’, because the entity now supports zoning. If thats the case Ive added a w_zoning.png and need to template that here

      - entity: device_tracker.w_presence
        style_template: >
          if (state in ['home','not_home']) return 'background-image: url(\"/local/tiles/family/w_' + state + '.png\")';
          return 'background-image: url(\"/local/tiles/family/w_' + 'zoning' + '.png\")';

I cant seem to get the correct template syntax for that.

if (state === 'home' or 'not_home')
if (state === 'home') or (state === 'not_home')
 if (state in ['home','not_home'])

none of these work

even tried:

          if (state === 'home') return 'background-image: url(\"/local/tiles/family/m_' + state + '.png\")';
          if (state === 'not_home') return 'background-image: url(\"/local/tiles/family/m_' + state + '.png\")';
          return 'background-image: url(\"/local/tiles/family/m_' + 'zoning' + '.png\")';

hope you might have a suggestion to try next :wink:

Try this:

style_template: "return 'background-image: url(\"/local/climate/' + entities['climate.ured'].state + '.png\");'"

and in my www/climate folder i have auto.png, off.png, idle.png…

HI, thx

It s not the issue of getting the right picture per state, I ve got that working just fine.

I was trying to find the correct format to template -out the states.

this works after all:

      - entity: device_tracker.m_presence
        style_template: >
          if (state === 'home') return 'background-image: url(\"/local/tiles/family/m_' + state + '.png\")';
          if (state === 'not_home') return 'background-image: url(\"/local/tiles/family/m_' + state + '.png\")';
          return 'background-image: url(\"/local/tiles/family/m_' + 'zoning' + '.png\")';

for m_home.png, m_not_home.png and m_zoning.png (which is the else, as in not ‘home’ and ‘not_home’)
the template feels rather clunky though…

btw, you have an ending which c(sh)ould be written as:

'background-image: url(\"/local/climate/' + entities['climate.ured'].state + '.png\")';

always have the single quote ’ end the template and end with the semi-colon ;

if you need more templates just throw these in:

    style_template: >
      if (state > 0) return 'background-color: #5daf35;--tiles-text-sec-color: #555B65;color: #555B65';
      return 'background-color: #555B65;--tiles-text-sec-color: #5daf35;color: #5daf35;text-decoration: line-through';
1 Like

So your device tracker gives you home, not_home and some multiple zones. And when device state is not (home, not_home) you want to show m_zoning.png?

yes indeed, that’s what the current setup does. Since the templates in Tiles work different from the regular templates it always is a bit of a search to find the correct format. Apparently this works now, but I cant help wondering if the template could be optimized.

Next step is testing if I can get the Tiles images to follow the state of a changed device_tracker setup. Ill test using the life360 components device_tracker and see if it willl follow the zones directly. So, not just say Zoning and show a default zoning image (which is what is does now) but truly show an overlay image of the active zone.

Then you could try to get device tracker states in template sensor.

- platform: template
  sensors:
    m_presence:
      friendly_name: 'presence'
      value_template: '{% if is_state("device_tracker.m_presence", "home") %}home{% elif is_state("device_tracker.m_presence", "not_home") %}away{% else %}zoning{% endif %}'

And use that sensor in tiles.

- entity: sensor.m_presence
        style_template: "return 'background-image: url(\"/local/tiles/family/m_' + entities['sensor.m_presence'].state + '.png\");'"

ha, thats very smart indeed! never thought of that, and always found a way to template in the Tiles setup itself… duh.
only thing I missed in the option of tiles was a direct image_template, and this might indeed be away to mitigate that.

Since life360 component has the home, not_home and zones as its state, Ill try that first, simply by using:

      return 'background-image: url(\"/local/tiles/family/m_' + state + '.png\")';

though I might have to be forced using an expanded setup because of my wish to display different background-color too when zoning (and not be able to use the global ‘on’ and ‘off’ colors:

     if (state === 'home') return 'background-image: url(\"/local/tiles/family/m_' + state + '.png\")';
          if (state === 'not_home') return 'background-image: url(\"/local/tiles/family/m_' + state + '.png\")';
          return 'background-color: #643aac;background-image: url(\"/local/tiles/family/m_' + 'state' + '.png\")';

so 3 lines necessary, simply because I need a third background color if state !== ['home','not_home']

Or you could use zoning in if state and home and not_home in else.

true, but that wouldn’t make much difference cause the way to test for Zoning is to check home/not_home…

Yeah, but code is simpler and that is always a good thing. :slightly_smiling_face:

   if (state === 'zoning') return 'background-color: #643aac;background-image: url(\"/local/tiles/family/m_' + state + '.png\")';
          else return 'background-image: url(\"/local/tiles/family/m_ ' + state + ' .png\")';

there is no state ‘zoning’ that’s exactly the challenge… the device is zoning, when it isnt home or not_home…

btw please have a look with me at this, if I finally make it to the zoning images…pff

some of these Zones of Life360 are like this" ‘Multiple Words’. Eg multiple capitalized words , and no _ to connect them. Ive tried to make image files like that to fit the template + state + .

so I tried m_Multiple Words.png .Which doesnt work obviously. Need to reformat the ‘+state+’ to change that. would this do it: + state|lower|replace(" ", "_") + ?

btw2: there is an attribute ‘Moving’: which is set to true/false, so I might be able to test on that! in stead of if (state === ‘zoning’), would if (attributes.moving === 'true') work? Or should I use some other syntax for evaluating an attribute here?

Yes, my bad. Yes attributes could work. I will look. If i come up with anything i’ll get back to you.

1 Like

So {{replace(' ','_')| lower }} works nicely. If you have few zones this will work. Are those zones names fixed?

how did you use that on state ? like this:

+ state{{replace(' ','_')| lower }} + ?
or this maybe: {{state|replace(' ','_')| lower }}

well yes, they are defined in the zones setup of HA. I could easily change that to be lower case and not use a space, but then they would show terribly in the frontend…