edje/perspective - Add an example using the perspective global setting.

SVN revision: 62150

legacy/edje/doc/examples.dox

@@ -12,6 +12,7 @@
  * @li @ref tutorial_edje_box
  * @li @ref tutorial_edje_box2
  * @li @ref tutorial_edje_drag
+ * @li @ref tutorial_edje_perspective
  * @li @ref tutorial_edje_animations
  */
 
@@ -483,6 +484,93 @@
  * @example edje-drag.c
  */
 
+/**
+ * @page tutorial_edje_perspective Perspective example
+ *
+ * This example demonstrates how someone can set a perspective to be used by an
+ * Edje object, but setting a global perspective. The API for setting a
+ * perspective for just one Edje object is almost the same and it's trivial, so
+ * we are not doing that on this example.
+ *
+ * Let's go first to the main function, where we start creating our objects and
+ * loading the theme. We also set some variables that will be used globally in
+ * our program:
+ *
+ * @dontinclude edje-perspective.c
+ * @skip main(
+ * @until focal =
+ *
+ * A boolean is used to indicate that we are animating.
+ *
+ * We also set the @c app.x and @c app.y to (0, 0) because the original position
+ * of our text + rectangle part will be on top left. This is a convention that
+ * we are using in this example, and setting x, y to 1, 1 would mean bottom
+ * right.  We do this to later define the name of the signals that we are
+ * sending to the theme.
+ *
+ * After this, some boilerplate code to load the theme:
+ *
+ * @until evas_object_show(app.edje)
+ *
+ * Now we are going to setup a callback to tell us that the animation has ended.
+ * We do this just to avoid sending signals to the theme while it's animating.
+ *
+ * @until edje_object_signal
+ *
+ * Finally, let's create our perspective object, define its position, focal
+ * distance and z plane position, and set it as global:
+ *
+ * @until global_set
+ *
+ * Notice that if we wanted to set it just to our edje object, instead of
+ * setting the perspective as global to the entire canvas, we could just use
+ * edje_object_perspective_set() instead of edje_perspective_global_set(). The
+ * rest of the code would be exactly the same.
+ *
+ * Now, let's take a look at what we do in our callbacks.
+ *
+ * The callback for key_down is converting the arrow keys to a signal that
+ * represents where we want our text and rectangle moved to. It does that by
+ * using the following function:
+ *
+ * @dontinclude edje-perspective.c
+ * @skip part_move(
+ * @until }
+ *
+ * Notice that, after sending the signal to the Edje object, we set our boolean
+ * to store that we are animating now. It will only be unset when we receive a
+ * signal from the theme that the animation has ended.
+ *
+ * Now, on the key_down code, we just call this function when the arrows or
+ * "PgUp" or "PgDown" keys are pressed:
+ *
+ * @until unhandled
+ * @until }
+ *
+ * Notice that we also do something else when the numeric keyboard "+" and "-"
+ * keys are pressed. We change the focal distance of our global perspective, and
+ * that will affect the part that has a map rotation applied to it, with
+ * perspective enabled. We also need to call edje_object_calc_force(), otherwise
+ * the Edje object has no way to know that we changed the global perspective.
+ *
+ * Try playing with these keys and see what happens to the animation when the
+ * value of the focal distance changes.
+ *
+ * Finally we add a callback for the animation ended signal:
+ *
+ * @until }
+ *
+ * The example's window should look like this picture:
+ *
+ * @image html edje-perspective-example.png
+ * @image rtf edje-perspective-example.png
+ * @image latex edje-perspective-example.eps width=\textwidth
+ *
+ * The full source code follows:
+ * @include edje-perspective.c
+ * @example edje-perspective.c
+ */
+
 /**
  * @page Example_Edje_Signals_Messages Edje signals and messages
  *

legacy/edje/src/examples/Makefile.am

@@ -11,6 +11,7 @@ EDCS = basic.edc \
 	drag.edc \
 	signals-messages.edc \
 	color-class.edc \
+	perspective.edc \
 	animations.edc
 
 filesdir = $(datadir)/$(PACKAGE)/examples
@@ -42,6 +43,7 @@ pkglib_PROGRAMS += \
 	edje-drag\
 	edje-signals-messages \
 	edje-color-class \
+	edje-perspective \
 	edje-animations
 
 LDADD = $(top_builddir)/src/lib/libedje.la @EDJE_LIBS@
@@ -71,6 +73,7 @@ files_DATA += \
 	$(srcdir)/edje-drag.c \
 	$(srcdir)/edje-signals-messages.c \
 	$(srcdir)/edje-color-class.c \
+	$(srcdir)/edje-perspective.c \
 	$(srcdir)/edje-animations.c
 endif
 
@@ -85,4 +88,5 @@ EXTRA_DIST = $(EDCS) \
 	$(srcdir)/edje-drag.c \
 	$(srcdir)/edje-signals-messages.c \
 	$(srcdir)/edje-color-class.c \
+	$(srcdir)/edje-perspective.c \
 	$(srcdir)/edje-animations.c

legacy/edje/src/examples/edje-perspective.c

@@ -0,0 +1,201 @@
+/**
+ * Simple Edje example illustrating drag functions.
+ *
+ * You'll need at least one Evas engine built for it (excluding the
+ * buffer one). See stdout/stderr for output.
+ *
+ * @verbatim
+ * edje_cc drag.edc && gcc -o drag-box drag-box.c `pkg-config --libs --cflags evas ecore ecore-evas edje`
+ * @endverbatim
+ */
+
+#ifdef HAVE_CONFIG_H
+#include "config.h"
+#else
+#define PACKAGE_EXAMPLES_DIR "."
+#define __UNUSED__
+#endif
+
+#include <Ecore.h>
+#include <Ecore_Evas.h>
+#include <Edje.h>
+
+#define WIDTH  480
+#define HEIGHT 320
+
+static const char *edje_file_path = PACKAGE_EXAMPLES_DIR "/perspective.edj";
+
+struct _App {
+    Ecore_Evas *ee;
+    Evas_Object *edje;
+    Evas_Object *bg;
+    Edje_Perspective *ps;
+    Eina_Bool animating;
+    int x, y; // relative position of part in the screen
+    int focal;
+};
+
+static void
+_on_destroy(Ecore_Evas *ee __UNUSED__)
+{
+   ecore_main_loop_quit();
+}
+
+/* here just to keep our example's window size and background image's
+ * size in synchrony */
+static void
+_canvas_resize_cb(Ecore_Evas *ee)
+{
+   int w, h;
+   struct _App *app = ecore_evas_data_get(ee, "app");
+
+   ecore_evas_geometry_get(ee, NULL, NULL, &w, &h);
+   evas_object_resize(app->bg, w, h);
+   evas_object_resize(app->edje, w, h);
+}
+
+static void
+_part_move(struct _App *app, int dx, int dy)
+{
+   char emission[64];
+
+   if (app->animating)
+     return;
+
+   app->x += dx;
+   app->y += dy;
+   if (app->x > 1)
+     app->x = 1;
+   if (app->x < 0)
+     app->x = 0;
+   if (app->y > 1)
+     app->y = 1;
+   if (app->y < 0)
+     app->y = 0;
+
+   snprintf(emission, sizeof(emission), "move,%d,%d", app->x, app->y);
+   edje_object_signal_emit(app->edje, emission, "");
+   app->animating = EINA_TRUE;
+}
+
+
+static void
+_bg_key_down(void *data, Evas *e, Evas_Object *o __UNUSED__, void *event_info)
+{
+   struct _App *app = data;
+   Evas_Event_Key_Down *ev = event_info;
+
+
+   // just moving the part and text
+   if (!strcmp(ev->keyname, "Down"))
+     {
+	_part_move(app, 0, 1);
+     }
+   else if (!strcmp(ev->keyname, "Up"))
+     {
+	_part_move(app, 0, -1);
+     }
+   else if (!strcmp(ev->keyname, "Left"))
+     {
+	_part_move(app, -1, 0);
+     }
+   else if (!strcmp(ev->keyname, "Right"))
+     {
+	_part_move(app, 1, 0);
+     }
+   else if (!strcmp(ev->keyname, "Prior"))
+     {
+	_part_move(app, -1, -1);
+     }
+   else if (!strcmp(ev->keyname, "Next"))
+     {
+	_part_move(app, 1, 1);
+     }
+   // adjusting the perspective focal point distance
+   else if (!strcmp(ev->keyname, "KP_Add"))
+     {
+	app->focal += 5;
+	edje_perspective_set(app->ps, 240, 160, 0, app->focal);
+	edje_object_calc_force(app->edje);
+     }
+   else if (!strcmp(ev->keyname, "KP_Subtract"))
+     {
+	app->focal -= 5;
+	if (app->focal < 5)
+	  app->focal = 5;
+
+	edje_perspective_set(app->ps, 240, 160, 0, app->focal);
+	edje_object_calc_force(app->edje);
+     }
+   // exiting
+   else if (!strcmp(ev->keyname, "Escape"))
+     ecore_main_loop_quit();
+   else
+     printf("unhandled key: %s\n", ev->keyname);
+}
+
+static void
+_animation_end_cb(void *data, Evas_Object *o __UNUSED__, const char *emission __UNUSED__, const char *source __UNUSED__)
+{
+   struct _App *app = data;
+
+   app->animating = EINA_FALSE;
+}
+
+int
+main(void)
+{
+   Evas *evas;
+   struct _App app;
+   int i;
+
+   ecore_evas_init();
+   edje_init();
+
+   edje_frametime_set(((double)1) / 60);
+
+   /* this will give you a window with an Evas canvas under the first
+    * engine available */
+   app.animating = EINA_FALSE;
+   app.x = 0;
+   app.y = 0;
+   app.focal = 50;
+   app.ee = ecore_evas_new(NULL, 0, 0, WIDTH, HEIGHT, NULL);
+
+   ecore_evas_callback_destroy_set(app.ee, _on_destroy);
+   ecore_evas_callback_resize_set(app.ee, _canvas_resize_cb);
+   ecore_evas_title_set(app.ee, "Edje Box Example");
+   ecore_evas_show(app.ee);
+
+   ecore_evas_data_set(app.ee, "app", &app);
+
+   evas = ecore_evas_get(app.ee);
+
+   app.bg = evas_object_rectangle_add(evas);
+   evas_object_color_set(app.bg, 255, 255, 255, 255);
+   evas_object_resize(app.bg, WIDTH, HEIGHT);
+   evas_object_focus_set(app.bg, EINA_TRUE);
+   evas_object_show(app.bg);
+
+   evas_object_event_callback_add(app.bg, EVAS_CALLBACK_KEY_DOWN, _bg_key_down, &app);
+
+   app.edje = edje_object_add(evas);
+
+   edje_object_file_set(app.edje, edje_file_path, "example/group");
+   evas_object_move(app.edje, 0, 0);
+   evas_object_resize(app.edje, WIDTH, HEIGHT);
+   evas_object_show(app.edje);
+
+   edje_object_signal_callback_add(app.edje, "animation,end", "", _animation_end_cb, &app);
+
+   app.ps = edje_perspective_new(evas);
+   edje_perspective_set(app.ps, 240, 160, 0, app.focal);
+   edje_perspective_global_set(app.ps, EINA_TRUE);
+
+   ecore_main_loop_begin();
+
+   ecore_evas_free(app.ee);
+   ecore_evas_shutdown();
+   edje_shutdown();
+   return 0;
+}

legacy/edje/src/examples/perspective.edc

@@ -0,0 +1,140 @@
+collections {
+   group {
+      name: "example/group";
+
+      min: 480 320;
+
+      parts {
+         part {
+            name: "bg";
+            type: RECT;
+            mouse_events: 1;
+
+            description {
+               state: "default" 0.0;
+            }
+         } // bg
+
+         part {
+            name: "rectangle";
+            type: RECT;
+            mouse_events: 0;
+
+            description {
+               state: "default" 0.0;
+               color: 255 0 0 128;
+
+               rel1 {
+                  offset: -5 -5;
+                  to: "title";
+               }
+               rel2 {
+                  offset: 4 4;
+                  to: "title";
+               }
+
+               map {
+                  on: 1;
+                  perspective_on: 1;
+                  rotation {
+                     x: 45;
+                  }
+               }
+            }
+         } // rectangle
+
+         part {
+            name: "title";
+            type: TEXT;
+            mouse_events: 0;
+
+            description {
+               state: "default" 0.0;
+               color: 200 200 200 255;
+
+               align: 0.0 0.5;
+
+               rel1.relative: 0.1 0.1;
+               rel2.relative: 0.1 0.1;
+
+               text {
+                  text: "Perspective example";
+                  font: "Sans";
+                  size: 16;
+                  min: 1 1;
+               }
+
+               map {
+                  on: 1;
+                  perspective_on: 1;
+                  rotation {
+                     x: 45;
+                  }
+               }
+            }
+
+            description {
+               state: "right" 0.0;
+               inherit: "default" 0.0;
+
+               rel1.relative: 0.5 0.1;
+               rel2.relative: 0.5 0.1;
+            }
+            description {
+               state: "bottom" 0.0;
+               inherit: "default" 0.0;
+
+               rel1.relative: 0.1 0.9;
+               rel2.relative: 0.1 0.9;
+            }
+            description {
+               state: "bottomright" 0.0;
+               inherit: "default" 0.0;
+
+               rel1.relative: 0.5 0.9;
+               rel2.relative: 0.5 0.9;
+            }
+         } // title
+      }
+
+      programs {
+         program {
+            name: "move,right";
+            signal: "move,1,0";
+            action: STATE_SET "right" 0.0;
+            transition: SINUSOIDAL 1.0;
+            target: "title";
+            after: "animation,end";
+         }
+         program {
+            name: "move,bottom";
+            signal: "move,0,1";
+            action: STATE_SET "bottom" 0.0;
+            transition: SINUSOIDAL 1.0;
+            target: "title";
+            after: "animation,end";
+         }
+         program {
+            name: "move,bottomright";
+            signal: "move,1,1";
+            action: STATE_SET "bottomright" 0.0;
+            transition: SINUSOIDAL 1.0;
+            target: "title";
+            after: "animation,end";
+         }
+         program {
+            name: "move,default";
+            signal: "move,0,0";
+            action: STATE_SET "default" 0.0;
+            transition: SINUSOIDAL 1.0;
+            target: "title";
+            after: "animation,end";
+         }
+
+         program {
+            name: "animation,end";
+            action: SIGNAL_EMIT "animation,end" "";
+         }
+      }
+   }
+}