Degree Symbol generates Invalid YAML syntax in ESPHome build

ESPHome
,
1

I started working with displays in ESPHome recently and I’m trying to display temperature and humidity and something struck me. It turns out that the degree symbol (°) is not valid YAML syntax and generates this error:

INFO Reading configuration /config/esphome/eatery.yaml...
ERROR Error while reading config: Invalid YAML syntax. Please see YAML syntax reference or use an online YAML syntax validator:

Error reading file /config/esphome/eatery.yaml: 'utf-8' codec can't decode byte 0xb0 in position 2691: invalid start byte

This shows up when I have a degree symbol for displaying the temperature in degree’s Fahrenheit:

display:
  - platform: ssd1306_i2c
    model: "SH1106 128x64"
    address: 0x3C
    id: my_display
    pages:
      - id: blank_page
        lambda: |-
          it.print(0, 0, id(my_small_font), "");
      - id: content_page
        lambda: |-
          it.line(0, 0, 127, 0);
          it.line(0, 0, 0, 63);
          it.line(127, 0, 127, 63);
          it.line(0, 63, 127, 63);
          it.printf(0, 10, id(my_small_font), "The Eatery!   %.0f°F   %.0f%%", id(${name}_temperature).state, id(${name}_humidity).state);
          it.printf(5, 25, id(my_big_font), "Jade: %.0f%%", id(jade_plant_moisture).state);
          it.printf(5, 50, id(my_big_font), "Ugly: %.0f%%", id(ugly_plant_moisture).state);

I’ve tried all of these degree symbols and none of them work.
alt-0176 – °
alt-167 – º
alt-248 – °

However, something very interesting is that when I validate an ESPHome yaml file with a display and a font it generates a list of “supported characters” and the last character in the list is a degree symbol!!

....
font:
- file: comic.ttf
  id: my_big_font
  size: 22
  glyphs:
  - ' '
  - '!'
  - '"'
  - '%'
  - (
  - )
  - +
  - ','
  - '-'
  - .
  - '0'
  - '1'
  - '2'
  - '3'
  - '4'
  - '5'
  - '6'
  - '7'
  - '8'
  - '9'
  - ':'
  - A
  - B
  - C
  - D
  - E
  - F
  - G
  - H
  - I
  - J
  - K
  - L
  - M
  - N
  - O
  - P
  - Q
  - R
  - S
  - T
  - U
  - V
  - W
  - X
  - Y
  - Z
  - _
  - a
  - b
  - c
  - d
  - e
  - f
  - g
  - h
  - i
  - j
  - k
  - l
  - m
  - n
  - o
  - p
  - q
  - r
  - s
  - t
  - u
  - v
  - w
  - x
  - y
  - z
  - °
- file: comic.ttf
  id: my_small_font
  size: 10
  glyphs:
  - ' '
  - '!'
  - '"'
  - '%'
  - (
  - )
  - +
  - ','
  - '-'
  - .
  - '0'
  - '1'
  - '2'
  - '3'
  - '4'
  - '5'
  - '6'
  - '7'
  - '8'
  - '9'
  - ':'
  - A
  - B
  - C
  - D
  - E
  - F
  - G
  - H
  - I
  - J
  - K
  - L
  - M
  - N
  - O
  - P
  - Q
  - R
  - S
  - T
  - U
  - V
  - W
  - X
  - Y
  - Z
  - _
  - a
  - b
  - c
  - d
  - e
  - f
  - g
  - h
  - i
  - j
  - k
  - l
  - m
  - n
  - o
  - p
  - q
  - r
  - s
  - t
  - u
  - v
  - w
  - x
  - y
  - z
  - °
display:
- platform: ssd1306_i2c
  model: SH1106_128X64
  address: 0x3C
  id: my_display
  pages:
  - id: blank_page
    lambda: !lambda |-
      it.print(0, 0, id(my_small_font), "");
  - id: content_page
    lambda: !lambda |-
      it.line(0, 0, 127, 0);
      it.line(0, 0, 0, 63);
      it.line(127, 0, 127, 63);
      it.line(0, 63, 127, 63);
      it.printf(0, 10, id(my_small_font), "The Eatery!   %.0f'F   %.0f%%", id(eatery_temperature).state, id(eatery_humidity).state);
      it.printf(5, 25, id(my_big_font), "Jade: %.0f%%", id(jade_plant_moisture).state);
      it.printf(5, 50, id(my_big_font), "Ugly: %.0f%%", id(ugly_plant_moisture).state);
  brightness: 1.0
  update_interval: 1s

Is there an ESPHome-safe way to use special symbols like that; similar to how HTML has & and other characters that would mess up the interpreter? I’d really like to use the degree symbol, I recently got a weather station setup and it tells me wind direction, I’d like to define it in degrees of direction but it chokes on that symbol too.

Thanks,
-Greg

2

I think I copy/pasted from here https://esphome.io/cookbook/display_time_temp_oled.html but that is hardly a general solution.

3

Hi @nickrout, I just tried that out and it still complains when I do the Validate:

INFO Reading configuration /config/esphome/eatery.yaml...
ERROR Error while reading config: Invalid YAML syntax. Please see YAML syntax reference or use an online YAML syntax validator:

Error reading file /config/esphome/eatery.yaml: 'utf-8' codec can't decode byte 0xb0 in position 790: invalid start byte

I also tried copying the output of the font character list on successful validation and that didn’t work either…

4

In my code, which work here, I’ve put all characters between quote:

glyphs:
  -'°'
5

Thanks @makai, I just tried this and it still doesn’t work for me. Whether I use single or double quotes. Are you running ESPHome version 1.14.5? When I try to compile or validate a file that has a degree symbol in it, it gives me the Invalid YAML syntax.

Compiling and validating with this:

      unit_of_measurement: "F"

works great. If I change it to either of these, it doesn’t work:

      unit_of_measurement: '°F'

or

      unit_of_measurement: "°F"

Generating this error message:

INFO Reading configuration /config/esphome/eatery.yaml...
ERROR Error while reading config: Invalid YAML syntax. Please see YAML syntax reference or use an online YAML syntax validator:

Error reading file /config/esphome/eatery.yaml: 'utf-8' codec can't decode byte 0xb0 in position 790: invalid start byte

Also, if I try to edit the file from the ESPHome web interface, it shows me this in the window:

image
image728×304 12.3 KB

If I remove that single degree symbol, the whole thing works great!

6

Strange. This works fine for me with ESPHome 1.14.3 and 1.14.5:

sensor:
  - platform: dallas
    address: 0x................
    name: "Hall temperature"
    unit_of_measurement: "°C"
    icon: "mdi:thermometer"

and also in a lambda:

display:
  - platform: ssd1306_i2c
    model: "SH1106 128x64"
    address: 0x3C
    lambda: |-
      // print the temperature
      it.printf(5, 16, id(big_font), "%.1f°C", id(the_temp).state);

Those are generated from a Linux system, but I believe it’s the same character as Alt-0176 would produce. Perhaps copy-and-paste that one, or the one in the glyph list you reference?

The warning about 0xb0 suggests that Windows is storing is at something other than UTF-8, perhaps?

7

Ah ha!! I figured it out after @Troon’s suggestion about the encoding.

I’m using Windows and Notepad++ to generate the files. It was saving them as ANSI so those characters weren’t encoded as UTF-8.

Thank you!!
-Greg

1 Like