From: Jaehwan Kim Date: Fri, 14 Jun 2013 07:47:38 +0000 (+0900) Subject: [Toolbar] Add the sliding text effect. X-Git-Tag: submit/tizen_2.2/20130714.144922~153 X-Git-Url: http://review.tizen.org/git/?a=commitdiff_plain;h=632d135eb3e0e8bcb039148f4cbdc5cec2dac33c;p=framework%2Fuifw%2Fefl-theme-tizen.git [Toolbar] Add the sliding text effect. Change-Id: I29ee7a16ff6edd36419650514aeda0b83d92f8d6 --- diff --git a/themes/images/HD/dark/Naviframe/00_effect_tab_text_dim_left.png b/themes/images/HD/dark/Naviframe/00_effect_tab_text_dim_left.png new file mode 100755 index 0000000..61f804b Binary files /dev/null and b/themes/images/HD/dark/Naviframe/00_effect_tab_text_dim_left.png differ diff --git a/themes/images/HD/dark/Naviframe/00_effect_tab_text_dim_left_02.png b/themes/images/HD/dark/Naviframe/00_effect_tab_text_dim_left_02.png new file mode 100755 index 0000000..fe72199 Binary files /dev/null and b/themes/images/HD/dark/Naviframe/00_effect_tab_text_dim_left_02.png differ diff --git a/themes/images/HD/dark/Naviframe/00_effect_tab_text_dim_right.png b/themes/images/HD/dark/Naviframe/00_effect_tab_text_dim_right.png new file mode 100755 index 0000000..2c890d9 Binary files /dev/null and b/themes/images/HD/dark/Naviframe/00_effect_tab_text_dim_right.png differ diff --git a/themes/images/HD/dark/Naviframe/00_effect_tab_text_dim_right_02.png b/themes/images/HD/dark/Naviframe/00_effect_tab_text_dim_right_02.png new file mode 100755 index 0000000..c37480d Binary files /dev/null and b/themes/images/HD/dark/Naviframe/00_effect_tab_text_dim_right_02.png differ diff --git a/themes/widgets/toolbar.edc b/themes/widgets/toolbar.edc index 813665b..c27afcb 100644 --- a/themes/widgets/toolbar.edc +++ b/themes/widgets/toolbar.edc @@ -19,6 +19,10 @@ #define ITEM_STATE_ENABLED 0 #define ITEM_STATE_DISABLED 1 +#define TOOLBAR_SLIDING_PER_FPS 2 +#define TOOLBAR_SLIDING_FPS 40.0 +#define TOOLBAR_SLIDING_TEXT_GAP 40 +#define TOOLBAR_SLIDING_TEXT_OFFSET 5 #define TOOLBAR_TEXT_STYLE(_font_size) \ style { name: "toolbar_text_style_"_font_size; \ @@ -774,14 +778,95 @@ group { name: "elm/toolbar/item/tabbar"; image: "00_badge_bg.png" COMP; image: "00_focus.png" COMP; image: "00_tab_focus.png" COMP; + image: "00_effect_tab_text_dim_left.png" COMP; + image: "00_effect_tab_text_dim_right.png" COMP; } data.item: "transition_animation_on" "1"; script { public item_state = ITEM_STATE_ENABLED; public items_number = 0; - public selected = 0; - public temp; + public sliding_timer; + public end_timer; + public text_w; + public org_text_w; + public loop_count = 0; + + public get_width() { + new x, y, w, h; + set_state(PART:"elm.text", "visible", 0.0); + get_geometry(PART:"elm.text", x, y, w, h); + set_int(org_text_w, w); + + set_state(PART:"elm.text", "sliding", 0.0); + get_geometry(PART:"elm.text", x, y, w, h); + set_int(text_w, w); + } + public ender(val) { + set_int(loop_count, 0); + if (get_int(sliding_timer)) cancel_timer(get_int(sliding_timer)); + set_int(sliding_timer, 0); + if (get_int(end_timer)) cancel_timer(get_int(end_timer)); + set_int(end_timer, 0); + set_state(PART:"elm.text.dim.left", "default", 0.0); + set_state(PART:"elm.text_new.clipper", "default", 0.0); + if (val == 1) { + custom_state(PART:"elm.text", "sliding", 0.0); + set_state_val(PART:"elm.text", STATE_REL1_OFFSET, TOOLBAR_SLIDING_TEXT_OFFSET, 0); + set_state_val(PART:"elm.text", STATE_REL2_OFFSET, TOOLBAR_SLIDING_TEXT_OFFSET, 0); + set_state(PART:"elm.text", "custom", 0.0); + } else { + set_state(PART:"elm.text", "visible", 0.0); + set_state(PART:"elm.text.dim.right", "default", 0.0); + } + } + public sliding(val) { + new buf[128]; + if (val == TOOLBAR_SLIDING_TEXT_OFFSET) { + set_int(loop_count, get_int(loop_count) + 1); + get_width(); + if (get_int(text_w) <= get_int(org_text_w)) { + ender(0); + return; + } + } + val -= TOOLBAR_SLIDING_PER_FPS; +// for debuging ////////////////////////////// +/* snprintf(buf, 127, "%d:%d:%d", + val, get_int(org_text_w), get_int(text_w)); + set_text(PART:"dbg", buf);*/ + + if (val <= -get_int(text_w) - TOOLBAR_SLIDING_TEXT_GAP + TOOLBAR_SLIDING_TEXT_OFFSET) + val = TOOLBAR_SLIDING_TEXT_OFFSET; + custom_state(PART:"elm.text", "sliding", 0.0); + set_state_val(PART:"elm.text", STATE_REL1_OFFSET, val, 0); + set_state_val(PART:"elm.text", STATE_REL2_OFFSET, val, 0); + set_state(PART:"elm.text", "custom", 0.0); + + set_state(PART:"elm.text_new.clipper", "animation", 0.0); + get_text(PART:"elm.text", buf, 128); + set_text(PART:"elm.text_new", buf); + custom_state(PART:"elm.text_new", "sliding", 0.0); + set_state_val(PART:"elm.text_new", STATE_REL1_OFFSET, + val + get_int(text_w) + TOOLBAR_SLIDING_TEXT_GAP, 0); + set_state_val(PART:"elm.text_new", STATE_REL2_OFFSET, + val + get_int(text_w) + TOOLBAR_SLIDING_TEXT_GAP, 0); + set_state(PART:"elm.text_new", "custom", 0.0); + + set_state(PART:"elm.text.dim.left", "show", 0.0); + set_state(PART:"elm.text.dim.right", "show", 0.0); + + if (val == TOOLBAR_SLIDING_TEXT_OFFSET || val <= -get_int(text_w)) + set_state(PART:"elm.text.dim.left", "default", 0.0); + + if (val == TOOLBAR_SLIDING_TEXT_OFFSET) { + if (get_int(loop_count) < 3) + set_int(sliding_timer, timer(2.0, "sliding", TOOLBAR_SLIDING_TEXT_OFFSET)); + else + set_int(end_timer, timer(0.5, "ender", 1)); + } else + set_int(sliding_timer, timer(1.0/TOOLBAR_SLIDING_FPS, "sliding", val)); + } } parts { part { name: "bg"; @@ -821,7 +906,7 @@ group { name: "elm/toolbar/item/tabbar"; description { state: "default" 0.0; align: 0.0 0.0; rel2.relative: 0.0 0.0; - min: 0 0; + min: 2 0; fixed: 1 1; visible: 0; color: 0 0 0 0; @@ -834,7 +919,7 @@ group { name: "elm/toolbar/item/tabbar"; description { state: "default" 0.0; align: 1.0 1.0; rel1.relative: 1.0 1.0; - min: 0 0; + min: 2 0; fixed: 1 1; visible: 0; color: 0 0 0 0; @@ -1041,6 +1126,13 @@ group { name: "elm/toolbar/item/tabbar"; inherit: "default" 0.0; visible: 1; } + description { state: "sliding" 0.0; + inherit: "visible" 0.0; + rel1.offset: TOOLBAR_SLIDING_TEXT_OFFSET 0; + rel2.offset: TOOLBAR_SLIDING_TEXT_OFFSET 0; + text.min: 1 1; + align: 0.0 0.5; + } } part { name: "elm.text_new"; type: TEXTBLOCK; @@ -1070,6 +1162,13 @@ group { name: "elm/toolbar/item/tabbar"; inherit: "default" 0.0; visible: 1; } + description { state: "sliding" 0.0; + inherit: "visible" 0.0; + rel1.offset: TOOLBAR_SLIDING_TEXT_OFFSET 0; + rel2.offset: TOOLBAR_SLIDING_TEXT_OFFSET 0; + text.min: 1 1; + align: 0.0 0.5; + } } part { name: "selected_line"; type: IMAGE; @@ -1223,87 +1322,202 @@ group { name: "elm/toolbar/item/tabbar"; part { name: "elm.text.clipper"; type: RECT; description { state: "default" 0.0; + rel1 { + relative: 1.0 1.0; + to: "padding_left_top"; + } + rel2 { + relative: 0.0 0.0; + to: "padding_right_bottom"; + } color: 255 255 255 255; } description { state: "animation" 0.0; + inherit: "default" 0.0; color: 255 255 255 0; } description { state: "disabled" 0.0; + inherit: "default" 0.0; color: 255 255 255 153; } } part { name: "elm.text_new.clipper"; type: RECT; description { state: "default" 0.0; + rel1 { + relative: 1.0 1.0; + to: "padding_left_top"; + } + rel2 { + relative: 0.0 0.0; + to: "padding_right_bottom"; + } color: 255 255 255 0; } description { state: "animation" 0.0; + inherit: "default" 0.0; color: 255 255 255 255; } description { state: "disabled" 0.0; + inherit: "default" 0.0; color: 255 255 255 153; } } part { name: "elm.icon.proxy.clipper"; type: RECT; description { state: "default" 0.0; + rel1 { + relative: 1.0 1.0; + to: "padding_left_top"; + } + rel2 { + relative: 0.0 0.0; + to: "padding_right_bottom"; + } color: 0 0 0 255; } description { state: "animation" 0.0; + inherit: "default" 0.0; color: 0 0 0 255; } description { state: "selected" 0.0; + inherit: "default" 0.0; color: 0 0 0 255; } description { state: "disabled" 0.0; + inherit: "default" 0.0; color: 0 0 0 255; } } part { name: "elm.icon_new.proxy.clipper"; type: RECT; description { state: "default" 0.0; + rel1 { + relative: 1.0 1.0; + to: "padding_left_top"; + } + rel2 { + relative: 0.0 0.0; + to: "padding_right_bottom"; + } color: 0 0 0 255; } description { state: "animation" 0.0; + inherit: "default" 0.0; color: 0 0 0 255; } description { state: "selected" 0.0; + inherit: "default" 0.0; color: 0 0 0 255; } description { state: "disabled" 0.0; + inherit: "default" 0.0; color: 0 0 0 255; } } + part { name: "elm.icon.clipper"; type: RECT; description { state: "default" 0.0; + rel1 { + relative: 1.0 1.0; + to: "padding_left_top"; + } + rel2 { + relative: 0.0 0.0; + to: "padding_right_bottom"; + } color: 255 255 255 255; } description { state: "animation" 0.0; + inherit: "default" 0.0; color: 255 255 255 255; } description { state: "selected" 0.0; + inherit: "default" 0.0; color: 255 255 255 255; } description { state: "disabled" 0.0; + inherit: "default" 0.0; color: 255 255 255 255; } } part { name: "elm.icon_new.clipper"; type: RECT; description { state: "default" 0.0; + rel1 { + relative: 1.0 1.0; + to: "padding_left_top"; + } + rel2 { + relative: 0.0 0.0; + to: "padding_right_bottom"; + } color: 255 255 255 255; } description { state: "animation" 0.0; + inherit: "default" 0.0; color: 255 255 255 255; } description { state: "selected" 0.0; + inherit: "default" 0.0; color: 255 255 255 255; } description { state: "disabled" 0.0; + inherit: "default" 0.0; color: 255 255 255 255; } } + part { name: "elm.text.dim.left"; + type: IMAGE; + scale: 1; + mouse_events: 0; + description { state: "default" 0.0; + min: 45 0; + align: 0.0 0.5; + visible: 0; + rel1 { + relative: 0.0 0.0; + to_x: "elm.text.clipper"; + to_y: "elm.text"; + } + rel2 { + relative: 0.0 1.0; + to_x: "elm.text.clipper"; + to_y: "elm.text"; + } + image.normal: "00_effect_tab_text_dim_left.png"; + } + description { state: "show" 0.0; + inherit: "default" 0.0; + visible: 1; + } + } + part { name: "elm.text.dim.right"; + type: IMAGE; + scale: 1; + mouse_events: 0; + description { state: "default" 0.0; + min: 45 0; + align: 1.0 0.5; + visible: 0; + rel1 { + relative: 1.0 0.0; + to_x: "elm.text.clipper"; + to_y: "elm.text"; + } + rel2 { + relative: 1.0 1.0; + to_x: "elm.text.clipper"; + to_y: "elm.text"; + } + image.normal: "00_effect_tab_text_dim_right.png"; + } + description { state: "show" 0.0; + inherit: "default" 0.0; + visible: 1; + } + } part { name: "divider"; type: RECT; scale: 1; @@ -1380,6 +1594,23 @@ group { name: "elm/toolbar/item/tabbar"; color: 0 0 0 0; } } +// for debuging ////////////////////////////// +/* part { name: "dbg"; + type: TEXTBLOCK; + mouse_events: 0; + scale: 1; + description { state: "default" 0.0; + rel1.relative: 1.0 0.0; + rel2.relative: 1.0 0.0; + fixed: 1 1; + align: 1.0 0.0; + text { + style: "toolbar_text_style_30"; + text: "test"; + min: 1 1; + } + } + }*/ } programs { program { name: "go_active"; @@ -1395,10 +1626,9 @@ group { name: "elm/toolbar/item/tabbar"; script{ new st[31]; new Float:vl; - set_int(selected, 1); get_state(PART:"elm.text", st, 30, vl); - if (!strcmp(st, "visible")) - set_state(PART:"elm.text", "visible", vl); + if (strcmp(st, "default")) + run_program(PROGRAM:"slide_start"); } } program { name: "go_passive"; @@ -1414,10 +1644,9 @@ group { name: "elm/toolbar/item/tabbar"; script{ new st[31]; new Float:vl; - set_int(selected, 0); get_state(PART:"elm.text", st, 30, vl); - if (!strcmp(st, "selected")) - set_state(PART:"elm.text", "visible", vl); + if (strcmp(st, "default")) + run_program(PROGRAM:"slide_stop"); } } program { name: "moving"; @@ -1692,6 +1921,18 @@ group { name: "elm/toolbar/item/tabbar"; action: STATE_SET "default" 0.0; target: "highlight"; } + program { name: "slide_start"; + script { + if (!get_int(sliding_timer) && !get_int(end_timer)) { + set_int(sliding_timer, timer(1.5, "sliding", TOOLBAR_SLIDING_TEXT_OFFSET)); + } + } + } + program { name: "slide_stop"; + script { + ender(0); + } + } } } @@ -1726,7 +1967,29 @@ group { name: "elm/toolbar/base/tabbar/item_with_title"; group { name: "elm/toolbar/item/tabbar/item_with_title"; inherit: "elm/toolbar/item/tabbar"; + images { + image: "00_effect_tab_text_dim_left_02.png" COMP; + image: "00_effect_tab_text_dim_right_02.png" COMP; + } parts { + part { name: "elm.text.dim.left"; + description { state: "default" 0.0; + image.normal: "00_effect_tab_text_dim_left_02.png"; + } + description { state: "show" 0.0; + inherit: "default" 0.0; + visible: 1; + } + } + part { name: "elm.text.dim.right"; + description { state: "default" 0.0; + image.normal: "00_effect_tab_text_dim_right_02.png"; + } + description { state: "show" 0.0; + inherit: "default" 0.0; + visible: 1; + } + } part { name: "divider"; type: RECT; scale: 1;