Styling Displays

EXAMPLE: Changing the size of the button

EXAMPLE: Changing the colour of the button when there are no comments

EXAMPLE: Changing the colour of the button when comments are available

What You Can Change

Style the text, and the alignment.

1. Base Style: Style the text that appears in the data label.

• Font Family
• Font Colour
• Font Size
• Font Weight
• Underline
• Text Case

2. Alignment: Align the Data Label by giving it X and Y co-ordinates, or by using an alignment option, such as Top-Left. In the screenshot, you can see the data label component in relation to the grid cell.

• Alignment
• X Offset
• Y Offset

EXAMPLE: The text uses Sans-Serif font, bold, orange, and underlined

What You Can Change

1. Gauge Radius: Set the gauge size in pixels.

2. Gauge Target Background Colour: Set the background colour for the target segment.

3. Gauge Primary Background Colour: Set the background colour for the primary segments.

4. Gauge Secondary Background Colour: Set the background colour for the secondary segments. When the value is in a secondary alarm state, these segments take on the alarm indicator secondary colour (see 10).

5. Gauge Tertiary Background Colour: Set the background colour for the tertiary segments. When the value is in a tertiary alarm state, these segments take on the alarm indicator tertiary colour (see 10).

6. Value: Set the font properties, text case, and underlining of the value: Value Font Family, Value Font Colour, Value Font Size, Value Font Weight, Value Underline, Value Text Case

7. Units: Set the font properties, text case, and underlining of the units: Units Font Family, Units Font Colour, Units Font Size, Units Font Weight, Units Underline, Units Text Case

8. Label: Set the font properties, text case, and underlining of the label: Label Font Family, Label Font Colour, Label Font Size, Label Font Weight, Label Underline, Label Text Case

Set the style properties to size, position and colours of the data indicator: Data Indicator Size, Data Indicator Y Offset, Data Indicator Background Colour, Data Indicator Foreground Colour

10. Alarm Indicator: The alarm indicator appears if the measured value is in an alarm state (primary, secondary or tertiary). The alarm indicator is a symbol with a fixed shape and styled colour, depending on whether it is primary (an inverted triangle ), secondary (a square ) or tertiary (a triangle ).

Set the style properties to defined the size, position, and the colours for primary , secondary and tertiary alarms of the alarm indicator: Alarm Indicator Indicator Size, Alarm Indicator Indicator Y Offset, Alarm Indicator Indicator Primary Colour, Alarm Indicator Indicator Secondary Colour, Alarm Indicator Indicator Tertiary Colour.
Note: The section and table below describe how these colours also affect the gauge's background colours.

11. Value Indicator: Set the size (width) and colour of the value indicator: Value Indicator Size, Value Indicator Target Colour

12. Limits: Set the style properties define the font properties, position, text case, and underlining of the limits: Limits Font Family, Limits Font Colour, Limits Font Size, Limits Font Weight, Limits Underline, Limits Text Case, Limits Y Offset

Secondary Alarm

Tertiary Alarm

EXAMPLE: Small gauge, with blue background colours

EXAMPLE: Large, grey-on-blue Data Indicator

EXAMPLE: Large Alarm Indicator, coloured dark red for Tertiary

What You Can Change

Style the text, and the alignment.

1. Base Style: Style the hyperlink text.

• Font Family
• Font Colour
• Font Size
• Font Weight
• Underline
• Text Case

2. Alignment: Align the hyperlink by giving it X and Y co-ordinates, or by using an alignment option, such as Top-Left.

• Alignment
• X Offset
• Y Offset

EXAMPLE: Styled base style font, underline and text case

EXAMPLE: Aligned middle left

EXAMPLE: Changing the size of the button

EXAMPLE: Changing the colour and the background colour of the button

EXAMPLE: Changing the alignment

What You Can Change

1. Meter Height: Set the meter height in pixels.

2. Meter Width: Set the meter width in pixels.

3. Meter Target Background Colour: Set the background colour for the target area. When the value is in a secondary alarm state, is bordered by a band in the alarm indicator secondary colour (see 11).

4. Meter Primary Background Colour: Set the background colour for the primary band areas. When the value is in a primary alarm state, these take on the alarm indicator primary colour (see 11). (Note: In the screenshot, the colour is transparent.)

5. Meter Secondary Background Colour: Set the background colour for the secondary band areas.

6. Meter Tertiary Background Colour: Set the background colour for the tertiary band areas. When the value is in a tertiary alarm state, this takes on the alarm indicator tertiary colour (see 11).

7. Value: Set the font properties, text case, and underlining of the value: Value Font Family, Value Font Colour, Value Font Size, Value Font Weight, Value Underline, Value Text Case

8. Units: Set the font properties, text case, and underlining of the units: Units Font Family, Units Font Colour, Units Font Size, Units Font Weight, Units Underline, Units Text Case

9. Label: Set the font properties, text case, and underlining of the label: Label Font Family, Label Font Colour, Label Font Size, Label Font Weight, Label Underline, Label Text Case

10. Data Indicator: The data indicator appears in a square background, as a cross if there is No Data or as an exclamation mark if there is Low Confidence Data .

Set the style properties to size, position and colours of the data indicator: Data Indicator Size, Data Indicator Y Offset, Data Indicator Background Colour, Data Indicator Foreground Colour

11. Alarm Indicator: The alarm indicator appears if the measured value is in an alarm state (primary, secondary or tertiary). The alarm indicator is a symbol with a fixed shape and styled colour, depending on whether it is primary (an inverted triangle ), secondary (a square ) or tertiary (a triangle ).

Set the style properties to defined the size, position, and the colours for primary , secondary and tertiary alarms of the alarm indicator: Alarm Indicator Indicator Size, Alarm Indicator Indicator Y Offset, Alarm Indicator Indicator Primary Colour, Alarm Indicator Indicator Secondary Colour, Alarm Indicator Indicator Tertiary Colour.
Note: The section and table below describe how these colours also affect the meter's background colours.

12. Value Indicator: Set the size (width) and colour of the value indicator: Value Indicator Size, Value Indicator Target Colour

13. Limits: Set the style properties define the font properties, position, text case, and underlining of the limits: Limits Font Family, Limits Font Colour, Limits Font Size, Limits Font Weight, Limits Underline, Limits Text Case, Limits Y Offset

EXAMPLE: Small Level Meter with green background colours

EXAMPLE: Large, grey-on-blue Data Indicator

What You Can Change

1. Base Style: Style the tick values on the meter.

• Tick Value Font Family
• Tick Value Font Colour
• Tick Value Font Size
• Tick Value Font Weight
• Tick Value Underline

2. Measure 1 Colour: Set the colour of the first band of measure.

3. Measure 2 Colour: Set the colour of the second band of measure.

4. Measure 3 Colour: Set the colour of the third band of measure.

5. Measure 4 Colour: Set the colour of the fourth band of measure.

6. Measure 5 Colour: Set the colour of the fifth band of measure.

7. Arc Thickness: Set the width of the meter arc.

8. Needle Colour, Needle Thickness: Set the colour and width of the needle indicating the current value.

9. Tick Colour, Tick Thickness: Set the colour and width of the ticks for the values.

EXAMPLE: Changing the base style

EXAMPLE: Changing the measure colours

EXAMPLE: Changing the needle and ticks

EXAMPLE: Changing the arc and needle thickness

What You Can Change

1. Meter Height: Set the meter height in pixels.

2. Meter Width: Set the meter width in pixels.

3. Meter Target Background Colour: Set the background colour for the target area. When the value is in a secondary alarm state, is bordered by a band in the alarm indicator secondary colour (see 11).

4. Meter Primary Background Colour: Set the background colour for the primary band areas. When the value is in a primary alarm state, these take on the alarm indicator primary colour (see 11). (Note: In the screenshot, the colour is transparent.)

5. Meter Secondary Background Colour: Set the background colour for the secondary band areas.

6. Meter Tertiary Background Colour: Set the background colour for the tertiary band areas. When the value is in a tertiary alarm state, this takes on the alarm indicator tertiary colour (see 11).

7. Value: Set the font properties, text case, and underlining of the value: Value Font Family, Value Font Colour, Value Font Size, Value Font Weight, Value Underline, Value Text Case

8. Units: Set the font properties, text case, and underlining of the units: Units Font Family, Units Font Colour, Units Font Size, Units Font Weight, Units Underline, Units Text Case

9. Label: Set the font properties, text case, and underlining of the label: Label Font Family, Label Font Colour, Label Font Size, Label Font Weight, Label Underline, Label Text Case

10. Data Indicator: The data indicator appears in a square background, as a cross if there is No Data or as an exclamation mark if there is Low Confidence Data .

Set the style properties to size, position and colours of the data indicator: Data Indicator Size, Data Indicator Y Offset, Data Indicator Background Colour, Data Indicator Foreground Colour

11. Alarm Indicator: The alarm indicator appears if the measured value is in an alarm state (primary, secondary or tertiary). The alarm indicator is a symbol with a fixed shape and styled colour, depending on whether it is primary (an inverted triangle ), secondary (a square ) or tertiary (a triangle ).

Set the style properties to defined the size, position, and the colours for primary , secondary and tertiary alarms of the alarm indicator: Alarm Indicator Indicator Size, Alarm Indicator Indicator Y Offset, Alarm Indicator Indicator Primary Colour, Alarm Indicator Indicator Secondary Colour, Alarm Indicator Indicator Tertiary Colour.
Note: The section and table below describe how these colours also affect the meter's background colours.

12. Value Indicator: Set the size (width) and colour of the value indicator: Value Indicator Size, Value Indicator Target Colour

13. Limits: Set the style properties define the font properties, position, text case, and underlining of the limits: Limits Font Family, Limits Font Colour, Limits Font Size, Limits Font Weight, Limits Underline, Limits Text Case, Limits Y Offset

EXAMPLE: Small pressure meter, with green background colours

EXAMPLE: Styled Units and Label

EXAMPLE: Large grey-on-blue data indicator, with a Y Offset

What You Can Change

Style the line. The directions and corners are applied in design time.

Line: Style the line colour and thickness.

• Colour
• Thickness (can be overridden in Studio)
• Line Style (can be overridden in Studio)

EXAMPLE: Two styled simple lines

What You Can Change

With the Status Indicator you can change the size of the icon, as well as its alignment. Note that size and alignment can be overridden in Studio.

1. Base Style: Set the size of the indicator.

• Size

2. Alignment: Set the alignment of the indicator within the cell and the offsets for padding.

• Alignment
• X Offset
• Y Offset

EXAMPLE: Changing the size of the indicator

EXAMPLE: Changing the alignment of the indicator

What You Can Change

With the Status Tile you can change the fonts family, as well as the separate fonts for title, value and description. You can also change the colour that the tile takes on under different conditions.

1. Base Style: Set the font family for all fonts used in the status tile.

• Font Family

2. Under Limit, On Limit, Over Limit, Default: Set the colour of the status tile according to the value in relation to the limit.

• On Limit Colour
• Over Limit Colour
• Under Limit Colour
• Default Colour

3. Title: Set the title font and text case.

• Title Font Size
• Title Font Colour
• Title Font Weight
• Title Font Alignment
• Title Text Case

4. Value: Set the value font and text case.

• Value Font Size
• Value Font Colour
• Value Font Weight
• Value Font Alignment
• Value Text Case

5. Description: Set the description font and text case.

• Description Font Size
• Description Font Colour
• Description Font Weight
• Description Font Alignment
• Description Text Case

EXAMPLE: Changing the font family of the status tile

EXAMPLE: Changing the under limit colour of the status tile

What You Can Change

With the Tank you can change the colour of the tank and the thickness of the tank outline.

1. Tank: Style the outer container of the tank.

• Tank Outline Colour
• Tank Outline Thickness
• Tank Top Colour
• Tank Front Colour

2. Content: Set the colour of the fill.

• Content Front Colour
• Content Top Colour

EXAMPLE: Changing the tank's outline

EXAMPLE: Changing the tank's container

EXAMPLE: Changing the tank's fill

What You Can Change

With the Target Bar you can change the colour of the bar when it is over or under target, and the target line.

1. Under Target: Set the colour of the bar when the value is below the target value.

• Below Target Background Colour

2. Over Target: Set the colour of the bar when the value is above the target value.

• Above Target Background Colour

3. Target Line: Style the line indicating the target.

• Line Colour
• Line Thickness
• Line Style

EXAMPLE: Changing the bar colour for below target

EXAMPLE: Changing the bar colour for above target

EXAMPLE: Changing the Target line

What You Can Change

With the Target Label you can change both the text and label when it is over or under target.

1. Target: Style the text inside the label.

• Target Font Family
• Target Font Size
• Target Font Weight
• Target Underline
• Target Alignment
• Target Text Case
• Target Separation (distance between the value/units and the label)
• Target Horizontal Padding (padding within the label)

2. Good Target, Bad Target: Set the colour of the text and label when the value is above and below the target value.

• Good Target Background Colour
• Good Target Font Colour
• Bad Target Background Colour
• Bad Target Font Colour

3. Actual: Style the text representing the actual value.

• Actual Font Family
• Actual Font Colour
• Actual Font Size
• Actual Font Weight
• Actual Underline
• Actual Alignment
• Actual Text Case

4. Units: Style the text representing the units of measure.

• Units Font Family
• Units Font Colour
• Units Font Size
• Units Font Weight
• Units Underline
• Units Alignment
• Units Text Case

5. Alignment: Set the alignment of the Target Label within the cell and the offsets for padding.

• Alignment
• X Offset
• Y Offset

EXAMPLE: Changing the text inside the label, with generous horizontal padding but no separation between the label and units

EXAMPLE: Changing the colours of the label and label text for above and below target

EXAMPLE: Changing the Actual text

EXAMPLE: Changing the Units text

What You Can Change

With the Target Variance Bar you can change the colour of the bar when it is over or under target, and the target line.

1. Above Target Background Colour: Set the colour of the bar when the value is above the target value.

2. Above Target Tooltip Colour: Set the colour of the tooltip when the value is above the target value.

3. Below Target Background Colour: Set the colour of the bar when the value is below the target value.

4. Below Target Tooltip Colour: Set the colour of the tooltip when the value is below the target value.

5. Target Line: Style the line indicating the target.

• Target Line Colour
• Target Line Thickness
• Target Line Style

EXAMPLE: Changing the bar and tooltip colours for below target

EXAMPLE: Changing the bar and tooltip colours for above target

EXAMPLE: Changing the Target line

What You Can Change

1. Meter Height: Set the meter height in pixels.

2. Meter Width: Set the meter width in pixels.

3. Meter Target Background Colour: Set the background colour for the target area. When the value is in a secondary alarm state, is bordered by a band in the alarm indicator secondary colour (see 11).

4. Meter Primary Background Colour: Set the background colour for the primary band areas. When the value is in a primary alarm state, these take on the alarm indicator primary colour (see 11). (Note: In the screenshot, the colour is transparent. )

5. Meter Secondary Background Colour: Set the background colour for the secondary band areas.

6. Meter Tertiary Background Colour: Set the background colour for the tertiary band areas. When the value is in a tertiary alarm state, this takes on the alarm indicator tertiary colour (see 11).

7. Value: Set the font properties, text case, and underlining of the value: Value Font Family, Value Font Colour, Value Font Size, Value Font Weight, Value Underline, Value Text Case

8. Units: Set the font properties, text case, and underlining of the units: Units Font Family, Units Font Colour, Units Font Size, Units Font Weight, Units Underline, Units Text Case

9. Label: Set the font properties, text case, and underlining of the label: Label Font Family, Label Font Colour, Label Font Size, Label Font Weight, Label Underline, Label Text Case

10. Data Indicator: The data indicator appears in a square background, as a cross if there is No Data or as an exclamation mark if there is Low Confidence Data .

Set the style properties to size, position and colours of the data indicator: Data Indicator Size, Data Indicator Y Offset, Data Indicator Background Colour, Data Indicator Foreground Colour

11. Alarm Indicator: The alarm indicator appears if the measured value is in an alarm state (primary, secondary or tertiary). The alarm indicator is a symbol with a fixed shape and styled colour, depending on whether it is primary (an inverted triangle ), secondary (a square ) or tertiary (a triangle ).

Set the style properties to defined the size, position, and the colours for primary , secondary and tertiary alarms of the alarm indicator: Alarm Indicator Indicator Size, Alarm Indicator Indicator Y Offset, Alarm Indicator Indicator Primary Colour, Alarm Indicator Indicator Secondary Colour, Alarm Indicator Indicator Tertiary Colour.
Note: The section and table below describe how these colours also affect the meter's background colours.

12. Value Indicator: Set the size (width) and colour of the value indicator: Value Indicator Size, Value Indicator Target Colour

13. Limits: Set the style properties define the font properties, position, text case, and underlining of the limits: Limits Font Family, Limits Font Colour, Limits Font Size, Limits Font Weight, Limits Underline, Limits Text Case, Limits Y Offset

EXAMPLE: Small temperature meter, with green background colours

EXAMPLE: Large Alarm Indicator, coloured orange for Primary

What You Can Change

Style the text, and the alignment.

1. Base Style: Style the text that appears in the text label.

• Font Family
• Font Colour
• Font Size
• Font Weight
• Underline
• Text Case
• Text Label Bottom Border Colour
• Text Label Bottom Border Size
• Text Label Bottom Border Style
• Writing Mode
• Text Orientation

2. Alignment: Align the Text Label by giving it X and Y co-ordinates, or by using an alignment option, such as Top-Left. In the screenshot, you can see the text label component in relation to the grid cell.

• Alignment
• X Offset
• Y Offset

EXAMPLE: Styling the text and bottom border (note that the bottom border is on the component border)

What You Can Change

With the Wind Vane, you can change the colours of the dial and zones, and style the text.

1. Dial Border Colour: Change the colour of the outline of the dial. By default, this is grey.

2. Dial Background Colour: Change the colour of the background of the dial. By default, this is transparent.

3. Needle Colour: Change the colour of the needle and the min/max/average semi-circle. By default, this is blue.

4. Warning Colours: Change the colour of the Warning Zone. By default, this is light grey when inactive and yellow when active.

• Warning Colour
• Warning Inactive Colour

5. Danger Colours: Change the colour of the Danger Zone. By default, this is dark grey when inactive and red when active.

• Danger Colour
• Danger Inactive Colour

6. Font: Change the colour of the text indicating North.

• Font Colour
• Font Size
• Label Font

EXAMPLE: Styling the dial border and background colours

EXAMPLE: Styling the needle and semi-circle colours

EXAMPLE: Styling the warning colours

EXAMPLE: Styling the danger colours

EXAMPLE: Styling the text