GUITION 4" 480x480 ESP32-S3-4848S040 Smart Display with LVGL

For a string try…

    - lvgl.label.update:
        id: tank_acttemp_label
        text:
          format: "%s"
          args: [ 'id(sensor_offset).state.c_str()' ]

For numbers…


          - lvgl.label.update:
              id: wifi_state
              text:
                format: "%.0f%%"
                args: id(crowpanel_wifi).state

Thanks @AndyD. Works a treat.

Need to figure out how to get it to update on a reboot. Unfortunately it only updates on a state change despite
number:
restore_value: True

Ive tried

  on_boot: 
    then:
      - lvgl.label.update:
          id: tank_acttemp_label

which would be the obvious choice, but Im assuming that the lvgl stuff isnt up and running at on_boot

Any ideas???

I noticed that you have a build on git
Suntion ESP32-8048S070C.
I have ESP32-8048S050C. Is it possible to use your build for this display? I assume the GPIO layout will be the same, but I’m not sure.

Thats worked wonders.I now have the single button.
I have had a little play around and managed to draw another button on it.

Thank you for your help -it is much appreciated.

now I need to work out how to get it to do somethign in HA.

I had a similar problem with some temp readings after a restart and the following worked for me.
Ignore the conditional bit, that’s just to change the text colour. I believe using the lvgl.widget_update rather than the label update may do the trick.

  - platform: homeassistant
    name: "Inside Temp"
    entity_id: sensor.lounge_temp_temperature
    id: inside_temp
    on_value:
      - if:
          condition:
            sensor.in_range:
              id: inside_temp
              below: 5.0
          then:
            - lvgl.widget.update:
                id: inside_temperature
                text_color: 0x4285F4
1 Like

Unfortunaely, doesnt work.

Even tried this:

    on_value:
      then:
        - lvgl.label.update:
            id: tank_acttemp_label
            text:
              format: "%.1f"
              args: id(sensor_offset).state
        - lvgl.widget.update:
            id: tank_acttemp_label              

and still no joy

Try this:

- label:
            id: tank_acttemp_label
            text_font: barlow120
            text_color: 0xFFFFFF
            x: 140
            y: 110
            text:
              format: "%.1f"
              args: [ 'id(sensor_offset).state' ]
....
number:
  - platform: template
    name: "Sensor Offset"
    id: sensor_offset
    optimistic: true
    min_value: -2.0
    max_value: 2.0
    restore_value: True
    step: 0.1
    unit_of_measurement: "°C" 
    on_value:
      - lvgl.label.update:
          id: tank_acttemp_label
          text:
            format: "%.1f"
            args: [ 'x' ]

1 Like

@walberjunior TQ TQ Tq - Legend-waitforit-dary
TQ so much for this - amazing how [ ] can change everything.

Proper syntax is a learning stategy for me.

Sorry but Im going to be annoying in the next few weeks.

Apologies in advance to everyone.

Can I ask…is a page a widget???

Can someone give me a hint as to how to go about changing the background bg_image_src: of a page dynamically based on the status of a sensor??? Or is it not possible???

Essentially I have a background image on a page that is based on the status of a temp sensor and want to change the background based on the temp of the sensor.

eg:

  pages:
    - id: page1
      skip: true
      bg_image_src: template1_image # <- How do i change this based on the state of a sensor?????

      bg_opa: cover
      pad_all: 2
      widgets:
          ........

BTW, this group/chat is amazing… learned so much and everyone is discovering something new. :slight_smile:

Hello everyone!
So, I’m messing around with LVGL…
I need to change the icons for the label depending on the state of the button. The icons can be different. And what’s interesting…
If I do it like this:

  - file: "gfonts://Inter"
    id: icon32
    size: 32
    bpp: 4
    glyphs: |-
      !"%()+=,-_.:$\°0123456789АБВГДЕЁЖЗИЙКЛМНОПРСТУФХЦЧШЩЬЫЪЭЮЯABCDEFGHIJKLMNOPQRSTUVWXYZ абвгдеёжзийклмнопрстуфхцчшщьыъэюяabcdefghijklmnopqrstuvwxyz'
    extras:
      - file: 'fonts/materialdesignicons-webfont.ttf' # http://materialdesignicons.com/cdn/7.4.47/ 
        glyphs: [
          "\U000F0238",
          "\U000F1722"
        ]
- lvgl.label.update:
    id: sw1_ico
    text: !lambda 'return "\\U000F0238" ;'

then the icon is drawn, but if I do it through a global variable:

- lvgl.label.update:
    id: sw1_ico
    text: !lambda 'return id(switch1_icon_on);'

then instead of the icon, just the text is displayed: \U000F0238
Is there a way to overcome this situation?

I don’t know about bg_image_src, but it is possible if you are using the image component.

    on_value:
      - if:
          condition:
            text_sensor.state:
              id: ha_weather_cond
              state: "clear_night"
          then:
          - lvgl.image.update:
              id: display_weather_image
              src: clear_night

      - if:
          condition:
            text_sensor.state:
              id: ha_weather_cond
              state: "cloudy"
          then:
          - if:
              condition:
                - sun.is_above_horizon:
              then:
              - lvgl.image.update:
                  id: display_weather_image
                  src: cloudy

          - if:
              condition:
                - sun.is_below_horizon :
              then:
              - lvgl.image.update:
                  id: display_weather_image
                  src: night_cloudy

      - if:
          condition:
            text_sensor.state:
              id: ha_weather_cond
              state: "fog"
          then:
          - lvgl.image.update:
              id: display_weather_image
              src: fog

      - if:
          condition:
            text_sensor.state:
              id: ha_weather_cond
              state: "hail"
          then:
          - lvgl.image.update:
              id: display_weather_image
              src: hail

      - if:
          condition:
            text_sensor.state:
              id: ha_weather_cond
              state: "lightning"
          then:
          - lvgl.image.update:
              id: display_weather_image
              src: lightning

      - if:
          condition:
            text_sensor.state:
              id: ha_weather_cond
              state: "lightning_rainy"
          then:
          - lvgl.image.update:
              id: display_weather_image
              src: lightning_rainy

      - if:
          condition:
            text_sensor.state:
              id: ha_weather_cond
              state: "partlycloudy"
          then:
          - if:
              condition:
                - sun.is_above_horizon:
              then:
              - lvgl.image.update:
                  id: display_weather_image
                  src: partlycloudy

          - if:
              condition:
                - sun.is_below_horizon :
              then:
              - lvgl.image.update:
                  id: display_weather_image
                  src: nightpartlycloudy
      - if:
          condition:
            text_sensor.state:
              id: ha_weather_cond
              state: "pouring"
          then:
          - lvgl.image.update:
              id: display_weather_image
              src: pouring

      - if:
          condition:
            text_sensor.state:
              id: ha_weather_cond
              state: "rainy"
          then:
          - lvgl.image.update:
              id: display_weather_image
              src: rainy

      - if:
          condition:
            text_sensor.state:
              id: ha_weather_cond
              state: "snowy"
          then:
          - lvgl.image.update:
              id: display_weather_image
              src: snowy

      - if:
          condition:
            text_sensor.state:
              id: ha_weather_cond
              state: "snowy_rainy"
          then:
          - lvgl.image.update:
              id: display_weather_image
              src: snowy_rainy

      - if:
          condition:
            text_sensor.state:
              id: ha_weather_cond
              state: "sunny"
          then:
          - lvgl.image.update:
              id: display_weather_image
              src: sunny

      - if:
          condition:
            text_sensor.state:
              id: ha_weather_cond
              state: "windy"
          then:
          - lvgl.image.update:
              id: display_weather_image
              src: windy

      - if:
          condition:
            text_sensor.state:
              id: ha_weather_cond
              state: "windy_variant"
          then:
          - lvgl.image.update:
              id: display_weather_image
              src: windy

      - if:
          condition:
            text_sensor.state:
              id: ha_weather_cond
              state: "exceptional"
          then:
          - lvgl.image.update:
              id: display_weather_image
              src: exceptional

And I couldn’t do it using lambdas, so the code got big.

If I understand what you want to do, I think the best way would be to use substitutions.

substitutions:
  lightbulb_off: "\U000F0335"
  lightbulb_on: "\U000F06E8"
font:
  - file: 'fonts/materialdesignicons-webfont.ttf' # http://materialdesignicons.com/cdn/7.4.47/ 
    id: font_roboto_mdi_70
    size: 70
    bpp: 4
    glyphs: [
      $lightbulb_off,
      $lightbulb_on
    ]
    on_state:
      - lvgl.label.update:
          id: btn_internal_relay_1_icon
          text: !lambda |-
            static char buf[10];
            std::string icon;
            if (id(internal_light_1).current_values.is_on()) {
                icon = "$lightbulb_on";
            } else {
                icon = "$lightbulb_off";
            }
            snprintf(buf, sizeof(buf), "%s", icon.c_str());
            return buf;

There is probably a better way, but after I got things working I didn’t clean up the code. :upside_down_face:

1 Like

@walberjunior yeah figured that. Also tried lambdas and Im not so good at creating them, so am reverting to what you have suggested.

BTW, where is the solution button in this thread???

Only the thread starter gets the solution button.

I do know Im postinbg a lot in here and Im no expert, but I promise to post my finished code once Im done. The people here have been amazing and Im learning a lot.

I need to display the current target_temperature of a thermostat controller (not a HA controller) but settemp_label_settingspage just shows nan

I dont want to use a spinbox because I want the UI to look “non-LVGL-esphome”

The climate controller actually updates the set temp without issue (I can see the update of the climate entity via the esphome web interface)

Obviously I referred to this: The way I understand it is that these atrributes are read-only
https://esphome.io/components/climate/index.html#lambda-calls

Any guidance with the syntax/args of settemp_label_settings_page - as usual is appreciated.

        - label:
            id: settemp_label_settings_page
            x: 140
            y: 110
            text:
              format: "%.1f"
              args: [ 'id(controller).target_temperature' ]  #ive tried a heap of permutations here

using these:

        - button:
            id: lv_button_1_settings_page
            x: 332
            y: 35
            widgets:
              - label:
                  text: "+"
                  align: center
            on_release:
              then:
                - climate.control:
                    id: controller
                    target_temperature: !lambda "return id(controller).target_temperature + 0.1;"
                - lvgl.widget.update:
                    id: settemp_label_settings_page

        - button:
            id: lv_button_2_settings_page
            x: 332
            y: 109
            bg_color: 0x1E1E1E
            widgets:
              - label:
                  text: "-"
                  align: center
            on_release:
              then:
                - climate.control:
                    id: controller
                    target_temperature: !lambda "return id(controller).target_temperature - 0.1;"
                - lvgl.widget.update:
                    id: settemp_label_settings_page
climate:
  - platform: thermostat
    name: demo-controller
    id: controller
    sensor: sim_temp1
    on_boot_restore_from: memory
...

The docs show the attributes that are available for climate components in esphome Climate Component — ESPHome

Hey Nick,

Thats what Im eluding to - I tried args: [ 'id(controller).target_temperature' ] as well as a half dozen different ways (I thought) it worked and unfortunately it doesnt seem to work the way I thought it does.

Sorry you did point to that page. I’ll look harder!

Im just not a lambda guru and need ppl smarter than me to offer guidance.

:slight_smile:

Good day, everyone!
I trying configuration from first post but I get this:

INFO ESPHome 2024.8.3
INFO Reading configuration C:\Users\User\ESPHomeConfigs\480-new.yaml...
WARNING GPIO45 is a strapping PIN and should only be used for I/O with care.
Attaching external pullup/down resistors to strapping pins can cause unexpected failures.
See https://esphome.io/guides/faq.html#why-am-i-getting-a-warning-about-strapping-pins
INFO Generating C++ source...
INFO Compiling app...
Processing guition-esp32-s3-4848s040 (board: esp32-s3-devkitc-1; framework: espidf; platform: platformio/[email protected])
--------------------------------------------------------------------------------
HARDWARE: ESP32S3 240MHz, 320KB RAM, 8MB Flash
 - framework-espidf @ 3.40407.240606 (4.4.7) 
 - tool-cmake @ 3.16.4 
 - tool-idf @ 1.0.1 
 - tool-mconf @ 1.4060000.20190628 (406.0.0) 
 - tool-ninja @ 1.9.0 
 - toolchain-esp32ulp @ 2.35.0-20220830 
 - toolchain-riscv32-esp @ 8.4.0+2021r2-patch5 
 - toolchain-xtensa-esp32s3 @ 8.4.0+2021r2-patch5
Reading CMake configuration...
Dependency Graph
|-- ArduinoJson @ 6.18.5
|-- lvgl @ 8.4.0
Compiling .pioenvs\guition-esp32-s3-4848s040\src\main.o
Compiling .pioenvs\guition-esp32-s3-4848s040\app_trace\app_trace.o
Compiling .pioenvs\guition-esp32-s3-4848s040\app_trace\app_trace_util.o
Compiling .pioenvs\guition-esp32-s3-4848s040\app_trace\host_file_io.o
xtensa-esp32s3-elf-gcc: fatal error: no input files
compilation terminated.
xtensa-esp32s3-elf-gcc: fatal error: no input files
compilation terminated.
'lv_font_montserrat_14'' is not recognized as an internal or external command,
operable program or batch file.
'lv_font_montserrat_14'' is not recognized as an internal or external command,
operable program or batch file.
*** [.pioenvs\guition-esp32-s3-4848s040\app_trace\app_trace_util.o] Error 1
xtensa-esp32s3-elf-gcc: fatal error: no input files
compilation terminated.
*** [.pioenvs\guition-esp32-s3-4848s040\app_trace\app_trace.o] Error 1
'lv_font_montserrat_14'' is not recognized as an internal or external command,
operable program or batch file.
*** [.pioenvs\guition-esp32-s3-4848s040\app_trace\host_file_io.o] Error 1
========================= [FAILED] Took 12.09 seconds =========================

Could somebody advise what is wrong?