example/edje: updated vg example with interpolation usecase

Reviewers: cedric, jpeg

Reviewed By: jpeg

Subscribers: cedric, jpeg

Differential Revision: https://phab.enlightenment.org/D4191

6 files changed, 57 insertions, 11 deletions

diff --git a/src/examples/edje/Makefile.am b/src/examples/edje/Makefile.am
index a9b06b1d6b..46232f16ec 100644
--- a/src/examples/edje/Makefile.am
+++ b/src/examples/edje/Makefile.am
@@ -118,6 +118,10 @@ venus.svg \
 lineargrad1.svg \
 radialgrad1.svg \
 yadis.svg \
+favorite_on.svg \
+favorite_off.svg \
+batman1.svg \
+batman2.svg \
 en_IN/domain_name.po \
 hi_IN/domain_name.po \
 ta_IN/domain_name.mo \
diff --git a/src/examples/edje/batman1.svg b/src/examples/edje/batman1.svg
new file mode 100644
index 0000000000..7a9d22916e
--- /dev/null
+++ b/src/examples/edje/batman1.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" stroke-linejoin="round" viewBox="50 -100 500 500">
+<path fill="none" stroke="black" stroke-width="10" d="M 212,220 C 197,171 156,153 123,221 109,157 120,109  159,63.6 190,114  234,115  254,89.8 260,82.3 268,69.6 270,60.3 273,66.5 275,71.6 280,75.6 286,79.5 294,79.8 300,79.8 306,79.8 314,79.5 320,75.6 325,71.6 327,66.5 330,60.3 332,69.6 340,82.3 346,89.8 366,115  410,114  441,63.6 480,109  491,157 477,221 444,153 403,171 388,220 366,188 316,200 300,248 284,200 234,188 212,220 Z"/>
+</svg>
diff --git a/src/examples/edje/batman2.svg b/src/examples/edje/batman2.svg
new file mode 100644
index 0000000000..852764bf51
--- /dev/null
+++ b/src/examples/edje/batman2.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" stroke-linejoin="round" viewBox="50 -100 500 500">
+<path fill="none" stroke="black" stroke-width="10"   d="M 213,222 C 219,150 165,139 130,183 125,123 171,73.8 247,51.6 205,78   236,108  280,102  281,90.3 282,79   286,68.2 287,72   288,75.8 289,79.7 293,79.7 296,79.7 300,79.7 304,79.7 307,79.7 311,79.7 312,75.8 313,72   314,68.2 318,79   319,90.3 320,102  364,108  395,78   353,51.6 429,73.8 475,123 470,183 435,139 381,150 387,222 364,176 315,172 300,248 285,172 236,176 213,222 Z">
+</svg>
diff --git a/src/examples/edje/favorite_off.svg b/src/examples/edje/favorite_off.svg
new file mode 100644
index 0000000000..71bbc6461c
--- /dev/null
+++ b/src/examples/edje/favorite_off.svg
@@ -0,0 +1,13 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 16.0.3, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 width="80px" height="80px" viewBox="-14 -14 80 80" enable-background="new -14 -14 80 80" xml:space="preserve">
+<path fill="none" stroke="#FFB400" stroke-width="3" stroke-miterlimit="10" d="M26.003,38.931c0.29,0,0.58,0.084,0.832,0.252
+	l12.212,8.142c0.367,0.245,0.859,0.229,1.199-0.021c0.359-0.262,0.516-0.721,0.394-1.146l-4.104-14.367
+	c-0.158-0.557,0.017-1.156,0.452-1.538l10.174-8.949c0.313-0.284,0.424-0.74,0.267-1.148c-0.159-0.415-0.546-0.681-0.987-0.681
+	H33.433c-0.623,0-1.181-0.385-1.402-0.967L26.966,5.17c-0.153-0.398-0.549-0.67-0.98-0.67C25.55,4.501,25.154,4.773,25,5.177
+	l-5.034,13.328c-0.221,0.583-0.779,0.97-1.404,0.97H5.557c-0.44,0-0.827,0.266-0.985,0.677c-0.158,0.413-0.049,0.869,0.279,1.164
+	l10.158,8.937c0.434,0.383,0.609,0.981,0.451,1.538l-4.104,14.367c-0.123,0.425,0.033,0.883,0.387,1.14
+	c0.357,0.258,0.85,0.271,1.211,0.028l12.217-8.144C25.423,39.015,25.713,38.931,26.003,38.931z"/>
+</svg>
diff --git a/src/examples/edje/favorite_on.svg b/src/examples/edje/favorite_on.svg
new file mode 100644
index 0000000000..c34b3209ad
--- /dev/null
+++ b/src/examples/edje/favorite_on.svg
@@ -0,0 +1,11 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 16.0.3, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 width="80px" height="80px" viewBox="-14 -14 80 80" enable-background="new -14 -14 80 80" xml:space="preserve">
+<path fill="#FFB400" d="M39.633,49c-0.492,0-0.987-0.145-1.417-0.432l-12.212-8.141l-12.215,8.141
+	c-0.892,0.598-2.059,0.57-2.926-0.061c-0.866-0.629-1.245-1.734-0.949-2.766l4.104-14.365L3.846,22.429
+	c-0.788-0.71-1.055-1.828-0.676-2.814c0.378-0.987,1.326-1.641,2.385-1.641h13.007l5.036-13.331c0.377-0.989,1.326-1.64,2.384-1.643
+	h0.003c1.056,0,2.003,0.651,2.384,1.637l5.063,13.337h13.011c1.061,0,2.007,0.652,2.387,1.641c0.38,0.988,0.109,2.104-0.677,2.814
+	L37.98,31.377l4.104,14.365c0.294,1.031-0.085,2.137-0.947,2.766C40.692,48.834,40.162,49,39.633,49z"/>
+</svg>
diff --git a/src/examples/edje/svg.edc b/src/examples/edje/svg.edc
index a9a98e4a7d..208d95bf0c 100644
--- a/src/examples/edje/svg.edc
+++ b/src/examples/edje/svg.edc
@@ -1,4 +1,4 @@
-#define SVG_PART(bg, vg, rel1x, rel1y, rel2x, rel2y,svg_id)\
+#define SVG_PART_INTERPOLATE(bg, vg, rel1x, rel1y, rel2x, rel2y,id1, id2)\
          rect { bg; \
             description { state: "default" 0.0; \
                color: 255 255 255 255; \
@@ -7,38 +7,40 @@
                rel1.offset: 1 1; \
                rel2.offset: -1 -1; \
             } \
-            description { state: "clicked" 0.0; \
-               inherit: "default" 0.0; \
-               rel1.relative: 0.0 0.0; \
-               rel2.relative: 1.0 1.0; \
-            } \
          }\
          vector { vg;\
             description { state: "default" 0.0; \
                color: 255 255 255 255; \
                rel1.to: bg; \
                rel2.to: bg; \
-               image.normal: svg_id; \
+               min: 130 130; \
+               max: 130 130; \
+               image.normal: id1; \
             } \
             description { state: "clicked" 0.0; \
                inherit: "default" 0.0; \
+               image.normal: id2; \
+               min: 150 150; \
+               max: 150 150; \
             } \
          }
+#define SVG_PART(bg, vg, rel1x, rel1y, rel2x, rel2y,id1)\
+         SVG_PART_INTERPOLATE(bg, vg, rel1x, rel1y, rel2x, rel2y,id1, id1)
 
  #define SVG_PROGRAM(bg, vg) \
          program { bg; \
             signal: "mouse,down,1"; \
             source: vg; \
             action: STATE_SET "clicked"; \
-            transition: LINEAR 0.5; \
-            target: bg; \
+            transition: LINEAR .2; \
+            target: vg; \
          }\
          program { vg; \
             signal: "mouse,up,1"; \
             source: vg; \
             action: STATE_SET "default"; \
-            transition: LINEAR 0.5; \
-            target: bg; \
+            transition: LINEAR .2; \
+            target: vg; \
          }
 
 collections {
@@ -66,6 +68,10 @@ collections {
       vector: "lineargrad1.svg";
       vector: "radialgrad1.svg";
       vector: "yadis.svg";
+      vector: "favorite_on.svg";
+      vector: "favorite_off.svg";
+      vector: "batman1.svg";
+      vector: "batman2.svg";
    }
    group {
       name: "svg-test";
@@ -95,6 +101,9 @@ collections {
          SVG_PART("bg20", "vg20", 0.8, 0.6, 1.0, 0.8,"radialgrad1.svg")
 
          SVG_PART("bg21", "vg21", 0.0, 0.8, .2, 1.0,"yadis.svg")
+         SVG_PART("bg22", "vg22", 0.2, 0.8, .4, 1.0,"favorite_on.svg")
+         SVG_PART("bg23", "vg23", 0.4, 0.8, .6, 1.0,"favorite_off.svg")
+         SVG_PART_INTERPOLATE("bg24", "vg24", 0.6, 0.8, .8, 1.0,"batman1.svg", "batman2.svg")
       }
       programs {
          SVG_PROGRAM("bg1", "vg1")
@@ -118,6 +127,9 @@ collections {
          SVG_PROGRAM("bg19", "vg19")
          SVG_PROGRAM("bg20", "vg20")
          SVG_PROGRAM("bg21", "vg21")
+         SVG_PROGRAM("bg22", "vg22")
+         SVG_PROGRAM("bg23", "vg23")
+         SVG_PROGRAM("bg24", "vg24")
       }
    }
 }
\ No newline at end of file