Flip example

- Main Page
- Related Pages
- Modules
- Data Structures
- Files
- Examples

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:9582
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:6194
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.