Making objects draggable (touchscreen)

How-to
1

Description

I want a chain of events. The idea is to be able to click on a button, have it shrink then be able to drag it left or right to perform different actions. I can’t seem to make the object draggable (hope I’m using the right term, I want to be able to “move” it with my finger (I’m using a touchscreen).

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

ESP32 (Espressif Dev Board), PlatformIO

What LVGL version are you using?

7.7.0
Display and touch drivers are provided by tft_eSPI:

//touch read. this function also handles turning on the display and ignoring touches for that action
bool touchRead(lv_indev_drv_t * indev_driver, lv_indev_data_t * data) {

  uint16_t touchX, touchY;
  bool touched = tft.getTouch(&touchX, &touchY, 300);

  if(!touched) {
    return false;
  } else {
    //register the touch
    data->state = touched ? LV_INDEV_STATE_PR : LV_INDEV_STATE_REL; 
    data->point.x = touchX;
    data->point.y = touchY;
  }
  return false;
}

What do you want to achieve?

I have a long chain of events. I want to press on an object, have that object “shrink” in size (centered on the page), then be draggable horizontally.

What have you tried so far?

Everything! I have the object shrinking (wasn’t easy, it involves four animations (height, width, x, y)) but I can’t work out how to make it possible to drag it after. I’m using a touchscreen, I want to be able to “swipe” it (drag it) with my finger to one side or another. I’ve tried lv_obj_set_drag(obj, true), lv_obj_set_drag_parent(obj, true) combined with lv_obj_set_drag_dir(obj, LV_DRAG_DIR_HOR). I’ve even tried disabling the existing event handler that’s used to handle the click.

Code to reproduce

void showModeSelect(lv_obj_t * obj, lv_event_t event) {
  if (event == LV_EVENT_CLICKED) {
    int grow_by = -60;
    resizeButton(obj, grow_by);

    lv_obj_set_drag(obj, true);
    lv_obj_set_drag_dir(obj, LV_DRAG_DIR_HOR);
}

  lb_obj_t * circle = lv_obj_create(scr, NULL);
  lv_obj_set_size(circle, 125, 125);
  lv_obj_align(circle, scr, LV_ALIGN_CENTER, 0, -30);
  lv_obj_set_event_cb(circle, showModeSelect);

I’ve also m

Screenshot and/or video

I’ll try to upload a video later.

2

Hi,

The LV_EVENT_CLICKED event is triggered when you release the button. Try LV_EVENT_PRESSED instead or make the button draggable by default when you create it.

3

Thanks,

I figured it out - it was a bug in my touchscreen handler that was debouncing inputs from the touchscreen, so each touch was seen as a click rather than a constant movement!

4

Is there a possibility to develop this functionality in squareline studio, to also have the same behaviuor in the simualtor?