Customizing Group Representations

Styling > Customizing Groups > Customizing Group Representations

Customizing Group Representations

This section provides details about the CSS properties that you can use to customize the representation of groups. 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:

Polygonal Group Properties

The following properties are used to draw the interior of a polygonal group:

Table 6.1 CSS Properties for the Interior of Polygonal Groups

Property Name	Type	Set	Default Value	Description
`foreground`	`Color`	Yes, if `baseStyleEnabled` is true No, otherwise	28% grey	Denotes the foreground color of the base of an object.
`background`	`Color`	Yes, if `baseStyleEnabled` is true No, otherwise	`null`	Denotes the background color of the base of an object.
`fillStyle`	`ilog.util.IlFillStyle`	No	`IlFillStyle.PATTERN`	Denotes the style used to fill the base. Possible values are: `IlFillStyle.NO_FILL` `IlFillStyle.SOLID_COLOR` `IlFillStyle.LINEAR_GRADIENT` `IlFillStyle.RADIAL_GRADIENT` `IlFillStyle.TEXTURE` `IlFillStyle.PATTERN`
`fillPattern`	`IlPattern`	Yes, if `baseStyleEnabled` is true No, otherwise	`Dots`	Denotes the pattern used to fill the base of an object. This property is only used if `fillStyle` is set to `IlFillStyle.PATTERN`. Possible values are: `Dots` `GroupFilling` `ThinHatching`
`fillTexture`	`Image`	No	`null`	Denotes the texture used to fill the base of an object. This property is only used if `fillStyle` is set to `IlFillStyle.TEXTURE`.
`fillAngle`	`float`	No	`0`	Denotes the angle (in degrees) of the gradient used to fill the base of an object. This property is only used if `fillStyle` is set to `IlFillStyle.RADIAL_GRADIENT` or `IlFillStyle.LINEAR_GRADIENT`.
`fillStart`	`float`	No	`0`	Denotes the position where the gradient of an object starts, that is, where the color is the one defined by the property `foreground`. This property is only used if `fillStyle` is set to `IlFillStyle.RADIA_GRADIENT` or `IlFillStyle.LINEAR_GRADIENT`.
`fillEnd`	`float`	No	`100`	Denotes the position where the gradient of an object ends, that is, where the color is the one defined by the property `background`. This property is only used if `fillStyle` is set to `IlFillStyle.RADIA_GRADIENT` or `IlFillStyle.LINEAR_GRADIENT`.

The following properties are used to draw the outline of a polygonal group. A border is displayed around the outline of the group.

Table 6.2 CSS Properties for the Outline of Polygonal Groups

Property Name	Type	Set	Default Value	Description
`lineStyle`	`float[]`	Yes, if `baseStyleEnabled` is true No, otherwise	`null` (Solid)	Denotes the line style used to display the outline of a polygonal group.
`outlineVisible`	`boolean`	No	`true`	Denotes whether the outline is visible or not.
`outlineColor`	`Color`	Yes	grey, or the alarm color, if any.	Denotes the color of the outline.
`outlineInside`	`boolean`	No	`false`	Denotes whether the outline of the polygon is drawn inside the shape or symetrically on either side of the shape edge.
`outlineOffset`	`IlpPoint`	No	`null`	Denotes the distance between the edge of the shape and the outline of the polygon, when `outlineInside` is set to `true`.
`outlineWidth`	`float`	No	`8`	Denotes the width of the polygon outline.
`reliefThickness`	`float`	No	`1`	Denotes the width of the relief on the polygon outline.
`borderColor`	`Color`	Yes, if `baseStyleEnabled` is true No, otherwise	10% grey	Denotes the primary color of the base border.
`borderColor2`	`Color`	Yes, if `baseStyleEnabled` is true No, otherwise	60% grey	Denotes the secondary color of the base border.
`borderWidth`	`float`	Yes, if `baseStyleEnabled` is true No, otherwise	1	Denotes the width of the base border.
`reliefBorders`	`boolean`	Yes, if `baseStyleEnabled` is true No, otherwise	true	Denotes whether the base border is drawn in relief or not.
`borderLineStyle`	`float[]`	Yes, if `baseStyleEnabled` is true No, otherwise	`null` (Solid)	Denotes the line style used to draw the base border.

How to Customize the Representation of Polygonal Groups

The following CSS extract shows how to customize the graphic representation of a polygonal group to display an empty group with a thinner outline:

object."ilog.tgo.model.IltPolyGroup" {
  fillStyle: NO_FILL;
  outlineWidth: 4.0;
  outlineInside: false;
}

Rectangular Group Properties

The following properties are used to draw the interior of a rectangular group:

Table 6.3 CSS Properties for the Interior of Rectangular Groups

Property Name	Type	Set	Default Value	Description
`foreground`	`Color`	Yes, if `baseStyleEnabled` is true No, otherwise	28% grey	Denotes the foreground color of the base of an object.
`background`	`Color`	Yes, if `baseStyleEnabled` is true No, otherwise	`null`	Denotes the background color of the base of an object.
`fillStyle`	`ilog.util.IlFillStyle`	No	`IlFillStyle.PATTERN`	Denotes the style used to fill the base of an object. Possible values are: `IlFillStyle.NO_FILL` `IlFillStyle.SOLID_COLOR` `IlFillStyle.LINEAR_GRADIENT` `IlFillStyle.RADIAL_GRADIENT` `IlFillStyle.TEXTURE` `IlFillStyle.PATTERN`
`fillPattern`	`IlPattern`	Yes, if `baseStyleEnabled` is true No, otherwise	`null` (Solid)	Denotes the pattern used to fill the base of an object. This property is only used if `fillStyle` is set to `IlFillStyle.PATTERN`.
`fillTexture`	`Image`	No	`null`	Denotes the texture used to fill the base of an object. This property is only used if `fillStyle` is set to `IlFillStyle.TEXTURE`.
`fillAngle`	`float`	No	`0`	Denotes the angle (in degrees) of the gradient used to fill the base of an object. This property is only used if `fillStyle` is set to `IlFillStyle.RADIAL_GRADIENT` or `IlFillStyle.LINEAR_GRADIENT`.
`fillStart`	`float`	No	`0`	Denotes the position where the gradient of an object starts, that is, where the color is the one defined by the property `foreground`. This property is only used if `fillStyle` is set to `IlFillStyle.RADIA_GRADIENT` or `IlFillStyle.LINEAR_GRADIENT`.
`fillEnd`	`float`	No	`100`	Denotes the position where the gradient of an object ends, that is, where the color is the one defined by the property `background`. This property is only used if `fillStyle` is set to `IlFillStyle.RADIA_GRADIENT` or `IlFillStyle.LINEAR_GRADIENT`.

The following properties are used to draw the border of a rectangular group.

Table 6.4 CSS Properties for the Border of Rectangular Groups

Property Name	Type	Set	Default Value	Description
`reliefThickness`	`float`	No	`2`	Denotes the width of the base border when the property reliefBorders is `true`.
`borderColor`	`Color`	Yes, if `baseStyleEnabled` is true No, otherwise	10% grey	Denotes the primary color of the base border.
`borderColor2`	`Color`	Yes, if `baseStyleEnabled` is true No, otherwise	60% grey	Denotes the secondary color of the base border.
`borderWidth`	`float`	Yes, if `baseStyleEnabled` is true No, otherwise	1	Denotes the width of the base border when `reliefBorders` is set to `false`.
`reliefBorders`	`boolean`	Yes, if `baseStyleEnabled` is true No, otherwise	true	Denotes whether the base border is drawn in relief or not.
`borderLineStyle`	`float[]`	Yes, if `baseStyleEnabled` is true No, otherwise	`null` (Solid)	Denotes the line style used to draw the base border.
`borderPattern`	IlPattern	Yes, if `baseStyleEnabled` is true No, otherwise	`null`	Denotes the pattern used to draw the base border when the group is in the OOS state.

How to Customize the Representation of Rectangular Groups

The following CSS extract shows how to customize a rectangular group so that its graphic representation is filled with a gradient:

object."ilog.tgo.model.IltRectGroup" {
  fillStyle: LINEAR_GRADIENT;
  background: yellow;
  foreground: blue;
}

Linear Group Properties

The following properties are used to draw the interior of a linear group:

Table 6.5 CSS Properties for the Interior of Linear Groups

Property Name	Type	Set	Default Value	Description
`lineWidth`	`float`	No	`8`	Denotes the width of the linear base.
`foreground`	`Color`	Yes, if `baseStyleEnabled` is true No, otherwise	28% grey	Denotes the foreground color of the base.
`background`	`Color`	Yes, if `baseStyleEnabled` is true No, otherwise	`null`	Denotes the background color of the base.
`lineStyle`	`float[]`	Yes, if `baseStyleEnabled` is true No, otherwise	`null` (Solid)	Denotes the line style used to display a linear group.

The following properties are used to draw the border of a linear group.

Table 6.6 CSS Properties for the Border of Linear Groups

Property Name	Type	Set	Default Value	Description
`reliefThickness`	`float`	No	`2`	Denotes the width of the relief around the linear group.
`borderColor`	`Color`	Yes, if `baseStyleEnabled` is true No, otherwise	10% grey	Denotes the primary color of the base border.
`borderColor2`	`Color`	Yes, if `baseStyleEnabled` is true No, otherwise	60% grey	Denotes the secondary color of the base border.
`borderWidth`	`float`	Yes, if `baseStyleEnabled` is true No, otherwise	1	Denotes the width of the base border when `reliefBorders` is set to `false`.
`reliefBorders`	`boolean`	Yes, if `baseStyleEnabled` is true No, otherwise	true	Denotes whether the base border is drawn in relief or not.
`borderLineStyle`	`float[]`	Yes, if `baseStyleEnabled` is true No, otherwise	`null` (Solid)	Denotes the line style used to draw the base border.

How to Customize the Representation of Linear Groups

The following CSS extract shows how to customize a linear group so that its graphic representation shows a link with a width of 4 pixels in an alternate line style. The linear group is also configured so that it does not display a border around its base.

object."ilog.tgo.model.IltLinearGroup" {
  lineWidth: 4;
  lineStyle: "5,2";
  foreground: blue;
  background: yellow;
  reliefBorders: false;
  borderWidth: 0; 
}

PREVIOUS NEXT