Can't display Rooms names or Texts

[webjib]

Checklist

• [X] I have updated the integration to the latest version available
• [X] I have checked if the problem is already reported

The problem

I can't get to display either rooms names or even texts with my Dreame D9. Rooms names are correctly retrieved (I've checked attributes and all ik OK), but there's nothing on the map.

According to Pillow docs, using load_default() of ImageFont should use a default font is nothing is specified. This is what is doing the component: font = ImageFont.load_default()

But maybe no font can be used on Raspberry HASS (HomeAssistant OS 8)?

About the "texts" function, I've also tried using a font like that but it's not working:

texts:
  - text: "My Room"
    x: 50
    y: 50
    font: "/local/fonts/Arial.ttf"
    font_size: 25

What version of am integration has described problem?

v2.2.0

What was the last working version of an integration?

No response

What vacuum model do you have problems with?

Dreame D9

What version of Home Assistant do you use?

Home Assistant Core 2022.6.4

What type of installation are you running?

Home Assistant OS

Camera's configuration

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
    country: "de"
    draw: ["all"]
    map_transformation:
      scale: 3
      rotate: 90
      trim: 
        left: 27
        top: 21
        bottom: 3
    texts:
      - text: "My Room"
        x: 50
        y: 50
        font: "/local/fonts/Arial.ttf"
        font_size: 25

Errors shown in the HA logs (if applicable)

No response

Additional information

No response

[PiotrMachowski]

Room names are rendered when each label has a retrieved position, as far as I remember it works only for some Viomi models.

Your type of installation unfortunately doesn't seem to have any built-in fonts and I haven't had much success with loading ones from files as well.

Duplicate of #20 #75

[webjib]

Thanks for the clarification! As each room has coordinates, I thought it would be possible to calculate the middle of the room to position the label. In my setup, the lack of font seems to be the main issue.

rooms:
  '1':
    x0: -4500
    y0: -1250
    x1: 350
    y1: 1350
    name: Bureau
  '2':
    x0: -5500
    y0: 2000
    x1: 350
    y1: 7100
    name: Salon
  '3':
    x0: -4450
    y0: -4150
    x1: 350
    y1: -1050
    name: Chambre
  '4':
    x0: -4500
    y0: 1450
    x1: -1800
    y1: 3600
    name: SDB
  '5':
    x0: -4550
    y0: 0
    x1: -2900
    y1: 1400
    name: WC
  '6':
    x0: -6350
    y0: -4150
    x1: -4400
    y1: 3750
    name: Couloir

[PiotrMachowski]

These are coordinates of bounding box for given room. I didn't want to draw labels using these values because rooms often have irregular shapes and in these cases labels will be outside them.

This config should use default font, can you check it out? (By the way, as far as I remember texts don't support map rotation...)

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
    country: "de"
    draw: ["all"]
    map_transformation:
      scale: 3
      rotate: 90
      trim: 
        left: 27
        top: 21
        bottom: 3
    texts:
      - text: "Bureau"
        x: -2075
        y: 50
      - text: "Salon"
        x: -2575
        y: 4550
      - text: "Chambre"
        x: -2050
        y: -2600
      - text: "SDB"
        x: -3150
        y: 2525
      - text: "WC"
        x: -3725
        y: 700
      - text: "Couloir"
        x: -5375
        y: -200

[webjib]

Either with rotation '0' or rotation '90', your configuration is not showing any text. I think you're right, the ImageFont can't load any font on my configuration.

So, I've decided to display text using pure JS/CSS/HTML.

[PiotrMachowski]

Ouch, my bad! Values for x and y should not be in vacuum's coordinates, but in percents: (x=50, y=50) -> centered, (x=25, y=25) -> upper left corner.

You can also overlay texts in the Map Card

[webjib]

This is what I thought, but that doesn't work either. I'm using a custom card derived from Vacuum-Card, but I have to say that you did a wonderful job with the Map Card!