elm_bg - Background properties.

The full code for this example can be found at bg_example_03.c, in the function `test_bg_options`, with the callbacks `_cb_overlay_changed`, `_cb_color_changed` and `_cb_radio_changed` defined in the beginning of the file. It's part of the `elementary_test` suite, and thus has the code for the three examples referenced by this documentation.

This example will show the properties available for the background object, and will use of some more widgets to set them.

In order to do this, we will set some callbacks for these widgets. The first is for the radio buttons that will be used to choose the option passed as argument to elm_bg_option_set():

_cb_radio_changed(void *data, Evas_Object *obj, void *event EINA_UNUSED)
{
Evas_Object *o_bg = data;
elm_bg_option_set(o_bg, elm_radio_value_get((Evas_Object *)obj));
}
EINA_UNUSED
#define EINA_UNUSED
Used to indicate that a function parameter is purposely unused.
Definition eina_types.h:339
elm_bg_option_set
void elm_bg_option_set(Evas_Object *obj, Elm_Bg_Option option)
Sets the mode of display for a given background widget's image.
Definition efl_ui_bg.c:82
elm_radio_value_get
int elm_radio_value_get(const Evas_Object *obj)
Get the value of the radio group.
Definition efl_ui_radio.c:420
Evas_Object
Efl_Canvas_Object Evas_Object
An Evas Object handle.
Definition Evas_Common.h:185

The next callback will be used when setting the overlay (using elm_object_content_set()):

_cb_overlay_changed(void *data, Evas_Object *obj, void *event EINA_UNUSED)
{
Evas_Object *o_bg = data;
if (elm_check_state_get(obj))
{
Evas_Object *parent, *over;
char buff[PATH_MAX];
snprintf(buff, sizeof(buff), "%s/objects/test.edj", elm_app_data_dir_get());
parent = elm_object_parent_widget_get(o_bg);
over = edje_object_add(evas_object_evas_get(parent));
edje_object_file_set(over, buff, "bg_overlay");
elm_object_part_content_set(o_bg, "overlay", over);
}
edje_object_add
Evas_Object * edje_object_add(Evas *evas)
Instantiates a new Edje object.
Definition edje_smart.c:22
edje_object_file_set
Eina_Bool edje_object_file_set(Evas_Object *obj, const char *file, const char *group)
Sets the EDJ file (and group within it) to load an Edje object's contents from.
Definition edje_smart.c:467
elm_app_data_dir_get
const char * elm_app_data_dir_get(void)
Get the application's run time data prefix directory, as set by elm_app_info_set() and the way (envir...
Definition elm_main.c:586
elm_check_state_get
Eina_Bool elm_check_state_get(const Evas_Object *obj)
Get the state of the check object.
Definition efl_ui_check.c:381
elm_object_part_content_set
void elm_object_part_content_set(Evas_Object *obj, const char *part, Evas_Object *content)
Set the content on part of a given container widget.
Definition elm_main.c:1562
evas_object_evas_get
EVAS_API Evas * evas_object_evas_get(const Eo *eo_obj)
Get the Evas to which this object belongs to.
Definition evas_object_main.c:2662
else
elm_object_part_content_set(o_bg, "overlay", NULL);
}

And the last one, used to set the color (with elm_bg_color_set()):

_cb_color_changed(void *data, Evas_Object *obj, void *event EINA_UNUSED)
{
Evas_Object *o_bg = data;
double val = 0.0;
val = elm_spinner_value_get(obj);
if (EINA_DBL_EQ(val, 1.0))
elm_bg_color_set(o_bg, 255, 255, 255);
else if (EINA_DBL_EQ(val, 2.0))
elm_bg_color_set(o_bg, 255, 0, 0);
else if (EINA_DBL_EQ(val, 3.0))
elm_bg_color_set(o_bg, 0, 0, 255);
else if (EINA_DBL_EQ(val, 4.0))
elm_bg_color_set(o_bg, 0, 255, 0);
}
EINA_DBL_EQ
#define EINA_DBL_EQ(a, b)
Safe comparison of double.
Definition eina_util.h:100
elm_bg_color_set
void elm_bg_color_set(Evas_Object *obj, int r, int g, int b)
Sets the color on a given background widget.
Definition efl_ui_bg.c:138
elm_spinner_value_get
double elm_spinner_value_get(const Evas_Object *obj)
Control the value the spinner displays.
Definition elm_spinner.c:1387

We will get back to what these functions do soon. If you want to know more about how to set these callbacks and what these widgets are, look for:

- elm_radio_add()
- elm_check_add()
- elm_spinner_add()

Now going to the main function, `test_bg_options`, we have the common code with the other examples:

win = elm_win_util_standard_add("bg-options", "Bg Options");
elm_win_autodel_set(win, EINA_TRUE);
EINA_TRUE
#define EINA_TRUE
boolean value TRUE (numerical value 1)
Definition eina_types.h:539
elm_win_util_standard_add
Evas_Object * elm_win_util_standard_add(const char *name, const char *title)
Adds a window object with standard setup.
Definition efl_ui_win.c:9587
elm_win_autodel_set
void elm_win_autodel_set(Eo *obj, Eina_Bool autodel)
Set the window's autodel state.
Definition efl_ui_win.c:6199

We add a plain background to this window, so it will have the default background color behind everything:

Then we add a vertical box (elm_box_add()) that will hold the background object that we are going to play with, as well as a horizontal box that will hold widgets:

Now we add the background object that is going to be of use for our example. It is an image background, as used in elm_bg - Image background. , so the code should be familiar:

Notice the call to elm_box_pack_end(): it will pack the background object in the end of the Elementary box declared above. Just refer to that documentation for more info.

Since this Elementary background is already an image background, we are going to play with its other properties. We will change its option (CENTER, SCALE, STRETCH, TILE), its color (RGB), and add an overlay to it. For all of these properties, we are going to add widgets that will configure them.

First, lets add the horizontal box that will hold these widgets:

For now, just consider this `hbox` as a rectangle that will contain the widgets, and will distribute them horizontally inside its content. Then we add radio buttons that will allow us to choose the property to use with this background:

Again, I won't give details about the use of these widgets, just look for their documentation if necessary. It's enough to know for now that we are packing them in the `hbox`, setting a label for them, and the most important parts: setting its value to `ELM_BG_OPTION_CENTER` and its callback to `_cb_radio_changed` (the function defined in the beginning of this example). We do this for the next 3 radio buttons added after this one, each of them with a different value.

Now taking a look at the code of the callback `_cb_radio_changed` again, it will call elm_bg_option_set() with the value set from the checked radio button, thus setting the option for this background. The background is passed as argument to the `data` parameter of this callback, and is referenced here as `o_bg`.

Later we set the default value for this radio button:

Then we add a checkbox for the elm_object_content_set() function for the bg:

Now look at the code of the `_cb_overlay_changed` again. If the checkbox state is checked, an overlay will be added to the background. It's done by creating an Edje object, and setting it with elm_object_content_set() to the background object. For information about what are and how to set Edje object, look at the Edje documentation.

Finally we add a spinner object (elm_spinner_add()) to be used to select the color of our background. In its callback it's possible to see the call to elm_bg_color_set(), which will change the color of this background. This color is used by the background to fill areas where the image doesn't cover (in this case, where we have an image background). The spinner is also packed into the `hbox` :

Then we just have to pack the `hbox` inside the `box`, set some size hints, and show our window:

Now to see this code in action, open elementary_test, and go to the "Bg Options" test. It should demonstrate what was implemented here.