Showing posts with label code. Show all posts
Showing posts with label code. Show all posts

13 April 2009

Cool Dialog GUI (9 quads method)



Hey all,

If you want to draw some cool looking rectangle/dialog:


this is the 9 quads method using... Clutter.

First we need some texture like this (256x256 icon):














To be loaded with:
texture = cogl_texture_new_from_file  (texPath, 10, COGL_TEXTURE_NONE, COGL_PIXEL_FORMAT_ANY, NULL);


Then, some layout parameters (inner rectangle coordinates):
float framing[4]={108.0/256.0,50.0/256.0,200.0/256.0,147.0/256.0};


and a function which splits the texture into 9 quads, to stretch the whole thing smartly:

static void _cogl_9_rectangle (float x_1, float y_1, float x_2, float y_2,
float framing[4], CoglHandle texHandle)
{
float  verts[12*9];

if (!cogl_is_texture(texHandle))
return;

cogl_set_source_texture (texHandle);

cogl_push_matrix ();
cogl_translate (x_1, y_1, 0);

float subrect[4];
float w = x_2-x_1;
float h = y_2-y_1;
//uniformly stretched
subrect[0]=w*dims[0];
subrect[1]=h*dims[1];
subrect[2]=w*dims[2];
subrect[3]=h*dims[3];
//and or preserving original texture dims
int tex_w = cogl_texture_get_width(texHandle);
int tex_h = cogl_texture_get_height(texHandle);
float value = tex_w*dims[0];
if (value<subrect[0]) subrect[0]=value;
value = tex_h*dims[1];
if (value<subrect[1]) subrect[1]=value;
value = w - tex_w*(1.0f-dims[2]);
if (value>subrect[2]) subrect[2]=value;
value = h - tex_h*(1.0f-dims[3]);
if (value>subrect[3]) subrect[3]=value;
//and the 9 quads
cogl_rectangle_with_texture_coords (0.0f, 0.0f, subrect[0], subrect[1],
0.0f, 0.0f, dims[0], dims[1]);
cogl_rectangle_with_texture_coords (subrect[0], 0.0f, subrect[2], subrect[1],
dims[0], 0.0f, dims[2], dims[1]);
cogl_rectangle_with_texture_coords (subrect[2], 0.0f, w, subrect[1],
dims[2], 0.0f, 1.0f, dims[1]);

cogl_rectangle_with_texture_coords (0.0f, subrect[1], subrect[0], subrect[3],
0.0f, dims[1], dims[0], dims[3]);
cogl_rectangle_with_texture_coords (subrect[0], subrect[1], subrect[2], subrect[3],
dims[0], dims[1], dims[2], dims[3]);
cogl_rectangle_with_texture_coords (subrect[2], subrect[1], w, subrect[3],
dims[2], dims[1], 1.0f, dims[3]);

cogl_rectangle_with_texture_coords (0.0f, subrect[3], subrect[0], h,
0.0f, dims[3], dims[0], 1.0);
cogl_rectangle_with_texture_coords (subrect[0], subrect[3], subrect[2], h,
dims[0], dims[3], dims[2], 1.0);
cogl_rectangle_with_texture_coords (subrect[2], subrect[3], w, h,
dims[2], dims[3], 1.0f, 1.0);

cogl_pop_matrix();
}


(http://code.google.com/p/syntaxhighlighter/ rocks)

11 March 2009

Clutter, 0.9 and above, places to look for

BTW: for those interested in clutter 0.9.0 and above, i'm recommending using the test files as turorials as the other repo directories are still not very 0.9 friendly. And things did change a lot(!) between 0.8 and 0.9....

Anyway, browsing clutter-xxx/tests/interactive and clutter-xxx/tests/conform directories should bring you with enough juice to start.

Coming soon, some basic clutter code of mine.