Custom-ui Tiles template not working,

Configuration
1

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:

2

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…

3

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
4

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?

5

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.

6

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\");'"
7

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']

8

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

9

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

10

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\")';
11

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?

12

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

1 Like
13

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

14

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…