From: Denys Smalianyi Date: Fri, 11 Sep 2015 11:59:45 +0000 (+0300) Subject: Tutorials and screenshots for map and transit effects renew X-Git-Tag: tizen_3.0/TD_SYNC/20161201~496^2 X-Git-Url: http://review.tizen.org/git/?a=commitdiff_plain;h=5fcc0fba8758e7297e3d701cd2be54b8b515784f;p=sdk%2Fonline-doc.git Tutorials and screenshots for map and transit effects renew Change-Id: I227910c0a14d0f8712e95a1752f66d19d45baf77 Signed-off-by: Denys Smalianyi --- diff --git a/org.tizen.ui.practices/html/images/evas_map_effect.png b/org.tizen.ui.practices/html/images/evas_map_effect.png index 3b144eb..b600345 100644 Binary files a/org.tizen.ui.practices/html/images/evas_map_effect.png and b/org.tizen.ui.practices/html/images/evas_map_effect.png differ diff --git a/org.tizen.ui.practices/html/images/transit_rotation_zoom.png b/org.tizen.ui.practices/html/images/transit_rotation_zoom.png index 86995c7..b96719a 100644 Binary files a/org.tizen.ui.practices/html/images/transit_rotation_zoom.png and b/org.tizen.ui.practices/html/images/transit_rotation_zoom.png differ diff --git a/org.tizen.ui.practices/html/native/efl/elementary_transit_effect_tutorial_n.htm b/org.tizen.ui.practices/html/native/efl/elementary_transit_effect_tutorial_n.htm index 41961fe..16fd40e 100644 --- a/org.tizen.ui.practices/html/native/efl/elementary_transit_effect_tutorial_n.htm +++ b/org.tizen.ui.practices/html/native/efl/elementary_transit_effect_tutorial_n.htm @@ -86,8 +86,6 @@ create_base_gui(appdata_s *ad)    // Show window after the base GUI is set up    evas_object_show(ad->win); - -   ecore_event_handler_add(ECORE_EVENT_KEY_DOWN, keydown_cb, ad); } @@ -106,7 +104,7 @@ create_main_view(appdata_s *ad)    elm_list_mode_set(list, ELM_LIST_COMPRESS);    elm_list_item_append(list, "Blend", NULL, NULL, blend_cb, navi); -   elm_list_item_append(list, "Color", NULL, NULL, color_cb, navi +   elm_list_item_append(list, "Color", NULL, NULL, color_cb, navi);    elm_list_item_append(list, "Fade", NULL, NULL, fade_cb, navi);    elm_list_item_append(list, "Flip", NULL, NULL, flip_cb, navi);    elm_list_item_append(list, "Rotation", NULL, NULL, rotation_cb, navi); @@ -123,7 +121,7 @@ create_main_view(appdata_s *ad) } -

This tutorial describes only the rotation and zoom implementations. For more information about other effects, see the transit.c file and the Transit API. The following figure illustrates the rotation and zoom effects.

+

This tutorial describes only the rotation and zoom implementations. For more information about other effects, see the transit.c file and the Transit API or use NULL instead. The following figure illustrates the rotation and zoom effects.

Figure: Rotation and zoom

Rotation and zoom

@@ -152,7 +150,6 @@ rotation_cb(void *data, Evas_Object *obj, void *event_info)    elm_transit_object_add(transit, layout);    elm_transit_effect_rotation_add(transit, 0, 360);    elm_transit_duration_set(transit, 1); -   elm_transit_del_cb_set(transit, transit_del_cb, NULL);
  • To start the transit animation, use the elm_transit_go() function: @@ -194,7 +191,6 @@ zoom_cb(void *data, Evas_Object *obj, void *event_info)    elm_transit_object_add(transit2, layout);    elm_transit_effect_zoom_add(transit2, 0.4, 1.0);    elm_transit_duration_set(transit2, 0.5); -   elm_transit_del_cb_set(transit2, transit_del_cb, NULL);
  • Set both effects to be applied in sequence, and start the animation: diff --git a/org.tizen.ui.practices/html/native/efl/evas_map_effects_n.htm b/org.tizen.ui.practices/html/native/efl/evas_map_effects_n.htm index 79f4d71..cb72150 100644 --- a/org.tizen.ui.practices/html/native/efl/evas_map_effects_n.htm +++ b/org.tizen.ui.practices/html/native/efl/evas_map_effects_n.htm @@ -64,7 +64,7 @@ {    Evas_Object *win;    Evas_Object *button; -Evas_Object *default_btn; +   Evas_Object *default_btn; } appdata_s;
    • @@ -75,7 +75,7 @@ appdata_s; create_base_gui(appdata_s *ad) {     Evas_Object *evas_text = NULL; -    Evas *evas                = NULL; +    Evas *evas             = NULL;    // Window    ad->win = elm_win_util_standard_add("Extra object function", "Extra object function"); @@ -83,7 +83,7 @@ create_base_gui(appdata_s *ad)    // Window callbacks    evas_object_smart_callback_add(ad->win, "delete,request", win_delete_request_cb, NULL); -   eext_object_event_callback_add(ad->win, EEXT_CALLBACK_BACK, back_cb, ad); +   eext_object_event_callback_add(ad->win, EEXT_CALLBACK_BACK, win_back_cb, ad);    evas = evas_object_evas_get(ad->win); @@ -91,7 +91,7 @@ create_base_gui(appdata_s *ad)    evas_object_text_text_set(evas_text, "Evas Map Mapping");    evas_object_text_font_set(evas_text, "Sans", 18);    evas_object_color_set(evas_text, 50, 100, 200, 255); -   evas_object_move(evas_text, 10, 90); +   evas_object_move(evas_text, 15, 40);    evas_object_show(evas_text);    // Evas map source code @@ -100,51 +100,9 @@ create_base_gui(appdata_s *ad) } -
  • -

    Implement callback functions to enable closing the application:

    - -
    static void
-back_cb(void *data, Evas_Object *obj, void *event_info)
-{
-   appdata_s *ad = data;
-
-   elm_win_lower(ad->win);
-}
 
-static void
-win_delete_request_cb(void *data, Evas_Object *obj, void *event_info)
-{
-   ui_app_exit();
-}
    -
    • -
  • -

    Create an elementary application with a GUI:

    -
    static bool
-app_create(void *data)
-{
-   appdata_s *ad = data;
-
-   // Create the application UI
-   create_base_gui(ad);
-
-   return true;
-}
-
-int
-main(int argc, char *argv[])
-{
-   appdata_s ad = {0,};
-
-   ui_app_lifecycle_callback_s event_callback = {0,};
-
-   event_callback.create = app_create;
-
-   // Run the main loop
-   return ui_app_main(argc, argv, &event_callback, &ad);
-}
    -

  • Create the button for mapping. Use the move and resize functions to configure the button's custom geometry:

    @@ -152,15 +110,15 @@ main(int argc, char *argv[]) 
    // Create a button for mapping
 ad->button = elm_button_add(ad->win);
 elm_object_text_set(ad->button, "Evas Map Mapping ");
-evas_object_move(ad->button, 15, 100);
-evas_object_resize(ad->button, ELM_SCALE_SIZE(250), ELM_SCALE_SIZE(200));
+evas_object_move(ad->button, 15, 50);
+evas_object_resize(ad->button, 350, 100);
 evas_object_show(ad->button);
 
 // Create a default button
 ad->default_btn = elm_button_add(ad->win);
 elm_object_text_set(ad->default_btn, "Default Button ");
-evas_object_move(ad->default_btn, 15, 300);
-evas_object_resize(ad->default_btn, ELM_SCALE_SIZE(250), ELM_SCALE_SIZE(200));
+evas_object_move(ad->default_btn, 15, 600);
+evas_object_resize(ad->default_btn, 450, 100);
 evas_object_show(ad->default_btn);
    • @@ -184,20 +142,20 @@ map = evas_map_new(4);

    Set the coordinates for each point using the evas_map_point_coord_set() function. You can apply several effects to the Evas object by setting each point of the map to the right coordinates.

    // Set map coordinates
-evas_map_point_coord_set(map, 0, 15, 100, 0);
-evas_map_point_coord_set(map, 1, 265, 100, 0);
-evas_map_point_coord_set(map, 2, 265, 300, 0);
-evas_map_point_coord_set(map, 3, 15, 400, 0);
    +evas_map_point_coord_set(map, 0, 15, 500, 0); +evas_map_point_coord_set(map, 1, 365, 100, 0); +evas_map_point_coord_set(map, 2, 365, 200, 0); +evas_map_point_coord_set(map, 3, 15, 600, 0);

  • Set UV data using the evas_map_point_image_uv_set() function, which informs the map of the correct pixels in the image it is mapping:

    // Set image UV
-evas_map_point_image_uv_set(map, 0, 0, 0);
-evas_map_point_image_uv_set(map, 1, 500, 50);
-evas_map_point_image_uv_set(map, 2, 500, 400);
-evas_map_point_image_uv_set(map, 3, 0, 200);
    +evas_map_point_image_uv_set(map, 0, 0, 0); +evas_map_point_image_uv_set(map, 1, 360, 0); +evas_map_point_image_uv_set(map, 2, 350, 90); +evas_map_point_image_uv_set(map, 3, 0, 100);