Object not clickable

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

image

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.

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)).

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

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?

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.

@embeddedt anything else you can suggest?

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

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?

@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?

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

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

There is a code sample in the initial post.

@Miguel_0101rhe entire lvgl app is about 1200 lines long :laughing:

I will try provide a more elaborate code example tomorrow.

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

Is that object above the pink container?

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

ignition_cont = lv_obj_create(param_cont, NULL);