Printing text sensors on an LCD screen

ESPHome
1

I’m making a simple boot screen for my ESP32 and I want to display some text sensors. I can’t figure out how to get the text sensors onto the display. I’m using the new LVGL library so there are not any examples of this online.

You can see I tried lvgl.label.update but that didn’t work. The text labels just stay their default values.

boot_screen

text_sensor:
  - platform: wifi_info
    ip_address:
      name: "IP Address"
      entity_category: diagnostic
    ssid:
      name: "Connected SSID"
      entity_category: diagnostic
    mac_address:
      name: "Mac Address"
      entity_category: diagnostic
  - platform: version
    id: esphome_version
    name: "ESPHome Version"
    hide_timestamp: true
    on_value:
      then:
        - lvgl.label.update:
            id: esphome_version_label
            text: !lambda |-
              return ("ESPHome Version: " + id(esphome_version).state).c_str();


lvgl:
  ...
  top_layer:
    widgets:
      - obj:
          id: boot_screen
          layout: 
            type: flex
            flex_flow: COLUMN_WRAP 
          width: 100%
          height: 100%
          bg_color: 0xffffff
          bg_opa: COVER
          radius: 0
          pad_all: 5
          widgets:
            - img:
                src: boot_logo
                antialias: true
                pad_bottom: 10
            - label:
                text: "IP Address: 0.0.0.0"
            - label:
                text: "Mac Address: 00:00:00:00:00:00"
            - label:
                text: "Connected SSID: nonet"
            - label:
                text: "WiFi Strength: 0%"
            - label:
                id: esphome_version_label           
                text: "ESPhome Version: 0.0"
            - label:
                text: " "
            - label:
                text: " "
            - label:
                text: " "
            - label:
                text: " "
            - label:
                text: " "
            - btn:
                radius: 15
                width: 100
                height: 60
                checkable: true
                widgets:
                 - label:
                     text_color: 0xFFFFFF
                     align: center
                     text: "OK"
                on_press:
                 - lvgl.widget.hide: boot_screen
2

There’s some examples here:

3

I have used these example to learn how the new LGVL component works. Unfortunately there are now examples here of how to get a text sensor to display

4

I don’t have such a display, so I’m just shooting the breeze, but have you tried following the example format?

This example seems to use snprintf() to format the text, maybe try something like that:

5

I tried that and it didn’t work. I think it’s more about what command to use to update the boot screen and when.

My example code should also work using the lvgl.label.update command but it does not.

I just need a simple command to update a page as it loads with existing text sensors. There are no existing example of this I can find.

You don’t need the screen I have any LVGL screen could be used for this or even the VNC display driver. I use the VNC driver to test LVGL code on a PC running Windows and also on my Linux PC.

6

Clyde @clydebarrow I hate to ask you this one directly but this seems to be something that is missing from the LVGL documentation.

Most things in ESPhome take real time data from sensors and push it up to the UI. In this case I want data (text sensors) that are already defined (suchs as the ESPhome version) to go to the UI. I think this is a timing thing as this data could be pulled in as the LVGL page is loaded for the first time.

I just don’t exactly know how to do this.

7

Use lvgl.label.update - see the docs.

8

I have the lvgl.label.update working fine. I just need to know what to trigger it on.

on_value didn’t work so I ended up using an on_boot command. Let me know if there is a better way to do this

For reference this works.

  on_boot:
    priority: -100
    then:
      - lvgl.label.update:
          id: esphome_version_label
          text:
            format: "ESPHome Version: %s"
            args: [ 'id(esphome_version).state.c_str()' ]
      - delay: 60s
      - lvgl.widget.hide: boot_screen
9

That’s got nothing to do with LVGL then, best ask in the Discord #general support channel.

10

People over on Discord gave me this. It’s works well and is very simple. I update the SSID with a wifi on.value like this

sensor:
  # Reports the WiFi signal strength in %
  - platform: copy
    id: wifi_signal_db_percent
    source_id: wifi_signal_db
    name: "WiFi Strength"
    filters:
      - lambda: return min(max(2 * (x + 100.0), 0.0), 100.0);
    unit_of_measurement: "%"
    entity_category: diagnostic
    on_value:
        then:
          - lvgl.label.update:
              id: wifi_signal_db_percent_label
              text:
                format: "Wi-Fi Strength: %s"
                args: [ 'id(wifi_signal_db_percent).state.c_str()' ]  

lvgl:
...
    widgets:
      - obj:
          id: boot_screen
          layout: 
            type: flex
            flex_flow: COLUMN_WRAP 
          width: 480px
          height: 480px
          text_font: roboto24
          scrollbar_mode: 'off'
          bg_color: 0xffffff
          bg_opa: COVER
          radius: 0
          pad_all: 5
          widgets:
            - label:
                id: ip_address_label
                text: "IP Address:"                
            - label:
                text:
                  format: "MAC Address: %s"
                  args: [ 'id(mac_address).state.c_str()' ]                
            - label:
                id: connected_ssid_label
                text: "Connected SSID:"
            - label:
                id: wifi_signal_db_percent_label
                text: "WiFi Strength: 0%"
            - label:
                text:
                  format: "ESPHome Version: %s"
                  args: [ 'id(esphome_version).state.c_str()' ]