Custom UI: Tiles

yes, but you should use a real entity_id… this was just a generic exampleof course :wink:

well tbh, that’s not a dumb mistake, but a discrepancy/change of the new tiles card, and a bit against usual practice?

before we needed to code like this:

homeassistant:
  customize:

    input_text.tiles_switches:
      custom_ui_state_card: state-card-tiles
      config:
        columns: 4
        row_height: 70px
        color_on: '#F0C209'
        color_off: '#555B65'
        text_uppercase: false
        text_color_on: '#555B65'
        text_color_off: '#F0C209'
        text_size: 1em
        text_sec_size: 1em
        text_align: center
        entities:
          - entity: switch.sw_netwerk_auditorium_template
            label_sec: Auditorium
            icon_template: >
              if (state === 'on') return 'mdi:wifi';
              return 'mdi:wifi';
            style_template: >
              if (state !== 'on') return 'text-decoration: line-through';

as is needed with the legacy settings:

type: custom:tiles-card
legacy_config:
  columns: 4
  row_height: 70px
  text_color_on: '#555B65'
  text_color_off: '#F0C209'
  color_on: '#f0c209'
  color_off: '#555b65'
  text_sec_color_on: '#555B65'
  text_sec_color_off: '#F0C209'
  text_uppercase: false
  text_size: 1em
#          text_sec_size: 1em
#          text_align: center


#    if (state === 'on') return '--tiles-icon-color: #555B65';
#    return '--tiles-icon-color: #F0C209';
    
    
  entities:
    - entity: switch.sw_netwerk_auditorium_template
      label_sec: Auditorium
      icon_template: >
        if (state === 'on') return 'mdi:wifi';
        return 'mdi:wifi';
      style_template: >
        if (state !== 'on') return 'text-decoration: line-through;--tiles-icon-color: #F0C209';
        return '--tiles-icon-color: #555B65';

Agreed, it would be great if Tiles could utilise tap_action (along with action, navigation_path, etc), as documented in the built-in button card here: https://www.home-assistant.io/lovelace/entity-button/configuration-variables

Agreed that this would be awesome to have. I have a few RGB light strips and I’d love to be able to use hold_action to pull up more-info so that I could set the colors.

I do see that under entity, there is an option for more info, but I’m not 100% sure what it does based on the example on github.

entities:
    
    - entity: light.light_1 #(Entity specific settings. Overwrite the global settings)
      column: 1 #(optional)
      row: 1 #(optional)
      column_span: 2 #(optional)
      row_span: 4 #(optional)
      display: show #(optional)(hidden, none, show)
      orientation: #(optional)(horizontal or vertical)
      padding: 0px #(optional)
      align: 'center middle' #(optional)(letf, center, right, top, middle, bottom)
      disabled: true #(optional)(true or false)
      shadow: 'elevation: 12dp' #(optional)(elevation: 2dp, 3dp, 4dp, 6dp, 8dp, 12dp, 16dp or 24dp or box-shadow css attributes)
      more_info: switch.tv #(optional)
      data: #(optional)
      service: #(optional)

Has anyone managed to get any of the tiles to pull up the more-info window?

oh yes. its working. may i ask more help? :slight_smile:
i want to show “seconds ago”… how this formula has to be?

you mean the text ‘seconds ago’ ?

this always done like : return state + 'seconds ago' ;

of course replace state with whatever you’re showing

see my example above:

return Math.round(attributes.brightness / 2.55) + ' %';

it calculates the value and add s the % after that

09

like this, but its ugly:

  entities:
    - entity: switch.sw_netwerk_auditorium_template
      label: Auditorium
      label_sec_template: >
        return entities['switch.sw_netwerk_auditorium_template'].last_changed
      icon_template: >
        if (state === 'on') return 'mdi:wifi';
        return 'mdi:wifi';
      style_template: >
        if (state !== 'on') return 'text-decoration: line-through';

52

or

  entities:
    - entity: switch.sw_netwerk_auditorium_template
      label: Auditorium
      label_sec_template: >
        return 'Changed ' + entities['switch.sw_netwerk_auditorium_template'].last_changed
      icon_template: >
        if (state === 'on') return 'mdi:wifi';
        return 'mdi:wifi';
      style_template: >
        if (state !== 'on') return 'text-decoration: line-through';

48

needs further templating to be useful

@jarrah I was trying to build a light count like you have. Built the sensor the same way you did for your blinds, just using my light and switch entities in it, and it does the count, but it doesn’t update when lights are turned on and off. I have the sensor config in configuration.yaml. If I restart home assistant it will update the count, but if I turn anything on or off, it won’t update again until I restart everything.

Wondering if you have any advice on what I might be doing wrong.

Actually, figured it out. I didn’t have the sensor.time setup in config.

I have this setup on how long since my garage door state changed. Here’s how I did it.

In the view config:

- entity: cover.garage_door_opener
  row: 4
  column: 1
  column_span: 4
  row_span: 1
  icon:
  templates:
    label_sec: "return 'Garage Door is ' + entities['cover.garage_door_opener'].state + '.<br>
                It has been ' + entities['cover.garage_door_opener'].state + ' for ' + (entities['sensor.garage_last_updated'].state) + '.'"

and the config to build that specific sensor is in configuration.yaml:

  - platform: template
    sensors:
      garage_last_updated:
        value_template: '{{relative_time(states.cover.garage_door_opener.last_changed)}}'
        entity_id: sensor.time

and make sure that you have the platform for time_date in your configuration.yaml as well:

  - platform: time_date
    display_options:
      - 'time'
      - 'date'
      - 'date_time'
      - 'time_date'
      - 'time_utc'
      - 'beat'

That gives me this:

Capture

yes, and for the automation, he’d need something like this:

{{relative_time(states.automation.automation_ran.attributes.last_triggered)}} (which is an actual automation I have to see which automation ran)

btw: dont think you’d need the entity_id: sensor.time here. The entity_id would be enough since the template holds all data needed to ’ only update based on entity state changes.’ see: Automation Trigger - Home Assistant

So here’s another odd thing I noticed. If I have an icon set for the view, the icons will show for everything. If I don’t have an icon set for the view, all the other icons disappear.

odd1

odd2

Below is a part of the config:

title: Home
icon: mdi:home
panel: false
path: main
background: '#170e4d'
cards:
  - type: 'custom:tiles-card'
    card_settings:
      align: center
      gap: 1px
      padding: 0px
      columns: 4
      row_height: 45px
      column_width: 109px
      templates:
        style: "return 'box-shadow: 0px 0px;'"
    global_settings:
      label:
        color:
          value: white
          value_on: white
          value_off: grey
          value_disabled: white
      label_sec:
        color:
          value: white
          value_on: white
          value_off: grey
          value_disabled: white
      background:
        value: '#2c446b'
        value_on: '#4879c9'
        value_off: '#2c446b'
        value_disabled: black
      icon:
        value_disabled: 'mdi:cloud-off-outline'
        color:
          value: white
          value_on: '#f8ff32'
          value_off: white
          value_disabled: red
    entities:
        - entity: group.actual_lights
          templates:
            label: "return 'Lights on: ' + entities['sensor.lights_on'].state;"
          row: 1
          column: 1
          column_span: 4


        - entity: switch.bathroom_light
          templates:
            label: "return 'Bathroom'"
            icon: "if (state == 'on') return 'mdi:lightbulb-on';else return 'mdi:lightbulb-outline'"
          row: 2
          column: 1
          column_span: 1
          row_span: 2

if I remove the icon:mdi:home from the top, all icons disappear.

Anyone updated to .88 and now the tiles don’t give that nice ‘flash’ when you press them, but instead there is a blue outline around the tile. So, last tile pressed always has a blue outline around it?

Getting the same thing here… Haven’t had time to check if it’s related to the breaking change, a few custom cards have had to update to accommodate 0.88

Ther’s not even the blue outline in Firefox. If it wasn’t for the service-call pop-up lower left it would be impossible to tell if the button had been pressed.
Safari shows a slight dimming of the button.

Yeah, just checked firefox, no outline.
I get the blue outline on chrome, Fully Kiosk Browser, and Wall Panel.

Hi @rodrigodf, would you mind popping back on to help fix some of the issues seen on 0.88 with your excellent Lovelace version of Tiles please?

1 Like

I thank yes :sunglasses:

Same for me on Home Assistant 0.88.2. You need at least two views (otherwise Home Assistant won’t show the tab bar and thus no view icon). If I remove icons from the views and refresh the page (via browser/F5), not a single icon of the tiles card shows up (although they seem to be there in the DOM).

May have something to with https://www.home-assistant.io/blog/2019/02/20/release-88/#noteworthy-breaking-changes

Example Lovelace configuration below. Channel up/down icons disappear when removing icon: mdi:home from first view (thus no view with icon).

resources:
  - url: /local/tiles-card.js?v=0.1
    type: js

views:
  - title: Home
    icon: mdi:home
  - title: Remote
    panel: false
    path: main
    cards:
      - type: "custom:tiles-card"
        card_settings:
          title: Fire TV
          background: var(--paper-card-background-color)
        global_settings:
          background: var(--paper-card-background-color)
        entities:
          - entity: script.lgtv_channel_up
            label: Channel up
            icon: mdi:menu-up
          - entity: script.lgtv_channel_down
            label: Channel down
            icon: 'mdi:menu-down'

ha-with-view-icon ha-without-view-icon

I assumed this card is not being developed anymore or at least on hold.
Does anyone have any information on that?
To me it is aesthetically unusable since 0.88 with the buttons being outlined after press. This is not a complaint, I’ll find another card, just wondering if anyone knows if the card is no longer being developed.

Hey all - I LOVE this tile customisation, I never want to look back.

But I just upgraded from 87 to 91 (not using Lovelace) and it appears that the ‘align:’ variable is broken. I first noticed when I had no ‘align:’ value set - so I was relying on the default ‘center middle’. I have entered ‘align: center middle’ since, to no effect.

The images are fine (they take up all tile space), it’s just the mdi icons and text labels that are noticeably affected.

Is this mod still supported somewhat? I hope so, it’s a huge improvement on the default IMHO

Cheers!
Matt

image