LVGL - disp_bg_color:

ESPHome
1

Diving into LVGL for the first time and seen to be having a fairly basic problem.

I can’t seem to set the background color from its default white to black using disp_bg_color: under lvgl. Below is my ‘color’, ‘display’ and ‘lvgl’.

I can force it to black if I set the ‘display’ key ‘invert_colors’ to true. But then I have to re-define all my colors so they display correctly.

color:
  - id: my_red
    red: 100%
    green: 0%
    blue: 0%
  - id: my_yellow
    red: 100%
    green: 100%
    blue: 0%
  - id: my_green
    red: 0%
    green: 100%
    blue: 0%
  - id: my_blue
    red: 0%
    green: 0%
    blue: 100%
  - id: my_gray
    red: 50%
    green: 50%
    blue: 50%
  - id: my_orange
    red: 100%
    green: 50%
    blue: 0%
  - id: my_teal
    red: 0%
    green: 100%
    blue: 100%
  - id: my_white
    red: 100%
    green: 100%
    blue: 100%
  - id: my_black
    red: 0%
    green: 0%
    blue: 0%

display:
  - platform: ili9xxx
    model: ili9341
    spi_id: lcd
    dc_pin: 
      number: GPIO2
      ignore_strapping_warning: true
    cs_pin:
      number: GPIO15
      ignore_strapping_warning: true
    id: display_1
    update_interval: never
    auto_clear_enabled: false
    show_test_card: false
    invert_colors: false
    dimensions: 
      width: 240
      height: 320
    transform:
      swap_xy: false
      mirror_x: true
      mirror_y: false

lvgl:
  displays:
    - display_1
  touchscreens:
    - touchscreen_1
  buffer_size: 25%
  disp_bg_color: my_black
  pages:
    - id: main_page
      widgets:
        - obj:
            align: CENTER
            width: 220
            height: 300
            x: 0
            y: 0
            pad_all: 3
            bg_opa: TRANSP
            border_opa: TRANSP
            layout:
              type: flex
              flex_flow: COLUMN
              flex_align_main: CENTER
            widgets:
              - button:
                  id: display_time_button
                  width: 100%
                  height: 20%
                  bg_color: my_green
                  widgets:
                  - label:
                      id: display_time
                      text: "--:--am"
                      text_align: CENTER
                      text_font: concert_40
                      text_color: my_black
                      width: 100%
              - button:
                  id: display_temperature_button
                  width: 100%
                  height: 36%
                  bg_color: my_green
                  widgets:
                  - label:
                      id: display_temperature
                      text: "--°F"
                      text_align: CENTER
                      text_font: concert_80
                      text_color: my_black
                      width: 100%
              - button:
                  id: display_humidity_button
                  width: 100%
                  height: 36%
                  bg_color: my_green
                  widgets:
                  - label:
                      id: display_humidity
                      text: "--%"
                      text_align: CENTER
                      text_font: concert_80
                      text_color: my_black
                      width: 100%
2

You need to set the page background opacity to transparent if you want to see the display background. You might as well just set the page background colour instead.

3

That makes sense since we’re looking at a page instead of just the display.

Went with setting the background color by adding the following to each page:

pages:
    - id: main_page
      bg_color: my_black
      widgets:
        - obj:
            align: CENTER
            width: 220
            height: 270