elementary_test: Add the value provider test for animation_view 56/215156/2 submit/tizen/20191002.064055
authorJunsuChoi <jsuya.choi@samsung.com>
Wed, 2 Oct 2019 05:32:33 +0000 (14:32 +0900)
committerjunsu choi <jsuya.choi@samsung.com>
Wed, 2 Oct 2019 06:03:49 +0000 (06:03 +0000)
Summary:
Add an Value Provider item to test vector animation on elementary_test.
This test is to apply Efl.Gfx.Vg.Value_Provider to the loaded efl_ui_animation object.
If Evas Vg Json(Lottie) Loader is not supported,
use the vector class to output the svg file.

Depends on D9874
Depends on D9897

Test Plan: elementary_test -> Value Provider

Reviewers: Hermet, kimcinoo, smohanty

Reviewed By: Hermet

Subscribers: cedric, #committers, #reviewers

Tags: #efl

Differential Revision: https://phab.enlightenment.org/D10015

Change-Id: Ide01f099e395eed3e9c6445681b327eaa69f1115

data/elementary/images/three_box.json [new file with mode: 0644]
src/bin/elementary/meson.build
src/bin/elementary/test.c
src/bin/elementary/test_efl_gfx_vg_value_provider.c [new file with mode: 0644]

diff --git a/data/elementary/images/three_box.json b/data/elementary/images/three_box.json
new file mode 100644 (file)
index 0000000..f58fbcd
--- /dev/null
@@ -0,0 +1 @@
+{"v":"5.5.9","fr":29.9700012207031,"ip":0,"op":130.000005295009,"w":1920,"h":1080,"nm":"Comp 1","ddd":0,"assets":[],"layers":[{"ddd":0,"ind":1,"ty":4,"nm":"layer","sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":0,"k":[960,540,0],"ix":2},"a":{"a":0,"k":[0,0,0],"ix":1},"s":{"a":0,"k":[100,100,100],"ix":6}},"ao":0,"shapes":[{"ty":"gr","it":[{"ty":"rc","d":1,"s":{"a":0,"k":[300,300],"ix":2},"p":{"a":0,"k":[0,0],"ix":3},"r":{"a":0,"k":0,"ix":4},"nm":"Rectangle Path 1","mn":"ADBE Vector Shape - Rect","hd":false},{"ty":"st","c":{"a":0,"k":[1,1,1,1],"ix":3},"o":{"a":0,"k":100,"ix":4},"w":{"a":0,"k":2,"ix":5},"lc":1,"lj":1,"ml":4,"bm":0,"nm":"Stroke 1","mn":"ADBE Vector Graphic - Stroke","hd":false},{"ty":"fl","c":{"a":1,"k":[{"i":{"x":[0.833],"y":[0.833]},"o":{"x":[0.167],"y":[0.167]},"t":-261,"s":[1,0,0,1]},{"i":{"x":[0.833],"y":[0.833]},"o":{"x":[0.167],"y":[0.167]},"t":0,"s":[1,0,0,1]},{"i":{"x":[0.833],"y":[0.833]},"o":{"x":[0.167],"y":[0.167]},"t":16,"s":[0,1,0,1]},{"i":{"x":[0.833],"y":[0.833]},"o":{"x":[0.167],"y":[0.167]},"t":57,"s":[0,0,1,1]},{"t":119.000004846969,"s":[1,0,0,1]}],"ix":4},"o":{"a":1,"k":[{"i":{"x":[0.833],"y":[0.833]},"o":{"x":[0.167],"y":[0.167]},"t":-400,"s":[100]},{"i":{"x":[0.833],"y":[0.833]},"o":{"x":[0.167],"y":[0.167]},"t":37,"s":[10]},{"t":108.00000439893,"s":[100]}],"ix":5},"r":1,"bm":0,"nm":"Fill 1","mn":"ADBE Vector Graphic - Fill","hd":false},{"ty":"tr","p":{"a":0,"k":[-600,0],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"box1","np":3,"cix":2,"bm":0,"ix":1,"mn":"ADBE Vector Group","hd":false},{"ty":"gr","it":[{"ty":"rc","d":1,"s":{"a":0,"k":[300,300],"ix":2},"p":{"a":0,"k":[0,0],"ix":3},"r":{"a":0,"k":0,"ix":4},"nm":"Rectangle Path 1","mn":"ADBE Vector Shape - Rect","hd":false},{"ty":"st","c":{"a":1,"k":[{"i":{"x":[0.833],"y":[0.833]},"o":{"x":[0.167],"y":[0.167]},"t":3,"s":[1,1,1,1]},{"i":{"x":[0.833],"y":[0.833]},"o":{"x":[0.167],"y":[0.167]},"t":45,"s":[1,0.917647123337,0,1]},{"t":96.0000039101602,"s":[1,1,1,1]}],"ix":3},"o":{"a":0,"k":100,"ix":4},"w":{"a":1,"k":[{"i":{"x":[0.833],"y":[0.833]},"o":{"x":[0.167],"y":[0.167]},"t":1,"s":[2]},{"i":{"x":[0.833],"y":[0.833]},"o":{"x":[0.167],"y":[0.167]},"t":46,"s":[69]},{"t":102.000004154545,"s":[2]}],"ix":5},"lc":1,"lj":1,"ml":4,"bm":0,"nm":"Stroke 1","mn":"ADBE Vector Graphic - Stroke","hd":false},{"ty":"fl","c":{"a":0,"k":[1,0,0,1],"ix":4},"o":{"a":0,"k":100,"ix":5},"r":1,"bm":0,"nm":"Fill 1","mn":"ADBE Vector Graphic - Fill","hd":false},{"ty":"tr","p":{"a":0,"k":[0,0],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"box2","np":3,"cix":2,"bm":0,"ix":2,"mn":"ADBE Vector Group","hd":false},{"ty":"gr","it":[{"ty":"rc","d":1,"s":{"a":0,"k":[300,300],"ix":2},"p":{"a":0,"k":[0,0],"ix":3},"r":{"a":0,"k":0,"ix":4},"nm":"Rectangle Path 1","mn":"ADBE Vector Shape - Rect","hd":false},{"ty":"st","c":{"a":0,"k":[1,1,1,1],"ix":3},"o":{"a":0,"k":100,"ix":4},"w":{"a":0,"k":2,"ix":5},"lc":1,"lj":1,"ml":4,"bm":0,"nm":"Stroke 1","mn":"ADBE Vector Graphic - Stroke","hd":false},{"ty":"fl","c":{"a":0,"k":[1,0,0,1],"ix":4},"o":{"a":0,"k":100,"ix":5},"r":1,"bm":0,"nm":"Fill 1","mn":"ADBE Vector Graphic - Fill","hd":false},{"ty":"tr","p":{"a":0,"k":[600,0],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"box3","np":3,"cix":2,"bm":0,"ix":3,"mn":"ADBE Vector Group","hd":false}],"ip":-6.00000024438501,"op":894.000036413367,"st":-6.00000024438501,"bm":0}],"markers":[]}
\ No newline at end of file
index debce1d..502573c 100644 (file)
@@ -161,6 +161,7 @@ elementary_test_src = [
   'test_ui_items.c',
   'test_ui_frame.c',
   'test_efl_ui_animation_view.c',
+  'test_efl_gfx_vg_value_provider.c',
   'test.h'
 ]
 
index 8d5e997..8259ed8 100644 (file)
@@ -406,6 +406,7 @@ void test_efl_ui_item(void *data, Evas_Object *obj, void *event_info);
 void test_ui_frame(void *data EINA_UNUSED, Evas_Object *obj EINA_UNUSED, void *event_info EINA_UNUSED);
 
 void test_efl_ui_animation_view(void *data, Evas_Object *obj, void *event_info);
+void test_efl_gfx_vg_value_provider(void *data, Evas_Object *obj, void *event_info);
 
 static void _list_udpate(void);
 
@@ -1301,6 +1302,7 @@ add_tests:
 
    //------------------------------//
    ADD_TEST_EO(NULL, "Vector Animation", "Animation View", test_efl_ui_animation_view);
+   ADD_TEST_EO(NULL, "Vector Animation", "Value Provider", test_efl_gfx_vg_value_provider);
 
 #undef ADD_TEST
 
diff --git a/src/bin/elementary/test_efl_gfx_vg_value_provider.c b/src/bin/elementary/test_efl_gfx_vg_value_provider.c
new file mode 100644 (file)
index 0000000..7f5add0
--- /dev/null
@@ -0,0 +1,605 @@
+#ifdef HAVE_CONFIG_H
+# include "elementary_config.h"
+#endif
+#include <Elementary.h>
+#include <Efl_Ui.h>
+#include "elm_priv.h"
+
+#ifndef EFL_BETA_API_SUPPORT
+#define EFL_BETA_API_SUPPORT
+#endif
+
+#ifndef EFL_EO_API_SUPPORT
+#define EFL_EO_API_SUPPORT
+#endif
+
+#ifdef BUILD_VG_LOADER_JSON
+
+Evas_Object *values[4], *anim_view;
+Evas_Object *path_entry, *type_hoversel;
+
+Eina_Bool
+add_value_provider(char* new_path, char* new_type, char* new_values)
+{
+   const char* type = elm_object_text_get(type_hoversel);
+   if (!type) return EINA_FALSE;
+   const char* path = efl_text_get(path_entry);
+   if (!path) return EINA_FALSE;
+
+   if (strstr(type, "Color") != NULL)
+     {
+        int color[4];
+        Eo *vp = efl_add(EFL_GFX_VG_VALUE_PROVIDER_CLASS, anim_view);
+        efl_gfx_vg_value_provider_keypath_set(vp, (char*)path);
+        for (int i = 0; i < 4; i++)
+          {
+             char* v = (char*)efl_text_get(values[i]);
+             if (v) color[i] = atoi(v);
+          }
+
+        sprintf(new_path, "%s", path);
+        sprintf(new_values, "%d %d %d %d",color[0], color[1], color[2], color[3]);
+        if (!strcmp(type, "FillColor"))
+          {
+             efl_gfx_vg_value_provider_fill_color_set(vp, color[0], color[1], color[2], color[3]);
+             sprintf(new_type, "FillColor");
+          }
+        if (!strcmp(type, "StrokeColor")) 
+          {
+             efl_gfx_vg_value_provider_stroke_color_set(vp, color[0], color[1], color[2], color[3]);
+             sprintf(new_type, "StrokeColor");
+          }
+
+
+        efl_ui_animation_view_value_provider_override(anim_view, vp);
+     }
+   if (!strcmp(type, "StrokeWidth"))
+     {
+        double width;
+        Eo *vp = efl_add(EFL_GFX_VG_VALUE_PROVIDER_CLASS, anim_view);
+        efl_gfx_vg_value_provider_keypath_set(vp, (char*)path);
+        char* v = (char*)efl_text_get(values[0]);
+        if (v) width = strtod(v, NULL);
+        efl_gfx_vg_value_provider_stroke_width_set(vp, width);
+        efl_ui_animation_view_value_provider_override(anim_view, vp);
+        evas_object_show(anim_view);
+        sprintf(new_path, "%s", path);
+        sprintf(new_type, "StrokeWidth");
+        sprintf(new_values, "%f", width);
+     }
+   return EINA_TRUE;
+}
+
+static void
+btn_clicked_cb(void *data , const Efl_Event *ev )
+{
+   const char *text = efl_text_get(ev->object);
+
+   if (!text) return;
+
+   if (!strcmp("Play", text))
+     efl_ui_animation_view_play((Evas_Object*)data);
+   else if (!strcmp("Pause", text))
+     efl_ui_animation_view_pause((Evas_Object*)data);
+   else if (!strcmp("Resume", text))
+     efl_ui_animation_view_resume((Evas_Object*)data);
+   else if (!strcmp("Play Back", text))
+     efl_ui_animation_view_play_back((Evas_Object*)data);
+   else if (!strcmp("Stop", text))
+     efl_ui_animation_view_stop((Evas_Object*)data);
+   else if (!strcmp("ADD", text))
+     {
+        Evas_Object *list = (Evas_Object*)data;
+        Elm_Object_Item *list_it;
+        char new_path[255], new_type[255], new_values[255];
+        if (add_value_provider(new_path, new_type, new_values))
+          {
+             char buf[255];
+             //TODO: Even if there is the same path as the existing item, it is added without updating.
+             //      In efl_ui_animation_view, duplicate paths are managed.
+             //      However, animator (lottie) does not have an implementation that manages overridden values.
+             /*Eina_List *items = (Eina_List*)elm_list_items_get(list);
+             Eina_List *l;
+             EINA_LIST_FOREACH(items, l, list_it)
+               {
+                  char item_text[255];
+                  strcpy(item_text, elm_object_item_text_get(list_it));
+                  if (item_text[0] != '/')
+                    {
+                       char* path = strtok(item_text, "/");
+                       char* type = strtok(NULL, "/");
+                       if (!strcmp(new_path, path) && !strcmp(new_type, type))
+                          {
+                             elm_object_item_del(list_it);
+                             break;
+                          }
+                    }
+               }*/
+             sprintf(buf, "%s/%s/%s", new_path, new_type, new_values);
+             list_it = elm_list_item_append(list, buf, NULL, NULL, NULL, NULL);
+             elm_list_item_bring_in(list_it);
+             elm_list_go(list);
+          }
+     }
+   else if (!strcmp("DEL", text))
+     {
+        Evas_Object *list = (Evas_Object*)data;
+        Elm_Object_Item *list_it = elm_list_selected_item_get(list);
+        if (list_it)
+          {
+             char item_text[255];
+             strcpy(item_text, elm_object_item_text_get(list_it));
+             if (item_text[0] != '/')
+               {
+                   /* Need to work */
+               }
+             //TODO
+             printf("Value provider remove is not implemented yet\n");
+             /*elm_object_item_del(list_it);
+             elm_list_go(list);*/
+          }
+     }
+}
+
+static void
+check_changed_cb(void *data, const Efl_Event *event)
+{
+   Evas_Object *anim_view = data;
+   efl_ui_animation_view_auto_repeat_set(anim_view, efl_ui_selectable_selected_get(event->object));
+}
+
+static void
+speed_changed_cb(void *data, const Efl_Event *event)
+{
+   Evas_Object *anim_view = data;
+   double speed = 1;
+   if (efl_ui_selectable_selected_get(event->object)) speed = 0.25;
+   efl_ui_animation_view_speed_set(anim_view, speed);
+}
+
+static void
+limit_frame_cb(void *data, const Efl_Event *event)
+{
+   Evas_Object *anim_view = data;
+   int frame_count = efl_ui_animation_view_frame_count_get(anim_view);
+   printf("Total Frame Count : %d\n", frame_count);
+   if (efl_ui_selectable_selected_get(event->object))
+     {
+        efl_ui_animation_view_min_frame_set(anim_view, 5);
+        efl_ui_animation_view_max_frame_set(anim_view, 10);
+        printf("Frames to show 5-10 only\n");
+     }
+   else
+     {
+        efl_ui_animation_view_min_frame_set(anim_view, 0);
+        efl_ui_animation_view_max_frame_set(anim_view, frame_count);
+        printf("Showing all frames now\n");
+     }
+}
+
+static void
+update_anim_view_state(Evas_Object *anim_view, Evas_Object *label)
+{
+   Efl_Ui_Animation_View_State state = efl_ui_animation_view_state_get(anim_view);
+
+   switch (state)
+     {
+      case EFL_UI_ANIMATION_VIEW_STATE_NOT_READY:
+         efl_text_set(label, "State = Not Ready");
+         break;
+      case EFL_UI_ANIMATION_VIEW_STATE_PLAY:
+         efl_text_set(label, "State = Playing");
+         break;
+      case EFL_UI_ANIMATION_VIEW_STATE_PLAY_BACK:
+         efl_text_set(label, "State = Playing Back");
+         break;
+      case EFL_UI_ANIMATION_VIEW_STATE_PAUSE:
+         efl_text_set(label, "State = Paused");
+         break;
+      case EFL_UI_ANIMATION_VIEW_STATE_STOP:
+         efl_text_set(label, "State = Stopped");
+         break;
+     }
+}
+
+static void
+_play_updated(void *data, Evas_Object *obj, void *ev EINA_UNUSED)
+{
+   Evas_Object *slider = data;
+   efl_ui_range_value_set(slider, efl_ui_animation_view_progress_get(obj));
+}
+
+static void
+_state_update(void *data, Evas_Object *obj, void *ev EINA_UNUSED)
+{
+   Evas_Object *label = data;
+   update_anim_view_state(obj, label);
+}
+
+static void
+_play_done(void *data EINA_UNUSED, Evas_Object *obj EINA_UNUSED, void *ev EINA_UNUSED)
+{
+   printf("done!\n");
+}
+
+static void
+_play_repeated(void *data EINA_UNUSED, Evas_Object *obj EINA_UNUSED, void *ev EINA_UNUSED)
+{
+   printf("repeated!\n");
+}
+
+static void
+_slider_changed_cb(void *data, const Efl_Event *ev)
+{
+   Evas_Object *anim_view = data;
+   efl_ui_animation_view_progress_set(anim_view, efl_ui_range_value_get(ev->object));
+}
+
+static void
+_slider_reset(void *data, Evas_Object *obj EINA_UNUSED, void *ev EINA_UNUSED)
+{
+   Evas_Object *slider = data;
+   efl_ui_range_value_set(slider, 0);
+}
+
+void values_input(Eo* box, const char* type)
+{
+   for (int i = 0; i < 4; i++)
+     {
+        if (values[i])
+          {
+             //efl_pack_unpack(box, values[i]);
+             efl_del(values[i]);
+             values[i] = NULL;
+          }
+     }
+   if (strstr(type, "Color") != NULL)
+     {
+        char color_text[4][2] = { "R", "G", "B", "A" };
+        for (int i = 0; i < 4; i++)
+          {
+             values[i] =  efl_add(EFL_UI_TEXT_CLASS, box,
+                                  efl_gfx_hint_weight_set(efl_added, EFL_GFX_HINT_EXPAND, 0),
+                                  efl_gfx_hint_fill_set(efl_added, EINA_FALSE, EINA_FALSE),
+                                  efl_gfx_hint_align_set(efl_added, EVAS_HINT_FILL, EVAS_HINT_FILL),
+                                  efl_text_interactive_editable_set(efl_added, EINA_TRUE),
+                                  efl_pack(box, efl_added));
+             efl_gfx_hint_size_min_set(values[i], EINA_SIZE2D(50, 10));
+             efl_text_set(efl_part(values[i], "efl.text_guide"), color_text[i]);
+          }
+     }
+   else if (!strcmp(type, "StrokeWidth"))
+     {
+        values[0] =  efl_add(EFL_UI_TEXT_CLASS, box,
+                             efl_gfx_hint_weight_set(efl_added, EFL_GFX_HINT_EXPAND, 0),
+                             efl_gfx_hint_fill_set(efl_added, EINA_FALSE, EINA_FALSE),
+                             efl_gfx_hint_align_set(efl_added, EVAS_HINT_FILL, EVAS_HINT_FILL),
+                             efl_text_interactive_editable_set(efl_added, EINA_TRUE),
+                             efl_pack(box, efl_added));
+        efl_gfx_hint_size_min_set(values[0], EINA_SIZE2D(50, 10));
+        efl_text_set(efl_part(values[0], "efl.text_guide"), "Width(double type)");
+     }
+}
+
+static void
+_hover_item_selected_cb(void *data, Evas_Object *obj, void *event_info)
+{
+   Evas_Object* box = (Evas_Object*)data;
+   const char *selected = elm_object_item_text_get(event_info);
+
+   elm_object_text_set(obj, selected);
+   values_input(box, selected);
+}
+
+void
+test_efl_gfx_vg_value_provider(void *data EINA_UNUSED, Evas_Object *obj EINA_UNUSED, void *event_info EINA_UNUSED)
+{
+   Eo *win, *box, *box_sub, *label, *check, *slider, *list;
+   char buf[255];
+   // This line must to need.
+   setenv("ELM_ACCEL", "gl", 1);
+
+   win = efl_add_ref(EFL_UI_WIN_CLASS, NULL,
+                 efl_ui_win_type_set(efl_added, EFL_UI_WIN_TYPE_BASIC),
+                 efl_text_set(efl_added, "Efl_Ui_Animation_View demo"),
+                 efl_ui_win_autodel_set(efl_added, EINA_TRUE));
+
+   // Create a box in Canvas
+   box = efl_add(EFL_UI_BOX_CLASS, win,
+                 efl_gfx_hint_weight_set(efl_added, EFL_GFX_HINT_EXPAND, EFL_GFX_HINT_EXPAND),
+                 efl_content_set(win, efl_added));
+
+   //Create a label to show state of animation
+   label = efl_add(EFL_UI_TEXT_CLASS, win,
+                   efl_gfx_hint_weight_set(efl_added, EFL_GFX_HINT_EXPAND, 0.1),
+                   efl_gfx_hint_fill_set(efl_added, EINA_FALSE, EINA_FALSE),
+                   efl_pack(box, efl_added));
+
+   //Create Animation View to play animation directly from JSON file
+   snprintf(buf, sizeof(buf), "%s/images/three_box.json", elm_app_data_dir_get());
+   anim_view = efl_add(EFL_UI_ANIMATION_VIEW_CLASS, win,
+                       efl_gfx_hint_weight_set(efl_added, EFL_GFX_HINT_EXPAND, EFL_GFX_HINT_EXPAND),
+                       efl_gfx_hint_align_set(efl_added, EVAS_HINT_FILL, EVAS_HINT_FILL),
+                       efl_gfx_entity_size_set(efl_added, EINA_SIZE2D(600, 600)),
+                       efl_file_set(efl_added, buf),
+                       efl_pack(box, efl_added));
+
+//-----------------------------------------------------------------------------------
+   box_sub = efl_add(EFL_UI_BOX_CLASS, box,
+                  efl_gfx_hint_weight_set(efl_added, EFL_GFX_HINT_EXPAND, 0.1),
+                  efl_pack(box, efl_added));
+   //Path
+   efl_add(EFL_UI_TEXT_CLASS, box_sub,
+           efl_gfx_hint_weight_set(efl_added, EFL_GFX_HINT_EXPAND, 0),
+           efl_gfx_hint_fill_set(efl_added, EINA_TRUE, EINA_FALSE),
+           efl_text_set(efl_added, "Path examples : three_box.json\n"
+                                   "**\n"
+                                   "layer.*.Fill 1\n"
+                                   "layer.box1.*\n"
+                                   "layer.box1.Fill 1\n"
+                                   "layer.box1.Stroke 1\n"
+                                   "layer.box_sub.Fill 1\n"
+                                   "layer.box_sub.Stroke 1\n"
+                                   "layer.box_sub.Fill 1\n"
+                                   "layer.box_sub.Stroke 1\n"),
+           efl_text_interactive_editable_set(efl_added, EINA_FALSE),
+           efl_text_multiline_set(efl_added, EINA_TRUE),
+           efl_pack(box_sub, efl_added));
+
+   efl_add(EFL_UI_TEXT_CLASS, box_sub,
+           efl_gfx_hint_weight_set(efl_added, 0, 0),
+           efl_gfx_hint_fill_set(efl_added, EINA_TRUE, EINA_FALSE),
+           efl_text_set(efl_added, "[Value Provider]"),
+           efl_text_interactive_editable_set(efl_added, EINA_FALSE),
+           efl_text_multiline_set(efl_added, EINA_TRUE),
+           efl_pack(box_sub, efl_added));
+//-----------------------------------------------------------------------------------
+   // Controller Set : 0
+   box_sub = efl_add(EFL_UI_BOX_CLASS, box,
+                  efl_gfx_hint_weight_set(efl_added, EFL_GFX_HINT_EXPAND, 0.1),
+                  efl_ui_layout_orientation_set(efl_added, EFL_UI_LAYOUT_ORIENTATION_HORIZONTAL),
+                  efl_pack(box, efl_added));
+
+   //Path
+   efl_add(EFL_UI_TEXT_CLASS, box_sub,
+           efl_gfx_hint_weight_set(efl_added, 0, 0),
+           efl_gfx_hint_fill_set(efl_added, EINA_FALSE, EINA_FALSE),
+           efl_gfx_hint_align_set(efl_added, EVAS_HINT_FILL, EVAS_HINT_FILL),
+           efl_text_set(efl_added, "PATH : "),
+           efl_text_interactive_editable_set(efl_added, EINA_FALSE),
+           efl_pack(box_sub, efl_added));
+
+   path_entry = efl_add(EFL_UI_TEXT_CLASS, box_sub,
+                   efl_gfx_hint_weight_set(efl_added, 0.1, 0),
+                   efl_gfx_hint_fill_set(efl_added, EINA_FALSE, EINA_FALSE),
+                   efl_gfx_hint_align_set(efl_added, EVAS_HINT_FILL, EVAS_HINT_FILL),
+                   efl_text_interactive_editable_set(efl_added, EINA_TRUE),
+                   efl_pack(box_sub, efl_added));
+   efl_gfx_hint_size_min_set(path_entry, EINA_SIZE2D(200, 10));
+   efl_text_set(efl_part(path_entry, "efl.text_guide"), "Enter path(ex: ** or Layer.Shape.Fill) ");
+
+   efl_add(EFL_UI_TEXT_CLASS, box_sub,
+           efl_gfx_hint_weight_set(efl_added, 0, 0),
+           efl_gfx_hint_fill_set(efl_added, EINA_FALSE, EINA_FALSE),
+           efl_gfx_hint_align_set(efl_added, EVAS_HINT_FILL, EVAS_HINT_FILL),
+           efl_text_set(efl_added, "TYPE : "),
+           efl_text_interactive_editable_set(efl_added, EINA_FALSE),
+           efl_pack(box_sub, efl_added));
+   type_hoversel = elm_hoversel_add(box_sub);
+   elm_hoversel_hover_parent_set(type_hoversel, win);
+   evas_object_size_hint_weight_set(type_hoversel, 0, 0);
+   evas_object_size_hint_align_set(type_hoversel, EVAS_HINT_FILL, EVAS_HINT_FILL);
+   efl_gfx_hint_size_min_set(type_hoversel, EINA_SIZE2D(100, 10)),
+   elm_object_text_set(type_hoversel, "FillColor");
+   elm_hoversel_item_add(type_hoversel, "FillColor", NULL, ELM_ICON_NONE, _hover_item_selected_cb, box_sub);
+   elm_hoversel_item_add(type_hoversel, "StrokeColor", NULL, ELM_ICON_NONE, _hover_item_selected_cb, box_sub);
+   elm_hoversel_item_add(type_hoversel, "StrokeWidth", NULL, ELM_ICON_NONE, _hover_item_selected_cb, box_sub);
+   evas_object_show(type_hoversel);
+   elm_object_focus_set(type_hoversel, EINA_TRUE);
+   efl_pack(box_sub, type_hoversel);
+
+   efl_add(EFL_UI_TEXT_CLASS, box_sub,
+           efl_gfx_hint_weight_set(efl_added, 0, 0),
+           efl_gfx_hint_fill_set(efl_added, EINA_FALSE, EINA_FALSE),
+           efl_gfx_hint_align_set(efl_added, EVAS_HINT_FILL, EVAS_HINT_FILL),
+           efl_text_set(efl_added, "VALUES : "),
+           efl_text_interactive_editable_set(efl_added, EINA_FALSE),
+           efl_pack(box_sub, efl_added));
+   values_input(box_sub, elm_object_text_get(type_hoversel));
+
+//-----------------------------------------------------------------------------------
+
+   // Controller Set : 0
+   box_sub = efl_add(EFL_UI_BOX_CLASS, box,
+                  efl_gfx_hint_weight_set(efl_added, EFL_GFX_HINT_EXPAND, 0.1),
+                  efl_ui_layout_orientation_set(efl_added, EFL_UI_LAYOUT_ORIENTATION_HORIZONTAL),
+                  efl_pack(box, efl_added));
+
+   list = elm_list_add(win);
+   evas_object_size_hint_weight_set(list, EVAS_HINT_EXPAND, EVAS_HINT_EXPAND);
+   evas_object_size_hint_align_set(list, EVAS_HINT_FILL, EVAS_HINT_FILL);
+   evas_object_show(list);
+   efl_pack(box_sub, list);
+
+   elm_object_item_disabled_set(elm_list_item_append(list, "Example : ** / FillColor / 255, 255, 255, 255", NULL, NULL, NULL, NULL), EINA_TRUE);
+   efl_gfx_hint_size_min_set(list, EINA_SIZE2D(400, 100)),
+   elm_list_go(list);
+
+
+
+   efl_add(EFL_UI_BUTTON_CLASS, box_sub,
+           efl_gfx_hint_weight_set(efl_added, 0, 0),
+           efl_gfx_hint_align_set(efl_added, EVAS_HINT_FILL, EVAS_HINT_FILL),
+           efl_text_set(efl_added, "ADD"),
+           efl_pack(box_sub, efl_added),
+           efl_gfx_hint_size_min_set(efl_added, EINA_SIZE2D(50, 20)),
+           efl_event_callback_add(efl_added, EFL_INPUT_EVENT_CLICKED, btn_clicked_cb, list));
+
+   efl_add(EFL_UI_BUTTON_CLASS, box_sub,
+           efl_gfx_hint_weight_set(efl_added, 0, 0),
+           efl_gfx_hint_align_set(efl_added, EVAS_HINT_FILL, EVAS_HINT_FILL),
+           efl_text_set(efl_added, "DEL"),
+           efl_pack(box_sub, efl_added),
+           efl_gfx_hint_size_min_set(efl_added, EINA_SIZE2D(50, 20)),
+           efl_event_callback_add(efl_added, EFL_INPUT_EVENT_CLICKED, btn_clicked_cb, list));
+//-----------------------------------------------------------------------------------
+   // Controller Set : 0
+   box_sub = efl_add(EFL_UI_BOX_CLASS, box,
+                  efl_gfx_hint_weight_set(efl_added, EFL_GFX_HINT_EXPAND, 0.1),
+                  efl_ui_layout_orientation_set(efl_added, EFL_UI_LAYOUT_ORIENTATION_HORIZONTAL),
+                  efl_pack(box, efl_added));
+
+   //Loop
+   check = efl_add(EFL_UI_CHECK_CLASS, box_sub,
+                   efl_gfx_hint_weight_set(efl_added, EFL_GFX_HINT_EXPAND, 0),
+                   efl_gfx_hint_fill_set(efl_added, EINA_FALSE, EINA_FALSE),
+                   efl_gfx_hint_align_set(efl_added, EVAS_HINT_FILL, EVAS_HINT_FILL),
+                   efl_pack(box_sub, efl_added));
+   efl_text_set(check, "Loop");
+   efl_event_callback_add(check, EFL_UI_EVENT_SELECTED_CHANGED,  check_changed_cb, anim_view);
+
+   //Speed: 0.5x
+   check = efl_add(EFL_UI_CHECK_CLASS, box_sub,
+                   efl_gfx_hint_weight_set(efl_added, EFL_GFX_HINT_EXPAND, 0),
+                   efl_gfx_hint_fill_set(efl_added, EINA_FALSE, EINA_FALSE),
+                   efl_gfx_hint_align_set(efl_added, EVAS_HINT_FILL, EVAS_HINT_FILL),
+                   efl_pack(box_sub, efl_added));
+   efl_text_set(check, "Speed: 0.25x");
+   efl_event_callback_add(check, EFL_UI_EVENT_SELECTED_CHANGED,  speed_changed_cb, anim_view);
+
+   //Limit Frames
+   check = efl_add(EFL_UI_CHECK_CLASS, box_sub,
+                   efl_gfx_hint_weight_set(efl_added, EFL_GFX_HINT_EXPAND, 0),
+                   efl_gfx_hint_fill_set(efl_added, EINA_FALSE, EINA_FALSE),
+                   efl_gfx_hint_align_set(efl_added, EVAS_HINT_FILL, EVAS_HINT_FILL),
+                   efl_pack(box_sub, efl_added));
+   efl_text_set(check, "Limit Frames");
+   efl_event_callback_add(check, EFL_UI_EVENT_SELECTED_CHANGED,  limit_frame_cb, anim_view);
+
+
+   //Duration Text
+   snprintf(buf, sizeof(buf), "Duration: %1.2fs", efl_ui_animation_view_duration_time_get(anim_view));
+   efl_add(EFL_UI_TEXT_CLASS, box_sub,
+           efl_gfx_hint_weight_set(efl_added, EFL_GFX_HINT_EXPAND, 0),
+           efl_gfx_hint_fill_set(efl_added, EINA_FALSE, EINA_FALSE),
+           efl_gfx_hint_align_set(efl_added, EVAS_HINT_FILL, EVAS_HINT_FILL),
+           efl_text_set(efl_added, buf),
+           efl_pack(box_sub, efl_added));
+
+   //Slider
+   slider = efl_add(EFL_UI_SLIDER_CLASS, box,
+                    efl_gfx_hint_weight_set(efl_added, EFL_GFX_HINT_EXPAND, 0.1),
+                    efl_gfx_hint_align_set(efl_added, EVAS_HINT_FILL, EVAS_HINT_FILL),
+                    efl_ui_range_limits_set(efl_added, 0, 1),
+                    efl_event_callback_add(efl_added, EFL_UI_RANGE_EVENT_CHANGED, _slider_changed_cb, anim_view),
+                    efl_pack(box, efl_added));
+
+   //Controller Set: 1
+   box_sub = efl_add(EFL_UI_BOX_CLASS, box,
+                  efl_gfx_hint_weight_set(efl_added, EFL_GFX_HINT_EXPAND, 0),
+                  efl_gfx_hint_align_set(efl_added, EVAS_HINT_FILL, 1),
+                  efl_ui_layout_orientation_set(efl_added, EFL_UI_LAYOUT_ORIENTATION_HORIZONTAL),
+                  efl_pack(box, efl_added));
+
+   //Play Button
+   efl_add(EFL_UI_BUTTON_CLASS, box_sub,
+           efl_gfx_hint_weight_set(efl_added, EFL_GFX_HINT_EXPAND, 0),
+           efl_gfx_hint_align_set(efl_added, EVAS_HINT_FILL, EVAS_HINT_FILL),
+           efl_text_set(efl_added, "Play"),
+           efl_pack(box_sub, efl_added),
+           efl_event_callback_add(efl_added, EFL_INPUT_EVENT_CLICKED, btn_clicked_cb, anim_view));
+
+
+   //Play Back Button
+   efl_add(EFL_UI_BUTTON_CLASS, box_sub,
+           efl_gfx_hint_weight_set(efl_added, EFL_GFX_HINT_EXPAND, 0),
+           efl_gfx_hint_align_set(efl_added, EVAS_HINT_FILL, EVAS_HINT_FILL),
+           efl_text_set(efl_added, "Play Back"),
+           efl_pack(box_sub, efl_added),
+           efl_event_callback_add(efl_added, EFL_INPUT_EVENT_CLICKED, btn_clicked_cb, anim_view));
+
+   //Stop Button
+   efl_add(EFL_UI_BUTTON_CLASS, box_sub,
+           efl_gfx_hint_weight_set(efl_added, EFL_GFX_HINT_EXPAND, 0),
+           efl_gfx_hint_align_set(efl_added, EVAS_HINT_FILL, EVAS_HINT_FILL),
+           efl_text_set(efl_added, "Stop"),
+           efl_pack(box_sub, efl_added),
+           efl_event_callback_add(efl_added, EFL_INPUT_EVENT_CLICKED, btn_clicked_cb, anim_view));
+
+   //Controller Set: 2
+   box_sub = efl_add(EFL_UI_BOX_CLASS, box,
+                  efl_gfx_hint_weight_set(efl_added, EFL_GFX_HINT_EXPAND, 0),
+                  efl_gfx_hint_align_set(efl_added, EVAS_HINT_FILL, 1),
+                  efl_ui_layout_orientation_set(efl_added, EFL_UI_LAYOUT_ORIENTATION_HORIZONTAL),
+                  efl_pack(box, efl_added));
+
+   //Pause Button
+   efl_add(EFL_UI_BUTTON_CLASS, box_sub,
+           efl_gfx_hint_weight_set(efl_added, EFL_GFX_HINT_EXPAND, 0),
+           efl_gfx_hint_align_set(efl_added, EVAS_HINT_FILL, EVAS_HINT_FILL),
+           efl_text_set(efl_added, "Pause"),
+           efl_pack(box_sub, efl_added),
+           efl_event_callback_add(efl_added, EFL_INPUT_EVENT_CLICKED, btn_clicked_cb, anim_view));
+
+   //Resume Button
+   efl_add(EFL_UI_BUTTON_CLASS, box_sub,
+           efl_gfx_hint_weight_set(efl_added, EFL_GFX_HINT_EXPAND, 0),
+           efl_gfx_hint_align_set(efl_added, EVAS_HINT_FILL, EVAS_HINT_FILL),
+           efl_text_set(efl_added, "Resume"),
+           efl_pack(box_sub, efl_added),
+           efl_event_callback_add(efl_added, EFL_INPUT_EVENT_CLICKED, btn_clicked_cb, anim_view));
+
+   evas_object_smart_callback_add(anim_view, "play,start", _state_update, label);
+   evas_object_smart_callback_add(anim_view, "play,stop", _state_update, label);
+   evas_object_smart_callback_add(anim_view, "play,pause", _state_update, label);
+   evas_object_smart_callback_add(anim_view, "play,resume", _state_update, label);
+
+   evas_object_smart_callback_add(anim_view, "play,repeat", _play_repeated, label);
+   evas_object_smart_callback_add(anim_view, "play,done", _play_done, label);
+
+   evas_object_smart_callback_add(anim_view, "play,update", _play_updated, slider);
+   evas_object_smart_callback_add(anim_view, "play,stop", _slider_reset, slider);
+
+   update_anim_view_state(anim_view, label);
+
+   efl_gfx_entity_size_set(win, EINA_SIZE2D(600, 850));
+}
+
+#else
+
+void
+test_efl_gfx_vg_value_provider(void *data EINA_UNUSED, Evas_Object *obj EINA_UNUSED, void *event_info EINA_UNUSED)
+{
+   Eo *win, *box;
+   char buf[255];
+
+   win = efl_add_ref(EFL_UI_WIN_CLASS, NULL,
+                 efl_ui_win_type_set(efl_added, EFL_UI_WIN_TYPE_BASIC),
+                 efl_text_set(efl_added, "Efl_Ui_Animation_View demo"),
+                 efl_ui_win_autodel_set(efl_added, EINA_TRUE));
+
+   // Create a box
+   box = efl_add(EFL_UI_BOX_CLASS, win,
+                 efl_gfx_hint_weight_set(efl_added, EFL_GFX_HINT_EXPAND, EFL_GFX_HINT_EXPAND),
+                 efl_content_set(win, efl_added));
+
+   efl_add(EFL_UI_TEXT_CLASS, win,
+           efl_gfx_hint_weight_set(efl_added, EFL_GFX_HINT_EXPAND, 0.1),
+           efl_gfx_hint_fill_set(efl_added, EINA_FALSE, EINA_FALSE),
+           efl_text_set(efl_added, "Evas Vg Json (Lottie) Loader is not supported, Only Static Vector Image is available!"),
+           efl_pack(box, efl_added));
+
+   //Create Vector object.
+   snprintf(buf, sizeof(buf), "%s/images/tiger.svg", elm_app_data_dir_get());
+   efl_add(EFL_CANVAS_VG_OBJECT_CLASS, win,
+           efl_gfx_hint_weight_set(efl_added, EFL_GFX_HINT_EXPAND, EFL_GFX_HINT_EXPAND),
+           efl_gfx_hint_align_set(efl_added, EVAS_HINT_FILL, EVAS_HINT_FILL),
+           efl_gfx_entity_size_set(efl_added, EINA_SIZE2D(600, 600)),
+           efl_file_simple_load(efl_added, buf, NULL),
+           efl_gfx_entity_visible_set(efl_added, EINA_TRUE),
+           efl_pack(box, efl_added));
+
+   efl_gfx_entity_size_set(win, EINA_SIZE2D(600, 730));
+}
+
+#endif