Tizen Native API  5.5
Slideshow widget example

This application is aimed to exemplify the slideshow widget. It consists of a window with a slideshow widget set as "resize object", along with a control bar, in the form of a notify. Those controls will exercise most of the slideshow's API functions.

We create the slideshow, itself, first, making it loop on its image items, when in slideshow mode: 

   slideshow = elm_slideshow_add(win);
   elm_slideshow_loop_set(slideshow, EINA_TRUE);
   evas_object_size_hint_weight_set(slideshow,
                                    EVAS_HINT_EXPAND, EVAS_HINT_EXPAND);
   elm_win_resize_object_add(win, slideshow);
   evas_object_show(slideshow);

Next, we define the item class for our slideshow items. Slideshow images are going to be Elementary photo widgets, here, as pointed by our get class function. We'll let the Elementary infrastructure to delete those objects for us, and, as there's no additional data attached to our slideshow items, the del class function can be left undefined: 

static Elm_Slideshow_Item_Class itc;

   itc.func.get = _get;
   itc.func.del = NULL;

/* get our images to make slideshow items */
static Evas_Object *
_get(void *data, Evas_Object *obj)
{
   Evas_Object *photo = elm_photo_add(obj);
   elm_photo_file_set(photo, data);
   elm_photo_fill_inside_set(photo, EINA_TRUE);
   elm_object_style_set(photo, "shadow");

   return photo;
}

We now get to populate the slideshow widget with items. Our images are going to be some randomly chosen from the Elementary package, nine of them. For the first eight, we insert them ordered in the widget, by using elm_slideshow_item_sorted_insert(). The comparing function will use the image names to sort items. The last item is inserted at the end of the slideshow's items list, with elm_slideshow_item_add(). We check out how that list ends with elm_slideshow_items_get(), than: 

  
   Elm_Object_Item *slide_first = NULL, *slide_last = NULL, *slide_it = NULL;
   const char *transition, *layout;
   const Eina_List *l, *list;
   const char *data_dir;
   char img[IMG_NUM][PATH_MAX];
   char *img_files[] =
     {
        "logo.png", "plant_01.jpg", "rock_01.jpg", "rock_02.jpg", "sky_01.jpg",
        "wood_01.jpg", "mystrale.jpg", "mystrale_2.jpg"
     };
   int i = 0;

   elm_app_info_set(elm_main, "elementary", "images");

   data_dir = elm_app_data_dir_get();
   for (i = 0; i < IMG_NUM; i++)
     snprintf(img[i], PATH_MAX, "%s/images/%s", data_dir, img_files[i]);

   elm_policy_set(ELM_POLICY_QUIT, ELM_POLICY_QUIT_LAST_WINDOW_CLOSED);

   win = elm_win_util_standard_add("slideshow", "Slideshow example");
   elm_win_autodel_set(win, EINA_TRUE);

   slideshow = elm_slideshow_add(win);
   elm_slideshow_loop_set(slideshow, EINA_TRUE);
   evas_object_size_hint_weight_set(slideshow,
                                    EVAS_HINT_EXPAND, EVAS_HINT_EXPAND);
   elm_win_resize_object_add(win, slideshow);
   evas_object_show(slideshow);

   itc.func.get = _get;
   itc.func.del = NULL;

   for (i = 0; i < IMG_NUM; i++)
     {
        slide_it = elm_slideshow_item_sorted_insert(slideshow, &itc, img[i],
                                                    _cmp_func);
        if (!slide_first) slide_first = slide_it;
     }
   slide_last = slide_it;

   list = elm_slideshow_items_get(slideshow);
   printf("List of items in the slideshow:\n");
   EINA_LIST_FOREACH(list, l, slide_it)
     printf("\t%s\n",
             (const char *)elm_object_item_data_get(slide_it));



Note that we save the pointers to the first and last items in the slideshow, for future use.


What follows is the code creating a notify, to be shown over the slideshow's viewport, with knobs to act on it. We're not showing that boilerplate code, but only the callbacks attached to the interesting smart events of those knobs. The first four are buttons, which will:


    

  • Select the next item in the slideshow
    • 

  • Select the previous item in the slideshow
    • 

  • Select the first item in the slideshow
    • 

  • Select the last item in the slideshow
    • 



Check out the code for those four actions, being the two last data pointers the same first and last pointers we save before, respectively:  
/* jump to next item, cyclically */
static void
_next(void *data, Evas_Object *obj EINA_UNUSED, void *event_info EINA_UNUSED)
{
   elm_slideshow_next(data);
}

static void
_previous(void *data, Evas_Object *obj EINA_UNUSED, void *event_info EINA_UNUSED)
{
   elm_slideshow_previous(data);
}

static void
_first(void *data, Evas_Object *obj EINA_UNUSED, void *event_info EINA_UNUSED)
{
   elm_slideshow_item_show(data);
}

static void
_last(void *data, Evas_Object *obj EINA_UNUSED, void *event_info EINA_UNUSED)
{
   elm_slideshow_item_show(data);
}



What follow are two hoversels, meant for one to change the slideshow's transition and layout styles, respectively. We fetch all the available transition and layout names to populate those widgets and, when one selects any of them, we apply the corresponding setters on the slideshow:  
   hv = elm_hoversel_add(win);
   elm_box_pack_end(bx, hv);
   elm_hoversel_hover_parent_set(hv, win);
   EINA_LIST_FOREACH(elm_slideshow_transitions_get(slideshow), l, transition)
     elm_hoversel_item_add(hv, transition, NULL, 0, _transition_select,
                           transition);
   elm_object_text_set(hv, eina_list_data_get(
         elm_slideshow_transitions_get(slideshow)));
   evas_object_show(hv);

   hv = elm_hoversel_add(win);
   elm_box_pack_end(bx, hv);
   elm_hoversel_hover_parent_set(hv, win);
   EINA_LIST_FOREACH(elm_slideshow_layouts_get(slideshow), l, layout)
     elm_hoversel_item_add(hv, layout, NULL, 0, _layout_select, layout);
   elm_object_text_set(hv, elm_slideshow_layout_get(slideshow));
   evas_object_show(hv);

  
/* transition changed */
static void
_transition_select(void *data, Evas_Object *obj, void *event_info EINA_UNUSED)
{
   elm_slideshow_transition_set(slideshow, data);
   elm_object_text_set(obj, data);
}

static void
_layout_select(void *data, Evas_Object *obj, void *event_info EINA_UNUSED)
{
   elm_slideshow_layout_set(slideshow, data);
   elm_object_text_set(obj, data);
}



For one to change the transition time on the slideshow widget, we use a spinner widget. We set it to the initial value of 3 (seconds), which will be probed by the next knob -- a button starting the slideshow, de facto. Note that changing the transition time while a slideshow is already happening will adjust its transition time:  
   spin = elm_spinner_add(win);
   elm_spinner_label_format_set(spin, "%2.0f s");
   evas_object_smart_callback_add(spin, "changed", _spin, spin);
   elm_spinner_step_set(spin, 1);
   elm_spinner_min_max_set(spin, 1, 30);
   elm_spinner_value_set(spin, 3);
   elm_box_pack_end(bx, spin);
   evas_object_show(spin);

  
/* slideshow transition time has changed */
static void
_spin(void *data, Evas_Object *obj EINA_UNUSED, void *event_info EINA_UNUSED)
{
   if (elm_slideshow_timeout_get(slideshow) > 0)
     elm_slideshow_timeout_set(slideshow, elm_spinner_value_get(data));
}



Finally, we have two buttons which will, respectively, start and stop the slideshow on our widget. Here are their "clicked" callbacks:  
/* start the show! */
static void
_start(void *data, Evas_Object *obj EINA_UNUSED, void *event_info EINA_UNUSED)
{
   elm_slideshow_timeout_set(slideshow, elm_spinner_value_get(data));

   elm_object_disabled_set(bt_start, EINA_TRUE);
   elm_object_disabled_set(bt_stop, EINA_FALSE);
}

static void
_stop(void *data EINA_UNUSED, Evas_Object *obj EINA_UNUSED, void *event_info EINA_UNUSED)
{
   elm_slideshow_timeout_set(slideshow, 0.0);
   elm_object_disabled_set(bt_start, EINA_FALSE);
   elm_object_disabled_set(bt_stop, EINA_TRUE);
}



This is how the example program's window looks like: 



slideshow_example.png


 
See the full source code for this example.