How to make gradients for XaAES

Date de publication : 26 déc. 2014 22:20:41

Building gradients for XaAES is not as complicated as it seems and can be quite fun indeed. But as it has not been documented so far, almost no one has build new ones. I hope that this documentation will help and inspire people to create new gradients.

First read carefully the readme.txt to install xgt package.

Try to build an already made gradient source to check that the make process is ok.

Then open the source of a gradient in a text editor.

You will see first the description of the standard window gradients, then of the Alert box and finally of List / Menu / Popup / Button / Box.

Each gradient used for each GEM interface object is described into structures.

struct xa_gradient object_name =

{

(unsigned long)OBJECT_NAME,

v_mask, h_mask,

Height, Width

method, n_steps, {step_position,0},

{{R,G,B},{R,G,B},{R,G,B}},

};

OBJECT_NAME

Name of the GEM object with the following convention :

If the object name starts with OTOP or UTOP, it's related to Standard windows.

If it starts with :

ALERT Alert box

SLIST Scroll list (file selector for ex )

MENU Menu bar

SEL_TITLE Menu selected state

SEL_POPENT Popup selected state

INDBUTT Generic button

ACTBUTT Default active button

POPBKG Popup background

BOX Box background : standard

BOX_GRADIENT2 Box background 2 : big boxes

TEXT Text input area background

Then each objet can have several qualifiers :

OTOP Topped object

UTOP Untopped object

VSLIDE / HSLIDE Sliding area object in windows or list

VSLIDER / HSLIDER Slider object in windows or list

TITLE Title bar in windows or list

INFO Info bar under the title bar

GREY Background of the window / box, Scroll arrow

ex : 

otop_hslider_gradient : topped standard window horizontal slider

slist_otop_hslider_gradient : topped scroll list horizontal slider

utop_title_gradient : untopped standard window title bar

alert_utop_title_gradient : untopped alert box title bar.

V_MASK, H_MASK

Type of mask of the object :

-1, 0, : Vertical object

0, -1, : Horizontal object

-1, -1, : Surface object

HEIGHT, WIDTH

Height and Width of the object in pixel

0, 0 for surface object.

METHOD

0 : vertical gradient

1 : horizontal gradient

2 : diagonal gradient

3 : vertical gradient with one step

4 : horizontal gradient with one step

N_STEPS

-1 : No gradient or plain color

0 : 2 colors gradient : top to bottom / left to right

1 : 3 colors gradient : top to midle to bottom / left to midle to right

>1 does not work

STEP_POSITION

{0} : no step

Positive value : number of pixels from the top or the left where start the 2nd color.  

ex : {9,0} start @9 pixels from the top / left

Negative value : % of the size of the object where start the 2nd color

ex : {-50,0} start @ 50% of the shape. 

Useful for surface objects that have no predefine size.

RGB VALUES

Red, Green and Blue triplets from 0 to 1000

First triplet discribe the top /left of the gradient, last the bottom / right.

Plain color : {{500,500,500}}

2 colors gradient : {{500,500,500},{800,800,800}}

3 colors gradient : {{500,500,500},{700,700,700},{800,800,800}}

Due to GEM shading, starting with the light color at top /left will give a kind of 3D rounded appearance. Starting with a dark color at top /left will give a flat appearance.

TIPS

Modify the source of an already existing gradient, supplied with xgt package in order to avoid missing objects.

Comments are put between /*    */

Enjoy and build plenty new gradients !!!