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.
6 Likes
Oh yes! You’re the best 
1 Like
Can you share your code with us? Even in alpha state it seems to be usable 
And there are also lots of talented people here who can help you!
Ok, I will organize the code and share it.
2 Likes
Any updates? 
(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).
7 Likes
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:
-
The mdi icons are always black. I managed to change some of them using text_color: white, but that did not work for switches.
-
Is there any way to add entities to the same card? I really prefer mixing tiles and entities
I tried using vertical-stack-in-card but that does not appear work with your custom card -
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
legacy_config:
columns: 5
row_height: 72px
color: grey
color_off: grey
entities:
- 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:
contain;’’’- entity: script.tv_select_stod2
style_template: ‘return ‘‘background-image: url(/local/Images/Stod2.png); background-size:
contain;’’’- 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
legacy_config:
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)"
Thanks!
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 
1 Like
Can someone put a link to the last version now when the dev has removed it från github?
all the link in this post seems to be dead 
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 ...
HI!
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.