You got it, thanks for the help/input!
Is there a way to overlay two icons at the same time?
Example Grid:
grid:
- grid-template-areas: '"i l" "n n" "s s" "s2 s2"'
- grid-template-columns: 1fr 1fr
- grid-template-rows: 1fr auto auto auto
I would like another icon overlayed on top of the icon in the âiâ grid area. Example i have a TV icon displayed, i would also like to display another icon depending on the current state of the harmony remote activity i.e. Kodi would display a kodi icon on top of the TV.
Youâll have to build your custom field yourself with the 2 icons or use position absolute for both icons (the default icon and a custom field icon, bypassing the grid)
Ok, is that because the icon area is hard coded?
Hi, been trying way to long to get these buttons into this card. I know its probably something so dumb, but I canât see why its not working. No matter what I try I cant see to get them all in, it either stacks the box or errors.
This:
- entity: sensor.livingroom_fanspeed
hold_action:
action: more-info
icon: 'mdi:fan'
name: Low
show_icon: true
show_name: true
state:
- color: 'rgb(0,0,128)'
spin: true
value: low
styles:
card:
- height: 90px
tap_action:
action: call-service
service: fan.set_speed
service_data:
entity_id: fan.groupfan
speed: low
type: 'custom:button-card'
- cards:
- entity: sensor.livingroom_fanspeed
hold_action:
action: more-info
icon: 'mdi:fan'
name: Med
show_icon: true
show_name: true
state:
- color: 'rgb(128,128,51)'
spin: true
value: medium
styles:
card:
- height: 90px
tap_action:
action: call-service
service: fan.set_speed
service_data:
entity_id: fan.groupfan
speed: medium
type: 'custom:button-card'
type: horizontal-stack
- cards:
- entity: sensor.livingroom_fanspeed
hold_action:
action: more-info
icon: 'mdi:fan'
name: High
show_icon: true
show_name: true
state:
- color: 'rgb(0,128,0)'
spin: true
value: high
styles:
card:
- height: 90px
tap_action:
action: call-service
service: fan.set_speed
service_data:
entity_id: fan.groupfan
speed: high
type: 'custom:button-card'
Into this here:
entities:
- entity: fan.groupfan
hold_action:
action: more-info
icon: 'mdi:pinwheel'
name: On/OFF
tap_action:
action: toggle
- entity: input_boolean.switches5
name: Stop Fan Automations
- entity: input_boolean.switches6
name: Temperature Control
- entity: input_boolean.switches7
name: Motion Control
- entity: sensor.livingroom_fanspeed
hold_action:
action: more-info
icon: 'mdi:pinwheel'
name: Med
show_icon: true
show_name: true
state:
- color: 'rgb(128,128,51)'
spin: true
value: medium
styles:
card:
- height: 90px
tap_action:
action: call-service
service: fan.set_speed
service_data:
entity_id: fan.groupfan
speed: medium
type: 'custom:button-card'
- entity: sensor.livingroom_fanspeed
max_items: 5
show:
end_date: false
start_date: true
state_map:
- label: Low Speed
value: low
- label: Medium Speed
value: medium
- label: High Speed
value: high
- label: 'OFF'
value: 'off'
style: |
ha-card {
background-image: url("/local/pbc2.jpg");
--primary-text-color: rgb(250,250,250);
--paper-listbox-background-color: black;
text-shadow: 1px 1px 0 #000;
}
title: Living Room
type: 'custom:logbook-card'
- entity: sensor.kitchenroom_fanspeed
max_items: 5
show:
end_date: false
start_date: true
state_map:
- label: Low Speed
value: low
- label: Medium Speed
value: medium
- label: High Speed
value: high
- label: 'OFF'
value: 'off'
style: |
ha-card {
background-image: url("/local/pbc2.jpg");
--primary-text-color: rgb(250,250,250);
--paper-listbox-background-color: black;
text-shadow: 1px 1px 0 #000;
}
title: Kitchen
type: 'custom:logbook-card'
style: |
ha-card {
background-image: url("/local/film.jpg");
--primary-text-color: rgb(250,250,250);
--paper-listbox-background-color: black;
text-shadow: 1px 1px 0 #000;
}
title: Fan Status
type: entities
show_header_toggle: false
Would appreciate any help.
Thanks
I donât really understand what you are trying to achieve and/or what is not working?
Im trying to get the Low Med High fans into there where it has just Med. I canât seem to figure it out:
entities:
- entity: fan.groupfan
hold_action:
action: more-info
icon: 'mdi:pinwheel'
name: On/OFF
show_icon: true
show_name: true
state:
- color: 'rgb(0,0,128)'
spin: true
value: 'on'
tap_action:
action: toggle
- entity: input_boolean.switches5
name: Stop Fan Automations
- entity: input_boolean.switches6
name: Temperature Control
- entity: input_boolean.switches7
name: Motion Control
- entity: sensor.livingroom_fanspeed
hold_action:
action: more-info
icon: 'mdi:pinwheel'
name: Med
show_icon: true
show_name: true
state:
- color: 'rgb(128,128,51)'
spin: true
value: medium
styles:
card:
- height: 90px
tap_action:
action: call-service
service: fan.set_speed
service_data:
entity_id: fan.groupfan
speed: medium
type: 'custom:button-card'
- entity: sensor.livingroom_fanspeed
hold_action:
action: more-info
icon: 'mdi:pinwheel'
name: Low
show_icon: true
show_name: true
state:
- color: 'rgb(0,0,128)'
spin: true
value: low
styles:
card:
- height: 90px
tap_action:
action: call-service
service: fan.set_speed
service_data:
entity_id: fan.groupfan
speed: low
type: 'custom:button-card'
- entity: sensor.livingroom_fanspeed
max_items: 5
show:
end_date: false
start_date: true
state_map:
- label: Low Speed
value: low
- label: Medium Speed
value: medium
- label: High Speed
value: high
- label: 'OFF'
value: 'off'
style: |
ha-card {
background-image: url("/local/pbc2.jpg");
--primary-text-color: rgb(250,250,250);
--paper-listbox-background-color: black;
text-shadow: 1px 1px 0 #000;
}
title: Living Room
type: 'custom:logbook-card'
- entity: sensor.kitchenroom_fanspeed
max_items: 5
show:
end_date: false
start_date: true
state_map:
- label: Low Speed
value: low
- label: Medium Speed
value: medium
- label: High Speed
value: high
- label: 'OFF'
value: 'off'
style: |
ha-card {
background-image: url("/local/pbc2.jpg");
--primary-text-color: rgb(250,250,250);
--paper-listbox-background-color: black;
text-shadow: 1px 1px 0 #000;
}
title: Kitchen
type: 'custom:logbook-card'
style: |
ha-card {
background-image: url("/local/film.jpg");
--primary-text-color: rgb(250,250,250);
--paper-listbox-background-color: black;
text-shadow: 1px 1px 0 #000;
}
title: Fan Status
type: entities
type: entities
produces this:
as expectedâŚ
I just cant seem to get the syntax down for nesting it into the card horizontally like this:
pretty sure its something little and Ive seemed to try every which way⌠⌠I have ones like this that are ( more complicated?? lol):
however⌠this one I just cant get it.
Well, if you want to line them up horizontally, youâll have to use a horizontal-stack around the 3 buttons. But I donât think you can put a horizontal-stack in an entity card so youâll probably have to split your entities card in 2, 1 above and 1 below the horizontal stack
I mean, yeah. Maybe thats it, it just doesnt workâŚ, Ive done what you suggested and it works like this:
cards:
- cards:
- cards:
- entity: sensor.livingroom_fanspeed
hold_action:
action: more-info
icon: 'mdi:pinwheel'
name: Low
show_icon: true
show_name: true
state:
- color: 'rgb(0,0,128)'
spin: true
value: low
styles:
card:
- height: 90px
tap_action:
action: call-service
service: fan.set_speed
service_data:
entity_id: fan.groupfan
speed: low
type: 'custom:button-card'
- cards:
- entity: sensor.livingroom_fanspeed
hold_action:
action: more-info
icon: 'mdi:pinwheel'
name: Med
show_icon: true
show_name: true
state:
- color: 'rgb(128,128,51)'
spin: true
value: medium
styles:
card:
- height: 90px
tap_action:
action: call-service
service: fan.set_speed
service_data:
entity_id: fan.groupfan
speed: medium
type: 'custom:button-card'
type: horizontal-stack
- cards:
- entity: sensor.livingroom_fanspeed
hold_action:
action: more-info
icon: 'mdi:pinwheel'
name: High
show_icon: true
show_name: true
state:
- color: 'rgb(0,128,0)'
spin: true
value: high
styles:
card:
- height: 90px
tap_action:
action: call-service
service: fan.set_speed
service_data:
entity_id: fan.groupfan
speed: high
type: 'custom:button-card'
type: horizontal-stack
type: horizontal-stack
type: vertical-stack
- entities:
- entity: fan.groupfan
hold_action:
action: more-info
icon: 'mdi:pinwheel'
name: On/OFF
show_icon: true
show_name: true
state:
- color: 'rgb(0,0,128)'
spin: true
value: 'on'
tap_action:
action: toggle
- entity: input_boolean.switches5
name: Stop Fan Automations
- entity: input_boolean.switches6
name: Temperature Control
- entity: input_boolean.switches7
name: Motion Control
- entity: sensor.livingroom_fanspeed
max_items: 5
show:
end_date: false
start_date: true
state_map:
- label: Low Speed
value: low
- label: Medium Speed
value: medium
- label: High Speed
value: high
- label: 'OFF'
value: 'off'
style: |
ha-card {
background-image: url("/local/pbc2.jpg");
--primary-text-color: rgb(250,250,250);
--paper-listbox-background-color: black;
text-shadow: 1px 1px 0 #000;
}
title: Living Room
type: 'custom:logbook-card'
- entity: sensor.kitchenroom_fanspeed
max_items: 5
show:
end_date: false
start_date: true
state_map:
- label: Low Speed
value: low
- label: Medium Speed
value: medium
- label: High Speed
value: high
- label: 'OFF'
value: 'off'
style: |
ha-card {
background-image: url("/local/pbc2.jpg");
--primary-text-color: rgb(250,250,250);
--paper-listbox-background-color: black;
text-shadow: 1px 1px 0 #000;
}
title: Kitchen
type: 'custom:logbook-card'
style: |
ha-card {
background-image: url("/local/film.jpg");
--primary-text-color: rgb(250,250,250);
--paper-listbox-background-color: black;
text-shadow: 1px 1px 0 #000;
}
title: Fan Status
type: entities
type: entities
type: vertical-stack
I just want it inside of the card⌠hmm
Also See I have this as wellâŚ
which iis:
entities:
- entity: sensor.thermostat_temperature
name: Temperature
- card_type: glance
entities:
- entity: sensor.fangroup_fanspeed
hold_action:
action: more-info
icon: 'mdi:pinwheel'
name: Low
show_icon: true
show_name: true
show_state: false
state:
- styles:
card:
- height: 70px
icon:
- color: 'rgb(0,0,0)'
value: low
tap_action:
action: call-service
service: fan.set_speed
service_data:
entity_id: fan.groupfan
speed: low
value: low
- entity: sensor.fangroup_fanspeed
hold_action:
action: more-info
icon: 'mdi:pinwheel'
name: Med
show_icon: true
show_name: true
show_state: false
state:
icon:
- color: 'rgb(128,128,51)'
styles:
card:
- height: 70px
tap_action:
action: call-service
service: fan.set_speed
service_data:
entity_id: fan.groupfan
speed: medium
value: medium
- entity: sensor.fangroup_fanspeed
hold_action:
action: more-info
icon: 'mdi:pinwheel'
name: High
show_icon: true
show_name: true
show_state: false
state:
icon:
- color: 'rgb(0,128,0)'
styles:
card:
- height: 70px
tap_action:
action: call-service
service: fan.set_speed
service_data:
entity_id: fan.groupfan
speed: high
value: high
style: |
ha-card {
background-image: url("/local/fann.jpg");
background-size: 100%;
--paper-listbox-background-color: black;
text-shadow: 1px 1px 0 #000;
}
type: 'custom:button-card'
type: 'custom:hui-element'
style: |
ha-card {
background-image: url("/local/film.jpg");
--paper-listbox-background-color: black;
text-shadow: 1px 1px 0 #000;
}
type: entities
just not working this other wayâŚ
Reason im not using this, is i canât get the Spin to work.
If it works with a glance card then why donât you use a glance card?
Whatâs the problem with the spin?
Hi Guys,
I am going nuts over templating in custom-fields. I am trying a simple if-statement and am getting this error:
SyntaxError: Unexpected token ')' in 'if (states['input_boolean.vacuum_run_today'].state = ) return 'Harald ska städa idag'; else return...'
with this code:
harald: >
[[[ if (states['input_boolean.vacuum_run_today'].state = 1) return 'Harald
ska städa'; else return 'Harald <strong>ska inte</strong> städa' ]]]
Any ideas on what I am doing wrong?
Thanks!
Rob
= is used to assign a value, == is used to compare a value.
Also the state of an input_boolean shouldnât be 1 or 0, itâs âonâ or âoffâ as far as I know.
harald: >
[[[
if (states['input_boolean.vacuum_run_today'].state == 'on')
return 'Harald ska städa';
else
return 'Harald <strong>ska inte</strong> städa'
]]]
2 Likes
Thanks for sharing this, I got it working.
Thanks, I donât know why but that did it. Iâve tried every combo, true/false, on/off, 1/0.
You saved me another night of headache!
Is anyone else having trouble executing scripts from buttons since the latest updates?
template
menu_button:
aspect_ratio: 4/3
color_type: icon
hold_action:
action: none
layout: vertical
show_label: false
show_name: true
show_state: false
styles:
card:
- border-radius: 10px
- border: solid 1px var(--primary-color)
- box-shadow: none
- padding: 6px 6px
- margin: 0px 0px
- '--paper-card-background-color': 'rgba(0, 0, 0, 0)'
icon:
- width: 28px
name:
- justify-self: middle
- align-self: end
- font-size: 14px
- padding: 0px 0px
- color: var(--secondary-text-color)
tap_action:
action: call-service
picture_button:
aspect_ratio: 4/3
color_type: icon
hold_action:
action: none
layout: vertical
show_entity_picture: true
show_icon: false
show_label: false
show_name: false
show_state: false
styles:
card:
- border-radius: 10px
- border: solid 1px var(--primary-color)
- box-shadow: none
- padding: 6px 6px
- margin: 0px 0px
- '--paper-card-background-color': 'rgba(0, 0, 0, 0)'
entity_picture:
- width: 100%
- height: 100%
- object-fit: contain
tap_action:
action: call-service
card
entities:
- card_type: horizontal-stack
cards:
- aspect_ratio: 8.4/3
entity: script.lounge_macro_watch_tv
icon: 'mdi:television-classic'
name: Watch TV
service: script.lounge_macro_watch_tv
template: menu_button
type: 'custom:button-card'
- aspect_ratio: 8.4/3
entity: script.lounge_macro_watch_movie
icon: 'mdi:filmstrip'
name: Watch Movie
service: script.lounge_macro_watch_movie
template: menu_button
type: 'custom:button-card'
type: 'custom:hui-element'
- card_type: horizontal-stack
cards:
- aspect_ratio: 8.4/3
entity: script.lounge_macro_listen_music
icon: 'mdi:airplay'
name: Airplay
service: script.lounge_macro_listen_music
template: menu_button
type: 'custom:button-card'
- aspect_ratio: 8.4/3
entity: script.lounge_macro_watch_youtube
icon: 'mdi:monitor-speaker'
name: PC Sound
service: script.lounge_macro_watch_youtube
template: menu_button
type: 'custom:button-card'
type: 'custom:hui-element'
- card_type: horizontal-stack
cards:
- aspect_ratio: 16/3
entity: script.lounge_macro_goodnight
icon: 'mdi:weather-night'
name: All Off (Lights Delayed 30sec)
service: script.lounge_macro_goodnight
template: menu_button
type: 'custom:button-card'
type: 'custom:hui-element'
show_header_toggle: false
style:
.: |
ha-card {
border: solid 1px var(--primary-color);
background: url("/local/background/card_bg_{{states('input_select.select_theme')}}.png");
}
ha-card div.card-header {
padding-top: 8px;
padding-bottom: 36px;
}
title: Scene Select
type: entities
Calling the scripts directly from the developer tools services menu works as expected.
I donât see where you defined the service you are calling?
Did have some issues with my buttons⌠I was calling script.turn_on instead of using script.name-of-script⌠dunno when that changed
service is not a main configuration entry, it is only exists inside *_action so if you donât want to define action: call-service in your button instance, youâll still have to define:
tap_action:
service: xxxxxx
1 Like
Itâs written in my answer (= instead of ==)
1 Like
Weird. I could swear that was working.