skip to main content
TGO > Programmers documentation > Styling > Customizing groups > Customizing group representations
 
Customizing group representations
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 into three categories:
*Polygonal group properties
*Rectangular group properties
*Linear group properties
Polygonal group properties
The following properties are used to draw the interior of a polygonal group:
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.
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 symmetrically 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:
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.
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:
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.
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;
}
Copyright © 2018, Rogue Wave Software, Inc. All Rights Reserved.