Customizing Network Element Types From Images

INDEX PREVIOUS NEXT

JViews TGO provides a base renderer factory class, IltNEImageBaseRendererFactory, that simply requires an image from which it will automatically compute all the representations that a network element can have according to the state it is in (out of service, in service carrying traffic, in service carrying no traffic, or not installed) or the alarms it raises. See States.

0. Create a new type of network element with the following code:

IltNetworkElement.Type myNewType =

          new IltNetworkElement.Type(YOUR_NEW_TYPE_NAME); 

0. Create the image corresponding to the base style Carrying Traffic without any alarm and instantiate an IltNEImageBaseRendererFactory using this image:

IltNEImageBaseRendererFactory factory = new IltNEImageBaseRendererFactory(image, YOUR_IMAGE_PARAMETERS); 

0. Map the factory with the new type using IltSettings.SetValue:

IltSettings.SetValue("NetworkElement.Type.YOUR_NEW_TYPE_NAME.Renderer",factory); 

You can also create new network element types by using global CSS settings (see Using Global Settings in Chapter 2, Using Cascading Style Sheets for more information):

setting."ilog.tgo.model.IltNetworkElement"{
  types[0]: @+neType0;
}
Subobject#neType0 {
  class: 'ilog.tgo.model.IltNetworkElement.Type'; 
  name: "YOUR_NEW_TYPE_NAME";
}

setting."ilog.tgo.model.IltNetworkElement.Type"[name=YOUR_NEW_TYPE_NAME] { 
   renderer: @+neRendererFactory0;
}
Subobject#neRendererFactory0 {
   class: 'MyNERendererFactory';
}

To define this new network element representation, all you have to do is instantiate an IltNEImageBaseRendererFactory and provide the above bitmap image as an argument to its constructor. JViews TGO automatically computes the various representations that this network element can have according to its associated state and alarms.

The IltNEImageBaseRendererFactory has three constructors:

• The first constructor has four arguments and enables you to customize the way the different representations are computed.
The first parameter is of type java.awt.Image. It is the original image used to compute all other representations.
The first and the second int are thresholds indicating which part of the original image should be considered as details and drawn in the dark color. The third int is the gray level that should be mapped to the normal alarm color.
• The second constructor has the same parameters as the first one and an additional boolean parameter that indicates whether an additional dotted border should be drawn around the base.
• The third constructor has only one argument, which is the java.awt.Image that should be used to compute the different representations of the new type. It calls the constructor with four arguments, with the image and 200 as the threshold for bright colors, 50 as the threshold for dark colors, and 128 as the gray level to be mapped to the normal alarm color.

Figure 3.6 presents the four base styles (rows) with their various representations corresponding to alarms of different severity and loss of connectivity (columns).

0. Create a new type of network element
Using the API:

IltNetworkElement.Type myNewType = new IltNetworkElement.Type(YOUR_NEW_TYPE_NAME); 

setting."ilog.tgo.model.IltNetworkElement" {

   types[0]: @+neType0;

}

Subobject#neType0 {

   class: 'ilog.tgo.model.IltNetworkElement.Type';

   name: YOUR_NEW_TYPE_NAME;

}

0. Map an IltNEDirectImageBaseRendererFactory to the new type
Using the API IltSettings.SetValue:

IltSettings.SetValue("NetworkElement.Type.YOUR_NEW_TYPE_NAME.Renderer", new IltNEDirectImageBaseRendererFactory()); 

setting."ilog.tgo.model.IltNetworkElement.Type"[name=YOUR_NEW_TYPE_NAME] {

   renderer: @+neRendererFactory;

}

Subobject#neRendererFactory {

   class: 'ilog.tgo.graphic.renderer.IltNEDirectImageBaseRendererFactory';

}

0. Define an image and an alarm color or gray-level parameter in CSS for each required base style

object."ilog.tgo.model.IltNetworkElement"["type"=YOUR_NEW_TYPE_NAME]["objectState.Bellcore.State"=EnabledActive] {

  sourceImage: '@|image("newType_enabledActive.png")';

  alarmColorLevel: 128;

}

object."ilog.tgo.model.IltNetworkElement"["type"=YOUR_NEW_TYPE_NAME]["objectState.Bellcore.State"=DisabledActive] {

  sourceImage: '@|image("newType_disabledActive.png")';

  alarmColorLevel: 140;

}

• Carrying Traffic with alarms: A color scale corresponding to the alarm color is applied to the original image. This color scale uses three colors: a bright alarm color, a normal alarm color, and a dark alarm color.
For example, for a major alarm JViews TGO uses the colors bright red, red, and dark red. The color scale is applied to the original image by first converting it to a normalized grayscale image (that is, gray levels in the range 0..255). Then, the normalized grayscale image is colored by mapping each gray level to a color level. The brighter gray is mapped to the bright alarm color, the darker gray is mapped to the dark alarm color, and the gray level corresponding to the third integer in the factory constructor is mapped to the normal alarm color (if this integer is not explicitly given, the default value used is 128). Any other gray level different from the brighter one, the darker one, or the one given in the factory constructor is mapped to the appropriate color in a continuous manner.

• No Traffic (with or without alarms): The original image, which is supposed to be a relief image (according to the JViews TGO look-and-feel), is transformed to a flat image. The flat image is composed of only two colors: in the absence of alarms, one gray and one darker gray, otherwise one alarm color and one dark alarm color. Using only two colors ensures a flat visual aspect. To follow the JViews TGO look-and-feel, the whole object should be represented in the normal color with its border in the dark color, plus possibly some details of the inside of the object also in the dark color. For example, in Figure 3.9 we can see that the border is in the dark color as well as the outline of the small screen and the receiver of the phone. To indicate which details of the original image you want in the dark color and which you do not, you must use the first two integers of the factory constructor. The first integer indicates a threshold above which the bright colors of the original image should be considered as details and drawn in the dark color; if this integer is not explicitly given, the default value used will be 200. For example, Figure 3.9 shows examples where the threshold assumed is 200 (in the range 0..255). In this way, the left border of the receiver and the lower right border of the screen are drawn in the dark color. The second integer is a threshold indicating which of the dark colors of the original image should be considered as details and also drawn in the dark color; if this integer is not explicitly provided, the default value will be 50. For example, in Figure 3.9 we indicate that this threshold is 11 (in the range 0..255). This causes the lower right border of the receiver and the upper left border of the screen to be drawn in the dark color.

• Out of Service and Not Installed (with or without alarms): According to the ILOG JTGO look-and-feel, the object should be represented with only two colors, a dashed border and a pattern inside, but no other details. JViews TGO uses the transparency, if any, to determine the border of the image. When there is no transparency, the rectangle of the image is considered to be the border. Then, the interior is filled with the appropriate pattern and the border is drawn as a dashed line. JViews TGO does not need any extra parameters (threshold or gray level as mentioned above) to compute these representations correctly.

Note that JViews TGO provides the imagecolortuner application to help you find the best values for the thresholds and the gray level. For details, see The imagecolortuner Application.

For the IltNEImageBaseRendererFactory to properly process the supported image types (GIF, PNG and JPG), the only constraint on the image itself is that the number of colors, C, be as follows:

The imagecolortuner application can be found in <installdir>/bin where <installdir> is the directory where you have installed JViews TGO. This utility enables you to find the best values for the parameters of IltNEImageBaseRendererFactory quickly and easily.

0. Load your image using the File>Load Image menu item.
1. Customize the Carrying Traffic with alarm representations. You have to choose the gray level that will be mapped to the normal alarm color. (For details see Customizing Network Element Types From Images.) To do so, you can either display the tab called Row 1 and use the slider or click in the zoomed view on a pixel that has the color you want to be mapped to the normal alarm color.
2. Customize the No Traffic representation. You have to indicate which details of your original image should have the dark color. (For details see Customizing Network Element Types From Images.) To do so, display the tab called Row 2 and adjust the two sliders. The first slider adjusts the threshold for bright colors: colors of the original image brighter than this threshold will be displayed in the appropriate dark color depending on the state and alarms. The second slider adjusts the threshold for dark colors: colors of the original image darker than this threshold will also be displayed in the appropriate dark color depending on the state and alarms.
3. Display the sample source code using the File>View Source menu item. The source code needed to create your new type as it is currently represented on screen is displayed. The factory constructor contains the appropriate values. You have to note or copy these values or the entire code and paste it into your JViews TGO application to create your new type.