Detailed Description

The Vertical Bar is a graphical representation of a value as a filled rectangle.

To show a CDP object/property value, enter the path in the cdpRouting property.

Some basic properties and styling is required to use the Bar widget. The value range, i.e. the minimum and maximum value of the bar must be set using the properties minValue and maxValue.

The following properties are the most important when styling a Bar widget:

It is possible to add color on either side of the filled rectangle showing the value. This is typically used to visually show normal operation, warning, critical and error range. The property alarmShow enables the range colors. Four different ranges are supported, NormalColor, WarningColor, WarningHighColor, ErrorColor. The ranges are set using the valueMin and valueMax for each of the ranges.

Default is to show the same color on both sides. To show different colors on the right side or below, use the property named alarmIndicatorRight. The min/max properties that ends with Right, set the minimum and maximum values for the different color ranges on that side.

The color ranges can also be set dynamically during runtime. It is only the maximum value in the color range that can be dynamically changed. Use the properties named, cdpValueMax...Routing and insert the path of the CDP object/property that is to control the respective maximum value.

All widgets support controlling any class property of string or numeric types using routing. When there is no routing property available for a certain feature, we can add it using a Dynamic Property. For more information about this, see the Design Mode Manual regarding Dynamic Routing.

Styling by SVG

Use the svgFile property to style the widget using a svg file. Styling by svg enables switching between different themes in runtime (as long as the files are placed at identical locations within theme directories).

Main element structure

The following tree view shows the svg structure that can be used on the CDPBaseBar.

svg
└─── Layer1
      ├─── cdpTicksColor  (text)
      ├─── cdpTicksNumber (text)
      ├─── cdpBarBack     (element group or rect/path)
      ├─── cdpBorderMarginTopLeft     (transparent rect/path)
      ├─── cdpBorderMarginBottomRight (transparent rect/path)
      └─── cdpBarFill     (element group or rect/path)
           ├─── < Path >  (transparent rect/path)
           └─── < Group > (background graphics)

The following table explains the named elements in more detail.

Style element structure

The bar supports the following style structure.

svg
├─── Layer1
│     └─── ...                (see previous section)
└─── Styles
      ├─── cdpBarBackStyleX   (element group or rect/path)
      └─── cdpBarFillStyleX   (element group or rect/path)
            ├─── < Path >     (transparent rect/path)
            └─── < Group >    (background graphics)