Help Center - CANoe

2-12. Panel Design - Creating images

What type of image files can be used?

For many of the panel elements, most popular imaged types can be used.  This includes bitmap, jpeg, and gif.  There are a number of image tools available on the market that can be used for editing and creating images for use with the CANoe Panel Editor.  It is strongly recommended that Microsoft Paint not be used for the creation of bitmap images as certain elements require bitmaps and images to have a regulated size.

How do I make images for switches and buttons?

In the case of both buttons and switches, it is not just a matter of picking an image and inserting it.  Buttons and switches are multi-state objects, meaning that each action they perform will have a different image (ex. pressed vs. released).

Buttons contain 2 active states, pressed and released, and one inactive state, default for a total of 3 states.  An image being used with a bitmap button must contain a graphic for all three states in the following order:  default, released, pressed.  This is accomplished by splicing all three images together across the width of the image.  For example, the following image was created for a bitmap button:



The image is made of three separate 50px by 50px images.  Each image spliced together should be of the same dimensions in order to allow for a smooth transition between states.

Building on the concepts discussed in buttons, switches are no different except that they can contain any number of states as defined by the user.  However, just like with a button, a switch will always need one more image than the chosen number of states, for the disabled state.

So a three state object, like a traffic light (green, yellow, red) will need an image that is four states long (default, green, yellow, red).



What is the transparency color and how do I use it?

It may be desired to have images in a panel that are not rectangular for aesthetic reasons.  Rather than attempt to match a background color in each image, the Panel Editor makes use of a transparency color.



There are two locations where this can be setup.

  1. Global transparency, used by standard panel elements.
    This setting will affect all non-ActiveX controls.  To change the color used, click the Options menu and select Window Setting.



    Clicking the Edit button under Transparency color of the panel, will bring up a color window allowing for you to select the color which you would like to make transparent.
  2. Transparency for ActiveX controls.
    The ActiveX controls each have their own transparency settings that will override the global settings.  These are setup by right-clicking on the control and choosing Configure.  If a control uses an image, the transparency can be set on the Image tab.




© 2006-2008 Vector Informatik. Last modified: 2008-12-05

Add page to favorites

Did you find this page helpful?