Skinning DP4

From 4.621 the appearance of DP4 programs can be customised to a much greater extent than in previous releases:

• Buttons, headers and VCR controls can be drawn with a custom background. This is available on all Windows platforms except Windows CE versions. Buttons and VCR controls do not have to be rectangular.

• The background parts of other controls can be coloured using a bitmap to give a texture or watermark effect. (However, this does not work well on Windows 95 because the texture is limited to an 8*8 bitmap.On other platforms, including Windows CE, there is no limit to the size of the texture bitmap). DP4 will arrange for the texture to join correctly across controls and maps, as can be seen in the screen shot below:

  

  • You should probably not use a texture if you plan to run applications using Windows NT Terminal Server or Windows 2000 or later Terminal Services. Using a texture may reduce the maximum number of users that can succesfully run applications simultaneously, especially if the texture bitmap file is large

  • Using a texture will slow down screen display and can cause performance problems with some graphics cards (See Problem Graphics Cards below). This is unlikely to be significant - on most modern PCs the display will still be more or less instant - but it will have some adverse effect on programs such as DBCHECK and REORGDB that update a count on screen very frequently. You can use the new refresh_interval setting to cure this problem.

Textures will not work well if the Screen is set to display 256 colours or less. Using custom buttons may also cause problems.

Both textures and custom buttons can be handled by DFPRINT. However they are disabled by default in this program, because they may cause problems with some printer drivers, and also because RTF files created by DFPRINT will be much larger if they are not.

You can enabled skinned rendering within DFPRINT by setting the no_texture option to 0

A collection of sample buttons and textures is available. However you can easily create your own versions as described below.

Texture and Button Bitmaps

The bitmaps DP4 uses to create buttons and textures are all standard Windows bitmaps. The various bitmaps should all be stored in the same directory as the DP4 licence file. The names are all configurable via DP4 configuration file entries in the [trmw] section (so that different programs can use different bitmaps if desired). However most of the time you can just use the default name. For example DP4 looks for the texture.bmp file in order to create the texture.

The only peculiarity of the bitmaps is that in order for them to be drawn in a colour that matches the current colour scheme, they should be stored as 256 color bitmaps that are predominantly pure red. At run time DP4 modifies the bitmap by removing the red component and replacing it with the appropriate colour. For this purpose "red" is considered to be the excess (if any) of red over green. For example if a pixel in the bitmap is coloured red=224,green=112,blue=56 (a dullish red-orange), and the colour to be rendered is pale blue (r=186,g=208,b=255) then the pixel will be rendered as r= 112 + 112*186/255 = 193, g = 112+112*208/255 = 203, b = 56+112*255/255=168.

Bitmaps to be used for textures should normally appear to be almost completely red. For example the texture used to create the screen shot above looks like this:

For buttons, parts that you want to be transparent should be coloured light grey (r=192,g=192,b=192). If you use transparency you should make sure that the transparent parts are the same in each of the bitmaps needed for the button. You should make the button bitmap somewhat larger than for a typical button, and it should be proportioned like a typical button.

Creating Buttons and Textures with Paint Shop Pro 7.

All the buttons and textures we supply were created with Paint Shop Pro 7.

To create a button proceed as follows:

1. Create a new image for the button. A size of 300*100 works well.
2. Fill the background with light grey (192,192,192) and then hide the background.
3. Create a new raster layer and use the preset tool shape to create the button outline. You can use one of the available buttons if you like, but you will need to change the colour afterwards. One way to to this is to create a solid red layer and use the Hue or Colour blend modes. Alternatively you can fill the shape with a gradient, for example a red white red gradient.
4. Use the inner bevel effect to create a button border. If your button is not rectangular you must make sure the background is hidden at this point, otherwise the border will not be applied correctly.
5. You need to create four different states of the button. We found the best way to do this was always to use the same bevel type and depth and to vary the lighting and shininess to indicate whether a button is the default button or active. For the button down state reduce the bevel width. You can try a V shape bevel to indicate the button down state, but on the whole we did not think this gives good results.
6. Reduce the colours to 256 using an Optimised Octree palette with error diffusion.
7. Use the Edit Palette option and change the 192,192,192 entry (which you can find by clicking on the area that is supposed to be transparent) to Bright Magenta (255,0,255) or a similar colour. This will reveal any parts of the image which should be 192,192,192, but are not, because of anti-aliasing. Change all the "bad" pixels to the same Bright Magenta colour, by continuing to use the edit palette option.
8. Increase the colour depth to true colour, and then reduce the colours to 256 using an Octree palette again. Change the Magenta palette entry to 192,192,192
9. Save the images as a bitmap.

There are quite a number of tools available for creating buttons. However none of the ones we tried seem to make it easy to create a button down effect.

To create a texture you can use any image as a starting point. Bear in mind that large textures will substantially increase the memory used by DP4, and may impact performance. You should always test performance and appearance on the target machine - the same texture can render quite differently on different machines, even when the same Windows colour scheme is in use. Unfortunately the human eye is much more sensitive to small differences in colour near to grey or white light than it is to changes near a pure colour, therefore you may find it quite hard to judge the point at which your texture will look good when displayed by DP4. We suggest the following technique:

1. Find a suitable image that you would like to use for a texture and open it in Paint Shop Pro
2. Create a solid red raster layer and blend it using colour at around 90% opacity. Your original image will show through coloured red.
3. Create two more solid red raster layers and blend them use lighten and darken modes respectively. Adjust the opacities so you can just see your original image. Alternatively put yet another solid red raster layer on top and blend it using difference mode. Adjust the opacities of the underlying lighten and darken layers so your image shows up just enough to be visible. Then delete the difference layer.
4. Reduce the colours to 256 using Octree mode with error diffusion. Save the image as a bmp file, and test it out with DP4 by copying it over your current texture.bmp file. Don't exit Paint Shop Pro when you do this - you will most likely find that your texture is still too obtrusive and that you need to adjust the layer opacities some more to get a suitable result. You should test the texture with several different colour schemes to make sure it works well in all of them.
5. If the edges of your texture do not join up neatly you may get an unpleasant tiled effect. You can use the Seamless Pattern from Selection option to create a texture that will tile neatly. However this can be rather frustrating and does not give very good results always. You can try using the Kaleidoscope or Pattern effects instead, or a gradient that varies the transparency to fade out the image.

Configuration file entries for bitmaps

All the entries are in the [trmw] section. None of the entries are re-read when trm_set_progname() is called, so they can only be specified on an application basis in [progname] sections that match real executable name. These entries can also be set in the [dfprint] section if desired: for example if you set no_texture=0, so that custom buttons can be displayed when printing maps (possibly useful when creating documentation for a system), you might specify texture=., so that textures were still disabled.

buttonup=buttonup
buttondown=buttondown
buttonactive=buttonactive
buttondefault=buttondefault
headerup=headerup
headerdown=headerdown
headeractive=headeractive
vcrup=vcrup
vcrdown=vcrdown
texture=texture

Problem Graphics Cards

Some graphics cards cause DP4 to update the screen very slowly when skinning is enabled. Sometimes skinned buttons are OK, but background texture renders very slowly. This is more likely to occur when running on machines intended as servers - manufacturers often assume that there is no need to supply such machines with high performance graphics cards. It may also happen that a card works well with some settings but not others - for example you may get quite difference performance when a card is set to display in true color resolutions rather than "hi-color".

In release 4.622 DP4 allows you to use true color bitmaps as well as 256 color bitmaps for background texture, as somtimes graphics cards can render true color bitmaps much more quickly than 256 color ones. However, bitmaps for buttons and other controls must still be 256 color as this is required for transparency suppport.

4.622 also has partial support for the XP "Luna" themes, and some third party themes. For details see "Support for XP Style interface"

As has already been mentioned, always test your application on the target machine. If this is not possible make sure users can easily disable texture.

Cards that are known to cause problems: