Example of connecting Industrial Graphics to InTouch tags

This example shows you how to connect a tank symbol with a percent vertical fill animation created by the Industrial Graphic Editor to an InTouch tag.

You do this in three main steps:

• Create a sample Tank as an Industrial Graphic.

• Create the InTouch application.

• Derive and view the sample tank in WindowViewer.

Create a sample tank as Industrial graphic

1. In the IDE, create a new symbol called "Tank" and open it in the Industrial Graphic Editor.

2. Paste a rectangle on the canvas. Change its appearance as needed.

3. Create a colored polygon element that represents a cutout of the tank to show the tank level.

   

4. Select the canvas.

5. On the Properties menu, in the Graphic group, select Edit.

   Alternatively, double-click the graphic object.

   The Edit Custom Properties dialog box appears.

6. Add a custom property called Level.

7. Configure the property details. Do the following:

   • In the Data Type list, select Float.

   • In the Default Value box, type 0.

     

8. Select OK.

9. Double-click on the polygon element that represents the tank level.

   The Edit Animations dialog box appears.

10. Add a % Vertical Fill animation.

11. In the Analog box in the right pane, type the name of the custom property. In this example, it is Level.

    

12. Select OK to close the Edit Animations dialog box.

13. Select Close and Save to close the Industrial Graphic Editor.

Create the InTouch application

14. In the System Platform IDE, create a new managed InTouch application. For more information, see Create a managed InTouch application.

15. Open the managed InTouch application in WindowMaker.

16. Create a new window called TankDisplay.

17. Open the Tagname Dictionary and create a new real InTouch tag named TankLevel.

18. Select the Embed Industrial Graphic icon.

    The Galaxy Browser dialog box appears.

19. Select the Tank symbol and select OK.

20. Select the new location within the window to embed the symbol.

    The Tank symbol is embedded into the window.

    

21. Right-click the embedded Industrial Graphic, point to Industrial Graphic "Tank", and then select Edit Symbol Properties.

    The Edit Symbol Properties dialog box appears.

22. Select the custom property Level.

23. In the Default Value box, type TankLevel. You can also select the ellipsis button to browse for TankLevel using the Select Tag dialog box.

24. Select OK.

25. Paste a slider on the window and configure it with the local InTouch tag TankLevel.

26. Save the changes and close WindowMaker.

    The managed InTouch application is automatically checked in.

Derive and test the sample tank

27. In the System Platform IDE, derive an instance of the managed InTouch application and deploy it together with a WinPlatform and a ViewEngine instance.

28. Open the InTouch Application Manager and start the listed application in WindowViewer.

    The tank and the slider appear on the window in WindowViewer.

29. You can move the slider to change the tank level.