focus: Added glow effect example on a button.
authorAmitesh Singh <singh.amitesh@gmail.com>
Mon, 23 Sep 2013 17:39:26 +0000 (02:39 +0900)
committerDaniel Juyung Seo <seojuyung2@gmail.com>
Mon, 23 Sep 2013 17:42:21 +0000 (02:42 +0900)
data/objects/Makefile.am
data/objects/border.png [new file with mode: 0644]
data/objects/border2.png [new file with mode: 0644]
data/objects/border3.png [new file with mode: 0644]
data/objects/border4.png [new file with mode: 0644]
data/objects/border5.png [new file with mode: 0644]
data/objects/border6.png [new file with mode: 0644]
data/objects/test_focus_custom.edc [new file with mode: 0644]
src/bin/test.c
src/bin/test_focus3.c

index bfb699f..5ed7f91 100644 (file)
@@ -9,7 +9,7 @@ EDJE_FLAGS = $(EDJE_FLAGS_VERBOSE_$(V)) -id $(top_srcdir)/data/objects -fd $(top
 
 filesdir = $(datadir)/elementary/objects
 
-files_DATA = test.edj test_external.edj multip.edj cursors.edj font_preview.edj postit_ent.edj multibuttonentry.edj test_prefs.edj test_prefs.epb
+files_DATA = test.edj test_external.edj multip.edj cursors.edj font_preview.edj postit_ent.edj multibuttonentry.edj test_prefs.edj test_prefs.epb test_focus_custom.edj
 
 ELM_PREFS_CC = $(top_builddir)/src/bin/@ELM_PREFS_CC_PRG@
 
@@ -23,6 +23,7 @@ cursors.edc \
 font_preview.edc \
 postit_ent.edc \
 multibuttonentry.edc \
+test_focus_custom.edc \
 over.png \
 under.png \
 sky.jpg \
@@ -78,6 +79,11 @@ test_prefs.epb: Makefile test_prefs.epc
        $(top_srcdir)/data/objects/test_prefs.epc \
        $(top_builddir)/data/objects/test_prefs.epb
 
+test_focus_custom.edj: Makefile test_focus_custom.edc
+       $(EDJE_CC) $(EDJE_FLAGS) \
+       $(top_srcdir)/data/objects/test_focus_custom.edc \
+       $(top_builddir)/data/objects/test_focus_custom.edj
+
 clean-local:
        rm -f *.edj
        rm -f test_prefs.epb
diff --git a/data/objects/border.png b/data/objects/border.png
new file mode 100644 (file)
index 0000000..07ee9f8
Binary files /dev/null and b/data/objects/border.png differ
diff --git a/data/objects/border2.png b/data/objects/border2.png
new file mode 100644 (file)
index 0000000..cdf499d
Binary files /dev/null and b/data/objects/border2.png differ
diff --git a/data/objects/border3.png b/data/objects/border3.png
new file mode 100644 (file)
index 0000000..b9219c2
Binary files /dev/null and b/data/objects/border3.png differ
diff --git a/data/objects/border4.png b/data/objects/border4.png
new file mode 100644 (file)
index 0000000..ca4115c
Binary files /dev/null and b/data/objects/border4.png differ
diff --git a/data/objects/border5.png b/data/objects/border5.png
new file mode 100644 (file)
index 0000000..07e1991
Binary files /dev/null and b/data/objects/border5.png differ
diff --git a/data/objects/border6.png b/data/objects/border6.png
new file mode 100644 (file)
index 0000000..df6320b
Binary files /dev/null and b/data/objects/border6.png differ
diff --git a/data/objects/test_focus_custom.edc b/data/objects/test_focus_custom.edc
new file mode 100644 (file)
index 0000000..caa4d9c
--- /dev/null
@@ -0,0 +1,389 @@
+//  c1 - c4
+//  |base|
+//  |    |
+//  c3 - c2
+#define OUTER_BASE_PARTS(w, h)               \
+   part { name: "base"; type: SPACER;        \
+      description {                          \
+         state: "default" 0.0; } }           \
+   part { name: "c1"; type: SPACER;          \
+      description { state: "default" 0.0;    \
+         rel1.to: "base";                    \
+         rel2.to: "base";                    \
+         rel2.relative: 0 0;                 \
+         align: 1 1;                         \
+         min: w h;                           \
+         max: w h; } }                       \
+   part { name: "c3"; type: SPACER;          \
+      description { state: "default" 0.0;    \
+         rel1.to: "base";                    \
+         rel2.to: "base";                    \
+         rel1.relative: 0 1;                 \
+         rel2.relative: 0 1;                 \
+         align: 1 0;                         \
+         min: w h;                           \
+         max: w h; } }                       \
+   part { name: "c4"; type: SPACER;          \
+      description { state: "default" 0.0;    \
+         rel1.to: "base";                    \
+         rel2.to: "base";                    \
+         rel1.relative: 1 0;                 \
+         rel2.relative: 1 0;                 \
+         min: w h;                           \
+         max: w h; } }                       \
+   part { name: "c2"; type: SPACER;          \
+      mouse_events: 0;                       \
+      description { state: "default" 0.0;    \
+         rel1.to: "base";                    \
+         rel1.relative: 1 1;                 \
+         rel2.to: "base";                    \
+         rel2.relative: 1 1;                 \
+         align: 0 0;                         \
+         min: w h;                           \
+         max: w h; } }
+
+collections {
+   group { name: "elm/focus_highlight/top/glow";
+      images {
+         image: "border6.png" COMP;
+      }
+      data.item: "animate" "on";
+
+      script {
+         public src_x, src_y, src_w, src_h;
+         public diffx, diffy, diffw, diffh;
+         public anim_highlight(val, Float:pos) {
+            new x, y, w, h, dx, dy, dw, dh;
+
+            dx = round(float_mul(float(get_int(diffx)), pos));
+            x = get_int(src_x) + dx;
+            dy = round(float_mul(float(get_int(diffy)), pos));
+            y = get_int(src_y) + dy;
+            dw = round(float_mul(float(get_int(diffw)), pos));
+            w = get_int(src_w) + dw;
+            dh = round(float_mul(float(get_int(diffh)), pos));
+            h = get_int(src_h) + dh;
+
+            update_offset(x, y, w, h);
+
+            if(pos >= 1.0) {
+               emit("elm,action,focus,anim,end", "");
+               set_state(PART:"highlight", "default", 0.0);
+            }
+         }
+         public update_offset(x, y, w, h) {
+            set_state_val(PART:"base", STATE_REL1_OFFSET, x, y);
+            set_state_val(PART:"base", STATE_REL2_OFFSET, x + w, y + h);
+         }
+         public message(Msg_Type:type, id, ...) {
+            if((type == MSG_INT_SET) && (id == 1)) {
+               new x1, y1, w1, h1, x2, y2, w2, h2;
+
+               x1 = getarg(2);
+               y1 = getarg(3);
+               w1 = getarg(4);
+               h1 = getarg(5);
+               x2 = getarg(6);
+               y2 = getarg(7);
+               w2 = getarg(8);
+               h2 = getarg(9);
+
+               set_int(src_x, x1);
+               set_int(src_y, y1);
+               set_int(src_w, w1);
+               set_int(src_h, h1);
+               set_int(diffx, x2 - x1);
+               set_int(diffy, y2 - y1);
+               set_int(diffw, w2 - w1);
+               set_int(diffh, h2 - h1);
+
+               custom_state(PART:"base", "default", 0.0);
+               set_state_val(PART:"base", STATE_REL1, 0.0, 0.0);
+               set_state_val(PART:"base", STATE_REL2, 0.0, 0.0);
+               update_offset(x1, y1, w1, h1);
+               set_state(PART:"base", "custom", 0.0);
+               anim(0.2, "anim_highlight", 0);
+            }
+         }
+      } //script ends
+      parts {
+         OUTER_BASE_PARTS(12, 12);
+         part { name: "highlight"; type: IMAGE;
+            mouse_events: 0;
+            description { state: "default" 0.0;
+               image.normal: "border6.png";
+               image.border: 20 20 20 20;
+               rel1.to: "c1";
+               rel2.to: "c2";
+            }
+            description { state: "visible" 0.0;
+               inherit: "default" 0.0;
+              }
+            description { state: "invisible" 0.0;
+               inherit: "default" 0.0;
+               visible: 0;
+            }
+         }
+      } //parts ends
+      programs {
+         program { name: "show";
+            signal: "elm,action,focus,show";
+            source: "elm";
+            action: ACTION_STOP;
+            target: "hide";
+            target: "hide_start";
+            target: "hide_end";
+            after: "show_start";
+         }
+         program { name: "show_start";
+            action: STATE_SET "visible" 0.0;
+            transition: SIN 0.2;
+            target: "highlight";
+            after: "show_end";
+         }
+         program { name: "show_end";
+            action: SIGNAL_EMIT "elm,action,focus,show,end" "";
+         }
+         program { name: "hide";
+            signal: "elm,action,focus,hide";
+            source: "elm";
+            action: ACTION_STOP;
+            target: "show";
+            target: "show_start";
+            target: "show_end";
+            after: "hide_start";
+         }
+         program { name: "hide_start";
+            action: STATE_SET "invisible" 0.0;
+            transition: SIN 0.2;
+            target: "highlight";
+            after: "hide_end";
+         }
+         program { name: "hide_end";
+            action: SIGNAL_EMIT "elm,action,focus,hide,end" "";
+         }
+      } //programs ends
+   } //group ends
+
+   group { name: "elm/focus_highlight/top/glow_effect";
+      inherit: "elm/focus_highlight/top/glow";
+      images {
+         image: "border.png" COMP;
+         image: "border2.png" COMP;
+         image: "border3.png" COMP;
+         image: "border4.png" COMP;
+         image: "border5.png" COMP;
+         image: "border6.png" COMP;
+      }
+      data.item: "animate" "on";
+
+      script {
+         public src_x, src_y, src_w, src_h;
+         public diffx, diffy, diffw, diffh;
+         public anim_highlight(val, Float:pos) {
+            new x, y, w, h, dx, dy, dw, dh, Float:p;
+            p = 1.0 - ((1.0 - pos) * (1.0 - pos) * (1.0 - pos));
+
+            dx = round(float_mul(float(get_int(diffx)), p));
+            x = get_int(src_x) + dx;
+            dy = round(float_mul(float(get_int(diffy)), p));
+            y = get_int(src_y) + dy;
+            dw = round(float_mul(float(get_int(diffw)), p));
+            w = get_int(src_w) + dw;
+            dh = round(float_mul(float(get_int(diffh)), p));
+            h = get_int(src_h) + dh;
+
+            update_offset(x, y, w, h);
+
+            if(pos >= 1.0) {
+               emit("elm,action,focus,anim,end", "");
+               set_state(PART:"highlight", "default", 0.0);
+               emit("dim", "");
+            }
+         }
+         public update_offset(x, y, w, h) {
+            set_state_val(PART:"base", STATE_REL1_OFFSET, x, y);
+            set_state_val(PART:"base", STATE_REL2_OFFSET, x + w, y + h);
+         }
+         public message(Msg_Type:type, id, ...) {
+            if((type == MSG_INT_SET) && (id == 1)) {
+               new x1, y1, w1, h1, x2, y2, w2, h2;
+
+               x1 = getarg(2);
+               y1 = getarg(3);
+               w1 = getarg(4);
+               h1 = getarg(5);
+               x2 = getarg(6);
+               y2 = getarg(7);
+               w2 = getarg(8);
+               h2 = getarg(9);
+
+               set_int(src_x, x1);
+               set_int(src_y, y1);
+               set_int(src_w, w1);
+               set_int(src_h, h1);
+               set_int(diffx, x2 - x1);
+               set_int(diffy, y2 - y1);
+               set_int(diffw, w2 - w1);
+               set_int(diffh, h2 - h1);
+
+               custom_state(PART:"base", "default", 0.0);
+               set_state_val(PART:"base", STATE_REL1, 0.0, 0.0);
+               set_state_val(PART:"base", STATE_REL2, 0.0, 0.0);
+               update_offset(x1, y1, w1, h1);
+               set_state(PART:"base", "custom", 0.0);
+               anim(0.2, "anim_highlight", 0);
+            }
+         }
+      } //script ends
+      parts {
+         part { name: "highlight"; type: IMAGE;
+            mouse_events: 0;
+            description { state: "default" 0.0;
+               image.normal: "border6.png";
+               image.border: 16 16 16 16;
+               rel1.to: "c1";
+               rel2.to: "c2";
+               visible: 1;
+            }
+            description { state: "visible" 0.0;
+               inherit: "default" 0.0;
+            }
+            description { state: "visible" 0.1;
+               inherit: "visible" 0.0;
+               image.normal: "border2.png";
+               image.border: 18 18 18 18;
+            }
+            description { state: "visible" 0.2;
+               inherit: "visible" 0.0;
+               image.normal: "border3.png";
+               image.border: 19 19 19 19;
+            }
+            description { state: "visible" 0.3;
+               inherit: "visible" 0.0;
+               image.normal: "border4.png";
+               image.border: 20 20 20 20;
+            }
+            description { state: "visible" 0.4;
+               inherit: "visible" 0.0;
+               image.normal: "border5.png";
+               image.border: 21 21 21 21;
+            }
+            description { state: "visible" 0.5;
+               inherit: "visible" 0.0;
+               image.normal: "border6.png";
+               image.border: 25 25 25 25;
+            }
+            description { state: "invisible" 0.0;
+               inherit: "default" 0.0;
+               visible: 0;
+            }
+         }
+      }//parts ends
+      programs {
+         program { name: "show";
+            signal: "elm,action,focus,show";
+            source: "elm";
+            action: ACTION_STOP;
+            target: "hide";
+            target: "hide_start";
+            target: "hide_end";
+            after: "show_start";
+         }
+         program { name: "show_start";
+            action: SIGNAL_EMIT "dim" "";
+            after: "show_end";
+         }
+         program { name: "dim_start";
+            signal: "dim";
+            in: 2 0.4;
+            source: "";
+            action: STATE_SET "visible" 0.4;
+            transition: SINUSOIDAL 0.2;
+            target: "highlight";
+            after: "dim1";
+         }
+         program { name: "dim1";
+            action: STATE_SET "visible" 0.3;
+            transition: SINUSOIDAL 0.2;
+            target: "highlight";
+            after: "dim2";
+         }
+         program { name: "dim2";
+            action: STATE_SET "visible" 0.2;
+            transition: SINUSOIDAL 0.2;
+            target: "highlight";
+            after: "dim3";
+         }
+         program { name: "dim3";
+            action: STATE_SET "visible" 0.1;
+            transition: SINUSOIDAL 0.2;
+            target: "highlight";
+            after: "dim_end";
+         }
+         program { name: "dim_end";
+            action: SIGNAL_EMIT "glow" "";
+         }
+         program { name: "glow_start";
+            signal: "glow";
+            source: "";
+            in: 1 0.4;
+            action: STATE_SET "visible" 0.0;
+            transition: SINUSOIDAL 0.2;
+            target: "highlight";
+            after: "glow1";
+         }
+         program { name: "glow1";
+            action: STATE_SET "visible" 0.1;
+            transition: SINUSOIDAL 0.2;
+            target: "highlight";
+            after: "glow2";
+         }
+         program { name: "glow2";
+            action: STATE_SET "visible" 0.2;
+            transition: SINUSOIDAL 0.2;
+            target: "highlight";
+            after: "glow3";
+         }
+         program { name: "glow3";
+            action: STATE_SET "visible" 0.3;
+            transition: SINUSOIDAL 0.2;
+            target: "highlight";
+            after: "glow4";
+         }
+         program { name: "glow4";
+            action: STATE_SET "visible" 0.4;
+            transition: SINUSOIDAL 0.2;
+            target: "highlight";
+            after: "glow5";
+         }
+         program { name: "glow5";
+            action: STATE_SET "visible" 0.5;
+            transition: SINUSOIDAL 0.2;
+            target: "highlight";
+            after: "glow1";
+         }
+         program { name: "show_end";
+            action: SIGNAL_EMIT "elm,action,focus,show,end" "";
+         }
+         program { name: "hide";
+            signal: "elm,action,focus,hide";
+            source: "elm";
+            action: ACTION_STOP;
+            target: "show";
+            target: "show_start";
+            target: "show_end";
+            after: "hide_start";
+         }
+         program { name: "hide_start";
+            action: STATE_SET "invisible" 0.0;
+            transition: LIN 0.2;
+            target: "highlight";
+            after: "hide_end";
+         }
+         program { name: "hide_end";
+            action: SIGNAL_EMIT "elm,action,focus,hide,end" "";
+         }
+      } //programs ends
+   } //group ends
+}
index 33cff15..88a22ec 100644 (file)
@@ -183,6 +183,7 @@ void test_focus(void *data, Evas_Object *obj, void *event_info);
 void test_focus2(void *data, Evas_Object *obj, void *event_info);
 void test_focus3(void *data, Evas_Object *obj, void *event_info);
 void test_focus4(void *data, Evas_Object *obj, void *event_info);
+void test_focus_custom(void *data, Evas_Object *obj, void *event_info);
 void test_flipselector(void *data, Evas_Object *obj, void *event_info);
 void test_diskselector(void *data, Evas_Object *obj, void *event_info);
 void test_colorselector(void *data, Evas_Object *obj, void *event_info);
@@ -759,6 +760,7 @@ add_tests:
    ADD_TEST(NULL, "Focus", "Focus 2", test_focus2);
    ADD_TEST(NULL, "Focus", "Focus 3", test_focus3);
    ADD_TEST(NULL, "Focus", "Focus 4", test_focus4);
+   ADD_TEST(NULL, "Focus", "Focus Custom", test_focus_custom);
 
    //------------------------------//
    ADD_TEST(NULL, "Naviframe", "Naviframe", test_naviframe);
index 86801ed..7b18a9f 100644 (file)
@@ -343,4 +343,116 @@ test_focus4(void *data EINA_UNUSED, Evas_Object *obj EINA_UNUSED, void *event_in
    elm_box_pack_end(bx, tg);
    evas_object_show(tg);
 }
+
+static void
+glow_effect_on_cb(void *data, Evas_Object *obj, void *event_info EINA_UNUSED)
+{
+   Evas_Object *chk = evas_object_data_get(obj, "glow_is_enable");
+
+   if (elm_check_state_get(chk)) elm_win_focus_highlight_style_set(data, "glow_effect");
+}
+
+static void
+glow_effect_off_cb(void *data, Evas_Object *obj, void *event_info EINA_UNUSED)
+{
+   Evas_Object *chk = evas_object_data_get(obj, "glow_is_enable");
+
+   if (elm_check_state_get(chk)) elm_win_focus_highlight_style_set(data, "glow");
+}
+
+void
+test_focus_custom(void *data EINA_UNUSED, Evas_Object *obj EINA_UNUSED, void *event_info EINA_UNUSED)
+{
+   Evas_Object *win, *fr, *bx, *bx2, *bt, *spinner, *sp, *chk;
+   char win_focus_theme[PATH_MAX];
+
+   memset(win_focus_theme, 0, sizeof(win_focus_theme));
+   sprintf(win_focus_theme, "%s/objects/test_focus_custom.edj", elm_app_data_dir_get());
+
+   elm_theme_overlay_add(NULL, win_focus_theme);
+
+   win = elm_win_util_standard_add("focus_custom", "Focus Custom");
+   elm_win_autodel_set(win, EINA_TRUE);
+   elm_win_focus_highlight_enabled_set(win, EINA_TRUE);
+   elm_win_focus_highlight_animate_set(win, EINA_TRUE);
+   elm_win_focus_highlight_style_set(win, "glow");
+   evas_object_resize(win, 320, 320);
+   evas_object_show(win);
+
+   fr = elm_frame_add(win);
+   evas_object_size_hint_weight_set(fr, EVAS_HINT_EXPAND, EVAS_HINT_EXPAND);
+   elm_win_resize_object_add(win, fr);
+   elm_object_style_set(fr, "pad_large");
+   evas_object_show(fr);
+
+   bx = elm_box_add(fr);
+   elm_object_content_set(fr, bx);
+   evas_object_show(bx);
+
+   chk = elm_check_add(bx);
+   evas_object_size_hint_weight_set(chk, EVAS_HINT_EXPAND, 0.0);
+   evas_object_size_hint_align_set(chk, EVAS_HINT_FILL, EVAS_HINT_FILL);
+   elm_object_text_set(chk, "Enable glow effect on \"Glow\" Button");
+   elm_check_state_set(chk, EINA_TRUE);
+   elm_box_pack_end(bx, chk);
+   evas_object_show(chk);
+
+   spinner = elm_spinner_add(bx);
+   evas_object_size_hint_weight_set(spinner, EVAS_HINT_EXPAND, 0.0);
+   evas_object_size_hint_align_set(spinner, EVAS_HINT_FILL, EVAS_HINT_FILL);
+   elm_box_pack_end(bx, spinner);
+   evas_object_show(spinner);
+
+   bt = elm_button_add(bx);
+   elm_object_text_set(bt, "Glow Button");
+   evas_object_size_hint_weight_set(bt, EVAS_HINT_EXPAND, 0.0);
+   evas_object_size_hint_align_set(bt, EVAS_HINT_FILL, EVAS_HINT_FILL);
+   elm_box_pack_end(bx, bt);
+   evas_object_smart_callback_add(bt, "focused", glow_effect_on_cb, win);
+   evas_object_smart_callback_add(bt, "unfocused", glow_effect_off_cb, win);
+   evas_object_data_set(bt, "glow_is_enable", chk);
+   evas_object_show(bt);
+
+   sp = elm_separator_add(bx);
+   elm_separator_horizontal_set(sp, EINA_TRUE);
+   evas_object_size_hint_weight_set(sp, EVAS_HINT_EXPAND, 0.0);
+   evas_object_size_hint_align_set(sp, EVAS_HINT_FILL, EVAS_HINT_FILL);
+   elm_box_pack_end(bx, sp);
+   evas_object_show(sp);
+
+   bx2 = elm_box_add(bx);
+   elm_box_horizontal_set(bx2, EINA_TRUE);
+   evas_object_size_hint_weight_set(bx2, EVAS_HINT_EXPAND, EVAS_HINT_EXPAND);
+   evas_object_size_hint_align_set(bx2, EVAS_HINT_FILL, EVAS_HINT_FILL);
+   elm_box_pack_end(bx, bx2);
+   evas_object_show(bx2);
+
+   bt = elm_button_add(bx2);
+   elm_object_text_set(bt, "Button 1");
+   evas_object_size_hint_weight_set(bt, EVAS_HINT_EXPAND, EVAS_HINT_EXPAND);
+   evas_object_size_hint_align_set(bt, EVAS_HINT_FILL, EVAS_HINT_FILL);
+   elm_box_pack_end(bx2, bt);
+   evas_object_show(bt);
+
+   bt = elm_button_add(bx2);
+   elm_object_text_set(bt, "Button 2");
+   evas_object_size_hint_weight_set(bt, EVAS_HINT_EXPAND, EVAS_HINT_EXPAND);
+   evas_object_size_hint_align_set(bt, EVAS_HINT_FILL, EVAS_HINT_FILL);
+   elm_box_pack_end(bx2, bt);
+   evas_object_show(bt);
+
+   bt = elm_button_add(bx2);
+   elm_object_text_set(bt, "Button 3");
+   evas_object_size_hint_weight_set(bt, EVAS_HINT_EXPAND, EVAS_HINT_EXPAND);
+   evas_object_size_hint_align_set(bt, EVAS_HINT_FILL, EVAS_HINT_FILL);
+   elm_box_pack_end(bx2, bt);
+   evas_object_show(bt);
+
+   bt = elm_button_add(bx2);
+   elm_object_text_set(bt, "Button 4");
+   evas_object_size_hint_weight_set(bt, EVAS_HINT_EXPAND, EVAS_HINT_EXPAND);
+   evas_object_size_hint_align_set(bt, EVAS_HINT_FILL, EVAS_HINT_FILL);
+   elm_box_pack_end(bx2, bt);
+   evas_object_show(bt);
+}
 #endif