Chameleon Images Q & A
Table of Contents
What are chameleon images?
A chameleon image is a .PNG file that, when applied to a button/state, uses the Fill and Border colors assigned to the button/state to determine the colors in the image. In other words, it is an image that can have its colors changed on the panel itself (at run-time).
What image file types are supported for use as a chameleon image?
It requires that the image be of a PNG type only. PNG images are the only type of image file supported by TPD4 that use transparency (alpha channel). When creating an image to be used as a Chameleon image in TPD4, set the image properties to 'RGB Color' and '8 Bits/Channel'.
What are they used for?
They provide a mechanism to allow some or all of the buttons/pages' colors to be changed without having to reload a panel file. An entire color scheme of a panel can be changed, or the designer can give the user the ability to create their own colors on the panel. All without having to reload the TP4 file. Chameleon images can also be applied to buttons to create animated highlighting, glow, and drop-shadow effects. When used with multi-state buttons, chameleon images can also take advantage of TPD4's tweening tools to easily create color transition effects. Furthermore, chameleon images may also use a companion bitmap which, when placed on top (via the Draw Order State property) can add highlighting and shadow effects to convincingly create an illusion of depth.
How do they work?
PNG images consist of four separate color channels (Red, Green, Blue, and Alpha), and chameleon images use the button/state's Fill and Border color assignments to determine the colors used in the image. This is explained in more detail below:
• The Alpha channel of the Chameleon image defines the overall shape mask for the state.
• The Red channel defines the area that will be filled with the state's Fill Color.
• The Green channel defines the area that will be filled with the state's Border Color.
• The Blue channel is not used.
As a result, if the Fill and/or Border colors are changed, the colors used in the chameleon image will change accordingly.
How are they used?
In order for a button or page to use a chameleon image, the button's border must be set to 'none'. This will open up a new Property State field, called 'Chameleon Image'. The image that is then assigned to this field will become the image that will have its colors replaced by the fill color and border color of the button. In order to change the colors in the chameleon image, commands may be sent from code (or done via an on-panel send command) to change the fill color, border color, or opacity of the button state. This will change the color and opacity of the button while, at the same time, keeping the companion image (if one is used) on the button intact.
Where can I see an example of chameleon images in action?
A TPD4 file has been attached to this Tech Note to provide an example of chameleon images. This file can be viewed in G4 PanelPreview or on an actual G4 panel.
How the file is constructed:
In the attached TPD4 file, chameleon images are used to allow easy changing of the button colors and the background colors on the panel. This TPD4 file was created using G4 PanelBuilder. It was then modified in TPD4 to assign the address codes to the backgrounds and buttons. Then a popup page was created that changes the current color and allows that color to be assigned to the backgrounds of the pages or to the buttons.
The color change happens by using the button copy command
^BMC-100,0,0,93,1,CF
sent as an internal command on the 'Set Background and the Set Button Color' buttons. This command copies the fill color of one button to another (or a range of others). In this example, it takes the color that is currently selected (and shown on one button), and it copies that to all of the backgrounds (which all have the same address code). On the 'Set Button Color', the same thing happens, except the destination is a range of address ports (all of the buttons on the panel are within this range). By changing the fill color of the buttons, the red area in the chameleon image for each button is replaced. The chameleon images were all assigned in G4 PanelBuilder when the file was created (The Aluminum Smoke Template uses Chameleon images to allow the color of the file to be chosen before it is exported to a TP4 file). The chameleon images used for the buttons look something like these.
The red in the image gets replaced by whatever fill-color is assigned to the button (from the copy command mentioned above). The green can be replaced by the border color, if desired. This mask type image allows defined areas to have their colors changed while still allowing the image on the button to show through. The actual bitmap for the buttons looks something like this:
It is a gray-scale image. The coloring of it takes place by the chameleon image. When the colors in the chameleon image are added (through the fill color and border color), the bitmap takes on those colors without wiping out the image. If this image was a color image instead of a gray-scale image, the color schemes would have been corrupted by the 2 different colors mixing together