Open Automation Software
Moving Data From Anywhere to Anywhere
1-303-679-0898

HTML Attribute Reference

Text

Sets the text attribute of an element based on the value of a server tag. This is most useful for setting the content of elements like div or anchor. If you need to set the value of an input element (e.g. text input field) use the Value attribute.
attribute: opc-tag-txt
type: Tag
examples:
Simple example of live raw data being added to the text of an HTML element

Example of live data being added to the text of an HTML element with string formatting applied, and a default display of ‘????’ when bad data quality is detected.

Example of both string and numeric formatting applied to limit to 3 decimal places, and a default display of ‘????’ when bad data quality is detected.

Value :

Sets the value attribute of an element based on the value of a server tag. This is most useful for setting input fields like text boxes and buttons.
attribute: opc-tag-val
type: Tag
examples:
Simple example of live raw data being added to the value of an HTML input element

Background:

Sets the background style of the element according to the value and quality of one or more server Tags. This allows you to use a single HTML element to represent the state of multiple server values.
attribute: opc-tag-bkg
type: Tag Group
example:
Using a single boolean tag to set the background of a button element between Green(true) and Red(false) or Yellow(bad data)

Foreground:

Sets the foreground style of the element according to the value and quality of one or more server Tags. This allows you to use a single HTML element to represent the state of multiple server values.
attribute: opc-tag-fg
type: Tag Group
examples:
Using a single boolean tag to set the foreground of a button element between White(true) and Yellow(false) or Red(bad data)

Combining both background and foreground color settings to create a unique style

Border :

Sets the border style of the element according to the value and quality of one or more server Tags. This allows you to use a single HTML element to represent the state of multiple server values.
attribute: opc-tag-brd
type: Tag Group
examples:
Using a single boolean tag to set the border color of a button element between White(true) and Yellow(false) or Red(bad data)

Combining background, foreground, and border color settings to create a unique style

Image Source :

This attribute is designed to be used with an HTML <img> tag. It sets the src attribute of of the image according to the value and quality of one or more server Tags. This allows you to use a single HTML element to represent the state of multiple server values.
attribute: opc-tag-src
type: Tag Group
  • config:
  • relative or absolute URL of an image
examples:
Using a single boolean tag to set the image to display

Background Flash :

Causes the background of an element to change or alternate as the result of a trigger
attribute: opc-tag-bg-fl
type: Tag
examples:
Using a single boolean tag to set the image to display

Foreground Flash :

Causes the foreground style of an element to change or alternate as the result of a trigger
attribute: opc-tag-fg-fl
type: Tag

example:

Border Flash :

Causes the border style of an element to change or alternate as the result of a trigger
attribute: opc-tag-brd-fl
type: Tag

example:

Tooltip :

Sets the tooltip text of an element based on the value of a server tag. This text is displayed when the user hovers over the element.
attribute: opc-tag-tt
type: Tag

example:

Enable :

Enables an element based on a trigger
attribute: opc-tag-en
type: Tag
  • config:
  • trigger
  • bad_q
    — if set to false, will disable the element when data quality is bad

example:

Visible :

Shows or hides an element based on a trigger
attribute: opc-tag-vis
type: Tag
  • config:
  • trigger
  • bad_q
    — if set to false, will disable the element when data quality is bad

example:

Opacity :

Sets the element’s opacity based on the value of a server tag
attribute: opc-tag-op
type: Tag
  • config:
  • formats
    — optionally used to force a value if data quality is bad
  • gain
  • offset

example:

Width :

Sets the element’s width based on the value of a server tag
attribute: opc-tag-wd
type: Tag
  • config:
  • formats
    — optionally used to force a value if data quality is bad
  • gain
  • offset

example:

Height :

Sets the element’s height based on the value of a server tag
attribute: opc-tag-ht
type: Tag
  • config:
  • formats
    — optionally used to force a value if data quality is bad
  • gain
  • offset

example:

Scale-X :

Sets the element’s horizontal scale based on the value of a server tag. The scale is always applied to the original size of the element. For example, if the element is defined on the page as 100px wide, and a server tag value is 2.5, the width will then become 250px. If the server value then changes to 1.0, the element will return to 100px wide.
attribute: opc-tag-sx
type: Tag
  • config:
  • formats
    — optionally used to force a value if data quality is bad
  • gain
  • offset

example:

Scale-Y :

Sets the element’s vertical scale based on the value of a server tag. This is used the same way as Scale-X.
attribute: opc-tag-sy
type: Tag
  • config:
  • formats
    — optionally used to force a value if data quality is bad
  • gain
  • offset

example:

Translate-X :

Sets the element’s horizontal position based on the element’s original position. This requires that the element uses absolute positioning.
attribute: opc-tag-tx
type: Tag
  • config:
  • formats
    — optionally used to force a value if data quality is bad
  • gain
  • offset

example:

Translate-Y :

Sets the element’s vertical position based on the element’s original position. This is used the same way as Translate-X.
attribute: opc-tag-ty
type: Tag
  • config:
  • formats
    — optionally used to force a value if data quality is bad
  • gain
  • offset

example:

Set :

Binds a client-side event, and sets a value on the server for a given tag.
attribute: opc-tag-set
type: Tag

example 1 – simple boolean toggle:

example 2 – toggle with confirmation dialog:

example 3 – user input:

example 4 – customized input dialog: