Customizing various aspects of LEDs

Programmers documentation > Styling > Customizing shelves and cards > Customizing various aspects of LEDs

Customizing LED types

In JViews TGO, the LED type attribute determines how the object base is represented. Each LED type is associated with a specific base renderer that is in charge of drawing the object according to its type and state information.

In JViews TGO, you can customize the base representation of LED objects either by using an implementation of a predefined base renderer, such as IltLedImageBaseRendererFactory or IltLedSVGBaseRendererFactory, or by defining a new implementation of IltLedBaseRenderer. The principle to create a new IltLedBaseRenderer is the same as to create a new IltNEBaseRenderer.

For details, refer to Extending the class IltNEBaseRenderer.

How to create and register an LED type (using the API)

IltLed.Type MyType = new IltLed.Type("MyType");

IltSettings.SetValue("Led.Type.MyType.Renderer",

new IltBaseRendererFactory() {

public IltBaseRenderer createValue() {

return new MyLedTypeBaseRenderer();

}

});

How to create and register an LED type (using CSS)

You can create new LED types by using global CSS settings as shown in the following code sample.

setting."ilog.tgo.model.IltLed"{

types[0]: @+ledType0;

}

Subobject#ledType0 {

}

For more information, see Using global settings.

How to create a new LED type using only one image

To create a new LED type using a single image:

1. Create a new type of LED with the following code:

IltLed.Type myNewType = new IltLed.Type("MyType");

2. Create the image base renderer factory corresponding to the new LED type.

IltLedImageBaseRendererFactory factory = new

IltLedImageBaseRendererFactory(image);

3. You must indicate to JViews TGO that this factory should be used to draw this type of LED. This is done through the mapping method SetValue, as follows:

IltSettings.SetValue("Led.Type.MyType.Renderer", factory);

To illustrate the creation of a new LED type from a single image, suppose you want to create an LED type based on the following image, which is a GIF image with transparency:

The following code illustrates a static method that creates a new LED type. It also shows the mapping between the type and the factory.

// Create the new LED type

IltLed.Type batteryType = new IltLed.Type("Battery");

// Retrieve the image and create the base renderer factory

Image img =

IltSystem.GetDefaultContext().getImageRepository().getImage("battery.png");

IltLedImageBaseRendererFactory factor = new

IltLedImageBaseRendererFactory(img);

// Associate the new LED type with the image base renderer factory

IltSettings.SetValue("Led.Type.Battery.Renderer", factory);

For details about how to create image base renderers, refer to Creating network element types from images and customizing them.

Once the LED type has been created, you can start to instantiate LED objects as follows:

IltLed led = new IltLed("new", batteryType);

How to create a new LED type using two images

JViews TGO offers a way of creating new LED types based on two images. This process, known as TwoImagesBaseRenderer, allows you to create very detailed LEDs, where a specific image area ““glows””, while the other areas remain unchanged.

The image base renderer gets two images and compares them pixel by pixel, identifying the differences between them. The difference defines the ““glowing”” area of the LED, or the area where the color changes.

NOTE 	To use the TwoImagesBaseRenderer process, the images must have the same size and they should differ by at least one pixel.

Although the processes of creating a new LED type based on one image or on two images are similar, the concepts behind the two processes are quite different. In the case of a one-image LED type, a color filter is applied to the whole image when the LED color is set; in the case of a two-image LED type, the filter is applied only to the region that differs when the two images are compared.

To create a new LED type using two images:

1. Create a new type of LED with the following code:

IltLed.Type myNewType = new IltLed.Type("MyType");

2. Create the image base renderer factory corresponding to the new LED type.

IltLedImageBaseRendererFactory factory = new

IltLedImageBaseRendererFactory(image_off, image_on);

3. You must indicate to JViews TGO that this factory should be used to draw this type of LED. This is done through the mapping method SetValue, as follows:

IltSettings.SetValue("Led.Type.MyType.Renderer", factory);

To illustrate the TwoImagesBaseRenderer process, imagine you want to create an LED representing a black area with a glowing trashcan. Only the trashcan and its frame are supposed to glow, the rest of the image must remain unchanged.

Two-image LED

The following code defines a static method to create the new LED type from two images.

/**

* Creates the new led type using the

* "trash_on.png" and "trash_off.png"

* png images.

String fileOn = "trash_on.png";

String fileOff = "trash_off.png";

// create the new type that will be associated with the

// given images

IltLed.Type theType = new IltLed.Type("TrashCan");

try {

IlpImageRepository repository =

IltSystem.GetDefaultContext().getImageRepository();

Image imgOn = repository.getImage(fileOn);

Image imgOff = repository.getImage(fileOff);

// then map the factory created using the images with the new type

IltLedImageBaseRendererFactory factory =

new IltLedImageBaseRendererFactory(imgOff, imgOn);

IltSettings.SetValue("Led.Type.TrashCan.Renderer", factory);

// Note: the numerical values above have been adjusted

// using the imagecolortuner application provided with

// JTGO

} catch (Exception ex) {

logger.log("Error while creating TrashCan LED type.");

}

With the method defined above, you can instantiate an LED of the new type by coding:

IltLed newLedType = new IltLed("new", theType);

How to customize an LED type (using CSS)

You can customize the renderer using global CSS settings. To do so, you need to specify the full path to the object to be customized, as well as the value of its name attribute in order to match the right type of object in the system. The CSS property to customize here is renderer. In the following example, the name of the renderer factory class that is included in the search path is MyLedRendererFactory.

setting."ilog.tgo.model.IltLed.Type"[name="MyType"] {

renderer: @+ledRendererFactory;

}

Subobject#ledRendererFactory {

}

Customizing LED names

By default, LED names are not visible in the network and equipment components. You can modify this behavior by setting the property labelVisible. All other label properties are also applicable to IltLED instances.

For a complete list of properties that apply to the LED name representation, refer to Customizing the label of a business object for a complete list of properties that apply to the LED name representation.

How to make a LED label visible

object."ilog.tgo.model.IltLed" {

labelVisible: true;

}

Customizing LED tiny types

As with network elements, the tiny representation of LEDs is a reduced form of the symbolic representation. Therefore, it is not possible to create a tiny representation that is different from the symbolic representation of the object.

Customizing LED states and alarms

LEDs do NOT display state information. The only pieces of information that can affect their appearance are alarms, which are by default mapped to the foreground color of the object base.

The properties listed in the following table are available to customize the representation of LEDs based on alarm information.

CSS properties for LED alarms
Property Name	Type	Default Value	Description
alarmBorderVisible	boolean	false	Denotes whether the alarm border is displayed or not around the object base.
alarmColorVisible	boolean	true	Denotes whether the alarm color is displayed or not in the object base. If this value is set to false, the foreground color of the object base does not change when new alarms are set in the object.

How to customize LED states and alarms

The following CSS code shows how you can change the predefined LED representation to hide the alarm border when alarms are displayed.

object."ilog.tgo.model.IltLed" {

alarmBorderVisible: false;

}

You can customize the foreground color of the LED based on your own model attributes or using other state information present in the LED.

The following CSS code is part of an application is provided as part of the JViews TGO demonstration software at <installdir> /samples/equipment/imageRenderer.

In this code, the color of the LED is defined by the SNMP primary state.

object."ilog.tgo.model.IltLed" {

foreground: lightGrey;

}

object."ilog.tgo.model.IltLed"["objectState.SNMP.State"=Up] {

foreground: green;

}

object."ilog.tgo.model.IltLed"["objectState.SNMP.State"=Failed] {

foreground: yellow;

}