Wearable native

Circle Slider

This feature is supported in wearable applications only.

The circle slider changes corresponding to rotary events. The circle slider not only extends the UI feature of the elm_slider, but also replaces the functionalities of the elm_slider in a circular design.

Figure: Circle Slider

Circle Slider

Adding an Eext Slider Object

To create a circle slider, use the eext_circle_object_slider_add() function.

Evas_Object *circle_slider = NULL;
circle_slider = eext_circle_object_slider_add(parent, surface);

Activating a Rotary Event

You can activate or deactivate the circle slider by using the eext_rotary_object_event_activated_set() function. If the second parameter is EINA_TRUE, the circle slider can receive the rotary event. Otherwise, the circle slider cannot receive the rotary event.

eext_rotary_object_event_activated_set(circle_slider, EINA_TRUE);

Using the Circle Slider Property

A circle slider has the following styles:

  • default

When created, the circle slider has default style automatically.

Circle slider objects support the following circle object API calls:

  • eext_circle_object_value_min_max_set()
  • eext_circle_object_value_min_max_get()
  • eext_circle_object_value_set()
  • eext_circle_object_value_get()
  • eext_circle_object_angle_min_max_set()
  • eext_circle_object_angle_min_max_get()
  • eext_circle_object_angle_offset_set()
  • eext_circle_object_angle_offset_get()
  • eext_circle_object_angle_set()
  • eext_circle_object_angle_get()
  • eext_circle_object_line_width_set()
  • eext_circle_object_line_width_get()
  • eext_circle_object_radius_set()
  • eext_circle_object_radius_get()
  • eext_circle_object_color_set()
  • eext_circle_object_color_get()
  • eext_circle_object_disabled_set()
  • eext_circle_object_disabled_get()

A circle slider has the following items:

  • default: Default circle item, It draws slider bar.
  • bg: Background circle item.

You can change the properties of the items by using eext_circle_object_item* APIs.

For more information, see the Efl Extension Circle Slider API.

Configuring the Circle Slider

The circle slider step value is used when the rotary event increases or decreases the circle slider value. It can be set with the eext_circle_object_slider_step_set() function.

Here, the step value is set to 0.5.

eext_circle_object_slider_step_set(circle_slider, 0.5);

Before using the circle slider, its minimum and maximum values are set with eext_circle_object_value_min_max_set(). The current value is set with eext_circle_object_value_set().

Here, the minimum value is set to 0.0, the maximum value to 15.0, and the current value to 3.0.

eext_circle_object_value_min_max_set(circle_slider, 0.0, 15.0);
eext_circle_object_value_set(circle_slider, 3.0);

You can retrieve the current value of the circle slider with the eext_circle_object_value_get() function.

double value = eext_circle_object_value_get(circle_slider);

Using Circle Slider Callbacks

The circle slider emits the following signal:

  • value,changed: The rotary event changes the circle slider value.

For this signal, event_info is NULL.

This is how to register a callback on the value,changed signal.

{
   evas_object_smart_callback_add(slider, "value,changed", _value_changed_cb, data);
}

// Callback function for the "value,changed" signal
// This callback is called when a value of the circle slider is changed
static void
_value_changed_cb(void *data, Evas_Object *obj, void *event_info)
{
   dlog_print(DLOG_INFO, LOG_TAG, "Circle slider value changed. \n");
}
Go to top