Language > Widgets > About Tree Widgets > Replacing the Default Bitmaps

# Replacing the Default Bitmaps

By default, tree widgets use bitmap images of a folder and a single piece of paper as the icons representing branch and leaf nodes in a tree widget hierarchy. You can modify the look of the tree widget by supplying your own bitmap for a given node. Set the BITMAP keyword to WIDGET_TREE equal to a 16 x 16 x 3 array that contains a 24-bit color image.

For example, suppose you have a 16 x 16 pixel TrueColor icon stored in a TIFF file. The following commands make the image the icon used for the root node of a tree widget hierarchy:

myIcon = READ_TIFF('/path_to/myicon.tif', INTERLEAVE=2)

wtRoot = WIDGET_TREE(wTree, /FOLDER, BITMAP=myIcon)

Note the use of the INTERLEAVE keyword to ensure that the resulting image array has dimensions 16 x 16 x 3. Depending on your image file format, you may need to modify the image array in other ways.

## Using Images from the IDL Distribution

The `/resources/bitmaps` subdirectory of the IDL distribution contains a selection of 16-color (4-bit), 16 x 16 pixel icon images. To use these images as bitmaps in a tree widget, you must convert them to 16 x 16 x 3 (24-bit color) arrays.

The following code snippet loads the camera icon stored in `IDLDIR/resources/bitmaps/camera.bmp` into a 16 x 16 x 3 array:

; Create a 24-bit image array.

imageRGB = BYTARR(16, 16, 3, /NOZERO)

; Read in the bitmap.

file = FILEPATH('camera.bmp', SUBDIR=['resource', 'bitmaps'])

image8 = READ_BMP(file, Red, Green, Blue)

; Pass the image through the color table

imageRGB[0,0,0] = Red[image8]

imageRGB[0,0,1] = Green[image8]

imageRGB[0,0,2] = Blue[image8]

To use the camera icon in a tree widget, you would specify the `imageRGB` variable as the value of the BITMAP keyword to WIDGET_TREE.

## Adding Transparency to Icons

User supplied bitmaps can have transparent pixels, just as the default icons do. This ensures that the icon’s background matches the background of your tree widget, which you can customize. It also enables one bitmap to suffice for all platforms, which often have different default tree widget background colors.

The MASK family of keywords is used to affect tree widget bitmaps. When a tree widget is created with a bitmap or given a new bitmap, the MASK keyword serves to set the masked sub-property of the bitmap. Those pixels in the bitmap that have the same color as the lower left pixel are made to be transparent. Internally, a mask is built and then used to draw only those non-transparent pixels.

The following code creates a tree widget node with an unmasked bitmap and then changes it to a different, masked bitmap.

node = WIDGET_TREE(parentNode, BITMAP=icon1)

WIDGET_CONTROL, node, SET_TREE_BITMAP=icon2, /SET_MASK

Note: The MASK keyword of WIDGET_CONTROL has no effect when not used with SET_TREE_BITMAP. The MASK keyword to WIDGET_INFO can be used to determine if a tree’s bitmap is masked. For more information see WIDGET_CONTROL and WIDGET_INFO in the IDL Reference Guide.