pigeond.net - development

Ejs is some implementation of some APIs in EFL - the Enlightenment Foundation Libraries (EFL), in JavaScript. EFL is a collection of libraries that make up the foundation of the Enlightenment DR17 window manager.

Currently Ejs includes mainly APIs of Evas and one of Ecore.

Why?

"Because I can..."

"Because sometimes you just do things for fun..."

I've been doing FGMap for the open source flight simulator - FlightGear. While I had "fun" writing some helper functions for myself to easily create things on the screen and map, moving them around, hiding and showing them, etc, the idea striked my mind. Evas provides a set of APIs which you create objects, set some properties, that sorts of things. So I bet if I'm "bored" enough, I could implement the same sort of APIs in JavaScript.

And so, one weekend, I did.

What's the use of this?

No idea, you tell me... :)

What's implemented?

Here's a list of the APIs currently implemented in Ejs:

Ecore

ecore_timer_add
ecore_timer_del

Evas

evas_new
evas_free

evas_output_size_get

evas_object_show
evas_object_hide

evas_object_move
evas_object_resize

evas_object_clip_set
evas_object_clip_get
evas_object_clip_unset
evas_object_clipees_get

evas_object_raise
evas_object_lower

evas_object_stack_above
evas_object_stack_below

evas_object_geometry_get

evas_object_layer_set
evas_object_layer_get

evas_object_color_set
evas_object_color_get

evas_object_evas_get

evas_object_del

evas_object_rectangle_add

evas_object_image_add
evas_object_image_file_set
evas_object_image_size_get

evas_object_text_add
evas_object_text_text_set
evas_object_text_font_set

And so, yes, there is no Evas line, polygon, gradient, and there is no smart objects yet.

Bugs / Known issues

Only the alpha channel works with evas_object_color_set for Evas image object.

Recursive clip is not done properly yet ;)

Clip with colors behaves differently from the real Evas...

Evas image and text object might have issues with IE, because we all know IE sucks, and Microsoft IE programmers just couldn't read specs and code properly. Still, I have tried to work around as much as I can.

Text object have issues with Opera at the moment.

No evas_object_image_fill_set and evas_object_image_border_set yet, and hence at the moment the behavior of an image is different from the real Evas. And so evas_object_resize on an image object is esstentially an evas_object_resize and an evas_object_image_fill_set.

Demo

This is the JavaScript port of evas_test_main.c, with some tests adjusted or removed.

Interactive playground

You can try playing with a few Evas objects here by typing code directly in the text entry below and then press Enter. Available objects are img, text, rect and clip. Note: if the line of code is invalid the browser seems to reload the page.

The above test playground is done with the following code:

var playground = evas_new("playground");

rect = evas_object_rectangle_add(playground);
evas_object_color_set(rect, 255, 0, 0, 128);
evas_object_resize(rect, 100, 100);
evas_object_move(rect, 5, 5);
evas_object_show(rect);

clip = evas_object_rectangle_add(playground);
evas_object_color_set(clip, 0, 0, 255, 128);
evas_object_resize(clip, 100, 100);
evas_object_move(clip, 50, 50);
evas_object_show(clip);

img = evas_object_image_add(playground);
evas_object_image_file_set(img, "data/e.png", NULL);
evas_object_show(img);

text = evas_object_text_add(playground);
evas_object_color_set(text, 0, 255, 0, 255);
evas_object_text_text_set(text, "Evas Text");
evas_object_move(text, 10, 10);
evas_object_show(text);

Source

E.js

evas_test_main.js

Next step

At the moment I'm trying to get the Ejs set as complete as possible. Also to keep its behavior identical to the real deal as much as I can.

At the same time I'm glad there are a few people see there is a potential use for this, either for some quick online demos of Evas and E, or some simple animations for the web.

There're also ideas including being able to read and run Edje online, or hooking multiple Ejs Evas canvas with AJAX.

We shall see...

blog top 24 tags

random photo