Vacuum Interactive Map Card

Yeah cleaning from the xiaomi home app works just fine

Small update, it now either cleans the living room or the hallway. Never the carpet (which is a speedster room) or the kitchen. Will do some more testing :slight_smile:

You give me the lesson! :rofl: :joy:

image
green selection → tiles
red selection → icons
yellow selection → map
:wink:

Hello, love v2 with my new s7. I have the same issue, it shows seconds not hours. If I use the multiplier it works but to 10 decimal places. Any way to round to 2 places. I could make a whole new sensor but would rather just use the multiplier if possible? Cheers

Whoops, I forgot to mention it in example config. Updated version:

tiles:
  - entity: sensor.winston_filter_left
    label: Filter left
    icon: mdi:air-filter
    multiplier: 0.0002777777777777778 # 1/3600
    unit: h
    precision: 2
2 Likes

amazing, thank you

I have 2 vacuums (s5 and s5 max) my s5 is slow (1 - 30 min) to change status : cleaning, dock etc.

bug?

can you please share the config of the left card @krovachek

In HA or in my card?

Both. maybe a HA issue?

Hello, ich have a problem with Room cleaning. Allways when i start room cleaning, a error will be come (invalid calibration, please check your configuration). Can everyone help me? Another problem is that i dont find the room id. please help

Yup, seems like HA issue

What vacuum model do you have?
Can you check what happens with map when you start the vacuum?
Can you provide your config?

I have the Roborock S7. When I start the vaccuum, the map go away for a short time and the message invalid calibration, please check your config appears instead of the map.
When I start room cleaning in the xiaomi home app, there are no problems.

My Config:
type: custom:xiaomi-vacuum-map-card
map_source:
camera: camera.xiaomi_cloud_map_extractor
calibration_source:
camera: true
entity: vacuum.roborock_s7
vacuum_platform: send_command
map_modes:

  • template: vacuum_clean_zone
  • template: vacuum_clean_zone_predefined
    predefined_selections:
    • zones:
        • 22859
        • 18313
        • 25715
        • 21034
          label:
          text: Küche
          x: 24359
          ‘y’: 19715
          offset_y: 25
          icon:
          name: mdi:pot-mix
          x: 24359
          ‘y’: 19915
          offset_y: 25
    • zones:
        • 22161
        • 21083
        • 26255
        • 24542
          label:
          text: Essen
          x: 24359
          ‘y’: 22715
          offset_y: 25
          icon:
          name: mdi:table-chair
          x: 24359
          ‘y’: 22915
          offset_y: 25
    • zones:
        • 19989
        • 24513
        • 26084
        • 29298
          label:
          text: Wohnen
          x: 23359
          ‘y’: 26715
          offset_y: 25
          icon:
          name: mdi:sofa-outline
          x: 23359
          ‘y’: 26915
          offset_y: 25
    • zones:
        • 18317
        • 21893
        • 21852
        • 24581
          label:
          text: Flur
          x: 19859
          ‘y’: 23515
          offset_y: 25
          icon:
          name: mdi:wardrobe-outline
          x: 19859
          ‘y’: 23715
          offset_y: 25
    • zones:
        • 20000
        • 19682
        • 22081
        • 22172
          label:
          text: Bad
          x: 20859
          ‘y’: 21215
          offset_y: 25
          icon:
          name: mdi:shower
          x: 20859
          ‘y’: 21415
          offset_y: 25
    • zones:
        • 16051
        • 18870
        • 19606
        • 21803
          label:
          text: Nils
          x: 17859
          ‘y’: 20215
          offset_y: 25
          icon:
          name: mdi:toy-brick-outline
          x: 17859
          ‘y’: 20415
          offset_y: 25
    • zones:
        • 15772
        • 24796
        • 19728
        • 29050
          label:
          text: Schlafen
          x: 17859
          ‘y’: 27215
          offset_y: 25
          icon:
          name: mdi:bed-king-outline
          x: 17859
          ‘y’: 27415
          offset_y: 25
  • template: vacuum_clean_segment
    predefined_selections:
    • id: 18
      outline:
        • 22939
        • 20872
        • 22939
        • 18578
        • 23824
        • 18578
        • 23824
        • 18417
        • 25193
        • 18417
        • 25193
        • 18578
        • 25635
        • 18578
        • 25635
        • 21032
        • 25152
        • 21032
        • 25152
        • 20429
        • 24066
        • 20429
        • 24066
        • 20872
          label:
          text: Küche
          x: 24359
          ‘y’: 19715
          offset_y: 25
          icon:
          name: mdi:pot-mix
          x: 24359
          ‘y’: 19915
          offset_y: 25
    • id: 16
      outline:
        • 22215
        • 24534
        • 22215
        • 21073
        • 26159
        • 21154
        • 26159
        • 24091
        • 24428
        • 24132
        • 24428
        • 24534
          label:
          text: Essen
          x: 24359
          ‘y’: 22715
          offset_y: 25
          icon:
          name: mdi:table-chair
          x: 24359
          ‘y’: 22915
          offset_y: 25
    • id: 17
      outline: null
      label:
      text: Wohnen
      x: 23359
      ‘y’: 26715
      offset_y: 25
      icon:
      name: mdi:sofa-outline
      x: 23359
      ‘y’: 26915
      offset_y: 25
    • id: 21
      label:
      text: Flur
      x: 19859
      ‘y’: 23515
      offset_y: 25
      icon:
      name: mdi:wardrobe-outline
      x: 19859
      ‘y’: 23715
      offset_y: 25
    • id: 20
      outline: null
      label:
      text: Bad
      x: 20859
      ‘y’: 21215
      offset_y: 25
      icon:
      name: mdi:shower
      x: 20859
      ‘y’: 21415
      offset_y: 25
    • id: 19
      outline: null
      label:
      text: Nils
      x: 17859
      ‘y’: 20215
      offset_y: 25
      icon:
      name: mdi:toy-brick-outline
      x: 17859
      ‘y’: 20415
      offset_y: 25
    • id: 22
      outline: null
      label:
      text: Schlafen
      x: 17859
      ‘y’: 27215
      offset_y: 25
      icon:
      name: mdi:bed-king-outline
      x: 17859
      ‘y’: 27415
      offset_y: 25
  • template: vacuum_goto
  • template: vacuum_goto_predefined
  • template: vacuum_follow_path
    language: de
    map_locked: true
    two_finger_pan: true

@Lou_1987
Sorry for interference, but you should paste your code as a code.

your code

otherwise it is not easy to read it and not possible to use it (for testing, for example).

With pleasure :slight_smile:

elements:
  - entity: switch.timed_zone_cleaning
    style:
      left: 38%
      top: 77%
    tap_action:
      action: call-service
      service: switch.toggle
      service_data:
        entity_id: switch.timed_zone_cleaning
    type: state-icon
  - style:
      font-size: 120%
      font-weight: bold
      left: 3%
      pointer-events: none
      top: 77%
      transform: translate(0%,-50%)
    text: 'ütemezett zóna:'
    type: custom:text-element
  - entity: switch.takaritas_utemezese
    style:
      left: 30%
      top: 70%
    tap_action:
      action: call-service
      service: switch.toggle
      service_data:
        entity_id: switch.takaritas_utemezese
    type: state-icon
  - style:
      font-size: 120%
      font-weight: bold
      left: 3%
      pointer-events: none
      top: 70%
      transform: translate(0%,-50%)
    text: 'ütemezett:'
    type: custom:text-element
  - entity: switch.entrance_cleaning
    style:
      left: 91%
      top: 77%
    tap_action:
      action: call-service
      service: switch.toggle
      service_data:
        entity_id: switch.entrance_cleaning
    type: state-icon
  - entity: switch.bathroom_cleaning
    style:
      left: 61%
      top: 69%
    tap_action:
      action: call-service
      service: switch.toggle
      service_data:
        entity_id: switch.bathroom_cleaning
    type: state-icon
  - entity: switch.girls_room_cleaning
    style:
      left: 88%
      top: 88%
    tap_action:
      action: call-service
      service: switch.toggle
      service_data:
        entity_id: switch.girls_room_cleaning
    type: state-icon
  - entity: switch.zone_cleaning
    style:
      '--mdc-icon-size': 22px
      left: 84%
      top: 74%
    tap_action:
      action: call-service
      service: switch.toggle
      service_data:
        entity_id: switch.zone_cleaning
    type: state-icon
  - entity: switch.middle_room_cleaning
    style:
      left: 74%
      top: 88%
    tap_action:
      action: call-service
      service: switch.toggle
      service_data:
        entity_id: switch.middle_room_cleaning
    type: state-icon
  - entity: switch.bedroom_cleaning
    style:
      left: 61%
      top: 88%
    tap_action:
      action: call-service
      service: switch.toggle
      service_data:
        entity_id: switch.bedroom_cleaning
    type: state-icon
  - entity: switch.living_room_cleaning
    style:
      left: 81%
      top: 65%
    tap_action:
      action: call-service
      service: switch.toggle
      service_data:
        entity_id: switch.living_room_cleaning
    type: state-icon
  - entity: switch.toilet_cleaning
    style:
      left: 58%
      top: 77%
    tap_action:
      action: call-service
      service: switch.toggle
      service_data:
        entity_id: switch.toilet_cleaning
    type: state-icon
  - entity: switch.storage_cleaning
    style:
      left: 61%
      top: 61%
    tap_action:
      action: call-service
      service: switch.toggle
      service_data:
        entity_id: switch.storage_cleaning
    type: state-icon
  - entity: switch.vacuum_set_silent
    style:
      '--mdc-icon-size': 16px
      left: 5%
      top: 34%
    tap_action:
      action: call-service
      service: script.turn_on
      service_data:
        entity_id: script.vacuum_set_quiet
    type: state-icon
  - entity: switch.vacuum_set_balanced
    style:
      '--mdc-icon-size': 20px
      left: 11%
      top: 34%
    tap_action:
      action: call-service
      service: script.turn_on
      service_data:
        entity_id: script.vacuum_set_balanced
    type: state-icon
  - entity: switch.vacuum_set_medium
    style:
      '--mdc-icon-size': 24px
      left: 18%
      top: 34%
    tap_action:
      action: call-service
      service: script.turn_on
      service_data:
        entity_id: script.vacuum_set_max
    type: state-icon
  - entity: switch.vacuum_set_turbo
    style:
      '--mdc-icon-size': 30px
      left: 26%
      top: 34%
    tap_action:
      action: call-service
      service: script.turn_on
      service_data:
        entity_id: script.vacuum_set_turbo
    type: state-icon
  - entity: switch.vacuum_set_gentle
    style:
      left: 35%
      top: 34%
    tap_action:
      action: call-service
      service: script.turn_on
      service_data:
        entity_id: script.vacuum_set_mop
    type: state-icon
  - icon: mdi:map-marker-radius
    style:
      color: '#1E90FF'
      left: 88%
      top: 45%
    tap_action:
      action: call-service
      service: vacuum.clean_spot
      service_data:
        entity_id: vacuum.xiaomi_vacuum_cleaner
    type: icon
  - icon: mdi:bell-ring
    style:
      color: '#1E90FF'
      left: 76%
      top: 45%
    tap_action:
      action: call-service
      service: vacuum.locate
      service_data:
        entity_id: vacuum.xiaomi_vacuum_cleaner
    type: icon
  - entity: switch.vacuum_return
    style:
      left: 64%
      top: 45%
    tap_action:
      action: call-service
      service: vacuum.return_to_base
      service_data:
        entity_id: vacuum.xiaomi_vacuum_cleaner
    type: state-icon
  - entity: switch.vacuum_cleaning
    style:
      left: 36%
      top: 45%
    tap_action:
      action: call-service
      service: switch.turn_on
      service_data:
        entity_id: switch.vacuum_cleaning
    type: state-icon
  - entity: switch.vacuum_pause
    style:
      left: 24%
      top: 45%
    tap_action:
      action: call-service
      service: vacuum.pause
      service_data:
        entity_id: vacuum.xiaomi_vacuum_cleaner
    type: state-icon
  - entity: switch.vacuum_stop
    style:
      left: 12%
      top: 45%
    tap_action:
      action: call-service
      service: vacuum.stop
      service_data:
        entity_id: vacuum.xiaomi_vacuum_cleaner
    type: state-icon
  - entity: sensor.vacuum_operation
    style:
      background-color: rgba(57,128,228,0.9)
      border-color: rgb(34, 154, 210)
      border-radius: 6px
      color: rgb(255, 255, 255)
      font-size: 100%
      font-weight: bold
      left: 3%
      pointer-events: none
      top: 5%
      transform: translate(0%,-50%)
    type: state-label
  - entity: sensor.vacuum_accessories
    style:
      background-color: rgba(57,128,228,0.9)
      border-color: rgb(34, 154, 210,)
      border-radius: 6px
      color: rgb(255, 255, 255)
      font-size: 100%
      font-weight: bold
      pointer-events: none
      right: 3%
      top: 5%
      transform: translate(0%,-50%)
    type: state-label
  - entity: vacuum.xiaomi_vacuum_cleaner
    style:
      background-color: rgb(250,250,250, .8)
      border-color: rgb(34, 154, 210)
      border-radius: 6px
      color: rgb(0, 0, 0)
      font-size: 100%
      font-weight: bold
      left: 50%
      margin-right: '-50%'
      padding: 70px 0;
      top: 5%
      transform: translate(-50%,-50%)
    tap_action:
      action: more-info
    type: state-label
  - entity: sensor.vacuum_main_brush
    prefix: 'Fő kefe: '
    style:
      font-size: 100%
      font-weight: bold
      pointer-events: none
      right: 1%
      text-shadow: 1px 1px black
      top: 13%
      transform: translate(0%,-50%)
    type: state-label
  - entity: sensor.vacuum_side_brush
    prefix: 'Oldal kefe: '
    style:
      font-size: 100%
      font-weight: bold
      pointer-events: none
      right: 1%
      text-shadow: 1px 1px black
      top: 20%
      transform: translate(0%,-50%)
    type: state-label
  - entity: sensor.vacuum_filter
    prefix: 'Filter: '
    style:
      font-size: 100%
      font-weight: bold
      pointer-events: none
      right: 1%
      text-shadow: 1px 1px black
      top: 27%
      transform: translate(0%,-50%)
    type: state-label
  - entity: sensor.vacuum_sensor
    prefix: 'Szenzorok: '
    style:
      font-size: 100%
      font-weight: bold
      pointer-events: none
      right: 1%
      text-shadow: 1px 1px black
      top: 34%
      transform: translate(0%,-50%)
    type: state-label
  - entity: sensor.vacuum_status
    prefix: 'Állapot: '
    style:
      font-size: 100%
      font-weight: bold
      left: 1%
      pointer-events: none
      text-shadow: 1px 1px black
      top: 13%
      transform: translate(0%,-50%)
    type: state-label
  - entity: sensor.vacuum_battery
    prefix: 'Akku: '
    style:
      font-size: 100%
      font-weight: bold
      left: 1%
      pointer-events: none
      text-shadow: 1px 1px black
      top: 20%
      transform: translate(0%,-50%)
    type: state-label
  - entity: sensor.fan_speed
    prefix: 'Mód: '
    style:
      color: deepskyblue
      font-size: 100%
      font-weight: bold
      left: 1%
      pointer-events: none
      text-shadow: 1px 1px black
      top: 27%
      transform: translate(0%,-50%)
    type: state-label
  - entity: sensor.vacuum_cleaned_area
    prefix: 'Terület: '
    style:
      font-size: 100%
      font-weight: bold
      left: 1%
      pointer-events: none
      text-shadow: 1px 1px black
      top: 85%
      transform: translate(0%,-50%)
    type: state-label
  - entity: sensor.vacuum_cleaning_time
    prefix: 'Idő: '
    style:
      font-size: 100%
      font-weight: bold
      left: 1%
      pointer-events: none
      top: 90%
      transform: translate(0%,-50%)
    suffix: ''
    type: state-label
  - style:
      font-size: 120%
      font-weight: bold
      left: 3%
      pointer-events: none
      top: 64%
      transform: translate(0%,-50%)
    text: 'Időzítés:'
    type: custom:text-element
  - conditions:
      - entity: switch.takaritas_utemezese
        state: 'on'
    elements:
      - entity: sensor.vacuum_start_time
        style:
          color: orange
          font-size: 120%
          font-weight: bold
          left: 30%
          top: 64%
        tap_action:
          action: fire-dom-event
          browser_mod:
            command: popup
            card:
              entities:
                - entity: input_datetime.vacuum_start_time
                  hide:
                    name: false
                  hour_mode: 24
                  hour_step: 1
                  layout:
                    align_controls: center
                    name: header
                  link_values: false
                  minute_step: 5
                  name: Takarítás indítása
                  style: |
                    ha-card { 
                      --ha-card-background: none;
                      background-image: url("/local/pictures/cardback.png");
                      background-repeat: no-repeat;
                      background-size: 100% 100%;
                      background-attachment: cover;
                      background-position: center;     
                      border: solid 1.5px rgba(57,128,228);
                      border-radius: 15px;
                      box-shadow: none;

                      }   
                  type: custom:time-picker-card
              type: entities
            hide_header: false
            title: ' '
        type: state-label
    type: conditional
  - conditions:
      - entity: switch.timed_zone_cleaning
        state: 'on'
    elements:
      - entity: sensor.vacuum_start_time
        style:
          color: orange
          font-size: 120%
          font-weight: bold
          left: 30%
          top: 64%
        tap_action:
          action: more-info
        type: state-label
    type: conditional
  - entity: sensor.vacuum_status
    style:
      '--mdc-icon-size': 48px
      color: rgba(0,191,255,.8)
      margin-left: 50%
      top: 44%
      transform: translate(-50%,-50%)
    type: state-icon
image: /local/pictures/roberta4.png
style: |
  ha-card { 
    --ha-card-background: 'rgba(250,0,20,0.8)';
    background-image: url("/local/pictures/cardback.png");
    background-repeat: no-repeat;
    background-size: 100% 100%;
    background-attachment: cover;
    background-position: center;     
    border: solid 1.5px rgba(57,128,228);
    border-radius: 15px;
    box-shadow: none;

    }      
type: picture-elements

1 Like

Formatting your config as a code would be really useful.

Can you check what happens to camera.xiaomi_cloud_map_extractor entity? Does the image show any error? Is there anything in logs?

Why do you use send_command platform instead of default?

I have the same issue, it seems that this is happening because it draws the map from the Xiaomi app.
When you start cleaning the Roborock is positioning. While it is positioning it has no map available.
As soon as the Roborock found his position the map returns.

Is there any way to reformat a tile with an entity state reported as a date time format (e.g. 2021-12-10T19:12:13)? It’s for a “Last Clean End” entity. I’m just trying to display something a little simpler like “1 day(s) ago” or “10 Dec 2021”.