Custom UI: Tiles

[Sunonline (Sun K)]

Thank you very much sir ^^

[pronsta]

Hi,

I am getting this warning in error in the latest version under docker

2018-05-31 12:29:24 ERROR (MainThread) [frontend.js.latest.201805264] http://10.0.0.10:8123/local/custom_ui/state-card-tiles.html:106:50 Uncaught TypeError: Cannot read property 'EventsMixin' of undefined```

[Faecon (Jo)]

I got the same with floorplan. It looks like a problem with the HASS update …

[nicecube (Marc André Brochu)]

After installing Floorplan, Custom UI: Tiles is no longer working. Can I install both at the same time or that causes problem

[Bobby_Nobble]

Don’t know if i’ve missed some obvious change in recent updates but I’m in the process of rebuilding my tiles after forgetting to back up for a while

I used to have a tile specced as this…

      - entity: climate.heating
        icon: mdi:radiator
        label: " Heating"
        row_span: 1
        column_span: 2

…and tapping the tile kicked up the more info window with the heating controls. This doesn’t happen anymore and HA actually reports that it has turned the heating on, which is hasn’t!

I have climate.heating added to the front end as part of a group in the traditional way elsewhere and that works as expected.

Tried adding more-info: climate.heating to the tile just in case there had been a change that made that compulsory but no difference.

Any ideas?

[Mariusthvdb (Marius)]

this still works:

entities:
  - entity: switch.sw_audio_auditorium_template
    label_sec: Auditorium
    icon_template: >
      if (state === 'on') return 'mdi:music';
      return 'mdi:music-off';
    style_template: >
      if (state !== 'on') return 'text-decoration: line-through';
    more_info: switch.sw_audio_auditorium_template

maybe the entity type itself isn’t allowed/supported?

[Bobby_Nobble]

The issue seems to be it’s treating it as a toggle even though it isn’t. I tried adding it as a more-info to another tile which is non toggle, a temp sensor, and that then also tries to turn on the heating rather than opening the panel.

It used to work fine on 0.69 with older custom_ui and tiles versions

[Mariusthvdb (Marius)]

@Bobby_Nobble

It used to work fine on 0.69 with older custom_ui and tiles versions

hm thats awkward, fwiw, Im using the latest version of Hassio, Tiles and Custom-ui , without any issues in that regard.

[Bobby_Nobble]

Fixed it

It still doesn’t work as it should according to the docs, ie it should default to the more info card as it isn’t a toggle, but I did miss something obvious, used more-info to try to force it instead of more_info…doh!

[Mariusthvdb (Marius)]

made a new set of Tiles with a primer for me: background-image… wont work.

have this sensor:

with 4 possible states, each having their own .png. Developer: developer.png, Normal: normal.png etc

have this tile:

  - entity: sensor.mode_badge
    label: Mode
    label_sec_template: >
      return state + ': ' + attributes.friendly_name;
    color: '#5295e2'
    text-color: '#ffffff'
    more_info: sensor.mode_badge

showing like this now, bottom right:

which id love to show the entity_picture: /local/modes/kiosk.png as a background.

No matter what i try, nothings comes up.

Is anyone out there using background images that can give me a clue please?

ive tried:

style_template: >
  return 'background-image: url(\"/local/mode/' + state + '.png\") ';

 return 'background-image: /local/modes/kiosk.png';

return 'background-image: attributes.entity_picture';

return 'background-image: url(\"/local/modes/' + state + '75.png\") ';

 return attributes.entity_picture; 
 style_template: attributes.entity_picture
image: attributes.entity_picture

the latter is obviously wrong, since it isnt a template format using a template…

the 75.png is a variant i use to create perfect fit in the tiles with that specific size. it should concatenate correctly now i hope, to /local/modes/kiosk75.png

maybe I forget a variant…

clicking the Tile, for more_info shows the correct Image of the sensor:

which shows like this on a dedicated Kiosk Tiles in another set:

  - entity: script.mode_kiosk_direct
    style_template: >
      if (entities['input_select.mode'].state === 'Kiosk') return 'background-color: #F0C209';
      return 'background-color: #555B65';
    image: /local/modes/kiosk75.png

even tried hardcoding:

    style_template: >
      if (state === 'Kiosk') return 'background-image: /local/modes/kiosk75.png';
      if (state === 'Normal') return 'background-image: /local/modes/normal75.png';
      if (state === 'Developer') return 'background-image: /local/modes/developer75.png';
      return 'background-image: /local/modes/fullhouse75.png';

out of ideas here, please have a look.

Thx,
Marius

[Bobby_Nobble]

You should have the “return” or “if” statement inside speech marks like this…

style_template: "return 'background-image: url(\"/local/dad/' + state + '.png\");'"

style_template: "if (state === 'On') return '--tiles-color: var(--dark-primary-color); --tiles-text-color: #FFF;'; else return '--tiles-color: var(--disabled-text-color);--tiles-text-color: var(--label-badge-text-color)';"

[Bobby_Nobble]

Haven’t seen this noted elsewhere, though it may well be as I can’t believe I’m the first to come across it, but this issue was driving me potty till I sussed what was going on.

If using this example from the docs…

# icon based on state
icon_template: "if (state === 'on') return 'mdi:power-plug'; else return 'mdi:power-plug-off'"

…I found the ‘on’ is case sensitive, so this didn’t work…

style_template: "if (state === 'on') return '--tiles-color: var(--dark-primary-color); --tiles-text-color: #FFF;'; else return '--tiles-color: var(--disabled-text-color);--tiles-text-color: var(--label-badge-text-color)';"

…but this did…

style_template: "if (state === 'On') return '--tiles-color: var(--dark-primary-color); --tiles-text-color: #FFF;'; else return '--tiles-color: var(--disabled-text-color);--tiles-text-color: var(--label-badge-text-color)';"

[Mariusthvdb (Marius)]

@Bobby_Nobble

‘on’ is case sensitive, so this didn’t work…

one is never certain… Ive grown accustomed to always check the states in the dev-tools, and use that… that being said, I have many templates like the above with ‘on’ that do work just fine. Maybe the state of this exact entity isnt ‘on’ but ‘On’?

note there’s a missing closing semi-colon in the example. Might seem nothing, but rather put it there.

[Mariusthvdb (Marius)]

@Bobby_Nobble

should have the “return” or “if” statement inside speech marks

hmm, that cant be it. I never use these double quotes, cause they tend to make checking and debugging rather difficult. Throughout my complete Hassio setup, I use the > to go to the next line and do without the enclosing quotes. Makes easier for using quotes inside the template also.

Added to that, I always ditch the ‘else’ for closing the if, which isnt necessary either. And the semi-colon goes after the closing single-quote. Much prettier on the eye, and again, easier to debug. These scripts are prone to syntax errors, and Hassio doesn’t like these, resulting in horrific amounts of front-end script errors, even deadlocks…

        icon_template: >
          if (state === 'on') return 'mdi:laptop';
          return 'mdi:laptop-off';

or

        style_template: >
          if (state === 'on') return 'background-color: #cf2525; --tiles-text-sec-color: #f0c209; color: #f0c209';
          return ' --tiles-text-sec-color: #e93c24; color: #e93c24; text-decoration: line-through';

in this case it would be:

        style_template: >
          return 'background-image: url(\"/local/modes/' + state + '.png\")';

that being said, I did try that already but will have another look.

Your Dad example is a real one? What entity do you have it take its state from, maybe thats the issue in my setup

[Bobby_Nobble]

I usually take the if it works leave it alone route but interesting info all the same.

@Mariusthvdb

Your Dad example is a real one? What entity do you have it take its state from, maybe thats the issue in my setup

If you scroll back up this thread far enough you’ll find my device-tracker post…

Custom UI: Tiles

Yay, finally got the device tracker I was really after… [29] Images go colour when home, fades to grey when not. Each person has code set up as below… - entity: device_tracker.dadsn5x row_span: 2 column_span: 1 style_template: "return 'background-image: url(\"/local/dad/' + state + '.png\");'" …and their own named folder in www with a colour image called ‘home.png’ and a grey one called ‘not_home.png’.

[Mariusthvdb (Marius)]

@Bobby_Nobble

fades to grey when not

that’s really cool indeed! missed it sorry…what images are those?
what takes care of the fading, is this a specific template also, or is it taken care of elsewhere in the Tiles script?

did try your code once again, but no-show. Ive now taken out all other text on that Tile, but that wasn’t the issue either.

maybe this is a upper-lowercase issue also…

would there be a way to set the state to lowercase in the template? using .lower() or something like that?

well, what do you think about that…

also case-sensitive…!
get a Hassio config error, but we’re getting closer.! For easy and speed changed the image to a Kiosk.png, but really want a lower-case template. Must be possible, maybe create a separate thread on that to keep things tidy here. Thanks for your question above, made me think extra hard…

[Bobby_Nobble]

Images are from here…

FAMILY GUY YOURSELF

No actual fading, just a colour image and a Photoshopped grey version swap places. That bit of code is literally all there is to make it work, ridiculously simple to do but looks really clever in action

Fell free to push the original post up to 20 likes

[Mariusthvdb (Marius)]

small afterburner:

like to be able to be as short as possible. and only specify the differences between On and Off in the template. in the case below both for On and Off the same image template is used:

return 'background-image: url(\"/local/tiles/Alarm' + attributes.unit_of_measurement + '.png\")';

is here a way we can write:

    style_template: >
      return 'background-image: url(\"/local/tiles/Alarm' + attributes.unit_of_measurement + '.png\")';
      if (attributes.unit_of_measurement === 'On')
      return 'background-color: #f0c209;--tiles-text-sec-color: #333';
      return 'background-color: #555B65;--tiles-text-sec-color: #fff';

in stead of

          if (attributes.unit_of_measurement === 'On')
          return 'background-color: #f0c209;background-image: url(\"/local/tiles/Alarm' + attributes.unit_of_measurement + '.png\");--tiles-text-sec-color: #333';
          return 'background-color: #555B65;background-image: url(\"/local/tiles/Alarm' + attributes.unit_of_measurement + '.png\");--tiles-text-sec-color: #fff';

[Mariusthvdb (Marius)]

Hey!

been playing with this and in an effort to keep things as simple as can be , file and folder -wise, just thought to let you know you can also do:

style_template: >
  return 'background-image: url(\"/local/dad' + state + '.png\")';

using dad_home.png and dad_not_home.png, and so on for all relevant trackers (replace dad with tracker name obviously ). All files in one folder.
Cool.

[Mariusthvdb (Marius)]

thought i had it yesterday, but was still reading the cache…
getting the correct slashes and parentheses in the correct spots was a bit of a challenge, but finally got it figured out.

this does it, simply read the entity_picture, no more hassle with dedicated images or what have you. very nice indeed.! And, size matters, different components use different techniques for cropping apparently. Some use the images at original size (Tiles), Hassio sensors and badges seem to cross down automatically. No problem sizing them down if necessary. I really like not needing different named and sized files for different situations for the same instance/entity!

    style_template: >
      return 'background-image: url(\"' + attributes.entity_picture + '\")';

if cropping is necessary, use return 'background-size: contain';