Using Instrumentation ActiveX Controls with OPC Server In Web-pages Introduction Instrumentation ActiveX controls provide an easy method of displaying vital PLC statistics and data via icons or animated gauges. For example, if you monitored the RPM of a running motor, then you could graphically see the RPM on your computer screen in the form of an actual tachometer, like the one you have in your car. The Instrumentation ActiveX controls have OPC client compatibility built-in. Using the ActiveX controls with data from tags in the OPC Server is how the controls will be used and discussed within this document. Purpose of this document The purpose of this document is to explain to programmers and web-developers alike, how to use the Instrumentation ActiveX controls within web-based applications and documents. Pre-requisites This document is not restricted to, but is aimed mainly at the individual with experience in:- • ActiveX • HTML • PLC hardware and configuration • OPC To successfully complete the example within this document, you will need the following tools: • OPC Server, e.g. TopServer • HTML editor, e.g. FrontPage • IOcomp ActiveX controls - click here to download the demo. • web browser, e.g. Internet Explorer (IE) Compatible versions of IE include: IE 3.x, IE 4.x, IE 5.5, and IE 6.0. Incompatible versions of IE include: (bugs in the browsers themselves) 5.0, IE 5.0SP1, or IE 5.01SP2 Objective After reading this document, the reader should be able to: • insert ActiveX controls in a web-page • configure the ActiveX control to communicate with a PLC How this document is written This document is not a user manual or a technical reference. This document is a "Getting Started" manual only. Written as a tutorial, you can expect to see step-by-step instructions with << explanations >> where additional information is offered. This document contains many sample screens to reinforce the written content. Assumptions made by the Author This document will demonstrate how to use the Instrumentation ActiveX controls within a web page using a variety of software: • OPC server - it is assumed that you are using the TopServer product running the "simdemo.opf" demo supplied with the TopServer • HTML editor - it is assumed that you are using Microsoft FrontPage • ActiveX controls - it is assumed that you have the Instrumentation ActiveX controls installed • Browser - it is assumed you are using Internet Explorer (IE) - please check your version is compatible as detailed in the Pre-requisites section. The Instrumentation ActiveX controls are OPC compliant and will work with any OPC server. You may use any HTML editor, but for this exercise we will concentrate on those products named above. Creating Web-based Applications using IOcomp ActiveX Setting-up Tags within the OPC Server You may wish to use your own tag database within the TopServer. For this exercise, we will use the "simdemo.opf" file supplied with the TopServer. Here are the instructions for loading "simdemo.opf": 1. Open the TopServer; the default location is: START (cid:214) Programs (cid:214) Software Toolbox (cid:214) Top Server (cid:214) Top Server 2. Open the "FILE" menu and choose "OPEN" 3. By default, the "open" window will go directly to the "Projects" folder, within the TopServer product directory. Double-click on the "simdemo.opf" file. If you are not in the "Projects" folder, here is the default path: \program files\software toolbox\top server\projects 4. Your TopServer screen should show the following Channels, devices and tags: If you have never used the TopServer product before, we suggest you read our Quick Start Guide. Starting your web-page This section will assume you are using Microsoft FrontPage to develop your web-document and that you are already familiar with its basic operation. 1. Open Microsoft FrontPage and create a NEW document. 2. Feel free to create a Page Title, but do not get too creative at this point - keep it simple! Inserting the ActiveX Control 1. When ready to add the ActiveX component in FrontPage, simply open the INSERT menu and select Advanced (cid:214) ActiveX Control. 2. The following window will open (contents may vary from machine to machine based on the ActiveX controls you have installed): What should I be looking for? The Instrumentation ActiveX controls each have a unique name. I will show you some of the controls, followed by their given names... iAngularGaugeX iCompassX iKnobX iLedArrowX iLedDiamondX iLedSquareX iOdometerX iSwitchLedX iSwitchLeverX iLedRoundX iSwitchToggleX iSpectrumX 3. For this exercise, we want to add the Angular gauge, it's name is "iAngularGauge Control". Find that control and double-click on it. 4. If the ActiveX control you need is not listed, click on the CUSTOMIZE button at the bottom of the window. 5. Locate and select your ActiveX component by placing a "check" in the relevant check-box. Click OK to close the window. 6. You will return to the window shown in Step 4. 7. Select the ActiveX control you wish to use in your web-page and then click the OK button. 8. The control should appear on your form, something similar to the following: You have just added an ActiveX component into your web-document. Configuring ActiveX Control Now we will connect our ActiveX control to a tag in the OPC server. 1. Right-click on your control and choose Properties from the resulting menu 2. A window similar to the following should open: (results may vary depending on the ActiveX control you choose) 3. You can configure your control to look and behave the way you want by setting the properties in this Dialog. Feel free to experiment. 4. To connect the control to a tag in your OPC server, click on the OPC tab. 5. The OPC tab is shown below: 6. Click on the ADD button, a list of properties for the ActiveX control will be displayed. 7. This list is shown below: (contents will vary depending on the ActiveX control you chose to use) General Advice: generally speaking, the majority of the controls use the same property names. The most common properties you will attach to a tag are:- a. POSITION - usually used with Gauge controls to define the position of a needle, gauge or slider etc. b. ACTIVE - usually used with LEDs or other discrete elements to determine "ON" or "OFF" status etc. 8. Once you have found the property you wish to use, highlight it and then click the OK button. 9. The OPC tab screen should now look like: 10. We have not finished yet! 11. If the OPC Server is NOT installed on your computer, but exists on another computer, then click on the button "..." next to the "COMPUTER" field. Otherwise, leave this field as "LOCAL" and go to step #15. It is strongly urged to use a local OPC server for this exercise. 12. The following window will open: 13. Double-click on the name of the computer containing the server. 14. Now you need to choose the OPC Server. NOTE: if you are attaching to a remote computer, this document assumes that you have the Security Rights & DCOM settings properly configured. This is discussed here. 15. Click on the button "..." next to the "OPC SERVER" field. 16. A window similar to the following should open: (the list of available OPC servers will depend on what is installed on the chosen PC) 17. Double-click on the name of the OPC Server you want to use - in our case SWToolbox.TopServer. 18. You will return back to the OPC Tab. 19. Now we need to specify which tag in the OPC server to connect the control to... 20. Click on the "..." button, next to the "ITEM" field.
Description: