more content....

SVN revision: 4659
This commit is contained in:
Carsten Haitzler 2001-04-18 23:20:16 +00:00
parent 70346d3c91
commit f3b80af3e4
9 changed files with 619 additions and 25 deletions

View File

@ -11,10 +11,13 @@ export col_news_title_text="#8899aa"
export col_news_body="#ffffff"
export col_news_body_text="#000000"
export col_tile_border="#000000"
export col_text_fixed="#445566"
export page_width="480"
export title="<font face=arial,helvetica,lucida size=4><b>"
export _title="</b></font>"
export para="<font face=arial,helvetica,lucida size=2><p>"
export pre="<font face=courier,clean,fixed color=$col_text_fixed size=3><pre>"
export _pre="</pre></font>"
export cent="<center>"
export _cent="</center>"
export news_title="<table border=0 cellpadding=4 cellspacing=4><tr><td background=img/col_news_title.png align=left><font face=arial,helvetica,lucida size=2 color=$col_news_title_text><b>" export news_body="</b></font></p></td></tr><tr><td background=img/col_news_text.png><font face=arial,helvetica,lucida size=2 color=$col_news_body_text><p>"

View File

@ -7,14 +7,17 @@ export col_border="#000000"
export col_pane="#667788"
export col_content="#eeeeee"
export col_news_title="#bbccdd"
export col_news_title_text="#667788"
export col_news_title_text="#8899aa"
export col_news_body="#ffffff"
export col_news_body_text="#000000"
export col_tile_border="#000000"
export col_text_fixed="#445566"
export page_width="480"
export title="<font face=arial,helvetica,lucida size=4><b>"
export _title="</b></font>"
export para="<font face=arial,helvetica,lucida size=2><p>"
export pre="<font face=courier,clean,fixed color=$col_text_fixed size=2><pre>"
export _pre="</pre></font>"
export cent="<center>"
export _cent="</center>"
export news_title="<table border=0 cellpadding=4 cellspacing=4><tr><td background=img/col_news_title.png align=left><font face=arial,helvetica,lucida size=2 color=$col_news_title_text><b>" export news_body="</b></font></p></td></tr><tr><td background=img/col_news_text.png><font face=arial,helvetica,lucida size=2 color=$col_news_body_text><p>"

View File

@ -91,11 +91,11 @@ what size the object is to be and how to fill the image object with the
image data, and Evas handles the rest. This makes dealing with images in
Evas childs play. Here is a quick example of how it would work:
@:para@
<pre>
@:pre@
object = evas_add_image_from_file(evas, "flower.png");
evas_move(evas, object, 10.0, 30.0);
evas_show(evas, object);
</pre>
@:_pre@
@:para@
And it would look something like this:
@:para@
@ -105,10 +105,10 @@ By default image bojects are the size of the original image (in pixels). If
we wish to make the object larger and have the image scale up or down in
size we could do:
@:para@
<pre>
@:pre@
evas_resize(evas, object, 320.0, 240.0);
evas_set_image_fill(evas, object, 0.0, 0.0, 320.0, 240.0);
</pre>
@:_pre@
@:para@
Now our canvas would look like this:
@:para@
@ -119,10 +119,10 @@ with this image we loaded, but we want it to tile (repeat) starting the tile
at coordinate 0,0 relative to the to-left corner of the image object area,
but have the tiled image size be 20x50.
@:para@
<pre>
@:pre@
evas_resize(evas, object, 300.0, 200.0);
evas_set_image_fill(evas, object, 0.0, 0.0, 20.0, 50.0);
</pre>
@:_pre@
@:para@
Our result would be something like this:
@:para@
@ -167,12 +167,12 @@ reference in evas as "myfont", Evas will look in the directories (in the
order given) for a "myfont.ttf" file. It is case sensitive, but this system
proves to be nice and simple. Here is a simple example.
@:para@
<pre>
@:pre@
object = evas_add_text(evas, "notepad", 18, "Here is a line of text!");
evas_move(evas, object, 120.0, 50.0);
evas_set_color(evas, object, 0, 0, 0, 255);
evas_show(evas, object);
</pre>
@:_pre@
@:para@
This should create a text object with its top-left starting at 120.0, 50.0
in the Evas, with the notepad font at size 18, with the text "Here is a line
@ -184,11 +184,11 @@ This is what it would look like:
As you can see - it is really easy to create some text in an Evas canvas,
and it is just as easy to change its contents with calls such as the following
@:para@
<pre>
@:pre@
evas_set_text(evas, object, "Some new text here");
evas_set_font(evas, object, "arial", 30);
evas_set_color(evas, object, 255, 0, 0, 255);
</pre>
@:_pre@
@:para@
Just modifying the properties of an object this way directly leads to it
changing as you would expect. There are enough text query calls too to
@ -215,7 +215,7 @@ lighting and shadow effects and many other things.
Creating and managing these objects, like almost everything else, is also
childs play. take a look at this:
@:para@
<pre>
@:pre@
object = evas_add_gradient_box(evas);
evas_move(evas, object, 150.0, 100.0);
evas_resize(evas, object, 200.0, 120.0);
@ -229,7 +229,7 @@ evas_set_gradient(evas, object, gradient);
evas_gradient_free(gradient);
evas_set_angle(evas, object, 290.0);
evas_show(evas, object);
</pre>
@:_pre@
@:para@
The program we are developing looks now something like this:
@:para@
@ -269,6 +269,53 @@ use these to fill in backgrounds, simulate circles (with polygons) and much
more. They are versatile and simple and let you do basic drawing withotu
requiring on-disk data to generate it from.
@:para@
@:pre@
object = evas_add_rectangle(evas);
evas_move(evas, object, 20.0, 130.0);
evas_resize(evas, object, 50.0, 70.0);
evas_set_color(evas, object, 20.0, 50.0, 100.0, 130.0);
evas_show(evas, object);
@:_pre@
@:para@
Here we add a simple rectangle thats blue-ish and partially transparent.
It's easy to add - no problems. It may seem a fair bit of setup code, but
now we can just move, resize, show hide etc. the object whenever we want a
change - evas does all the rest for us - including layering, obscuring,
figuring how to re-render it and optimizing the rendering to only render
what changed and much much much more.
@:para@
@:pre@
object = evas_add_poly(evas);
evas_add_point(evas, object, 0.0, 0.0);
evas_add_point(evas, object, 150.0, 80.0);
evas_add_point(evas, object, 210.0, 150.0);
evas_add_point(evas, object, 80.0, 110.0);
evas_add_point(evas, object, 20.0, 30.0);
evas_set_color(evas, object, 200.0, 40.0, 0.0, 130.0);
evas_move(evas, object, 20.0, 220.0);
evas_show(evas, object);
@:_pre@
@:para@
A polygon, reddish/orange, parially transparent with 5 points. We create the
polygon relative to the top left of its bounding box then just move it where
we want it later - this makes it easy to just move polygons around withotu
having to reset their coordinates. Just like with polygons - Evas handles
optimizing all the other stuff surrounding these objects for us.
@:para@
@:pre@
object = evas_add_line(evas);
evas_set_line_xy(evas, object, 220.0, 240.0, 390.0, 380.0);
evas_set_color(evas, object, 30.0, 80.0, 80.0, 200.0);
evas_show(evas, object);
@:_pre@
@:para@
And a line. Anti-aliased. Simple. Just Chnage its color and coordinates when
you want. Evas does the rest.
@:para@
And now with these primitives added out Evas canvas will look like this:
@:para@
<a href=evas_primitives_eg_0.html><img src=img/evas_primitives_eg_0_thumb.png width=80 height=80 border=1></a>
@:para@
@tile_area_end@
@end@

View File

@ -0,0 +1,6 @@
@top@
@start@
@:para@
<a href=evas.html><img src=img/evas_primitives_eg_0.png width=400 height=400 border=1></a>
@end@
@bottom@

View File

@ -196,11 +196,11 @@ what size the object is to be and how to fill the image object with the
image data, and Evas handles the rest. This makes dealing with images in
Evas childs play. Here is a quick example of how it would work:
<font face=arial,helvetica,lucida size=2><p>
<pre>
<font face=courier,clean,fixed color=#445566 size=3><pre>
object = evas_add_image_from_file(evas, "flower.png");
evas_move(evas, object, 10.0, 30.0);
evas_show(evas, object);
</pre>
</pre></font>
<font face=arial,helvetica,lucida size=2><p>
And it would look something like this:
<font face=arial,helvetica,lucida size=2><p>
@ -210,10 +210,10 @@ By default image bojects are the size of the original image (in pixels). If
we wish to make the object larger and have the image scale up or down in
size we could do:
<font face=arial,helvetica,lucida size=2><p>
<pre>
<font face=courier,clean,fixed color=#445566 size=3><pre>
evas_resize(evas, object, 320.0, 240.0);
evas_set_image_fill(evas, object, 0.0, 0.0, 320.0, 240.0);
</pre>
</pre></font>
<font face=arial,helvetica,lucida size=2><p>
Now our canvas would look like this:
<font face=arial,helvetica,lucida size=2><p>
@ -224,10 +224,10 @@ with this image we loaded, but we want it to tile (repeat) starting the tile
at coordinate 0,0 relative to the to-left corner of the image object area,
but have the tiled image size be 20x50.
<font face=arial,helvetica,lucida size=2><p>
<pre>
<font face=courier,clean,fixed color=#445566 size=3><pre>
evas_resize(evas, object, 300.0, 200.0);
evas_set_image_fill(evas, object, 0.0, 0.0, 20.0, 50.0);
</pre>
</pre></font>
<font face=arial,helvetica,lucida size=2><p>
Our result would be something like this:
<font face=arial,helvetica,lucida size=2><p>
@ -298,12 +298,12 @@ reference in evas as "myfont", Evas will look in the directories (in the
order given) for a "myfont.ttf" file. It is case sensitive, but this system
proves to be nice and simple. Here is a simple example.
<font face=arial,helvetica,lucida size=2><p>
<pre>
<font face=courier,clean,fixed color=#445566 size=3><pre>
object = evas_add_text(evas, "notepad", 18, "Here is a line of text!");
evas_move(evas, object, 120.0, 50.0);
evas_set_color(evas, object, 0, 0, 0, 255);
evas_show(evas, object);
</pre>
</pre></font>
<font face=arial,helvetica,lucida size=2><p>
This should create a text object with its top-left starting at 120.0, 50.0
in the Evas, with the notepad font at size 18, with the text "Here is a line
@ -315,11 +315,11 @@ This is what it would look like:
As you can see - it is really easy to create some text in an Evas canvas,
and it is just as easy to change its contents with calls such as the following
<font face=arial,helvetica,lucida size=2><p>
<pre>
<font face=courier,clean,fixed color=#445566 size=3><pre>
evas_set_text(evas, object, "Some new text here");
evas_set_font(evas, object, "arial", 30);
evas_set_color(evas, object, 255, 0, 0, 255);
</pre>
</pre></font>
<font face=arial,helvetica,lucida size=2><p>
Just modifying the properties of an object this way directly leads to it
changing as you would expect. There are enough text query calls too to
@ -372,7 +372,7 @@ lighting and shadow effects and many other things.
Creating and managing these objects, like almost everything else, is also
childs play. take a look at this:
<font face=arial,helvetica,lucida size=2><p>
<pre>
<font face=courier,clean,fixed color=#445566 size=3><pre>
object = evas_add_gradient_box(evas);
evas_move(evas, object, 150.0, 100.0);
evas_resize(evas, object, 200.0, 120.0);
@ -386,7 +386,7 @@ evas_set_gradient(evas, object, gradient);
evas_gradient_free(gradient);
evas_set_angle(evas, object, 290.0);
evas_show(evas, object);
</pre>
</pre></font>
<font face=arial,helvetica,lucida size=2><p>
The program we are developing looks now something like this:
<font face=arial,helvetica,lucida size=2><p>
@ -452,6 +452,53 @@ use these to fill in backgrounds, simulate circles (with polygons) and much
more. They are versatile and simple and let you do basic drawing withotu
requiring on-disk data to generate it from.
<font face=arial,helvetica,lucida size=2><p>
<font face=courier,clean,fixed color=#445566 size=3><pre>
object = evas_add_rectangle(evas);
evas_move(evas, object, 20.0, 130.0);
evas_resize(evas, object, 50.0, 70.0);
evas_set_color(evas, object, 20.0, 50.0, 100.0, 130.0);
evas_show(evas, object);
</pre></font>
<font face=arial,helvetica,lucida size=2><p>
Here we add a simple rectangle thats blue-ish and partially transparent.
It's easy to add - no problems. It may seem a fair bit of setup code, but
now we can just move, resize, show hide etc. the object whenever we want a
change - evas does all the rest for us - including layering, obscuring,
figuring how to re-render it and optimizing the rendering to only render
what changed and much much much more.
<font face=arial,helvetica,lucida size=2><p>
<font face=courier,clean,fixed color=#445566 size=3><pre>
object = evas_add_poly(evas);
evas_add_point(evas, object, 0.0, 0.0);
evas_add_point(evas, object, 150.0, 80.0);
evas_add_point(evas, object, 210.0, 150.0);
evas_add_point(evas, object, 80.0, 110.0);
evas_add_point(evas, object, 20.0, 30.0);
evas_set_color(evas, object, 200.0, 40.0, 0.0, 130.0);
evas_move(evas, object, 20.0, 220.0);
evas_show(evas, object);
</pre></font>
<font face=arial,helvetica,lucida size=2><p>
A polygon, reddish/orange, parially transparent with 5 points. We create the
polygon relative to the top left of its bounding box then just move it where
we want it later - this makes it easy to just move polygons around withotu
having to reset their coordinates. Just like with polygons - Evas handles
optimizing all the other stuff surrounding these objects for us.
<font face=arial,helvetica,lucida size=2><p>
<font face=courier,clean,fixed color=#445566 size=3><pre>
object = evas_add_line(evas);
evas_set_line_xy(evas, object, 220.0, 240.0, 390.0, 380.0);
evas_set_color(evas, object, 30.0, 80.0, 80.0, 200.0);
evas_show(evas, object);
</pre></font>
<font face=arial,helvetica,lucida size=2><p>
And a line. Anti-aliased. Simple. Just Chnage its color and coordinates when
you want. Evas does the rest.
<font face=arial,helvetica,lucida size=2><p>
And now with these primitives added out Evas canvas will look like this:
<font face=arial,helvetica,lucida size=2><p>
<a href=evas_primitives_eg_0.html><img src=img/evas_primitives_eg_0_thumb.png width=80 height=80 border=1></a>
<font face=arial,helvetica,lucida size=2><p>
</td></tr></table></td>
</tr><tr>
<td background=img/col_black.png><img src=img/blank.gif width=1 height=1></td>

View File

@ -0,0 +1,86 @@
<html><head><title>W W W . E N L I G H T E N M E N T . O R G</title></head>
<body bgcolor=#cccccc
text=#000000
link=#445566
vlink=#99aabb
alink=#ff0000
topmargin=20
leftmargin=20
marginwidth=20
marginheight=20>
<center>
<table border=0 cellpadding=0 cellspacing=0>
<tr>
<td width=1 height=1 bgcolor=#000000><img src=img/blank.gif width=1 height=1></td>
<td width=1 height=1 bgcolor=#000000><img src=img/blank.gif width=1 height=1></td>
<td width=1 height=1 bgcolor=#000000><img src=img/blank.gif width=1 height=1></td>
<td width=1 height=1 bgcolor=#000000><img src=img/blank.gif width=1 height=1></td>
<td width=1 height=1 bgcolor=#000000><img src=img/blank.gif width=1 height=1></td>
</tr>
<tr>
<td width=1 height=1 bgcolor=#000000><img src=img/blank.gif width=1 height=1></td>
<td width=1 height=1 background=img/col_pane.png><table border=0 cellpadding=8 cellspacing=0><tr><td><img src=img/logo_tl.png width=80 height=100></td></tr></table></td>
<td width=1 height=1 background=img/col_pane.png><img src=img/blank.gif width=1 height=1></td>
<td width=1 height=1 background=img/col_pane.png><table border=0 cellpadding=8 cellspacing=0><tr>
<td><a href=main.html><img src=img/title.png width=480 height=100 border=0 alt=Enlightnement></a></td>
</tr></table>
</td>
<td width=1 height=1 bgcolor=#000000><img src=img/blank.gif width=1 height=1></td>
</tr>
<tr>
<td width=1 height=1 bgcolor=#000000><img src=img/blank.gif width=1 height=1></td>
<td width=1 height=1 background=img/col_pane.png><img src=img/blank.gif width=1 height=1></td>
<td width=1 height=1 bgcolor=#000000><img src=img/blank.gif width=1 height=1></td>
<td width=1 height=1 bgcolor=#000000><img src=img/blank.gif width=1 height=1></td>
<td width=1 height=1 bgcolor=#000000><img src=img/blank.gif width=1 height=1></td>
</tr>
<tr>
<td width=1 height=1 bgcolor=#000000><img src=img/blank.gif width=1 height=1></td>
<td width=1 height=1 background=img/col_pane.png valign=top><table border=0 cellpadding=8 cellspacing=0><tr>
<td><a href=main.html><img src=img/nav_main.png width=80 height=15 border=0></a><br><br>
<a href=news.html><img src=img/nav_news.png width=80 height=15 border=0></a><br><br>
<a href=download.html><img src=img/nav_download.png width=80 height=15 border=0></a><br><br>
<a href=shots.html><img src=img/nav_shots.png width=80 height=15 border=0></a><br><br>
<a href=team.html><img src=img/nav_team.png width=80 height=15 border=0></a><br><br>
<a href=info.html><img src=img/nav_info.png width=80 height=15 border=0></a><br><br>
<a href=source.html><img src=img/nav_source.png width=80 height=15 border=0></a><br><br>
<a href=mail.html><img src=img/nav_mail.png width=80 height=15 border=0></a><br><br>
<a href=goodies.html><img src=img/nav_goodies.png width=80 height=15 border=0></a></td>
</tr></table>
</td>
<td width=1 height=1 bgcolor=#000000><img src=img/blank.gif width=1 height=1></td>
<td width=480 height=1 background=img/col_content.png valign=top align=left>
<table border=0 cellpadding=0 cellspacing=0><tr>
<td><img src=img/shadow_tl.png width=20 height=20></td>
<td background=img/shadow_t.png><img src=img/blank.gif width=480 height=20></td>
<td><img src=img/shadow_t.png width=20 height=20></td>
</tr><tr>
<td background=img/shadow_l.png><img src=img/blank.gif width=20 height=300></td>
<td valign=top align=left>
<font face=arial,helvetica,lucida size=2><p>
<a href=evas.html><img src=img/evas_primitives_eg_0.png width=400 height=400 border=1></a>
</td>
<td><img src=img/blank.gif width=20 height=20></td>
</tr><tr>
<td><img src=img/shadow_l.png width=20 height=20></td>
<td><img src=img/blank.gif width=480 height=20></td>
<td><img src=img/blank.gif width=20 height=20></td>
</tr></table>
</td>
<td width=1 height=1 bgcolor=#000000><img src=img/blank.gif width=1 height=1></td>
</tr>
<tr>
<td width=1 height=1 bgcolor=#000000><img src=img/blank.gif width=1 height=1></td>
<td width=1 height=1 bgcolor=#000000><img src=img/blank.gif width=1 height=1></td>
<td width=1 height=1 bgcolor=#000000><img src=img/blank.gif width=1 height=1></td>
<td width=1 height=1 bgcolor=#000000><img src=img/blank.gif width=1 height=1></td>
<td width=1 height=1 bgcolor=#000000><img src=img/blank.gif width=1 height=1></td>
</tr>
</table>
</center>
</body></html>

402
e/pages/evas_print.html Normal file
View File

@ -0,0 +1,402 @@
<html>
<center><img src=img/evas_logo.png width=128 height=128></center>
<center><font face=arial,helvetica,lucida size=4><b>Evas</b></font></center>
<font face=arial,helvetica,lucida size=2><p>
Evas is a hardware-accelerated canvas API for X-Windows that can draw
anti-aliased text, smooth super and sub-sampled images, alpha-blend, as well
as drop down to using normal X11 primitives such as pixmaps, lines and
rectangles for speed if your CPU or graphics hardware are too slow.
<font face=arial,helvetica,lucida size=2><p>
Evas abstracts any need to know much abotu what the characteristics of your
XServer's display are - what depth or what magic visuals etc, it has. The
most you need to tell evas is how many colors (at a maximum) to use if the
display is not a turecolor display. By default it is suggested to use 216
colors (as this equates to a 6x6x6 colorcube - exactly the same colorcube
netscape, mozilla, gdkrgb etc. use so colors will be shared). If evas can't
allocate enough colors it keeps reducing the size of the colorcube until it
reaches plain black and white. This way it can display on anything from a
black and white only terminal to 16 color VGA to 256 color and all the way
up through 15, 16 24 and 32bit color. Here are some screenshots of a demo
evas app to show the rendering output in different situations
<font face=arial,helvetica,lucida size=2><p>
<table border=0 cellpadding=0 cellspacing=0><tr>
<td background=img/col_black.png><img src=img/blank.gif width=1 height=1></td>
<td background=img/col_black.png><img src=img/blank.gif width=1 height=1></td>
<td background=img/col_black.png><img src=img/blank.gif width=1 height=1></td>
<td background=img/col_black.png><img src=img/blank.gif width=1 height=1></td>
<td><img src=img/blank.gif width=1 height=1></td>
</tr><tr>
<td background=img/col_black.png><img src=img/blank.gif width=1 height=1></td>
<td background=img/tile_shadow_tl.png><img src=img/blank.gif width=16 height=16></td>
<td background=img/tile_shadow_t.png><img src=img/blank.gif width=16 height=16></td>
<td background=img/col_black.png><img src=img/blank.gif width=1 height=1></td>
<td><img src=img/blank.gif width=1 height=1></td>
</tr><tr>
<td background=img/col_black.png><img src=img/blank.gif width=1 height=1></td>
<td background=img/tile_shadow_l.png><img src=img/blank.gif width=16 height=16></td>
<td background=img/tile.png align=left valign=top>
<img src=img/evas_colors.png width=128 height=128>
<br><img src=img/blank.gif width=144 height=16></td>
<td background=img/col_black.png><img src=img/blank.gif width=1 height=1></td>
<td valign=top align=left><table border=0 cellpadding=8 cellspacing=0><tr><td>
<font face=arial,helvetica,lucida size=2><p>
<center><font face=arial,helvetica,lucida size=4><b>Colors</b></font></center>
<font face=arial,helvetica,lucida size=2><p>
The following screenshots of a demo Evas application were taken in 8 bit
color (256 colors) (with worse color situations down to monochrome
simulated) using the software rendering engine in Evas.
<font face=arial,helvetica,lucida size=2><p>
<a href=evas_depth_eg_8_216.html><img src=img/evas_depth_eg_8_216_thumb.png width=80 height=80 border=1></a>
<a href=evas_depth_eg_8_128.html><img src=img/evas_depth_eg_8_128_thumb.png width=80 height=80 border=1></a>
<a href=evas_depth_eg_8_64.html><img src=img/evas_depth_eg_8_64_thumb.png width=80 height=80 border=1></a>
<a href=evas_depth_eg_8_32.html><img src=img/evas_depth_eg_8_32_thumb.png width=80 height=80 border=1></a>
<a href=evas_depth_eg_8_16.html><img src=img/evas_depth_eg_8_16_thumb.png width=80 height=80 border=1></a>
<a href=evas_depth_eg_8_8.html><img src=img/evas_depth_eg_8_8_thumb.png width=80 height=80 border=1></a>
<a href=evas_depth_eg_8_2.html><img src=img/evas_depth_eg_8_2_thumb.png width=80 height=80 border=1></a>
<font face=arial,helvetica,lucida size=2><p>
The next pictures were taken of the same application in 8 bit color
simulating worse color depths by reducing the allocation max, and using the
X11 rendering engine that uses X11 primitives instead of the CPU (ie
pixmaps, lines, rectangles, masks etc.).
<font face=arial,helvetica,lucida size=2><p>
<a href=evas_depth_eg_8x_216.html><img src=img/evas_depth_eg_8x_216_thumb.png width=80 height=80 border=1></a>
<a href=evas_depth_eg_8x_128.html><img src=img/evas_depth_eg_8x_128_thumb.png width=80 height=80 border=1></a>
<a href=evas_depth_eg_8x_64.html><img src=img/evas_depth_eg_8x_64_thumb.png width=80 height=80 border=1></a>
<a href=evas_depth_eg_8x_32.html><img src=img/evas_depth_eg_8x_32_thumb.png width=80 height=80 border=1></a>
<a href=evas_depth_eg_8x_16.html><img src=img/evas_depth_eg_8x_16_thumb.png width=80 height=80 border=1></a>
<a href=evas_depth_eg_8x_8.html><img src=img/evas_depth_eg_8x_8_thumb.png width=80 height=80 border=1></a>
<a href=evas_depth_eg_8x_2.html><img src=img/evas_depth_eg_8x_2_thumb.png width=80 height=80 border=1></a>
<font face=arial,helvetica,lucida size=2><p>
The following screenshots are of the same Evas demo application in 16 bit
color, with the shots being software, OpenGL and X11 rendering engines
respectively.
<font face=arial,helvetica,lucida size=2><p>
<a href=evas_depth_eg_16.html><img src=img/evas_depth_eg_16_thumb.png width=80 height=80 border=1></a>
<a href=evas_depth_eg_16gl.html><img src=img/evas_depth_eg_16gl_thumb.png width=80 height=80 border=1></a>
<a href=evas_depth_eg_16x.html><img src=img/evas_depth_eg_16x_thumb.png width=80 height=80 border=1></a>
<font face=arial,helvetica,lucida size=2><p>
The following screenshots are of the same Evas demo application in 24/32 bit
color, with the shots being software, OpenGL and X11 rendering engines
respectively.
<font face=arial,helvetica,lucida size=2><p>
<a href=evas_depth_eg_32.html><img src=img/evas_depth_eg_32_thumb.png width=80 height=80 border=1></a>
<a href=evas_depth_eg_32gl.html><img src=img/evas_depth_eg_32gl_thumb.png width=80 height=80 border=1></a>
<a href=evas_depth_eg_32x.html><img src=img/evas_depth_eg_32x_thumb.png width=80 height=80 border=1></a>
<font face=arial,helvetica,lucida size=2><p>
</td></tr></table></td>
</tr><tr>
<td background=img/col_black.png><img src=img/blank.gif width=1 height=1></td>
<td background=img/col_black.png><img src=img/blank.gif width=1 height=1></td>
<td background=img/col_black.png><img src=img/blank.gif width=1 height=1></td>
<td background=img/col_black.png><img src=img/blank.gif width=1 height=1></td>
<td><img src=img/blank.gif width=1 height=1></td></tr></table>
<font face=arial,helvetica,lucida size=2><p>
Evas provides a structured mode graphics API and thus provides a set of
objects as primities to work with. As opposed to immediate mode where the
program actually draws the data, with structured mode the program describes
the data with primitives and lest the canvas handle the drawing. This means
the program has to describe what it wants to draw in terms of the primitives
given. Here is a list of them.
<font face=arial,helvetica,lucida size=2><p>
<table border=0 cellpadding=0 cellspacing=0><tr>
<td background=img/col_black.png><img src=img/blank.gif width=1 height=1></td>
<td background=img/col_black.png><img src=img/blank.gif width=1 height=1></td>
<td background=img/col_black.png><img src=img/blank.gif width=1 height=1></td>
<td background=img/col_black.png><img src=img/blank.gif width=1 height=1></td>
<td><img src=img/blank.gif width=1 height=1></td>
</tr><tr>
<td background=img/col_black.png><img src=img/blank.gif width=1 height=1></td>
<td background=img/tile_shadow_tl.png><img src=img/blank.gif width=16 height=16></td>
<td background=img/tile_shadow_t.png><img src=img/blank.gif width=16 height=16></td>
<td background=img/col_black.png><img src=img/blank.gif width=1 height=1></td>
<td><img src=img/blank.gif width=1 height=1></td>
</tr><tr>
<td background=img/col_black.png><img src=img/blank.gif width=1 height=1></td>
<td background=img/tile_shadow_l.png><img src=img/blank.gif width=16 height=16></td>
<td background=img/tile.png align=left valign=top>
<img src=img/evas_canvas.png width=128 height=128>
<br><img src=img/blank.gif width=144 height=16></td>
<td background=img/col_black.png><img src=img/blank.gif width=1 height=1></td>
<td valign=top align=left><table border=0 cellpadding=8 cellspacing=0><tr><td>
<font face=arial,helvetica,lucida size=2><p>
<center><font face=arial,helvetica,lucida size=4><b>Images</b></font></center>
<font face=arial,helvetica,lucida size=2><p>
One of the most versatile and appealing objects is the image object. You
simple tell Evas where the image file is located, where to put the image
what size the object is to be and how to fill the image object with the
image data, and Evas handles the rest. This makes dealing with images in
Evas childs play. Here is a quick example of how it would work:
<font face=arial,helvetica,lucida size=2><p>
<pre>
object = evas_add_image_from_file(evas, "flower.png");
evas_move(evas, object, 10.0, 30.0);
evas_show(evas, object);
</pre>
<font face=arial,helvetica,lucida size=2><p>
And it would look something like this:
<font face=arial,helvetica,lucida size=2><p>
<a href=evas_image_eg_0.html><img src=img/evas_image_eg_0_thumb.png width=80 height=80 border=1></a>
<font face=arial,helvetica,lucida size=2><p>
By default image bojects are the size of the original image (in pixels). If
we wish to make the object larger and have the image scale up or down in
size we could do:
<font face=arial,helvetica,lucida size=2><p>
<pre>
evas_resize(evas, object, 320.0, 240.0);
evas_set_image_fill(evas, object, 0.0, 0.0, 320.0, 240.0);
</pre>
<font face=arial,helvetica,lucida size=2><p>
Now our canvas would look like this:
<font face=arial,helvetica,lucida size=2><p>
<a href=evas_image_eg_1.html><img src=img/evas_image_eg_1_thumb.png width=80 height=80 border=1></a>
<font face=arial,helvetica,lucida size=2><p>
Easy, isn't it? now lets say we want to have a 300x200 unit rectangle filled
with this image we loaded, but we want it to tile (repeat) starting the tile
at coordinate 0,0 relative to the to-left corner of the image object area,
but have the tiled image size be 20x50.
<font face=arial,helvetica,lucida size=2><p>
<pre>
evas_resize(evas, object, 300.0, 200.0);
evas_set_image_fill(evas, object, 0.0, 0.0, 20.0, 50.0);
</pre>
<font face=arial,helvetica,lucida size=2><p>
Our result would be something like this:
<font face=arial,helvetica,lucida size=2><p>
<a href=evas_image_eg_2.html><img src=img/evas_image_eg_2_thumb.png width=80 height=80 border=1></a>
<font face=arial,helvetica,lucida size=2><p>
You may think "I can do this just as easily with normal X drawing primitievas
and a little extra sugar thrown in" but Evas does a whole lot more for you.
You never need to know how to render the objects or handle re-rendering
them. Evas does this and optimizes it for you. it handles layering and
resizing, it optimizes everything to minimize CPU effort with a dynamic set of
objects. It handles the work to the point where ALL you need to do is
create, destory, show, hide, move, resize etc. objects and Evas does the
rest of the nasty work for you.
<font face=arial,helvetica,lucida size=2><p>
As you can see - the program has to know and do very little. There are many
powerful things you can do, like fade images in and out, re-color them so
they look tinted, have them rendered only within a certain area of the
canvas and more.
<font face=arial,helvetica,lucida size=2><p>
</td></tr></table></td>
</tr><tr>
<td background=img/col_black.png><img src=img/blank.gif width=1 height=1></td>
<td background=img/col_black.png><img src=img/blank.gif width=1 height=1></td>
<td background=img/col_black.png><img src=img/blank.gif width=1 height=1></td>
<td background=img/col_black.png><img src=img/blank.gif width=1 height=1></td>
<td><img src=img/blank.gif width=1 height=1></td></tr></table>
<font face=arial,helvetica,lucida size=2><p>
Text is a very important part of many applications. Evas of course provides
a nice simple way of getting text into the Evas you have up without much
fuss or bother AND to boot it will anti-alias it so your edges are smooth
and not jagged AND allow fo the text to be semi-transparent and much more.
<font face=arial,helvetica,lucida size=2><p>
<table border=0 cellpadding=0 cellspacing=0><tr>
<td background=img/col_black.png><img src=img/blank.gif width=1 height=1></td>
<td background=img/col_black.png><img src=img/blank.gif width=1 height=1></td>
<td background=img/col_black.png><img src=img/blank.gif width=1 height=1></td>
<td background=img/col_black.png><img src=img/blank.gif width=1 height=1></td>
<td><img src=img/blank.gif width=1 height=1></td>
</tr><tr>
<td background=img/col_black.png><img src=img/blank.gif width=1 height=1></td>
<td background=img/tile_shadow_tl.png><img src=img/blank.gif width=16 height=16></td>
<td background=img/tile_shadow_t.png><img src=img/blank.gif width=16 height=16></td>
<td background=img/col_black.png><img src=img/blank.gif width=1 height=1></td>
<td><img src=img/blank.gif width=1 height=1></td>
</tr><tr>
<td background=img/col_black.png><img src=img/blank.gif width=1 height=1></td>
<td background=img/tile_shadow_l.png><img src=img/blank.gif width=16 height=16></td>
<td background=img/tile.png align=left valign=top>
<img src=img/evas_text.png width=128 height=128>
<br><img src=img/blank.gif width=144 height=16></td>
<td background=img/col_black.png><img src=img/blank.gif width=1 height=1></td>
<td valign=top align=left><table border=0 cellpadding=8 cellspacing=0><tr><td>
<font face=arial,helvetica,lucida size=2><p>
<center><font face=arial,helvetica,lucida size=4><b>Text</b></font></center>
<font face=arial,helvetica,lucida size=2><p>
Text allows you to display information in your Evas without needing image
objects with pre-rendered text. But first you have to realise fonts are
handled a little differently. First there is a font path - this is a list of
directories where to find font files. Evas supports Truetype fonts only -
some may think this bad, but there are more turetype fonts than any other
format out there and many are very good quality.
<font face=arial,helvetica,lucida size=2><p>
Evas looks at the fonts in a directory by their filename, so a font you
reference in evas as "myfont", Evas will look in the directories (in the
order given) for a "myfont.ttf" file. It is case sensitive, but this system
proves to be nice and simple. Here is a simple example.
<font face=arial,helvetica,lucida size=2><p>
<pre>
object = evas_add_text(evas, "notepad", 18, "Here is a line of text!");
evas_move(evas, object, 120.0, 50.0);
evas_set_color(evas, object, 0, 0, 0, 255);
evas_show(evas, object);
</pre>
<font face=arial,helvetica,lucida size=2><p>
This should create a text object with its top-left starting at 120.0, 50.0
in the Evas, with the notepad font at size 18, with the text "Here is a line
of text!" and in solid black (Red = 0, Green = 0, Blue = 0, Alpha = 255).
This is what it would look like:
<font face=arial,helvetica,lucida size=2><p>
<a href=evas_text_eg_0.html><img src=img/evas_text_eg_0_thumb.png width=80 height=80 border=1></a>
<font face=arial,helvetica,lucida size=2><p>
As you can see - it is really easy to create some text in an Evas canvas,
and it is just as easy to change its contents with calls such as the following
<font face=arial,helvetica,lucida size=2><p>
<pre>
evas_set_text(evas, object, "Some new text here");
evas_set_font(evas, object, "arial", 30);
evas_set_color(evas, object, 255, 0, 0, 255);
</pre>
<font face=arial,helvetica,lucida size=2><p>
Just modifying the properties of an object this way directly leads to it
changing as you would expect. There are enough text query calls too to
impliment almost anything you need using text objects, including text entry
boxes, word processors, html and text formatting engines and much much more.
<font face=arial,helvetica,lucida size=2><p>
</td></tr></table></td>
</tr><tr>
<td background=img/col_black.png><img src=img/blank.gif width=1 height=1></td>
<td background=img/col_black.png><img src=img/blank.gif width=1 height=1></td>
<td background=img/col_black.png><img src=img/blank.gif width=1 height=1></td>
<td background=img/col_black.png><img src=img/blank.gif width=1 height=1></td>
<td><img src=img/blank.gif width=1 height=1></td></tr></table>
<font face=arial,helvetica,lucida size=2><p>
Another useful primitive that can be used is the Gradient Box primitive.
Basically this is a rectangular object that is filled with a linear range of
colors at an arbitary angle defined as part of the properties of that object.
<font face=arial,helvetica,lucida size=2><p>
<table border=0 cellpadding=0 cellspacing=0><tr>
<td background=img/col_black.png><img src=img/blank.gif width=1 height=1></td>
<td background=img/col_black.png><img src=img/blank.gif width=1 height=1></td>
<td background=img/col_black.png><img src=img/blank.gif width=1 height=1></td>
<td background=img/col_black.png><img src=img/blank.gif width=1 height=1></td>
<td><img src=img/blank.gif width=1 height=1></td>
</tr><tr>
<td background=img/col_black.png><img src=img/blank.gif width=1 height=1></td>
<td background=img/tile_shadow_tl.png><img src=img/blank.gif width=16 height=16></td>
<td background=img/tile_shadow_t.png><img src=img/blank.gif width=16 height=16></td>
<td background=img/col_black.png><img src=img/blank.gif width=1 height=1></td>
<td><img src=img/blank.gif width=1 height=1></td>
</tr><tr>
<td background=img/col_black.png><img src=img/blank.gif width=1 height=1></td>
<td background=img/tile_shadow_l.png><img src=img/blank.gif width=16 height=16></td>
<td background=img/tile.png align=left valign=top>
<img src=img/evas_gradient.png width=128 height=128>
<br><img src=img/blank.gif width=144 height=16></td>
<td background=img/col_black.png><img src=img/blank.gif width=1 height=1></td>
<td valign=top align=left><table border=0 cellpadding=8 cellspacing=0><tr><td>
<font face=arial,helvetica,lucida size=2><p>
<center><font face=arial,helvetica,lucida size=4><b>Gradients</b></font></center>
<font face=arial,helvetica,lucida size=2><p>
Gradients are useful for when you want to fille a bakcgroudn or rectangle
with something other than a solid color, but do not want to go to the
expense of needing an image for it. They can be used to hilight areas with
lighting and shadow effects and many other things.
<font face=arial,helvetica,lucida size=2><p>
Creating and managing these objects, like almost everything else, is also
childs play. take a look at this:
<font face=arial,helvetica,lucida size=2><p>
<pre>
object = evas_add_gradient_box(evas);
evas_move(evas, object, 150.0, 100.0);
evas_resize(evas, object, 200.0, 120.0);
gradient = evas_gradient_new();
evas_gradient_add_color(gradient, 255, 255, 255, 255, 10);
evas_gradient_add_color(gradient, 255, 255, 0, 255, 10);
evas_gradient_add_color(gradient, 255, 0, 0, 255, 10);
evas_gradient_add_color(gradient, 0, 0, 128, 255, 10);
evas_gradient_add_color(gradient, 0, 0, 128, 0, 10);
evas_set_gradient(evas, object, gradient);
evas_gradient_free(gradient);
evas_set_angle(evas, object, 290.0);
evas_show(evas, object);
</pre>
<font face=arial,helvetica,lucida size=2><p>
The program we are developing looks now something like this:
<font face=arial,helvetica,lucida size=2><p>
<a href=evas_grad_eg_0.html><img src=img/evas_grad_eg_0_thumb.png width=80 height=80 border=1></a>
<font face=arial,helvetica,lucida size=2><p>
As you see, you create the gradient box object, place it somewhere in your
Evas, set its size, and now you get to define the list of colors it is to
use (from start of the gradient to end) and their relative "distance" apart.
This is relative to the length of the gradient, not an absolute, so the
total length is the sum of all the distances (except the first element in
the gradient whose distance is ignored). We add in white, yellow, red, dark
blue then "transparent" in the gradient in order, then set this gradient to
be used by this gradient box. once we are done setting up this gradient we
can set it to be used by more than one gradient box, and when done with it
finally, we can just free it. All we do now is determine the angle the
gradient is at in the box (with 0 degrees being the first element of the
gradient at 12:00 o'clock, going all the way up to 360 degrees clock-wise),
and then we show the object. All we need to do now is move and resize it,
show it, change the angle etc. and Evas handles it for us.
<font face=arial,helvetica,lucida size=2><p>
</td></tr></table></td>
</tr><tr>
<td background=img/col_black.png><img src=img/blank.gif width=1 height=1></td>
<td background=img/col_black.png><img src=img/blank.gif width=1 height=1></td>
<td background=img/col_black.png><img src=img/blank.gif width=1 height=1></td>
<td background=img/col_black.png><img src=img/blank.gif width=1 height=1></td>
<td><img src=img/blank.gif width=1 height=1></td></tr></table>
<font face=arial,helvetica,lucida size=2><p>
This is not where it ends. there are other primitives that Evas supports.
Polygons, Lines and Rectangles complete this list for now, but future plans
at a later point may mean Video objects (eg MPEG sterams as objects), curved
objects (ellipses, curcles, splines etc.) and more, but for now they are not
supported.
<font face=arial,helvetica,lucida size=2><p>
<table border=0 cellpadding=0 cellspacing=0><tr>
<td background=img/col_black.png><img src=img/blank.gif width=1 height=1></td>
<td background=img/col_black.png><img src=img/blank.gif width=1 height=1></td>
<td background=img/col_black.png><img src=img/blank.gif width=1 height=1></td>
<td background=img/col_black.png><img src=img/blank.gif width=1 height=1></td>
<td><img src=img/blank.gif width=1 height=1></td>
</tr><tr>
<td background=img/col_black.png><img src=img/blank.gif width=1 height=1></td>
<td background=img/tile_shadow_tl.png><img src=img/blank.gif width=16 height=16></td>
<td background=img/tile_shadow_t.png><img src=img/blank.gif width=16 height=16></td>
<td background=img/col_black.png><img src=img/blank.gif width=1 height=1></td>
<td><img src=img/blank.gif width=1 height=1></td>
</tr><tr>
<td background=img/col_black.png><img src=img/blank.gif width=1 height=1></td>
<td background=img/tile_shadow_l.png><img src=img/blank.gif width=16 height=16></td>
<td background=img/tile.png align=left valign=top>
<img src=img/evas_primitives.png width=128 height=128>
<br><img src=img/blank.gif width=144 height=16></td>
<td background=img/col_black.png><img src=img/blank.gif width=1 height=1></td>
<td valign=top align=left><table border=0 cellpadding=8 cellspacing=0><tr><td>
<font face=arial,helvetica,lucida size=2><p>
<center><font face=arial,helvetica,lucida size=4><b>Other Primitives</b></font></center>
<font face=arial,helvetica,lucida size=2><p>
At your disposal you also have Rectangles, Lines and Polygons too. You can
use these to fill in backgrounds, simulate circles (with polygons) and much
more. They are versatile and simple and let you do basic drawing withotu
requiring on-disk data to generate it from.
<font face=arial,helvetica,lucida size=2><p>
</td></tr></table></td>
</tr><tr>
<td background=img/col_black.png><img src=img/blank.gif width=1 height=1></td>
<td background=img/col_black.png><img src=img/blank.gif width=1 height=1></td>
<td background=img/col_black.png><img src=img/blank.gif width=1 height=1></td>
<td background=img/col_black.png><img src=img/blank.gif width=1 height=1></td>
<td><img src=img/blank.gif width=1 height=1></td></tr></table>
</html>

Binary file not shown.

After

Width:  |  Height:  |  Size: 22 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 4.6 KiB