Languages

Menu
Sites
Language
Gradient in wearable 2.3.1

Hi,

i was wondering if it's possible to add gradient background to different elements?

I know how to add it when drawing on cario:

cairo_set_line_width(cairo, 2);
cairo_pattern_t *linear = cairo_pattern_create_linear(0, 0, 0, graph_size.y);
cairo_pattern_add_color_stop_rgba (linear, 1,   0.54, 0.2,  0.14, 1);
cairo_pattern_add_color_stop_rgba (linear, 0.5, 1,    0.59, 0.11, 1);
cairo_pattern_add_color_stop_rgba (linear, 0,   0.34, 0.7,  0.13, 1);
cairo_set_source(cairo, linear);

But can I set eext_circle_object background color as gradient? Or can I set gradient as background color in edje for SWALLOW or RECT part (i tried creating GRADIENT type but compilator says it doesnt exist)?

The link in other question does not work (404 error).

Edited by: Jakub Wiśniewski on 28 Mar, 2017
List

Responses

3 Replies
Shaswati Saha

Did you try to set image object(with modified image data into it) to the elements you want gradient background?

Jakub Wiśniewski

No i did not. What do you mean by modifed image data? Could you give some example?

Shaswati Saha

You may try the following way.

Step 1: Add an evas object and write the code below:

ad->img = create_gradient_rect(ad);

Step 2: Write the create_gradient_rect() function as below:

static Evas_Object * create_gradient_rect(appdata_s *ad)
{
    /* Generate gradient data on the fly */
    const int colors[8][4] = {
        /* red to blue */
        { 255, 0, 0, 255 }, { 0, 0, 255, 255 },
        /* black to transparent */
        { 0, 0, 0, 255 }, { 0, 0, 0, 0 },
        /* green to orange */
        { 0, 255, 0, 255 }, { 255, 128, 0, 255 },
        /* yellow to cyan */
        { 255, 255, 0, 255 }, { 0, 255, 255, 255 }
    };
    Evas_Object *img;
    unsigned int *data32;

    /* Create image object, set its image data size & type */
    Evas* canvas = evas_object_evas_get(ad->win);
    img = evas_object_image_filled_add(canvas);
    /* BGRA data */
    evas_object_image_colorspace_set(img, EVAS_COLORSPACE_ARGB8888);
    /* Size is 255x1 */
    evas_object_image_size_set(img, 255, 1);
    /* Mark image as having alpha */
    evas_object_image_alpha_set(img, EINA_TRUE);

    /* get a writable data pointer */
    data32 = evas_object_image_data_get(img, EINA_TRUE);

    /* change the index values according to your desired gradient */
    for (unsigned x = 0; x < 255; x++)
    {
        int r, g, b, a;
        /* interpolate alpha */
        a = (colors[3*2][3] * (255 - x) + colors[1*2+1][3] * x) / (2 * 255);
        /* interpolate red */
        r = (colors[2*2][0] * colors[2*2][3] * (255 - x) + colors[2*2+1][0] * colors[2*2+1][3] * (x)) / (2 * 255 * 255);
        /* interpolate green */
        g = (colors[4*2][1] * colors[3*2][3] * (255 - x) + colors[3*2+1][1] * colors[3*2+1][3] * (x)) / (2 * 255 * 255);
        /* interpolate blue */
        b = (colors[2*2][2] * colors[3*2][3] * (255 - x) + colors[3*2+1][2] * colors[3*2+1][3] * (x)) / (2 * 255 * 255);
        /* write pixel value now */
        data32[x] = (a << 24) | (r << 16) | (g << 8) | b;
    }
    evas_object_image_data_set(img, data32);
    evas_object_size_hint_weight_set(img, EVAS_HINT_EXPAND, EVAS_HINT_EXPAND);
    evas_object_size_hint_align_set(img, EVAS_HINT_FILL, EVAS_HINT_FILL);
    evas_object_show(img);
    return img;
}

Step 3: Write this line in base gui function:

ad->img = create_rainbow_rect(ad);

Step 4: Write the create_rainbow_rect() function as below:

static Evas_Object *
create_rainbow_rect(appdata_s *ad)
{
    /* A much simpler method for gradients is to simply use an image from disk */
    Evas_Object *img;
    char path[PATH_MAX];

    /* Create image object, set its image data size & type */
    Evas* canvas = evas_object_evas_get(ad->win);
    img = evas_object_image_filled_add(evas_object_evas_get(canvas));

    snprintf(path, sizeof(path), "%s/an_image.png", app_get_resource_path());
    dlog_print(DLOG_ERROR, LOG_TAG, "path: '%s'", path);
    evas_object_image_file_set(img, path, NULL);

    evas_object_size_hint_weight_set(img, EVAS_HINT_EXPAND, EVAS_HINT_EXPAND);
    evas_object_size_hint_align_set(img, EVAS_HINT_FILL, EVAS_HINT_FILL);
    evas_object_show(img);
    return img;
}