Flip example

This example will show a flip with two rectangles on it(one blue, one green). Our example will allow the user to choose the animation the flip uses and to interact with it. To allow the user to choose the interaction mode we use radio buttons, we will however not explain them, if you would like to know more about radio buttons see Radio.

We start our example with the usual setup and then create the 2 rectangles we will use in our flip:

//Compile with:
//gcc -o flip_example_01 flip_example_01.c -g `pkg-config --cflags --libs elementary`
#include <Elementary.h>
static void _change_interaction(void *data, Evas_Object *obj, void *event_info);
EAPI_MAIN int
elm_main(int argc EINA_UNUSED, char **argv EINA_UNUSED)
{
Evas_Object *win, *rect, *rect2, *flip, *radio, *radio2, *radio3;
win = elm_win_util_standard_add("flip", "Flip");
rect = evas_object_rectangle_add(evas_object_evas_get(win));
evas_object_resize(rect, 150, 150);
evas_object_color_set(rect, 0, 0, 255, 255);
rect2 = evas_object_rectangle_add(evas_object_evas_get(win));
evas_object_color_set(rect2, 0, 255, 0, 255);

The next thing to do is to create our flip and set it's front and back content:

flip = elm_flip_add(win);
elm_object_part_content_set(flip, "front", rect);
elm_object_part_content_set(flip, "back", rect2);
evas_object_resize(flip, 150, 150);
evas_object_move(flip, 10, 10);

The next thing we do is set the interaction mode(which the user can later change) to the page animation:

elm_flip_interaction_set(flip, ELM_FLIP_INTERACTION_PAGE);

Setting a interaction mode however is not sufficient, we also need to choose which directions we allow interaction from, for this example we will use all of them:

elm_flip_interaction_direction_enabled_set(flip, ELM_FLIP_DIRECTION_DOWN, EINA_TRUE);
elm_flip_interaction_direction_enabled_set(flip, ELM_FLIP_DIRECTION_LEFT, EINA_TRUE);
elm_flip_interaction_direction_enabled_set(flip, ELM_FLIP_DIRECTION_RIGHT, EINA_TRUE);

We are also going to set the hintsize to the entire flip(in all directions) to make our flip very easy to interact with:

elm_flip_interaction_direction_hitsize_set(flip, ELM_FLIP_DIRECTION_UP, 1);
elm_flip_interaction_direction_hitsize_set(flip, ELM_FLIP_DIRECTION_DOWN, 1);
elm_flip_interaction_direction_hitsize_set(flip, ELM_FLIP_DIRECTION_LEFT, 1);
elm_flip_interaction_direction_hitsize_set(flip, ELM_FLIP_DIRECTION_RIGHT, 1);

After that we create our radio buttons and start the main loop:

radio = elm_radio_add(win);
elm_object_text_set(radio, "page");
elm_radio_value_set(radio, ELM_FLIP_INTERACTION_PAGE);
elm_radio_state_value_set(radio, ELM_FLIP_INTERACTION_PAGE);
evas_object_resize(radio, 55, 30);
evas_object_move(radio, 10, 160);
evas_object_smart_callback_add(radio, "changed", _change_interaction, flip);
radio2 = elm_radio_add(win);
elm_object_text_set(radio2, "cube");
elm_radio_state_value_set(radio2, ELM_FLIP_INTERACTION_CUBE);
elm_radio_group_add(radio2, radio);
evas_object_resize(radio2, 55, 30);
evas_object_move(radio2, 75, 160);
evas_object_smart_callback_add(radio2, "changed", _change_interaction, flip);
radio3 = elm_radio_add(win);
elm_object_text_set(radio3, "rotate");
elm_radio_state_value_set(radio3, ELM_FLIP_INTERACTION_ROTATE);
elm_radio_group_add(radio3, radio);
evas_object_resize(radio3, 55, 30);
evas_object_move(radio3, 140, 160);
evas_object_smart_callback_add(radio3, "changed", _change_interaction, flip);
evas_object_resize(win, 200, 200);
return 0;
}

When the user clicks a radio button a function that changes the interaction mode and animates the flip is called:

static void
_change_interaction(void *data, Evas_Object *obj, void *event_info EINA_UNUSED)
{
elm_flip_interaction_set(data, elm_radio_state_value_get(obj));
elm_flip_go(data, ELM_FLIP_ROTATE_XZ_CENTER_AXIS);
}
Note
The elm_flip_go() call here serves no purpose other than to illustrate that it's possible to animate the flip programmatically.

Our example will look like this:

Note
Since this is an animated example the screenshot doesn't do it justice, it is a good idea to compile it and see the animations.
ELM_POLICY_QUIT_LAST_WINDOW_CLOSED
@ ELM_POLICY_QUIT_LAST_WINDOW_CLOSED
quit when the application's last window is closed
Definition: elm_general.h:248
elm_radio_add
EAPI Evas_Object * elm_radio_add(Evas_Object *parent)
Add a new radio to the parent.
Definition: efl_ui_radio.c:420
EINA_UNUSED
#define EINA_UNUSED
Definition: eina_types.h:321
elm_flip_interaction_direction_hitsize_set
void elm_flip_interaction_direction_hitsize_set(Elm_Flip *obj, Elm_Flip_Direction dir, double hitsize)
Set the amount of the flip that is sensitive to interactive flip.
elm_radio_value_set
EAPI void elm_radio_value_set(Evas_Object *obj, int value)
Set the value of the radio group.
Definition: efl_ui_radio.c:427
evas_object_smart_callback_add
void evas_object_smart_callback_add(Evas_Object *eo_obj, const char *event, Evas_Smart_Cb func, const void *data)
Add (register) a callback function to the smart event specified by event on the smart object obj.
Definition: evas_object_smart.c:980
Evas_Object
Efl_Canvas_Object Evas_Object
Definition: Evas_Common.h:180
elm_object_part_content_set
void elm_object_part_content_set(Evas_Object *obj, const char *part, Evas_Object *content)
Set the content on part of a given container widget.
Definition: elm_main.c:1590
elm_run
void elm_run(void)
Run Elementary's main loop.
Definition: elm_main.c:1385
ELM_MAIN
#define ELM_MAIN()
macro to be used after the elm_main() function
Definition: elm_general.h:528
elm_win_util_standard_add
Evas_Object * elm_win_util_standard_add(const char *name, const char *title)
Adds a window object with standard setup.
Definition: efl_ui_win.c:9199
evas_object_show
void evas_object_show(Evas_Object *eo_obj)
Makes the given Evas object visible.
Definition: evas_object_main.c:1853
EINA_TRUE
#define EINA_TRUE
Definition: eina_types.h:508
elm_policy_set
Eina_Bool elm_policy_set(unsigned int policy, int value)
Set a new policy's value (for a given policy group/identifier).
Definition: elm_main.c:1408
evas_object_rectangle_add
Evas_Object * evas_object_rectangle_add(Evas *e)
Adds a rectangle to the given evas.
Definition: evas_object_rectangle.c:78
elm_flip_interaction_direction_enabled_set
void elm_flip_interaction_direction_enabled_set(Elm_Flip *obj, Elm_Flip_Direction dir, Eina_Bool enabled)
Set which directions of the flip respond to interactive flip.
ELM_FLIP_ROTATE_XZ_CENTER_AXIS
@ ELM_FLIP_ROTATE_XZ_CENTER_AXIS
Rotate XZ center axis flip mode.
Definition: efl_ui_flip_legacy.h:12
elm_win_autodel_set
void elm_win_autodel_set(Eo *obj, Eina_Bool autodel)
Set the window's autodel state.
Definition: efl_ui_win.c:6146
elm_flip_add
EAPI Evas_Object * elm_flip_add(Evas_Object *parent)
Add a new flip to the parent.
Definition: efl_ui_flip.c:2370
evas_object_color_set
void evas_object_color_set(Evas_Object *obj, int r, int g, int b, int a)
Sets the general/main color of the given Evas object to the given one.
Definition: evas_object_main.c:2063
ELM_POLICY_QUIT
@ ELM_POLICY_QUIT
under which circumstances the application should quit automatically.
Definition: elm_general.h:227