5.5. Modifying the ASP and AJAX Demo Files

[Note]

To modify the Java demos, you need to use the DataHub API for Java.

You can use the demo files that come in the Web Server archive as a basis for creating your own web pages. The default location is here:

C:\Program Files\Cogent\OPC DataHub\Plugin\Webserver\html\

Both ASP and AJAX use .asp files to build web pages. The .asp files in the DataHub distribution contain embedded DataHub scripts which write parts of the final .asp page that gets rendered. In other words, what you see when you select View Source in your browser is not the original .asp file, but the results of processing it. For example, this line of code in the DH_asp_2.asp file:

<td align="center"><@ quality @></td>

writes this on the displayed DH_asp_2.asp page:

<td align="center">Good</td>

Each .asp file can contain two types of special markup syntax for inserting DataHub script code, each with its own purpose.

Example

The DH_asp_2.asp file is shown below. It contains two functions: TimeStamp, for calculating time stamps; and NewSetPoint to send a new Setpoint value back to the DataHub. It also contains a for loop for creating the table rows. All of these are marked up with the <% ... %> syntax, while the values that get displayed in the table are marked up with the <@ ... @> syntax.

[Note]

The script code also uses a try / catch set of statements for error handling. For more information, please refer to try catch in the Gamma documentation.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<head>
    <title>DataHub Web Reports</title>
    <link rel="STYLESHEET" type="text/css" href="css/dhwebserver.css">
</head>
<html>
<body>

<%
// Load files we need
require ("Quality");
require ("Time");

// DataHub script function to generate a text timestamp with milliseconds
local TimeStamp;
function TimeStamp (wintime)
{
    local    unixtime = WindowsTimeToUnixTime (wintime);
    local    tm = localtime (unixtime);
    format ("%d-%02d-%02d %02d:%02d:%02d.%03d",
            tm.year + 1900, tm.mon+1, tm.mday,
            tm.hour, tm.min, tm.sec, (unixtime % 1) * 1000);
}
// DataHub script function to send new Setpoint value back to the DataHub.  
// This is done by refreshing the page with a new URL that appends the new Setpoint
// value to the end, for example, http://localhost/DH_asp_2.dhht?Setpoint=12
// This is imterpreted by the DataHub web server and passed to an internal function
// that writes the value to the DataHub.  The web server then returns the refreshed page
// contents to the browser, which includes the new value for the setpoint.
//
function NewSetPoint()
{
    local    args, i, sp;
	
    args = list_to_array(string_split(QUERY_STRING, "&?=", 0));
    for (i=0; i<length(args); i++)
    {
        if (args[i] == "Setpoint" && (sp = number(args[i+1])) != 0)
        {
            $DataPid:PID1.Sp = sp;
%>
            <meta http-equiv="refresh" content="0;URL=<%= REQUEST_URI %>"/>
<%
        }
    }
}

NewSetPoint();
%>
<span style="font-size:12px; font-weight:bold; color:#395294">This is a Static data display.</span>
<p></p>

<table border="1">
<tr><th width="70">Name</th><th width="60">Value</th><th width="60">Quality</th><th width="90">Timestamp</th></tr>

<!-- The following ASP code uses a loop to generates the table of DataHub point values -->	
<%
    // List of DataHub points to be displayed
    local points = [#$DataPid:PID1.Sp, #$DataPid:PID1.Pv, #$DataPid:PID1.Mv ];
	
    // List of display names for each point in the list
    local dispname = [ "Setpoint", "Process", "Output" ];
    
    // List of units to be displayed for each point value
    local units = [ "", "", "" ];
    local value, item, quality, timestamp, i;
    for (i=0; i<length(points); i++)
    {
        try
        {
            item = getprop (points[i], #__datahub_point__);
            if (item)
            {
                value = string (eval (points[i]), " ", units[i]);
                quality = GetQualityName(item.quality);
                timestamp = TimeStamp(item.timestamp);
            }
            else
            {
                value = "Please run DataPid";
            }
%>
    <tr>
        <td align="left" style="color:#395294; font-weight:bold"><@ dispname[i] @></td>
        <td align="center" style="color:#008800; font-weight:bold"><@ format("%.2f",number(value)) @></td>
        <td align="center"><@ quality @></td>
        <td align="center"><@ substr(timestamp,11,-1) @></td>
    </tr>
<%
        }
        catch 
        {
            %>
            <@ _last_error_ @>
            <%
        }
    }
%>
</table>
<p></p>


<table width="320" border="0" cellspacing="5" cellpadding="0">
  <tr>
    <td valign="middle"><strong>Enter new Setpoint:</strong></td>
    <td width="130" valign="middle">
    <form style="margin:0px;">
    <input name="Setpoint" type="text" id="Setpoint" size="4">
    <input type="submit" id="submit" value="Submit">
    </form>
    </td>
  </tr>
  <tr>
  	<td colspan="2">
    <div class="strongBlue">Refresh this page to see new values.</div>
    New Setpoint values are being auto-generated by the DataPid program.
    </td>
  </tr>
</table>
<p></p>
<a href="index.asp"><-- Go back</a>
</body>
</html>