Client Script Library Reference

Web HMI provides some useful client script utilities for developers who wish to have more control over application behavior. The following objects and functions are available to use:

Authentication

OAS.authenticate(string, string [, auth_callback])
Pass in a username and password to perform a server authentication call. Once complete, all tag data requested from the server will occur within that user’s context and bound to that user’s permissions. If the user does not have access to a given tag, no value will be returned. The authentication is performed asynchronously, and will take effect when either the call completes successfully or fails. Upon completion or failure, the OAS.token value will be updated. Upon failure, the OAS.token will be set to “AUTH FAILURE” when there is a communications issue, but will be set to a GUID token for all other results. Note: the user identity and permissions are managed within the Open Automation Software Server:

OAS.authenticate("someuser", "somepassword");

You can also include an optional authentication callback as the final parameter in the authenticate call. This function will execute when the authentication is completed on the server, and will pass in either the new authentication token or an error string starting with “ERROR:”.

function auth_callback(result){
  if(result.indexOf("ERROR:")>=0) {
    // auth failed
  } else {
    // result is the new auth token
  }
}
OAS.authenticate("someuser", "somepassword", auth_callback);

OAS.logout()
If you choose to disconnect from the server, you can call OAS.logout() and the current authentication token will be nullified, and server polling will cease immediately. Calling OAS.authenticate will also issue a logout before re-authenticating, so if you choose to use a different credential, it is unnecessary to call logout and then authenticate again.


Tag Syntax

Once authenticated, you are now able to read and write Tag properties. When referencing Tags in any call, you it is assumed that you are accessing them on the OAS server referenced in the OAS_config section’s serverURL field. However, you can also access remote Tags on any OAS server networked with the target server. Read more about the proper syntax for accessing Tags and Tag Variables. Also, only tags added to the watch_tags list or referenced in any oas-tag markup attribute can be accessed with the get_value function.


Reading Tag Values

OAS.get_value(string)
Pass in a tag as a string to get the current value for that tag:

var pump = OAS.get_value("Pump.Value");

Writing Tag Values

OAS.set_value(string, string)
Pass in a tag as a string, and a new value and that value will be set on the server:

OAS.set_value("Pump.Value", false);

Reading Tag Quality

OAS.get_quality(string)
Pass in a tag as a string and a boolean(true/false) will be returned indicating Tag quality:

var pump_q = OAS.get_quality("Pump.Value");

Toggle Polling

OAS.toggle_refresh(bool)
Temporarily disable or re-enable server polling for new tag values. If no parameters are passed in, polling will toggle, turning off when currently active, or back on when suspended. To explicitly start or stop polling, pass in a boolean true or false, respectively:

OAS.toggle_refresh();   //toggle
OAS.toggle_refresh(false);  //disable
OAS.toggle_refresh(true);   //enable

Initialize Script Engine

OAS.init()
Reinitialize the client script engine and begin polling. Use this function if there is ever a need to dynamically update any configuration settings, for example if you ever choose to programmatically point to a different serverURL, add tags to the watch_tags array, or add elements to the screen to be parsed and managed by Web HMI behaviors:

OPC_config.watch_tags.push("NewTag.Value");
OAS.init();

Client Object Structure

The client script library caches tag data in an object structure that can always be inspected in your custom code. This is particularly useful for debugging data being sent by the server, and for determining Tag data quality in your own script. You can access this object store at any time:


var tags = OAS.tags;

Below is the general structure of the tags object. Each tag is a node in the object containing a props structure that tracks every OAS Tag property being monitored. For example, if you are tracking Pump.Value, there will be a Value property in the props object. If you are tracking both the Value and the Description of each tag, you will find one object for each.

{
  TagName: {
    name: "TagName",
    props: {
      PropName: {
        data_type: "int|float|string",
        quality: true|false|null,
        name: "PropName",
        val: "Property Value"
      },
      ...
    }
  },
  ...
}

For example, using this prototype you would check the data quality of the Pump.Value using the following code:

var pq = OAS.tags["Pump"].props["Value"].quality;

HTML Attribute Reference

The following is a list of markup attributes that can be added to any HTML element. Each attribute adds a behavior, tied to one or more OAS server Tags. You can combine attributes to generate the behavior you desire. If you prefer more control over behavior and would like to write your own logic, see the Client Script Library 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: oas-tag-txt
type: Tag
examples:
Simple example of live raw data being added to the text of an HTML element
 
<div id="txt_ex1" oas-tag-txt='{"tag":"Sine.Value"}'></div>
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.
 
<div id="txt_ex2" oas-tag-txt='{"tag" : "Sine.Value", 
      "config" : {"formats" : {
        "bad_q":"????",
        "string" : "Sine = {0}"}
      }
  }'></div>
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.
 
<div id="txt_ex3" oas-tag-txt='{"tag" : "Sine.Value", 
      "config" : {"formats" : {
        "bad_q":"????",
        "string":"Sine = {0}", 
        "float":"0.000"}
      }
  }'></div>

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: oas-tag-val
type: Tag
examples:
Simple example of live raw data being added to the value of an HTML input element
<input id="val_ex1" type="text" oas-tag-val='{"tag":"Sine.Value"}'/>

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: oas-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)
<button id="bkg_ex1" oas-tag-bkg='{
    "type": "group",
    "all_f": {
      "color": "#f00"
    },
    "bad_q": {
      "color": "#fc0"
    },
    "group": [
      {
        "tag": "RandBool.Value",
        "config": {"color": "#0f0"}
      }
    ]
  }'>BUTTON</button>       

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: oas-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)
<button id="fg_ex1" oas-tag-fg='{
    "type": "group",
    "all_f": {
      "color": "#fc0"
    },
    "bad_q": {
      "color": "#f00"
    },
    "group": [
      {
        "tag": "RandBool.Value",
        "config": { "color": "#fff"}
      }
    ]
}'>BUTTON</button>
Combining both background and foreground color settings to create a unique style
<button id="fg_ex2" oas-tag-bkg='{
    "type": "group",
    "all_f": {"color": "#f00"},
    "bad_q": {"color": "#fc0"},
    "group": [
      {
        "tag": "RandBool.Value",
        "config": {"color": "#0f0"}
      }
    ]
  }' oas-tag-fg='{
    "type": "group",
    "all_f": {"color": "#fc0"},
    "bad_q": {"color": "#f00"},
    "group": [
      {
        "tag": "RandBool.Value",
        "config": { "color": "#fff"}
      }
    ]
}'>BUTTON</button>

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: oas-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)
<button id="brd_ex1" style="border-width: 2px;" oas-tag-brd='{
    "type": "group",
    "all_f": {"color": "#fc0"},
    "bad_q": {"color": "#f00"},
    "group": [
      {
        "tag": "RandBool.Value",
        "config": { "color": "#fff"}
      }
    ]
}'>BUTTON</button>
Combining background, foreground, and border color settings to create a unique style
<button id="brd_ex2" style="border-width: 2px;" oas-tag-bkg='{
    "type": "group",
    "all_f": {"color": "#f00"},
    "bad_q": {"color": "#fc0"},
    "group": [
      {
        "tag": "RandBool.Value",
        "config": {"color": "#0f0"}
      }
    ]
  }' oas-tag-fg='{
    "type": "group",
    "all_f": {"color": "#fc0"},
    "bad_q": {"color": "#f00"},
    "group": [
      {
        "tag": "RandBool.Value",
        "config": { "color": "#fff"}
      }
    ]
  }' oas-tag-brd='{
    "type": "group",
    "all_f": {"color": "#fc0"},
    "bad_q": {"color": "#f00"},
    "group": [
      {
        "tag": "RandBool.Value",
        "config": { "color": "#fff"}
      }
    ]
}'>BUTTON</button>

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: oas-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
<img id="src_ex1" style="width: 55px;" src="https://openautomationsoftware.com/wp-content/uploads/2022/05/Pump-Yellow-Front.png" oas-tag-src='{
    "type": "group",
    "all_f": "https://openautomationsoftware.com/wp-content/uploads/2022/05/Pump-Red-Front.png",
    "bad_q": "https://openautomationsoftware.com/wp-content/uploads/2022/05/Pump-Yellow-Front.png",
    "group": [
      {
        "tag": "RandBool.Value",
        "config": "https://openautomationsoftware.com/wp-content/uploads/2022/05/Pump-Green-Front.png"
      }
    ]
}'/>

Background Flash :

Causes the background of an element to change or alternate as the result of a trigger
attribute: oas-tag-bg-fl
type: Tag
examples:
Using a single boolean tag to flash a background color when true
<button id="bkg_fl" style="border-width: 2px;" oas-tag-bkg-fl='{
    "tag": "RandBool.Value",
    "config": {
      "color": "#f00",
      "trigger": "on_true"
    }
}'>BUTTON</button>

Foreground Flash :

Causes the foreground style of an element to change or alternate as the result of a trigger
attribute: oas-tag-fg-fl
type: Tag
examples:
Using a single boolean tag to flash a background color when true
<button id="fg_fl" style="border-width: 2px;" oas-tag-fg-fl='{
    "tag": "RandBool.Value",
    "config": {
      "color": "#f00",
      "trigger": "on_true"
    }
}'>BUTTON</button>

Border Flash :

Causes the border style of an element to change or alternate as the result of a trigger
attribute: oas-tag-brd-fl
type: Tag
examples:
Using a single boolean tag to flash a border color when true
<button id="brd_fl" style="border-width: 2px;" oas-tag-brd-fl='{
    "tag": "RandBool.Value",
    "config": {
      "color": "#f00",
      "trigger": "on_true"
    }
}'>BUTTON</button>

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: oas-tag-tt
type: Tag
examples:
Setting an element’s tooltip value with a tag (hover over button to see value)
NOTE:Not all browsers will display the tooltip, but the title attribute of the element will be set and could still be used for screen readers or other applications
<button id="tt_ex" style="border-width: 2px;" oas-tag-tt='{"tag": "Sine.Value"}'>BUTTON</button>

Enable :

Enables an element based on a trigger
attribute: oas-tag-en
type: Tag
  • config:
  • trigger
  • bad_q— when false, disables the element when data quality is bad
examples:
Disables an element based on a tag value or data quality
<button id="en_ex" oas-tag-txt='{
  "tag": "RandBool.Value",
  "config": {
    "formats": {
      "bool_f": "Enabled",
      "bool_t": "Disabled"
    }
  }
}' oas-tag-en='{
  "tag": "RandBool.Value",
  "config": {
    "trigger": "on_false"
  }
}'>BUTTON</button>

Visible :

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

<button id="vis_ex" oas-tag-vis='{
  "tag": "RandBool.Value",
  "config": {
    "bad_q" : false,
    "trigger": "on_true"
  }
}'>BUTTON</button>

Opacity :

Sets the element’s opacity based on the value of a server tag
attribute: oas-tag-op
type: Tag
  • config:
  • formats
    — optionally used to force a value if data quality is bad
  • gain
  • offset
<button id="op_ex" oas-tag-op='{
  "tag": "Ramp2.Value",
  "config": {
    "formats" : {
      "bad_q" : 0.25
    },
    "gain" : 2.0
  }
}'>BUTTON</button>

Width :

Sets the element’s width based on the value of a server tag
attribute: oas-tag-wd
type: Tag
  • config:
  • formats
    — optionally used to force a value if data quality is bad
  • gain
  • offset
<button id="wd_ex" oas-tag-wd='{
  "tag": "Random.Value",
  "config": {
    "formats" : {
      "bad_q" : 200
    },
    "gain" : 1.0,
    "offset" : 100
  }
}'>BUTTON</button>

Height :

Sets the element’s height based on the value of a server tag
attribute: oas-tag-ht
type: Tag
  • config:
  • formats
    — optionally used to force a value if data quality is bad
  • gain
  • offset
<button id="ht_ex" oas-tag-ht='{
  "tag": "Random.Value",
  "config": {
    "formats" : {
      "bad_q" : 50
    },
    "gain" : 1.0,
    "offset" : 50
  }
}'>BUTTON</button>

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: oas-tag-sx
type: Tag
  • config:
  • formats
    — optionally used to force a value if data quality is bad
  • gain
  • offset
<button id="sx_ex" oas-tag-sx='{
  "tag": "Ramp2.Value",
  "config": {
    "formats" : {
      "bad_q" : 1.0
    },
    "gain" : 5.0
  }
}'>BUTTON</button>

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: oas-tag-sy
type: Tag
  • config:
  • formats
    — optionally used to force a value if data quality is bad
  • gain
  • offset
<button id="sy_ex" oas-tag-sy='{
  "tag": "Ramp2.Value",
  "config": {
    "formats" : {
      "bad_q" : 1.0
    },
    "gain" : 5.0
  }
}'>BUTTON</button>

Translate-X :

Sets the element’s horizontal position based on the element’s original position. This requires that the element uses absolute positioning.
attribute: oas-tag-tx
type: Tag
  • config:
  • formats
    — optionally used to force a value if data quality is bad
  • gain
  • offset
 
<div id="tx_ex" style='width:15px;height:15px;background-color:#c33;' oas-tag-tx='{
  "tag":"Ramp2.Value",
  "config":{
    "formats":{
      "bad_q":10
    },
    "gain":100,
    "offset":10
  }
}'></div>

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: oas-tag-ty
type: Tag
  • config:
  • formats
    — optionally used to force a value if data quality is bad
  • gain
  • offset
 
<div id="tx_ex" style='width:15px;height:15px;background-color:#c33;' oas-tag-ty='{
  "tag":"Ramp2.Value",
  "config":{
    "formats":{
      "bad_q":10
    },
    "gain":100,
    "offset":10
  }
}'></div>

Set :

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

example 1 – simple boolean toggle:

 
{
  "tag":"Pump.Value",
  "config":{
    "evt":"click",
    "set":"toggle"
  }
}

example 2 – toggle with confirmation dialog:

{ 
  "tag" : "Pump.Value",
  "config" : {
      "evt" : "click",
      "set" : "toggle",
      "set_confirm" : true
  }
}

example 3 – user input:

{ 
        "tag" : "Pump.Value",
        "config" : {
            "evt" : "click",
            "set" : "input"
        }
}

example 4 – customized input dialog:

{ 
        "tag" : "Pump.Value",
        "config" : {
            "evt" : "click",
            "set" : "input", 
            "set_confirm_msg" : "Please enter a value that will be set for the Pump.Value server tag.", 
            "set_confirm_title" : "Set Pump.Value"
        }
}

example 5 – using a value from another field. Use the set_src for the value to be submitted for the tag. This should be the element id holding the new value:

{ 
        "tag" : "Pump.Value",
        "config" : {
            "evt" : "click",
            "set" : "value", 
            "set_src" : "element_id" 
        }
}

Top Level Classes – JSON Type Reference


Custom Attributes each have a specific format that they are expected to follow, but all attribute configurations are one of the following forms:

Tag:

Used for binding a single server tag to a single attribute on an element.

Definition:

{
    "tag" : <string>,
    "config" : <Config>
}

tag : string : a string representing the server tag to monitor for this attribute

config : Config : a detailed configuration that describes how to alter the element based on the server tag

Example:

{
    "tag" : "Pump.Value",
    "config" : {
        "color" : "#f00",
        "trigger":"on_true"
    }
}

Tag Group:

An array of Simple Tag configurations used to set up a hierarchy of behaviors. Each configuration is evaluated in order and the first tag to evaluate as boolean true will be used to modify the associated element.

Definition:

{
    "type" : "group",
    "all_f" : <Config>,
    "bad_q" : <Config>,
    "group" : [<Tag>,..]
}

type : string : must be hard-coded as “group”

all_f : Config : optional configuration to use if all Tags in the group evaluate to false

bad_q : Config : optional configuration to use if any Tag produces bad quality data from the server

group : [Tag] : an array of Tags, evaluated in order, establishing a hierarchy of behaviors. The first Tag to evaluate as boolean true will dictate the element behavior, and no subsequent Tags in the group will be evaluated.

Example:

{
    "type" : "group",
    "all_f" : {"color":"#F00"},
    "bad_q" : {"color":"#FC0"},
    "group" : [
        {
            "tag" : "Pump.Value",
            "config" : {"color":"#00F"}
        },
        {
            "tag" : "Pump2.Value",
            "config" : {"color":"#080"}
        }
    ]
}

Config:

Never used on its own, the Config is applied to several other attributes to define specific behaviors. All Config attributes are optional as they may or may not apply to the Custom Attribute in question.

Definition:

{
    "formats" : <Formats>,
    "style" : <string>,
    "cls" : <string>,
    "color" : <string>,
    "img" : <string>,
    "img_pos" : <string>,
    "rate" : <integer>,
    "repeat" : <integer>,
    "bad_q" : <bool>,
    "trigger" : <string>,
    "fn" : <string>,
    "gain" : <decimal>,
    "offset" : <decimal>,
    "set" : <string>,
    "evt" : <string>,
    "set_src" : <string>, 
    "set_value" : <string>,
    "set_confirm_buttons" : <string>,
    "set_confirm" : <bool>,
    "set_confirm_msg" : <string>,
    "set_confirm_title" : <string>,
    "ignore_prefix" : <bool>
}

formats : Formats : used for formatting data values, used with the oas-tag-txt and oas-tag-val attributes

style : string : an inline CSS style string to apply directly to the element when the tag value evaluates to TRUE

cls : string : a CSS class name to apply to the element when the tag value evaluates to TRUE

color : string : a foreground color to apply to an element, either a color name or hex value (e.g. #ffcc00) when the tag value evaluates to TRUE

img : string : an image path to be applied to the element (e.g. when used with the oas-tag-bg)

img-pos : string : a position string to be applied to the background image, in the form “offset-x offset-y”, for example: “20px 5px”

rate : integer : used in conjunction with repeat, the interval in milliseconds between changes, defaults to 200 if omitted

repeat : integer : the number of times to toggle a change, primarily used with flashing attributes

bad_q : bool : indicates that the configuration is to be used when the server tag data quality is bad

trigger : string : when to trigger a change to the element. Valid values are:

on_true : when the server tag evaluates to TRUE

on_false : when the server tag evaluates to FALSE

trans : when the server value changes

trans_true : when the server value changes to TRUE from FALSE

trans_false : when the server value changes from FALSE to TRUE

fn : string : the name of a function to execute when the trigger condition is met

gain : decimal : a multiplier applied to a server tag value before being applied to an element. For example if a server value fluctuates between 0.0 and 1.0, but you wish to transform this to a range between 0.0 and 100.0, set the gain to 100. This may be combined with offset for finer control.

offset : decimal : a value added to a server tag value before being applied to an element. For example if a server value fluctuates between 0.0 and 50.0, but you wish to transform this to a range between 10.0 and 60.0, set the offset to 10. This may be combined with gain for finer control.

set : string : used only with oas-tag-set, the method used to set a tag value on the server. Valid values are:

toggle : negate the current server boolean value so TRUE becomes FALSE, and FALSE becomes TRUE

input : display an input dialog allowing users to manually enter the value sent to the server

value : send either the element’s value to the server (default), a fixed value defined by the set_value configuration, or the value of element with an id defined in theset_src configuration

set_src : string : used only with a set of value, the client id of the element to provide a value, for example a separate text input field on the page.

set_value : string : used only with a set of value, a hard-coded value to always send to the server, for example FALSE when creating an explicit “off” button.

evt : string : used only with set, the client-side event on the element to trigger a server value being set. Valid values are:

click : clicking the element

dbl-click : double-clicking an element

change : when an element’s value changes, for example when a text input box value is changed by a user

set_confirm_buttons : string : used only with a set value if input, this determines the text values on the dialog buttons.

ok : OK/Cancel (default if omitted)

yesno : YES/NO

set_confirm_msg : string : used only with a set value if input, a message displayed in the input dialog.

set_confirm_title : string : used only with a set value if input, a title displayed in the header of the input dialog.

ignore_prefix : bool : used only if a tag_prefix is being used on the main config, and the current tag should not use the prefix.

Formats:

Used for formatting data values for display

Definition:

{
    "bad_q" : <string>,
    "string" : <string>,
    "bool_f" : <string>,
    "bool_t" : <string>,
    "int" : <string>,
    "float" : <string>,
    "date" : <string>,
    "locale" : <string>
}

bad_q : string : the string to display when the server tag yields bad data

str : string : a format string that replaces a “{0}” string with the server tag value. For example if you use the string “The value is {0}”, and the server tag value is 27.3, the resultant string will be “The value is 27.3”

bool_f : string : the string to display when the server tag evaluates to boolean false. For example “No”, or “F”

bool_t : string : the string to display when the server tag evaluates to boolean true. For example “Yes”, or “T”

int : string : a numeric formatting string for integer values, Formatting syntax is identical to float but decimal separator is ignored

float : string : a numeric formatting string for decimal/float values. Formatting syntax can be found here (https://code.google.com/p/jquery-numberformatter/)

locale : string : a localization string which influences how separators and decimals are represented. Default is “us” for United States if no locale is included in the main config.

Marking up HTML Elements

Marking up element tags with specialized attributes

The simplest and most direct method of binding HTML elements to server Tags is to mark up the element tag with one or more specialized attributes. Each attribute represents a behavior added to the HTML element, tied to the value and state of a Tag or set of tags. For example, if you wish to display the current value for the Ramp.Value tag within a text box, you would use the oas-tag-val attribute:

<input type="text" id="my-textbox" oas-tag-val='{"tag":"Pump.Value"}' ">

Web HMI Wizard

To learn how to use each of the markup attributes, you can use the interactive Web HMI Wizard to generate working example code.

Values are valid JSON

The value of the oas-tag-val attribute, like all oas-tag- attributes must be valid JSON. Each attribute requires a specific JSON structure for defining the element behavior, but the JSON structures consist of specific types and sub-types. For example, a simple oas-tag-val attribute expects JSON in the format:

{
    "tag": "TagName.Property",
    "config" : <Config>
}

For this attribute the config is optional, and would contain settings used to format the server Tag value for display. If you want to apply formatting to the server Tag value, you would use the formats setting in the config:

{
    "formats": [
        "bad_q": <optional string: displayed when data quality is bad>,
        "string": <optional string: replaces {0} with server value>,
        "bool_f": <optional string: displayed when boolean server value = false>,
        "bool_t": <optional string: displayed when boolean server value = true>,
        "int": <optional string: integer number formatter - see reference>,
        "float", <optional string: float number formatter - see reference>
    ]   
}

Tying it all together

Tying this all together, if the server tag Pump.Value is a boolean, and you want “YES” and “NO” to be displayed in a text box instead of True or False, the full HTML markup would be:

<input type="text" id="my-textbox" oas-tag-val='{"tag":"Pump.Value", "config":{"formats":["bool_f":"NO", "bool_t":"YES"]}}' ">

Other Configuration Options

The Javascript OAS_config variable contains several options for determining the behavior of the Script Library. This variable is a standard JSON construct. The full definition with defaults displayed is:

OAS_config =
{
    debug: false,   
    debug_refresh: false,   
    interval: 1000,             
    auto_start: true,       
    token:'',                           
    serverURL:'http://localhost:58725'
};

debug: bool

Display debug logging messages within a browser debug console. You can hook into this logging mechanism as well, by calling OAS.log(obj).

debug_refresh: bool

Display verbose log messages on each ajax callback to the Open Automation Software Server. This can be useful during development when you want to see the raw data being returned by the server.

interval: int

The number of milliseconds between each refresh callback to the server to get new data.

auto_start: bool

When set to true refresh callbacks will begin immediately after authentication with the token or when OAS.authenticate() is called successfully. If you would like to defer refreshes, set this to false and call OAS.toggle_refresh(true) to begin receiving new data.

token: string

The authentication token sent to the server on each refresh callback

serverURL: string

The location of the Open Automation Software Server

locale: string

An optional string indicating the default locale to use when formatting numeric values. The default is ‘us’ for United States. Other options are:

  • Arab Emirates: “ae”
  • Australia: “au”
  • Austria: “at”
  • Brazil: “br”
  • Canada: “ca”
  • China: “cn”
  • Czech: “cz”
  • Denmark: “dk”
  • Egypt: “eg”
  • France: “fr”
  • Finland: “fi”
  • Germany: “de”
  • Greece: “gr”
  • Great Britain: “gb”
  • Hong Kong: “hk”
  • India: “in”
  • Israel: “il”
  • Japan: “jp”
  • Russia: “ru”
  • South Korea: “kr”
  • Spain: “es”
  • Sweden: “se”
  • Switzerland: “ch”
  • Taiwan: “tw”
  • Thailand: “th”
  • Vietnam: “vn”

trend_bindings: object

See Web HMI Trend documentation for more details

alarm_bindings: object

See Web HMI Alarm documentation for more details

tag_prefix: string

An optional prefix for all server tags. This allows you to use a truncated tag name with inline configurations if the tags all share the same prefix. For example, if your tags are similar to:

MyCompany.Server3.DataValues.Tag1.Value
MyCompany.Server3.DataValues.Tag2.Value
MyCompany.Server3.DataValues.Tag3.Value

You can set the tag_prefix to “MyCompany.Server3.DataValues.” and simply use “Tag1.Value”, “Tag2.Value”, and “Tag3.Value” in the inline configurations.

If you want to include one or more tags that do not follow the same pattern or do not have the same prefix, you must add the ignore_prefix:true setting on that attribute’s config.

max_tags_per_msg: number

An optional value to be used in cases where a firewall or network configuration may limit HTTP request sizes. By default, each call to the server includes a request for data on every monitored server tag.

If the page has a large number of tags, this could result in a rejection by a firewall. Setting the max_tags_per_msg value will split calls to the server, resulting in multiple calls. This will reduce application performance since it will effectively multiply the number of executions by the number of calls needed to cover all server tags.

For example, if your page is monitoring 20 tags, and your max_tags_per_msg is set to 4, your page will be executing 5 calls to the server on each interval.

refresh_callback: function(data)

An optional callback that will be fired on every successful refresh call to the server for data. The data passed into the callback will represent all monitored server tags for the current configuration. Note: If the OAS server cannot be reached, the refresh_callback function will not be triggered.

watch_tags: array of strings

In some cases, you may prefer to read and write tag values programmatically and do not want or need to add oas-tag-xxx attributes to elements inline. This is particularly useful if you need to perform some additional logic or formatting of data within your custom scripts.

If this is the case, then you will need to enumerate the tags to “watch” in a string array. This informs the Web HMI library that it should poll the server for these tag values, making them available to use in custom scripts. This is especially useful when used in conjunction with the refresh_callback, as you’ll be able to programmatically update elements as soon as data is refreshed from the server.

OAS_config =
{
    token:'',                           
    serverURL:'http://localhost:58725',
    watch_tags: ["Pump.Value", "Random.Value"],
    refresh_callback: update_screen
};
 
// called on every refresh of data
function update_screen(data) {
    var pump = OAS.get_value("Pump.Value");
    var random = OAS.get_value("Random.Value");
    // your code here 
}

Authentication

To ensure that all requests for server data be performed by an authorized user, the OAS Web HMI Script Library attaches an authentication token to each request. This token is generated by the Open Automation Software Server when provided a valid credential.

The token will expire after a period of disuse, or when the Open Automation Software Server is restarted, so it should be generated dynamically when a page is initially accessed. Options for generating the token are:

  • ASP.NET
  • Other Web Technologies
  • Client-Side Authentication
  • Java Script Authentication

ASP.NET or .NET MVC

When a page is initially rendered a call can be made to the OASConfig library to create the token, which can then be embedded in the page header. Within .NET MVC, this authentication call can be made in template code to embed a WebHMI token, or within a controller for accessing OAS data directly or for providing client script access to an authentication token.

VB.NET

Dim un as String = "YourUserName"
Dim pw as String = "YourPassword"
Dim config as new OASConfig.Config()
Dim token as String = config.GetToken(un, pw)
Dim url as String = "http://yourserver:port"
ClientScriptManager.RegisterStartupScript(Me.GetType(), _
    "OASWebToken", _
    "OAS_config = {token:'" + token + "','" + url + "'};", _
    True)

C#

string un = "YourUserName";
string pw = "YourPassword";
OASConfig.Config config = new OASConfig.Config();
string token = config.GetToken(un, pw);
string url = "http://yourserver:port";
ClientScriptManager.RegisterStartupScript(this.GetType(), 
    "OASWebToken", 
    "OAS_config = {token:'" + token + "','" + url + "'};", 
    true);

The credential used could be taken directly from the user’s login within your application, or it could be a standard credential established on the server for all users.

Other Web Technologies

Similar to ASP.NET or .NET MVC, it is recommended that the authentication token be generated on the server so that credentials are not passed from client to server, and are only exchanged in server-to-server communication.

For non-.NET technologies, you can use the API to make an authentication call to the Open Automation Software Server.

Client-Side Authentication

If you are operating within a secure network, and are not concerned about passing credentials between clients and the Open Automation Software Server, you can perform the authentication from within client script.

The following Javascript code will perform the server authentication and then begin refreshing the page with server data:

$(document).ready(function(){OAS.authenticate("someUser","somePassword");})

Java Script Authentication

In javascript, code can kick off an authentication by just calling the following:

OAS.authenticate(username,password);

What happens

In context, the steps would be as follows:

  1. Collect some credentials on the client, this can be from a form, or from any other client script
  2. Call OAS.authenticate() using those credentials
  3. The OAS Service will validate the credential and return a token, which will then be applied and used for all subsequent callbacks from the client library.
  4. If you wish to cache this token on the client, you can get it from the OAS.token property, and then use it on other screens in the OAS_config settings so there’s no need to call OAS.authenticate again when switching pages or screens.

Example

Here’s an example in javascript which does all of this. The do_authentication function would be called on a login form that contains username and password fields.

<script type="text/javascript">
      OAS_config = {
            token:'7e61b230-481d-4551-b24b-ba9046e3d8f2',
            serverURL: 'http://localhost:58725',
            refresh_callback: update_local
      };
 
      function update_local(data){
            // this function is called on every server callback
            if (OAS.token != OAS_config.token) {
                  // the authentication token has been updated
                  // you can now use the token for all subsequent pages within a session
                  OAS_config.token = OAS.token;
            }
      }
 
      function do_authentication() {
            var un = $("#username").val();
            var pw = $("#password").val();
            OAS.authenticate(un, pw);
      }
</script>

Overview – Web HMI Programming Reference

If you are interested in visualizing your data in a desktop or mobile browser with zero programming, you may be interested in Getting Started with the Web HMI Dashboard.

Features

The OAS Web HMI provides a flexible, platform-independent way to integrate with Open Automation Software Servers.

  • “Controls” themselves are simply existing HTML elements marked up with attributes that are parsed at runtime, so you are free to use any web technology that you prefer, including (but not limited to) ASP.NET or .NET MVC, JSP, PHP, Ruby on Rails, or even static HTML with JavaScript.
  • Easily integrates with existing web applications
  • Based on ubiquitous standard technologies including JavascriptjQueryJSONHTML, and CSS

Requirements

OAS Web HMI requires the following:

  • an instance of an Open Automation Software Server accessible over an internal or external network
  • working knowledge of HTML
  • working knowledge of Javascript

HTML Common Terms

AJAX (Asynchronous Javascript And Xml)

This term was originally used to describe a set of technologies pieced-together to allow client-based code to communicate with a server asynchronously, without a full page refresh.

Since the advent of JQuery and many other tool sets to simplify web application development, and because web developers rarely use XML or the embedded XmlHttpRequest object at the core of the browser technology, the term AJAX is not often used any more. It is usually assumed that these techniques are in play and just how the web works now.

AngularJS, BackboneJS, MarionetteJS, Ember, MeteorJS

These are all Javascript-based application frameworks to allow developers to rapidly and rationally create highly functional applications.  MeteorJS also utilizes WebSocket technologies to enable persistent connections between client and server, allowing updates to be pushed to clients in real time without polling.

Bootstrap (often called Twitter Bootstrap)

This is an open-source UI framework originally created by a pair of Twitter developers. This set of stylesheets and Javascript provide some very clean solutions for creating responsive layouts and standard elements such as buttons, navigation items, dialogs, etc.

CSS (Cascading Stylesheets)

This is a separate language layer that describes styling on top of HTML. For example, a textbox is created with an HTML tag, but the color, size, border style, background, spacing and thousands of other attributes are applied using CSS. Because it is separate from HTML and typically held in separate files, this allows developers to separate the styling from the web application functionality and can add a whole new look and feel by changing the stylesheet.

HTML5

The most recent accepted specification of HTML, the core language for constructing web pages. The major advancements in HTML5 over previous versions include the canvas specification for drawing and animation, as well as embedded video which are now supported by all modern browsers and no longer requiring plugins.

The canvas specification allows developers to create dynamic drawings and elements such as animated gauges. Embedded video allows developers to more easily embed videos in a web page without requiring Flash players.This was an important advancement since Apple and other device vendors explicitly do not support Flash, and require HTML5 for animation and video.

Javascript

A commonly-used scripting language that all browsers natively understand. This is used to create client-side functionality, calculations, or any other logic within a web user interface.

Javascript has become a popular language for server-side development as well, using a framework such as NodeJS, now that the script interpreters and processing speeds are approaching that of compiled code. Despite its name, Javascript has no relation to the Java programming language and should not be mistaken for one another.

JQuery

This is an open-source library that provides a fast, useful coding interface between script code and UI elements. It is written to be cross-browser compatible, so developers do not need to be concerned with all of the various quirks of each browser’s implementation of the DOM (Document Object Model), describing all UI elements defined in HTML.

JQuery also provides a common communications framework to allow script code to make HTTP calls out to servers, either synchronously or asynchronously. The vast majority of interactive web applications developed today use JQuery in one way or another.

JSON (JavaScript Object Notation)

This is part of the Javascript language, which is a specification for defining hierarchical objects in key:value format. These objects are typically passed around in code and over communications channels since they’re lighter-weight than XML (previously popular in web services), and still human-readable.

NodeJS

A Javascript runtime that executes independently from any browser. This allows developers to create very lightweight, platform-agnostic applications using the popular Javascript language.

These applications are often run on servers and can replace more monolithic and resource-intensive application servers such as Microsoft IIS. By utilizing NodeJS, developers can create “full-stack” applications (meaning front-end to back-end) using a single language (Javascript) for all logic.

Responsive Design

By combining HTML, CSS, and sometimes Javascript, a web developer can create a single code base that renders differently depending on the form-factor of the device.  This strategy allows developers to create a single application that works on a desktop screen, and many mobile devices.

While very powerful, this can also take more time upfront to design, develop, and test each screen since a developer must take into consideration each form factor.

REST or RESTful

This is a technique for building web services upon HTTP actions such as GET, POST, PUT, and DELETE, typically passing JSON data in each request and response.

RESTful APIs are stateless and use URLs to define common object-oriented actions such as create, read, update, delete (often referred to as CRUD). This is advancement over such technologies as SOAP or other XML schema-based web services as the data is more streamlined and the APIs are dramatically less complex.

For example, a REST API may expose a URL such as http://server.com/products, which would return a JSON array describing each product in a catalog.

Furthermore, a URL of http://server.com/product/12345 would return JSON describing a single product with the ID of 12345.  Any client could also execute an HTTP POST or DELETE operation with JSON describing the object to request an update or deletion of the record, respectively.

Single Page Applications

With the advent of extremely fast Javascript interpreters in all modern browsers, it is now possible to develop applications that no longer reload web pages when the context changes.

The client script and UI elements are loaded upon initially requesting a URL and then script calls are used to dynamically swap out entire screens or individual elements. This creates an extremely quick and responsive user interface, and presents a much better user experience, while also reducing server processing overhead and communications bandwidth. Single Page Applications are becoming the norm, and are typically built-upon frameworks like AngularJS, BackboneJS, MarionetteJS, and MeteorJS.

UI/UX

User Interface / User Experience – there’s a subtle distinction between these today. The former is typically the “Look” and the latter is the “Feel” when one talks about “Look & Feel”.  User Interface is the organizational structure of visual elements, and User Experience is the way the elements behave and how the application flows.

WebSockets

WebSockets are a communication protocol that allows web browsers to maintain a persistent, full-duplex connection with a server. Doing so makes it possible for servers to push data down to a client without the browser making an HTTP request. Typical HTTP calls are stateless and require the client to initiate the communications in a Request/Response model. With WebSockets, a server can stream data down to individual browser more efficiently since there is no need to wait for the client to make a request, and also because it eliminates the overhead of communication handshakes after the initial connection. Some web UI frameworks like MeteorJS are built upon WebSockets, but older browsers have limited support for the protocol.

Web HMI Graphics

Using image tags in Web HMI

Many applications require some dynamic graphical elements to indicate value changes on the server. The simplest example may be an image of a switch changing from the “on” state to the “off” state depending on the value of a Boolean server tag.

In more complex implementations, multiple tags can be used to change the state of an HTML image, allowing more nuanced visual representations of data. Such an implementation could use multiple images to represent a motor in various states such as “running”, “idle”, “running and overheated”, “idle and overheated”, as well as an image to indicate bad data quality received from the server for this element.

Web HMI Graphics Introduction

In this example, we are going to configure an HTML image tag using Web HMI attributes in order to indicate the various states of a valve. The end result will appear to change the color of the valve between red, green, and yellow to indicate when the valve is closed, open, or receiving bad data, respectively.

Web-HMI-Graphics-1

These images will be superimposed on a background depicting the entire system, so operators can see the physical layout as well as the data.

Web HMI Graphics 4

Setting the Stage for Web HMI Graphics

The first step is to create an HTML page with the necessary script library references and configuration. To learn more about how to set up a basic Web HMI page, see this tutorial.

Once you have a basic page configured, you’ll add a CSS stylesheet section to the HTML <head> element which will be the place where we define the layout and positioning of elements. It should look like this:

<head>
  // script references go here…
 
  <style>
 
    #bkg_image {
      position:relative;
      width:767px;
      height:518px;
      background: url(images/new_tanks/Background.jpg) 0 0 no-repeat;
    }
 
    #valve1 {
      position:absolute; 
      top:9px; 
      left:206px;
    }
 
  </style>
 
</head>

The #bkg_image entry refers to an element with the id of “bkg_image”. This will be the container for the valve image and will have a background image set within it. The background is the physical layout of the system.

The #valve1 entry refers to an element with the id of “valve1”, which will be the image of the valve itself. As mentioned above, this will use absolute positioning, but will be relative to the container.

More about CSS

If you’re not familiar with CSS, setting the position to relative means that anything contained within it will be positioned relative to the container itself. So if we set a coordinate for anything within it, they will always be relative to the background image. The width, height, and background settings are pretty straightforward. If you want to learn more about CSS, you can visit the W3Schools site.

Adding the elements to the page

The next step is to add the background and valve elements to the page. Your HTML <body> should look like this:

<body>
  
  <div id="bkg_image">
    <img id="valve1" 
      oas-tag-src='{"type":"group",
        "group":[
          {"tag":"WPF.New Tanks Demo.Tank1 Inlet Valve.Value","config":"images/new_tanks/ValveTopLeft_Green.png"}
        ],
        "all_f":"images/new_tanks/ValveTopLeft_Red.png",
        "bad_q":"images/new_tanks/ValveTopLeft_Yellow.png"
      }'
    />
  </div>
 
</body>

The oas-tag-src attribute applied to an <img> tag will change the image source based on the value of Open Automation Software Server tag values. The first setting is “type”:”group”. This tells the framework that we’re using a “group” attribute because we’ll be applying a group of tags. This is similar to the oas-tag-bg, oas-tag-fg, and others.

The next setting is the group itself. This is a list of tags and configurations to apply when the tag evaluates to a Boolean True. The structure follows this format:

"group":[
  {"tag":"YourTagName.Value","config":"image url"},
  {"tag":"AnotherTagName.Value","config":"image url"},
  …
]

Each tag in the group list is evaluated in the order it is written. The first tag that evaluates as True will have its configuration applied, and no others will be checked. In this example, we only have one tag in the list, but you could add others to indicate values such as “Open and high pressure”, “Open and low pressure”, changing colors for each to create a more nuanced interface.

The “all_f” setting applies an image URL when all of the tags within the group evaluate to False, and the “bad_q” setting applies an image URL when any tag within the group is sending bad data quality to the browser.

Making the image clickable

Displaying a dynamic image on a layout is very useful, but to make an HMI interactive, you’ll want to make the image clickable, letting operators open and close a valve remotely.

To achieve this, modify the <img> tag to look like this:

img id="valve1" 
  oas-tag-src='{"type":"group",
    "group":[
      {"tag":"WPF.New Tanks Demo.Tank1 Inlet Valve.Value","config":"images/new_tanks/ValveTopLeft_Green.png"}
    ],
    "all_f":"images/new_tanks/ValveTopLeft_Red.png",
    "bad_q":"images/new_tanks/ValveTopLeft_Yellow.png"
  }'
  oas-tag-set='{"tag":"WPF.New Tanks Demo.Tank1 Inlet Valve.Value",
    "config":{"evt":"click","set":"toggle"}}'
/>

The oas-tag-set attribute makes the image active, responding to a click event. When the image is clicked, it sends a “toggle” message to the server to switch the Boolean value to the opposite of the current state. You’ll notice that the “tag” setting of this attribute matches the “tag” in the oas-tag-src. This ensures that clicking the image will set the same tag being used for display purposes.

The end result

After all pieces are put together, and you run the example in a browser, you should see the following result. Notice the green valve overlaid on the background to indicate that the valve is open:

Web-HMI-Graphics-5

Using this same technique, you can place additional dynamic images on a physical layout to achieve a fully functional HMI in a web page. An example of this fully functional HMI can be found by going to www.opcweb.com.

The source of the full online example is installed with Open Automation Software in:
C:\Program Files\Open Automation Software\OAS\HTML_HMI\Example\html_hmi_demo.zip

Web HMI Wizard

The OAS HMI Wizard provides an easy way to generate HTML code for inclusion in your web-based HMI or SCADA application.

The OAS HMI Wizard is also self-hosted on your own OAS installation at http://localhost:58725/app/wizard/.  Use this self-hosted wizard to prototype update from your own tags.

View the following video to see how to use the Web HMI Wizard to automatically create HTML code to provide live data.

  • 00:00 – Introduction
  • 00:26 – Methods for Using OAS Web HMI Product
  • 00:32 – Programmatic Method
  • 01:00 – Web HMI Code Wizard
  • 01:26 – What is the Web HMI Code Wizard?
  • 02:09 – Code Wizard closer look
  • 07:38 – HTML Element View
  • 08:59 – HTML Attribute list
  • 09:34 – Tag Text
  • 13:55 – Other HTML Attributes
  • 15:05 – More Information

To use the wizard:

  1. Locate in the left hand pane the parameter your require code for.
  2. Fill in the parameter values e.g tag name, client side event etc. The HTML code sample updates as you enter values.
  3. Select the HTML element you wish to output (top of right hand pane).
  4. Copy the code snippet and paste into your HTML page.

Visit http://opcweb.com:58725/app/wizard/ to run the online interactive html wizard.

HTML Wizard
HTML Wizard