Custom UI: Tiles

[ntuseracc (Nils)]

Hi,
Im currently playing arround with the lovelace version by rodrigofragadf.

First: Thanks for the Great work!

Now a question

I created a few buttons for my AVR, but i dont want those visible in the UI all the times. I tried to use the conditional card combine with a boolean switch to toggle this on and off but its not working correctly.
If the boolean is on it shows up fine but if a access the page in the browser with it off and turning it on it wont load the tiles until i reload the whole page.
I had the same problem with a “not official” button card.

Any idea how i could fix this? Thanks for any help!

[mynameisdaniel (Daniel)]

I’m seeing the same thing, I have a heap of cards within a conditional card (which form part of a vertical stack). Not always, but more often I’m having to reload pages manually or they don’t show. This isn’t just happening for tiles, but another custom card (weather) too, so I suspect it’s a Lovelace issue.

[tom_l]

I used the legacy card to get things up and running quickly and I must say that was very easy. Thanks.
I will move to the non-legacy version eventually but until then, is there a padding option for the legacy version?
I tried this:

type: 'custom:tiles-card-legacy'
config:
  title: Channels
  columns: 4
  column_width: 75px
  row_height: 75px
  gap: 5px
  padding: 10px
  entities:
    - entity: script.lounge_tv_ch_abc
      column: 1
      row: 1
      column_span: 1
      image: /local/tv_logos/abc.png
    - entity: script.lounge_tv_ch_sthnx
      column: 2
      row: 1
      column_span: 1
      image: /local/tv_logos/southern-cross-television.png
    - entity: script.lounge_tv_ch_sbs
      column: 3
      row: 1
      column_span: 1
      image: /local/tv_logos/sbs.png
    - entity: script.lounge_tv_ch_nine
      column: 4
      row: 1
      column_span: 1
      image: /local/tv_logos/nine.png
    - entity: script.lounge_tv_ch_gem
      column: 1
      row: 2
      column_span: 1
      image: /local/tv_logos/gem.png
    - entity: script.lounge_tv_ch_go
      column: 2
      row: 2
      column_span: 1
      image: /local/tv_logos/go.png
    - entity: script.lounge_tv_ch_7mate
      column: 3
      row: 2
      column_span: 1
      image: /local/tv_logos/seven-mate.png
    - entity: script.lounge_tv_ch_7two
      column: 4
      row: 2
      column_span: 1
      image: /local/tv_logos/seven-two.png
    - entity: script.lounge_tv_ch_win
      column: 1
      row: 3
      column_span: 1
      image: /local/tv_logos/win.png
    - entity: script.lounge_tv_ch_one
      column: 2
      row: 3
      column_span: 1
      image: /local/tv_logos/one.png
    - entity: script.lounge_tv_ch_eleven
      column: 3
      row: 3
      column_span: 1
      image: /local/tv_logos/eleven.png

But it still has no padding from the side of the card:

Previously it looked like this:

[mpoirier (Micah Poirier)]

Does anyone have any thoughts on this? Any help would be appreciated.

[tom_l]

1. https://github.com/rodrigofragadf/lovelace-cards/tree/master/tiles-card
2. This is for Lovelace
3. See https://github.com/rodrigofragadf/lovelace-cards/tree/master/tiles-card-legacy
4. Time to update and move to Lovelace
5. As per 4.

[dakaix]

I’m trying to get a tile card working using a brand new installation of HA (0.86.3), and the latest javascript from the Github linked by @tom_l. However I cannot get any icons to appear on the tiles, see simple example below.

type: 'custom:tiles-card'
card_settings:
  title: Remote
entities:
  - entity: script.lg_tv_power_toggle
    icon:
      value: 'mdi:power'
      color: white

Looking at the generated HTML and CSS the icon looks to be present, it just seems to be stuck behind the tile. I see this behaviour on Safari, Chrome, Firefox and Brave.

Have I missed something basic here, or is there a bug in the latest version that I’m hitting?

[jarrah]

Based on a PM question as it may help others too, the ability to count how many windows or doors are open so that it can be displayed in my example above, can be found here:

Sensor Template Entity_id Wildcard For Loop

Yes and no - I didn’t use a wildcard in the end but instead listed all the items I wanted to count, using the code below: sensor: - platform: template sensors: windows_open: friendly_name: "Windows Open" value_template: >- {%- set windows = [ "binary_sensor.door_window_sensor_158d0001d68293", "binary_sensor.door_window_sensor_158d0001ab4089", "binary_sensor.door_window_sensor_158d0001ab38a0", "binary_sensor.door_windo…

[jarrah]

It looks like you have your yaml formatting misaligned as the following works ok for me:

title: Home
views:
  - title: test
    path: test
    cards:
      - type: 'custom:tiles-card'
        card_settings:
          title: Remote
        entities:
          - entity: script.lg_tv_power_toggle
            icon:
              value: 'mdi:power'
              color: white

[dakaix]

Thanks, I’ve just tried copying your exact spacing into the raw editor but am seeing the same behaviour. Attached below is a screenshot showing the code and the resulting preview.

[dakaix]

Here is a second screenshot showing the context in the full page editor:

Apologies for the double post, however I don’t appear to have sufficient posts to permit inclusion of multiple images at this time!

[tom_l]

What version of home assistant are you running?

Also make sure you have the latest version of the tiles-card.js file (download it in zip format to make sure github doen’t mess up the formatting!).

[dakaix]

If this was directed to me, apologies if that has been lost above. This is a brand new HA installation, originally 0.86.3 when it was deployed at the weekend. The tiles-card script was fetched via a git clone, and is an MD5 match to the one available in the repo you linked in your earlier post.

I have now updated HA to 0.86.4, however this has made no difference. Not that I expected it to, given the release notes contained nothing to suggest it would resolve this particular issue!

[tom_l]

I’m just trying to work out why it’s not working for you and is working for others (when you use exactly the same card config). What web browser are you using?

[dakaix]

In no particular order I have confirmed this behaviour on:
Safari 12.0.2
Chrome 71.0.3
Firefox 64.0.2
Brave 0.58.18

ETA: I should also say that Label’s work correctly, I’ve only seen this occuring with Icon’s on the Tiles card at the moment. The same icons work correctly on a Glance or Entities card.

[typeonegative (Gunnar)]

i would need help…
how is possible to show “last_changed” or “last_triggered” in tiles?

[Mariusthvdb (Marius)]

you can show just about anything on a tile, have a look at this:

      - entity: group.plafond_spots_woonkamer
        label_template: >
          if (entities['sensor.spots_badge'].state !== 0) return 'Living ceiling - Total Spots on: ' + entities['sensor.spots_badge'].state;
          return 'No Spots on';

which show the state of the señor.spots_badge (a count of the spots)

use entities['entity_id'].last_changed (remember last_changed isn’t an attribute and it would work.

if you’d want an attribute of an entity use something like this:

        label_sec_template: >
          if (state === 'unavailable') return 'n/a';
          if (state === 'off') return null;
          return Math.round(attributes.brightness / 2.55) + ' %';

[typeonegative (Gunnar)]

thanx for your reply. still this is like rocket science for me
shoult this work?

        label_sec_template: >
           return entities['entity_id'].last_changed

[b1naryv1k1ng (Michael)]

Just started trying to use tiles today, but I seem to be running into an error, “Please define your entities”.

Here’s my config so far.

title: Home
icon: mdi:multiplication-box
panel: false
path: tiles
theme: midnight
cards:
  - type: 'custom:tiles-card'
    card_settings:
      title: test
      gap: 10px
      padding: 0px
      columns: 2
      row_height: 45px
      templates:
        style: "return 'box-shadow: 0px 0px;'"
      entities:
        - entity: switch.bathroom_light
          label_sec: "1"
          row: 1
          column: 1
          icon: mdi:power
        - entity: switch.bedroom
          label_sec: "2"
          row: 1
          column: 2
          icon: mdi:power

[Jer78 (Jeremy Percival)]

I think the entities should be lined up with the card_settings not nested inside it.

[b1naryv1k1ng (Michael)]

You’re 100% correct. Thanks for catching my dumb mistake!