White "arrows" in the corners of 7735 display with LVGL

ESPHome
1

Hi,
I’m still learning with esphome and the display part is the most difficult one.

Now I have a situation with white “arrows” in the corner of the screen like you can see on the photo.

display-arrow
display-arrow1390×1640 279 KB

Here is the code I’m using:

display:
  - platform: ili9xxx
    id: my_display
    model: ST7735
    cs_pin: GPIO10
    dc_pin: GPIO9
    reset_pin: GPIO8
    show_test_card: false
    transform:
      mirror_x: true
      mirror_y: true
      swap_xy: false
    dimensions:
      width: 128
      height: 160
    invert_colors: false
    update_interval: never
    auto_clear_enabled: false
    data_rate: 80MHz

# Configure LVGL
lvgl:
  displays: my_display
  buffer_size: 25%
  pages:
    - id: main_page
      widgets:
        # Main container with a black background
        - obj:
            height: 160
            width: 128
            align: CENTER
            bg_color: 0x000000  # Black background
            bg_opa: COVER
            border_width: 0
            widgets:
              # Top labels as direct children
              - label:
                  id: temp_target_label
                  align: TOP_LEFT
                  x: 2
                  y: 2
                  text_color: 0xFFFF00  # Yellow
                  text_font: font_small
                  text: "Target: --°C"
              - label:
                  id: boiler_temp_label
                  align: TOP_LEFT
                  x: 2
                  y: 22
                  text_color: 0xFFFFFF  # White
                  text_font: font_small
                  text: "Boiler: --°C"
              - label:
                  id: fan_speed_label
                  align: TOP_LEFT
                  x: 2
                  y: 42
                  text_color: 0xFFFFFF  # White
                  text_font: font_small
                  text: "Fan: --%"
              
              # Meter with manual positioning
              - meter:
                  id: temp_gauge
                  x: -15  # Center horizontally (128/2)
                  y: 60  # Positioned in middle
                  height: 90  # Height to avoid overlapping
                  width: 120  # Width for proper arc display
                  border_width: 0
                  bg_color: 0x000000  # Black
                  bg_opa: COVER  # Fully opaque
                  scales:
                    - range_from: 880
                      range_to: 990
                      angle_range: 180
                      ticks:
                        width: 0
                        count: 0
                      indicators:
                        - arc:
                            color: 0x00FF00  # Green arc first
                            r_mod: 0
                            width: 12
                            start_value: 880
                            end_value: 960
                        - arc:
                            color: 0xFF0000  # Red arc second
                            r_mod: 0
                            width: 12
                            start_value: 960
                            end_value: 990
                        - line:
                            id: temp_needle
                            width: 3
                            color: 0xFF0000  # Red needle
                            r_mod: -4
                            value: 880
              
              # Cover for the middle part of meter indicator line
              - obj:
                  height: 45
                  width: 45
                  radius: 25  # Half of width/height to create a circle
                  align: CENTER
                  x: -15  # Same x offset as the meter
                  y: 60   # Same y position as the meter
                  border_width: 0
                  bg_color: 0x000000  # Black to match background
                  pad_all: 0
                            
              # Temperature value at the bottom
              - label:
                  id: temp_value_label
                  align: BOTTOM_LEFT
                  x: 30  # Manually centered
                  y: -5
                  text_color: 0xFFFFFF  # White
                  text_font: font_large
                  text: "--.-°C"

Thanks for help!

Best regards

Karl-Heinz Fink

2

…found the solution myself. The arrows are rounded corners of my background object. radius: 0 fixed it.

Regards KH

3

You don’t need that “main container” anyway, the screen is already a container.

4

…thanks. I removed it already as a test, but got a white background. Can I “color” the background without a main container?

5

Sure, just add bg_color or any other style property right under the lvgl key.

lvgl:
  layout:
    type: flex
  bg_color: black

  widgets:
1 Like
6

…sorry, but that did not work here. Maybe I’m too stupid. can you add it to my code upstairs? Or has it changed recently?

7

…just did this and it worked:

lvgl:
  displays: my_display
  buffer_size: 25%
  bg_color: 0x000000  # Black background for the entire LVGL surface
  pages:
    - id: main_page
      widgets:

Thanks again

8

Define “didn’t work” - build time error, not the desired result, or what?

9

It did not compile …maybe older syntax :slight_smile:

Again, I’m very new, but I learned the hard way that recently lvgl was turned upside down on many commands and options.

10

No, that’s not correct. There have not been any significant breaking changes recently. And the example I gave you compiles with the current version anyway.

I’d suggest reading “How to ask a good question” - even “it doesn’t compile” is insufficient to start diagnosing the problem (and I realise you have moved past this one, but there will be others.)

Everyone is on a learning curve and there’s no shame in not knowing something, but when asking for help not only will you get much better responses if you provide full information up front, but often in the process of explaining what you want to do, what you’ve tried, and what the results were, the solution may become apparent just through the process of clearly defining and explaining the problem - which can save you a lot of time!

11

Thank you for your comments. OK, I was thinking about it…maybe you are right, but for me as a man from acoustics, workin on such a code is not so easy. I’m working on a modification of my espresso maschine…a classic Rocket with E61 group, but long before PID was popular… I installed a PID driven heater for the boiler and now I’m installing a fan to keep the temperature of the brew group in the 94° range. So i did mort of it with ESPhome and it’s working well and the last thing I wanted was a display for it. So I use a TFT and had the idea to go for lvgl in order to make it looking nice.

In my own company, I have guys working on programming (for the Audio industry), but they look at me like I’m a fool…everything other than C++ or so if for school kids or so. Well, I do what I do for me, so the next idea was to ask AI for help. I could write a book about how stupid AI is - but that’s another story. The one thing all 3 I tested (ChatGPT, Claude, Deepseek) did always wrong was everything about lvgl. The reason is easy…they are have been trained before lvgl for ESPhome got introduced - 2024.8 as far as I remember. So there is nothing they know and that’s why I thought lvgl was changed big way.

Here is what i got adding your recommended code:

NFO ESPHome 2025.4.1
INFO Reading configuration /config/esphome/7735-display-esp32s3.yaml...
Failed config

lvgl: [source /config/esphome/7735-display-esp32s3.yaml:133]
  
  Cannot specify more than one of pages, layout.
  layout: 
    type: flex
  bg_color: black
  displays: my_display
  buffer_size: 25%
  pages: 
    - id: main_page
      widgets: 
        - meter: 
            id: temp_gauge
            align: CENTER
            x: 0

It might be my stupid mistake, but I just added what you told me to do. Meanwhile I got it working…I learned a lot in the last weeks doing something unusual for me (I call it brain jogging
Again, not so easy for somebody who is an acoustics engineer.

Karl-Heinz Fink

12

Great, that’s the key to understanding what happened, and shows why the detail is important.

The example I gave was fairly generic, just to illustrate that any styling can be applied to the base display.

The layout key happened to be in the test file I took that from but I wasn’t intending you to copy it verbatim. It failed because you are using pages rather than a single top-level screen, so the layout (and the bg_color) would be applied to a page, rather than the top-level display config.

So two takeaways here - one for you; don’t blindly copy and paste - try to understand what the example does, and pick out the important details.

And one for me (and I have fallen into this trap quite often) - don’t assume the reader knows what I mean - explain the details and the path from problem to solution.

13

Yeah, I did learn that it was not the best idea to copy and paste, but it helped me to find the way. ESPhome can be a bumpy road…want an example? I thought I’ll give my little project a better board with 8MB of PSRAM and 16MB Memory. ESP32-S3. So I thought going from s2 to s3 should be easy…and it’s not. Finding the right settings, so the board would not boot in a loop and finding the correct of the two USB ports was one thing, but getting the bloody thing to connect to the Wifi was a nightmare. I have almost everything that looks like an ESP board and never, ever had a problem with Wifi. So today, I l stepped into the trap and my Saturday night was a lonesome one in front of my monitor :slight_smile: