/** * @page edje_examples Edje Examples * * Examples: * @li @ref Example_Edje_Basics * @li @ref tutorial_edje_nested * @li @ref tutorial_edje_swallow * @li @ref tutorial_edje_swallow2 * @li @ref tutorial_edje_text * @li @ref tutorial_edje_table * @li @ref tutorial_edje_color_class * @li @ref Example_Edje_Signals_Messages * @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 * @li @ref tutorial_edje_multisense * @li @ref tutorial_edje_basic2 * @li @ref tutorial_edje_signals_2 * @li @ref tutorial_edje_animations_2 */ /** * @page Example_Edje_Basics Edje basics example * * In this example, we illustrate how to start using the Edje library, * with the very basic one needs to instantiate an Edje object. * * We place, in the canvas, an Edje object along with a @b red border * image to delimit its geometry. After we instantiate the Edje * object, we @b have to set a file and a group, within that file, to * bind to it. For this example, we're using an EDC file which * declares two parts (blue and green rectangles) and an item data: * @include basic.edc * * We start by trying to access an @b unexistant group in the file, so * that you can see the usefulness of edje_object_load_error_get() and * edje_load_error_str(). Check that the error message will tell you * just that -- a group which didn't exist in the file was called for: * @dontinclude edje-basic.c * @skip file_path * @until file_path * @dontinclude edje-basic.c * @skip edje_object_add * @until } * * Than, we finally bind our Edje object to @c "example_group", * printing a message afterwards: * @dontinclude edje-basic.c * @skip file_path, "example_group" * @until object_show * * What follows is a series of Edje API calls which are of general * use. The first of them is edje_object_data_get(), which we use to * get the value we have put in the @c "example_data" data field, in * our EDC object declaration: * @dontinclude edje-basic.c * @skip data field in group * @until ; * * Than, we exemplify edje_object_part_exists(): * @dontinclude edje-basic.c * @skip Testing if * @until ; * * The next call is to query @c "part_one"'s geometry, relative to the * whole Edje object's area. The part will be situated in the middle * of the Edje object's, because it has a restricted forced size (we * set its minimum size equal to its maximum, for that) and, by * default, parts are aligned to the center of their containers: * @dontinclude edje-basic.c * @skip part_geometry_get * @until x, y, w, h * * We can grab a direct pointer on the rectangle implementing @c * "part_one", by using edje_object_part_object_get(). Since we are * not allowed to set properties on it, we just check its color, to * assure its really blue, as declared in the EDC: * @dontinclude edje-basic.c * @skip color_get * @until x, y, w, h * * The @c "min" and @c "max" EDC properties can be queried with the * following calls: * @dontinclude edje-basic.c * @skip max_get * @until min. size is * * The next two calls are to make size calculations on our * object. Because of the minimum size declared for @c "part_one" part's * default state description, that will be our exact minimum * size calculated for the group (remember the @c "min" declaration at * group level is just a @b hint, not an enforcement). We then * exercise the edje_object_size_min_restricted_calc() function, * passing a minimum size of 500, in each axis. Since we have @b no * object bigger than that, it will be the minimum size calculated, in * the end: * @dontinclude edje-basic.c * @skip min_calc * @until size calculation is * * @c "part_two" part is there with a purpose: since it extrapolates * the Edje object's boundaries, the edje_object_parts_extends_calc() * function will report origin coordinates for the rectangle grouping * both parts with @b negative values, indicating it extrapolates to * the upper left of our group, just as we see it. * * To interact with the last features exemplified in the program, * there's a command line interface. A help string can be asked for * with the 'h' key: * @dontinclude edje-basic.c * @skip commands * @until ; * * Those commands will change the scaling factors of our Edje objects. * The first of them, @c 's', will change Edje's @b global scaling * factor between @c 1.0 (no scaling) and @c 2.0 (double * scale). Scaling will be applied to @c "part_one", only, because * that's the part flagged to be scaled at EDC level: * @dontinclude edje-basic.c * @skip strcmp(ev->key, "s") == 0 * @until } * * Note, finally, that the @c 's' command will depend on the 'r' one * to have its effects applied. The latter will change @c "part_one"'s * @b individual scaling factor, which @b overrides Edje's global * scaling factor. Only when the individual one is set to zero, will * the global one take effect: * @dontinclude edje-basic.c * @skip strcmp(ev->key, "r") == 0 * @until } * * * * The example's window should look like this picture: * * @image html edje-basics-example.png * @image rtf edje-basics-example.png * @image latex edje-basics-example.eps width=\textwidth * * The full example follows. * @include edje-basic.c * * To compile use this command: * @verbatim * gcc -o edje-basic edje-basic.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 basic.edc * @endverbatim * @example edje-basic.c */ /** * @page tutorial_edje_nested Edje Nested Part (hierarchy) example * * Nested part feature represents the concept of hierarchy to edje. * * A nested part inherits it's location relatively to the parent part. * Thus, parent part modifications such move or map effects all nested parts. * To declare a nested part just start a new part declaration within * (before closing) the current part declaration. * * Note that nested part declaration is allowed only after * current part name is defined. * * Here's an example of a rect nested in other rect plus inner nested rect: * @include edje-nested.edc * * The example's window should look like this picture: * * @image html edje-nested.png * @image rtf edje-nested.png * @image latex edje-nested.eps width=\textwidth */ /** * @page tutorial_edje_swallow Swallow example * @dontinclude edje-swallow.c * * This is a simple example in which we create a rect and swallow it. * * Focusing on the relevant parts of the code we go right to the creation of our * rectangle. It should be noted that we don't resize or show our rect, that is * because when an object is swallowed it's geometry and visibility is * controlled by the theme: * @skip 20 * @skipline evas_object_rectangle_add * @until swallow * * The other bit of code that is relevant to us now is our check that the * swallow worked: * @until printf * * The full source code follows: * @include edje-swallow.c * * To compile use this command: * @verbatim * gcc -o edje-swallow edje-swallow.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 swallow.edc * @endverbatim * @example edje-swallow.c */ /** * @page tutorial_edje_text Edje Text example * * * This example shows how to manipulate TEXT and TEXTBLOCK parts from code. * * The very first we are going to do is register a callback to react to changes * in the text of our parts: * @dontinclude edje-text.c * @skipline edje_object_text_change_cb_set * * * @dontinclude edje-text.c * @skipline text_change * @note Since edje_obj represent a group we'll be notified whenever any part's * text in that group changes. * * We now set the text for two our two parts: * @dontinclude edje-text.c * @skip text_set * @until edje_object_part_text_set(edje_obj, "part_two" * @note Since the "part_two" part is a TEXTBLOCK we can use formatting such as * @ * * And we now move on to selection issues, first thing we do is make sure the * user can select text: * @dontinclude edje-text.c * @skip edje_object_part_text_select_allow_set * @until edje_object_part_text_select_all * * We then select the entire text, and print the selected text: * @dontinclude edje-text.c * @skipline printf("selection: %s\n", * * We now unselect the entire text(set selection to none), and print the * selected text: * @dontinclude edje-text.c * @skip edje_object_part_text_select_none * @until printf * * Our example will look like this: * * @image html edje-text.png * @image rtf edje-text.png * @image latex edje-text.eps width=\textwidth * * The full source code follows: * @include edje-text.c * * * The theme used in this example is: * @include text.edc * * To compile use this command: * @verbatim * gcc -o edje-text edje-text.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 text.edc * @endverbatim * @example edje-text.c */ /** * @page tutorial_edje_table Table example * * In this example, we illustrate how to organize your objects on a table, using * the edje_object_part_table functions. To be easier to understand the objects * in this example will be four simple rects, when the user click over one * item with the left button its is removed from the table, if any other button * was used all items are removed. For each action is printed a message with * the current number of rows and columns. * * We started creating an EDC file with one part of the type TABLE called * @b "table_part", that is the part which we will refer to access the table: * @include table.edc * * On the other hand, in the C file we first create the rectangles and added a * callback for mouse down, as you can see bellow: * @dontinclude edje-table.c * @skip _rects_create * @until } * @skip } * @until } * * With the objects created we have to pack them into the table, to do this, we * just have to use the function edje_object_part_table_pack(). * @dontinclude edje-table.c * @skip (!edje_object_part_table_pack * @until 4 * * The other bit of code that is relevant to us now is our event handler for * when the user click over the rectangle. Here we use the function * edje_object_part_table_unpack() to remove the item from the table or * edje_object_part_table_clear() to remove all items, it depends on which mouse * button the user uses. * @dontinclude edje-table.c * @skip _on_mouse_down * @until } * * Finally, the last important thing in this example is about how to know how many * columns and rows are there in the table, It should be noted that this function * don't tell you how many items are there in the table, just the number of the * columns and rows of the table. * @dontinclude edje-table.c * @skip _columns_rows_ * @until } * * The example's window should look like this picture: * * @image html edje-table-example.png * @image rtf edje-table-example.png * @image latex edje-table-example.eps width=\textwidth * * The full source code follows: * @include edje-table.c * * To compile use this command: * @verbatim * gcc -o edje-table edje-table.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 table.edc * @endverbatim * @example edje-table.c */ /** * @page tutorial_edje_box Box example - basic usage * * This example shows how to append, insert and remove elements from an Edje box * part. It will make use of the edje_object_part_box functions. * * To play with this example, use mouse left click to delete an existing * rectangle from the box and right mouse click to add a new rectangle just * before the clicked one. Use the keyboard keys "a" to append a rectangle, "i" * to prepend, and "c" to remove all rectangles from the box. * * We will store our example global information in the data structure defined * below, and also set some callbacks for resizing the canvas and exiting the * window: * * @dontinclude edje-box.c * @skip static const char * @until ecore_evas_geometry_get * @until } * * In the @c main function, we create our @c Ecore_Evas, add a background to it, * and finally load our @c Edje file that contains a @c Box part. This part is * named @c "example/box" in this case, and we use this name to append elements * to it. * * The code until now is the one that follows: * * @dontinclude edje-box.c * @skip main(int argc __UNUSED__, char *argv[]) * @until ecore_evas_data_set(ee, "background", bg) * * Also notice that we set the callback @c _bg_key_down for @c "key down" events * on the background object, and that object is the one with focus. * * Now we add some small rectangles to the box part, using the * edje_object_part_box_append() API, and set some callbacks for @c "mouse down" * events on every object. These callbacks will be used to add or delete objects * from the box part. * * @dontinclude edje-box.c * @skip bg = evas_object_rectangle_add(evas) * @until evas_object_event * @until } * * Now let's take a look at the callbacks for key down and mouse down events: * * @dontinclude edje-box.c * @skip ecore_evas_geometry_get * @skip static * @until evas_object_event * @until } * @until } * * This callback for mouse down events will get left clicks and remove the * object that received that left click from the box part, and then delete it. * This is done with the edje_object_part_box_remove() function. * * However, on right clicks it will create a new rectangle object, and add it * just before the right clicked object, using * edje_object_part_box_insert_before(). * * And this is the key down callback: * * @until remove_all * @until } * * It will insert elements at the beginning of the box if "i" was pressed, using * edje_object_part_box_insert_at(). It will also append objects to the box if * "a" was pressed, just exactly like we did in the @c main function. And will * remove all objects (deleting them) if "c" was pressed. * * As you can see, this example uses the @c "horizontal_flow" layout for the * box, where each item is put linearly in rows, in as many rows as necessary to * store all of them. * * The example's window should look like this picture: * * @image html edje-box-example.png * @image rtf edje-box-example.png * @image latex edje-box-example.eps width=\textwidth * * The full source code follows: * @include edje-box.c * * To compile use this command: * @verbatim * gcc -o edje-box edje-box.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 box.edc * @endverbatim * @example edje-box.c */ /** * @page tutorial_edje_box2 Box example - custom layout * * This example shows how to register a custom layout to be used by the Edje box * part. It will use edje_box_layout_register() for that. * * To play with this example, use the keyboard modifier keys and number keys * together. The Ctrl key is used for adding elements, and Shift is used for * removing them. For instance, Ctrl + 3 will insert a new rectangle object in * the 3rd position of the box, while Shift + 6 will try to remove the 6th * element of the box. * * This example is very similar to the other box example, has a structure with * global data, a callback for key down events where we create or delete * rectangle objects and add or remove them to/from the box part. * * But the important part is the next one: * * @dontinclude edje-box2.c * @skip static void * @until } * * This code implements our custom layout, which will position every object * added to the box in a diagonal through the size of the box part. Notice that * it just calculates the position and offset based on the size of the box and * number of children, and then moves each child to the respective position. * * Later on the @c main function, everything we need to do is to register this * custom layout function with edje: * * @dontinclude edje-box2.c * @skipline edje_box_layout_register * * And use it inside the box.edc file: * * @dontinclude box.edc * @skip example/group2 * @skip example/title * @skip part * @until BOX * @until example/box * * The example's window should look like this picture: * * @image html edje-box2-example.png * @image rtf edje-box2-example.png * @image latex edje-box2-example.eps width=\textwidth * * The full source code follows: * @include edje-box2.c * * To compile use this command: * @verbatim * gcc -o edje-box2 edje-box2.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 box.edc * @endverbatim * @example edje-box2.c */ /** * @page tutorial_edje_drag 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: * * @dontinclude drag.edc * @skip // drag_area * @skip part * @until example/knob * @until example/knob * * Notice that it defines, through its @c "x:" and @c "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: * * @dontinclude edje-drag.c * @skip static const char *PARTNAME * @until ; * * @skip main(int argc __UNUSED__, char *argv[]) * @until evas_object_show * * 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: * * @until drag page step * * We are going to use the keyboard to move the @c knob part, through the key * down callback @c _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: * * @dontinclude edje-drag.c * @skipline evas_object_event_callback_add * * @skipline edje_object_signal_callback_add * * Now, let's take a look at our key down callback: * * @dontinclude edje-drag.c * @skip _on_bg_key_down * @until } * @skip else * @until } * @skip else * @until } * @skip else * @until } * @skip else * @until } * @skip else * @until } * @skip else * @until } * @skip else * @until } * * 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 @c "drag" signal that is received from the * theme: * * @dontinclude edje-drag.c * @skip _on_knob_moved * @until } * * The example's window should look like this picture: * * @image html edje-drag-example.png * @image rtf edje-drag-example.png * @image latex edje-drag-example.eps width=\textwidth * * The full source code follows: * @include edje-drag.c * * To compile use this command: * @verbatim * 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 * @endverbatim * @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.bg) * * 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: * * @skip _animation_end_cb * @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 * * The full .edc file * @include perspective.edc * * To compile use this command: * @verbatim * gcc -o edje-perspective edje-perspective.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 perspective.edc * @endverbatim * @example edje-perspective.c */ /** * @page Example_Edje_Signals_Messages Edje signals and messages * * In this example, we illustrate how Edje signals and Edje messages * work. * * We place, in the canvas, an Edje object along with a @b red border * image to delimit its geometry. The object's group definition is so * that we have four parts: * - a blue rectangle, aligned to the right * - a white rectangle, aligned to the left * - a text part, aligned to the center * - a clipper rectangle on the blue rectangle * * The left rectangle is bound to a color class, so that we can * multiply its colors by chosen values on the go: * @dontinclude signals-messages.edc * @until visible * @until } * @until } * @until } * * The @c \#define's on the beginning will serve as message * identifiers, for our accorded message interface between the code * and the this theme file. * * Let's move to the code, then. After instantiating the Edje object, * we register two signal callbacks on it. The first one uses * @b globbing, making all of the wheel mouse actions over the left * rectangle to trigger @c _mouse_wheel. Note that those kind of * signals are generated @b internally (and automatically) in Edje. The * second is a direct signal match, to a (custom) signal we defined in * the EDC, ourselves: * @dontinclude edje-signals-messages.c * @skip edje_object_add * @until _mouse_over * @dontinclude edje-signals-messages.c * @skip print signals coming from theme * @until } * @until } * * That second callback is on a signal we emit on the theme, where we * just translate Edje @c "mouse,move" internal events to the custom @c * "mouse,over" one. When that signals reaches the code, we are, * besides printing the signals' strings, sending a @b message back to * the theme. We generate random values of color components and send * them as an #EDJE_MESSAGE_INT_SET message type: * @dontinclude signals-messages.edc * @skip custom signal * @until } * @dontinclude edje-signals-messages.c * @skip mouse over signals * @until } * * In our theme we'll be changing the @c "cc" color class' values with * those integer values of the message, so that moving the mouse over * the right rectangle will change the left one's colors: * @dontinclude signals-messages.edc * @skip public message * @until } * @until } * * Now we're also sending messages from the Edje object, * besides signals. We do so when one clicks with the left button * over the left rectangle. With that, we change the text part's * text, cycling between 3 pre-set strings declared in the EDC. With * each new text string attribution, we send a string message to our * code, with the current string as argument: * @dontinclude signals-messages.edc * @skip program * @until } * @until } * @skip change text * @until } * @until } * @dontinclude signals-messages.edc * @skip set_text_string * @until } * * To get the message in code, we have to register a message handler, as * follows: * @dontinclude edje-signals-messages.c * @skip message_handler_set * @until message_handler_set * @dontinclude edje-signals-messages.c * @skip print out * @until } * * To interact with the last missing feature -- emitting signals * from code -- there's a command line interface to exercise * it. A help string can be asked for with the 'h' key: * @dontinclude edje-signals-messages.c * @skip commands * @until ; * * The @c 't' command will send either @c "part_right,show" or @c * "part_right,hide" signals to the Edje object (those being the * emission part of the signal), which was set to react on them as the * names indicate. We'll set the right rectangle's visibility on/off, * respectively, for those two signals: * @dontinclude signals-messages.edc * @skip hide right rectangle * @until } * @until } * @dontinclude edje-signals-messages.c * @skip key, "t" * @until } * * The example's window should look like this picture: * * @image html edje-signals-messages-example.png * @image rtf edje-signals-messages-example.png * @image latex edje-signals-messages-example.eps width=\textwidth * * The full example follows, along with its EDC file. * * @include signals-messages.edc * @include edje-signals-messages.c * * To compile use this command: * @verbatim * gcc -o edje-signals-messages edje-signals-messages.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 signals-messages.edc * @endverbatim * @example edje-signals-messages.c */ /** * @page tutorial_edje_color_class Edje Color Class example * @dontinclude edje-color-class.c * * This example shows how to manipulate and change Color classes. In this example * we will create two surfaces to show what happens when you change the color * class at the process and object level. * * It's a very simple example, there are two surfaces created from the same EDC, * but just in one of them we will set a specific color class, although both will be * affected by color class set at the process level as you will see. * * It's important you know that all colors has the format R G B A. Just to be easier * to understand this example, we will create a small set of colors that will be used * along of the example. This piece of code is shown below: * @skip static color colors_init_data * @until return EINA_FALSE * @until } * * Focusing on the relevant parts of the code we go right to the part where we set * the new color class. For that we will use the functions edje_color_class_set ( * which will affect all edjes) and edje_object_color_class_set (which affects just * the specific object). * @skip edje_color_class_set * @until Text shadow * @until Text shadow * @note * - argv[1] is the name of a color class used in the EDC. * - The second and third colors only apply to text part. * - The color class set for the object overrides the color previously set. * * After we have set the color class we will check the color classes, for that * we created a function which prints all color classes and tries to get theirs * values and print too. * @dontinclude edje-color-class.c * @skip _color_classes_print(void) * @until free * @until } * @until } * * There are two other things that are worth mentioning, we added two callbacks for the * objects, one for mouse down (that we use to delete the color class) and another * for the signal emitted when a color class is deleted. * @skip evas_object_event * @until NULL * @skip edje_object_si * @until process * * And then we delete the color class: * @dontinclude edje-color-class.c * @skip _on_mouse_down * @until } * * Our example will look like this, if you run with the parameters "green_class gray pink yellow": * * @image html edje-color-class-example.png * @image rtf edje-color-class-example.png * @image latex edje-color-class-example.eps width=\textwidth * @n * @image html edje-color-class-example2.png * @image rtf edje-color-class-example2.png * @image latex edje-color-class-example2.eps width=\textwidth * * The full source code follows: * @include edje-color-class.c * * * The theme used in this example is: * @include color-class.edc * * * To compile use this command: * @verbatim * gcc -o edje-color-class edje-color-class.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 color-class.edc * @endverbatim * @example edje-color-class.c */ /** * @page tutorial_edje_animations Edje Animations example * * In this example we will figure out how to manipulate the animations on * an Edje object. After reading this document you will be able to manipulate * the frametime, freeze, pause and stop, all animations on an Edje object. * * To play with this example you will use the keyboard. Below are listed the * keys and what each does. * * - '+' Increase the frametime; * - '-' Decrease the frametime; * - '=' Prints the actual frametime and says if the animations is playing; * - 'f' Freezes the animations in the Edje object; * - 'F' Freezes the animations in all objects in the running program; * - 't' Thaws the animations in the Edje object; * - 'T' Thaws the animations in all objects in the running program; * - 's' Pauses the animations; * - 'p' Plays the animations previously stopped; * - 'a' Starts the animation in the Edje object; * - 'A' Stops the animations in the Edje object; * * Now that we've explained how to use our example, we will see how it is made. * Let's start by looking at the piece of code responsible to the actions commented * above. * @dontinclude edje-animations.c * @skip _on_key_down * @until Stopping * @until } * @until } * @note The actions for the keys 'f' and 'F' will have the same effect in * our example, just because there is only one object in the running * program, The same happens with the keys 't' and 'T'. * * As you may have seen these set of functions are pretty easy to handle. The other * important part of this example is the EDC file. The animations used in the * code were created there * @dontinclude animations.edc * @skip program * @until after: "animation,state1" * @until } * @skip program * @until } * @skip program * @until } * @until } * * The example's window should look like this picture: * * @image html edje-animations.png * @image rtf edje-animations.png * @image latex edje-animations.eps width=\textwidth * @n * @image html edje-animations2.png * @image rtf edje-animations2.png * @image latex edje-animations2.eps width=\textwidth * * The full example follows. * * @include edje-animations.c * @include animations.edc * * To compile use this command: * @verbatim * gcc -o edje-animations edje-animations.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 animations.edc * @endverbatim */ /** * @page tutorial_edje_multisense Multisense example * @dontinclude edje-multisense.c * * This is a simple example in which a rect is created and sound and tone * are played on mouse down event. * * Focusing on the creation of sample and tone. It should be noted that * creation of sample sound is from any supported (sndfile lib) audio file, * tone from of specific audible frequency range are controlled by the theme: * * The full source code follows: * @include edje-multisense.c * @include multisense.edc */ /** * @page tutorial_edje_basic2 Edje basics example 2 * * In this example we will show how to load an image and move it across the window. * * To load the image to our program, it needs to be declared in the .edc using the images block: * @dontinclude basic2.edc * @skip images * @until } * * @note COMP means that we are using a lossless compression * * Then to be able to use it in our window we must declare a part for this image: * * @skip part{ * @until } * @until } * @until } * * Now we move to our .c file, you will notice this define: * @dontinclude edje-basic2.c * @skipline #define WALK * * This means how fast we want to move the image across the screen * * To load our edje file we will use this command, we do just like the last example (Basic example): * * @skip if(!edje_object * @until evas_object_show * * If we want to move our image, we need to add a callback to be able to do this, so we define: * * @skipline evas_object_event_callback * * To get the position of the image we use this: * @dontinclude edje-basic2.c * @skipline evas_object_geometry * * Now we use the if's to check in what direction the user wants to move the image then we move it: * * @skip if(strcmp * @until evas_object_move * * The example's window should look like this picture: * * @image html basic2final.png * @image rtf basic2final.png * @image latex basic2final.eps width=\textwidth * * The complete .edc file: * @include basic2.edc * * And the source code: * @include edje-basic2.c * * To compile use this command: * @verbatim * gcc -o edje-basic2 edje-basic2.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 -id /path/to/the/image basic2.edc * @endverbatim * */ /** * @page tutorial_edje_swallow2 Swallow example 2 * * This example will show you how to load an image using evas and fill a swallow with it. * It's basically almost like the last example, but with a minor change. * * This variables are used to store the name of the image that is going to be used, * the path to it and a variable that will store the error cause if something goes wrong. * * Here it is: * @dontinclude edje-swallow2.c * @skipline const char *edje_file * @skipline const char *img * @skipline Evas_Load * * * Then we load the image with this command: * * @skip img = * @until evas_object_image_file_set(img, * * To check if we had some problem we use: * * @skip err = evas * @until } * * Now we are going to swallow it and check if worked. If you notice we are * using "part_one" as argument. We do this because we must explicit what part of our * .edc file we want to swallow: * * @skip edje_object_part * @until printf * * The example's window should look like this picture: * * @image html swallow2final.png * @image rtf swallow2final.png * @image latex swallow2final.eps width=\textwidth * * The complete .edc file: * @include swallow.edc * * And the source code: * @include edje-swallow2.c * * To compile use this command: * @verbatim * gcc -o edje-swallow2 edje-swallow2.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 swallow.edc * @endverbatim */ /** * @page tutorial_edje_signals_2 Edje Signals example 2 * * In this example we will make use of signals to help to move an image away from the mouse pointer. * * Signals are software interruption, this means that when it happens and if the program is sensitive to it * the program will stop whatever it is doing and handle the signal. * * In this example we are only sensitive to the "mouse,move" signal so we need to register a callback to it. * To do this we will add a signal callback to our edje object that will detect "mouse,move" signal * coming from the part "part_image" and when this happens we will call the function _on_mouse_over passing * the evas pointer as a parameter. The evas pointer is passed as a parameter because we need to know * where is the mouse pointer in the screen. * * We can see bellow how we can listen to the signal: * * @dontinclude signals2.c * @skip edje_object_signal * @until ); * * * Now, let's pass to the callback function. If we want to keep the ball away from the mouse pointer * we need to now where is the ball and where is the mouse and we can easily discovery these things using * this: * * For the object position in the canvas: * @dontinclude signals2.c * @skipline evas_object_geometry * * For the mouse position relative to the screen: * @skipline evas_pointer_output * * Now that we have the position of the mouse and the object we just need * to set the new location and move the object. To set the new location we do this: * @skip if * @until y -= ( * * You can change the formula above if you like. Because we are changing the object's position * we need to do something if the new position is beyond the canvas size. So here it is: * * @skip if * @until y = 0 * * Then now what we need to do is move the object: * @skipline evas_object * * Here is the complete callback function: * * @dontinclude signals2.c * @skip _on_mouse_over * @until } * * * When you compile and run it you should see this: * @image html signal2final.png * @image rtf signal2final.png * @image latex signal2final.eps width=\textwidth * * The .edc file: * @include signalsBubble.edc * * The source code: * @include signals2.c * * To compile use this command: * @verbatim * gcc -o signals2 signals2.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 -id /path/to/the/image signalsBubble.edc * @endverbatim */ /** * @page tutorial_edje_animations_2 Edje animations example 2 * * In this example we will make an animation of a bouncing ball. * * Our focus now will be in the .edc file, because in the C source code we just load the edje object and do * nothing else. * * We want to give the freedom to the object to use the whole canvas of our program, so lets define * the min, max of our group: * * @dontinclude animations2.edc * @skipline max * @skipline min * * You will notice that in our .c file the canvas will have this size * * Now we will define our part that's going to be our image, the ball: * @skip part{ * @until type: * * * At the description block bellow we are saying that this part has an image, defining * the max and min size and it's position on the edje_object. The default state is the first * state of the part, this means that when the edje object is loaded this one is going to be showed to you. * * Here it is: * @dontinclude animations2.edc * @skip description * @until } * @until } * * Now in the next description block we are saying where the ball is going to stop. * Note that we have the "inherit" property. This means we are inheriting everything from default, * except rel1 and rel2, because we are redefining it. * * Check the code: * * @skip description * @until } * * We defined how our object will look like and it's position during the animation, * now we need to define how it's going to act during the time. To do this we will * use the programs block * * The first program block will start the animation, it will wait for the 'load' signal. This signal * is generated when the edje object is loaded. The 'after' property is saying to this program block exactly this: * "When you finish, call the program 'animation,state1' ". The 'in' property is saying, wait 0.5 seconds until you execute this program block. * * Here is the code: * * @skip program { * @until } * * Now lets make the ball move and bounce it. In the second program block we are defining what we need to do * with the action property. So we are saying change to the state "down-state" using the transition BOUNCE * and apply this to the part "part_bubble". You can notice that BOUNCE has three parameters, the first one * is saying how much time the transition will last, the second one is the factor of curviness * and the last one is saying how many times and object will bounce. * * The code is very easy: * * @skip program { * @until } * * Now all you have to do is compile the code and run it! * * When you compile and run it you should see this: * @image html signal2final.png * @image rtf signal2final.png * @image latex signal2final.eps width=\textwidth * * The .edc file: * @include animations2.edc * * The source code: * @include animations2.c * * To compile use this command: * @verbatim * gcc -o animations2 animations2.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 animations2.edc * @endverbatim */