Custom UI: Tiles

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

Nope. It’s completely abandoned and the repository has been deleted.

There is a replacement that is very easy to switch over to for Lovelace:

Or the full featured version that will take you a bit more work but is well worth it:

1 Like

yes, that is really a pity.
you can still use text_align: center in the config, which takes care of horizontal aligning, havent been abel to find the vertical solution either…

the new lovelace-cards is a bit finicky also…and takes out all space between the tiles (using the legacy config here)

might have to switch to the fun version after all…and be forced to go for Lovelace

1 Like

Sadly even rodrigofragadf’s version seems to be abandoned now. I’m using the full version as it really is great, but as of some changes in 0.88 it doesn’t quite look the same (effects, borders, etc.).

I still haven’t found another way to do things nearly as well.

It’s worth the hassle. The full version gives you control over the padding and tons of other settings.

Yeah, now there’s no feedback that you’ve actually pressed the button . It used to dim when pressed.

Hey guys thanks for the feedback - I am having a go with the lovelace options now.

I am having a few head-scratchers following the git ReadMe though - it seems that the only way I can actually effect the ‘views’ with, is by editing the ‘/config/.storage/lovelace’ file.

It seems to have been auto-created based on my existing ‘groups.yaml’. It’s in json format, but hopefully I can take existing yaml + some of the examples in this thread, and convert them over to json (as opposed to manually writing the /config/.storage/lovelace from scratch).

Is this the file you guys are editing?

EDIT: just found this: https://www.home-assistant.io/lovelace/yaml-mode/

Maybe I need to enable yaml mode :thinking:

EDIT 2: I enabled yaml mode. Then I took the /config/.storage/lovelace file and converted it to yaml (using an online JSON-to-YAML converter). I copied that yaml into my ui-lovelace.yaml - and BAM I am now 90% of the way there (nearly back to my old config, but needing the tiles remade), formatting looks awesome already.

Hopefully that helps someone out there!! I imagine that saved a lot of pain?

There is no need to do any of that. Click the three dots icon in the top left of HA. Select Configure UI. Click the three dots again and select RAW. You now have a yaml view you can edit.

However there’s not even any need to do that.

Click the three dots icon in the top left of HA. Select Configure UI. Click the (+) icon lower right to add a new card.
Select a manual card and paste or write your yaml for the card there.

I find writing my cards in an editor easier. Then I paste into a new manual card. Writing in the new card directly can bog the web browser down eventually.

1 Like

Very nice! Lovelace is more mature than I realised. Thanks for the pointers!

Now I just need to figure out these tiles…

I can’t get images to display - the following code just shows a grey rectangle (instead of a 1x4 column image):

type: 'custom:tiles-card'
card_settings:
  align: center
  gap: 10px
  padding: 0px
  columns: 4
  row_height: 75px
  column_width: 72px
entities:
  - entity: script.update_synoplayers
    templates:
      style_template: >-
        return "background-image: url(/local/musicbanner2.png); background-size:
        contain;"
    row: 1
    column: 1
    column_span: 4

Has anyone successfully used images (png) with the latest version?

I cannot get the images to display within the tiles, despite trying all the (slightly) differing examples on this thread.

I’m assuming that these examples in this thread are for the legacy version?

Or perhaps my version of Home Assistant (0.91.2) has broken the image display?

Yes I have. I’m using some local material design icon pngs because they’re not available in HA yet (or weren’t when I wrote the card):

The pngs go in your www folder and are used like this:

      - column: 3
        entity: script.lounge_kodi_player_skip_fwd_10
        icon:
          value: /local/icons/fast-forward-10.png
        row: 5

Note: my png files are in a subdirectory of the www folder called ‘icons’. You don’t have to do this but it keeps things organised.

1 Like

Excellent thanks @tom_l

by the way, I also had downloaded my own png while mdi:fast-forward-10 was missing. It is available in v0.91.2.

Thanks for the heads up on the icons.

No probs. Hey - your ‘icon’ approach worked - but the image is squished to the size of an icon… can we define the icon size?

I am searching, but this thread is bloody large eh

You can use:

icon:
  value: /local/icons/fast-forward-10.png
  size: 18px # whatever size you want
1 Like

Hi everyone - does the “icon_template” method work in the latest lovelace tiles/Home Assistant version?

I cannot get any of the examples here to work. Here is what my code is at now - no error, just no icon either;

  - entity: switch.pioneer_mutetoggle
    icon_template: >-
      if (state === 'on') return 'mdi:volume-high';
      return 'mdi:volume-low';

I have also tried standard Jinja templating to no effect:

  - entity: switch.pioneer_mutetoggle
    icon_template: 
       '{% if states.media_player.pioneer.attributes.is_volume_muted == false %}
           mdi:volume-high
       {% elif (states.media_player.pioneer.attributes.is_volume_muted == true) %}
           mdi:volume-mute
       {% else %}
           mdi:volume-low
       {% endif %}'

I’m using the new version but the following works ok for me which may help. Might be worth trying double quotes and else.

templates:
  label_sec: "return 'Windows: ' + entities['sensor.windows_open'].state;"
  style: "return 'font-weight: bold;'"
  icon: "if (state === 'on') return 'mdi:window-open'; else return 'mdi:window-closed'"
1 Like