Indicators

Left: Indicator components shown in OIB. Right: Indicator components shown in run mode

Indictors are dynamic components used to display tag values in different ways. These can be generally grouped by how they interpret tag values:

State Indicators show discrete states based on the value of the tag
Number Indicators show numeric values and can scale and round the value of the tag.
Text Indicators show the tag value as a string.

Multistate Indicator

Left: Multistate indicators in OIB showing various states. Right: Same indicators shown in OI run mode.

Property	Values	Description
name	string	Provide a name for the component. This can be helpful when using the "Used Components" tool in the tag editor.
description	string	A space to provide a description of the current component, useful for documenting intent.
geometry	x, y, width, height (ints)	Sets the visible geometry of the component: x and y from top left corner, and width/height. Editing these values can be useful when positioning/sizing finer than grid snap is needed.
hideTag	tag	When tag value is an integer other than zero, the component is not displayed on the screen.
readTag	tag	Tag specifies where to read the data that will be displayed.
foreColor	color	Sets foreground color (usually text).
backcolor	color	Sets background color. Images are allowed to set this to transparent to support images with alpha masks.
rotationTag	tag	Read tag – value defined in degrees the image is rotated around the rotationOrigin point.
offsetEnabled	true, false	Defines if offset property should be taken into account or should be ignored (applicable only for Multi-state indicator – images are placed by default in the center of the component).
offset	x, y (ints)	Two meanings by component: on Image and Multistate Indicator, the x/y distance the image is translated; on Dial, Knob, Fill Slide and Pointer Slide, a numeric value added to the tag value before display (displayed = value x scale + offset).
rotationOrigin	x, y (ints)	Sets rotation point of the component. Values are relative to the top-left of the component (0,0).
rotation	int	Number of degrees the image is rotated around rotationOrigin point. The rotation value will be applied to the component when OI screen is loaded and rotationTag is missing, or before rotationTag value is read from PLC. This property is useful for testing rotated images in OIB during development. Default value is 0.
stateTextWriteTag	tag	Write tag – writes the contents of the current states text to this tag.
stateTextChangedWriteTag	tag	Write tag toggled between 0 and 1 whenever any of the component's read tags change (not only on a state change).
foreBlink	true, false	When true, text will blink between transparent and foreColor.
backBlink	true, false	When true, the background will blink between backColor and blinkColor.
blinkColor	color	Sets the color the background will change to while blinking.
hidden	true, false	When true, the component will not be visible on the screen.
tagValue	int/string	In the state editor for the component, this sets the value of the state. When the tags value equals this value the component will select this state. If no state matches, the Error state will be displayed.
readTagValueLogic	Equal, RangeGreater, RangeGreaterEqual, RangeLesser, RangeLesserEqual	Sets the logic that will be applied against the read tag. To evaluate, OI will build a comparison with the readTag value on the left, the logic type as the comparison, and the tagValue defined in the component on the right (such as a state’s tagValue).
text	text	Sets the text that is displayed on the component.
textSize	int (pixels)	Sets the text size in pixels (clamped to 8-400; default 12).
textBold	true, false	When true, the text will be displayed in heavier type.
borderWidth	int (pixels)	Set the size of the border in pixels. 0 removes the border.
clickThrough	true, false	When true, click/touch events are passed through this element to elements underneath. This can be used to allow portions of an image to be buttons without needing a button to be displayed over that section of image.
image	image	The image that will be displayed. Images are selected from the applications image collection.
monoImage	true, false	When true, converts the image to black and white.
scaledImage	true, false	When true, scales the image to the size of the component. When false, the image is painted 1:1 scale, and any pixels outside the component area are not painted.

Try it in the editor · property and state panels

Multistate indicators are components whose display is determined by the state of their readTag. As the value of the readTag is changed, the state of the Multistate indicator is changed.

The component supports the ability to switch between thousands of states. If the readTag value goes to a state that is not in the list, the Error state will be displayed. These states can be customized using the State editor.

Multistate indicators support displaying text as well as images. Images are displayed by default in the center of the component and can be offset and rotated by using the Offset properties (these are applied to all states equally).

Rotation properties are global for all states - each state cannot be controlled individually.

Rotation only applies to the image, not the text.

Note

If offsetEnabled is true, offset is applied relative to the top left component corner.

Then rotation is applied around the rotationOrigin relative to the top left image (not component) corner.

If offsetEnabled is false, offset is ignored and rotation is applied around rotationOrigin relative to the image center.

To hide a particular state, set that state's hidden value to True.

stateTextWriteTag

A multistate indicator can be used to write text values to a tag through the stateTextWriteTag property. When a tag is set here, the text value of the current state is written to that tag whenever any of the component's read tags change (not only on a state change). This can be an effective way of mapping numeric states to text representations back to a database or the PLC.

State ranges

Note

This feature is available with OI 1.11 Dec 30 2019 and newer.

Ranges of values instead of exact matches to values can be used to decide which state to display by using the "readTagValueLogic" property. This property determines how the readTag value is compared with the state's tagValue:

Equal (=) (default)
RangeGreater (>)
RangeGreaterEqual (>=)
RangeLesser(<)
RangeLesserEqual (<=)

OI will sort the states by tagValue, and then evaluate:

readTag value [Logic] state tagValue

Use the tool below to experiment and see how the different options affect the output.

State:	Color:	tagValue

readTag Value:	Equal	Range Greater	Range Greater Equal	Range Lesser	Range Lesser Equal

Numeric Output

Left: Numeric Output in OIB. Right: Same component shown in OI run mode.

Property	Values	Description
name	string	Provide a name for the component. This can be helpful when using the "Used Components" tool in the tag editor.
description	string	A space to provide a description of the current component, useful for documenting intent.
geometry	x, y, width, height (ints)	Sets the visible geometry of the component: x and y from top left corner, and width/height. Editing these values can be useful when positioning/sizing finer than grid snap is needed.
hideTag	tag	When tag value is an integer other than zero, the component is not displayed on the screen.
readTag	tag	Tag specifies where to read the data that will be displayed.
foreColor	color	Sets foreground color (usually text).
backcolor	color	Sets background color. Images are allowed to set this to transparent to support images with alpha masks.
textSize	int (pixels)	Sets the text size in pixels (clamped to 8-400; default 12).
textBold	true, false	When true, the text will be displayed in heavier type.
borderWidth	int (pixels)	Set the size of the border in pixels. 0 removes the border.
hAlignment	Left, Right, HCenter	Sets how the text is aligned on the component horizontally: left, right, or centered.
vAlignment	Top, Bottom, VCenter	Sets how the text is aligned on the component vertically: top, bottom, or center.
textWrap	NoWrap, WordWrap, WrapAnywhere	Controls line wrapping of displayed text: NoWrap (default), WordWrap (break at word boundaries), or WrapAnywhere (break mid-word when needed).
clickThrough	true, false	When true, click/touch events are passed through this element to elements underneath. This can be used to allow portions of an image to be buttons without needing a button to be displayed over that section of image.
passwordMode	true, false	When true, the value of the readTag is obscured.
transparent	true, false	When true, the background is not painted.
fieldWidth	int	Number of characters used to display the value, clamped to 1-12. When the formatted number does not fit, the entire field is filled with # characters.
decimalPointPosition	int (-1, 0, 1+)	Sets the number of digits that appear to the right of the decimal point. 0 will disable the decimal point, and -1 will attempt to automatically place the decimal based on the value of the number. When decimals are set, number values are rounded to fit, so 1.49 displayed on an input with 0 decimal places will be displayed as 1 and on an input with 1 decimal place will be displayed as 1.5. On inputs, numbers can be input manually on the keypad using more precision than the display shows: an input with 0 decimal places will accept 1.49 as a value and write 1.49 to the tags value but will show 1.
fillWithZeroes	true, false	When true, the number will be prepended with zeros up to fieldWidth.
scale	number	Numeric multiplier applied to the tag value before display: displayed = value x scale + offset (Dial, Knob, Fill Slide, Pointer Slide). Numeric Display and Numeric Input use the equivalent numScale property.
numOffset	number	Offset added to the tag value before it is displayed (displayed value = tag value x numScale + numOffset). Applied together with the numScale property.

Try it in the editor · property and state panels

Numeric outputs display numeric values of data referenced through the readTag.

Numeric outputs support displaying up to twelve characters. Numeric outputs also provide control of the displayed number through the decimalPointPosition, fillWithZeroes, numScale, numOffset, and passwordMode.

Text Output

Left: Text output in OIB. Right: Same component shown in OI run mode.

Property	Values	Description
name	string	Provide a name for the component. This can be helpful when using the "Used Components" tool in the tag editor.
description	string	A space to provide a description of the current component, useful for documenting intent.
geometry	x, y, width, height (ints)	Sets the visible geometry of the component: x and y from top left corner, and width/height. Editing these values can be useful when positioning/sizing finer than grid snap is needed.
hideTag	tag	When tag value is an integer other than zero, the component is not displayed on the screen.
readTag	tag	Tag specifies where to read the data that will be displayed.
foreColor	color	Sets foreground color (usually text).
backcolor	color	Sets background color. Images are allowed to set this to transparent to support images with alpha masks.
textSize	int (pixels)	Sets the text size in pixels (clamped to 8-400; default 12).
textBold	true, false	When true, the text will be displayed in heavier type.
borderWidth	int (pixels)	Set the size of the border in pixels. 0 removes the border.
hAlignment	Left, Right, HCenter	Sets how the text is aligned on the component horizontally: left, right, or centered.
vAlignment	Top, Bottom, VCenter	Sets how the text is aligned on the component vertically: top, bottom, or center.
textWrap	NoWrap, WordWrap, WrapAnywhere	Controls line wrapping of displayed text: NoWrap (default), WordWrap (break at word boundaries), or WrapAnywhere (break mid-word when needed).
clickThrough	true, false	When true, click/touch events are passed through this element to elements underneath. This can be used to allow portions of an image to be buttons without needing a button to be displayed over that section of image.
passwordMode	true, false	When true, the value of the readTag is obscured.
transparent	true, false	When true, the background is not painted.

Try it in the editor · property and state panels

Text outputs display string/character array values of data referenced through the readTag.

Listbox

Left: Listbox in OIB. Right: Same component shown in OI run mode.

Property	Values	Description
name	string	Provide a name for the component. This can be helpful when using the "Used Components" tool in the tag editor.
description	string	A space to provide a description of the current component, useful for documenting intent.
geometry	x, y, width, height (ints)	Sets the visible geometry of the component: x and y from top left corner, and width/height. Editing these values can be useful when positioning/sizing finer than grid snap is needed.
hideTag	tag	When tag value is an integer other than zero, the component is not displayed on the screen.
readTag	tag	Tag specifies where to read the data that will be displayed.
foreColor	color	Sets foreground color (usually text).
backcolor	color	Sets background color. Images are allowed to set this to transparent to support images with alpha masks.
highlightForeColor	color	Sets text color for selected list item.
highlightBackColor	color	Sets background color for selected list item.
textSize	int (pixels)	Sets the text size in pixels (clamped to 8-400; default 12).
textBold	true, false	When true, the text will be displayed in heavier type.
borderWidth	int (pixels)	Set the size of the border in pixels. 0 removes the border.
clickThrough	true, false	When true, click/touch events are passed through this element to elements underneath. This can be used to allow portions of an image to be buttons without needing a button to be displayed over that section of image.
filterInTag	tag	The string value of this tag is used to filter available choices on the component. States whose filterText matches the filterInTag according to the rules in filterMatchingMode will be kept in the list. The comparison is case sensitive.
filterOutTag	tag	Tag used for filtering out list items. States whose filterText matches the filterOutTag value (per filterMatchingMode) will be excluded from the list.
filterMatchingMode	WholeWordsOnly, AnyOccurence	Determines how the filter tag value is matched against each state's filterText. WholeWordsOnly (default) matches the tag value as a whole word within the filterText; AnyOccurence matches any substring occurrence.
tagValue	int/string	In the state editor for the component, this sets the value of the state. When the tags value equals this value the component will select this state. If no state matches, the Error state will be displayed.
text	text	Sets the text that is displayed on the component.
filterText	string	Per-state filter text used with filterInTag/filterOutTag: when a filter tag is set, only states whose filterText matches (per filterMatchingMode) are shown in the list.

Try it in the editor · property and state panels

List boxes are used to simultaneously display a series of states, and to highlight the current state indicated by the readTag.

Listbox options are set using the state editor for the component.

In OI versions 1.14 and newer, the options shown on the input can be filtered using the filterInTag and filterOutTag.

Dial

Left: Dial indicator in OIB. Right: Same component shown in OI run mode.

Property	Values	Description
name	string	Provide a name for the component. This can be helpful when using the "Used Components" tool in the tag editor.
description	string	A space to provide a description of the current component, useful for documenting intent.
geometry	x, y, width, height (ints)	Sets the visible geometry of the component: x and y from top left corner, and width/height. Editing these values can be useful when positioning/sizing finer than grid snap is needed.
hideTag	tag	When tag value is an integer other than zero, the component is not displayed on the screen.
readTag	tag	Tag specifies where to read the data that will be displayed.
backcolor	color	Sets background color. Images are allowed to set this to transparent to support images with alpha masks.
textColor	color	Sets the color of text.
scaleColor	color	Sets the color of the scale (tick marks).
dialColor	color	Sets the color of the center of the dial.
needleColor	color	Sets the color of the value-indicating needle.
scaleBackgroundColor	color	Sets the color of the outer ring of the dial.
rangeMin	int	Sets the minimum value the dial/slide displays.
rangeMax	int	Sets the maximum value the dial/slide displays.
multistate	true, false	When true, some of this component’s properties can be changed based on the state of the readvalue.
readTagValueLogic	Equal, RangeGreater, RangeGreaterEqual, RangeLesser, RangeLesserEqual	Sets the logic that will be applied against the read tag. To evaluate, OI will build a comparison with the readTag value on the left, the logic type as the comparison, and the tagValue defined in the component on the right (such as a state’s tagValue).
labelText	text	Sets the text that is displayed on the dials label.
textSize	int (pixels)	Sets the text size in pixels (clamped to 8-400; default 12).
textBold	true, false	When true, the text will be displayed in heavier type.
clickThrough	true, false	When true, click/touch events are passed through this element to elements underneath. This can be used to allow portions of an image to be buttons without needing a button to be displayed over that section of image.
transparentBackground	true, false	When true, the component does not fill in space around displayed elements.
scale	number	Numeric multiplier applied to the tag value before display: displayed = value x scale + offset (Dial, Knob, Fill Slide, Pointer Slide). Numeric Display and Numeric Input use the equivalent numScale property.
maxMajorTicks	int	Sets the maximum of major tick marks on the displays scale.
maxMinorTicks	int	Sets the maximum of minor tick marks on the displays scale.
rangeMinTag	tag	Defines the rangeMin value of the component from the value of this tag.
rangeMaxTag	tag	Defines the rangeMax value of the component from the value of this tag.

Try it in the editor · property and state panels

Dial indicators display numeric data referenced through the readTag through the use of a radial dial (analogous to a pressure gauge).

Dials support states for several properties. See the notes under Multistate Indicators for State Ranges.

Tick marks and numbers will show the colors they will be in for the calculated state. Other properties will change as the value changes.

Fill Slide

Left: Fill slide in OIB. Right: Same component shown in OI run mode.

Property	Values	Description
name	string	Provide a name for the component. This can be helpful when using the "Used Components" tool in the tag editor.
description	string	A space to provide a description of the current component, useful for documenting intent.
geometry	x, y, width, height (ints)	Sets the visible geometry of the component: x and y from top left corner, and width/height. Editing these values can be useful when positioning/sizing finer than grid snap is needed.
hideTag	tag	When tag value is an integer other than zero, the component is not displayed on the screen.
readTag	tag	Tag specifies where to read the data that will be displayed.
backcolor	color	Sets background color. Images are allowed to set this to transparent to support images with alpha masks.
textColor	color	Sets the color of text.
scaleColor	color	Sets the color of the scale (tick marks).
barColor	color	Sets the color of the value-bar.
rangeMin	int	Sets the minimum value the dial/slide displays.
rangeMax	int	Sets the maximum value the dial/slide displays.
multistate	true, false	When true, some of this component’s properties can be changed based on the state of the readvalue.
readTagValueLogic	Equal, RangeGreater, RangeGreaterEqual, RangeLesser, RangeLesserEqual	Sets the logic that will be applied against the read tag. To evaluate, OI will build a comparison with the readTag value on the left, the logic type as the comparison, and the tagValue defined in the component on the right (such as a state’s tagValue).
textSize	int (pixels)	Sets the text size in pixels (clamped to 8-400; default 12).
textBold	true, false	When true, the text will be displayed in heavier type.
clickThrough	true, false	When true, click/touch events are passed through this element to elements underneath. This can be used to allow portions of an image to be buttons without needing a button to be displayed over that section of image.
scale	number	Numeric multiplier applied to the tag value before display: displayed = value x scale + offset (Dial, Knob, Fill Slide, Pointer Slide). Numeric Display and Numeric Input use the equivalent numScale property.
orientation	Horizontal, Vertical	Sets the orientation of the component between a vertical slide or horizontal slide.
width	int	Sets the size of the slide (width for vertical, height for horizontal). Remaining space within the component is used for the scale.
maxMajorTicks	int	Sets the maximum of major tick marks on the displays scale.
maxMinorTicks	int	Sets the maximum of minor tick marks on the displays scale.
rangeMinTag	tag	Defines the rangeMin value of the component from the value of this tag.
rangeMaxTag	tag	Defines the rangeMax value of the component from the value of this tag.
borderWidth	int (pixels)	Set the size of the border in pixels. 0 removes the border.

Try it in the editor · property and state panels

Fill slides display numeric data referenced through the readTag through the use of a linear bar.