Tizen Native: How to change the progressbar color

Question

I'm developing a Tizen Native Wearable App.

I want to change the color of my progressbar so I'm following this links:

• https://developer.tizen.org/zh-hans/forums/native-application-development/color-progressbar-processsmall-style?langswitch=zh-hans

• https://developer.tizen.org/zh-hans/development/ui-practices/native-application/efl/ui-component-infrastructure-modules/customizing-components?langredirect=1

I know that in order to change the color of any widget in Tizen I need to use "Themes" but I can't get it to work. This is what I did:

In my app_main.c I have:

static bool _on_create_cb(void *user_data)
{
    uib_app_manager_get_instance()->initialize();

    char resource_path[PATH_MAX];
    app_get_resource("edje/progressbar_custom.edj", resource_path, (int)PATH_MAX);
    elm_theme_extension_add(NULL, resource_path);

    return true;
}

In the folder res I created a folder edje and then in res/edje I created a file progressbar_custom.edc The content of progressbar_custom.edc is the one given as answer in the first link.

Then in my progress bar object I set the style:

...
Evas_Object* pb;
pb = elm_progressbar_add(parent);
elm_object_style_set(pb, "custom_progress");
...

When I launch the app the progressbar does not show. I guess that the problem is the content of the progressbar_custom.edc because I think it comes from mobile, not wearable. Every tutorial says to copy the content of the "default style" but I have no idea where this "default style" is!

Any help is apreciated, thanks!

Answer 1

I think EDJE syntax or part name in your edc file is not vailable in current wearable tizen.

data.item means some data is supplied from outside of edje. and blar_vg_blar means efl vector graphic API draw something in there. but vector graphic API is not in version of tizen wearable (2.3.1).

Basically, EDJE theme for Elementary is super entangled with elementary widget code. elementary widget code use hard coded signals and part name in EDC file.

so elementary's theme is not means another themes like css. it has logic for viewing and events and some controller and data for view.

if you want make new theme you implement everything again that implemented in default theme.

best easy way is copy original one and edit it. so you must check version of your target for copying right theme.

currently, every wearable tizen OS in samsung device is under 2.3.1.

so you should make theme match with tizen 2.3.1 wearable profile.

this is basic theme for tizen 2.3.1 wearable profile. it's not same in real device because real device can has different theme then original profile. it is same relationship like google's android theme and other vendors themes.

Anyway you can refer this that is default progressbar theme in tizen 2.3.1 wearable.

I make some simple example with modifed default style in EDC's first group.

progressbartest.cpp

#include <app.h>
#include <Elementary.h>
#include <efl_extension.h>
#include <dlog.h>

#define LOG_TAG "progressbartest"

#include <string>
#include <cstdlib>

static void layout_back_cb(void *data, Evas_Object *obj, void *event_info)
{
    Evas_Object* win = static_cast<Evas_Object*>(data);
    elm_win_lower(win);
}

static bool create_base_gui()
{
    char *res_path_ptr = app_get_resource_path();
    std::string res_path(res_path_ptr);
    std::free (res_path_ptr);

    std::string edje_path = res_path + "edje/progressbartest.edj";
    elm_theme_extension_add(nullptr, edje_path.c_str());

    Evas_Object* win = elm_win_util_standard_add("test", "test");
    elm_win_conformant_set(win, EINA_TRUE);
    elm_win_autodel_set(win, EINA_TRUE);

    evas_object_smart_callback_add(win, "delete,request", [](void*, Evas_Object*, void*){ui_app_exit();}, NULL);
    eext_object_event_callback_add(win, EEXT_CALLBACK_BACK, layout_back_cb, win);

    Evas_Object* pb = elm_progressbar_add(win);

    bool ret = elm_object_style_set(pb, "custom_progress");

    elm_progressbar_value_set(pb, 0.5);
    evas_object_move(pb, 10, 150);
    evas_object_resize(pb, 340, 20);
    evas_object_show(pb);

    evas_object_show(win);

    return true;
}


int main(int argc, char *argv[])
{
    ui_app_lifecycle_callback_s event_callback = {};
    event_callback.create = [](void *data)->bool { return create_base_gui(); };
    return ui_app_main(argc, argv, &event_callback, nullptr) != APP_ERROR_NONE;
}

progressbartest.edc (modified group from default one)

#define PROGRESSBAR_HEIGHT 30

collections {
   group { name: "elm/progressbar/horizontal/custom_progress";
      parts {
         part { name: "access";
            type: RECT;
            description { state: "default" 0.0;
               fixed: 1 1;
               color: 0 0 0 0;
            }
         }
         part { name: "background";
            type: RECT;
            mouse_events: 0;
            scale: 1;
            description { state: "default" 0.0;
               rel1.to: "elm.swallow.bar";
               rel2.to: "elm.swallow.bar";
               color: 71 200 71 255;
            }
         }
         part { name: "elm.swallow.bar";
            mouse_events: 0;
            scale: 1;
            type: SWALLOW;
            description { state: "default" 0.0;
               min: 1 PROGRESSBAR_HEIGHT;
               max: -1 PROGRESSBAR_HEIGHT;
            }
         }
         part { name: "drag.background";
            mouse_events: 0;
            type: RECT;
            scale: 1;
            description {
               state: "default" 0.0;
               visible: 0;
               rel1.to: "elm.swallow.bar";
               rel2.to: "elm.swallow.bar";
            }
         }
         part { name: "elm.progress.progressbar";
            type: RECT;
            mouse_events: 0;
            scale: 1;
            description {
               state: "default" 0.0;
               min: 0 0;
               fixed: 1 1;
               rel1.to: "elm.swallow.bar";
               rel2 {
                  to_x: "elm.cur.progressbar";
                  to_y: "elm.swallow.bar";
                  offset: -1 -1;
                  relative: 0.5 1.0;
               }
               color: 255 110 0 255;
            }
            description {
               state: "invert" 0.0;
               inherit: "default" 0.0;
               rel1 {
                  to_y: "elm.swallow.bar";
                  to_x: "elm.cur.progressbar";
                  relative: 0.0 0.0;
               }
               rel2.to: "elm.swallow.bar";
               rel2.relative: 1.0 1.0;
            }
            description {
               state: "state_begin" 0.0;
               inherit: "default" 0.0;
               rel1 {
                  to: "elm.swallow.bar";
                  relative: 0.0 0.0;
               }
               rel2 {
                  to: "elm.swallow.bar";
                  relative: 0.1 1.0;
               }
            }
            description {
               state: "state_end" 0.0;
               inherit: "default" 0.0;
               rel1 {
                  to: "elm.swallow.bar";
                  relative: 0.0 0.0;
               }
               rel2 {
                  to: "elm.swallow.bar";
                  relative: 1.0 1.0;
               }
            }
            description { state: "disabled" 0.0;
               inherit: "default" 0.0;
               color: 0 110 255 38;
            }
         }
         part { name: "elm.cur.progressbar";
            mouse_events: 0;
            scale: 1;
            dragable {
               confine: "drag.background";
               x: 1 1 1;
               y: 0 0 0;
            }
            description { state: "default" 0.0;
               min: 0 10;
               fixed: 1 1;
               visible: 0;
               rel1.to: "drag.background";
               rel2.to: "drag.background";
            }
         }
         part { name: "progress-rect";
            type: RECT;
            mouse_events: 0;
            scale: 1;
            description {
               state: "default" 0.0;
               rel1.to: "elm.progress.progressbar";
               rel2.to: "elm.progress.progressbar";
               color: 0 0 0 0;
            }
         }
      }
      programs {
         program { name: "slide_to_end";
            action:  STATE_SET "state_end" 0.0;
            transition: LINEAR 0.5;
            target: "elm.progress.progressbar";
            after: "slide_to_begin";
         }
         program { name: "slide_to_begin";
            signal: "elm,state,slide,begin";
            action: STATE_SET "state_begin" 0.0;
            target: "elm.progress.progressbar";
            transition: LINEAR 0.5;
            after: "slide_to_end";
         }
         program { name: "start_pulse";
            signal: "elm,state,pulse,start";
            source: "elm";
         }
         program { name: "stop_pulse";
            signal: "elm,state,pulse,stop";
            source: "elm";
            action: ACTION_STOP;
            target: "slide_to_begin";
            target: "slide_to_end";
            target: "start_pulse";
         }
         program { name: "state_pulse";
            signal: "elm,state,pulse";
            source: "elm";
            action: STATE_SET "state_begin" 0.0;
            target: "elm.progress.progressbar";
         }
         program { name: "state_fraction";
            signal: "elm,state,fraction";
            source: "elm";
            action: ACTION_STOP;
            target: "slide_to_begin";
            target: "slide_to_end";
            target: "start_pulse";
            action: STATE_SET "default" 0.0;
            target: "elm.progress.progressbar";
         }
         program { name: "set_invert_on";
            signal: "elm,state,inverted,on";
            source: "elm";
            action:  STATE_SET "invert" 0.0;
            target: "elm.progress.progressbar";
         }
         program { name: "set_invert_off";
            signal: "elm,state,inverted,off";
            source: "elm";
            action:  STATE_SET "default" 0.0;
            target: "elm.progress.progressbar";
         }
         program { name: "progressbar_disable";
            signal: "elm,state,disabled";
            source: "elm";
            action:  STATE_SET "disabled" 0.0;
            target: "elm.progress.progressbar";
            target: "background";
         }
         program { name: "progressbar_enable";
            signal: "elm,state,enabled";
            source: "elm";
            action:  STATE_SET "default" 0.0;
            target: "elm.progress.progressbar";
            target: "background";
         }
      }
   }
}