|
|
|
|
|
|
Return to Documents list
Creating Web Pages with Real-time Charts
 
Introduction
This paper will show you how to create web-pages that contain charting controls that automatically update with live information via the OPC Web Client Web Service and a little Javascripting.
Click the "Live Online Demo" button (above) to see what this paper will show you how to create.
Pre-requisites
- This paper does require the use of the IOComp Plot Pack controls which can be downloaded from here.
- You will need the OPC Web Client Web Service installed, configured and in running order.
Although not required, this paper will use Microsoft FrontPage to develop the web-page with.
Several methods of accomplishing charting in web-pages
There are primarily 2 ways in which you can chart data in a web-page using the OPC Web Client and the IOComp Plot Pack components, for example:
- client-side scripting where the ActiveX and scripting run directly within the Browser.
- server-side scripting where the ActiveX is used by the Web Server (ASP/ASP.NET) and the chart is built by the web-server, and then a static image of the chart is downloaded to the browser (e.g. a
*.BMP, *.GIF or *.JPG).
In this paper, we will largely concentrate on item #1 above where the browser itself will host the charting component allowing the end-user to zoom in/out of the control and more..
What we will create
We will actually create a simple web-page that will log 4 tags to a chart, from the Simulation OPC Server (OPCLabs.KitServer.2) supplied with the OPC Web Client.
Getting Started - Step 1
Make sure that you have the IOComp Instruments installed on your computer first.
- Open Microsoft FrontPage
- Create a new web-page
- Go to the INSERT menu, choose ADVANCED and then pick ACTIVEX CONTROLS
- A dialog will open allowing to pick a control from a list of previously used controls.
If you have not used the PlotPack before then you will need to:
- Click the CUSTOMIZE button
- Another dialog of controls will open
- Scroll down the list and put a check in the box "IPlotX1".
- Click the OK button to choose the control.
- Select the "IPlotX Control" from the list and then click OK.
- The default Chart will be displayed in the web-page. FrontPage will create all of the HTML code for this control for you, automatically!
- Now we will setup the ActiveX control to look/feel the way we want it to:
- Right-click on the chart and choose "ActiveX Control Properties".
- An extensive properties-page will open containing 3-rows of Tabs.
- In the middle-row of Tabs, click on the "Channels" tab.
- Click the "Add" button 3 times. You will end-up with 4 channels (3 plus the default).
- You can click on each Channel, and modify the properties for it. This is up to you.
- In the middle-row of Tabs again, click the "X-Axis" tab.
- In here, we will specify that the axis at the bottom of the screen is to be formatted in time segments of 1-second. Here's how to do this:
- Locate the "Span" field.
- Click the "..." button beside the "span" field.
- A "Value Converter" window will open.
- Click the "Set All To 0" button.
- Set the "Seconds" field to 1.
- Click OK to save & close this window.
- Click the "OK" button again to close down the Property pages for the ActiveX control.
Step 2
Now that we have the control on our web-page, we are now going to flip-into the HTML for this page and setup our web-page to use poll our Tags for values:
- Click the "HTML" tab at the bottom of the FrontPage screen to go to the HTML for the page.
- Scroll to the Top of the code.
- Locate the "<body>" tag and modify it as follows:
<body onload="fnInit()">
- This will tell the browser to run the procedure called "fnInit()" when the page has finished loading.
- Now lets' create the "fnInit()" procedure.
- Scroll to the bottom of the web-page as we will put all of our code at the bottom of the web-page.
- Under the "</body>" tag, insert the following code:
<SCRIPT LANGUAGE="JScript">
//
// Intialization function, gets run immediately when the page is opened
function fnInit()
{
provider.init();
//
//the following lines are for the auto-polled tags, which will be bound directly to the text boxes
provider.subscribe({ServerClass: "OPCLabs.KitServer.2", ItemID: "Greenhouse.Temperature"}, "1");
provider.subscribe({ServerClass: "OPCLabs.KitServer.2", ItemID: "
Greenhouse.Humidity"}, "2");
provider.subscribe({ServerClass: "OPCLabs.KitServer.2", ItemID: "Greenhouse.RoofOpen"}, "3");
provider.subscribe({ServerClass: "
OPCLabs.KitServer.2", ItemID: "Greenhouse.Sprinklers"}, "4");
}
</SCRIPT>
Note: the BOLD
elements above indicate where you would insert the names of your OPC Server(s) and Tag(s).
- In order for the code above to work, we need to define the objects that we're actually calling, i.e. the "service"
and "provider" objects. So scroll back to the Top of the webpage, and insert the following lines of code beneath the "<body....>" tag:
<div id="service" style="behavior:url(
webservice.htc)" onresult="onWSresult()"></div>
<div id="provider" style="behavior:url(eagateway.htc)" webService="service"
onRefreshResult="fnRefreshResult()"></DIV>
Note: The files "webservice.htc" and "eagateway.htc" must be present on the web-server in the same
physical directory as the page we are creating. These pages are being "included" as part of this page, meaning that the code in these files will also be downloaded to the browser. So there is NO NEED to copy these files
manually to your browser-workstations.
- There is a reference to an event in the above code (line #2) called "fnRefreshResult()". This event is to handle
the incoming values for our subscribed Tags. We now need to create this event.
- Scroll down to the bottom of the HTML page once again, and insert the following code above the "</SCRIPT>" tag:
//
// This event is driven by OPC Web Client, specifically the "subscribe" method as seen in the "fnInit()" function.
function fnRefreshResult()
{
var value = event.error ? "*** " + event.errorMessage : event.outputs;
document.all.iPlotX1.channel(event.info - 1).AddYNow(value.Value);
}
- The above code will set the value object to the value of the incoming Tag. Next it will add that value to the Chart.
How this example Works
When the page is finished downloading to the client, and this includes the files "webservice.htc" and "eagateway.htc" the "fnInit()" event will be called.
Within the "fnInit()" event, we are setting-up our subscriptions to the Tags in our OPC Server. Here's the important part: note the end of the following line (taken from our code)
provider.subscribe({ServerClass: "OPCLabs.KitServer.2", ItemID: "Greenhouse.Humidity"}, "2");
Note the number "2" at the end of the line. This is a user-definable "key" for this tag. We are using this key in the
"fnRefreshResult()" event to specify a Channel in the ActiveX control where we are logging our value to.
If you wanted more/less Tags/Channels in your Chart, then you would simply:
- Increase/Decrease the number of "provider.subscribe({....}, "..")" lines that subscribe to your Tags
- Increase/Decrease the number of channels in the ActiveX control to match the number of Tags you are subscribing to.
Conclusion
This paper has shown you that you can quite easily create a web-page containing a chart with real-live data.
Downloads
Related Links
Advanced Topic - For Advanced Web Developers
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
Go to the Advanced - Dynamic Charting Pages paper now!
|
|
|
|
|
