vacuum_card_map

type: custom:local-conditional-card
id: vacuum_map
default: hide
card:
  type: custom:mod-card
  card_mod:
    style: |
      ha-card {
        height: 630px;
        border: 5px solid var(--sidebar);
        box-shadow: 0px 2px 4px 0px rgba(0,0,0,0.36);5
      }
  card:
    type: vertical-stack
    cards:
      - type: custom:button-card
        entity: vacuum.vacky
        show_name: false
        show_entity_picture: true
        entity_picture: /local/ic/vacuum.svg
        custom_fields:
          button:
            card:
              type: custom:mushroom-chips-card
              chips:
                - type: template
                  tap_action:
                    action: fire-dom-event
                    local_conditional_card:
                      action: set
                      ids:
                        - vacuum: show
                        - vacuum_map: hide
                  icon: mdi:floor-plan
                  icon_color: white
                  primary: Marker
              card_mod:
                style:
                  mushroom-template-chip:nth-child(1)$:
                    mushroom-chip$: |
                      ha-card {
                        padding: 5px !important;
                        border-radius: 100px !important;
                        --chip-background: rgba(223,130,108, 1) !important;
                      }
                      ha-card:active {
                        transform: translateY(1.5px);
                        transition: 0s;
                        box-shadow: 0 0.5px 2px 0 rgba(0, 0, 0, 0.16);
                      }
                    .: |
                      ha-state-icon {
                        animation: boing 3s ease infinite;
                        transform-origin: 50% 90%;

                      }
                      @keyframes boing {
                        0% { transform: scale3d(1, 1, 1); }
                        7% { transform: translateY(-4px) scale3d(0.75, 1.25, 1); }
                        10% { transform: scale3d(1.25, 0.75, 1); }
                        12% { transform: translateY(-2px) scale3d(0.85, 1.15, 1); }
                        16% { transform: scale3d(1.05, 0.95, 1); }
                        19% { transform: scale3d(0.95, 1.05, 1); }
                        25% { transform: scale3d(1, 1, 1); }
                      }
        styles:
          custom_fields:
            button:
              - position: absolute
              - top: 20px
              - right: 30px
              - background: none
            styles:
              icon:
                - height: 10px
          card:
            - border-radius: 20px
            - height: 240px
            - margin-top: '-1px'
            - margin-right: 1px
          icon:
            - height: 140px
            - width: 140px
            - margin-top: '-50px'
            - filter: brightness(0.9)
        state:
          - operator: default
            styles:
              icon:
                - animation: cleaning 5s linear infinite
              card:
                - background: var(--sidebar)
          - value: returning
            styles:
              icon:
                - animation: returning 2s linear infinite
              card:
                - background: var(--sidebar)
          - value: paused
            styles:
              icon:
                - opacity: 100%
              card:
                - background: var(--contrast2)
          - value: docked
            styles:
              icon:
                - opacity: 50%
              card:
                - background: transparent
        extra_styles: |
          @keyframes cleaning {
            0% {
              transform: rotate(0) translate(0);
            }
            5% {
              transform: rotate(0) translate(0, -10px);
            }
            10% {
              transform: rotate(0) translate(0, 5px);
            }
            15% {
              transform: rotate(0) translate(0);
            }
            /* Turn left */
            20% {
              transform: rotate(30deg) translate(0);
            }
            25% {
              transform: rotate(30deg) translate(0, -10px);
            }
            30% {
              transform: rotate(30deg) translate(0, 5px);
            }
            35% {
              transform: rotate(30deg) translate(0);
            }
            40% {
              transform: rotate(0) translate(0);
            }
            /* Turn right */
            45% {
              transform: rotate(-30deg) translate(0);
            }
            50% {
              transform: rotate(-30deg) translate(0, -10px);
            }
            55% {
              transform: rotate(-30deg) translate(0, 5px);
            }
            60% {
              transform: rotate(-30deg) translate(0);
            }
            70% {
              transform: rotate(0deg) translate(0);
            }
            /* Staying still */
            100% {
              transform: rotate(0deg);
            }
          }
          @keyframes returning {
            0% {
              transform: rotate(0);
            }
            25% {
              transform: rotate(10deg);
            }
            50% {
              transform: rotate(0);
            }
            75% {
              transform: rotate(-10deg);
            }
            100% {
              transform: rotate(0);
            }
          }
      - type: custom:xiaomi-vacuum-map-card
        map_source:
          camera: camera.xiaomi_cloud_map_extractor
        calibration_source:
          camera: true
        entity: vacuum.vacky
        vacuum_platform: tykarol/viomi-vacuum-v8
        map_modes:
          - template: vacuum_clean_segment
            name: Camere
            predefined_selections:
              - id: '10'
                icon:
                  name: mdi:bed-outline
                  x: 2.5500000000000003
                  'y': -7.675000000000001
                label:
                  text: Cameretta
                  x: 2.5500000000000003
                  'y': -7.675000000000001
                  offset_y: 35
                outline:
                  - - 0.65
                    - -8.5
                  - - 4.45
                    - -8.5
                  - - 4.45
                    - -6.85
                  - - 0.65
                    - -6.85
              - id: '11'
                icon:
                  name: mdi:bed-king-outline
                  x: 2.7250000000000005
                  'y': -4.975
                label:
                  text: Camera
                  x: 2.7250000000000005
                  'y': -4.975
                  offset_y: 35
                outline:
                  - - 0.8
                    - -6.8
                  - - 4.65
                    - -6.8
                  - - 4.65
                    - -3.15
                  - - 0.8
                    - -3.15
              - id: '12'
                icon:
                  name: hue:room-kitchen
                  x: 2.5749999999999997
                  'y': 1.725
                label:
                  text: Cucina
                  x: 2.5749999999999997
                  'y': 1.725
                  offset_y: 35
                outline:
                  - - -0.15
                    - 0.75
                  - - 5.3
                    - 0.75
                  - - 5.3
                    - 2.7
                  - - -0.15
                    - 2.7
              - id: '13'
                icon:
                  name: hue:room-living
                  x: 2.4749999999999996
                  'y': -1.2249999999999999
                label:
                  text: Soggiorno
                  x: 2.4749999999999996
                  'y': -1.2249999999999999
                  offset_y: 35
                outline:
                  - - -0.4
                    - -3.35
                  - - 5.35
                    - -3.35
                  - - 5.35
                    - 0.9
                  - - -0.4
                    - 0.9
              - id: '14'
                icon:
                  name: hue:room-hallway
                  x: 6.775
                  'y': -0.300000000000001
                label:
                  text: Ingresso
                  x: 7.075
                  'y': -1.600000000000001
                  offset_y: 35
                outline:
                  - - 5.35
                    - -3
                  - - 7.6
                    - -3
                  - - 7.6
                    - 1.6
                  - - 5.35
                    - 1.6
              - id: '15'
                icon:
                  name: hue:room-computer
                  x: 3.1
                  'y': -10.05
                label:
                  text: Studio
                  x: 3.1
                  'y': -10.05
                  offset_y: 35
                outline:
                  - - 0.75
                    - -11
                  - - 5.45
                    - -11
                  - - 5.45
                    - -9.1
                  - - 0.75
                    - -9.1
              - id: '16'
                icon:
                  name: mdi:broom
                  x: 6.125000000000001
                  'y': -6.175
                label:
                  text: Corridoio
                  x: 6.325000000000001
                  'y': -7.175
                  offset_y: 35
                outline:
                  - - 4.4
                    - -9.35
                  - - 7.45
                    - -9.35
                  - - 7.45
                    - -3
                  - - 4.4
                    - -3
          - template: vacuum_clean_zone
            name: Pulizia a zone
          - template: vacuum_clean_point
            namw: Punti
        map_locked: true
        tiles: []
        card_mod:
          style: |
            ha-card {
              #height: 335px;
              margin-top: -65px;
              background: transparent !important ;
              border: none !important;
              border-radius: 20px !important;
            }