Using Your Own Icons

Application Areas for Icons

Icons are employed in the following places in the Innovator X Generation as described below.

Ribbon

Stereotype Icons

Stereotype Property Values

Create Templates

Verification Routines, Engineering Actions and Documentation Commands

Basics

This enables the Innovator X Generation to use all functions from the .Net Framework and "Windows Presentation Framework" (WPF). The "Portable Networks Graphics" pixel format and "XAML" vector format are primarily used as graphic formats. You also require Bitmap versions of the icons to be able to assign icons in the configuration editor.

Portable Networks Graphics (.PNG)

The PNG format has a palette of 32 Bit colors; these colors are all used in Innovator X Generation. Each color channel (R, G, B) in this format has 256 values; this means that 16.7 million different colors are possible. There is also an alpha channel for 256 different transparency values, ranging from "fully opaque" (Alpha=255) to "fully transparent" (Alpha=0).

The "Windows Presentation Framework" used by the Innovator X Generation assumes that graphics files have a physical resolution of 96 dpi (both horizontally and vertically) so that they can be displayed 1:1 on the screen. Other physical resolutions cause the graphic to be scaled when displayed on the screen so that 1 pixel of the graphic no longer corresponds to 1 pixel of the screen. Before WPF existed, it was often the case that Bitmap files were stored with a physical resolution of 72 dpi; this is why you should be particularly aware of the need to adjust the physical resolution when converting BMP to PNG.
XAML-Vector Graphic (.XAML)
As with PNG graphics, XAML format also supports a color depth of 32 Bit, including the alpha channel. However, unlike PNG, XAML format is not a pixel format but rather a vector format. This is why objects are not specified as a rectangular matrix of pixels but rather as a combination of design elements, such as lines, curves or polygons. The advantage of using these formats is that they can be scaled to any size without losing quality - the icon remains crystal clear, even when a diagram is zoomed to a factor of 1000 % or more.

Vector graphics are always loaded in the Innovator X Generation using control templates. A Windows Presentation Framework (WPF) control template specifies the visual structure and possible behavior aspects of a Windows control; it can then be used for multiple instances of the control element at the same time.

An XAML vector graphic's content for the Innovator X Generation has the following structure:
```
<ControlTemplate
	xmlns=http://schemas.microsoft.com/winfx/2006/xaml/presentation
	xmlns:x=http://schemas.microsoft.com/winfx/2006/xaml
	>
	<Grid SnapsToDevicePixels="True" ...>
		
	</Grid>
</ControlTemplate>
```
Other applications are also used as well as the Innovator client. These applications originated from the Innovator eXcellence generation, such as e.g. the configuration editor for editing model configuration. If you want to use a PNG icon you created yourself for model configuration, then you need to define a BMP with the same name at the same time. This BMP can then be assigned to a stereotype, create template etc. in the configuration editor.tool window.
Bitmap (.BMP)

The Bitmap format employed uses no more than 256 colors. These are defined in an indexed color palette. Each of the icon's pixels is assigned an index value between 0 and 255; the color of the pixel to be shown is then derived from this.

Icons of an irregular shape (i.e. not rectangular) also need a color value for transparent sections to make the application window's background color visible outside of the icon's shape. However, the transparent color does not exist in the color palette used.

In order nonetheless to be able to represent irregularly shaped icons, use is made of a trick: the transparency in the non-transparent bitmap format is achieved by using the color value cyan (RGB 0/255/255). This color value is internally replaced by the toolbar's background color when loading the icon file in the Innovator eXcellence applications. All of the icon's pixels which have the index value that corresponds to the first occurrence of cyan in the indexed color palette are replaced. Vice versa, this means that if the cyan color value exists more than once in the color palette then only pixels with a smaller index value are replaced by the background and all others continue to be shown in cyan. This is why the color palette uses the color twice.

The fact that a true transparency is lacking also means that the icon's contours cannot be smoothed properly (anti aliasing).

Creating PNG and BMP Pixel Graphics for Your Own Icons

Suitable Tools

MS Paint included within the scope of delivery with MS Windows is not suitable for this due to the requirements needed. It is a good idea to use programs such as "Paint .Net" (free), "Paintshop Pro" or "Photoshop" (fee incurred).

Tips on How to Proceed

Creating XAML Vector Graphics for Your Own Icons

Suitable Tools

There are a multitude of file formats available for vector graphics. Innovator X Generation only supports XAML format (Extensible Application Markup Language, part of the .Net-Framework).

If you already have icons which are in a vector format, then the tool you are using should be able to export the icon you have designed as XAML code. The free "Inkscape" program should be mentioned here first and foremost as it can import a wide array of vector formats (such as SVG or EPS) and export them as XAML.

If you want to create XAML files from scratch then you can choose whether to use the Microsoft products "Expression Blend" or "Visual Studio 2010" (fee incurred for both) or a free XAML editor, such as "Kaxaml" or "XamlPadX".

A few of these aforementioned programs can also export as PNG or BMP files. If you use one of these programs, then a large proportion of the steps described above are not necessary and you only have to make sure you have the right physical resolution or set the cyan background.

Tips on How to Proceed

Providing Icons

Icon Directories

Innovator uses icons in subdirectories of the $INODIR/icons directory.

You can also enter extra directories (preferably one) with identical directory structure (default etc.) to keep icons included within the scope of delivery and those that you make yourself separate in the Options dialog in the Resources tab.

An icon's various resolutions and image formats always have the same file name (if necessary, with differing suffixes) but are stored in different sub-directories.

$INODIR\icons is the root directory for all icons unless otherwise explicitly set to another root directory using environment variables. This directory has a total of five sub-directories for individual image formats:

$INODIR\icons\default
Icons are stored in BMP format in 16x16 pixel size here
$INODIR\icons\large
Icons are stored in BMP format in 32x32 pixel size here
$INODIR\icons\png_default
Icons are stored in PNG format in 16x16 pixel size here
$INODIR\icons\png_large
Icons are stored in PNG format in 32x32 pixel size here
$INODIR\icons\xaml
Icons are stored in XAML format here

BMP Icons Required

All Innovator applications always require at least one icon file in the 16x16 pixel size in Bitmap format in the default sub-directory. If this is not done, it is not possible to assign an icon in the configuration editor.

In certain situations, e.g. for stereotype icons in the diagram node, it is a good idea to define and additional Bitmap in the 32x32 pixel size so that the image will be shown in better quality.

Assigning Icons in the Configuration

Depending on what you want to use the icon for (cf. above) in an Innovator model, you will need to assign it the appropriate configuration element:

Stereotype icons are stored in a stereotype's properties.
Icons for stereotype property values are stored in the respective value's properties.
Create templates, engineering actions, verification routines and documentation commands have comparable properties where their icons are stored respectively.

To assign an icon, use the Edit>Properties command in the configuration editor for the respective element and choose an icon from the ones offered. Choose an icon from one of the ones provided. You can find more details in the Configuration Manual, chapter 4.2.3, "Extending Model Configurations with Stereotypes".

You can only ever select and assign one Bitmap from the $INODIR\icons\default directory; other files with the same name in other directories are not initially shown in the configuration editor.

Depending on the file name you chose for your icon you created, it will be shown at a particular point in the drop-down list.

The drop-down list in the Properties dialog lists all available files in alphabetical order.

Impact on the Visual Appearance in Innovator

Preferences When Loading Icons

An icon is always searched for by its file's name. Depending on the area of application, different strategies are used when searching for the most suitable icon.

The most common strategy, particularly when working with diagrams, attempts to get the highest graphic quality for the diagram by searching in the following order:

XAML vector graphic from the xaml sub-directory
Large PNG from the png_large sub-directory
Small PNG from the png_default sub-directory
If an icon file with the name you are looking for is not found there, then the BMP icon from the default sub-directory that was originally assigned in the configuration is loaded (see below for possible "Known Effects").

There are normally two cases where this strategy does not apply:

The icon from the png_default sub-directory is shown when in the model structure view. This is because the model structure always displays its icons in the same set size of 16x16 pixels and it is considerably quicker to load a PNG as opposed to an XAML file.
The icon from the png_large sub-directory is shown when displaying icons in the diagram editor's gallery. This is because, unlike with the diagram itself, the gallery cannot be scaled to size and it is considerably quicker to load a PNG as opposed to an XAML file. Only if no icon file with the name you are searching for is found is the icon looked for in the png_default sub-directory.

Known Effects

It may be necessary to reduce the monitor's color depth for older computer systems if you have a higher screen resolution. It may be the case that the color of some Bitmap icons is not true, as the total color value of all icons to be displayed is greater than the colors which can be displayed. You can minimize this effect by basing all Bitmap icons used on the same color palette (cf. above "Tips on How to Proceed" when creating pixel graphics).
If you do not create PNG and XAML graphics, then the BMP file's cyan background is directly shown in the Innovator X client. Individual colors are not replaced in the Innovator X client and all of a graphic's color values are rendered in the original color.
If PNG files are stored in a physical resolution that is not 96 dpi, it may be the case that parts of the icon are shown as cropped.
If the BMP and PNG graphics differentiate from each other optically, then the configuration editor's Select Icon dialog shows a seemingly different icon to that which is actually used in the Innovator X client. This is due to the fact that the BMP and PNG files are identified by their file names and not their file contents.