Custom styling

[PiotrMachowski]

Basic

If you want to apply custom styling to card's elements you can do it in following ways:

• Use one of supported CSS variables in your theme

  map-card-primary-color: blue
  map-card-zoomer-background: rgba(155, 130, 131, 0.7)

• Use card-mod to apply styles directly to card

  type: custom:xiaomi-vacuum-map-card
  entity: vacuum.xiaomi_vacuum
  map_source:
    camera: camera.xiaomi_cloud_map_extractor
  calibration_source:
    camera: true
  card_mod:
    style: |
      ha-card {
        --map-card-primary-color: blue;
        --map-card-zoomer-background: rgba(155, 130, 131, 0.7);
      }
  

Advanced

This card contains two types of CSS variables: "normal" and "internal": --map-card-primary-color, --map-card-internal-primary-color.
Normal variables are used to retrieve data from theme.
Internal variables are used in nested card's elements to provide appropriate styling - their values are calculated using normal variables.
If you want to style a specific card's element you have to use internal variable.

Setting individual room colors:

style: |
  .room-1-wrapper {
    --map-card-internal-room-outline-line-color: red;
    --map-card-internal-room-outline-fill-color: rgba(255, 0, 0, 0.5);
  }
  .room-2-wrapper {
    --map-card-internal-room-outline-line-color: blue;
    --map-card-internal-room-outline-fill-color: rgba(0, 0, 255, 0.5);
  }
  .room-<room_id>-wrapper {
    --map-card-internal-room-outline-line-color: green;
    --map-card-internal-room-outline-fill-color: rgba(0, 255, 0, 0.5);
  }

Changing tile color if value is negative

style: |
  {% if (states("sensor.vacuum_sensor_dirty_left")) | float(0) < 0 %}
    :host 
      .tile-sensor_dirty_left-wrapper {
        box-shadow: inset 0px 0px 0px 3px red;
      }
      .tile-sensor_dirty_left-wrapper > * > .tile-value {
        color: red;
        font-weight: bold;
      }
  {% endif %}

[bojke]

Hello,

Any idea how to change background color of drop down menu?

https://i.imgur.com/PKTuYlJ.png

Thanks :)

[telegrambeans]

Or do I have to define this in the theme?

[telegrambeans]

Can you take a look at this?
https://github.com/home-assistant/frontend/blob/dd082c204b45df55663dc257ee83f5efe1a9ab88/src/components/ha-dialog.ts

home-assistant/frontend#20653

[PiotrMachowski]

I still haven't found a way to make it blurred. It seems to a problem with a component used underneath.

[telegrambeans]

Can you fix that?

[PiotrMachowski]

No, at this moment I can't

[rotweiss4]

Changing tile color if value is negative

style: |
  {% if (states("sensor.vacuum_sensor_dirty_left")) | float(0) < 0 %}
    :host 
      .tile-wrapper:nth-child(7) {
        border: 3px solid red;
      }
      .tile-wrapper:nth-child(7) > * > .tile-value {
        color: red;
        font-weight: bold;
      }
  {% endif %}

Is it possible that you tell me stupid boy how to use it for more than one tile. I tried, but i failed... Thank you once again.

[PiotrMachowski]

style: |
    :host 
  {% if (states("sensor.vacuum_sensor_dirty_left")) | float(0) < 0 %}
      .tile-wrapper:nth-child(7) {
        border: 3px solid red;
      }
      .tile-wrapper:nth-child(7) > * > .tile-value {
        color: red;
        font-weight: bold;
      }
  {% endif %}
  {% if (states("sensor.vacuum_sensor_dirty_left")) | float(0) < 0 %}
      .tile-wrapper:nth-child(6) {
        border: 3px solid red;
      }
      .tile-wrapper:nth-child(6) > * > .tile-value {
        color: red;
        font-weight: bold;
      }
  {% endif %}

[new-kirte]

Hi,
How to change Room label colour? Thanks

[luk6173]

ok, this works for me. Means every theme setting I have to do now in my configuration.yaml ?

[PiotrMachowski]

It depends on the change you want to make. You can change colors in UI as well (in user's config)

[luk6173]

ok, I will play now a bit with it, thank you very much!

[luk6173]

You got some coffee :-)

[MoshiBin]

@luk6173 Card mod works for me, I think you mistyped the card configuration yaml, it should be card_mod not card-mod. Mine looks like this:

card_mod:
  style: |
    ha-card {
      --map-card-room-label-color: white;
      --map-card-room-icon-background-color: white;
      --map-card-room-label-font-size: 18px;
    }
    svg text {
      stroke: black;
      font-weight: bold;
    }

[prof-miles0]

Hi!

Is there any way to make the "map mode" dropdown open upwards? Like in the demo.

I have removed icons and tiles. When clicking the map mode button, the dropdown opens downwards and does not fit in the ha card.

Thanks

Example.mov

[prof-miles0]

I have been playing with Custom Styling using DevTools and I have managed to tweak the dropdown by adding a "margin-top"

But I am not able to reproduce this using card_mod

Any idea on how should I code it?

[PiotrMachowski]

It's inside shadow root, so it requires a special treatment: documentation

[Latyn4ik]

How increase the size of the card (scaling)?

[PiotrMachowski]

Card size depends on map image size and column width

[prof-miles0]

It's inside shadow root, so it requires a special treatment: documentation

Thanks! After trying, I have found a working tweak to open the dropdown menu upwards using custom styling.

To work properly the margin-top in pixels must be adjusted to the amount "map modes" minus one. Then multiply by 50px which is the height of each menu option. In my case I have 3 map modes, so the margin-top is -100px. A negative value to move the margin upwards.

card_mod:
 style:
    ha-button-menu$:
      mwc-menu$:
        mwc-menu-surface$: |
          .mdc-menu-surface {
            margin-top: -100px;
          }

[tjuanma]

Hi,

I would like to remove the blue background:
https://i.imgur.com/dk05ba5.png

This is my config:

entity: vacuum.roborocks5e
map_source:
  camera: camera.xiaomi_cloud_map_extractor
  crop:
    top: 180
    bottom: 170
    left: 150
    right: 150
calibration_source:
  camera: true
card-mod:
  style: |
    ha-card {
      --map-card-primary-color: white;
      --map-card-zoomer-background: rgba(155, 130, 131, 0.7);
    }
map_modes:
  - template: vacuum_clean_segment
    predefined_selections:
      - id: 22
        label:
          text: Dormitorio
          x: 27775
          'y': 18875
          offset_y: 35
        icon:
          name: mdi:broom
          x: 27775
          'y': 18875
      - id: 18
        label:
          text: Aseo
          x: 30350
          'y': 17525
          offset_y: 35
        icon:
          name: mdi:broom
          x: 30350
          'y': 17525
      - id: 21
        label:
          text: Manu
          x: 27100
          'y': 20775
          offset_y: 35
        icon:
          name: mdi:broom
          x: 27100
          'y': 20775
      - id: 19
        label:
          text: Pasillo
          x: 30225
          'y': 23925
          offset_y: 35
        icon:
          name: mdi:broom
          x: 30225
          'y': 23925
      - id: 20
        label:
          text: Estudio
          x: 27100
          'y': 24375
          offset_y: 35
        icon:
          name: mdi:broom
          x: 27100
          'y': 24375
      - id: 16
        label:
          text: Salón
          x: 27625
          'y': 27475
          offset_y: 35
        icon:
          name: mdi:broom
          x: 27625
          'y': 27475
      - id: 23
        label:
          text: Baño
          x: 31550
          'y': 26475
          offset_y: 35
        icon:
          name: mdi:broom
          x: 31550
          'y': 26475
      - id: 17
        label:
          text: Cocina
          x: 26750
          'y': 30700
          offset_y: 35
        icon:
          name: mdi:broom
          x: 26750
          'y': 30700
  - template: vacuum_goto
  - template: vacuum_clean_zone
keep:
  margin: true
  box_shadow: true
  background: false
  outer_padding: true
  border_radius: true
map_locked: true

[PiotrMachowski]

This background is a part of map image, you have to configure it in Map Extractor

[tjuanma]

This background is a part of map image, you have to configure it in Map Extractor

Thanks for the very fast reply, which file should I modify?

Thanks!

[PiotrMachowski]

It should be in configuration.yaml. You have to configure colors:

camera:
  - platform: xiaomi_cloud_map_extractor
    host: !secret xiaomi_vacuum_host
    token: !secret xiaomi_vacuum_token
    username: !secret xiaomi_cloud_username
    password: !secret xiaomi_cloud_password
    draw: ['all']
    attributes:
      - calibration_points
    colors:
      color_map_outside: [0xfb, 0x00, 0xff, 0x94]

[tjuanma]

It should be in configuration.yaml. You have to configure colors:

camera:
  - platform: xiaomi_cloud_map_extractor
    host: !secret xiaomi_vacuum_host
    token: !secret xiaomi_vacuum_token
    username: !secret xiaomi_cloud_username
    password: !secret xiaomi_cloud_password
    draw: ['all']
    attributes:
      - calibration_points
    colors:
      color_map_outside: [0xfb, 0x00, 0xff, 0x94]

Thankyou so much!

Worked smooth with ffffff for white 🗡️

Now i get it ;)

[Chio1234]

Did you get it to work ??

[cataseven]

for those want to change text color of "internal room" (tested on only viomise config)

          - - -2.85
            - -6.9
          - - -2.85
            - -8.05
  - template: vacuum_clean_zone
  - template: vacuum_clean_point
vacuum_platform: marotoweb/viomise
style: |
  .room-10-wrapper {
    --map-card-internal-room-outline-line-color: rgb(19, 87, 148, 0);
    --map-card-internal-room-label-color: rgb(255, 255, 255);
    --map-card-internal-room-label-color-selected: rgb(255, 255, 255);
  }
  .room-11-wrapper {
    --map-card-internal-room-outline-line-color: rgba(19, 87, 148, 0);
    --map-card-internal-room-label-color: rgb(255, 255, 255);
    --map-card-internal-room-label-color-selected: rgb(255, 255, 255);
  }
  .room-12-wrapper {
    --map-card-internal-room-outline-line-color: rgb(19, 87, 148, 0);
    --map-card-internal-room-label-color: rgb(255, 255, 255);
    --map-card-internal-room-label-color-selected: rgb(255, 255, 255);
  }
  .room-13-wrapper {
    --map-card-internal-room-outline-line-color: rgb(19, 87, 148, 0);
    --map-card-internal-room-label-color: rgb(255, 255, 255);
    --map-card-internal-room-label-color-selected: rgb(255, 255, 255);
  }
  .room-14-wrapper {
    --map-card-internal-room-outline-line-color: rgb(19, 87, 148, 0);
    --map-card-internal-room-label-color: rgb(255, 255, 255);
    --map-card-internal-room-label-color-selected: rgb(255, 255, 255);
  }

[PiotrMachowski]

You don't have to do it for every room separately:

style: |
    ha-card {
      --map-card-room-outline-line-color: rgb(19, 87, 148, 0);
      --map-card-room-label-color: rgb(255, 255, 255);
      --map-card-room-label-color-selected: rgb(255, 255, 255);
    }

Additionally if you want to hide outline you just have to remove it from room's config.

[cataseven]

Ooo great, thank u so much. I am 100% amateur on coding. I think my version can be useful for those who want different colors for each room

Regarding hiding the outline; i tried it but then the rooms cant be selected. Here is my code. Can you please look at it?

type: custom:xiaomi-vacuum-map-card
entity: vacuum.viomi_se
preset_name: Downstairs
map_source:
  camera: camera.xiaomi_cloud_map_extractor
calibration_source:
  camera: true
clean_selection_on_start: false
map_locked: true
two_finger_pan: true
icons: []
tiles: []
map_modes:
  - template: vacuum_clean_segment
    max_selections: 4
    repeats_type: NONE
    selection_type: ROOM
    predefined_selections:
      - id: 10
        label:
          text: Kitchen
          x: -0.75
          'y': -10.3
        outline:
          - - -2
            - -12.85
          - - -2
            - -12.5
          - - -2
            - -9.25
          - - -2.85
            - -9.25
          - - -2.85
            - -8.7
          - - -2.85
            - -7.85
          - - -1.75
            - -7.85
          - - -1.75
            - -7.5
          - - 0.4
            - -7.5
          - - 0.4
            - -12.85
      - id: 11
        label:
          text: Hallway
          x: -3.52
          'y': -9.9
        outline:
          - - -4.45
            - -11.7
          - - -4.45
            - -8.05
          - - -2.85
            - -8.05
          - - -2.85
            - -11.7
      - id: 12
        label:
          text: Guest Room
          x: -5.5
          'y': -12.25
        outline:
          - - -6.6
            - -13.75
          - - -6.6
            - -13.75
          - - -6.6
            - -10.9
          - - -4.4
            - -10.9
          - - -4.4
            - -12.05
          - - -4.8
            - -12.05
          - - -4.8
            - -13.75
      - id: 13
        label:
          text: Staircase
          x: -5.2
          'y': -8.5
        outline:
          - - -4.45
            - -9
          - - -5.95
            - -9
          - - -5.95
            - -7.2
          - - -4.9
            - -7.2
          - - -4.9
            - -8.05
          - - -4.45
            - -8.05
      - id: 14
        label:
          text: Living Room
          x: -2.2
          'y': -3.5
        outline:
          - - -4.9
            - -8.05
          - - -4.9
            - -6.4
          - - -4.6
            - -6.4
          - - -4.6
            - -5.3
          - - -6
            - -5.3
          - - -6
            - -1.2
          - - -2.95
            - -1.2
          - - -2.95
            - 0.35
          - - 0.7
            - 0.35
          - - 0.7
            - -6.9
          - - -2.85
            - -6.9
          - - -2.85
            - -8.05
  - template: vacuum_clean_zone
  - template: vacuum_clean_point
vacuum_platform: marotoweb/viomise
style: |
  .room-10-wrapper {
    --map-card-internal-room-outline-line-color: rgb(19, 87, 148, 0);
    --map-card-internal-room-outline-line-color-selected: rgb(19, 87, 148, 0);
    --map-card-internal-room-label-color: rgb(255, 255, 255);
    --map-card-internal-room-label-color-selected: rgb(255, 255, 255);
  }
  .room-11-wrapper {
    --map-card-internal-room-outline-line-color: rgba(19, 87, 148, 0);
    --map-card-internal-room-outline-line-color-selected: rgb(19, 87, 148, 0);
    --map-card-internal-room-label-color: rgb(255, 255, 255);
    --map-card-internal-room-label-color-selected: rgb(255, 255, 255);
  }
  .room-12-wrapper {
    --map-card-internal-room-outline-line-color: rgb(19, 87, 148, 0);
    --map-card-internal-room-outline-line-color-selected: rgb(19, 87, 148, 0);
    --map-card-internal-room-label-color: rgb(255, 255, 255);
    --map-card-internal-room-label-color-selected: rgb(255, 255, 255);
  }
  .room-13-wrapper {
    --map-card-internal-room-outline-line-color: rgb(19, 87, 148, 0);
    --map-card-internal-room-outline-line-color-selected: rgb(19, 87, 148, 0);
    --map-card-internal-room-label-color: rgb(255, 255, 255);
    --map-card-internal-room-label-color-selected: rgb(255, 255, 255);
  }
  .room-14-wrapper {
    --map-card-internal-room-outline-line-color: rgb(19, 87, 148, 0);
    --map-card-internal-room-outline-line-color-selected: rgb(19, 87, 148, 0);
    --map-card-internal-room-label-color: rgb(255, 255, 255);
    --map-card-internal-room-label-color-selected: rgb(255, 255, 255);
  }

[PiotrMachowski]

Ok, you don't have icons, so you need outlines to make rooms selectable (rooms can only be selected by clicking on outline or icon)

[Tontze]

@PiotrMachowski

Hello, took me a while to understand why this is not working, in examples card-mod needs to be card_mod :)

[PiotrMachowski]

@Tontze thank you, fixed!

[sti0]

@PiotrMachowski thanks for you great work!
Is it possible to move the control panel to the right of the map instead of showing below? This might allow a better visibility on a panel dashboard used on a wall mounted tablet.

[PiotrMachowski]

It's possible to achieve such layout with card-mod
#183

[sti0]

Thanks. Just pointing to the working config for further reference.

[rodolfomachado]

Hi,

How can I hide the zoom icons?

I tried without success:

    #map-zoomer-overlay > div:nth-child(2) {
      visibility: hidden;
    }

[PiotrMachowski]

They are hidden when you lock the map in card's config. If you want to hide the icons without locking the map you can use following config:

card_mod:
  style: |
    .map-zoom-icons {
      visibility: hidden !important;
    }

[rodolfomachado]

That worked! Tks

[rospogrigio]

Hi @PiotrMachowski , it looks like with the new update of HA (or card-mod maybe?!?) the configured colors are not applied any more (neither within the ha-card group nor the various .tile-wrapper ... are you experiencing the same? Is there a workaround? I am not noticing news in the card-mod documentation, do you have any idea?
Thank you

[PiotrMachowski]

Can you show your config?

[rospogrigio]

entity: vacuum.roborock_s7
preset_name: Live Map
style: |
  ha-card {
    --map-card-room-outline-line-segment-gap: 0px;
    --map-card-room-icon-background-color-selected: rgba(0, 165, 0, 0.5);
    --map-card-room-outline-line-color: gray;
    --map-card-room-outline-fill-color: rgba(192, 192, 192, 0.2);
    --map-card-room-outline-line-color-selected: green;
    --map-card-room-outline-fill-color-selected: rgba(0, 225, 0, 0.2);
    --map-card-predefined-rectangle-icon-background-color-selected: rgba(0, 165, 0, 0.5);
    --map-card-predefined-rectangle-line-segment-gap: 0px;
    --map-card-predefined-rectangle-line-color: gray;
    --map-card-predefined-rectangle-fill-color: rgba(192, 192, 192, 0.2);
    --map-card-predefined-rectangle-line-color-selected: green;
    --map-card-predefined-rectangle-fill-color-selected: rgba(0, 225, 0, 0.2);
  }
  :host 
  {% if (states("binary_sensor.roborock_s7_water_shortage")) | float(0) < 0 %}
  .tile-wrapper:nth-child(8) {
    border: 3px solid red;
  }
  .tile-wrapper:nth-child(8) > * > .tile-value {
    color: red;
    font-weight: bold;
    icon: mdi:robot-vacuum;
  }
  {% endif  %}
  {% if (states("sensor.roborock_s7_sensor_dirty_left")) | float(0) < 0 %}
  .tile-wrapper:nth-child(9) {
    border: 3px solid red;
  }
  .tile-wrapper:nth-child(9) > * > .tile-value {
    color: red;
    font-weight: bold;
  }
  {% endif  %}
  {% if (states("sensor.roborock_s7_filter_left")) | float(0) < 0 %}
  .tile-wrapper:nth-child(10) {
    border: 3px solid red;
  }
  .tile-wrapper:nth-child(10) > * > .tile-value {
    color: red;
    font-weight: bold;
  }
  {% endif  %}
....

Pretty much what you suggested at the top of this FAQ...

[PiotrMachowski]

Check out breaking changes in latest versions of card mod :)

[rospogrigio]

Mmm where can I find them?

[PiotrMachowski]

https://github.com/thomasloven/lovelace-card-mod/releases

[rospogrigio]

Uuuuh now I see, thank you and sorry for not noticing it myself!
You may want to edit the posts at the top of this thread maybe?
Thank you again 😄

[fenn1c]

Hi, is there a way to hide the “status” tiles such as status, battery, fan speed etc. behind a “more info” button that could be toggled to expand a section with the tiles?

I like to see the info every now and then, but most of the time feel like it clutters the dashboard too much.

[PiotrMachowski]

Just to be sure, the internal variable is defined in the same card where I want to use it in the if statement.

Internal variable is inside the vacuum map card. Card mod is not the same card, it is an external code that modifies a rendered card.

Does that means card mods is not able to use internal variables at all?

Exactly, they operate on different levels.

---

is it possible to read the icon from an element and use it in the if statement instead?

I don't think this is possible. It would have to be a feature in the card mod.

---

Can you describe what do you want to achieve? I might be able to find out a solution

[M1scer]

Thank you for your explanation. I am still a beginner in HA and therefore some concepts are not quite clear to me yet.

When I expand, I display the consumables. Now want to highlight when a consumable is at 0, so I color the corresponding tile orange.
(In the example the consumable is at 299, but i changed the if statement so that it is still true, for test reasons)

Perhaps screenshots will also help here.
When folded, it should look like this:

When unfolded, it should look like this:

But at the moment it looks like this when it is unfolded:

For the completeness, here is my code

My actual code

type: custom:xiaomi-vacuum-map-card
language: de
map_source:
  camera: camera.dreame_l10s_ultra_camera
  crop:
    bottom: 100
entity: vacuum.valetudo_notedunluckydove
vacuum_platform: default
calibration_source:
  camera: true
map_modes:
  - template: vacuum_clean_segment
    predefined_selections:
      - id: '1'
        icon:
          name: mdi:broom
          x: 2632
          'y': 3417
        label:
          text: Schlafen
          x: 2632
          'y': 3417
          offset_y: 35
        outline:
          - - 2470
            - 3215
          - - 2875
            - 3215
          - - 2875
            - 3620
          - - 2470
            - 3620
      - id: '2'
        icon:
          name: mdi:broom
          x: 3012
          'y': 3422
        label:
          text: Kind1
          x: 3012
          'y': 3422
          offset_y: 35
        outline:
          - - 2875
            - 3220
          - - 3150
            - 3220
          - - 3150
            - 3625
          - - 2875
            - 3625
      - id: '3'
        icon:
          name: mdi:broom
          x: 3637
          'y': 3430
        label:
          text: Wohnen
          x: 3637
          'y': 3430
          offset_y: 35
        outline:
          - - 3526
            - 3722
          - - 3760
            - 3718
          - - 3764
            - 3247
          - - 3526
            - 3244
      - id: '4'
        icon:
          name: mdi:broom
          x: 2770
          'y': 3805
        label:
          text: Klo
          x: 2770
          'y': 3805
          offset_y: 35
        outline:
          - - 2678
            - 3875
          - - 2678
            - 3738
          - - 2855
            - 3738
          - - 2858
            - 3875
      - id: '5'
        icon:
          name: mdi:broom
          x: 3492
          'y': 3952
        label:
          text: Kind2
          x: 3492
          'y': 3952
          offset_y: 35
        outline:
          - - 3272
            - 3892
          - - 3406
            - 3892
          - - 3413
            - 3742
          - - 3757
            - 3742
          - - 3760
            - 4153
          - - 3279
            - 4159
      - id: '7'
        icon:
          name: mdi:broom
          x: 3000
          'y': 4025
        label:
          text: Küche
          x: 3000
          'y': 4025
          offset_y: 35
        outline:
          - - 2898
            - 3885
          - - 2898
            - 3966
          - - 2921
            - 3966
          - - 2921
            - 4173
          - - 3075
            - 4173
          - - 3075
            - 3882
      - id: '8'
        icon:
          name: mdi:broom
          x: 3180
          'y': 4025
        label:
          text: Eingang
          x: 3180
          'y': 4025
          offset_y: 35
        outline:
          - - 3079
            - 4180
          - - 3269
            - 4183
          - - 3259
            - 3875
          - - 3092
            - 3879
      - id: '9'
        icon:
          name: mdi:broom
          x: 3065
          'y': 3727
        label:
          text: Flur
          x: 3065
          'y': 3727
          offset_y: 35
        outline:
          - - 2858
            - 3738
          - - 2861
            - 3875
          - - 3102
            - 3879
          - - 3269
            - 3892
          - - 3376
            - 3885
          - - 3373
            - 3738
          - - 3279
            - 3732
          - - 3236
            - 3732
          - - 3222
            - 3635
          - - 2865
            - 3628
          - - 2821
            - 3611
          - - 2738
            - 3608
          - - 2728
            - 3631
          - - 2721
            - 3735
      - id: '10'
        icon:
          name: mdi:broom
          x: 2577
          'y': 3700
        label:
          text: Bad
          x: 2577
          'y': 3700
          offset_y: 35
        outline:
          - - 2678
            - 3875
          - - 2678
            - 3735
          - - 2688
            - 3728
          - - 2721
            - 3728
          - - 2724
            - 3631
          - - 2470
            - 3631
          - - 2470
            - 3882
          - - 2678
            - 3875
      - id: '11'
        icon:
          name: mdi:broom
          x: 3325
          'y': 3430
        label:
          text: Essen
          x: 3325
          'y': 3430
          offset_y: 35
        outline:
          - - 3176
            - 3224
          - - 3179
            - 3631
          - - 3222
            - 3628
          - - 3236
            - 3728
          - - 3403
            - 3725
          - - 3523
            - 3702
          - - 3523
            - 3240
  - template: vacuum_clean_zone
  - template: vacuum_follow_path
  - template: vacuum_goto
  - template: vacuum_goto_predefined
    predefined_selections:
      - position:
          - 28006
          - 28036
        label:
          text: Küche
          x: 2990
          'y': 4000
          offset_y: 35
        icon:
          name: mdi:broom
          x: 2990
          'y': 4000
      - position:
          - 32143
          - 26284
        label:
          text: Sofa
          x: 3560
          'y': 3410
          offset_y: 35
        icon:
          name: mdi:sofa
          x: 3560
          'y': 3410
two_finger_pan: true
map_locked: true
append_icons: true
action_handler_id: vacuum_map_card
internal_variables:
  show_tiles: 'no'
icons:
  - icon: mdi:water-outline
    conditions:
      - entity: select.valetudo_notedunluckydove_water
        value: low
    tap_action:
      action: call-service
      service: select.select_next
      service_data:
        entity_id: select.valetudo_notedunluckydove_water
  - icon: mdi:water-opacity
    conditions:
      - entity: select.valetudo_notedunluckydove_water
        value: medium
    tap_action:
      action: call-service
      service: select.select_next
      service_data:
        entity_id: select.valetudo_notedunluckydove_water
  - icon: mdi:water
    conditions:
      - entity: select.valetudo_notedunluckydove_water
        value: high
    tap_action:
      action: call-service
      service: select.select_next
      service_data:
        entity_id: select.valetudo_notedunluckydove_water
  - icon: mdi:menu-up
    conditions:
      - internal_variable: show_tiles
        value: 'yes'
    tap_action:
      action: fire-dom-event
      xiaomi_vacuum_map_card:
        action_handler_id: vacuum_map_card
        action: internal_variable.set
        data:
          variable: show_tiles
          value: 'no'
  - icon: mdi:menu-down
    conditions:
      - internal_variable: show_tiles
        value_not: 'yes'
    tap_action:
      action: fire-dom-event
      xiaomi_vacuum_map_card:
        action_handler_id: vacuum_map_card
        action: internal_variable.set
        data:
          variable: show_tiles
          value: 'yes'
tiles:
  - icon: mdi:brush
    label: Hauptbürste
    entity: sensor.valetudo_notedunluckydove_main_brush
    multiplier: 0.01666667
    precision: 0
    unit: h
    tap_action:
      action: call-service
      service: button.press
      service_data: {}
      target:
        entity_id: button.valetudo_notedunluckydove_reset_main_brush_consumable
    conditions:
      - internal_variable: show_tiles
        value: 'yes'
  - icon: mdi:brush-outline
    label: Nebenbürste
    entity: sensor.valetudo_notedunluckydove_right_brush
    multiplier: 0.01666667
    precision: 0
    unit: h
    tap_action:
      action: call-service
      service: button.press
      service_data: {}
      target:
        entity_id: button.valetudo_notedunluckydove_reset_right_brush_consumable
    conditions:
      - internal_variable: show_tiles
        value: 'yes'
  - icon: mdi:air-filter
    label: Hauptfilter
    entity: sensor.valetudo_notedunluckydove_main_filter
    multiplier: 0.01666667
    precision: 0
    unit: h
    tap_action:
      action: call-service
      service: button.press
      service_data: {}
      target:
        entity_id: button.valetudo_notedunluckydove_reset_main_filter_consumable
    conditions:
      - internal_variable: show_tiles
        value: 'yes'
  - icon: mdi:leak
    label: Sensorreinigung
    entity: sensor.valetudo_notedunluckydove_sensor_cleaning
    multiplier: 0.01666667
    precision: 0
    unit: h
    tap_action:
      action: call-service
      service: button.press
      service_data: {}
      target:
        entity_id: button.valetudo_notedunluckydove_reset_sensor_cleaning_consumable
    conditions:
      - internal_variable: show_tiles
        value: 'yes'
  - icon: mdi:waves
    label: Wischmob
    entity: sensor.valetudo_notedunluckydove_mop
    multiplier: 0.01666667
    precision: 0
    unit: h
    tap_action:
      action: call-service
      service: button.press
      service_data: {}
      target:
        entity_id: button.valetudo_notedunluckydove_reset_mop_consumable
    conditions:
      - internal_variable: show_tiles
        value: 'yes'
  - icon: mdi:wiper-wash
    label: Reinigungsmittel
    entity: sensor.valetudo_notedunluckydove_dock_detergent
    tap_action:
      action: call-service
      service: button.press
      service_data: {}
      target:
        entity_id: button.valetudo_notedunluckydove_reset_dock_detergent_consumable
    conditions:
      - internal_variable: show_tiles
        value: 'yes'
  - icon: mdi:battery
    label: Batterie
    entity: sensor.valetudo_notedunluckydove_battery_level
    tap_action:
      action: none
    conditions:
      - internal_variable: show_tiles
        value: 'no'
  - icon: mdi:fan
    label: Saugkraft
    entity: select.valetudo_notedunluckydove_fan
    tap_action:
      action: none
    conditions:
      - internal_variable: show_tiles
        value: 'no'
  - icon: mdi:water
    label: Wassermenge
    entity: select.valetudo_notedunluckydove_water
    tap_action:
      action: none
    conditions:
      - internal_variable: show_tiles
        value: 'no'
title: Staubsauger
card_mod:
  style: >
    ha-card {
      --map-card-room-outline-line-color: rgba(0, 0, 0, 0);
      --map-card-room-outline-line-color-selected: rgba(0, 0, 0, 0);
      --map-card-room-label-color: white;
      --map-card-predefined-point-label-color: white;
      --map-card-predefined-point-label-color-selected; white;
      --map-card-primary-color: rgba(103,103,103,1);
      --map-card-zoomer-background: hsl(0,125,255);
      --map-card-secondary-color: rgba(190,190,190,1);
    }

    {% if ( (states("sensor.valetudo_notedunluckydove_main_brush")) | float(0) <
    1 or  (states("sensor.valetudo_notedunluckydove_right_brush")) | float(0) >
    1 or  (states("sensor.valetudo_notedunluckydove_main_filter")) | float(0) <
    1 or  (states("sensor.valetudo_notedunluckydove_sensor_cleaning")) |
    float(0) < 1 or  (states("sensor.valetudo_notedunluckydove_mop")) | float(0)
    < 1 or  (states("sensor.valetudo_notedunluckydove_dock_detergent")) |
    float(0) < 1 ) %}
      :host
        .icons-list > :nth-child(5) > :nth-child(1) > :nth-child(1) {
          background-color: rgba(255, 173, 0, 0.8);
        }
    {% endif %}

    {% if ( (states("sensor.valetudo_notedunluckydove_main_brush")) | float(0) > 0 ) %}
      :host
          .tile-wrapper:nth-child(1) {
            outline: 3px solid orange;
          } 
        }
    {% endif %}



    {#
        {% if (.icons-list > :nth-child(5) > :nth-child(1) > :nth-child(1).ha-icon.icon == "mdi:menu-down"  %}
          :host
            .tile-wrapper:nth-child(1) {
              outline: 3px solid orange;
            } 
        {% endif %}
    #}    

[PiotrMachowski]

The solution is to add tile_id to the config of main brush tile. Then you are able to use a tile id in CSS selector instead of its index.

Adjusted code

type: custom:xiaomi-vacuum-map-card
language: de
map_source:
  camera: camera.dreame_l10s_ultra_camera
  crop:
    bottom: 100
entity: vacuum.valetudo_notedunluckydove
vacuum_platform: default
calibration_source:
  camera: true
map_modes:
  - template: vacuum_clean_segment
    predefined_selections:
      - id: '1'
        icon:
          name: mdi:broom
          x: 2632
          'y': 3417
        label:
          text: Schlafen
          x: 2632
          'y': 3417
          offset_y: 35
        outline:
          - - 2470
            - 3215
          - - 2875
            - 3215
          - - 2875
            - 3620
          - - 2470
            - 3620
      - id: '2'
        icon:
          name: mdi:broom
          x: 3012
          'y': 3422
        label:
          text: Kind1
          x: 3012
          'y': 3422
          offset_y: 35
        outline:
          - - 2875
            - 3220
          - - 3150
            - 3220
          - - 3150
            - 3625
          - - 2875
            - 3625
      - id: '3'
        icon:
          name: mdi:broom
          x: 3637
          'y': 3430
        label:
          text: Wohnen
          x: 3637
          'y': 3430
          offset_y: 35
        outline:
          - - 3526
            - 3722
          - - 3760
            - 3718
          - - 3764
            - 3247
          - - 3526
            - 3244
      - id: '4'
        icon:
          name: mdi:broom
          x: 2770
          'y': 3805
        label:
          text: Klo
          x: 2770
          'y': 3805
          offset_y: 35
        outline:
          - - 2678
            - 3875
          - - 2678
            - 3738
          - - 2855
            - 3738
          - - 2858
            - 3875
      - id: '5'
        icon:
          name: mdi:broom
          x: 3492
          'y': 3952
        label:
          text: Kind2
          x: 3492
          'y': 3952
          offset_y: 35
        outline:
          - - 3272
            - 3892
          - - 3406
            - 3892
          - - 3413
            - 3742
          - - 3757
            - 3742
          - - 3760
            - 4153
          - - 3279
            - 4159
      - id: '7'
        icon:
          name: mdi:broom
          x: 3000
          'y': 4025
        label:
          text: Küche
          x: 3000
          'y': 4025
          offset_y: 35
        outline:
          - - 2898
            - 3885
          - - 2898
            - 3966
          - - 2921
            - 3966
          - - 2921
            - 4173
          - - 3075
            - 4173
          - - 3075
            - 3882
      - id: '8'
        icon:
          name: mdi:broom
          x: 3180
          'y': 4025
        label:
          text: Eingang
          x: 3180
          'y': 4025
          offset_y: 35
        outline:
          - - 3079
            - 4180
          - - 3269
            - 4183
          - - 3259
            - 3875
          - - 3092
            - 3879
      - id: '9'
        icon:
          name: mdi:broom
          x: 3065
          'y': 3727
        label:
          text: Flur
          x: 3065
          'y': 3727
          offset_y: 35
        outline:
          - - 2858
            - 3738
          - - 2861
            - 3875
          - - 3102
            - 3879
          - - 3269
            - 3892
          - - 3376
            - 3885
          - - 3373
            - 3738
          - - 3279
            - 3732
          - - 3236
            - 3732
          - - 3222
            - 3635
          - - 2865
            - 3628
          - - 2821
            - 3611
          - - 2738
            - 3608
          - - 2728
            - 3631
          - - 2721
            - 3735
      - id: '10'
        icon:
          name: mdi:broom
          x: 2577
          'y': 3700
        label:
          text: Bad
          x: 2577
          'y': 3700
          offset_y: 35
        outline:
          - - 2678
            - 3875
          - - 2678
            - 3735
          - - 2688
            - 3728
          - - 2721
            - 3728
          - - 2724
            - 3631
          - - 2470
            - 3631
          - - 2470
            - 3882
          - - 2678
            - 3875
      - id: '11'
        icon:
          name: mdi:broom
          x: 3325
          'y': 3430
        label:
          text: Essen
          x: 3325
          'y': 3430
          offset_y: 35
        outline:
          - - 3176
            - 3224
          - - 3179
            - 3631
          - - 3222
            - 3628
          - - 3236
            - 3728
          - - 3403
            - 3725
          - - 3523
            - 3702
          - - 3523
            - 3240
  - template: vacuum_clean_zone
  - template: vacuum_follow_path
  - template: vacuum_goto
  - template: vacuum_goto_predefined
    predefined_selections:
      - position:
          - 28006
          - 28036
        label:
          text: Küche
          x: 2990
          'y': 4000
          offset_y: 35
        icon:
          name: mdi:broom
          x: 2990
          'y': 4000
      - position:
          - 32143
          - 26284
        label:
          text: Sofa
          x: 3560
          'y': 3410
          offset_y: 35
        icon:
          name: mdi:sofa
          x: 3560
          'y': 3410
two_finger_pan: true
map_locked: true
append_icons: true
action_handler_id: vacuum_map_card
internal_variables:
  show_tiles: 'no'
icons:
  - icon: mdi:water-outline
    conditions:
      - entity: select.valetudo_notedunluckydove_water
        value: low
    tap_action:
      action: call-service
      service: select.select_next
      service_data:
        entity_id: select.valetudo_notedunluckydove_water
  - icon: mdi:water-opacity
    conditions:
      - entity: select.valetudo_notedunluckydove_water
        value: medium
    tap_action:
      action: call-service
      service: select.select_next
      service_data:
        entity_id: select.valetudo_notedunluckydove_water
  - icon: mdi:water
    conditions:
      - entity: select.valetudo_notedunluckydove_water
        value: high
    tap_action:
      action: call-service
      service: select.select_next
      service_data:
        entity_id: select.valetudo_notedunluckydove_water
  - icon: mdi:menu-up
    conditions:
      - internal_variable: show_tiles
        value: 'yes'
    tap_action:
      action: fire-dom-event
      xiaomi_vacuum_map_card:
        action_handler_id: vacuum_map_card
        action: internal_variable.set
        data:
          variable: show_tiles
          value: 'no'
  - icon: mdi:menu-down
    conditions:
      - internal_variable: show_tiles
        value_not: 'yes'
    tap_action:
      action: fire-dom-event
      xiaomi_vacuum_map_card:
        action_handler_id: vacuum_map_card
        action: internal_variable.set
        data:
          variable: show_tiles
          value: 'yes'
tiles:
  - icon: mdi:brush
    tile_id: main_brush
    label: Hauptbürste
    entity: sensor.valetudo_notedunluckydove_main_brush
    multiplier: 0.01666667
    precision: 0
    unit: h
    tap_action:
      action: call-service
      service: button.press
      service_data: {}
      target:
        entity_id: button.valetudo_notedunluckydove_reset_main_brush_consumable
    conditions:
      - internal_variable: show_tiles
        value: 'yes'
  - icon: mdi:brush-outline
    label: Nebenbürste
    entity: sensor.valetudo_notedunluckydove_right_brush
    multiplier: 0.01666667
    precision: 0
    unit: h
    tap_action:
      action: call-service
      service: button.press
      service_data: {}
      target:
        entity_id: button.valetudo_notedunluckydove_reset_right_brush_consumable
    conditions:
      - internal_variable: show_tiles
        value: 'yes'
  - icon: mdi:air-filter
    label: Hauptfilter
    entity: sensor.valetudo_notedunluckydove_main_filter
    multiplier: 0.01666667
    precision: 0
    unit: h
    tap_action:
      action: call-service
      service: button.press
      service_data: {}
      target:
        entity_id: button.valetudo_notedunluckydove_reset_main_filter_consumable
    conditions:
      - internal_variable: show_tiles
        value: 'yes'
  - icon: mdi:leak
    label: Sensorreinigung
    entity: sensor.valetudo_notedunluckydove_sensor_cleaning
    multiplier: 0.01666667
    precision: 0
    unit: h
    tap_action:
      action: call-service
      service: button.press
      service_data: {}
      target:
        entity_id: button.valetudo_notedunluckydove_reset_sensor_cleaning_consumable
    conditions:
      - internal_variable: show_tiles
        value: 'yes'
  - icon: mdi:waves
    label: Wischmob
    entity: sensor.valetudo_notedunluckydove_mop
    multiplier: 0.01666667
    precision: 0
    unit: h
    tap_action:
      action: call-service
      service: button.press
      service_data: {}
      target:
        entity_id: button.valetudo_notedunluckydove_reset_mop_consumable
    conditions:
      - internal_variable: show_tiles
        value: 'yes'
  - icon: mdi:wiper-wash
    label: Reinigungsmittel
    entity: sensor.valetudo_notedunluckydove_dock_detergent
    tap_action:
      action: call-service
      service: button.press
      service_data: {}
      target:
        entity_id: button.valetudo_notedunluckydove_reset_dock_detergent_consumable
    conditions:
      - internal_variable: show_tiles
        value: 'yes'
  - icon: mdi:battery
    label: Batterie
    entity: sensor.valetudo_notedunluckydove_battery_level
    tap_action:
      action: none
    conditions:
      - internal_variable: show_tiles
        value: 'no'
  - icon: mdi:fan
    label: Saugkraft
    entity: select.valetudo_notedunluckydove_fan
    tap_action:
      action: none
    conditions:
      - internal_variable: show_tiles
        value: 'no'
  - icon: mdi:water
    label: Wassermenge
    entity: select.valetudo_notedunluckydove_water
    tap_action:
      action: none
    conditions:
      - internal_variable: show_tiles
        value: 'no'
title: Staubsauger
card_mod:
  style: >
    ha-card {
      --map-card-room-outline-line-color: rgba(0, 0, 0, 0);
      --map-card-room-outline-line-color-selected: rgba(0, 0, 0, 0);
      --map-card-room-label-color: white;
      --map-card-predefined-point-label-color: white;
      --map-card-predefined-point-label-color-selected; white;
      --map-card-primary-color: rgba(103,103,103,1);
      --map-card-zoomer-background: hsl(0,125,255);
      --map-card-secondary-color: rgba(190,190,190,1);
    }

    {% if ( (states("sensor.valetudo_notedunluckydove_main_brush")) | float(0) <
    1 or  (states("sensor.valetudo_notedunluckydove_right_brush")) | float(0) >
    1 or  (states("sensor.valetudo_notedunluckydove_main_filter")) | float(0) <
    1 or  (states("sensor.valetudo_notedunluckydove_sensor_cleaning")) |
    float(0) < 1 or  (states("sensor.valetudo_notedunluckydove_mop")) | float(0)
    < 1 or  (states("sensor.valetudo_notedunluckydove_dock_detergent")) |
    float(0) < 1 ) %}
      :host
        .icons-list > :nth-child(5) > :nth-child(1) > :nth-child(1) {
          background-color: rgba(255, 173, 0, 0.8);
        }
    {% endif %}

    {% if ( (states("sensor.valetudo_notedunluckydove_main_brush")) | float(0) > 0 ) %}
      :host
          .tile-main_brush-wrapper {
            outline: 3px solid orange;
          } 
        }
    {% endif %}



    {#
        {% if (.icons-list > :nth-child(5) > :nth-child(1) > :nth-child(1).ha-icon.icon == "mdi:menu-down"  %}
          :host
            .tile-wrapper:nth-child(1) {
              outline: 3px solid orange;
            } 
        {% endif %}
    #}    

[M1scer]

Perfect, you are the best.

Thank you very much.

Maybe those tile_id could make the coloring of the menu_up and menu_down icon also easier.

Right now i am looking for the icon in this way:

      :host
        .icons-list > :nth-child(5) > :nth-child(1) > :nth-child(1) {
          background-color: rgba(255, 173, 0, 0.8);
        }

But that doesn't look like a professional solution.
Can I also assign a tile_id here and access it with some icon-menu_up_wrapper?

[PiotrMachowski]

Can I also assign a tile_id here and access it with some icon-menu_up_wrapper?

No, at this moment this feature is available only for tiles

[HellmannK]

Hi, is there a way to hide the room-label text? With using just the class room-label I wasn't able to achieve my goal. I'm thankful for any hint :)

[PiotrMachowski]

You just have to remove it from the config of the card

[snakedm]

Hi @PiotrMachowski! Great work!
How I can change the color of this element? background and icons colors.

Thanks a lot!

[PiotrMachowski]

It uses --map-card-secondary-color

[r0ckmn]

Hi averyone! thanks to developer and comunity for this card! I have a few issues, first af all, and as some already mentioned i have problems with scale, if I scale it to the wide of the card (blue rectangle) it proportionaly scales and goes out and overlaps with another cards at the bottom, I tryed card-mod, but it crops the card and all the controls are invisible and you have to scroll the content, not a solution, also I tryed some div. map-wrapper scale or something like that with very veired results (I'm dump in CSS, just copy-paste knowledge ahaha)
Also, i need to move the middle controll buttons to same row (yellow)
If anyone can help me with this two issues, I'll apreciate very much!

[charredchar]

I've been attempting to get some kind of outline or box around the room labels to help with readability in various situations as just a single color on the text itself doesn't always work. Unfortunately I don't know enough about CSS to do this on my own and I have yet to find any examples online that do this. Does anyone have any tips?

[PiotrMachowski]

I don't think it is possible at this moment - map overlay is done in SVG and it doesn't support adding backgrounds with styles

[Trteich]

Hi. Can anyone suggest how this area background can be changed?