Help to simplify code

Share your Projects! Dashboards & Frontend
1

Hello,
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.
rain
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
      elements:
        - type: custom:button-card
          tap_action: none
          entity: switch.rainbird_1
          styles:
            card:
              - font-size: 18px
              - font-weight: bold
              - background-color: rgba(0, 0, 0, 0)
              - transform: rotate(5.5deg)
            label:
              - font-color: '#ffee58'
            state:
              - font-size: 20px
              - color: '#ffee58'
          state:
            - value: 'off'
              entity_picture: /local/floorplan/sprinkler  off.png
              styles:
                icon:
                  - animation: blink 5s linear infinite
                  - width: 50%
            - value: 'on'
              entity_picture: /local/floorplan/sprinkler  610.png
              styles:
                icon:
                  - 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)}
               }
          style:
            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.

thanks

2

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
3

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

4

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.