Do you have a need for several web-pages each containing charts of different tag data?
If the answer is yes, then you might not need to create any more than 1 page!
With a little server-side scripting (ASP, ASP.NET etc.) you could build a dynamic page based on querystring/header settings.
Let's look at an example:
Lets modify our example in this paper to subscribe to Tags as specified in the querystring. In our example we
are not going to do anything elaborate, we are going to keep it easy.
Lets assume that we have a page named/located:
yourcomputer.com/myChartPage.asp
We are going to pass-in an array of tagnames, for examples:
yourcomputer.com/myChartPage.asp?tags=simulation.random|simulation.register_i4|simulation.register_r8
Our Webpage will then need to dynamically subscribe to these tags, as well as log them to the Chart.
What needs to be dynamically created in our web-page?
- The Tags being subscribed to
- The event-handler responding to the changing Tag values
- The Chart itself
- The number of Channels it support
- The various properties associated with each channel.
Lets look at how this can be accomplished.
First, copy the file you created above and give the new file the same name but with the ".ASP" file extension instead. This will be file you now work from.
Step 1 - Defining Global Variables and Parsing the Querystring
At the top of the web-page, above the HTML code, insert the following lines of ASP Code:
<%@ Language="vbscript" %>
<%Option Explicit %>
<%Dim strServer
Dim Tags()
Dim i
If Request.Querystring("tags") = "" Then
Redim Tags(3)
Tags(0) = "Simulation.Random"
Tags(1) = "Simulation.Register_I4"
Tags(2) = "Simulation.Register_R8"
Else
Dim strTempTags
strTempTags = Split(Request.Querystring("tags"), "|")
Redim Tags(UBound(strTempTags))
For i=0 To UBound(strTempTags) - 1
Tags(i) = strTempTags(i)
Next
End If
If Request.Querystring("server") = "" Then
strServer = "OPCLabs.KitServer.2"
Else
strServer = Request.Querystring("server")
End If
%>
This will create essentially 2 variables:
- strServer = to contain the name of an OPC Server
- Tags = to contain an array of Tag names to subscribe to and work with
Step 2 - Subscribing to these Tags and handling their values changing
Begin by locating the "fnInit()" function and replacing it with the following:
function fnInit()
{
provider.init();
//
//the following lines are for the auto-polled tags, which will be bound directly to the text boxes
<%For i=0 To UBound(Tags) -1 %>
provider.subscribe({ServerClass: "<%=strServer%>", ItemID: "<%=Tags(i)%>"}, "<%=i%>");
<%Next %>
}
The above code will iterate through the Tags array, creating a line of Javascript code that will subscribe to the Tag as defined in the array.
Now to change the event handler. Locate the "fnRefreshResult()" function and replace it with the following
function fnRefreshResult()
{
var value = event.error ? "*** " + event.errorMessage : event.outputs;
var objName = event.info;
document.getElementById(event.info).value = value.Value;
document.all.iPlotX1.channel(event.info).AddYNow(value.Value);
objName = event.info + "Quality";
document.getElementById(objName).value = value.Quality;
objName = event.info + "Timestamp";
document.getElementById(objName).value = value.Timestamp;
}
Step 3 - Modifying the Chart ActiveX control to make it more dynamic
This part is not quite as easy as the previous changes, but is still not too difficult.
First of all, the ActiveX properties etc. are stored in a LOT of HTML code which is downloaded to the Browser. We need to specifically modify these lines so that they are dynamically created and sent to
the browser.
First Step - Removing unwanted Channels
Look in your HTML code and you will find a LOT of lines of code that start with the following:
<param name="Channel0.
... and the line continues...
Essentially this is where each channel is being configured. Each line starting out like this is configuring a specific property for this specific channel. So we need to first find all the
"channel0" lines and keep them safe... any lines that begin with "channel1" or higher, we need to delete. Essentially we want to keep all the "channel" lines of code and delete all the others.
Once all of the duplicate Channel information is removed, proceed to the second step.
Second Step - Creating the Chart's Channels dynamically
Removing the duplicate channnel information was the hard part, from here on it is much easier.
First we need to tell the ActiveX control HOW MANY channels the chart will have. Locate the following line of code:
<param name="ChannelCount" value="4">
... and modify it as follows:
<param name="ChannelCount" value="<%=UBound(Tags)%>">
Next, we need to configure the channels. We will insert the following ASP code ABOVE the first <param name="Channel0. line:
<%For i = 0 To UBound(Tags) - 1 %>
Now scroll to the last <param name="Channel0 line and add a line beneath it containing the following code:
<%Next %>
You now need to go in to all the lines in between the "FOR..NEXT" loop and modify each one so that the <param name="Channel0 is replaced with <param name="Channel<%=i%>. A simple Search & Replace is adequate here.
All of these changes will now dynamically configure a Channel for each Tag in our Array, but
with the channels sharing the same settings! As you scroll through the HTML code for the Channel settings, you will notice a variety of settings that you might wish to modify. This is up to you. Feel free to experiment!
However this example is now complete.
Last Step - Testing
Advanced Topic - Building Dynamic Chart-based Webpages