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);
EINA_TRUE
#define EINA_TRUE
boolean value TRUE (numerical value 1)
Definition eina_types.h:539
EINA_UNUSED
#define EINA_UNUSED
Used to indicate that a function parameter is purposely unused.
Definition eina_types.h:339
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:1380
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_POLICY_QUIT
@ ELM_POLICY_QUIT
under which circumstances the application should quit automatically.
Definition elm_general.h:227
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:9587
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:6199
evas_object_show
EVAS_API void evas_object_show(Evas_Object *eo_obj)
Makes the given Evas object visible.
Definition evas_object_main.c:1814
evas_object_color_set
EVAS_API 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:2024
evas_object_evas_get
EVAS_API Evas * evas_object_evas_get(const Eo *eo_obj)
Get the Evas to which this object belongs to.
Definition evas_object_main.c:2662
Evas_Object
Efl_Canvas_Object Evas_Object
An Evas Object handle.
Definition Evas_Common.h:185
evas_object_resize
EVAS_API void evas_object_resize(Evas_Object *obj, Evas_Coord w, Evas_Coord h)
Changes the size of the given Evas object.
Definition evas_object_main.c:1236
evas_object_rectangle_add
EVAS_API Evas_Object * evas_object_rectangle_add(Evas *e)
Adds a rectangle to the given evas.
Definition evas_object_rectangle.c:78

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);
elm_flip_add
Evas_Object * elm_flip_add(Evas_Object *parent)
Add a new flip to the parent.
Definition efl_ui_flip.c:2370
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:1562
evas_object_move
EVAS_API void evas_object_move(Evas_Object *obj, Evas_Coord x, Evas_Coord y)
Move the given Evas object to the given location inside its canvas' viewport.
Definition evas_object_main.c:1171

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()
ELM_MAIN
#define ELM_MAIN()
macro to be used after the elm_main() function
Definition elm_general.h:556
elm_run
void elm_run(void)
Run Elementary's main loop.
Definition elm_main.c:1357
elm_radio_add
Evas_Object * elm_radio_add(Evas_Object *parent)
Add a new radio to the parent.
Definition efl_ui_radio.c:401
elm_radio_value_set
void elm_radio_value_set(Evas_Object *obj, int value)
Set the value of the radio group.
Definition efl_ui_radio.c:408
elm_radio_group_add
void elm_radio_group_add(Efl_Ui_Radio *obj, Efl_Ui_Radio *group)
Add this radio to a group of other radio objects.
Definition efl_ui_radio.c:465
elm_radio_state_value_set
void elm_radio_state_value_set(Efl_Ui_Radio *obj, int value)
Set the integer value that this radio object represents.
Definition efl_ui_radio_eo.legacy.c:3
evas_object_smart_callback_add
EVAS_API 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:1040

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);
}
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_radio_state_value_get
int elm_radio_state_value_get(const Efl_Ui_Radio *obj)
Get the integer value that this radio object represents.
Definition efl_ui_radio_eo.legacy.c:9

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.