Display wifi icon based on wifi connection

ESPHome
#1

Hi,

I’m trying to display an icon based on wifi.connected.

interval:
  - interval: 10s
    then:
      if:
        condition:
          wifi.connected:
        then:
          - lambda: 'id(affichage).printf(20, 20, id(icons), id(my_red), "\U000F05A9");'
        else:
          - lambda: 'id(affichage).printf(20, 20, id(icons), id(my_red), "\U000F05AA");'

I don’t get any errors on the log, the code complies properly, but the icon doesn’t show up. This is my display component, on which lambda is working properly :

display:
  - platform: ili9341
    id: affichage
    model: TFT 2.4
    rotation: 180
    cs_pin: 5
    dc_pin: 4
    led_pin: 15
    reset_pin: 22
    lambda: |-
       ...

And icons :

  - file: 'materialdesignicons-webfont.ttf'
    id: icons
    size: 36
    glyphs:
      - "\U000F05A9" #mdi:wifi
      - "\U000F05AA" #mdi:wifi-off
      - "\U000F0769" #mdi:ceiling-light
      - "\U000F17C7" #mdi:ceiling-light-outline
      - "\U000F06B5" #mdi:lamp
      - "\U000F17D0" #mdi:lamp-outline
      - "\U000F0CCC" #mdi:shield-lock-outline
      - "\U000F099C" #mdi:shield-off-outline
      - "\U000F0CCB" #mdi:shield-home-outline
      - "\U000F1829" #mdi:shield-moon-outline

Any ideas?

Thanks

#2

Could it be that you are missing spaces?

  - file: 'materialdesignicons-webfont.ttf'
    id: icons
    size: 36
    glyphs:
      - "\U000F05A9" # mdi:wifi
      - "\U000F05AA" # mdi:wifi-off
      - "\U000F0769" # mdi:ceiling-light
      - "\U000F17C7" # mdi:ceiling-light-outline
      - "\U000F06B5" # mdi:lamp
      - "\U000F17D0" # mdi:lamp-outline
      - "\U000F0CCC" # mdi:shield-lock-outline
      - "\U000F099C" # mdi:shield-off-outline
      - "\U000F0CCB" # mdi:shield-home-outline
      - "\U000F1829" # mdi:shield-moon-outline
#3

If you talk about what’s after ‘#’, these are just comments.

#4

I do this but in a slightly different way. I go here Material Design Icons and click on the actual icon I want (not the code), it copies it to clipboard.
Then, I paste in the glyphs list, it looks like this:

  - file: 'materialdesignicons-webfont.ttf'
    id: icon_font_20
    size: 20
    glyphs: [
      "󰖩", # mdi-wifi
      "󰶑", # mdi-motion-sensor
      "󰠜", # mdi-door-open
      "󰌵", # mdi-lightbulb
      "󰛚" # mdi-garage-open
      ]

Thanks to @makai:

#5

Ah! Of course…
Sorry about that.

#7

Hii, I display wifi icon based on the wifi state like this, I created a template switch that checks for every 10s if wifi is connected. The state of the template switch is used to display whether the wifi is connected.

interval:

  - interval: 10s

    then:

      - if:

          condition:

            wifi.connected:

          then:

            - switch.turn_on: vk5

          else:

            - switch.turn_off: vk5
switch:

  - platform: template

    name: "Wifi font"

    id: vk5

    optimistic: true

    restore_state: False

display: 
  - platform: ssd1306_i2c

    model: "SSD1306 128x64"

    address: 0x3C

    pages:

      - id: page1

        lambda: |-

          it.printf(10, 2, id(icon_font), TextAlign::TOP_LEFT, "%s", id(vk5).state ? "\U000F05A9" : "\U000F05AA");

font:
  - file: "_fonts/materialdesignicons-webfont.ttf"

    id: icon_font

    size: 20

    glyphs: [

      "\U000F05A9", #wifi
      "\U000F05AA", #no wifi

    ]

Hope this Helps :grin:

1 Like
#8

@VarunKumaran30 - Thank you for sharing your YAML. While it worked, I did not want to use or expose a switch to HA and figured I’d try using a variable instead to do the same thing. It appears to work… this is what I did:

Declaring the global variable:

#https://esphome.io/guides/automations.html?highlight=restore_value#bonus-2-global-variables
globals: ##to set default reboot behavior
  - id: wifi_connection
    type: bool
    restore_value: no
    initial_value: "false"

Code to set variable every 10 seconds:

interval:
  - interval: 10s
    then:
      - if:
          condition:
            wifi.connected:
          then:
            - lambda: |-
                id(wifi_connection) = true;
          else:
            - lambda: |-
                id(wifi_connection) = false;

Fonts code:

font:
  - file: "fonts/materialdesignicons-webfont.ttf"
    id: icon_font
    size: 12
    glyphs: [
      "\U000F05A9", #wifi
      "\U000F05AA", #no wifi
      ]

Speaking of fonts, I searched the icon font file on google, found the github, downloaded the file, and placed it in a new fonts folder with this path: \HASS_IP\config\esphome\fonts

Code to display the icon in the top right of the 64x128 screen:

it.printf(110, 2, id(icon_font), "%s", id(wifi_connection) ? "\U000F05A9" : "\U000F05AA");

Sharing your code with my modifications as an alternative in case it helps others :slight_smile: