Using .NET Controls to display graphics, documents, and web pages in AVEVA InTouch

SUMMARY

InTouch allows you to add additional functionalities using .NET controls. By default, the Alarm Client and Trend Client .NET controls are included in applications.

You can import a variety of .NET controls to add extended functionality to your InTouch application. In this tech note, we will cover using the .NET WebBrowser Control to view external graphics, documents, and web pages within an InTouch application. The .NET WebBrowser Control is part of the System.Windows.Forms Namespace. You can find more information here: https://learn.microsoft.com/en-us/dotnet/api/system.windows.forms.webbrowser?view=windowsdesktop-7.0

Here is a small list of file types that are commonly viewed with the WebBrowser Control:

.TXT .RTF .CSV .DOC .XLS .HTML .PDF .BMP .GIF .JPG .AVI .XML

NOTE: Before attempting to view a file, folder or website from within InTouch, use a web browser to verify that the files you intend to view are actually viewable.

APPLIES TO:

• AVEVA InTouch applications using Industrial Graphics

PROCEDURE

1. Create a new InTouch application in InTouch Application Manager and then open WindowMaker.
2. Go to File > Import > Client Control to import a new .NET Control

3. Browse to C:\Windows\Microsoft.NET\Framework\v4.0.30319 and locate System.Windows.Forms.dll. Select this DLL and click Open.

NOTE: The folder number may vary depending on the version of .NET you have installed.

4. After importing, you will notice several new .NET controls have been added, all from the System.Windows.Forms Namespace. Locate the control named WebBrowser in the Industrial Graphic Toolbox.

5. NET Controls must first be embedded in an Industrial Graphic. Right-click in the Industrial Graphic toolbox and create a new graphic (we have named ours WebBrowserSym) and then open this graphic up in Graphic Editor.

6. Within the Graphic Editor, select the Embed Industrial Graphic button, browse to the WebBrowser control, and place it on the canvas.

7. In the next few steps, we will place a # character on the screen and assign a message tag called URL. Stretch the control out to fill most of the InTouch window.
8. Save and close the graphic temporarily. In WindowMaker, open the Tagname Dictionary and create a new Memory Message tag named URL. Configure an Initial Value of “Enter File Location”. Then save and close.

9. Return to the WebBrowserSym graphic. Using the Text tool, place a # character above the left edge of the .NET Control

10. Double-click the Text1 element and add a User Input animation for a String state.

11. Enter the tagname “URL” for the String reference and “Please enter a file location or website address.” for the Message to User. Uncheck Use Keypad. Then click OK.

12. Next, add a button element above the ‘#’ character, replacing “Button1” with “GO”. Double-click the button to add an Action Script animation.

13. In the script body, enter the function Navigate(URL); where “URL” is the reference to our memory tag.

14. Click OK to close the Animations window and then Save and Close the symbol. In WindowMaker, create a new Window and place the WebBrowserSym symbol in the window by dragging and dropping. Once the graphic is placed in the new window, switch to WindowViewer.

15. Select “Enter File Location”, type a valid file, folder or webpage location and click enter. The text will populate with the specified location. Then, click GO.

WARNING: Internet Explorer can be used to view and modify local and network files, folders and drive contents, all from inside InTouch. When you direct this control at a local or network drive, for example C:\ or \\NetworkServer you essentially have Windows Explorer capabilities at your disposal. Be aware, you can delete files while using this control. Use extreme caution when using this control in this fashion.