Thank you! This is the first time I see a fine explanation of Anchor usage…
Going to try and implement this. Lovelace and regular ( or is this called legacy meanwhile …) HA.
1 Like
Oh, I’ve never heard of the anchors! That looks like what I’m looking to do. Is there more documentation on it? This looks to be exactly what I’m looking to do
I have a bit about them written down here: http://thomasloven.com/blog/2018/08/YAML-For-Nonprogrammers/
(The anchors: part in the code is just something I put in. It’s not really “supported” but it works.)
https://blog.daemonl.com/2016/02/yaml.html
I used that as a starting point,
Currently working on a remote control for Harmony using a picture-elements card and using anchors has cut down on the repetition a lot. Makes it much easier to tweak the style for all buttons.
- type: picture-elements
image: /local/images/short-empty.png?v2.2
elements:
- type: image
entity: switch.lounge_tv
tap_action:
action: toggle
image: /local/images/remote/tv.svg?v1
state_filter:
"on": invert(.5) sepia(1) saturate(8) hue-rotate(10deg)
style: &style_anchor # Reuse these values with <<: *style_anchor in any style section
top: 50%
left: 20%
width: 2em
height: 2em
padding: 15px
background-color: var(--paper-item-icon-color)
border-radius: 50%
box-shadow: 0 3px 5px -1px rgba(0,0,0,.2), 0 6px 10px 0 rgba(0,0,0,.14), 0 1px 18px 0 rgba(0,0,0,.12)
- type: image
entity: switch.soundbar
tap_action:
action: toggle
image: /local/images/remote/music.svg?v1
state_filter:
"on": invert(.5) sepia(1) saturate(8) hue-rotate(10deg)
style:
<<: *style_anchor
top: 50%
left: 50%
- type: image
entity: switch.ps3
tap_action:
action: toggle
image: /local/images/remote/ps4.svg?v1
state_filter:
"on": invert(.5) sepia(1) saturate(8) hue-rotate(10deg)
style:
<<: *style_anchor
top: 50%
left: 80%
# Display full remote when TV Activity is on
- type: conditional
conditions:
- entity: switch.lounge_tv
state: "on"
card:
type: picture-elements
image: /local/images/empty.png?v2.1
elements:
- type: image # Menu
tap_action:
action: call-service
service: remote.send_command
service_data:
entity_id: remote.lounge
device: 29590173
command: SmartHub
image: /local/images/remote/menu.svg?v1
style:
<<: *style_anchor
top: 10%
left: 20%
- type: image # Exit
tap_action:
action: call-service
service: remote.send_command
service_data:
entity_id: remote.lounge
device: 29590173
command: Exit
image: /local/images/remote/cast.svg?v1
style:
<<: *style_anchor
top: 10%
left: 50%
- type: image # Back
tap_action:
action: call-service
service: remote.send_command
service_data:
entity_id: remote.lounge
device: 29590173
command: Return
image: /local/images/remote/back.svg?v1
style:
<<: *style_anchor
top: 10%
left: 80%
- type: image # Play
tap_action:
action: call-service
service: input_text.set_value
service_data:
entity_id: input_text.remote_command
value: Play
image: /local/images/remote/play.svg?v1
style:
<<: *style_anchor
top: 26%
left: 20%
- type: image # Pause
tap_action:
action: call-service
service: input_text.set_value
service_data:
entity_id: input_text.remote_command
value: Pause
image: /local/images/remote/pause.svg?v1
style:
<<: *style_anchor
top: 26%
left: 50%
- type: image # Stop
entity: input_boolean.remote_stop
tap_action:
action: call-service
service: input_text.set_value
service_data:
entity_id: input_text.remote_command
value: Stop
image: /local/images/remote/stop.svg?v1
style:
<<: *style_anchor
top: 26%
left: 80%
- type: image # Up
tap_action:
action: call-service
service: remote.send_command
service_data:
entity_id: remote.lounge
device: 29590173
command: DirectionUp
image: /local/images/remote/up.svg?v1
style:
<<: *style_anchor
top: 44%
left: 50%
- type: image # Left
tap_action:
action: call-service
service: remote.send_command
service_data:
entity_id: remote.lounge
device: 29590173
command: DirectionLeft
image: /local/images/remote/left.svg?v1
style:
<<: *style_anchor
top: 58%
left: 32%
- type: image # OK
tap_action:
action: call-service
service: remote.send_command
service_data:
entity_id: remote.lounge
device: 29590173
command: Select
image: /local/images/remote/return.svg?v1
style:
<<: *style_anchor
top: 58%
left: 50%
- type: image # Right
tap_action:
action: call-service
service: remote.send_command
service_data:
entity_id: remote.lounge
device: 29590173
command: DirectionRight
image: /local/images/remote/right.svg?v1
style:
<<: *style_anchor
top: 58%
left: 68%
- type: image # Down
tap_action:
action: call-service
service: remote.send_command
service_data:
entity_id: remote.lounge
device: 29590173
command: DirectionDown
image: /local/images/remote/down.svg?v1
style:
<<: *style_anchor
top: 72%
left: 50%
- type: image # Volume Up
tap_action:
action: call-service
service: remote.send_command
service_data:
entity_id: remote.lounge
device: 29590173
command: VolumeUp
image: /local/images/remote/volup.svg?v1
style:
<<: *style_anchor
top: 90%
left: 80%
- type: image # Mute
tap_action:
action: call-service
service: remote.send_command
service_data:
entity_id: remote.lounge
device: 29590173
command: Mute
image: /local/images/remote/mute.svg?v1
style:
<<: *style_anchor
top: 90%
left: 50%
- type: image # Volume Down
tap_action:
action: call-service
service: remote.send_command
service_data:
entity_id: remote.lounge
device: 29590173
command: VolumeDown
image: /local/images/remote/voldown.svg?v1
style:
<<: *style_anchor
top: 90%
left: 20%
# Display volume controls when Music / PS4 is on
- type: conditional
conditions:
- entity: remote.lounge
state: "on"
- entity: switch.lounge_tv
state: "off"
card:
type: picture-elements
image: /local/images/short-empty.png?v2.1
elements:
- type: image # Volume Up
tap_action:
action: call-service
service: remote.send_command
service_data:
entity_id: remote.lounge
device: 29590173
command: VolumeUp
image: /local/images/remote/volup.svg?v1
style:
<<: *style_anchor
top: 50%
left: 80%
- type: image # Mute
tap_action:
action: call-service
service: remote.send_command
service_data:
entity_id: remote.lounge
device: 29590173
command: Mute
image: /local/images/remote/mute.svg?v1
style:
<<: *style_anchor
top: 50%
left: 50%
- type: image # Volume Down
tap_action:
action: call-service
service: remote.send_command
service_data:
entity_id: remote.lounge
device: 29590173
command: VolumeDown
image: /local/images/remote/voldown.svg?v1
style:
<<: *style_anchor
top: 50%
left: 20%
It’s long enough as it is 
The problem is, although what I’ve posted works and (I believe) is valid yaml. HA complains about duplicate top: and left: keys. Fills the log 
using this syntax
<<: *style_anchor
is supposed to let you import the anchor and add / override values. As I say, it works but HA complains.
Just had a brief look at @thomasloven blog - going to have to read that article tomorrow when I am more awake and have drunk less rum. Might find a different way to define the anchor and remove the duplication. A brief look shows it’s a really good explanation.
please let me ask here, since you started it 
i have 13 template sensors like this:
friendly_name_template: >
Attic:
{% set lux = states('sensor.attic_motion_sensor_lux')|int %}
{% if lux <= 1 %} moonlight
{% elif lux <= 2 %} night light
{% elif lux <= 10 %} dimmed light
{% elif lux <= 50 %} 'cosy' living room
{% elif lux <= 150 %} 'normal' non-task light
{% elif lux <= 350 %} working / reading
{% elif lux <= 700 %} inside daylight
{% elif lux <= 2000 %} maximum to avoid glare
{% elif lux <= 10000 %} clear daylight
{% elif lux <= 120000 %} direct sunlight
{% else %} too bright!
{% endif %}
could I use an anchor to this bit:
{% if lux <= 1 %} moonlight
{% elif lux <= 2 %} night light
{% elif lux <= 10 %} dimmed light
{% elif lux <= 50 %} 'cosy' living room
{% elif lux <= 150 %} 'normal' non-task light
{% elif lux <= 350 %} working / reading
{% elif lux <= 700 %} inside daylight
{% elif lux <= 2000 %} maximum to avoid glare
{% elif lux <= 10000 %} clear daylight
{% elif lux <= 120000 %} direct sunlight
{% else %} too bright!
{% endif %}
I obviously need the name of the sensor in the first set, but the rest could be replaced?
would appreciate any hits for this!
You can use a trick I describe in that blogpost where you define and unpack an anchor at the same time. Something like
style:
top: 50%
left: 20%
<<: &style_anchor
width: 2em
height: 2em
... etc ...
...
style:
top: 50%
left: 80%
<<: *style_anchor
1 Like
Afraid not, but you may be able to turn it into a macro.
I’m not sure which jinja2 features home assistant supports, but this might give you some idea of what might be possible.
Thank you, it worked
This is great, but I’m probably not fully understanding. I’m looking at it as a potential way to have some reusable snippets in Lovelace yaml.
Here is my question. I want to take this state icon and have the entire tap action stored as a node anchor.
- type: state-icon
tap_action:
action: toggle
hold_action: more-info
entity: light.office_lamp_32
not working but desired example result
ACTION_TOGGLE: &ACTION_TOGGLE
tap_action:
action: toggle
- type: state-icon
<<: *ACTION_TOGGLE
hold_action: more-info
entity: light.office_lamp_32
The goal is to be able to have central snippets of similar controls to cut down on the duplication of lines. 2) How do I put the ACTION_TOGGLE in a single lovelace yaml file like a constants class
Appreciate the help, and all that you do for HA.
The definition of the anchor must be in the same file as and before any reference to it.
heya, was this ever addressed - i’m having the same issue (always need to edit ui_lovelace.yaml to enable a refresh to see my !included yaml lovelace views)
Nowadays I can use the refresh button in the ui (not the browser refresh).
1 Like
yep, that works thank you!
Hello Marius
I hope you dont mind me asking, as I cant get this to work. I have a horizontal header, that is going in on every card. My main file looks, as far as I can see, the same as yours, but I expect I have the identation wrong in the include file, as Lovelace, keeps coming up saying “no card type configured”. If I paste the code from the header.yaml file directly into the waze.yaml file, it works.
waze.yaml
#---------------HEADER-------------------------------------------------------------------------------------
id: waze
path: waze
background: center / cover no-repeat url("/local/lovelace/dark_ripple.png") fixed
title: waze
panel: true
cards:
- type: vertical-stack
cards:
#----
- !include header.yaml
#----------------------------------------------------------------------------------------------------------
- type: horizontal-stack
cards:
- type: custom:card-modder
style:
--paper-card-background-color: rgba(0, 0, 0, 0.5)
--paper-item-icon-color: white
border-radius: 5px
color: rgb(137, 193, 137)
card:
type: custom:waze-card
entities:
- entity: sensor.waze_louise
name: Louise
- entity: sensor.waze_eltel_herlev
name: Eltel Herlev
- entity: sensor.waze_eltel_vejle
name: Eltel Vejle
- entity: sensor.waze_region_sjaelland
name: Region Sjælland
- entity: sensor.waze_sjaellands_odde
name: Sjælland Odde
header.yaml
- type: horizontal-stack
cards:
- type: custom:card-modder
style:
--paper-card-background-color: rgba(0, 0, 0, 0.5)
--paper-item-icon-color: white
border-radius: 5px
height: 100px
color: rgb(255, 255, 255)
report_size: 5
card:
type: "custom:clock-card"
- type: "custom:button-card"
icon: mdi:food-variant
show_label: false
size: 50%
color: auto
tap_action:
action: navigate
navigation_path: /lovelace/kokken
styles:
card:
- height: 100px
- width: 100px
- background-color: rgba(0, 0, 0, 0.5)
- type: "custom:button-card"
icon: mdi:volume-high
show_label: false
size: 50%
color: auto
tap_action:
action: navigate
navigation_path: /lovelace/musik_volume
styles:
card:
- height: 100px
- width: 100px
- background-color: rgba(0, 0, 0, 0.5)
Regards Michael
think the issue is that in fact you use two dashes now (-). the first in the calling file with the !include header.yaml, and the second in the included file.
Your include file should have all aligned left, without indent and dash on the type: horizontal-stack.
1 Like
Jumping in late here…
But is there any way to combine the use of anchors and includes?
As far as I understand, and anchor currently needs to be defined in the same file as it is used. This greatly reduces the usability, as I would love to have my lovelace-config split up in nice blocks, while still having most common settings in one place.
title: Foo Title
common: !include lovelace/common.yaml
views:
- !include lovelace/view_page_1.yaml
- !include lovelace/view_page_2.yaml
And in common.yaml:
color1: &blue '#0000ff'
color2: &cyan '#00ffff'
If I need to define all the stuff in all the included files, it does not really help that much in case I want to modify things consistantly in all the views.
take a look at loevlace_gen.
Hi, guys. I need an advice. I’m using non-YAML Lovelave and want to build a second Dasboard for the tablet.
Everything is going fine until I want to use !include tag.
# YAMLException: unknown tag !<!include> message was returned.
this is the piece of code
- type: icon
icon: bha:roborock
title: Vacuum CLeaner
style:
top: 87.41%
left: 4.8%
color: rgba(255, 255, 255, 0.10)
padding: 0.8vw
--iron-icon-height: 4vw
--iron-icon-width: 4vw
tap_action: !include popup/sidebar_vacuum.yaml
sidebar_vacuum.yaml is created.
I installed levelace_gen and I switched to yaml mode, but the results were unchanged
What can I do?
Does anyone know if it’s possible to combine multiple cards (but not a whole view) into a file using !include? I have a view that’s getting too big for one file, but I don’t want to make files for each card either… I’d like to split the view into 2-3 files, each with multiple cards… What do you think, is there a way to do this?