Customizing Link Representations

Styling > Customizing Links > Customizing Link Representations

Customizing Link Representations

This section provides details about the CSS properties that you can use to customize the representation of links. Some properties are mapped, which means that they are computed on the basis of the state and alarm information set in the object (column Set).

The properties can be divided in three categories:

Properties applying to the link base
Properties applying to the arrows on link base elements
Properties applying to the inner line of link base elements

Table 5.1 CSS Properties Applying to the Link Base

Property Name	Type	Set	Default Value	Description
`background`	`Color`	Yes	Transparent (`null`)	Specifies the background color; if this value is `null`, it is interpreted as a transparent color
`foreground`	`Color`	Yes	28% gray in the `IltObject` class style	Specifies the foreground color of the base.
`borderColor`	`Color`	Yes	10% gray	Specifies the color of the border lines of the linear base.
`borderColor2`	`Color`	Yes	60% gray	Specifies the color of the background of the border lines. It is used only if the line style is not solid.
`borderWidth`	`Float`	Yes	1 pixel	Determines the width of each border. If the `borderWidth` property is zero (0), no border line will be drawn.
`borderLineStyle`	`float[]`	Yes	`null` (Solid)	Stores the line style of the border lines.
`reliefBorders`	`Boolean`	Yes	`true`	Discriminates between two identical border lines (`false` value) and two differently colored borders to produce a relief effect.
`lineStyle`	`float[]`	Yes	`null` (Solid)	Defines the style of the linear base.
`lineWidth`	`Float`	Yes	`5f`	Defines the width of the center line of the base in the case of a linear base.
`forcedWidth`	`Float`	No	0	If the value of this property is not zero, the width of the center line is augmented or diminished so that the total width equals the width stored in `forcedWidth`.

Table 5.2 CSS Properties Applying to Arrows on Link Base Elements

Property Name	Type	Set	Default Value	Description
`hasFromArrow` `hasToArrow`	`boolean`	Yes	false	These two properties determine whether there is an arrow or not at the beginning and end of the link
`fromArrowSize` `toArrowSize`	`float`	No	8 pixels	Define the length of the arrow at the beginning and end of the link
`fromArrowColor` `toArrowColor`	`Color`	Yes	28% gray	Define the color of the center of the arrow, if the arrow has a border, or the whole arrow, if the arrow has no border
`fromArrowReliefBorders` `toArrowReliefBorders`	`boolean`	Yes	`true`	Gives a relief effect to the arrow border
`fromArrowBorderColor` `toArrowBorderColor`	`Color`	Yes	10% gray	Defines the color of the arrow border
`fromArrowBorderColor2` `toArrowBorderColor2`	`Color`	Yes	60% gray	If `FromArrowReliefBorders` (or `ToArrowReliefBorders`) is `true` , this property defines the dark color of the relief effect

Table 5.3 CSS Properties Applying to the Inner Line of Link Base Elements

Property Name	Type	Set	Default Value	Description
`innerLineWidth`	`float[]`	Yes	`null` (Solid)	Denotes the width of the center line of the inner part of the link base, if any.
`innerBorderWidth`	`float`	Yes	0	Defines the width of the border line of the inner part of the link base, if any.
`innerLineStyle`	`float[]`	Yes	`Solid`	Defines the style of the inner line of the link base, if any
`innerForeground`	`Color`	Yes	28% gray	Defines the foreground color of the inner line of the link base, if any
`innerBackground`	`Color`	Yes	transparent (`null`)	Defines the background color of the inner line of the link base, if any
`innerReliefBorders`	`boolean`	Yes	`true`	Discriminates between two identical border lines (`false` value) and two differently colored borders to produce a relief effect for the inner line, if any
`innerBorderLineStyle`	`float[]`	Yes	`Solid`	Stores the line style of the border lines of the inner line, if any
`innerBorderColor`	`Color`	Yes	10% gray	Specifies the color of the border lines of the inner line, if any
`innerBorderColor2`	`Color`	Yes	60% gray	Specifies the color of the background of the border lines of the inner line, if any. It is used only if the line style is not solid.

Note

The inner line set of properties apply to links that use the IltBiSONET object state. You can also customize other links with an inner line.

Changing the Representation of Individual Links

By default, the representation of the base of a link is determined by its base style, which is itself calculated from the state of the link.

You might want to define specific link representations, regardless of the base styles managed by JViews TGO (when you do not use states, for example). In this case, you can change the representation of the link using cascading style sheets.

The following example shows an extract of a CSS file which changes the representation of a given link. Note that to make this possible, you must use the object state IltAlarmObjectState, IltTrapObjectState, or no object state at all for this specific link, since using another state system would force the appearance of the link base.

How to Change the Graphic Representation of a Link

#myLink {
  centerWidth: 6;
  foreground: blue;
  background: '';
  lineStyle: "3.000001, 1.000001";
  borderWidth: 3;
  borderColor: yellow;
  borderColor2: blue;
  reliefBorders: false;
  borderLineStyle: Dot;
}

See How to Load a CSS File in a Network Component in the Graphic Components documentation for details on how to load a configuration like this one in a network component.

The link is represented as a hatched central line with a blue background color and two identical border lines hatched in yellow on a transparent background, as shown below:

Figure 5.2 Customizing a Link Representation

Changing the Representation of Links Based on States and Alarms

For details about how to customize the links that are based on object and alarm states, please refer to Customizing the Object Representation Based on States.

PREVIOUS NEXT