Is there a way to have a card "mirror" another card?

Configuration Frontend
1

I have a fairly complicated whole-house setup with a lot of devices, and more are likely.

To make things easier for family members, I’ve created a “Personal” dashboard, where each person gets their own pane, made visible only to them, and configured with the things they’re most likely to use.

Turns out there’s quite a bit of duplication — everyone wants quick access to the light and climate controls for the living room, for example. Rather than cutting and pasting, is there a way to simply define a card as a mirror of (or, conceptually, a “symbolic link” to) another card?

1 Like
2

No, though this has been requested before and there’s probably a feature request for it.

1 Like
3

is that just a “Duplicate card”

image

4

That will make a copy of the card. But after making the copy if you edit one of them it does not change the other.

Imagine you have a weather card that you use in all your dashboards and then being able to just edit the “master copy” and all the cards in all the other dashboards get updated too. Rather than having to edit each and every copy individually.

1 Like
5

Could something like a template accomplish this?

I know a number of custom cards use templates in the dashboard to set up default attributes for multiple card instances. I wonder if it’s possible to do something similar with an overly specific template which is basically an entire card.

But also, I know those templates go in the root of the dashboard file, and I’m not sure if you’re actually looking for something to span across multiple dashboards, or just tabs (which could be hidden per user).

Includes or resources?

6

I am also very interested in this “mirror” or “include” cards. Did you find a solution?

7

There is still no way to do this.

8

I’ve been using shell scripts to assemble Lovelace dashboards based on data definitions.

So for this use case, define those common cards once, and use the shell scripts to put them into the dashboards. Yes, you’ve duplicated them, but since they are derived from the common, you can change the common and rerun the scripts.

1 Like
9

@PeteRage
I’ve just resorted to doing the same, only in python. Just beginning my effort. Any pointers?

1 Like
10

Very cool Yeah I’ve though that python would be better for assembling the cards. Shell script is non optimal. Post a links to your example? I have a card assembly project coming up.

Tips?

  • I put the source and the output into a github private repo. This way when I change stuff, I can see the differences in the output before deploying into HASS

  • I generate a lot of packages and automations from scripts. Here’s an example for zwave health. GitHub - PeteRager/hass_templates One problem I have is the generated packages / automations end up in the same HASS folder as the non generated ones which creates clutter. Ideally I’d have a separate folder structure for generated vs non-generated. This way you could delete the entire content of generated and regenerate all.

1 Like
11

@PeteRage I created a git repo here: GitHub - homeautomaton/ha_templatize_dashboard

12

I used to create cards in yaml files and then !include them in various views. There’s also this

13

That’s interesting. I hadn’t come across that, or any of the other (decluttering-card,lovelace_gen,or YAML node anchors) mentioned therein. I’ll have to explore them some more.

My templating approach is similar to !include, but I allow includes that reference another piece of yaml code (like a sub-hierarchy), and I flatten everything into a target .yaml file.

1 Like
14

This looks promising: GitHub - thomasloven/lovelace-auto-entities: 🔹Automatically populate the entities-list of lovelace cards

1 Like
15

@mattdm The majority of my buttons use the custom:button-card simply because it supports templating just like @teleksterling mentioned above. In the Raw configuration editor, I have:

button_card_templates:
  generic_custom_button:
    show_icon: true
    show_name: true
    show_state: false
    triggers_update: all
    styles:
      card:
        - background-color: rgba(0, 0, 0, 0)
        - '--ha-card-box-shadow': none
        - border-radius: 20px
        - '--mdc-ripple-color': white
        - '--mdc-ripple-press-opacity': 1.5
    card_mod:
      style: |
        ha-card {
          border: solid 1px var(--primary-text-color);
        }
    tap_action:
      action: toggle
    hold_action:
      action: more-info
    double_tap_action:
      action: none
  battery_custom_button:
    template: generic_custom_button
    entity: sensor.derek_s20_battery_level
    name: Tablet
    tap_action:
      action: none
    variables:
      var_color: |-
        [[[ 
          var battery_level=entity.state;
          if (battery_level > 70) return 'lime';
          else if (battery_level >= 30) return 'yellow';
          else return 'red';
        ]]]
    custom_fields:
      battery_percentage: |
        [[[ if (entity.state === 'unavailable') return " "; 
            else return `${entity.state}%` ]]] 
    styles:
      card:
        - border: none
      icon:
        - color: '[[[ return variables.var_color ]]]'
        - animation: |
            [[[ if (entity.state <= 10 ) return 'blink 2s ease infinite'; ]]]
      custom_fields:
        battery_percentage:
          - align-self: middle
          - justify-self: start
          - position: absolute
          - left: 20%
          - top: 38%
          - font-size: 14px
          - color: '[[[ return variables.var_color ]]]'
          - rotate: '-90deg'

Here, I’ve defined two templates. (I have more but have omitted a bunch to make this post easier to understand.) Templates can even reference other templates. So the battery_custom_button template references the generic_custom_button template.
In my dashboard’s YAML, I have:

      - type: grid
        columns: 7
        square: false
        cards:
          - type: custom:button-card
            template: battery_custom_button
            entity: sensor.derek_s20_battery_level
            name: Phone
          - type: custom:button-card
            template: battery_custom_button
            entity: sensor.derek_s_fire_10_battery_level
            name: Tablet
          - type: custom:button-card
            template: battery_custom_button
            entity: sensor.fire_computer_desk_battery_level
            name: Fire
          - type: custom:button-card
            template: battery_custom_button
            entity: sensor.quest_battery_level
            name: Quest

Note how each button is only 4 lines long but has all the settings from the template. Any settings in the defined within the button override whatever is in the template.So, even though the template has a defined entity, the entity for the button is used. (Also, the battery template does not have a border around the card.) Only small adjustments are needed for each card and by modifying the template it is way easier to make changes without having to adjust each and every card individually.
This is the result:
image

2 Likes
16

@kctx I would buy you a coffee if you could finish this! I have been considering having a touchpad at the doors to each room and a cutoff from my dashboard representing each of my room buttons but without the ability to mirror part of the dashboard it will only cause plenty of problems.

1 Like
17

Does anyone know if there’s a way to make this work inside another card? I’ve got an Alexa Media Player card wit 50 radio stations - mirrored for each Alexa device at home. Is there a way to change on set of code when the radio stations change instead of 5?