AfterStep XML Images

Introduction

AfterStep's graphics engine - libAfterImage includes processor of XML scripts that specify transformation of images. Such XML script may include any function supported by libAfterImage, which includes loading/saving files, scaling, tiling, cropping, Hue-Saturation-Value adjustment, image blending, Text rendering, gradients rendering, tinting, solid fill, etc.

Great advantage of  such scripting capabilities is that numerous images could be produced from the single clipart image. For example most modern system assign different icons to different file types. When two different file types should have similar icons - icon simply gets duplicated. The result of it is huge waste of HDD space and large number of identical files. XML scripts solve that problem, allowing to create shortcuts to image files.

For example xml file with:

<img src="logos/AfterStep5"/>

is a simply a shortcut to clipart image.

Also it allows to create minipixmaps, or reduced size version of icons.

For example:

<scale width="16" height="16">
   <img src="logos/GNUStep">
</scale>

Will create 16x16 version of GNUStep icon, which could be used as minipixmap for application.

Examples

This specific script scales down AfterStep logo to 42x42, and then blends it over the icon of computer monitor, producing new icon.

<composite merge="clip">
   <img src="large/Monitor1"/>
   <scale width="42" height="42" x="7" y="1">
      <img src="logos/AfterStep"/>
   </scale>
<composite>

Here is another script:

<composite merge="clip">
   <tile height="308">
      <scale width="24" height="24">
         <img src="AfterStep3"/>
      </scale>
   </tile>
   <tile height="308" width="24" tint="#557f7f7f">
      <img src="main_back.jpg"/>
   </tile>
</composite>

This one renders border image as could be seen at the top of this page.

Very powerful feature of  AfterStep is colorschemes. That means that at each moment AfterStep defines 31 additional color name, exact color values of which will depend on chosen colorscheme. Now XML scripts may include HSV conversion commands. As the result it is possible to have images change its colors depending on the colorscheme chosen.

For example:

<hsv hue_offset="$ascs.Active.hue" saturation_offset="$ascs.Active.saturation-30" value_offset="$ascs.Active.value-72">
   <img src="bars/title_tile_glass_red_a50"/>
</hsv>

Above image will produce focused titlebar background that changes colors according to colorcheme chosen.

Tiling

Simple tiling

Tiled gradient

The following example produces a tile that repeats itself endlessly with the addition of a gradient that goes from top-left corner to bottom-right corner. This is the default background used by AfterStep for all desktops.

<img id="texturedTile" src="~/.afterstep/desktop/tiles/simpleTexture.png"/>

<composite op="add">
   <gradient width="$xroot.width" height="$xroot.height" colors="BaseDark BaseLight" angle="45"/>
   <tile tile="1">
      <recall srcid="texturedTile"/>
   </tile>
</composite>

Complex tiling

X Y mirrored tiling

The following example produces a tile which is mirrored through the X and Y axis and which repeats itself endlessly.

<img id="tile" src="niceTile.png"/>

<composite id="left_tile" width="$tile.width" height="$tile.height">
   <recall srcid="tile"/>
   <mirror x="0" y="$tile.height" dir="vertical">
      <recall srcid="tile"/>
   </mirror>
</composite>

<composite width="$tile.width" height="$tile.height">
   <recall srcid="left_tile"/>
   <mirror x="$tile.width" y="0" dir="horizontal">
      <recall srcid="left_tile"/>
   </mirror>
</composite>

Plain tiling

The following example produces a tile which is mirrored through the X and Y axis and which repeats itself only 4 plain times.

<scale id="tile" width="$xroot.width/2" height="$xroot.height/2">
   <img src="niceTile.png"/>
</scale>

<composite id="left_tile" width="$xroot.width/2" height="$xroot.height">
   <recall srcid="tile"/>
   <mirror x="0" y="$xroot.height/2" dir="vertical">
      <recall srcid="tile"/>
   </mirror>
</composite>

<composite width="$xroot.width" height="$xroot.height">
   <recall srcid="left_tile"/>
   <mirror x="$xroot.width/2" y="0" dir="horizontal">
      <recall srcid="left_tile"/>
   </mirror>
</composite>