Unfortunately the tiles-card has been abandoned and no longer works with home assistant.
Hi, could you post a snippet of one of you “All” - buttons, for example of your Lounge card? Im not able to get the grouping to work, to turn all lights off or on of a complete room.
Thank you =)
It’s just a light group presented as an entity in Lovelace.
all_lounge_lights:
name: All Lounge Lights
entities:
- light.lifx_lounge_entrance_lamp
- light.lifx_lounge_front_left
- light.lifx_lounge_front_right
- light.lifx_lounge_middle_left
- light.lifx_lounge_middle_right
- light.lifx_lounge_rear_left
- light.lifx_lounge_rear_right
The card I’m currently using for displaying the button is no longer supported and I would not recommend use of it.
The issue is that this card has been abandoned by the developer. If you upgrade home assistant it may break and there is no support to get it fixed. Some people already require editing it locally to make it work.
ah ok, thank you. i’ll try this. I just liked the shadow pretty much if an entity is in use… so i also got the tiles card. i also saw theres a legacy version of it which is abandoned, the normal one also has been abandoned?
cool, ill give it a try… i just want the borders to light up which is pretty nice. cause of the amount different custom plugins this might be possible anyway =)
@sparkydave could you maybe help me a bit to get this test card converted to the custom button-card?
entities:
- card:
card_settings:
align: center
background: 'rgba(0, 0, 0, 0)'
column_width: calc(85%/4)
columns: 4
gap: 20px
padding: 0px
row_height: 75px
entities:
- column: 1
entity: group.test_group
label_sec:
value: null
row: 1
shadow: >-
${states['group.test_group'].state === 'on' ? '0px 0px 10px 3px
var(--paper-item-icon-active-color)' : 'none'}
- column: 3
entity: light.test_1
label_sec:
value: Place1
row: 1
shadow: >-
${states['light.test_1'].state === 'on' ? '0px 0px
10px 3px var(--paper-item-icon-active-color)' : 'none'}
- column: 4
entity: light.test_2
icon: 'mdi:lightbulb'
label_sec:
value: Place2
row: 1
shadow: >-
${states['light.test_2'].state === 'on' ? '0px 0px
10px 3px var(--paper-item-icon-active-color)' : 'none'}
global_settings:
background:
value: 'rgba(0, 0, 0, 0)'
border:
color:
value_off: var(--primary-color)
value_on: var(--paper-item-icon-active-color)
radius: 20px
size: 2px
icon:
color:
value_off: var(--primary-text-color)
value_on: var(--paper-item-icon-active-color)
value: 'mdi:lightbulb'
label_sec:
color:
value_off: var(--secondary-text-color)
value_on: var(--primary-text-color)
style: |
ha-card {
--ha-card-box-shadow: 'none';
}
type: 'custom:tiles-card'
entities:
- light.test_1
- light.test_2
- group.test_group
type: 'custom:config-template-card'
show_header_toggle: false
style: |
ha-card {
border: solid 2px var(--primary-color);
border-radius: 15px;
background: rgba(0, 0, 0, 0.6);
}
title: Lights
type: entities
I’m not very good at the coding of the button card to be honest. I got this from the forum thread. Put the below in your lovelace raw editor down the bottom / out of the way.:
button_card_templates:
light_button:
hold_action:
action: more-info
label: >
[[[ var bri = Math.round(entity.attributes.brightness / 2.55); if
(entity.state === 'on') return (bri ? (bri+"%") : '') ]]]
layout: icon_label
show_label: true
show_name: true
state:
- styles:
card:
- box-shadow: '0px 0px 10px 3px #F9C536'
icon:
- color: '#F9C536'
value: 'on'
styles:
card:
- width: 100px
- height: 100px
- border-radius: 15px
- margin: 5px 5px 0px 0px
- padding: 0px 0px
- '--paper-card-background-color': 'rgba(40, 40, 40, 0.7)'
grid:
- grid-template-rows: 42px auto 0px
- grid-template-columns: 42px auto
icon:
- width: 30px
- color: white
label:
- font-size: 12px
- font-weight: bold
- color: white
name:
- justify-self: start
- align-self: end
- padding: 9px 10px
- font-size: 12px
- font-weight: bold
- color: white
tap_action:
action: toggle
and then this in lovelace where you want the button:
type: 'custom:button-card'
entity: light.dining_lights # change only this entity to suit your config
template: light_button
and you will get this:
4 Likes
Very nice! thank you. That helps a lot. ill modify this to my needs =)
another thing im facing right now… is there a way to order multiple entities horizontal inside one card?
meaning, is there a way to orientate multiple entities horizontally while the normal card design is used as a “frame” for the group of entities?
with the horizontal stack i can order them as i want, but all the entities are seperated without a frame… i hope this makes sense ^^
This looks really good, do you know how I would create the template when I am using YAML mode?
Sorry for the post, figured it out. I needed to add it to my ui-lovelace.yaml file.
It looks like the tiles-card is old (2 years since update) but got just about everything working on the latest version of HA. The only thing I’m not seeing is the icon. If anyone has any ideas. I copied the example from tom_l and only changed the entity names.
The error I see:
Expected a value of type {entity,name,icon} | entity-id for entities.0.type but received "custom:config-template-card".
I’ve dropped it completely in favour of Rom Rider’s button card. You should really look into it. Takes a bit of effort to get your head around it as there are so many options but it is well worth it. Using the templates option has reduced the size of my Lovelace config considerably.
can you share the lovelace code of yours that is displaying this card?
Do you have an example of this?
Card config
entities:
- type: 'custom:hui-element'
card_type: horizontal-stack
cards:
- entity: light.lifx_top_of_stairs
template: light_button
type: 'custom:button-card'
- entity: light.lifx_bottom_of_stairs
name: Stairs
template: light_button
type: 'custom:button-card'
- entity: light.lifx_hallway
template: light_button
type: 'custom:button-card'
- entity: light.lifx_linen_cupboard
name: Linen Cbd
template: light_button
type: 'custom:button-card'
show_header_toggle: false
title: Hallways
type: entities
Template (put this at the top of your RAW Lovelace config):
button_card_templates:
light_button:
aspect_ratio: 4/3
color_type: icon
hold_action:
action: more-info
haptic: selection
label: >
[[[ var bri = entity.attributes.brightness &&
Math.round(entity.attributes.brightness / 2.55); if
(entity.state === 'on') return (bri ? (bri+"%") : 'On'); else return "Off"; ]]]
layout: icon_label
show_label: true
show_name: true
state:
- styles:
card:
- border: solid 1px var(--paper-item-icon-active-color)
- box-shadow: 0px 0px 10px 3px var(--paper-item-icon-active-color)
label:
- color: var(--paper-item-icon-active-color)
value: 'on'
- styles:
card:
- border: solid 1px var(--primary-color)
- box-shadow: none
value: 'off'
- icon: 'mdi:alert'
label: Lost
styles:
card:
- border: 'solid 1px #7f7f7f'
- box-shadow: none
icon:
- color: '#ff0000'
- opacity: 0.4
label:
- color: '#7f7f7f'
name:
- color: '#7f7f7f'
value: unavailable
styles:
card:
- border-radius: 10px
- padding: 6px 6px 6px 6px
- margin: 0% 0% 0% 0%
- '--ha-card-background': 'rgba(0, 0, 0, 0)'
grid:
- grid-template-areas: '"i l l" "n n n"'
- grid-template-rows: 33% auto
- grid-template-columns: 33% auto
icon:
- width: 28px
- padding: 0px 0px 0px 0px
- color: var(--button-card-light-color-no-temperature)
label:
- font-size: 12px
- justify-self: right
- padding: 0px 0px 0px 0px
- color: var(--secondary-text-color)
name:
- justify-self: middle
- align-self: end
- font-size: 14px
- padding: 0px 0px 0px 0px
- color: var(--primary-text-color)
- white-space: normal
tap_action:
action: toggle
2 Likes
Thank you.
Your theme is awesome. Good job.