edje/perspective - Add an example using the perspective global setting.
SVN revision: 62150
This commit is contained in:
parent
a5fc3af448
commit
1b367ccb9f
|
@ -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
|
||||
*
|
||||
|
|
File diff suppressed because it is too large
Load Diff
Binary file not shown.
After Width: | Height: | Size: 17 KiB |
|
@ -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
|
||||
|
|
|
@ -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;
|
||||
}
|
|
@ -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" "";
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
Loading…
Reference in New Issue