Image overlapping when style changed

chandumanem · December 8, 2019, 1:57pm

Hi Team,

Description

I am using lv_slider and lv_img in my code. when i increase the knob more than 0 the images are showing with MAX opacity and when i decreased to 0 the images are overlapping. in this i am using styles.
Please see the attached Photos

What do you want to achieve?

when i increase the knob >0 i want to show images with MAX opacity and when i decreased to 0 the images will show with opacity 30. but the images are overlapping.

What have you tried so far?

//style_title
              lv_style_copy(&style_title, &lv_style_plain);
              style_title.text.font = &roboto_bold;
              style_title.text.color=LV_COLOR_WHITE;

              //style_title_opa
              lv_style_copy(&style_title_opa, &lv_style_plain);
              style_title_opa.text.font = &roboto_bold;
              style_title_opa.text.color=LV_COLOR_WHITE;
              style_title_opa.text.opa=LV_OPA_30;

              //style_text
              lv_style_copy(&style_text, &lv_style_plain);
              style_text.text.font = &roboto_regular_25;
              style_text.text.color=LV_COLOR_WHITE;

              //style_img
              lv_style_copy(&style_img, &lv_style_plain);
              style_img.image.opa=LV_OPA_30;

              lv_obj_t * title = lv_label_create(lv_scr_act(), NULL);
              lv_label_set_style(title, LV_LABEL_STYLE_MAIN, &style_text);
              lv_label_set_text(title, "Bedroom (207410)");
              lv_obj_align(title,NULL,LV_ALIGN_IN_TOP_MID,0,30);

              static lv_point_t line_points[] = { {0, 0},{480,0}};

              //style_line
              lv_style_copy(&style_line, &lv_style_plain);
              style_line.line.color = LV_COLOR_GRAY;
              style_line.line.width = 3;
              style_line.line.rounded = 1;

              lv_obj_t * line1;
              line1 = lv_line_create(lv_scr_act(), NULL);
              lv_line_set_points(line1, line_points, 2);
              lv_line_set_style(line1, LV_LINE_STYLE_MAIN, &style_line);
              lv_obj_align(line1, title, LV_ALIGN_OUT_BOTTOM_MID, 0, 20);

              lv_obj_t * msg_text = lv_label_create(lv_scr_act(), NULL);
              lv_label_set_style(msg_text, LV_LABEL_STYLE_MAIN, &style_text);
              lv_label_set_text(msg_text, "TOUCH ANYWHERE TO TURN ON/OFF");
              lv_obj_align(msg_text,line1,LV_ALIGN_IN_BOTTOM_MID,0,50);

              static lv_style_t style_bg;
              lv_style_copy(&style_bg, &lv_style_pretty);
              style_bg.body.border.color=LV_COLOR_WHITE;
              style_bg.body.main_color=LV_COLOR_BLACK;
              style_bg.body.radius = LV_RADIUS_CIRCLE;
              style_bg.body.opa=LV_OPA_0;
              style_bg.body.border.width=3;

              static lv_style_t style_indic;
              lv_style_copy(&style_indic, &lv_style_pretty_color);
              style_indic.body.radius = LV_RADIUS_CIRCLE;
              style_indic.body.main_color=LV_COLOR_WHITE;
              style_indic.body.grad_color=LV_COLOR_WHITE;
              style_indic.body.opa=LV_OPA_100;

              static lv_style_t style_knob;
              lv_style_copy(&style_knob, &lv_style_pretty);
              style_knob.body.opa = LV_OPA_0;
              style_knob.body.border.opa=LV_OPA_0;
              style_knob.body.radius = LV_RADIUS_CIRCLE;

              lv_obj_t * slider = lv_slider_create(lv_scr_act(), NULL);
              lv_obj_set_width(slider, 70);
              lv_obj_set_height(slider, 600);
              lv_obj_set_event_cb(slider, slider_event_cb);
              lv_slider_set_range(slider, 0, 100);
              lv_slider_set_style(slider, LV_SLIDER_STYLE_BG, &style_bg);
              lv_slider_set_style(slider, LV_SLIDER_STYLE_INDIC,&style_indic);
              lv_slider_set_style(slider, LV_SLIDER_STYLE_KNOB, &style_knob);
              lv_obj_align(slider,msg_text,LV_ALIGN_OUT_BOTTOM_MID,-100,30);
              /* Create a label below the slider */
              slider_label = lv_label_create(lv_scr_act(), NULL);
              lv_label_set_style(slider_label, LV_LABEL_STYLE_MAIN, &style_title_opa);
              lv_label_set_text(slider_label, "0");
              lv_obj_set_auto_realign(slider_label, true);
              lv_obj_align(slider_label,slider,LV_ALIGN_OUT_BOTTOM_MID,0,20);

              power = lv_img_create(lv_scr_act(), NULL);
              lv_img_set_src(power, &dim_power);
              lv_img_set_style(power,LV_IMG_STYLE_MAIN,&style_img);
              lv_obj_align(power, slider_label, LV_ALIGN_OUT_RIGHT_MID, 130, -50);

              on_off = lv_label_create(lv_scr_act(), NULL);
              lv_label_set_style(on_off, LV_LABEL_STYLE_MAIN, &style_title_opa);
			  lv_label_set_text(on_off, "OFF");
              lv_obj_align(on_off,power,LV_ALIGN_OUT_RIGHT_MID,10,0);

              away_mode = lv_img_create(lv_scr_act(), NULL);
              lv_img_set_src(away_mode, &dim_away);
              lv_img_set_style(away_mode,LV_IMG_STYLE_MAIN,&style_img);
              lv_obj_align(away_mode, on_off, LV_ALIGN_CENTER, 0, -180);

              timer = lv_img_create(lv_scr_act(), NULL);
              lv_img_set_src(timer, &dim_timer);
              lv_img_set_style(timer,LV_IMG_STYLE_MAIN,&style_img);
              lv_obj_align(timer, away_mode, LV_ALIGN_CENTER, 0, -180);

              bulb = lv_img_create(lv_scr_act(), NULL);
              lv_img_set_src(bulb, &dim_bulb);
              lv_img_set_style(bulb,LV_IMG_STYLE_MAIN,&style_img);
              lv_obj_align(bulb, timer, LV_ALIGN_CENTER, 0, -180);

static void slider_event_cb(lv_obj_t * slider, lv_event_t event)
{
    if(event == LV_EVENT_RELEASED) {
        static char buf[4]; /* max 3 bytes for number plus 1 null terminating byte */
        snprintf(buf, 4, "%u", lv_slider_get_value(slider));
        lv_label_set_text(slider_label, buf);

        if(lv_slider_get_value(slider)==0){
        	lv_label_set_style(slider_label, LV_LABEL_STYLE_MAIN, &style_title_opa);
        	lv_label_set_text(on_off,"OFF");
        	lv_label_set_style(on_off, LV_LABEL_STYLE_MAIN, &style_title_opa);
        	lv_img_set_style(power,LV_IMG_STYLE_MAIN,&style_img);
        	lv_img_set_style(away_mode,LV_IMG_STYLE_MAIN,&style_img);
        	lv_img_set_style(timer,LV_IMG_STYLE_MAIN,&style_img);
        	lv_img_set_style(bulb,LV_IMG_STYLE_MAIN,&style_img);
        }else if(lv_slider_get_value(slider)>0){
        	lv_label_set_style(slider_label, LV_LABEL_STYLE_MAIN, &style_title);
        	lv_label_set_text(on_off,"ON");
        	lv_label_set_style(on_off, LV_LABEL_STYLE_MAIN, &style_title);
        	lv_img_set_style(power,LV_IMG_STYLE_MAIN,NULL);
        	lv_img_set_style(away_mode,LV_IMG_STYLE_MAIN,NULL);
        	lv_img_set_style(timer,LV_IMG_STYLE_MAIN,NULL);
        	lv_img_set_style(bulb,LV_IMG_STYLE_MAIN, NULL);


        }
    }
}

Opacity 100:

Overlapping :

Thanks.

chandumanem · December 12, 2019, 9:56am

Hi Team,

can anyone suggest me a solution for it.

Thanks.

embeddedt · December 12, 2019, 2:24pm

Please be patient; we will respond when we get a chance to look at it in detail.

kisvegabor · December 14, 2019, 10:54am

I wanted to try the code you attached but there were a lot of undefined variables.

To investigate it please send the images, your lv_conf.h too.

Besides can you reproduce the issue in a more simple way too? E.g. manually changing the style without the slider.

chandumanem · December 17, 2019, 1:25pm

Hi Team,

Please look the following sample code.

void opacity(void)
{
  
#if LV_GIZMO_WALLPAPER
    lv_obj_t * wp = lv_img_create(lv_disp_get_scr_act(NULL), NULL);
    lv_img_set_src(wp, &black_backround);
    lv_obj_set_protect(wp, LV_PROTECT_POS);
#endif

        //style_img
        lv_style_copy(&style_img, &lv_style_plain);
        style_img.image.opa=LV_OPA_30;

        /*Create an Image for bulb */
        bulb = lv_img_create(lv_scr_act(), NULL);
        lv_img_set_src(bulb, &dim_bulb);
        lv_img_set_style(bulb,LV_IMG_STYLE_MAIN,&style_img);
        lv_obj_align(bulb, NULL, LV_ALIGN_IN_TOP_MID, 0, 200);

        lv_obj_t * label;
        lv_obj_t * btn1 = lv_btn_create(lv_scr_act(), NULL);
        lv_obj_set_event_cb(btn1, event_handler1);
        lv_obj_align(btn1, NULL, LV_ALIGN_IN_TOP_LEFT, 100, 400);
        label = lv_label_create(btn1, NULL);
        lv_label_set_text(label, "Change");

        lv_obj_t * btn2 = lv_btn_create(lv_scr_act(), NULL);
        lv_obj_set_event_cb(btn2, event_handler2);
        lv_obj_align(btn2, NULL, LV_ALIGN_IN_TOP_RIGHT, -100, 400);
        label = lv_label_create(btn2, NULL);
        lv_label_set_text(label, "Unchange");


        static lv_style_t style_list;
        lv_style_copy(&style_list, &lv_style_plain);

        style_list.image.color=LV_COLOR_WHITE;
        style_list.body.main_color=LV_COLOR_BLACK;
        style_list.body.grad_color=LV_COLOR_BLACK;
        style_list.text.color=LV_COLOR_WHITE;

}

static void event_handler1(lv_obj_t * obj, lv_event_t event)
{
    if(event == LV_EVENT_CLICKED)
    {
    	lv_img_set_style(bulb,LV_IMG_STYLE_MAIN,NULL);
    }
}
static void event_handler2(lv_obj_t * obj, lv_event_t event)
{
    if(event == LV_EVENT_CLICKED)
    {
    	lv_img_set_style(bulb,LV_IMG_STYLE_MAIN,&style_img);
    }
}

Thanks.

embeddedt · December 19, 2019, 1:24am

Please provide the dim_bulb image and lv_conf.h, as @kisvegabor requested.

chandumanem · December 24, 2019, 6:09am

Hi Team,

Please look the attachments given below.
Converted dim_bulb image with following link: https://littlevgl.com/image-to-c-array
bulb.png(original image):
bulb
dim_bulb(C-array file):
dim_bulb.c (391.9 KB)
lv_conf.h file
lv_conf.h (14.9 KB)

Thanks.

kisvegabor · December 30, 2019, 1:25pm

Thanks.

It was a bug in the library. I’ve fixed it in the master.

chandumanem · January 22, 2020, 1:21pm

Thanks.

May i know which file should i replace in my code? or clone entire library from git?

embeddedt · January 22, 2020, 2:45pm

Running git pull should update everything, assuming you’ve cloned it.