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 Elm_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;
 
   elm_policy_set(ELM_POLICY_QUIT, ELM_POLICY_QUIT_LAST_WINDOW_CLOSED);
 
   win = elm_win_util_standard_add("flip", "Flip");
   elm_win_autodel_set(win, EINA_TRUE);
 
   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);
   evas_object_show(rect);
 
   rect2 = evas_object_rectangle_add(evas_object_evas_get(win));
   evas_object_color_set(rect2, 0, 255, 0, 255);
   evas_object_show(rect2);

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);
   evas_object_show(flip);

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_UP, EINA_TRUE);
   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_show(radio);
   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_show(radio2);
   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_show(radio3);
   evas_object_smart_callback_add(radio3, "changed", _change_interaction, flip);
 
   evas_object_resize(win, 200, 200);
   evas_object_show(win);
 
   elm_run();
 
   return 0;
}
ELM_MAIN()

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.