Object not clickable

reso · May 3, 2021, 5:33pm

Description

I’m trying to make an object fire a callback when clicked. This object contains labels and LED’s but so far I have been unsuccessful and this only seems to work on areas of the object that do not have LED’s or labels on them.

In the code below you can see I’ve enabled click for the object and defined a callback. This only works if I click the very bottom part of the object (CYL5 line - it’s empty now as opposed to the screenshot below).
I want to be able to click anything in the object (any label or LED) within the green lines to trigger the callback function.

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

Teensy 4.0 - Arduino IDE

What LVGL version are you using?

7.10.1

Code to reproduce

static lv_obj_t * gauge_cont;
static lv_obj_t * param_cont;
static lv_obj_t * ignition_cont;

LV_EVENT_CB_DECLARE(rstIgnitionVals);

void startScreen(){

    //Create screen object
    lv_obj_t * obj0 = lv_obj_create(lv_scr_act(), NULL);
    lv_obj_set_width(obj0, 480);
    lv_obj_set_height(obj0, 320);
    lv_obj_set_x(obj0, 0);
    lv_obj_set_y(obj0, 0);
    lv_obj_clean_style_list(obj0, LV_OBJ_PART_MAIN);
    lv_obj_add_style(obj0, LV_GAUGE_PART_NEEDLE, &style1);

    //Left side gauge object
    gauge_cont = lv_obj_create(obj0, NULL);
    lv_obj_clean_style_list(gauge_cont, LV_OBJ_PART_MAIN);
    lv_obj_set_x(gauge_cont, 0);
    lv_obj_set_y(gauge_cont, 0);
    lv_obj_set_width(gauge_cont, 320);
    lv_obj_set_height(gauge_cont, 320);

    //Right side param object
    param_cont = lv_obj_create(obj0,NULL);
    lv_obj_clean_style_list(param_cont, LV_OBJ_PART_MAIN);
    lv_obj_set_x(param_cont, 280);
    lv_obj_set_y(param_cont, 0);
    lv_obj_set_width(param_cont, 200);
    lv_obj_set_height(param_cont, 320);
    lv_obj_set_click(param_cont, true);

    //Bottom side ignition param object
    ignition_cont = lv_obj_create(param_cont, NULL);
    lv_obj_clean_style_list(ignition_cont, LV_OBJ_PART_MAIN);
    lv_obj_set_x(ignition_cont, 30);
    lv_obj_set_y(ignition_cont, 220);
    lv_obj_set_width(ignition_cont, 170);
    lv_obj_set_height(ignition_cont, 100);
    lv_obj_set_click(ignition_cont, true);
    lv_obj_set_event_cb(ignition_cont, rstIgnitionVals);


    /*
    A bunch more code creating labels and LED's all assigned to ignition_cont object
    */

}

LV_EVENT_CB_DECLARE(rstIgnitionVals){
//Resets some variables
};

Screenshot and/or video

Yellow is gauge_cont
Purple is param_cont
Green is ignition_cont - CYL5 label and inline objects are not in the actual code anymore and only clicking on that empty area at the bottom of the container triggers the callback.

embeddedt · May 3, 2021, 5:36pm

Call lv_obj_set_click(obj, false) on all the objects you don’t want to receive click events on. This will cause them to be treated as transparent and pass click events through to the parent (where you should set lv_obj_set_click(obj, true)).

reso · May 3, 2021, 8:56pm

Thanks @embeddedt

I applied the set_click as false on all object’s within ignition_cont.
Not only does it still not work, but clicking down at the bottom (the last 20px between the last inline labels and end of the display) no longer triggers the callback as it did before.

I also tried to bring ignition_cont to the foreground but it didn’t help either

embeddedt · May 3, 2021, 9:14pm

Hmm… I may have misunderstood something. I thought you were trying to detect clicks on the whole screen area (including the gauge), but I think you were just aiming for the green box.

In that case, the only change that you should need to make is to run lv_obj_set_click(obj, false) on the labels and LEDs. Is that what you had tried initially?

reso · May 4, 2021, 3:27am

Yep, I am aiming for a single callback to fire on a click anywhere in the green box.

The labels and leds have set_click to false as you suggested in the previous post.
Ignition_cont (the green container) has set_click as true.

reso · May 5, 2021, 3:39pm

@embeddedt anything else you can suggest?

A buddy of mine suggested to make the green object a button object - that might work?

embeddedt · May 5, 2021, 5:09pm

A button is essentially a container with click enabled and a default layout, so I’m not sure that it would make a difference. However, it wouldn’t hurt to try.

It seems to me that there is still something taking the click events. Is the pink-outlined container above or below the green one in terms of Z-index?

reso · May 5, 2021, 5:18pm

@embeddedt the pink container is (param_cont) is the parent object to the green container (ignition_cont).
I don’t know which one is above/below in terms of z-index
Should I try call send_to_background() on the pink container?

embeddedt · May 5, 2021, 5:21pm

Parent objects are always behind their children so that shouldn’t be an issue.

Miguel_0101 · May 5, 2021, 6:15pm

Would you mind if you posted your code so we can try to fix it?

embeddedt · May 5, 2021, 7:43pm

There is a code sample in the initial post.

reso · May 5, 2021, 8:04pm

@Miguel_0101rhe entire lvgl app is about 1200 lines long

I will try provide a more elaborate code example tomorrow.

reso · May 5, 2021, 8:36pm

static lv_obj_t * gauge_cont;
static lv_obj_t * param_cont;
static lv_obj_t * ignition_cont;

LV_EVENT_CB_DECLARE(rstIgnitionVals);

void startScreen(){

    //Create screen object
    lv_obj_t * obj0 = lv_obj_create(lv_scr_act(), NULL);
    lv_obj_set_width(obj0, 480);
    lv_obj_set_height(obj0, 320);
    lv_obj_set_x(obj0, 0);
    lv_obj_set_y(obj0, 0);
    lv_obj_clean_style_list(obj0, LV_OBJ_PART_MAIN);
    lv_obj_add_style(obj0, LV_GAUGE_PART_NEEDLE, &style1);

    //Left side gauge object
    gauge_cont = lv_obj_create(obj0, NULL);
    lv_obj_clean_style_list(gauge_cont, LV_OBJ_PART_MAIN);
    lv_obj_set_x(gauge_cont, 0);
    lv_obj_set_y(gauge_cont, 0);
    lv_obj_set_width(gauge_cont, 320);
    lv_obj_set_height(gauge_cont, 320);

    //Right side param object
    param_cont = lv_obj_create(obj0,NULL);
    lv_obj_clean_style_list(param_cont, LV_OBJ_PART_MAIN);
    lv_obj_set_x(param_cont, 280);
    lv_obj_set_y(param_cont, 0);
    lv_obj_set_width(param_cont, 200);
    lv_obj_set_height(param_cont, 320);
    lv_obj_set_click(param_cont, true);

    //Bottom side ignition param object
    ignition_cont = lv_obj_create(param_cont, NULL);
    lv_obj_clean_style_list(ignition_cont, LV_OBJ_PART_MAIN);
    lv_obj_set_x(ignition_cont, 30);
    lv_obj_set_y(ignition_cont, 220);
    lv_obj_set_width(ignition_cont, 170);
    lv_obj_set_height(ignition_cont, 100);
    lv_obj_set_click(ignition_cont, true);
    lv_obj_set_event_cb(ignition_cont, rstIgnitionVals);


    lv_obj_t * label1 = lv_label_create(ignition_cont, NULL);
    lv_obj_set_width(label1, 150);
    lv_label_set_text(label1, "Label 1");
    lv_obj_align(label1, NULL, LV_ALIGN_IN_TOP_MID, 0, 0);

    lv_obj_t * label2 = lv_label_create(ignition_cont, NULL);
    lv_obj_set_width(label2, 150);
    lv_label_set_text(label2, "Label 2");
    lv_obj_align(label1, NULL, LV_ALIGN_CENTER, 0, 0);


    /*
    A bunch more code creating labels and LED's all assigned to ignition_cont object
    */

}

LV_EVENT_CB_DECLARE(rstIgnitionVals){
//Resets some variables
};

Added two labels to ignition_cont parent object for testing purpose
Clicking on these two labels are in any area of ignition_cont should trigger the rstIgnitionVals callback

Miguel_0101 · May 6, 2021, 11:02am

reso:

//Bottom side ignition param object
    ignition_cont = lv_obj_create(param_cont, NULL);
    lv_obj_clean_style_list(ignition_cont, LV_OBJ_PART_MAIN);
    lv_obj_set_x(ignition_cont, 30);
    lv_obj_set_y(ignition_cont, 220);
    lv_obj_set_width(ignition_cont, 170);
    lv_obj_set_height(ignition_cont, 100);
    lv_obj_set_click(ignition_cont, true);
    lv_obj_set_event_cb(ignition_cont, rstIgnitionVals);

Is that object above the pink container?

reso · May 6, 2021, 1:00pm

Yes, it’s the parent to ignition_cont.
The pink container is param_cont

ignition_cont = lv_obj_create(param_cont, NULL);

reso · May 9, 2021, 12:55pm

I tried setting ignition_cont to a button.
Not only that didn’t work, but it changed the positions of all the elements assigned to it.

So, back to square one

reso · May 14, 2021, 1:48pm

@embeddedt @kisvegabor anything else you can suggest that I haven’t tried yet?

embeddedt · May 14, 2021, 1:53pm

Let’s see if @kisvegabor has any ideas; I’m not sure what the problem could be. The behavior matches that of an extra object being on top, but there is no extra object in your code.

embeddedt · May 15, 2021, 1:22pm

@reso I’ve finally gotten a chance to try your example, and unfortunately it seems to work for me. I added some background colors to the containers to make them visible, and also added padding to the label to make sure I was really clicking it (since I use a smaller font size).

Can you try this code on its own (without running the rest of your application) and see if it works?

//Create screen object
    lv_obj_t * obj0 = lv_obj_create(lv_scr_act(), NULL);
    lv_obj_set_width(obj0, 480);
    lv_obj_set_height(obj0, 320);
    lv_obj_set_x(obj0, 0);
    lv_obj_set_y(obj0, 0);
    lv_obj_clean_style_list(obj0, LV_OBJ_PART_MAIN);

    //Left side gauge object
    gauge_cont = lv_obj_create(obj0, NULL);
    lv_obj_clean_style_list(gauge_cont, LV_OBJ_PART_MAIN);
    lv_obj_set_style_local_bg_color(gauge_cont, LV_CONT_PART_MAIN, LV_STATE_DEFAULT, LV_COLOR_YELLOW);
    lv_obj_set_x(gauge_cont, 0);
    lv_obj_set_y(gauge_cont, 0);
    lv_obj_set_width(gauge_cont, 320);
    lv_obj_set_height(gauge_cont, 320);

    //Right side param object
    param_cont = lv_obj_create(obj0,NULL);
    lv_obj_clean_style_list(param_cont, LV_OBJ_PART_MAIN);
    lv_obj_set_style_local_bg_color(param_cont, LV_CONT_PART_MAIN, LV_STATE_DEFAULT, lv_color_make(0xff, 0x00, 0xff));
    lv_obj_set_x(param_cont, 280);
    lv_obj_set_y(param_cont, 0);
    lv_obj_set_width(param_cont, 200);
    lv_obj_set_height(param_cont, 320);
    lv_obj_set_click(param_cont, true);

    //Bottom side ignition param object
    ignition_cont = lv_obj_create(param_cont, NULL);
    lv_obj_clean_style_list(ignition_cont, LV_OBJ_PART_MAIN);
    lv_obj_set_x(ignition_cont, 30);
    lv_obj_set_y(ignition_cont, 220);
    lv_obj_set_width(ignition_cont, 170);
    lv_obj_set_height(ignition_cont, 100);
    lv_obj_set_click(ignition_cont, true);
    lv_obj_set_style_local_bg_color(ignition_cont, LV_CONT_PART_MAIN, LV_STATE_DEFAULT, LV_COLOR_GREEN);
    lv_obj_set_event_cb(ignition_cont, rstIgnitionVals);


    lv_obj_t * label1 = lv_label_create(ignition_cont, NULL);
    lv_obj_set_width(label1, 150);
    lv_label_set_text(label1, "Label 1");
    lv_obj_set_click(label1, false);
    lv_obj_set_style_local_bg_color(label1, LV_CONT_PART_MAIN, LV_STATE_DEFAULT, LV_COLOR_BLUE);
    lv_obj_set_style_local_bg_opa(label1, LV_CONT_PART_MAIN, LV_STATE_DEFAULT, LV_OPA_COVER);
    lv_obj_set_style_local_pad_all(label1, LV_CONT_PART_MAIN, LV_STATE_DEFAULT, 10);
    lv_obj_align(label1, NULL, LV_ALIGN_IN_TOP_MID, 0, 0);

    lv_obj_t * label2 = lv_label_create(ignition_cont, NULL);
    lv_obj_set_width(label2, 150);
    lv_label_set_text(label2, "Label 2");
    lv_obj_set_click(label2, false);
    lv_obj_align(label2, NULL, LV_ALIGN_CENTER, 0, 0);

reso · May 16, 2021, 6:04pm

@embeddedt thanks for testing!
Before I go ahead and write a test app, do you mind telling me with that version of lvgl you tested it?