Gesture Detector: Implementing Gestures Provided by the EFL Library

This tutorial demonstrates how you can implement different types of gestures provided by the EFL library and instructions on how to use them.

Warm-up

Become familiar with the Elementary and Evas API basics by learning about:

• Initializing Touch Gestures

  Initialize the touch gestures for use.

• Implementing Touch Gestures

  Implement different kinds of touch gestures.

Initializing Touch Gestures

The EFL library provides a wide range of touch gestures, such as tap, double tap, triple tap, long tap, momentum, line, zoom and rotate, which can be used by the application to build a dynamic user interface interaction which is simple to use as well as intuitive.

The create_base_gui function creates the application layout. It starts by creating a window, then adds the elm_conformant component to it to decorate the window with an indicator. It then adds the elm_naviframe component which acts as a view manager for the window and provides the window title functionality. After this it creates a gesture view by using the create_main_view() function and adds it to naviframe.

static void
create_base_gui(appdata_s *ad)
{
   Elm_Object_Item *nf_it, *tabbar_it;
   // Window
   ad->win = elm_win_util_standard_add(PACKAGE, PACKAGE);
   elm_win_autodel_set(ad->win, EINA_TRUE);
   evas_object_smart_callback_add(ad->win, "delete,request", win_delete_request_cb, NULL);
   // Conformant
   ad->conform = elm_conformant_add(ad->win);
   elm_win_conformant_set(ad->win, EINA_TRUE);
   evas_object_size_hint_weight_set(ad->conform, EVAS_HINT_EXPAND, EVAS_HINT_EXPAND);
   elm_win_resize_object_add(ad->win, ad->conform);
   evas_object_show(ad->conform);
   // Naviframe
   ad->nf = elm_naviframe_add(ad->layout);
   // Calendar View
   create_main_view(ad);
   elm_naviframe_item_push(ad->nf, "Calendar", NULL, NULL, ad->calendar, NULL);
   elm_object_part_content_set(ad->layout, "elm.swallow.content", ad->nf);
   // Show window after the base GUI is set up
   evas_object_show(ad->win);
}

The create_main_view function creates the application layout by arranging the labels and rectangles by using recursive composition of the box layout:

static void
create_main_view(appdata_s *ad)
{
   // Box
   ad->box = elm_box_add(ad->nf);
   evas_object_size_hint_weight_set(ad->box, EVAS_HINT_EXPAND, VAS_HINT_EXPAND);
   elm_box_padding_set(ad->box, 0, 5 * elm_config_scale_get());
   evas_object_show(ad->box);
   // Event Rect
   ad->rect = evas_object_rectangle_add(evas_object_evas_get(ad->box));
   evas_object_size_hint_weight_set(ad->rect, EVAS_HINT_EXPAND, VAS_HINT_EXPAND);
   evas_object_size_hint_align_set(ad->rect, EVAS_HINT_FILL, EVAS_HINT_FILL);
   evas_object_color_set(ad->rect, 204, 204, 204, 255);
   evas_object_repeat_events_set(ad->rect, EINA_TRUE);

   ad->gl = create_gesture_layer(ad);

   elm_box_pack_end(ad->box, ad->rect);
   evas_object_show(ad->rect);
}

A gesture layer is added to the rectangle object. This layer is able to receive the gesture event:

static Evas_Object *
create_gesture_layer(appdata_s *ad)
{
   Evas_Object *g = elm_gesture_layer_add(ad->win);
   elm_gesture_layer_attach(g, ad->rect);
}

The following figure illustrates the Gesture Detector.

Figure: Gesture Detector screen

Implementing Touch Gestures

The elm_gesture_layer_attach() is the function to which a gesture layer for a particular object is attached.

A gesture can have 4 different states:

• ELM_GESTURE_STATE_START
• ELM_GESTURE_STATE_MOVE
• ELM_GESTURE_STATE_ABORT
• ELM_GESTURE_STATE_END

Every gesture starts with the ELM_GESTURE_STATE_START state and finishes with either the ELM_GESTURE_STATE_END or ELM_GESTURE_STATE_ABORT state depending on whether the gesture is completed or aborted on that object.

If an application only needs to track a finished gesture, it can listen for the finished state only. For a more complete control of the gesture, an application can listen for all state changes for that particular gesture.

The elm_gesture_layer_cb_set() function is used for registering state change callback for a particular gesture.

For more information about the gestures, see the gesture documentation.

To detect touch gestures:

• The following example adds callbacks for listening to the tap gesture:

  elm_gesture_layer_cb_set(g, ELM_GESTURE_N_TAPS,
     ELM_GESTURE_STATE_START, n_finger_tap_start, ad);
  elm_gesture_layer_cb_set(g, ELM_GESTURE_N_TAPS,
     ELM_GESTURE_STATE_END, n_finger_tap_end, ad);
  elm_gesture_layer_cb_set(g, ELM_GESTURE_N_TAPS,
     ELM_GESTURE_STATE_ABORT, n_finger_tap_abort, ad);
  

• The following example adds callbacks for listening to the double tap gesture:

  elm_gesture_layer_cb_set(g, ELM_GESTURE_N_DOUBLE_TAPS,
     ELM_GESTURE_STATE_START, dbl_click_start, ad);
  elm_gesture_layer_cb_set(g, ELM_GESTURE_N_DOUBLE_TAPS,
     ELM_GESTURE_STATE_MOVE, dbl_click_move, ad);
  elm_gesture_layer_cb_set(g, ELM_GESTURE_N_DOUBLE_TAPS,
     ELM_GESTURE_STATE_END, dbl_click_end, ad);
  elm_gesture_layer_cb_set(g, ELM_GESTURE_N_DOUBLE_TAPS,
     ELM_GESTURE_STATE_ABORT, dbl_click_abort, ad);
  

• The following example adds callbacks for listening to the triple tap gesture:

  elm_gesture_layer_cb_set(g, ELM_GESTURE_N_TRIPLE_TAPS,
     ELM_GESTURE_STATE_START, triple_click_start, ad);
  elm_gesture_layer_cb_set(g, ELM_GESTURE_N_TRIPLE_TAPS,
     ELM_GESTURE_STATE_MOVE, triple_click_move, ad);
  elm_gesture_layer_cb_set(g, ELM_GESTURE_N_TRIPLE_TAPS,
     ELM_GESTURE_STATE_END, triple_click_end, ad);
  elm_gesture_layer_cb_set(g, ELM_GESTURE_N_TRIPLE_TAPS,
     ELM_GESTURE_STATE_ABORT, triple_click_abort, ad);
  

• The following example adds callbacks for listening to the long tap gesture:

  elm_gesture_layer_cb_set(g, ELM_GESTURE_MOMENTUM,
     ELM_GESTURE_STATE_START, momentum_start, ad);
  elm_gesture_layer_cb_set(g, ELM_GESTURE_MOMENTUM,
     ELM_GESTURE_STATE_END, momentum_end, ad);
  elm_gesture_layer_cb_set(g, ELM_GESTURE_MOMENTUM,
     ELM_GESTURE_STATE_ABORT, momentum_abort, ad);
  elm_gesture_layer_cb_set(g, ELM_GESTURE_MOMENTUM,
     ELM_GESTURE_STATE_MOVE, momentum_move, ad);
  

• The following example adds callbacks for listening to the momentum gesture:

  elm_gesture_layer_cb_set(g, ELM_GESTURE_MOMENTUM,
     ELM_GESTURE_STATE_START, momentum_start, ad);
  elm_gesture_layer_cb_set(g, ELM_GESTURE_MOMENTUM,
     ELM_GESTURE_STATE_END, momentum_end, ad);
  elm_gesture_layer_cb_set(g, ELM_GESTURE_MOMENTUM,
     ELM_GESTURE_STATE_ABORT, momentum_abort, ad);
  elm_gesture_layer_cb_set(g, ELM_GESTURE_MOMENTUM,
     ELM_GESTURE_STATE_MOVE, momentum_move, ad);
  

• The following example adds callbacks for listening to the line gesture:

  elm_gesture_layer_cb_set(g, ELM_GESTURE_N_LINES,
     ELM_GESTURE_STATE_START, line_start, ad);
  elm_gesture_layer_cb_set(g, ELM_GESTURE_N_LINES,
     ELM_GESTURE_STATE_MOVE, line_move, ad);
  elm_gesture_layer_cb_set(g, ELM_GESTURE_N_LINES,
     ELM_GESTURE_STATE_END, line_end, ad);
  elm_gesture_layer_cb_set(g, ELM_GESTURE_N_LINES,
     ELM_GESTURE_STATE_ABORT, line_abort, ad);
  

• The following examples add callbacks for listening to the flick gesture:

  elm_gesture_layer_cb_set(g, ELM_GESTURE_N_FLICKS,
     ELM_GESTURE_STATE_START, flick_start, ad);
  elm_gesture_layer_cb_set(g, ELM_GESTURE_N_FLICKS,
     ELM_GESTURE_STATE_END, flick_end, ad);
  elm_gesture_layer_cb_set(g, ELM_GESTURE_N_FLICKS,
     ELM_GESTURE_STATE_ABORT, flick_abort, ad);
  

• The following examples add callbacks for listening to the zoom gesture:

  elm_gesture_layer_cb_set(g, ELM_GESTURE_ZOOM,
     ELM_GESTURE_STATE_START, zoom_start, ad);
  elm_gesture_layer_cb_set(g, ELM_GESTURE_ZOOM,
     ELM_GESTURE_STATE_END, zoom_end, ad);
  elm_gesture_layer_cb_set(g, ELM_GESTURE_ZOOM,
     ELM_GESTURE_STATE_ABORT, zoom_abort, ad);
  elm_gesture_layer_cb_set(g, ELM_GESTURE_ZOOM,
     ELM_GESTURE_STATE_MOVE, zoom_move, ad);
  

• The following example adds callbacks for listening to the rotate gesture:

  elm_gesture_layer_cb_set(g, ELM_GESTURE_ROTATE,
     ELM_GESTURE_STATE_START, rotate_start, ad);
  elm_gesture_layer_cb_set(g, ELM_GESTURE_ROTATE,
     ELM_GESTURE_STATE_END, rotate_end, ad);
  elm_gesture_layer_cb_set(g, ELM_GESTURE_ROTATE,
     ELM_GESTURE_STATE_ABORT, rotate_abort, ad);
  elm_gesture_layer_cb_set(g, ELM_GESTURE_ROTATE,
     ELM_GESTURE_STATE_MOVE, rotate_move, ad);
  

• The following example adds a callback for getting the tap gesture finishing notification:

  static Evas_Event_Flags
  n_finger_tap_end(void *data, void *event_info)
  {
     appdata_s *ad = data;
     Elm_Gesture_Taps_Info *p = (Elm_Gesture_Taps_Info *) event_info;
     return EVAS_EVENT_FLAG_ON_HOLD;
  }