Can't get background gradient color to work as expected (esphome + lvgl + ili9488)

yanivf · April 13, 2025, 11:36pm

Description

can’t get background gradient color to work as expected (esphome + lvgl + ili9488)

What MCU/Processor/Board and compiler are you using?

esp32s3-n16r8 / esphome (platformio)

What LVGL version are you using?

v9

What do you want to achieve?

I want to create a simple gradient that goes from blue to red

What have you tried so far?

Code to reproduce

esphome source:

lvgl:
  gradients:
    - id: color_bar
      direction: ver
      dither: none
      stops:
        - color: blue
          position: 0
        - color: red
          position: 255
  pages:
    - id: color_column_page
      widgets:
        - obj:
            x: 0
            y: 0
            width: 100%
            height: 100%
            bg_grad: color_bar
            bg_opa: COVER
            radius: 0px

translated to:

  color_bar = new lv_grad_dsc_t();
   color_bar->dir = LV_GRAD_DIR_VER;
   color_bar->dither = LV_DITHER_NONE;
   color_bar->stops_count = 2;
   color_bar->stops[0].color = lv_color_make(0, 0, 255);
   color_bar->stops[0].frac = 0;
   color_bar->stops[1].color = lv_color_make(255, 0, 0);
   color_bar->stops[1].frac = 255;
  lvgl_lvglcomponent_id->set_page_wrap(true);
  color_column_page = new LvPageType(false);
  lvgl_lvglcomponent_id->add_page(color_column_page);
   lv_obj_t_id = lv_obj_create(color_column_page->obj);
  lv_theme_apply_obj(lv_obj_t_id);
  lv_obj_set_style_bg_grad(lv_obj_t_id, color_bar, LV_PART_MAIN);
  color_bar = new lv_grad_dsc_t();
   color_bar->dir = LV_GRAD_DIR_VER;
   color_bar->dither = LV_DITHER_NONE;
   color_bar->stops_count = 2;
   color_bar->stops[0].color = lv_color_make(0, 0, 255);
   color_bar->stops[0].frac = 0;
   color_bar->stops[1].color = lv_color_make(255, 0, 0);
   color_bar->stops[1].frac = 255;
  lvgl_lvglcomponent_id->set_page_wrap(true);
  color_column_page = new LvPageType(false);
  lvgl_lvglcomponent_id->add_page(color_column_page);
  #line 14 "/config/modules/lvgl/colorTest.yaml"
   lv_obj_t_id = lv_obj_create(color_column_page->obj);
  lv_theme_apply_obj(lv_obj_t_id);
  lv_obj_set_style_bg_grad(lv_obj_t_id, color_bar, LV_PART_MAIN);
  lv_obj_set_style_bg_opa(lv_obj_t_id, LV_OPA_COVER, LV_PART_MAIN);
  lv_obj_set_style_height(lv_obj_t_id, lv_pct(100), LV_PART_MAIN);
  lv_obj_set_style_radius(lv_obj_t_id, 0, LV_PART_MAIN);
  lv_obj_set_style_width(lv_obj_t_id, lv_pct(100), LV_PART_MAIN);
  lv_obj_set_style_x(lv_obj_t_id, 0, LV_PART_MAIN);
  lv_obj_set_style_y(lv_obj_t_id, 0, LV_PART_MAIN);