lottie/example: add frame information in lottieviewer example

Change-Id: If9245244bfd3e8d8050e18b5ea09fcaf240a867d

example/lottieviewer.cpp

@@ -5,6 +5,12 @@
 
 using namespace std;
 
+typedef struct _AppInfo AppInfo;
+struct _AppInfo {
+   LottieView *view;
+   Evas_Object *layout;
+};
+
 static void
 _win_del_cb(void *data, Evas_Object *obj, void *event_info EINA_UNUSED)
 {
@@ -16,10 +22,17 @@ static void
 _slider_cb(void *data, Evas_Object *obj, void *event_info EINA_UNUSED)
 {
    double val = elm_slider_value_get(obj);
-   LottieView *view = (LottieView *)data;
+   AppInfo *info = (AppInfo *)data;
 
-   view->seek(val);
+   int frameNo = val * info->view->getTotalFrame();
-   view->render();
+   char buf[64];
+
+   sprintf(buf, "%d / %ld", frameNo, info->view->getTotalFrame());
+
+   elm_object_part_text_set(info->layout, "text", buf);
+
+   info->view->seek(val);
+   info->view->render();
 }
 
 EAPI_MAIN int
@@ -27,6 +40,8 @@ elm_main(int argc EINA_UNUSED, char **argv EINA_UNUSED)
 {
    Evas_Object *win, *layout, *slider, *image;
    bool renderMode = true;
+   char buf[64];
+   AppInfo appInfo;
 
    if (argc > 1) {
       if (!strcmp(argv[1], "--disable-render"))
@@ -63,10 +78,16 @@ elm_main(int argc EINA_UNUSED, char **argv EINA_UNUSED)
    evas_object_size_hint_min_set(image, 500, 500);
    elm_object_part_content_set(layout, "lottie", image);
 
+   appInfo.view = view;
+   appInfo.layout = layout;
+
    slider = elm_slider_add(layout);
    evas_object_show(slider);
    elm_object_part_content_set(layout, "slider", slider);
-   evas_object_smart_callback_add(slider, "changed", _slider_cb, (void *)view);
+   evas_object_smart_callback_add(slider, "changed", _slider_cb, (void *)&appInfo);
+
+   sprintf(buf, "%d / %ld", 0, view->getTotalFrame());
+   elm_object_part_text_set(layout, "text", buf);
 
    view->seek(0.0);
    view->render();

example/resource/layout.edc

@@ -3,12 +3,15 @@ collections {
       parts {
          rect { "bg";
             desc { state: "default" 0.0;
-               color: 255 255 255 255;
+               color: 225 225 225 225;
             }
          }
          spacer { "lottie_base";
             desc { state: "default" 0.0;
-               rel2.relative: 1.0 0.7;
+               rel1.to_y: "text";
+               rel1.relative: 0.0 1.0;
+               rel2.to_y: "slider";
+               rel2.relative: 1.0 0.0;
             }
          }
          swallow { "lottie";
@@ -19,11 +22,43 @@ collections {
                rel2.relative: 0.5 0.5;
             }
          }
+         text { "text";
+            desc { state: "default" 0.0;
+               rel1.relative: 1.0 0.0;
+               rel2.relative: 1.0 0.0;
+               rel1.offset: -20 20;
+               rel2.offset: -20 20;
+               align: 1.0 0.0;
+               color: 0 0 0 255;
+               min: 200 30;
+               text {
+                  font: "arial";
+                  size: 25;
+                  align: 1.0 0.5;
+               }
+            }
+         }
          swallow { "slider";
             desc { state: "default" 0.0;
-               rel1.relative: 0.0 0.7;
+               min: 0 100;
-               rel1.offset: 20 20;
+               max: -1 100;
-               rel2.offset: -20 -20;
+               align: 0.5 1.0;
+               rel1.to_x: "left_pad";
+               rel1.relative: 1.0 1.0;
+               rel2.to_x: "right_pad";
+               rel2.relative: 0.0 1.0;
+            }
+         }
+         spacer { "left_pad";
+            desc { state: "default" 0.0;
+               min: 20 0;
+               rel2.relative: 0.0 0.0;
+            }
+         }
+         spacer { "right_pad";
+            desc { state: "default" 0.0;
+               min: 20 0;
+               rel1.relative: 1.0 0.0;
             }
          }
       }