Help to simplify code

I ask for help with a coding step.
I’m doing a floor plan view to see where I’m wetting the grass.

I am attaching a screen of how I would like to view.
I would like to duplicate the blue stripe representing the sprinkler, the image rotates on itself to see the wet area at that moment.

this is the piece of code that i control the image sprinkler

    - type: picture-elements
      image: /local/floorplan/garden.png
        - type: custom:button-card
          tap_action: none
          entity: switch.rainbird_1
              - font-size: 18px
              - font-weight: bold
              - background-color: rgba(0, 0, 0, 0)
              - transform: rotate(5.5deg)
              - font-color: '#ffee58'
              - font-size: 20px
              - color: '#ffee58'
            - value: 'off'
              entity_picture: /local/floorplan/sprinkler  off.png
                  - animation: blink 5s linear infinite
                  - width: 50%
            - value: 'on'
              entity_picture: /local/floorplan/sprinkler  610.png
                  - animation: rotatez 80s linear infinite
                  - transform-origin: center
                  - width: 50%
          show_state: false
          show_name: false
          show_entity_picture: true
          extra_styles: |
            @keyframes rotatez {
               0% {transform: rotate(0deg)}
               100% {transform: rotate(360deg)}
            top: 67.5%
            left: 50%

then I thought of copying all the contents of the button-card for each sprinkler, changing only the top and left positions.

There is a way to re-call the “sprinkler” code part of the code several times without making a copy in each position of the system,
and next changing only the top and left positions.


You can use decluttering-card for this. The purpose of that card is to create a new compact code that contains all the code of a predefined card with the addition to use variables. This allows you to recreate a line of code with different variables, without recreating everything.

It’s on HACS and there is a thread of this card in here as well somewhere if you need help.

1 Like

Thanks for the reply.
I try to see if I understand how to use it.

I have to figure out if it can work to duplicate all the code except the last ones I use to place it in the layout

If you take your time and read the README you will. The variable part is where you can change stuff like position, while maintaining everything else.