Display materialdesign icons on ESPHome attached to screen

ESPHome
1

I want to make a weather station out of a ESP32 with attached e-paper screen. So I will get a weather forecast from HA and depending on what the forecast is, I need to display a different icon. I could download all the possible pictures, include them all in the .yaml definition and in the lambda write a big if statement to select the right image.
It seems to me that the MaterialDesign icons web font should be able to do the same but in a smaller, lighter package. So if I include the .ttf webfont, how can I select icons from it inside a lambda?
I’ve tried things like:

it.printf(200, 100, id(mdfont), "󰙃");
it.printf(200, 200, id(mdfont), "mdi-face");
it.printf(200, 250, id(mdfont), "F0643");

with this font defined:

font:
  - file: "fonts/MaterialIcons-Regular.ttf"
    id: mdfont
    size: 40

The first definition is done by copying the icon directly from the materialdesign website.
the second two are id’s on that website. The first one cause the ESPHome to not run. The other two give open squares on the display.

1 Like
2

It’s just a ordinary font from the good old times representing the Alphabet and special Characters. You should give it a try with A, B, C, a, ..

The quick brown fox…

image
image740×23 5.75 KB

3

This is my code from my ESPhome yaml.
First I only select icons that I will use, this to save on memory (and it’s more easy to copy/paste when needed). All those squares are just copy/paste from icons when font is opened on my computer.

  - file: 'fonts/materialdesignicons-webfont.ttf'
    id: icon_font_20
    size: 20
    glyphs: [
      "", # mdi-thermometer
      "", # mdi-water-percent
      "ﴟ" # mdi-air-filter
      ]

  - file: 'fonts/materialdesignicons-webfont.ttf'
    id: icon_font_25
    size: 25
    glyphs: [
      '', # mdi-thermometer
      '', # mdi-water-percent
      "ﴟ", # mdi-air-filter
            # Alert
      "", # mdi-alert-outline
      # Weather
      "", # mdi-weather-sunny
      "", # mdi-weather-night
      "", # mdi-weather-cloudy
      "", # mdi-weather-pouring
      "", # mdi-weather-snowy-rainy
      "ｓ", # mdi-weather-snowy-heavy
      "", # mdi-weather-windy-variant
      "", # mdi-weather-fog
      "", # mdi-weather-partly-cloudy
      "ｎ" # mdi-weather-night-partly-cloudy
      ]

  - file: 'fonts/materialdesignicons-webfont.ttf'
    id: icon_font_30
    size: 30
    glyphs: [
      "", # mdi-thermometer
      "", # mdi-water-percent
      "ﵜ", # mdi-home-floor-1
      "ﶮ" # mdi-home-floor-0
      ]

  - file: 'fonts/materialdesignicons-webfont.ttf'
    id: icon_font_35
    size: 35
    glyphs: [
      '', # mdi-thermometer
      '' # mdi-water-percent
      ]

  - file: 'fonts/materialdesignicons-webfont.ttf'
    id: icon_font_40
    size: 40
    glyphs: [
      '', # mdi-thermometer
      '' # mdi-water-percent
      ]

Then in lambda:

it.printf(10, 84, id(icon_font_35), TextAlign::BASELINE_LEFT, ""); 
it.printf(120, 80, id(icon_font_40), TextAlign::BASELINE_LEFT, ""); 

if (id(weather_icon).has_state()) {
    std::map<std::string, std::string> weather_state { 
        { "clear-day", "" },             // mdi:weather-sunny
        { "clear-night", "" },           // mdi:weather-night
        { "cloudy", "" },                // mdi:weather-cloudy
        { "rain", "" },                  // mdi:weather-pouring
        { "sleet", "" },                 // mdi:weather-snowy-rainy
        { "snow", "ｓ" },                  // mdi:weather-snowy-heavy
        { "wind", "" },                  // mdi:weather-windy-variant
        { "fog", "" },                   // mdi:weather-fog
        { "partly-cloudy-day", "" },     // mdi:weather-partly-cloudy
        { "partly-cloudy-night", "ｎ" }    // mdi:weather-night-partly-cloudy
    };
              
    if (time < 1900) {
        it.printf(20, 320, id(icon_font_25), TextAlign::BASELINE_LEFT, weather_state[id(weather_icon).state.c_str()].c_str());
    } else {
        it.printf(20, 320, id(icon_font_25), TextAlign::BASELINE_LEFT, weather_state[id(weather_icon_1).state.c_str()].c_str());
    }
}

where weather_icon is Dark Sky icon for today and weather_icon_1 for tomorrow:

text_sensor:
  - platform: homeassistant
    name: "Today Weather Icon"
    entity_id: sensor.dark_sky_icon_0d
    id: weather_icon
    internal: true
  - platform: homeassistant
    name: "Tomorrow Weather Icon"
    entity_id: sensor.dark_sky_icon_1d
    id: weather_icon_1
    internal: true
15 Likes
4

Thanks for your answers!
Is this the webfont file you are using? http://materialdesignicons.com/cdn/5.3.45/fonts/materialdesignicons-webfont.ttf
When I open it up I only get a very limited subset of characters to copy:

image
image792×216 72.4 KB
so how do I select the rest?

1 Like
5

Yes it is this font!

Are you using MacOS?
If yes, select the “grid icon” on the upper left corner of the FontBook app to display all characters
Capture d’écran 2020-05-28 à 11.46.23

1 Like
6

Great, thanks! So here is a quick summary for future people:
find the latest webfont by going to https://materialdesignicons.com/ and click the blue download at the top right.
Open it up with font book on a mac and after selecting the font use the grid icon to see all the icons available.
Go to this page http://materialdesignicons.com/cdn/5.3.45/ to see an overview of all the icons and use search to find the icon your interested in. Look at the bytecode.
image
In this case I am looking for F0E7D and now go back to font book, hover over a icon and you will see the current font byte code. Now you know if you need to scroll up or down to find the icon you are looking for. (The order is hexadecimal right to left so 0,1…9,A,B,C,D,E,F)

image
image1092×656 75.8 KB

Once you find the one you need, copy it from the font-book and paste it into ESPHome to include it in your display.

7 Likes
7

For everybody who is searching “how can I find the icons under Windows 10 without font book”

In word: Insert -> Symboles -> Material Desing Icons
grafik

Under “Zeichencode” (English: character code (?! don`t know it is correct)) you can use the same Fxxxx from Material Design.

It should be possible in Google Docs with the add-on “Extensis Fonts”

6 Likes
8

Ok, I tried the code for me, but I don’t get it working…

display:
  - platform: ssd1306_i2c
    model: "SSD1306 128x32"
    reset_pin: D0
    address: 0x3C
    lambda: |-    
      if (id(icon_ow).has_state()) {
          std::map<std::string, std::string> weather_state { 
              { "rainy", "󰖗"},             // mdi-weather-rainy
              { "cloudy", "󰖕"},           // mdi-weather-cloudy
          };
              
            it.printf(5, 5, id(font_icon), weather_state[id(icon_ow).state.c_str()].c_str());
      }

font:  
  - file: "materialdesignicons-webfont.ttf"
    id: font_icon
    size: 12
    glyphs: [
      "󰖗", # mdi-weather-rainy
      "󰖕", # mdi-weather-cloudy
    ]

sensor:
  - platform: homeassistant
    id: icon_ow
    entity_id:  weather.openweathermap

error:
src/main.cpp: In lambda function:
src/main.cpp:405:68: error: request for member 'c_str' in 'icon_ow->esphome::homeassistant::HomeassistantSensor::<anonymous>.esphome::sensor::Sensor::state', which is of non-class type 'float'
           it.printf(5, 5, font_icon, weather_state[icon_ow->state.c_str()].c_str());
                                                                    ^

Thanks for the help!

9

It is because of

sensor:
  - platform: homeassistant
    id: icon_ow
    entity_id:  weather.openweathermap

This sensor seems not to return a string (icon name?) but return a float.

Could you copy from dev tools > state the current state for weather.openweathermap?

10

Of course:

This is the yaml 
temperature: 13.8
humidity: 93
pressure: 1016
wind_bearing: 240
wind_speed: 11.16
attribution: Data provided by OpenWeatherMap
forecast:
  - datetime: 1599296400000
    temperature: 13.9
    precipitation: 1.7
    condition: rainy
  - datetime: 1599307200000
    temperature: 13.8
    precipitation: 0.2
    condition: rainy
  - datetime: 1599318000000
    temperature: 16
    precipitation: 0.8
    condition: rainy
  - datetime: 1599328800000
    temperature: 13.7
    precipitation: 0.3
    condition: rainy
  - datetime: 1599339600000
    temperature: 12.1
    precipitation: null
    condition: cloudy
  - datetime: 1599350400000
    temperature: 10.3
    precipitation: null
    condition: cloudy
  - datetime: 1599361200000
    temperature: 9.4
    precipitation: null
    condition: sunny
  - datetime: 1599372000000
    temperature: 10.2
    precipitation: null
    condition: sunny
  - datetime: 1599382800000
    temperature: 15
    precipitation: null
    condition: sunny
  - datetime: 1599393600000
    temperature: 17.6
    precipitation: 0.2
    condition: rainy
  - datetime: 1599404400000
    temperature: 17.6
    precipitation: 0.2
    condition: rainy
  - datetime: 1599415200000
    temperature: 13.2
    precipitation: null
    condition: partlycloudy
  - datetime: 1599426000000
    temperature: 11.6
    precipitation: null
    condition: cloudy
  - datetime: 1599436800000
    temperature: 10.2
    precipitation: null
    condition: cloudy
  - datetime: 1599447600000
    temperature: 9.1
    precipitation: null
    condition: sunny
  - datetime: 1599458400000
    temperature: 9.9
    precipitation: null
    condition: sunny
  - datetime: 1599469200000
    temperature: 14.9
    precipitation: null
    condition: sunny
  - datetime: 1599480000000
    temperature: 16.6
    precipitation: null
    condition: partlycloudy
  - datetime: 1599490800000
    temperature: 17.3
    precipitation: null
    condition: cloudy
  - datetime: 1599501600000
    temperature: 13.3
    precipitation: null
    condition: partlycloudy
  - datetime: 1599512400000
    temperature: 11.9
    precipitation: null
    condition: partlycloudy
  - datetime: 1599523200000
    temperature: 11.6
    precipitation: null
    condition: partlycloudy
  - datetime: 1599534000000
    temperature: 11.5
    precipitation: null
    condition: cloudy
  - datetime: 1599544800000
    temperature: 12.4
    precipitation: null
    condition: cloudy
  - datetime: 1599555600000
    temperature: 17.6
    precipitation: null
    condition: cloudy
  - datetime: 1599566400000
    temperature: 21.4
    precipitation: null
    condition: cloudy
  - datetime: 1599577200000
    temperature: 21.9
    precipitation: null
    condition: sunny
  - datetime: 1599588000000
    temperature: 17.8
    precipitation: null
    condition: partlycloudy
  - datetime: 1599598800000
    temperature: 17.5
    precipitation: null
    condition: cloudy
  - datetime: 1599609600000
    temperature: 16.3
    precipitation: null
    condition: cloudy
  - datetime: 1599620400000
    temperature: 15.4
    precipitation: null
    condition: partlycloudy
  - datetime: 1599631200000
    temperature: 16.3
    precipitation: null
    condition: cloudy
  - datetime: 1599642000000
    temperature: 20.9
    precipitation: null
    condition: partlycloudy
  - datetime: 1599652800000
    temperature: 23.6
    precipitation: null
    condition: sunny
  - datetime: 1599663600000
    temperature: 22.1
    precipitation: null
    condition: partlycloudy
  - datetime: 1599674400000
    temperature: 18.2
    precipitation: 0.3
    condition: rainy
  - datetime: 1599685200000
    temperature: 14.6
    precipitation: 0.7
    condition: rainy
  - datetime: 1599696000000
    temperature: 12.1
    precipitation: null
    condition: partlycloudy
  - datetime: 1599706800000
    temperature: 11.4
    precipitation: null
    condition: sunny
  - datetime: 1599717600000
    temperature: 11.8
    precipitation: null
    condition: partlycloudy
friendly_name: OpenWeatherMap

grafik
grafik718×437 30.4 KB

grafik

hm, I created a sensor template with only the state.

        weather_icon:
          friendly_name: "Weather Icon"
          value_template: "{{ states('weather.openweathermap') }}"

sensor:
  - platform: homeassistant
    id: icon_ow
    entity_id:  sensor.weather_icon

src/main.cpp:405:68: error: request for member 'c_str' in 'icon_ow->esphome::homeassistant::HomeassistantSensor::<anonymous>.esphome::sensor::Sensor::state', which is of non-class type 'float'
           it.printf(30, 5, font_icon, weather_state[icon_ow->state.c_str()].c_str());

But the same error with typ casting…

11

Yeah and again, reading the docs correct, helped…

Note

This component is only for numeral states. If you want to import arbitrary text states from Home Assistant, use the Home Assistant Text Sensor.

text_sensor:
  - platform: homeassistant
    id: icon_ow
    entity_id:  weather.openweathermap
2 Likes
12

It would be amazing if one could do a VSCode extension for that :slight_smile:
Using the mdi name and have the extension replacing the character.

13

would fit good in the existing one I guess :stuck_out_tongue:

1 Like
14

@makai thank you for your reply above, it was exactly what I was looking for.

I have some minor improvements to make working with the unicode chars slightly easier.

  1. Download the materialdesignicons.com zip file and open “preview.html” in a browser - it is much easier than working with font-viewing software as suggested above.
  2. Text search to find the icons
  3. Click on the char code to copy it to clipboard, eg F0594
  4. Add \U000 in front of the F for use in YAML, eg \U000F0594 

i2c:

font:
  - file: 'fonts/materialdesignicons-webfont.ttf'
    id: icon_font
    size: 40
    glyphs:
      - "\U000F0594" # mdi-weather-night
      - "\U000F0599" # mdi-weather-sunny

display:
  - id: oled
    platform: ssd1306_i2c
    model: SSD1306 64x48
    address: 0x3C
    lambda: |-
      it.print(32, 24, id(icon_font), TextAlign::CENTER, "\U000F0599");
13 Likes
15

Awesome thanks! In that case it is not even needed to download the font: just navigate to http://cdn.materialdesignicons.com/5.4.55/ to look at them.

16

This Python script:

from urllib.request import urlopen
import json
import re

url = urlopen("https://raw.githubusercontent.com/Templarian/MaterialDesign/master/meta.json")
meta = [(i['name'], i['codepoint']) for i in json.loads(url.read()) if re.search('^weather-', i['name'])]

print('''---
esphome:
  # ...
  includes:
    - weather_icon_map.h

# ...

font:
  - file: fonts/materialdesignicons-webfont.ttf
    id: ...
    size: ...
    glyphs:''')

for name, codepoint in meta:
    print('      - "\\U000%s" # %s' % (codepoint, name))

with open('weather_icon_map.h', 'w') as h:
    h.write('#include <map>\nstd::map<std::string, std::string> weather_icon_map\n')
    h.write('  {\n')
    for name, codepoint in meta:
        h.write('    {"%s", "\\U000%s"},\n' % (name.replace('weather-', ''), codepoint))
    h.write('  };')

will output:

font:
  - file: fonts/materialdesignicons-webfont.ttf
    id: icon_font
    size: 48
    glyphs:
      - "\U000F0590" # weather-cloudy
      - "\U000F0F2F" # weather-cloudy-alert
      - "\U000F0E6E" # weather-cloudy-arrow-right
      - "\U000F0591" # weather-fog
      - "\U000F0592" # weather-hail
      - "\U000F0F30" # weather-hazy
      - "\U000F0898" # weather-hurricane
      - "\U000F0593" # weather-lightning
      - "\U000F067E" # weather-lightning-rainy
      - "\U000F0594" # weather-night
      - "\U000F0F31" # weather-night-partly-cloudy
      - "\U000F0595" # weather-partly-cloudy
      - "\U000F0F32" # weather-partly-lightning
      - "\U000F0F33" # weather-partly-rainy
      - "\U000F0F34" # weather-partly-snowy
      - "\U000F0F35" # weather-partly-snowy-rainy
      - "\U000F0596" # weather-pouring
      - "\U000F0597" # weather-rainy
      - "\U000F0598" # weather-snowy
      - "\U000F0F36" # weather-snowy-heavy
      - "\U000F067F" # weather-snowy-rainy
      - "\U000F0599" # weather-sunny
      - "\U000F0F37" # weather-sunny-alert
      - "\U000F14E4" # weather-sunny-off
      - "\U000F059A" # weather-sunset
      - "\U000F059B" # weather-sunset-down
      - "\U000F059C" # weather-sunset-up
      - "\U000F0F38" # weather-tornado
      - "\U000F059D" # weather-windy
      - "\U000F059E" # weather-windy-variant

and:

weather_icon_map.h

#include <map>
std::map<std::string, std::string> weather_icon_map
  {
    {"cloudy", "\U000F0590"},
    {"cloudy-alert", "\U000F0F2F"},
    {"cloudy-arrow-right", "\U000F0E6E"},
    {"fog", "\U000F0591"},
    {"hail", "\U000F0592"},
    {"hazy", "\U000F0F30"},
    {"hurricane", "\U000F0898"},
    {"lightning", "\U000F0593"},
    {"lightning-rainy", "\U000F067E"},
    {"night", "\U000F0594"},
    {"night-partly-cloudy", "\U000F0F31"},
    {"partly-cloudy", "\U000F0595"},
    {"partly-lightning", "\U000F0F32"},
    {"partly-rainy", "\U000F0F33"},
    {"partly-snowy", "\U000F0F34"},
    {"partly-snowy-rainy", "\U000F0F35"},
    {"pouring", "\U000F0596"},
    {"rainy", "\U000F0597"},
    {"snowy", "\U000F0598"},
    {"snowy-heavy", "\U000F0F36"},
    {"snowy-rainy", "\U000F067F"},
    {"sunny", "\U000F0599"},
    {"sunny-alert", "\U000F0F37"},
    {"sunny-off", "\U000F14E4"},
    {"sunset", "\U000F059A"},
    {"sunset-down", "\U000F059B"},
    {"sunset-up", "\U000F059C"},
    {"tornado", "\U000F0F38"},
    {"windy", "\U000F059D"},
    {"windy-variant", "\U000F059E"},
  };
6 Likes
17

I cannot access to the link. Is it down?
Can s.b. please send me a working link or the font?

Best regards,
Stefan

18

Thank you for your icon list.
For those of you using weather forecast from met.no, delivered by the Norwegian Meteorological Institute, and also needs their native text weather in Norwegian; her is for you. The material Design weather icons don’t have all the icons/types of weather that Norwegian Meteorological Institute use. Here is the complete list, that uses the icon number from met.no.

      yr_symbol_text:
        friendly_name: "Akkurat nå:"
        value_template: >-
          {% if states.sensor.yr_symbol.state | int==1%}Klart
          {% elif states.sensor.yr_symbol.state | int==2%}Lettskyet
          {% elif states.sensor.yr_symbol.state | int==3%}Delvis skyet
          {% elif states.sensor.yr_symbol.state | int==4%}Skyet
          {% elif states.sensor.yr_symbol.state | int==5%}Regnbyger
          {% elif states.sensor.yr_symbol.state | int==6%}Regnbyger med torden
          {% elif states.sensor.yr_symbol.state | int==7%}Sluddbyger
          {% elif states.sensor.yr_symbol.state | int==8%}Snøbyger
          {% elif states.sensor.yr_symbol.state | int==9%}Regn
          {% elif states.sensor.yr_symbol.state | int==10%}Kraftig regn
          {% elif states.sensor.yr_symbol.state | int==11%}Kraftig regn og torden
          {% elif states.sensor.yr_symbol.state | int==12%}Sludd
          {% elif states.sensor.yr_symbol.state | int==13%}Snø
          {% elif states.sensor.yr_symbol.state | int==14%}Snø og torden
          {% elif states.sensor.yr_symbol.state | int==15%}Tåke
          {% elif states.sensor.yr_symbol.state | int==20%}Sluddbyger og torden
          {% elif states.sensor.yr_symbol.state | int==21%}Snøbyger og torden
          {% elif states.sensor.yr_symbol.state | int==22%}Regn og torden
          {% elif states.sensor.yr_symbol.state | int==23%}Sludd og torden
          {% elif states.sensor.yr_symbol.state | int==24%}Lette regbyger og torden
          {% elif states.sensor.yr_symbol.state | int==25%}Kraftige regnbyger og torden
          {% elif states.sensor.yr_symbol.state | int==26%}Lette sluddbyger og torden
          {% elif states.sensor.yr_symbol.state | int==27%}Kraftige sluddbyger og torden
          {% elif states.sensor.yr_symbol.state | int==28%}Lette snøbyger og torden
          {% elif states.sensor.yr_symbol.state | int==29%}Kraftige snøbyger og torden
          {% elif states.sensor.yr_symbol.state | int==30%}Lett regn og torden
          {% elif states.sensor.yr_symbol.state | int==31%}Lettt sludd og torden
          {% elif states.sensor.yr_symbol.state | int==32%}Kraftig sludd og torden
          {% elif states.sensor.yr_symbol.state | int==33%}Lett snø og torden
          {% elif states.sensor.yr_symbol.state | int==34%}Kraftig snø og torden
          {% elif states.sensor.yr_symbol.state | int==40%}Lette regnbyger
          {% elif states.sensor.yr_symbol.state | int==41%}Kraftige regnbyger
          {% elif states.sensor.yr_symbol.state | int==42%}Lette sluddbyger
          {% elif states.sensor.yr_symbol.state | int==43%}Kraftige sluddbyger
          {% elif states.sensor.yr_symbol.state | int==44%}Lette snøbyger
          {% elif states.sensor.yr_symbol.state | int==45%}Kraftige snøbyger
          {% elif states.sensor.yr_symbol.state | int==46%}Lett regn
          {% elif states.sensor.yr_symbol.state | int==47%}Lett sludd
          {% elif states.sensor.yr_symbol.state | int==48%}Kraftig sludd
          {% elif states.sensor.yr_symbol.state | int==49%}Lett snø
          {% elif states.sensor.yr_symbol.state | int==50%}Kraftig snø
          {% endif %}
        entity_picture_template: >-
          {% if is_state('sun.sun', 'above_horizon') %}
            //api.met.no/weatherapi/weathericon/1.1/?symbol={{states.sensor.yr_symbol.state}};is_night=0;content_type=image/png
          {% else %}
            //api.met.no/weatherapi/weathericon/1.1/?symbol={{states.sensor.yr_symbol.state}};is_night=1;content_type=image/png
          {% endif %}

Here is the ESPHome display: definition I use, following by the font:definitions.

display:
  ...
    lambda: |-
      if (id(current).has_state()) {
        std::map<std::string, std::string> weather_icon_map
          {
            {"Klart", "\U000F0599"},
            {"Lettskyet", "\U000F0595"},       // Lettskyet og delvis skyet deler ikon
            {"Delvis skyet", "\U000F0595"},
            {"Skyet", "\U000F0590"},
            {"Regnbyger", "\U000F0F33"},
            {"Regnbyger med torden", "\U000F0F32"},
            {"Sluddbyger", "\U000F067F"},
            {"Snøbyger", "\U000F0F36"},
            {"Regn", "\U000F0597"},
            {"Kraftig regn", "\U000F0596"},
            {"Kraftig regn og torden", "\U000F067E"},
            {"Sludd", "\U000F067F"},
            {"Snø", "\U000F0598"},
            {"Snø og torden", "\U000F0598"},
            {"Tåke", "\U000F0591"},
            {"Regn og torden", "\U000F067E"},
            {"Torden", "\U000F0593"},
            {"Lette snøbyger", "\U000F0F34"},
          };
            it.printf(0, 50, id(icon_font_22), TextAlign::BASELINE_LEFT, weather_icon_map[id(current).state.c_str()].c_str());
      }
2 Likes
19

Hello,

i find this integration very interesting and I was trying to adapt it to Hassio Alarm Panel.

Could you please suggest me the right way to let the display show an icon for each state of the alarm panel?

Calling the sensor

text_sensor:
  - platform: homeassistant
    entity_id: alarm_control_panel.alarm
    name: "Alarm State"
    id: alarm_state

I loaded the necessary fonts

  - file: 'common/fonts/materialdesignicons-webfont.ttf'
    id: icon_font
    size: 36
    glyphs: [
      "\U000F078F", # mdi-alarm-light
      "\U000F0BEA", # mdi-alarm-light-outline
      "\U000F0237", # mdi-fingerprint
      "\U000F0EB1", # mdi-fingerprint-off
      "\U000F0498", # mdi-shield                 armed_away
      "\U000F0499", # mdi-shield-outline
      "\U000F088F", # mdi-shield-account         armed_home
      "\U000F0A12", # mdi-shield-account-outline
      "\U000F0ECD", # mdi-shield-alert-outline
      "\U000F0565", # mdi-shield-check        pending
      "\U000F0CC8", # mdi-shield-check-outline
      "\U000F0780", # mdi-shield-half-full        armed_night
      "\U000F0BC4", # mdi-shield-key              arming
      "\U000F0BC5", # mdi-shield-key-outline
      "\U000F099E", # mdi-shield-off            disarmed
      "\U000F033F", # mdi-lock-open            pending
      "\U000F0340", # mdi-lock-open-outline    disarming
      "\U000F139C", # mdi-lock-check           triggered
      "\U000F0FC5", # mdi-location-exit       armed_custom_bypass
      "\U000F009E", # mdi-bell-ring         bell
      "\U000F009F", # mdi-bell-ring-outline
      ]

these are supposed to be the different states for each of them I would like to relate an icon but I can’t figure how to show them.

    if (id(alarm_control_panel.alarm).has_state()) {
          {
              {"disarmed", "\U000F099E"},
             {"armed_home", "\U000F088F"},
             {"armed_away", "\U000F0498"},
             {"armed_night", "\U000F0780"},
             {"armed_custom_bypass", "\U000F0FC5"},
             {"pending", "\U000F0565"},
             {"arming", "\U000F0BC4"},
             {"disarming", "\U000F0340"},
             {"triggered", "\U000F139C"},
           };
             it.printf(64, 32, id(icon_font), TextAlign::CENTER, alarm_control_panel.alarm[id(current).state.c_str()].c_str());
      }

any idea? thank you in advance

20

Hi,
I found this old thread with a lot of useful information about how to show icons in a display but when trying to implement it, I am getting an error. Let me explain:
I have created a text sensor in HA witn values such us “\U000F0599” that change depending on the weather condition (sunny, cloudy…).
I define the font and import the glyphs as explained above and, in fact, I can see the icon in the display with an instruction like this:

it.printf(0, 70, id(icon_font_2_48), TextAlign::LEFT, "\U000F0599");

But when I try to use the text sensor value to change it dinamically with this instruction, I only get a white rectangle:

it.printf(0, 70, id(icon_font_2_48), TextAlign::LEFT, id(my_text_sensor_from_HA).state.c_str());

Checking the log, the error I get looks like it is trying to render within the font each character of the string instead of the string itself.

16:26:05	[W]	[display:176] Encountered character without representation in font: '"'
16:26:05	[W]	[display:176] Encountered character without representation in font: '\'
16:26:05	[W]	[display:176] Encountered character without representation in font: 'U'
16:26:05	[W]	[display:176] Encountered character without representation in font: '0'
...

I would appreciate any advise here.

Thanks and best regards

1 Like