Home Assistant Community

Custom UI: Tiles


I was not liking the results using other cards to simulate tiles, so I started to migrate tiles to lovelace. I never created lovelace cards so I’m having some difficulties but I’m liking the initial results.



Oh yes! You’re the best :muscle::ok_hand::+1:

1 Like


Can you share your code with us? Even in alpha state it seems to be usable :wink: And there are also lots of talented people here who can help you!



Ok, I will organize the code and share it.



Any updates? :slight_smile: (sorry for being impatient)



Yes, I just sent github a version that is working for me. In readme there are instructions about how to configure using your current tiles settings, test to check if it works for you. (Sorry my bad english).


Lovelace: Button card
Lovelace: Button card
Lovelace: Button card

@rodrigodf Great work!

1 Like


Hello and congrats on the great job!

I have installed it and almost got it working.

There are three things that I ran into trouble with:

  1. The mdi icons are always black. I managed to change some of them using text_color: white, but that did not work for switches.

  2. Is there any way to add entities to the same card? I really prefer mixing tiles and entities :slight_smile: I tried using vertical-stack-in-card but that does not appear work with your custom card

  3. How can I add a title to the card? vertical-stack-in-card is a workaround, but I wanted to ask if there was a better way?

Here is the code I used:

  • type: custom:tiles-card
    title: Sjónvarpshol
    columns: 5
    row_height: 72px
    color: grey
    color_off: grey
    • entity: switch.sjonvarp_stofan
      icon: mdi:television-box
    • entity: switch.magnari_stofan
      icon: mdi:speaker
    • entity: script.magnari_stofan_mute
      icon: mdi:volume-off
    • entity: script.magnari_stofan_down
      icon: mdi:volume-minus
    • entity: script.magnari_stofan_up
      icon: mdi:volume-plus
    • entity: script.tv_select_kodi
      icon: mdi:kodi
    • entity: script.tv_select_ruvhd
      style_template: ‘return ‘‘background-image: url(/local/Images/RUV.png); background-size:
    • entity: script.tv_select_stod2
      style_template: ‘return ‘‘background-image: url(/local/Images/Stod2.png); background-size:
    • entity: script.tv_select_sjonvarpsimans
      style_template: ‘return ‘‘background-image: url(/local/Images/Sjonvarp_Simans.png);
      background-size: contain;’’’
    • entity: switch.ps4
      icon: mdi:playstation


Thank you so much for this and for making it so easy to move it to lovelace. But in the old version I was able to use image: to access background-image so I could use gradients instead of solid colors. But that doesn’t seem to work. However it might be something that I changed in the old .html file, I know it was a lot of trial and error before I got it working. Could you help pointing me in the right direction to get it working with the .js?



Thanks @Steini1984,

I updated the .js to have the white color as default again. It’s still not possible to have entities on the same card, but I will try to implement this in the new version. To add a title to the card place the title: attribute inside legacy_config: this way:

  - type: custom:tiles-card
      title: Sjónvarpshol


@onlytobeking, try to use the gradient effect in the color attribute, for example:

color: "linear-gradient (to right, blue, orange)"
color_off: "linear-gradient (to right, red, yellow)"



I guess since I had the title in the wrong place the vertical-stack-in-card did not work.

Now it’s perfect

1 Like


Awesome, that easy… should of tried that myself :flushed:

1 Like


Can someone put a link to the last version now when the dev has removed it från github? :slight_smile:

all the link in this post seems to be dead :frowning:



desperately trying to get the Tiles to show my lights brightness in percentage on a Tile, but I can’t get the code correct…

somehow this:

if (attributes.brightness) return Math.round(attributes.brightness / 2.55) + '%'; (see: https://github.com/andrey-git/home-assistant-custom-ui/blob/master/docs/templates.md#display-brightness-only-if-it-exists-and-is-non-zero on custom-ui)

is not accepted in the Tiles cards to go along with the regular attributes.brightness:

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

Id like it to show: Br: 100 - 39 %

The individual parts show fine.
when combined, the inspector complained about a missing ; after a return statement.

@andrewjfreyer @Bobby_Nobble @Jer78 would you be able to shed some light here please? Im lost without the original Repo, and out of ideas…

1 Like


Possibly a casting issue. I’d try if (Math.round(attributes.brightness) > 0 ...



Why does that mean, a casting issue?
fyi, this works fine:

      - entity: light.dining_table
        label: Dining
        label_sec_template: >
          if (state === 'on') return Math.round(attributes.brightness / 2.55) + ' %';
          return '';


so probably not a matter of unknown or 0 brightness. Its the syntax for the combination of attributes.brightness and brightness_percentage I can’t get right.

But I hear what you’re saying, test for the value first. I do, and since I have another test for availability, Ive set it up like this now:

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

which practically means: first see if available, then if Off, and if both fail, meaning the light is On and available, show brightness_percentage (which it then has…)
now how to show both brightness, and brightness_percentage?



Casting just means that a line of a program expects a particular form or format of data (e.g., number, string, etc.). If you pass the string “0” to a function expecting a number, the function will fail. I agree that this does not seem to be a casting issue, but it was worth a suggestion I thought! haha.

Now I’m a bit confused at what you’re trying to show here, because it seems like the screenshot above works for your objective? What do you mean that you want to show “brightness” and “brightness_percentage” ?



I see, no that’s not the issue here. Thanks for explaining.

Since I never used the brightness percentage before, and always use the full brightness scale 0-255 Id like to show both values for starters, and see at once what the respective values are.

I therefor tried this:

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

in an attempt to show: Br: 100 - 39 %

but this errors out. The parser somehow must think I don’t end a return statement correctly since it complains it needs an ending ‘;’

can you spot the error?



I’m thinking about starting on a button panel for my config, and I’m wondering if you could give me any insights on your experience with custom_ui tiles vs. the new custom button card for this… Button card looks easier at first glance, but would love to hear some real world experience.