Circle Components: Creating a Circular View

This tutorial demonstrates how you can create a circular view with circle UI components, or circle components, which are supported by EFL Extension library. Additionally, you learn how to make your application to operate with rotary events. You need to test your application with a circular device or an emulator with circular display which has a rotary device in it.

This feature is supported in wearable applications only.

Warm-up

Become familiar with the Efl Extension circle component basics by learning about:

Creating the Circle Surface
Create a surface to show the circular UI of your application.
Creating the Circle Components
Use circular UI components which operate with rotary events.

Creating the Circle Surface

Figure: An application view with Circle Slider

Circle Slider

To show the circular UI of circle components, circle surface (Eext_Circle_Surface type) object is needed. The surface object can be connected with several circle components to manage the display. The following code shows how to create a surface object in an elementary naviframe component.

Evas_Object *naviframe;
Eext_Circle_Surface * surface;

naviframe = elm_naviframe_add(parent);
evas_object_show(naviframe);

surface = eext_circle_surface_naviframe_add(naviframe);

Creating the Circle Components

EFL Extension supports several circle components which operate with rotary events. There circle components are responsible for circular UI which fits with circular display.

To create the circle components:

Create the circle slider.
The circle slider provides a circular UI and operates with rotary events to change its value. After calling eext_rotary_object_event_activated_set to the circle slider, every rotary event changes its value with step 0.5.
```
Evas_Object* slider;

slider = eext_circle_object_slider_add(parent, surface);
eext_circle_object_slider_step_set(slider, 0.5);
eext_rotary_object_event_activated_set(slider, EINA_TRUE);
```

Create the circle progressbar.

The circle progressbar provides a circular UI only. Its design can be changed by eext_circle_object APIs.

Evas_Object* progressbar;

progressbar = eext_circle_object_progressbar_add(parent, surface);
eext_circle_object_value_min_max_set(progressbar, 0.0, 100.0);
eext_circle_object_value_set(progressbar, 50);
evas_object_show(progressbar);

Create the circle scroller.

The circle scroller provides a circular scroll bar UI to an elementary scroller and operates with rotary events to scroll its content. After calling eext_rotary_object_event_activated_set to the circle scroller, every rotary event moves its content following the scroll direction.

Evas_Object* scroller;
Evas_Object* circle_scroller;

scroller = elm_scroller_add(parent);
elm_object_content_set(parent, scroller);

circle_scroller = eext_circle_object_scroller_add(scroller, surface);
eext_circle_object_scroller_policy_set(circle_scroller, ELM_SCROLLER_POLICY_OFF, ELM_SCROLLER_POLICY_AUTO);
eext_rotary_object_event_activated_set(circle_scroller, EINA_TRUE);

Create the circle genlist.

The circle genlist provides circular scroll bar UI to an elementary genlist and operates with rotary events to move to the next or the previous item. After calling eext_rotary_object_event_activated_set to the circle genlist, every rotary event shows the next or the previous item.

Evas_Object* genlist;
Evas_Object* circle_genlist;

genlist = elm_genlist_add(parent);
elm_object_content_set(parent, genlist);

circle_genlist = eext_circle_object_genlist_add(genlist, surface);
eext_circle_object_genlist_scroller_policy_set(circle_genlist, ELM_SCROLLER_POLICY_OFF, ELM_SCROLLER_POLICY_AUTO);
eext_rotary_object_event_activated_set(circle_genlist, EINA_TRUE);

Create the circle datetime.
The circle datetime provides a circular UI which is proper to each date or time field of the elementary datetime and operates with rotary events to change its value. After calling eext_rotary_object_event_activated_set to circle datetime, every rotary event changes the value of each date or time field.
```
Evas_Object* datetime;
Evas_Object* circle_datetime;

datetime = elm_datetime_add(parent);
elm_datetime_format_set(datetime, "%d/%b/%Y%I:%M%p");
elm_object_content_set(parent, datetime);

circle_datetime = eext_circle_object_datetime_add(datetime, surface);
eext_rotary_object_event_activated_set(circle_datetime, EINA_TRUE);
```