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)