Custom UI: Tiles

Share your Projects! Dashboards & Frontend
586

THANK YOU

This advice of yours finally got me working. For anyone else struggling to get Icon Templates working - here is a working example of a working entity (tile)
I meant to send this 26 days ago, but just realised upon my return here, that I had not actually clicked ‘reply’…

entities:
  - entity: switch.pioneer_mutetoggle
    templates:
      icon: >-
        if (state === 'on') return 'mdi:volume-high'; return 'mdi:volume-mute';
587

cool. glad you got it working.
fwiw, there’s no need for the dash after the multi-line chevron.

see these popping up every now and then, while there’s no doc stating their need. This would do nicely (personally I like the ‘else’ better on the second line for readability and using less screen width:

templates:
  icon: >
    if (state === 'on') return 'mdi:volume-high'; 
    return 'mdi:volume-mute';
1 Like
588

@Mariusthvdb ah yes that is better and clearer. My reply was meant to be much further up, above all the other examples since… I can see it’s totally redundant now haha

Once thing I cannot figure out or find; how to control an image with a template…?

I have tried (among many others):

entity: device_tracker.112833888050961433
templates:
  icon:
    value: >
      if (state === 'home') return '/local/tileimages/tracking/k.png';
      return '/local/tileimages/tracking/kgrey.png';

and:

entity: device_tracker.112833888050961433
templates:
  icon: >
    if (state === 'home') return 'value: "/local/tileimages/tracking/k.png"';
    return 'value: "/local/tileimages/tracking/kgrey.png"';

Maybe I am missing an easier way to display images? But I cannot get any images to show with “image:” instead of “icon:”

Cheers for all the assistance!

589

that depends a bit on which version of what HA system and custom card you are using… Lovelace or legacy Ha. I have them in all sorts, so give some pointers and I can see what you need

590

Ah sorry poor form on my part!

Interface: Lovelace
Custom tiles: /local/lovelace_tiles/tiles-card.js (not sure how else to ID it?)
HA version: 0.91.2

CHeers
Matt

591

ok, so here’s what you do for a fixed picture on an entity:

type: custom:tiles-card
card_settings:
  title: Activities
  columns: 4
  row_height: 100px

global_settings:
  icon:
    size: contain

entities:
  - entity: script.opstaan_direct
    templates:
      style: >
        if (entities['input_select.activity'].state === 'Opstaan') return 'background-color: #F0C209';
        return 'background-color: #555B65;filter:grayscale(75%)';
    icon: /local/activities/opstaan.png

and here’s a nice template:

entities:
  - entity: device_tracker.life360_name
    templates:
      background: >
        if (state === 'home' || state === 'not_home') return 'url(\"/local/tiles/family/name_' + state + '.png\")';
        return 'url(\"/local/tiles/family/name_' + entities['sensor.name_location_picture'].state + '.png\")';
      style: >
        if (state === 'home') return 'background-color: #008000';
        if (state === 'not_home') return 'background-color: #808080';
        return 'background-color: #643aac';
    more_info: group.name
1 Like
592

Legend! So helpful - thanks mate!!

Exactly what I was after

1 Like
593

cool, you’re most welcome, glad to be of help.

btw, did you spot the Button card by by @RomRider ? Its not a complete replacement (yet) because it still lacks the grid option, and some advanced templating, but it has come a long way. It has super support and development speed, which is what Tiles is missing unfortunately. The above in Buttons style:

      - type: custom:button-card
        template: button_picture_family
        entity: device_tracker.life360_name
        entity_picture_template: >
          if (entity.state === 'home' || entity.state === 'not_home') return '/local/tiles/family/name_' + entity.state + '.png';
          return '/local/tiles/family/name_' + states['sensor.name_location_picture'].state + '.png';
        tap_action:
          entity: group.name

see the community for the latest: Lovelace: Button card

1 Like
594

Thanks, I’ll check that out - I’m getting the impression that the Custom UI Tiles interface is unlikely to remain current much longer… so I may add well familiarise myself with its replacement…!

595

I am trying to get a new install set up with tiles. I have tiles-card.js copied in the www folder.

Do I need an html file too? I don’t see an html file at https://github.com/rodrigofragadf/lovelace-cards/tree/master/tiles-card.