Best practice to use anchors and !include to reuse frontend code

[maisun]

Hi all:

For simplicity and reuse as much code as possible across similar UI elements, I have migrated from storage to yaml mode for my main dashboard. For history I have another post and reason why I think yaml works better for my needs:

How to reuse yaml code in frontend configuration?

Dear all: I have a huge yaml file over 8000 lines of code for front end (it’s floor plan with control of basically everything I have in HA). I’d like to reduce the maintenance pain in the future and would like to ask if there is an easy way to reuse as much code in frontend yaml as possible. For example I have below code for a thermostat on picture element card, basically I repeat almost the same code for my other 12 thermostats, the only difference is the position (top, left, entity and title)…

My file structure is as below:

/config/lovelace/floor-plan.yaml
/config/lovelace/floor-plan/thermostats.yaml
/config/lovelace/anchors.yaml

floor-plan.yaml looks like below - I have all elements in different types defined in floor-plan folder, thermostats.yaml is one of them.

type: picture-elements
image: /local/floorplan/transparent.png
elements: !include_dir_merge_list floor-plan/
card_mod:
  style: |
    ha-card {
      max-width: 1200px;
      height: 100%;
      margin: auto;
    }

I have anchors defined in a separated file with the hope that I can reuse it across different device types:

label_style: &label_style
  border-radius: 20px
  text-align: center
  ...
thermostat_label: &thermostat_label
  type: state-label
  style:
    <<: *label_style
  ...

And thermostats (what I want each thermostat to be based on anchors):

- <<: * thermostat_label
  entity: climate.bedroom_closet_thermostat
  title: Bedroom Closet Thermostat
  style:
    <<: * label_style
    top: 23.5%
    left: 71%

Some limitations that I’m aware of:

• !include_dir_merge_list floor-plan/ merges the flat list from all yamls in the folder, that seems to be the only way to merge list of elements organised from different files (I tried to merge list directly with !include but it creates a nested list.
• Because of above thermostat.yaml has to be a list, and it’s not possible to include anchors from another file which is a map

I have tried many different ways but still can’t make it work fully, below is what I have done so far:

1. !include the anchor.yaml in parent floor-plan.yaml - looks like thermostats.yaml need to be resolved before merged into floor-plan.yaml, so doesn’t work
2. !include the anchor.yaml in thermostats.yaml directly - anchor.yaml is a map and cause the yaml file invalid and cannot be merged
3. Copy the anchors from the shared anchor.yaml into thermostats.yaml and change them to list - sort of works but when merged those anchors are part of the configuration and causes configuration errors
4. The closest thing so far: I change the first thermostat with anchors, and reuse code in the following thermostats. No configuration errors however I got tons of warning in log saying overriding attributes ( top , left , entity , title , style) are duplicated keys. And I’m still not very happy with this approach as the anchors are not reusable across files - for example the text style need to repeat for each yaml.

- &thermostat_base
  type: state-label
  entity: climate.bathroom_thermostat
  title: Bathroom Thermostat
  attribute: current_temperature
  suffix: "°C"
  style: &thermostat_style
    border-radius: 20px
    text-align: center
    background-color: rgba(255,255,255,0.1)
    backdrop-filter: blur(1px)
    opacity: 100%
    font-weight: bold
    font-size: 13px
    top: 27%
    left: 32.5%
  card_mod:
    style: |
      :host {
        color:
          {% if state_attr(config.entity, 'hvac_action') == 'heating' %}
            #ffc108;
          {% else %}
            #45729e;
          {% endif %}
      }
  tap_action:
    action: more-info
  double_tap_action:
    action: none
  hold_action:
    action: more-info

# Second thermostat inherits the base
- <<: *thermostat_base
  entity: climate.bedroom_closet_thermostat
  title: Bedroom Closet Thermostat
  style:
    <<: *thermostat_style
    top: 23.5%
    left: 71%

My Questions

1. Is there a best practice for creating reusable thermostat anchors while avoiding all the cons that I mentioned?
2. How do people normally handle many similar elements with common configuration with anchors and !include in HA?

[Ildar_Gabdullin]

@maisun

have anchors defined in a separated file with the hope that I can reuse it across different device types:

Anchors may only work in the same file.
Have you analyzed the tutorial I posted you earlier on another thread? Doesn’t it cover all your questions?

[maisun]

Thank you for your reply!
Yes I have read it, it uses “decluttering_templates” assume is this one below:

Lovelace: Decluttering Card

Hey, I’ve created a new card that helps you declutter your LL config if you use multiple times the same block of cards with small differences (like an entity for example) to display things in LL. Visit github for installation instructions, up to date documentation and troubleshooting guide [GitHub Release] [GitHub Activity] [custom_updater] [Project Maintenance] decluttering-card This card is for Lovelace on Home Assistant. We all use multiple times the same block of configuration acros…

Based on the description it allows to define reusable cards - in my case I only work with picture element which is a single card with 180 icon&labels. Unless I misunderstand something I don’t see how this work in my setup?
My goal is to define style for icon/labels that can be reused by other anchors for each type of device. But I haven’t found out a way to do it with my limited experience with YAML and HA. My current workaround is also a bit ugly as for each yaml I need to define an anchor of style which is very similar across those yamls:

label_style: &label_style
  border-radius: 20px
  text-align: center
  ...
thermostat_label: &thermostat_label
  type: state-label
  style:
    <<: *label_style
  ...

[Ildar_Gabdullin]

@maisun

uses “decluttering_templates”

Mentioning a decluttering card in that tutorial was because this tutorial was originally dedicated for this card’s users. Just exclude sentences which are about the decluttering card, you will get a description for anyone who wants to use yaml dashboards.

If you need to share code parts like this:

xxxx: xxxx
yyyy:
  - zzzz
  - aaaa: bbbb
  - cccc:
      abc: gggg
      add: fffff

just either put this text into some yaml file and then include it, or use as a secret, see another tutorial for reusing a code for details which I posted you.

[maisun]

Hi @Ildar_Gabdullin :
Thanks I have read your post again and I think now I understand better.
It provide a nice way to “merge” files in a folder and include in all yaml as template. As you wrote this only works with !include and anchors cannot be used cross files. So looks like with native YAML support I cannot really achieve what I’d like with centralized reusable template with styling and override in various yamls. The problems are:

1. anchors don’t work across files
2. !include doesn’t allow “override” like what anchors do
   Looks like I’m chasing the unsolvable puzzle here…