|
Please use our Code Center to obtain source-code and example projects/solutions:
http://codecenter.softwaretoolbox.com
|
|
|
|
|
|
|
|
|
|
  Web Based Applications using the OPC Web Client Web Service
Quick Links within this page
Objective
Reading a single Tag
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<meta name="GENERATOR" content="Microsoft FrontPage 4.0">
<meta name="ProgId" content="FrontPage.Editor.Document">
<title>OPC Web Client
Example</title>
</head>
<body onload="doInit()">
<div id="service" style="behavior:url(webservice.htc)"></div>
<input type="button" name="b1" value="read">
</body> <script language="vbscript">
Sub doInit
call service.useService ("http://localhost/EasyAccess/OPCLabs.OPCDAProvider3.0.wsdl", "easydaservice")
End Sub
Sub b1_onClick
call service.useService ("http://localhost/EasyAccess/OPCLabs.OPCDAProvider3.0.wsdl", "easydaservice")
'
'this single instruction will invoke the read at the web-service, and will return the contents of the transaction
'to the "fnResults" function for further processing
objValue = service.easydaservice.callservice( _
getRef("fnResults"), "ReadItemValueAsString", "", _
"OPCLabs.KitServer.2", "Trends.Ramp (1 min)
", "", 0)
End Sub
function fnResults(result)
'
' If there was an error
if (result.error) then
Msgbox "Error: " & result.errorDetail.string
else
'
'there was not any error, so now figure out which Tag value has been received
'by looking at the "Result.ID" and comparing to the object we assigned the
'object to above, which in this case was "objValue".
'YOU COULD SIMPLY use a nested IF..ELSEIF...ELSE... to figure out which
'tag had changed values
If result.id = objValue Then
msgbox result.value
End If
end if
end function
</script>
</html>
NOTE: The blue-bold
contents of the HTML section above is in fact telling the web-browser to also download this file as it contains code needed to interact with the webservice.
 JAVASCRIPT
<html>
<head>
<title>OPC Web Client running in IE, using OPC Web Client WEB SERVICE</title>
<SCRIPT LANGUAGE="JScript" src="ArgumentFormat.js"></SCRIPT>
<script language="javascript">
function fnInit()
{
provider.init();
}
function fnReadResult()
{
var value = event.error ? "*** " + event.errorMessage : event.outputs.Value;
document.getElementById(event.info).value = value;
}
function fnRead()
{
provider.read({ServerClass: "OPCLabs.KitServer.2", ItemID:
"Simulation.Random"}, "tagvalue");
}
</script>
</head>
<body onload="fnInit();">
<DIV id="service" style="behavior:url(webservice.htc)"></DIV>
<DIV id="provider" style="behavior:url(eagateway.htc)" webService="service"
onReadResult="fnReadResult()"></DIV>
<p>OPC Server: OPCLabs.Kitserver.2<br>
<b>Tag Value:</b>
<input type="text" name="tagvalue" value="" size="10">
<input type="button" name="b1" value="read" onClick="fnRead();">
</p>
</body>
</html>
Reading multiple Tags in a single transaction
VBSCRIPT
Due to the limitations of VBScript and an easy way to pass-in complex arrays, the ability to read multiple tags in a single transaction is not currently available, but will be in the near future.
JAVASCRIPT
<html>
<head>
<title>OPC Web Client running in IE, using OPC Web Client WEB SERVICE</title>
<SCRIPT LANGUAGE="JScript" src="ArgumentFormat.js"></SCRIPT>
<script language="javascript">
//
// Initialize the provider
function fnInit()
{
provider.init();
}
//
// This event is browser-driven, and is fired when the user clicks the "Read Multiple" button
function btnReadMultiple_click()
{
provider.readMultiple(
new Array(
{ServerClass: "OPCLabs.KitServer.2", ItemID: "Simulation.Register_I4"},
{ServerClass: "OPCLabs.KitServer.2", ItemID: "Simulation.Register_R8"},
{ServerClass: "OPCLabs.KitServer.2", ItemID: "Simulation.Register_BSTR"}
),
new Array(
"tag1",
"tag2",
"tag3"
)
);
}
//
// This event is fired-when the OPC Web Client has read a value (btnRead_click() specifies to run this event)
function fnReadResult()
{
if(event.error)
{
alert(event.error + ", " + event.errorMessage);
}
else
{
var theTag = event.outputs;
var objName = event.info + "Value";
document.getElementById(objName).value = theTag.Value;
objName = event.info + "Quality";
document.getElementById(objName).value = theTag.Quality;
objName = event.info + "Timestamp";
document.getElementById(objName).value = theTag.Timestamp;
}
}
</script>
</head>
<body onload="fnInit();">
<DIV id="service" style="behavior:url(webservice.htc)"></DIV>
<DIV id="provider" style="behavior:url(eagateway.htc)" webService="service" onReadResult="fnReadResult()"></DIV>
<!--
The remainder of the HTML is to create a 4x4 table where we display
the tags details, i.e.
1. tag name
2. tag value
3. tag quality
4. timestamp
-->
<table border="0">
<tr>
<td><b><font face="Arial" size="2">Tag Name</font></b></td>
<td align="center"><b><font face="Arial" size="2">Value</font></b></td>
<td align="center"><b><font face="Arial" size="2">Quality</font></b></td>
<td align="center"><b><font face="Arial" size="2">Timestamp</font></b></td>
</tr>
<tr>
<td><font face="Arial" size="2"> <input type="text" name="tag1" size="23"
value="Simulation.Register_I4"></font></td>
<td align="center"><font face="Arial" size="2"> <input type="text" readonly="readonly"
name="tag1value" size="7" id="polltag1value"></font></td>
<td align="center"><font face="Arial" size="2"> <input type="text" readonly="readonly" name="tag1Quality" size="3"></font></td>
<td align="center"><font face="Arial" size="2"> <input type="text" readonly="readonly"
name="tag1Timestamp" size="16"></font></td>
</tr>
<tr>
<td><font face="Arial" size="2"> <input type="text" name="tag2" size="23" value="Simulation.Register_R8"></font></td>
<td align="center"><font face="Arial" size="2"> <input type="text" readonly="readonly"
name="tag2value" size="7" id="polltag2value"></font></td>
<td align="center"><font face="Arial" size="2"> <input type="text" readonly="readonly" name="tag2Quality" size="3"></font></td>
<td align="center"><font face="Arial" size="2"> <input type="text" readonly="readonly"
name="tag2Timestamp" size="16"></font></td>
</tr>
<tr>
<td><font face="Arial" size="2"> <input type="text" name="tag3" size="23" value="Simulation.Register_BSTR"></font></td>
<td align="center"><font face="Arial" size="2"> <input type="text" readonly="readonly"
name="tag3value" size="7" id="polltag3value"></font></td>
<td align="center"><font face="Arial" size="2"> <input type="text" readonly="readonly" name="tag3Quality" size="3"></font></td>
<td align="center"><font face="Arial" size="2"> <input type="text" readonly="readonly"
name="tag3Timestamp" size="16"></font></td>
</tr>
<tr>
<td colspan="4">
<p align="center"><font face="Arial" size="2">
<input type="button" value="Read Multiple" name="btnReadMultiple"
onclick="javascript:btnReadMultiple_click()">
</font></p>
</td>
</tr>
</table>
</body>
</html>
|
|
|
|
|
|
|
|
|
