Problems with UTF8 characters as text value

[dreimer1986]

Describe the bug
I created a automation that portraits my current blood sugar values, days left until the sensor is to be replaced and an tendency of the sugar value. All works fine except the tendency as it uses UTF-8 based arrows that result in a ⮽ on the Tag. (see photo)

To Reproduce
This is the automation:

alias: Zucker anzeigen
description: ""
triggers:
  - trigger: time_pattern
    minutes: /10
conditions:
  - condition: time
    after: "06:00:00"
    before: "02:00:00"
actions:
  - action: open_epaper_link.drawcustom
    target:
      device_id:
        - d289b497b44e2d5a8458e1f8bb8bf698
    data:
      rotate: 0
      ttl: 60
      dry-run: false
      background: white
      payload:
        - type: rectangle
          x_start: 1
          x_end: 294
          y_start: 40
          y_end: 110
          width: 1
          fill: white
          outline: black
        - type: text
          value: >-
            {% if state_attr('sensor.daniel_reimer_glucose_level','icon') ==
            "mdi:arrow-down-thick" %}
              Zucker: {{ states('sensor.daniel_reimer_glucose_level') }} mg/dl 🢃
            {% elif state_attr('sensor.daniel_reimer_glucose_level','icon') ==
            "mdi:arrow-bottom-right-thick" %}
              Zucker: {{ states('sensor.daniel_reimer_glucose_level') }} mg/dl 🢆
            {% elif state_attr('sensor.daniel_reimer_glucose_level','icon') ==
            "mdi:arrow-right-thick" %}
              Zucker: {{ states('sensor.daniel_reimer_glucose_level') }} mg/dl 🢂
            {% elif state_attr('sensor.daniel_reimer_glucose_level','icon') ==
            "mdi:arrow-top-right-thick" %}
              Zucker: {{ states('sensor.daniel_reimer_glucose_level') }} mg/dl 🢅
            {% elif state_attr('sensor.daniel_reimer_glucose_level','icon') ==
            "mdi:arrow-up-thick" %}
              Zucker: {{ states('sensor.daniel_reimer_glucose_level') }} mg/dl 🢁
            {% else %}
              Zucker: {{ states('sensor.daniel_reimer_glucose_level') }} mg/dl ⮽
            {% endif %}
          x: 10
          "y": 50
          font: ppb.ttf
          size: 28
          color: |-
            {% if states('sensor.daniel_reimer_glucose_level')|int <= 70 %}
              accent
            {% elif states('sensor.daniel_reimer_glucose_level')|int >= 190 %}
              accent
            {% else %}
              black
            {% endif %}
        - type: text
          value: >-
            Ablauf: {{ (states('sensor.daniel_reimer_sensor_expiry')|as_datetime
            - now()).days }} {{ ("Tage" if
            (states('sensor.daniel_reimer_sensor_expiry')|as_datetime -
            now()).days > 1 else "Tag") }}
          x: 10
          "y": 80
          font: ppb.ttf
          size: 28
          color: >-
            {% if (states('sensor.daniel_reimer_sensor_expiry')|as_datetime -
            now()).days <= 3 %}
              accent
            {% else %}
              black
            {% endif %}
        - type: text
          value: "Status von: {{ states('sensor.time') | string }} Uhr"
          font: ppb.ttf
          x: 296
          "y": 152
          size: 10
          color: black
          anchor: rb
mode: single

Expected behavior
Showing the arrows and no ⮽ instead. And yes, I replaced the ⮽ in the else part and it still is shown, so it's no problem on my if else endif.

Screenshots

Additional context
I guess it's a font problem? Maybe we need a more powerful font here... If some arrows are a problem, then I wonder what CJK glyphs will do

EDIT: I tried DejaVuSans-Bold and SourceSansPro-Bold instead and both have these arrows according to LibreOffice and my source code showing fine there. So... The problem is not just the font.

[mmeidl78]

Also got the same problem while showing my calendar entrys from the google calendar. Programmed a little workaround that deletes these ugly square-placeholders but emojis and some german characters like ä will not be shown correctly while ö is shown. The ttf-font has the öäü etc. included but the display doesn't show them.
So I believe it seems to be a problem with

• emojis
• utf-8 characters like arrows etc.
• german characters like ä

[g4bri3lDev]

I just tested those symbols with multiple fonts, and none of those seemed to support it

- type: text
  value: ppb 🢃 🢆 🢂 🢅 🢁 ⮽ ä ü ö
  x: 10
  y: 10
  font: ppb.ttf
- type: text
  value: rbm 🢃 🢆 🢂 🢅 🢁 ⮽ ä ü ö
  x: 10
  y: 30
  font: rbm.ttf
- type: text
  value: GothamRnd 🢃 🢆 🢂 🢅 🢁 ⮽ ä ü ö
  x: 10
  y: 50
  font: GothamRnd-Bold.ttf
- type: text
  value: SpaceMono 🢃 🢆 🢂 🢅 🢁 ⮽ ä ü ö
  x: 10
  y: 70
  font: SpaceMono-Bold.ttf
- type: text
  value: ClearSans 🢃 🢆 🢂 🢅 🢁 ⮽ ä ü ö
  x: 10
  y: 90
  font: ClearSans-Bold.ttf
- type: text
  value: DejaVu 🢃 🢆 🢂 🢅 🢁 ⮽ ä ü ö
  x: 10
  y: 110
  font: dejavu-sans.bold.ttf
- type: text
  value: SF-Pro 🢃 🢆 🢂 🢅 🢁 ⮽ ä ü ö
  x: 10
  y: 130
  font: SF-Pro-Rounded-Bold.ttf
- type: text
  value: Unifont 🢃 🢆 🢂 🢅 🢁 ⮽ ä ü ö
  x: 10
  y: 150
  font: unifont-16.0.03.ttf

So it seems to be a font problem (According to this Website only some obscure paid fonts seem to include those symbols).
The "solution" would be to use other arrow symbols that have more support.

As for german umlauts, those (should) work with drawcustom. If by google calendar you mean the content type that would be an issue for the main OEPL repo.

[dreimer1986]

I noticed a feature of Windows and most likely Linux called Font Substitution... If a font does not have a glyph, a fallback is used as it seems. So my claim with all these fonts having the arrows most likely is completely wrong indeed ... Will look into the available arrows later today

[mmeidl78]

Maybe the arrows are shown from the wingings font with a lot of special characters.

As for the german umlauts I think you are right. It must be something with my automation that makes this problem. The trash-calendar is shown correctly and here we have "Biomüll" for example that shows the ü without any problems (same font). Gonna ask chatgpt if I can do something with the umlauts and my google calendar script.

[mmeidl78]

BTW: I've uploaded wingding.ttf into my home assistant and used the following script:

    - type: text
      value: "èåâÜðòÁÁ"
      font: ../../media/wingding.ttf
      x: 5
      "y": 5
      size: 35
      color: gray

This should show a few different arrows but it only shows squares ...

(The german umlauts seem to work fine - so it must be something with my google calendar script.)

[dreimer1986]

The question is, if you copied that selection into your script or used the UTF8 arrows there. WingDings most likely is not really UTF8 compliant as its just a collection of symbols. That's what I wanna go and try at home later. Checking "Zeichentabelle" for arrows in the default fonts and then copy them out of "Zeichenauswahl:"

[mmeidl78]

I've used value: "èåâÜðòÁÁ for the arrows. That's what I would normally do for example in a word-document. When you change the font to something else you get those letters. If you change it back to wingding it shows the arrows.

[dreimer1986]

I think I found a font to test. But not from work. Later... And if things fail, I will use plan B. Use the MDI Icon instead.

[dreimer1986]

OK, as this is no real bug from the integration, I bypassed it in a nice way.

alias: Zucker anzeigen
description: ""
triggers:
  - trigger: time_pattern
    minutes: /30
conditions:
  - condition: time
    after: "06:00:00"
    before: "02:00:00"
actions:
  - action: open_epaper_link.drawcustom
    target:
      device_id:
        - d289b497b44e2d5a8458e1f8bb8bf698
    data:
      ttl: 86400
      background: white
      dither: 1
      rotate: 0
      dry-run: false
      payload:
        - type: rectangle
          x_start: 1
          x_end: 294
          y_start: 40
          y_end: 110
          width: 1
          fill: white
          outline: black
        - type: text
          value: "Zucker: {{ states('sensor.daniel_reimer_glucose_level') }} mg/dl"
          x: 10
          "y": 50
          font: ppb.ttf
          size: 28
          color: >-
            {% if states('sensor.daniel_reimer_glucose_level')|int <=
            state_attr('sensor.daniel_reimer_glucose_level','target_low_mg_dl')
            %}
              accent
            {% elif states('sensor.daniel_reimer_glucose_level')|int >=
            state_attr('sensor.daniel_reimer_glucose_level','target_high_mg_dl')
            %}
              accent
            {% else %}
              black
            {% endif %}
        - type: icon
          value: "{{ state_attr('sensor.daniel_reimer_glucose_level','icon') }}"
          x: 266
          "y": 50
          size: 28
          color: >-
            {% if states('sensor.daniel_reimer_glucose_level')|int <=
            state_attr('sensor.daniel_reimer_glucose_level','target_low_mg_dl')
            %}
              accent
            {% elif states('sensor.daniel_reimer_glucose_level')|int >=
            state_attr('sensor.daniel_reimer_glucose_level','target_high_mg_dl')
            %}
              accent
            {% else %}
              black
            {% endif %}
        - type: text
          value: >-
            Ablauf: {{ (states('sensor.daniel_reimer_sensor_expiry')|as_datetime
            - now()).days }} {{ ("Tage" if
            (states('sensor.daniel_reimer_sensor_expiry')|as_datetime -
            now()).days > 1 else "Tag") }}
          x: 10
          "y": 80
          font: ppb.ttf
          size: 28
          color: >-
            {% if (states('sensor.daniel_reimer_sensor_expiry')|as_datetime -
            now()).days <= 3 %}
              accent
            {% else %}
              black
            {% endif %}
        - type: text
          value: >-
            Sensorwert Alter: {{as_datetime(as_timestamp(now()) -
            as_timestamp(strptime(state_attr('sensor.daniel_reimer_glucose_level',
            'value_timestamp'), '%d/%m/%Y %I:%M:%S %p'))).minute}} Minuten
          font: ppb.ttf
          x: 10
          "y": 152
          size: 10
          color: black
          anchor: lb
        - type: text
          value: "Status von: {{ states('sensor.time') | string }} Uhr"
          font: ppb.ttf
          x: 296
          "y": 152
          size: 10
          color: black
          anchor: rb
mode: single