Dragable parts example

This example shows how to manipulate a dragable part through the edje_object_part_drag API.

First, in the edc code, we are declaring a part which will be our movable part, called "knob". It is a normal rectangle, which contains a block called "dragable", that will define the area where this rectangle can be moved, and in which axis it can be moved.

This is our part:

part {
name: "example/knob";
type: RECT;
mouse_events: 1;
dragable {
confine: "drag_area";
x: 0 0 0;
y: 1 1 0;
}
description {
state: "default" 0.0;
min: 10 10;
color: 255 0 0 200;
}
} // example/knob

Notice that it defines, through its "x:" and "y:' properties, that the part will be only moved on the y axis (vertical). Check the edc reference docs for more info about this.

Now, in our example C code, we just do the same as on the other examples, setting some global data on a structure, load the edje file and so:

static const char *PARTNAME = "example/knob";

We want to use the drag_page and drag_step functions, and in order to do so we need to define the step size and page size of our dragable part. They are defined as float values which represent a portion of the entire size of the dragable area:

We are going to use the keyboard to move the knob part, through the key down callback _bg_key_down, but we also want to know when the user has moved the knob by using the mouse (which is possible, since we defined that this part will receive mouse events). Thus, we set a callback for the signal "drag", which comes from the dragable part:

edje_object_signal_callback_add(edje_obj, "drag", PARTNAME, _on_knob_moved, NULL);

Now, let's take a look at our key down callback:

_on_bg_key_down(void *data, Evas *e EINA_UNUSED, Evas_Object *o EINA_UNUSED, void *event_info)
{
Ecore_Evas *ee;
Evas_Object *edje_obj;
ee = (Ecore_Evas *)data;
ev = (Evas_Event_Key_Down *)event_info;
edje_obj = ecore_evas_data_get(ee, "edje_obj");
if (!strcmp(ev->key, "h"))
{
printf(commands);
return;
}
else if (!strcmp(ev->key, "Down"))
{
edje_object_part_drag_step(edje_obj, PARTNAME, 0, 1.0);
}
else if (!strcmp(ev->key, "Up"))
{
edje_object_part_drag_step(edje_obj, PARTNAME, 0, -1.0);
}
else if (!strcmp(ev->key, "m"))
{
edje_object_part_drag_value_set(edje_obj, PARTNAME, 0.0, 0.5);
}
else if (!strcmp(ev->key, "Prior"))
{
edje_object_part_drag_page(edje_obj, PARTNAME, 0.0, -1.0);
}
else if (!strcmp(ev->key, "Next"))
{
edje_object_part_drag_page(edje_obj, PARTNAME, 0.0, 1.0);
}
else if (!strcmp(ev->key, "Escape"))
else
{
printf("unhandled key: %s\n", ev->key);
printf(commands);
}
}

On this callback we define that the user will use the "up" and "down" arrows to move the dragable part, respectively, -1.0 and 1.0 times the step size. And that the "Page Up" (Prior) and "Page Down" (Next) keys will move -1.0 and 1.0 times the page size. Both of these will occur on the vertical axis, since we pass 0.0 as value to the respective horizontal axis parameters. And our dragable part also only supports being moved in the vertical axis (defined in the edc).

We also define that the "m" key will be used to explicitly position the knob part in the middle of the dragable area.

And here is the callback for the "drag" signal that is received from the theme:

_on_knob_moved(void *data EINA_UNUSED, Evas_Object *o, const char *emission EINA_UNUSED, const char *source EINA_UNUSED)
{
double val;
edje_object_part_drag_value_get(o, PARTNAME, NULL, &val);
printf("value changed to: %0.3f\n", val);
}

The example's window should look like this picture:

The full source code follows:

#ifdef HAVE_CONFIG_H
# include "config.h"
#else
# define EINA_UNUSED
#endif
#ifndef PACKAGE_DATA_DIR
#define PACKAGE_DATA_DIR "."
#endif
#include <Ecore.h>
#include <Ecore_Evas.h>
#include <Edje.h>
#define WIDTH 300
#define HEIGHT 300
static const char commands[] = \
"commands are:\n"
"\tDown - set drag step to 1\n"
"\tUp - set drag step to -1\n"
"\tm - set drag value to 0.5\n"
"\tPrior - set drag page to -1\n"
"\tNext - set drag page to -1\n"
"\tEsc - exit\n"
"\th - print help\n";
static const char *PARTNAME = "example/knob";
static void
_on_destroy(Ecore_Evas *ee EINA_UNUSED)
{
}
/* here just to keep our example's window size and background image's
* size in synchrony */
static void
_on_canvas_resize(Ecore_Evas *ee)
{
Evas_Object *edje_obj;
int w;
int h;
bg = ecore_evas_data_get(ee, "background");
edje_obj = ecore_evas_data_get(ee, "edje_obj");
ecore_evas_geometry_get(ee, NULL, NULL, &w, &h);
evas_object_resize(bg, w, h);
evas_object_resize(edje_obj, w, h);
}
static void
_on_bg_key_down(void *data, Evas *e EINA_UNUSED, Evas_Object *o EINA_UNUSED, void *event_info)
{
Ecore_Evas *ee;
Evas_Object *edje_obj;
ee = (Ecore_Evas *)data;
ev = (Evas_Event_Key_Down *)event_info;
edje_obj = ecore_evas_data_get(ee, "edje_obj");
if (!strcmp(ev->key, "h"))
{
printf(commands);
return;
}
else if (!strcmp(ev->key, "Down"))
{
edje_object_part_drag_step(edje_obj, PARTNAME, 0, 1.0);
}
else if (!strcmp(ev->key, "Up"))
{
edje_object_part_drag_step(edje_obj, PARTNAME, 0, -1.0);
}
else if (!strcmp(ev->key, "m"))
{
edje_object_part_drag_value_set(edje_obj, PARTNAME, 0.0, 0.5);
}
else if (!strcmp(ev->key, "Prior"))
{
edje_object_part_drag_page(edje_obj, PARTNAME, 0.0, -1.0);
}
else if (!strcmp(ev->key, "Next"))
{
edje_object_part_drag_page(edje_obj, PARTNAME, 0.0, 1.0);
}
else if (!strcmp(ev->key, "Escape"))
else
{
printf("unhandled key: %s\n", ev->key);
printf(commands);
}
}
static void
_on_knob_moved(void *data EINA_UNUSED, Evas_Object *o, const char *emission EINA_UNUSED, const char *source EINA_UNUSED)
{
double val;
edje_object_part_drag_value_get(o, PARTNAME, NULL, &val);
printf("value changed to: %0.3f\n", val);
}
int
main(int argc EINA_UNUSED, char *argv[] EINA_UNUSED)
{
const char *edje_file = PACKAGE_DATA_DIR"/drag.edj";
Ecore_Evas *ee;
Evas *evas;
Evas_Object *edje_obj;
return EXIT_FAILURE;
if (!edje_init())
goto shutdown_ecore_evas;
/* this will give you a window with an Evas canvas under the first
* engine available */
ee = ecore_evas_new(NULL, 0, 0, WIDTH, HEIGHT, NULL);
if (!ee) goto shutdown_edje;
ecore_evas_callback_resize_set(ee, _on_canvas_resize);
ecore_evas_title_set(ee, "Edje Drag Example");
evas = ecore_evas_get(ee);
evas_object_color_set(bg, 255, 255, 255, 255);
evas_object_resize(bg, WIDTH, HEIGHT);
ecore_evas_data_set(ee, "background", bg);
edje_obj = edje_object_add(evas);
if (!edje_object_file_set(edje_obj, edje_file, "example/group"))
printf("failed to set file %s.\n", edje_file);
evas_object_move(edje_obj, 0, 0);
evas_object_resize(edje_obj, WIDTH, HEIGHT);
evas_object_show(edje_obj);
ecore_evas_data_set(ee, "edje_obj", edje_obj);
edje_object_part_drag_size_set(edje_obj, PARTNAME, 1.0, 0.4);
if (!edje_object_part_drag_step_set(edje_obj, PARTNAME, 0.0, 0.1))
printf("error when setting drag step size.\n");
if (!edje_object_part_drag_page_set(edje_obj, PARTNAME, 0.0, 0.3))
printf("error when setting drag page step size.\n");
edje_object_signal_callback_add(edje_obj, "drag", PARTNAME, _on_knob_moved, NULL);
printf(commands);
return EXIT_SUCCESS;
shutdown_edje:
shutdown_ecore_evas:
return EXIT_FAILURE;
}

To compile use this command:

* gcc -o edje-drag edje-drag.c -DPACKAGE_BIN_DIR=\"/Where/enlightenment/is/installed/bin\" -DPACKAGE_LIB_DIR=\"/Where/enlightenment/is/installed/lib\"
* -DPACKAGE_DATA_DIR=\"/Where/enlightenment/is/installed/share\"
* `pkg-config --cflags --libs evas ecore ecore-evas edje`
*
* edje_cc drag.edc
* 
edje_init
int edje_init(void)
Initializes the Edje library.
Definition: edje_main.c:35
ecore_evas_new
EAPI Ecore_Evas * ecore_evas_new(const char *engine_name, int x, int y, int w, int h, const char *extra_options)
Creates a new Ecore_Evas based on engine name and common parameters.
Definition: ecore_evas.c:1059
ecore_evas_shutdown
EAPI int ecore_evas_shutdown(void)
Shuts down the Ecore_Evas system.
Definition: ecore_evas.c:668
ecore_evas_geometry_get
EAPI void ecore_evas_geometry_get(const Ecore_Evas *ee, int *x, int *y, int *w, int *h)
Gets the geometry of an Ecore_Evas.
Definition: ecore_evas.c:1382
edje_object_part_drag_step_set
Eina_Bool edje_object_part_drag_step_set(Evas_Object *obj, const char *part, double dx, double dy)
Sets the drag step increment.
Definition: edje_legacy.c:242
ecore_evas_callback_resize_set
EAPI void ecore_evas_callback_resize_set(Ecore_Evas *ee, Ecore_Evas_Event_Cb func)
Sets a callback for Ecore_Evas resize events.
Definition: ecore_evas.c:1160
ecore_main_loop_quit
void ecore_main_loop_quit(void)
Quits the main loop once all the events currently on the queue have been processed.
Definition: ecore_main.c:1289
_Evas_Event_Key_Down
Key press event.
Definition: Evas_Legacy.h:313
EINA_UNUSED
#define EINA_UNUSED
Definition: eina_types.h:321
ecore_evas_free
EAPI void ecore_evas_free(Ecore_Evas *ee)
Frees an Ecore_Evas.
Definition: ecore_evas.c:1103
ecore_evas_title_set
EAPI void ecore_evas_title_set(Ecore_Evas *ee, const char *t)
Sets the title of an Ecore_Evas' window.
Definition: ecore_evas.c:1547
ecore_evas_init
EAPI int ecore_evas_init(void)
Inits the Ecore_Evas system.
Definition: ecore_evas.c:604
Evas_Object
Efl_Canvas_Object Evas_Object
Definition: Evas_Common.h:180
Edje.h
Edje Graphical Design Library.
Ecore_Evas.h
Evas wrapper functions.
edje_object_part_drag_page
Eina_Bool edje_object_part_drag_page(Evas_Object *obj, const char *part, double dx, double dy)
Pages x,y steps.
Definition: edje_legacy.c:272
ecore_evas_get
EAPI Evas * ecore_evas_get(const Ecore_Evas *ee)
Gets an Ecore_Evas's Evas.
Definition: ecore_evas.c:1320
ecore_evas_data_get
EAPI void * ecore_evas_data_get(const Ecore_Evas *ee, const char *key)
Retrieves user data associated with an Ecore_Evas.
Definition: ecore_evas.c:1112
evas_object_event_callback_add
void evas_object_event_callback_add(Evas_Object *eo_obj, Evas_Callback_Type type, Evas_Object_Event_Cb func, const void *data)
Add (register) a callback function to a given Evas object event.
Definition: evas_callbacks.c:482
EVAS_CALLBACK_KEY_DOWN
Key Press Event.
Definition: Evas_Common.h:414
_Evas_Event_Key_Down::key
const char * key
The logical key : (eg shift+1 == exclamation)
Definition: Evas_Legacy.h:320
ecore_main_loop_begin
void ecore_main_loop_begin(void)
Runs the application main loop.
Definition: ecore_main.c:1279
evas_object_focus_set
void evas_object_focus_set(Efl_Canvas_Object *obj, Eina_Bool focus)
Indicates that this object is the keyboard event receiver on its canvas.
Definition: efl_canvas_object_eo.legacy.c:39
evas_object_show
void evas_object_show(Evas_Object *eo_obj)
Makes the given Evas object visible.
Definition: evas_object_main.c:1853
Evas
Eo Evas
Definition: Evas_Common.h:158
EINA_TRUE
#define EINA_TRUE
Definition: eina_types.h:508
edje_object_part_drag_size_set
Eina_Bool edje_object_part_drag_size_set(Evas_Object *obj, const char *part, double dw, double dh)
Sets the dragable object size.
Definition: edje_legacy.c:230
evas_object_rectangle_add
Evas_Object * evas_object_rectangle_add(Evas *e)
Adds a rectangle to the given evas.
Definition: evas_object_rectangle.c:78
edje_object_part_drag_value_get
Eina_Bool edje_object_part_drag_value_get(const Evas_Object *obj, const char *part, double *dx, double *dy)
Gets the dragable object location.
Definition: edje_legacy.c:224
edje_object_part_drag_step
Eina_Bool edje_object_part_drag_step(Evas_Object *obj, const char *part, double dx, double dy)
Steps the dragable x,y steps.
Definition: edje_legacy.c:266
ecore_evas_data_set
EAPI void ecore_evas_data_set(Ecore_Evas *ee, const char *key, const void *data)
Stores user data in an Ecore_Evas structure.
Definition: ecore_evas.c:1123
ecore_evas_callback_destroy_set
EAPI void ecore_evas_callback_destroy_set(Ecore_Evas *ee, Ecore_Evas_Event_Cb func)
Sets a callback for Ecore_Evas destroy events.
Definition: ecore_evas.c:1205
edje_object_part_drag_value_set
Eina_Bool edje_object_part_drag_value_set(Evas_Object *obj, const char *part, double dx, double dy)
Sets the dragable object location.
Definition: edje_legacy.c:218
ecore_evas_show
EAPI void ecore_evas_show(Ecore_Evas *ee)
Shows an Ecore_Evas' window.
Definition: ecore_evas.c:1500
evas_object_color_set
void evas_object_color_set(Evas_Object *obj, int r, int g, int b, int a)
Sets the general/main color of the given Evas object to the given one.
Definition: evas_object_main.c:2063
edje_shutdown
int edje_shutdown(void)
Shuts down the Edje library.
Definition: edje_main.c:264
edje_object_part_drag_page_set
Eina_Bool edje_object_part_drag_page_set(Evas_Object *obj, const char *part, double dx, double dy)
Sets the page step increments.
Definition: edje_legacy.c:254