By Kim

21 Mar 2016 06:10 English 6 Replies

Hi,

How can I change the color of progress(process/small)?

Thank you,

Evas_Object *progress = elm_progressbar_add(layout);

elm_object_part_content_set(layout, "progress", progress);

elm_object_style_set(progress, "process/small");

Responses

6 Replies

woochan lee

21 Mar 2016 07:11

We dont have easy way yet.

I hope it will be changed to simple thing since tizen 3.0

Anyway, my guide is theme customizing to support your request.

please refer to theme customizing guide here :

https://developer.tizen.org/development/ui-practices/native-application/efl/ui-component-infrastructure-modules/customizing-components

Add attached edc code in your custom edc

the progressbar color will be shown with red color in your application.

I get below code in efl-theme-tizen/mobile/widget/progressbar.edc in public tizen_2.4 git.

then change only color and replace defined value.

I hope it helps

group { name: "elm/progressbar/horizontal/custom_progress";
   data.item: "vector_ux" "process_small";
   parts {
      part { name: "access";
         type: RECT;
         description { state: "default" 0.0;
            fixed: 1 1;
            color: 0 0 0 0;
         }
      }
      part { name: "elm.swallow.bar";
         type: SWALLOW;
         description { state: "default" 0.0;
            visible: 0;
         }
      }
      part { name: "clipper";
         type: RECT;
         mouse_events: 0;
         scale: 1;
         description { state: "default" 0.0;
            min: 44 44;
            max: 44 44;
            color: 255 0 0 255;
         }
      }
      part { name: "tizen_vg_shape1";
         type: SWALLOW;
         mouse_events: 0;
         scale: 1;
         clip_to: "clipper";
         description { state: "default" 0.0;
            rel1.to: "clipper";
            rel2.to: "clipper";
         }
      }

      part { name: "tizen_vg_shape2";
         type: SWALLOW;
         mouse_events: 0;
         scale: 1;
         clip_to: "tizen_vg_shape2_clipper";
         description { state: "default" 0.0;
            rel1.to: "clipper";
            rel2.to: "clipper";
         }
      }

      part { name: "tizen_vg_shape2_clipper";
         type: RECT;
         mouse_events: 0;
         scale: 1;
         description { state: "default" 0.0;
            color: 255 0 0 255;
         }
      }
      part { name: "tizen_vg_shape3";
         type: SWALLOW;
         mouse_events: 0;
         scale: 1;
         clip_to: "tizen_vg_shape3_clipper";
         description { state: "default" 0.0;
            rel1.to: "clipper";
            rel2.to: "clipper";
         }
      }
      part { name: "tizen_vg_shape3_clipper";
         type: RECT;
         mouse_events: 0;
         scale: 1;
         description { state: "default" 0.0;
            color: 255 0 0 255;
         }
      }
   }
   programs {
      program { name: "start_pulse";
         signal: "elm,state,pulse,start";
         source: "elm";
         action: STATE_SET "default" 0.0;
         target: "clipper";
      }
      program { name: "stop_pulse";
         signal: "elm,state,pulse,stop";
         source: "elm";
         action: ACTION_STOP;
         target: "start_pulse";
         after: "init_pulse";
      }
      program { name: "init_pulse";
         action: STATE_SET "default" 0.0;
         target: "clipper";
      }
   }

Reply to this post
Mark as answer

Kim

22 Mar 2016 03:02

Hi,

Thank you for your solution.

I appended your edc code in my custom theme edc, but It's not working, it shows only horizontal default progressbar with below code.

elm_object_part_content_set(layout, "loading_progress", progress);
elm_object_theme_set(progress, get_theme());
Eina_Bool ret = elm_object_style_set(progress, "elm/progressbar/horizontal/custom_progress");
LOG_D("set progress style : %d",ret);

get_theme() returns parent theme edj file and it includes custom edc files.

apptheme = elm_theme_new();
elm_theme_ref_set(apptheme, NULL);
elm_theme_extension_add(apptheme, get_edj_path(EDC_THEME_MAIN));

EDC_THEME_MAIN(edje/widget_theme.edj)

collections
{
    #include "../../edc/theme/button.edc"
    #include "../../edc/theme/progressbar.edc"
}

I don't know what's the problem.

Thank you.

Reply to this post
Mark as answer

woochan lee

22 Mar 2016 04:34

hello

can you try like that?

elm_object_style_set(progress, "custom_progress");

Reply to this post
Mark as answer

woochan lee

22 Mar 2016 04:41

you don't have to call below APIs

apptheme = elm_theme_new();
elm_theme_ref_set(apptheme, NULL);

Add below code before style set for progressbar.

/* Base Layout */
app_get_resource(EDJ_FILE, edj_path, (int)PATH_MAX);
/* Appends a theme extension to the list of extensions */
elm_theme_extension_add(NULL, edj_path);

hope you got solution.

Reply to this post
Mark as answer

Kim

22 Mar 2016 06:39

Thank you Lee. But, It's not workning.

I think we used wrong progressbar theme. The style(process/small) is wearable UI.

I'm sorry I didn't tell you this sooner.

As far as I kown. "process_small" style is not included in wearable SDK.

Reply to this post
Mark as answer

Alex Dem

23 Mar 2016 01:04

Hi,
fyi, of cause you could try to select the color with evas_object_color_set, but it will affect whole component (not sure that it is good way).
Alexey.

Reply to this post
Mark as answer

User Menu

Tizen Forums

Community

Community

Responses

Search form

Responses