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));
}

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);
     }
   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);
}

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);

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.