themes.effx.us

The basics

Let's start by covering just the required syntax for an imageclass.

__ICLASS __BGN
  __NAME IMAGE-1
  __NORMAL "artwork/image-1.png"
__END

Line 1 begins the imageclass
Line 2 gives it a name
Line 3 identifies the image to be used and in which state (explained more below)
Line 4 ends the imageclass

Each of those words beginning with two underscores is actually a keyword (remember those things we talked about back in the definitions part of the howto?). As you can see some keywords do not require arguments and others do.

Applying the basics

Consider the following "my-image.png".

Now lets setup an e16 imageclass with that image to be used in the title bar of a border.

__ICLASS __BGN
  __NAME IMAGE-1
  __NORMAL "artwork/my-image.png"
__END

Hmph. So much for basics. See how the scaling process stretched out the beveled edge.

Imageclass properties

In order to get the desired affect we need to apply some imageclass properties. Below is a list of what's available.

__EDGE_SCALING
__PADDING

__FILLRULE __TILE
__FILLRULE __STRETCH
__FILLRULE __TILE_H
__FILLRULE __TILE_V
__FILLRULE __INTEGER_TILE_H
__FILLRULE __INTEGER_TILE_V
__FILLRULE __INTEGER_TILE

__BEVEL __BEVEL_AMIGA
__BEVEL __BEVEL_MOTIF
__BEVEL __BEVEL_NEXT
__BEVEL __BEVEL_DOUBLE
__BEVEL __BEVEL_WIDEDOUBLE
__BEVEL __BEVEL_THINPOINT
__BEVEL __BEVEL_THICKPOINT

__ROTATE __ROTATE_90
__ROTATE __ROTATE_180
__ROTATE __ROTATE_270

__FLIP __FLIP_HORIZONTAL
__FLIP __FLIP_90
__FLIP __FLIP_VERTICAL
__FLIP __FLIP_270

In order to fix our border we need to use __EDGE_SCALING and __PADDING.

Edge scaling identifies pixels from the edge of an image that are to be left "as is" when scaling the image. Its purpose is to preserve things like beveled edges so that the scaling/stretching process doesn't distort them as seen in the first example. In the example below, 3 pixels on both sides and 2 pixels on the top and bottom are not scaled in order to leave us our nice beveled look.

Padding is needed when you don't want text (or other images) to begin at the very edges of your image, similar to margins in a text document. See below how the "Eterm-0.9.4" text is positioned away from the edges of the image now? Text justification is done in the textclasses.

The values for both of these options impact the edges of an image in the following order: left, right, top, bottom.

Here's an example of what happens when we apply those properties.

__ICLASS __BGN
  __NAME IMAGE-1
  __NORMAL "artwork/my-image.png"
  __EDGE_SCALING 3 3 2 2
  __PADDING 10 10 4 4
__END

The default fill rule stretches the image. However, its possible to tile an image rather than stretch it.

Below is an image designed for tiling and how how e16 processes the tile directive for that same Eterm border. We maintain a nice pattern look as apposed to the distortion that would occur during any stretching of that image.

__ICLASS __BGN
  __NAME TILE-1
  __NORMAL "artwork/tile-image.png"
  __FILLRULE __TILE
  __PADDING 10 10 4 4
__END

Visual feedback

So far the only images we've used are declared using the '__NORMAL' keyword. This keyword controls image state. This is the only image state directive that's required in an imageclass. If you'd like to have more visual feedback when using your theme, however, then you need to create and include other images declared with the appropriate image state name.

The table below will help you understand the possible image states.

Pulling it all together

Below is an example of using several image states in one image class. Edge scaling follows each image state to address any differences required for each image, but padding is only needed once.

__ICLASS __BGN
  __NAME IMAGE-1
  __NORMAL "artwork/image-normal.png"
  __EDGE_SCALING 4 4 4 4
  __HILITED "artwork/image-hilited.png"
  __EDGE_SCALING 4 4 4 4
  __CLICKED "artwork/image-clicked.png"
  __EDGE_SCALING 4 4 4 4
  __PADDING 8 8 8 8
__END