Tutorials and screenshots for map and transit effects renew
authorDenys Smalianyi <d.smalianyi@samsung.com>
Fri, 11 Sep 2015 11:59:45 +0000 (14:59 +0300)
committerDenys Smalianyi <d.smalianyi@samsung.com>
Thu, 17 Sep 2015 08:32:04 +0000 (11:32 +0300)
Change-Id: I227910c0a14d0f8712e95a1752f66d19d45baf77
Signed-off-by: Denys Smalianyi <d.smalianyi@samsung.com>
org.tizen.ui.practices/html/images/evas_map_effect.png
org.tizen.ui.practices/html/images/transit_rotation_zoom.png
org.tizen.ui.practices/html/native/efl/elementary_transit_effect_tutorial_n.htm
org.tizen.ui.practices/html/native/efl/evas_map_effects_n.htm

index 3b144eb..b600345 100644 (file)
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
index 86995c7..b96719a 100644 (file)
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
index 41961fe..16fd40e 100644 (file)
@@ -86,8 +86,6 @@ create_base_gui(appdata_s *ad)
 
 &nbsp;&nbsp;&nbsp;// Show window after the base GUI is set up
 &nbsp;&nbsp;&nbsp;evas_object_show(ad-&gt;win);
-
-&nbsp;&nbsp;&nbsp;ecore_event_handler_add(ECORE_EVENT_KEY_DOWN, keydown_cb, ad);
 }
 </pre>
 </li>
@@ -106,7 +104,7 @@ create_main_view(appdata_s *ad)
 &nbsp;&nbsp;&nbsp;elm_list_mode_set(list, ELM_LIST_COMPRESS);
 
 &nbsp;&nbsp;&nbsp;elm_list_item_append(list, &quot;Blend&quot;, NULL, NULL, blend_cb, navi);
-&nbsp;&nbsp;&nbsp;elm_list_item_append(list, &quot;Color&quot;, NULL, NULL, color_cb, navi
+&nbsp;&nbsp;&nbsp;elm_list_item_append(list, &quot;Color&quot;, NULL, NULL, color_cb, navi);
 &nbsp;&nbsp;&nbsp;elm_list_item_append(list, &quot;Fade&quot;, NULL, NULL, fade_cb, navi);
 &nbsp;&nbsp;&nbsp;elm_list_item_append(list, &quot;Flip&quot;, NULL, NULL, flip_cb, navi);
 &nbsp;&nbsp;&nbsp;elm_list_item_append(list, &quot;Rotation&quot;, NULL, NULL, rotation_cb, navi);
@@ -123,7 +121,7 @@ create_main_view(appdata_s *ad)
 }
 </pre>
 
-<p>This tutorial describes only the rotation and zoom implementations. For more information about other effects, see the <span style="font-family: Courier New,Courier,monospace">transit.c</span> file and the <a href="../../../../org.tizen.native.mobile.apireference/group__Transit.html">Transit</a> API. The following figure illustrates the rotation and zoom effects.</p>
+<p>This tutorial describes only the rotation and zoom implementations. For more information about other effects, see the <span style="font-family: Courier New,Courier,monospace">transit.c</span> file and the <a href="../../../../org.tizen.native.mobile.apireference/group__Transit.html">Transit</a> API or use NULL instead. The following figure illustrates the rotation and zoom effects.</p>
 
 <p class="figure">Figure: Rotation and zoom</p>
 <p align="center"><img alt="Rotation and zoom" src="../../images/transit_rotation_zoom.png" /></p> 
@@ -152,7 +150,6 @@ rotation_cb(void *data, Evas_Object *obj, void *event_info)
 &nbsp;&nbsp;&nbsp;elm_transit_object_add(transit, layout);
 &nbsp;&nbsp;&nbsp;elm_transit_effect_rotation_add(transit, 0, 360);
 &nbsp;&nbsp;&nbsp;elm_transit_duration_set(transit, 1);
-&nbsp;&nbsp;&nbsp;elm_transit_del_cb_set(transit, transit_del_cb, NULL);
 </pre>
 </li>
 <li>To start the transit animation, use the <span style="font-family: Courier New,Courier,monospace">elm_transit_go()</span> function:
@@ -194,7 +191,6 @@ zoom_cb(void *data, Evas_Object *obj, void *event_info)
 &nbsp;&nbsp;&nbsp;elm_transit_object_add(transit2, layout);
 &nbsp;&nbsp;&nbsp;elm_transit_effect_zoom_add(transit2, 0.4, 1.0);
 &nbsp;&nbsp;&nbsp;elm_transit_duration_set(transit2, 0.5);
-&nbsp;&nbsp;&nbsp;elm_transit_del_cb_set(transit2, transit_del_cb, NULL);
 </pre>
 </li>
 <li>Set both effects to be applied in sequence, and start the animation:
index 79f4d71..cb72150 100644 (file)
@@ -64,7 +64,7 @@
 {
 &nbsp;&nbsp;&nbsp;Evas_Object *win;
 &nbsp;&nbsp;&nbsp;Evas_Object *button;
-Evas_Object *default_btn;
+&nbsp;&nbsp;&nbsp;Evas_Object *default_btn;
 } 
 appdata_s;</pre>
 </li>
@@ -75,7 +75,7 @@ appdata_s;</pre>
 create_base_gui(appdata_s *ad)
 {
 &nbsp;&nbsp;&nbsp; Evas_Object *evas_text = NULL;
-&nbsp;&nbsp;&nbsp; Evas *evas&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; = NULL;
+&nbsp;&nbsp;&nbsp; Evas *evas&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;= NULL;
 
 &nbsp;&nbsp;&nbsp;// Window
 &nbsp;&nbsp;&nbsp;ad-&gt;win = elm_win_util_standard_add(&quot;Extra object function&quot;, &quot;Extra object function&quot;);
@@ -83,7 +83,7 @@ create_base_gui(appdata_s *ad)
 
 &nbsp;&nbsp;&nbsp;// Window callbacks
 &nbsp;&nbsp;&nbsp;evas_object_smart_callback_add(ad-&gt;win, &quot;delete,request&quot;, win_delete_request_cb, NULL);
-&nbsp;&nbsp;&nbsp;eext_object_event_callback_add(ad-&gt;win, EEXT_CALLBACK_BACK, back_cb, ad);
+&nbsp;&nbsp;&nbsp;eext_object_event_callback_add(ad-&gt;win, EEXT_CALLBACK_BACK, win_back_cb, ad);
 
 &nbsp;&nbsp;&nbsp;evas = evas_object_evas_get(ad-&gt;win);
 
@@ -91,7 +91,7 @@ create_base_gui(appdata_s *ad)
 &nbsp;&nbsp;&nbsp;evas_object_text_text_set(evas_text, &quot;Evas Map Mapping&quot;);
 &nbsp;&nbsp;&nbsp;evas_object_text_font_set(evas_text, &quot;Sans&quot;, 18);
 &nbsp;&nbsp;&nbsp;evas_object_color_set(evas_text, 50, 100, 200, 255);
-&nbsp;&nbsp;&nbsp;evas_object_move(evas_text, 10, 90);
+&nbsp;&nbsp;&nbsp;evas_object_move(evas_text, 15, 40);
 &nbsp;&nbsp;&nbsp;evas_object_show(evas_text);
 
 &nbsp;&nbsp;&nbsp;// Evas map source code
@@ -100,51 +100,9 @@ create_base_gui(appdata_s *ad)
 }</pre>
 </li>
 
-<li>
-<p>Implement callback functions to enable closing the application:</p>
-
-<pre class="prettyprint">static void
-back_cb(void *data, Evas_Object *obj, void *event_info)
-{
-&nbsp;&nbsp;&nbsp;appdata_s *ad = data;
-
-&nbsp;&nbsp;&nbsp;elm_win_lower(ad-&gt;win);
-}
 
-static void
-win_delete_request_cb(void *data, Evas_Object *obj, void *event_info)
-{
-&nbsp;&nbsp;&nbsp;ui_app_exit();
-}</pre>
-</li>
 
-<li>
-<p>Create an elementary application with a GUI:</p>
 
-<pre class="prettyprint">static bool
-app_create(void *data)
-{
-&nbsp;&nbsp;&nbsp;appdata_s *ad = data;
-
-&nbsp;&nbsp;&nbsp;// Create the application UI
-&nbsp;&nbsp;&nbsp;create_base_gui(ad);
-
-&nbsp;&nbsp;&nbsp;return true;
-}
-
-int
-main(int argc, char *argv[])
-{
-&nbsp;&nbsp;&nbsp;appdata_s ad = {0,};
-
-&nbsp;&nbsp;&nbsp;ui_app_lifecycle_callback_s event_callback = {0,};
-
-&nbsp;&nbsp;&nbsp;event_callback.create = app_create;
-
-&nbsp;&nbsp;&nbsp;// Run the main loop
-&nbsp;&nbsp;&nbsp;return ui_app_main(argc, argv, &amp;event_callback, &amp;ad);
-}</pre>
-</li>
 
 <li>
 <p>Create the button for mapping. Use the move and resize functions to configure the button&#39;s custom geometry:</p>
@@ -152,15 +110,15 @@ main(int argc, char *argv[])
 <pre class="prettyprint">// Create a button for mapping
 ad-&gt;button = elm_button_add(ad-&gt;win);
 elm_object_text_set(ad-&gt;button, &quot;Evas Map Mapping &quot;);
-evas_object_move(ad-&gt;button, 15, 100);
-evas_object_resize(ad-&gt;button, ELM_SCALE_SIZE(250), ELM_SCALE_SIZE(200));
+evas_object_move(ad-&gt;button, 15, 50);
+evas_object_resize(ad-&gt;button, 350, 100);
 evas_object_show(ad-&gt;button);
 
 // Create a default button
 ad-&gt;default_btn = elm_button_add(ad-&gt;win);
 elm_object_text_set(ad-&gt;default_btn, &quot;Default Button &quot;);
-evas_object_move(ad-&gt;default_btn, 15, 300);
-evas_object_resize(ad-&gt;default_btn, ELM_SCALE_SIZE(250), ELM_SCALE_SIZE(200));
+evas_object_move(ad-&gt;default_btn, 15, 600);
+evas_object_resize(ad-&gt;default_btn, 450, 100);
 evas_object_show(ad-&gt;default_btn);</pre>
 </li>
 </ol>
@@ -184,20 +142,20 @@ map = evas_map_new(4);</pre>
 <p>Set the coordinates for each point using the <span style="font-family: Courier New,Courier,monospace">evas_map_point_coord_set()</span> function. You can apply several effects to the Evas object by setting each point of the map to the right coordinates.</p>
 
 <pre class="prettyprint">// 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);</pre>
+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);</pre>
 </li>
 
 <li>
 <p>Set UV data using the <span style="font-family: Courier New,Courier,monospace">evas_map_point_image_uv_set()</span> function, which informs the map of the correct pixels in the image it is mapping:</p>
 
 <pre class="prettyprint">// 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);</pre>
+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);</pre>
 </li>
 </ol>