I will definitely go with Lovelace, but my impression was that custom_ui was to some degree supported on Lovelace? Anyhow, I went with the Lovelace Button Card and it’s working pretty well so far… Still need to tweak it a bit…
I have several issues migrating to Lovelace, coming from tiles:
main issue:
coloring the global tile-set as used to be done in Tiles with:
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
now set in Lovelace as:
- 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_uppercase: false
text_size: 1em
# text_sec_size: 1em
# text_align: center
has unexpected behavior, being the icons don’t color depending on state, nor do the text.
in other set of tiles, the colors of the tiles (color_on, color_off) dont work, and I have to set these per entity.
regular Tiles in regular HA:
cards in Lovelace:
cant find any this is happening, and more specific, why the behavior is inconsistent …
before you notice the uppercase hex coloring: I tried if that could be the solution, but of course that wasn’t it…
HI!
I finally made it to have my legacy Tiles cards in Lovelace now show exactly as they did before, thanks to your custom-card, so a big thank you once again 
Only thing that is keeping me from switching over to Lovelace fully is the icon_coloring…
I’ve tried each and every single option I can think of, from your tiles-cards.js, either new or legacy definition. I simply can’t get the icons to use the icon_color, icon_color_off/on either globally in config or entity.
iow, right now the only way I can find the icons to color according to state is by using this style_template for each and every tile:
style_template: >
if (state == 'on') return '--tiles-icon-color: #555B65';
return '--tiles-icon-color:#F0C209';
while it would be so much easier and shorter ( and less error sensitive/prone) to use the config global setting, and let the style_template override if necessary:
type: custom:tiles-card
legacy_config:
icon_color_on: #555B65
icon_color_off: #F0C209
this is the relevant part in the .js:
if(tilesConfig.icon) {
if(tilesConfig.icon.color) style.setProperty(value+"icon-color", tilesConfig.icon.color);
if(tilesConfig.icon.color_on) style.setProperty(value+"icon-color-on", tilesConfig.icon.color_on);
if(tilesConfig.icon.color_off) style.setProperty(value+"icon-color-off", tilesConfig.icon.color_off);
if(tilesConfig.icon.size) style.setProperty(value+"icon-size", tilesConfig.icon.size);
if(tilesConfig.icon.padding) style.setProperty(value+"icon-padding", tilesConfig.icon.padding);
}
icon_size is the only variable that works here.
Please would you let me know how I can set the icon_color globally in the config, or per entity (not using style_template but icon_color)?
Thanks in advance.
Hi!
I updated the card on Github, try to get the newer version and see if the problem has been solved. It should use the same colors of text_color, text_color_on, and text_color_off for the icons.
1 Like
thank you!
is that for the global config settings, or for the entity settings?
also please let me ask, if there is any difference in setting the card for legacy cards or for new cards with Tiles. Do you have a set of instructions yet?
would you care to have a look at the label-sec-color also? It would be great if we could set that independently and use it in label-sec-color-on and label-sec-color-off version too, globally per config.
It should work for global and entity settings as well. You can also try using the style_template with attributes “–tiles-icon-color”, “–tiles-icon-color-on” and “–tiles-icon-color-off”. The new configuration brings several new features but it’s completely different from the legacy version, I’m out of time to write the documentation right now, my english is not very good so I’ll have a lot of work to translate, but I can anticipate the configuration structure so you can do some tests.
1 Like
thanks, @rodrigodf
global settings work easier indeed, cool, took out many identical lines of coloring 
there’s a bit if an issue though, because there’s no way anymore to override the default config setting for icon-color… see below what i have tried
in entity settings:
text_color_on/off
icon_color_on/off
in entity style_template setting:
–tiles-icon-color #original setting in the previous script which worked, see bottom of my post, so now broken?
–tiles-label-color (which makes sense cause I don’t use text_sec or label, but tried anyway)
main grid/ config 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
overriding per tile entity:
- entity: switch.sw_boiler_bijkeuken_template
# text_color_on: '#f0c209' # doesnt work, error! see below in red
# text_color_off: '#cf2525'
# icon_color_on: '#f0c209' #doesnt work, no error
# icon_color_off: '#cf2525'
text_sec_color_on: '#f0c209'
text_sec_color_off: '#cf2525'
label_sec_template: >
if (state === 'on') return entities['sensor.boiler_bijkeuken_actueel'].state;
return 'Boiler off';
icon_template: >
if (state === 'on') return 'mdi:kettle';
return 'mdi:kettle';
style_template: >
if (state === 'on') return 'background-color: #cf2525;--tiles-icon-color: #f0c209' ;
return 'text-decoration: line-through;--tiles-icon-color: #cf2525';
more_info: switch.sw_boiler_bijkeuken_template
is this a bug in the script, or should I try some other setting? please have a look?
fyi, this did work in the previous version:
- entity: switch.sw_boiler_bijkeuken_template
text_sec_color_on: '#f0c209'
text_sec_color_off: '#e93c24'
label_sec_template: >
if (state === 'on') return entities['sensor.boiler_bijkeuken_actueel'].state;
return 'Boiler off';
icon_template: >
if (state === 'on') return 'mdi:kettle';
return 'mdi:kettle';
style_template: >
if (state === 'on') return 'background-color: #cf2525;--tiles-icon-color:#f0c209';
return 'text-decoration: line-through;--tiles-icon-color:#e93c24';
more_info: switch.sw_boiler_bijkeuken_template@Mariusthvdb I used your configuration here but could not reproduce the error, I obtained the following result:
With Chome:
With Firefox:
It must be taken into account that entities with state (on/off) disregard the value of icon-color using only the values of icon-color-on or icon-color-off according to the current state. Using your settings and changing --tiles-icon-color to --tiles-icon-color-on and --tiles-icon-color-off I obtained the following results:
Code:
- 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 entities: - entity: switch.lavalamp text_sec_color_on: '#F0C209' text_sec_color_off: '#E93C24' label_sec_template: > if (state === 'on') return entities['switch.lavalamp'].state; return 'Boiler off'; icon_template: > if (state === 'on') return 'mdi:kettle'; return 'mdi:kettle'; style_template: > if (state === 'on') return 'background-color: #CF2525;--tiles-icon-color-on:#F0C209'; return 'text-decoration: line-through;--tiles-icon-color-off:#E93C24'; more_info: switch.lavalamp
With Chome:
With Firefox:
Maybe it’s something close to what you’ve been waiting for? I sent another version to Github yesterday, try to update it. Be sure to change the version of the card in ui-lovelace.yaml with each new update:
- url: /local/lovelace/tiles-card.js?v=0.0.x
type: js
I’ll update the readme in Github soon with the new configuration structure, maybe you’ll get better results with it.
before spamming this thread too much, maybe you create a separate and dedicated thread for your magical card for Lovelace? It deserves its own place!
thanks for the hint of the --tiles-icon-color-off and --tiles-icon-color-on. I didn’t think of that, because the template would have taken care of the on/off choice so icon-color should have been enough. This does the job indeed:
I see you have the same issue for the Off state: you need to refresh it sometimes, the card doesn’t always respond as it should…
I have another challenge concerning the icon-color working now in the previous card version:
type: custom:tiles-card
legacy_config:
row_height: 25px
text_uppercase: false
text_size: 1em
text_color_on: '#555B65'
text_color_off: '#F0C209'
text_sec_color_on: '#555B65'
color_on: '#F0C209'
color_off: '#555B65'
# icon_size: 25px works but is not necessary
entities:
- entity: group.all_lights_only
label_template: >
if (entities['sensor.lights_badge'].state !== 0) return 'Total lights on: ' + entities['sensor.lights_badge'].state;
return 'No lights on';
icon_template: >
if (state === 'on') return 'mdi:power-plug';
return 'mdi:power-plug-off';
style_template: >
if (state == 'on') return 'min-height: 25px;--tiles-icon-color: #555B65';
return 'min-height: 25px;--tiles-icon-color:#5daf35';
color_on: '#5daf35'
text_color_off: 'green'
column: 1
column_span: 3
row: 1
row_span: 1
- entity: group.all_hallway_lights
label: All hallway and ambient lights
icon_template: >
if (state === 'on') return 'mdi:power-plug';
return 'mdi:power-plug-off';
style_template: >
if (state == 'on') return 'min-height: 25px;--tiles-icon-color: #F0C209';
return 'min-height: 25px;--tiles-icon-color:#5daf35';
color_on: '#cf2525'
text_color_on: '#f0c209'
text_color_off: '#5daf35'
column: 1
column_span: 3
row: 2
row_span: 1
- entity: light.outdoors
label: All outdoor night lights
icon_template: >
if (state === 'on') return 'mdi:power-plug';
return 'mdi:power-plug-off';
style_template: >
return 'min-height: 25px;--tiles-icon-color: #F0C209';
color_on: '#1675C9'
# color_off: '#c7c4bb'
text_color_on: '#f0C209'
text_sec_color_on: '#f0C209'
# text_color_off: '#1675C9'
column: 1
column_span: 3
row: 3
row_span: 1
- entity: light.backdoor
label: Backdoor
label_sec_template: >
if (state === 'unavailable') return 'n/a';
if (state === 'off') return ' ';
return Math.round(attributes.brightness / 2.55) + ' %';
icon: mdi:wall-sconce
style_template: >
if (state === 'unavailable') return
'border: 1px dotted #D3D3D3;color:#D3D3D3;--tiles-icon-color:#D3D3D3;--tiles-label-sec-color: #D3D3D3;background-color:var(--paper-card-background-color)';
return '--tiles-icon-color:#F0C209';
color_on: '#1675C9'
# color_off: '#c7c4bb'
text_color_on: '#f0C209'
text_sec_color_on: '#f0C209'
# text_color_off: '#1675C9'
column: 1
row: 4
row_span: 2
mainly concerned here with the state ‘unavailable’. If I can’t use the --tiles-icon-color in the template, as I do now, how could I set the color for the icon in the state unavailable…
Please consider changing the card so one can use --tiles-icon-color: independent from state.
if (state == ‘on’) return ‘–tiles-icon-color: red’;
if (state == ‘off’) return ‘–tiles-icon-color: green’;
if (state == ‘unavailable’) return ‘–tiles-icon-color: grey’;
etc etc
it doesn’t like something in the label definition either:
See the new readme page with the default configuration structure, maybe have some of the functionality you want but the configuration will change a lot. I had not thought of the state unavailable because in my home assistant I have no entities that return this state to me, but with this new configuration when the entity is not turned on or off it uses the default color values. I thought about creating a specific topic for my card, but I do not know if I’ll be able to give the right support to the users at the moment, so I’m not attracting much attention right now.
Check your version of the card because it no longer uses the “common_settings” parameter that was shown in your error.
wow, that’s a lot of options .
must have a look at that coming weekend…
still, please consider making it easy to just use --tiles-icon-color, and all the other variables, in templates, without the -on and -off. That really isn’t necessary and makes creating templates much easier and robust.
the -on and -off versions are necessary fir the global config and entity setting, but when templating, the template decides whether or not to use any of these, and shouldn’t rely on the variable directly.
Most options are optional for those who do not want to have to write templates, but the configuration can also be done almost exclusively by templates, for example:
- type: custom:tiles-card card_settings: title: Card Title columns: 4 row_height: 35px templates: style: "return '--tiles-icon-color: yellow;'" global_settings: label: Light orientation: horizontal background: gray icon: mdi:power entities: - entity: light.light_1 label_sec: "1" templates: icon_color: "if (state == 'off') return 'red'; else return 'green';" label_color: "if (state == 'off') return 'red'; else return 'green';" - entity: light.light_2 label_sec: "2" templates: style: "if (state == 'off') return '--tiles-icon-color: red;'; else return '--tiles-icon-color: green;'" - entity: light.light_3 label_sec: "3" - entity: switch.lavalamp label_sec: "4" - entity: icon: mdi:lightbulb column_span: 4 label: Light 5
You can use for exemple the icon_color template to return the color (light_1) or use the style template to return the css -tiles-icon-color tag with the color (light_2). That way you have many configuration options.
Nice. I’ll need the rewrite my current tiles to use the new and future proof setup.
Which makes me wonder if you could split the custom card. In a legacy variant and a new variant . I have made the tiles I had work 100% matching with your origins custom card, but all newer versions keep breaking that…
If Have reverted to the first one and like to leave it like that.
If we could have 2 cards available , we could have the older one for legacy Tiles, and the new versions for new tiles without them bugging each other.
Would make the cards tighter too, and maybe less complex to have to maintain.
have both:
custom:tiles-card-legacy
and
custom:tiles-card
Thanks for considering
This would make sense if the legacy version only worked as the previous version without additional functionality and no future additions. In fact, I added the legacy configuration just to make the card available faster for those who expected to have the same functionality as the original version without much effort. As soon as I have time, I will try to make this separation.
1 Like
A huge thank you for putting this together rodrigodf. I’ve moved from tiles, to your legacy option, and now to your new one and all the new features are fantastic, very flexible, and they all work great!
There’s a couple of things that I think would be great additions to this, especially now I have about 1000 lines of config using it so far. I have no idea how hard these would be to implement.
-
Global settings templates which apply to each entity. i.e. if I had a global template to simply show ‘state’, or ‘friendly_name’ with the context of individual entities, it would save me a lot of repeating.
-
Being able to refer to theme colours i.e. ‘–primary-text-color’. I was going to create my own theming ‘system’, through the use of !secret to create common variables, but being able to make use of the built in theming engine in HA would be even better.
-
Embedding a card on a tile - this one might be a bit too crazy, but being able to make use of things like the sensor graph card, or an iframe, in a tile, could be fun.
anyone here with input_select as entity for tiles?
I am trying to get the tiles to show and select an option for the inout_select, but don’t know how really… All I get is a Tile which when clicked shows the input_select options dropdown.
I want to have all options with an image and click that tile, should select that option, and highlight it.:
type: custom:tiles-card
legacy_config:
columns: 6
# column_width: 50px #minmax(75px, 75px)
# icon_size: 50px
row_height: 50px
entities:
- entity: input_select.hue_scenes
label: Arctic
style_template: >
if (state === 'Arctische dageraad') return 'background-size: contain;background-color: #F0C209';
return 'background-size: contain; background-color: #555B65;filter:grayscale(75%)';
image: /local/images/hue/arctic.png
- entity: input_select.hue_scenes
label: Savanne
style_template: >
if (state === 'Savanne zonsondergang') return 'background-size: contain;background-color: #F0C209';
return 'background-size: contain; background-color: #555B65;filter:grayscale(75%)';
image: /local/images/hue/savanne.png
- entity: input_select.hue_scenes
label: Tropisch
style_template: >
if (state === 'Tropische schemering') return 'background-size: contain;background-color: #F0C209';
return 'background-size: contain; background-color: #555B65;filter:grayscale(75%)';
image: /local/images/hue/tropical.png
- entity: input_select.hue_scenes
label: Lente
style_template: >
if (state === 'Lentebloesem') return 'background-size: contain;background-color: #F0C209';
return 'background-size: contain; background-color: #555B65;filter:grayscale(75%)';
image: /local/images/hue/spring.png
- entity: input_select.hue_scenes
label: Concentratie
style_template: >
if (state === 'Concentreren') return 'background-size: contain;background-color: #F0C209';
return 'background-size: contain; background-color: #555B65;filter:grayscale(75%)';
image: /local/images/hue/concentrate.png
@rodrigodf would that be possible with your custom card?
something like below:?
service:
domain: input_select
action: select_option
data:
entity_id: input_select.hue_scenes
option: Arctic@mynameisdaniel, I glad to know that it is useful to you.
1 - I had already been thinking about the global templates and added this functionality in the last version sent to github today. You can now use all the templates available in the individual entities also in the global configuration.
2 - The theme option is already available using the HA engine, you simply create a theme file with the tags you want to use and then use the theme option in card_settings with the name of the theme you want to use, eg:
Theme file tilestheme.yaml
tilestheme:
tiles-icon-color: white
tiles-icon-color-on: green
tiles-icon-color-off: red
In tiles card_settings:
card_settings:
theme: tilestheme
Some of the options available for use with themes are:
tiles-card-display
tiles-card-visibility
tiles-card-title-color
tiles-card-title-align
tiles-card-background
tiles-card-columns
tiles-card-column-width
tiles-card-row-height
tiles-card-gap
tiles-card-padding
tiles-card-padding-top
tiles-card-align
tiles-dropdownmenu-padding
tiles-listbox-title-transform
tiles-listbox-title-color
tiles-listbox-itens-color
tiles-listbox-itens-size
tiles-listbox-itens-transform
tiles-grid-area
tiles-display
tiles-image-size
tiles-padding
tiles-box-shadow
tiles-orientation
tiles-vertical-align
tiles-horizontal-align
tiles-visibility
tiles-label-color
tiles-label-color-on
tiles-label-color-off
tiles-label-color-disabled
tiles-label-size
tiles-label-transform
tiles-label-padding
tiles-label-sec-color
tiles-label-sec-color-on
tiles-label-sec-color-off
tiles-label-sec-color-disabled
tiles-label-sec-size
tiles-label-sec-transform
tiles-label-sec-padding
tiles-icon-color
tiles-icon-color-on
tiles-icon-color-off
tiles-icon-color-disabled
tiles-icon-size
tiles-icon-padding
tiles-background
tiles-background-on
tiles-background-off
tiles-background-disabled
tiles-grayscale
tiles-grayscale-on
tiles-grayscale-off
tiles-grayscale-disabled
tiles-opacity
tiles-opacity-on
tiles-opacity-off
tiles-opacity-disabled
tiles-border-style
tiles-border-size
tiles-border-color
tiles-border-color-on
tiles-border-color-off
tiles-border-color-disabled
tiles-border-radius
3 - I’ve thought of some other features too, I’ll try incorporating them in the future when I have some time left over.
2 Likes
@Mariusthvdb, you can use input_select using the new version of the card, eg:
- entity: input_select.channel_list
title:
value: 'Channel List'
column_span: 4
row_span: 3
icon: mdi: format-list-bulleted
thank you!
does the title: value:
create the title of the tile, and select the option for the input_select? In which case that might be a bit troublesome since the options aren’t necessarily the same as the title of the tile… as you can see in my setup below title is Arctic (to fit the tile) while the option is ‘Arctische dageraad’
for now Ive replaced the input_select with an extra script calling the input_select:
type: custom:tiles-card
legacy_config:
columns: 4
text_uppercase: false
# column_width: 50px #minmax(75px, 75px)
# icon_size: 50px
row_height: 50px
entities:
- entity: script.tiles_set_hue_scene
label: Arctic
data: {option: 'Arctische dageraad'}
style_template: >
if (entities['input_select.hue_scenes'].state === 'Arctische dageraad') return '--tiles-label-color: black;background-size: contain;background-color: #00d0a0';
return '--tiles-label-color: grey;background-size: contain; background-color: #555B65';
image: /local/hue_scenes/arctic.png
with script:
tiles_set_hue_scene:
alias: Tiles set Hue scene
sequence:
service: input_select.select_option
entity_id: input_select.hue_scenes
data_template:
option: >
{{ option }}
was a bit of a search to find the way to colorize the text, but I’ve reached this result:
will see what the new code will do.
thanks again!
When using the input_select in the new tiles version a list box is created (the legacy version does not support native input_select). The title is at the top of the list and the selected item is at the bottom, as the pictures show:
In this case the configuration is as follows:
- entity: input_select.f90_canal
title:
value: 'Lista de Canais'
transform: capitalize
item:
transform: uppercase
background: '#b2690a'
column_span: 4
icon: mdi:format-list-bulleted
row_span: 3