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 itens, 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);
fprintf(stdout, "List of items in the slideshow:\n");
EINA_LIST_FOREACH(list, l, slide_it)
fprintf(stdout, "\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, void *event_info)
{
elm_slideshow_next(data);
}
static void
_previous(void *data, Evas_Object *obj, void *event_info)
{
elm_slideshow_previous(data);
}
static void
_first(void *data, Evas_Object *obj, void *event_info)
{
elm_slideshow_item_show(data);
}
static void
_last(void *data, Evas_Object *obj, void *event_info)
{
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)
{
elm_slideshow_transition_set(slideshow, data);
elm_object_text_set(obj, data);
}
static void
_layout_select(void *data, Evas_Object *obj, void *event_info)
{
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, void *event_info)
{
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, void *event_info)
{
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, Evas_Object *obj, void *event_info)
{
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:

See the full source code for this example.