AUTOMATIONWORX

Quick Start UM QS EN WEBVISIT

Order No.: 2910020

WebVisit

AUTOMATIONWORX

Quick Start WebVisit

09/2007

Designation: Revision: Order No.:

UM QS EN WEBVISIT 01 2910020

This user manual is valid for: Designation WebVisit Basic Version 5 or higher Order No. 2985990

7361_en_01

PHOENIX CONTACT

WebVisit

Please Observe the Following Notes

In order to ensure the safe use of the product described, we recommend that you read this manual carefully. The following notes provide information on how to use this manual. User Group of This Manual The use of products described in this manual is oriented exclusively to qualified application programmers and software engineers, who are familiar with the safety concepts of automation technology and applicable standards. Phoenix Contact accepts no liability for erroneous handling or damage to products from Phoenix Contact or third-party products resulting from disregard of information contained in this manual. Explanation of Symbols Used The attention symbol refers to an operating procedure which, if not carefully followed, could result in damage to hardware and software or personal injury. The note symbol informs you of conditions that must be strictly observed to achieve errorfree operation. It also gives you tips and advice on the efficient use of hardware and on software optimization to save you extra work. The text symbol refers to detailed sources of information (manuals, data sheets, literature, etc.) on the subject matter, product, etc. This text also provides helpful information for the orientation in the manual. We Are Interested in Your Opinion We are constantly striving to improve the quality of our manuals. Should you have any suggestions or recommendations for improvement of the contents and layout of our manuals, please send us your comments. PHOENIX CONTACT GmbH & Co. KG Documentation Services 32823 Blomberg Germany Phone Fax E-mail +49 - 52 35 - 30 0 + 49 - 52 35 - 34 20 21 tecdoc@phoenixcontact.com

PHOENIX CONTACT

7361_en_01

WebVisit General Terms and Conditions of Use for Technical Documentation Phoenix Contact GmbH & Co. KG reserves the right to alter, correct, and/or improve the technical documentation and the products described in the technical documentation at its own discretion and without giving prior notice, insofar as this is reasonable for the user. The same applies to any technical changes that serve the purpose of technical progress. The receipt of technical documentation (in particular data sheets, installation instructions, manuals, etc.) does not constitute any further duty on the part of Phoenix Contact GmbH & Co. KG to furnish information on alterations to products and/or technical documentation. Any other agreement shall only apply if expressly confirmed in writing by Phoenix Contact GmbH & Co. KG. Please note that the supplied documentation is product-specific documentation only and that you are responsible for checking the suitability and intended use of the products in your specific application, in particular with regard to observing the applicable standards and regulations. Although Phoenix Contact GmbH & Co. KG makes every effort to ensure that the information content is accurate, up-to-date, and state-of-the-art, technical inaccuracies and/or printing errors in the information cannot be ruled out. Phoenix Contact GmbH & Co. KG does not offer any guarantees as to the reliability, accuracy or completeness of the information. All information made available in the technical data is supplied without any accompanying guarantee, whether expressly mentioned, implied or tacitly assumed. This information does not include any guarantees regarding quality, does not describe any fair marketable quality, and does not make any claims as to quality guarantees or guarantees regarding the suitability for a special purpose. Phoenix Contact GmbH & Co. KG accepts no liability or responsibility for errors or omissions in the content of the technical documentation (in particular data sheets, installation instructions, manuals, etc.). The aforementioned limitations of liability and exemptions from liability do not apply, in so far as liability must be assumed, e.g., according to product liability law, in cases of premeditation, gross negligence, on account of loss of life, physical injury or damage to health or on account of the violation of important contractual obligations. Claims for damages for the violation of important contractual obligations are, however, limited to contract-typical, predictable damages, provided there is no premeditation or gross negligence, or that liability is assumed on account of loss of life, physical injury or damage to health. This ruling does not imply a change in the burden of proof to the detriment of the user.

7361_en_01

PHOENIX CONTACT

WebVisit Statement of Legal Authority This manual, including all illustrations contained herein, is copyright protected. Use of this manual by any third party is forbidden. Reproduction, translation, and public disclosure, as well as electronic and photographic archiving or alteration requires the express written consent of Phoenix Contact. Violators are liable for damages. Phoenix Contact reserves all rights in the event of a patent being granted, in as far as this concerns software of Phoenix Contact that meets the criteria of technicity or has technical relevance. Third-party products are always named without reference to patent rights. The existence of such rights shall not be excluded. Windows 3.x, Windows 95, Windows 98, Windows NT, Windows 2000, and Windows XP are trademarks of the Microsoft Corporation. All other product names used are trademarks of the respective organizations. Internet Up-to-date information on Phoenix Contact products can be found on the Internet at: www.phoenixcontact.com Make sure you always use the latest documentation. It can be downloaded at: www.download.phoenixcontact.com A conversion table is available on the Internet at: www.download.phoenixcontact.com/general/7000_en_00.pdf

PHOENIX CONTACT

7361_en_01

Table of Contents
1 General....................................................................................................................................1-1
1.1 1.2 1.3 Introduction ........................................................................................................ 1-1 Information About This Manual ..........................................................................1-1 System Requirements ........................................................................................1-1 1.3.1 Supported Operating Systems ........................................................... 1-1 1.3.2 Hardware Requirements .....................................................................1-2 Supported Control Systems ............................................................................... 1-2 Ordering Data..................................................................................................... 1-2

1.4 1.5

Installing and Enabling the Software .......................................................................................2-1

2.1 2.2 2.3 2.4 2.5 Prior to Installation ............................................................................................. 2-1 AUTOMATIONWORX Software Suite................................................................ 2-1 Starting the Installation Program ........................................................................ 2-2 Starting WebVisit................................................................................................2-2 Enabling the WebVisit License........................................................................... 2-2

WebVisit ..................................................................................................................................3-1
3.1 3.2 3.3 3.4 3.5 Abbreviations Used ............................................................................................ 3-1 File Formats ....................................................................................................... 3-2 The WebVisit User Interface .............................................................................. 3-3 Menu Bar ........................................................................................................... 3-4 Toolbar for Graphic Icons...................................................................................3-6 3.5.1 Static Graphic Icons ........................................................................... 3-6 3.5.2 Dynamic Graphic Icons ...................................................................... 3-7 Properties Dialog Box ........................................................................................3-8 3.6.1 General ............................................................................................... 3-8 3.6.2 Repaints ............................................................................................. 3-9 3.6.3 Actions ..............................................................................................3-11 3.6.4 Border Advanced ..............................................................................3-12 3.6.5 Text Positions Advanced ..................................................................3-13 3.6.6 Bargraph Advanced .......................................................................... 3-13 3.6.7 Line Advanced .................................................................................. 3-14 3.6.8 On Condition ..................................................................................... 3-14 Group Properties Dialog Box ...........................................................................3-15 3.7.1 Advanced Select ............................................................................... 3-16 3.7.2 General ............................................................................................. 3-16 3.7.3 Cross Ref .......................................................................................... 3-17

3.6

3.7

7361_en_01

PHOENIX CONTACT

WebVisit

Visualization With WebVisit .....................................................................................................4-1

4.1 4.2 4.3 4.4 4.5 PC WorX and WebVisit ...................................................................................... 4-1 Creating a New Project ...................................................................................... 4-1 Configuring a Project.......................................................................................... 4-2 Generating a Graphic View ................................................................................4-3 Inserting Graphic Visualization Objects.............................................................. 4-3 4.5.1 Graphic Icons for Visualization ........................................................... 4-4 4.5.2 Static Text for the Start, OUT3, Output V0 Headings ......................... 4-6 4.5.3 Static Text for Color Display of Start Variables .................................. 4-7 4.5.4 Rectangle as Background for Traffic Light .........................................4-8 4.5.5 Ellipses as Traffic Light .......................................................................4-9 4.5.6 Static Text for Displaying the Value of the V0 Variable .................... 4-10 4.5.7 Edit Box for the Manual Variable ...................................................... 4-11 4.5.8 Button for Toggling the Status of the Manual Variable ..................... 4-12 4.5.9 Static Text for Displaying the Value of the Number_of_Toggles Container Variable .......................................... 4-14 4.5.10 Bargraph for V0 ................................................................................4-15 Generating a Second Graphic View ................................................................. 4-17 Inserting Graphic Visualization Objects............................................................ 4-17 Navigating Between Graphic Views ................................................................. 4-18 Saving Graphic Views ......................................................................................4-21 Generating an HTML Page ..............................................................................4-21 Initial Test in the Browser .................................................................................4-21 Specifying the Value Range for Edit Box ......................................................... 4-21 Initializing Container Variables ......................................................................... 4-23 Data Transmission to the Control System........................................................ 4-24 Display in Internet Browser ..............................................................................4-26 Changes to the Project..................................................................................... 4-27 HMI With Several Graphic Views .....................................................................4-27

4.6 4.7 4.8 4.9 4.10 4.11 4.12 4.13 4.14 4.15 4.16 4.17

Appendix: Example Project in PC WorX................................................................................. A-1

A1 A2 Description of the Project ................................................................................. A-1 Developing a Project in PC WorX .................................................................... A-3 A 2.1 Building the Hardware Structure ........................................................ A-3 A 2.2 Creating the Program ........................................................................ A-4 A 2.3 Assigning Process Data .................................................................... A-9 A 2.4 Operation ........................................................................................... A-9

ii

PHOENIX CONTACT

7361_en_01

General

General
1.1 Introduction

WebVisit is a software program used to generate websites. The software runtime component is a web server, which is stored on the control system. The variable values are actually visualized via a Java-compatible standard browser.

1.2

Information About This Manual

This document uses an example project to help you to get started with visualizing the variables you have created in PC WorX. The example project created in the Quick Start Guide for PC WorX is used. It is briefly described in "Appendix: Example Project in PC WorX" on page A-1. It is assumed the user has knowledge and experience in the operation of PCs and Windows operating systems. More detailed information about the individual functions of the WebVisit can be found in the online help for the program. The help function can be called via "Help" in the menu bar.

1.3
1.3.1

System Requirements
Supported Operating Systems

Windows 2000 Windows XP (recommended)

7361_en_01

PHOENIX CONTACT

1-1

WebVisit

1.3.2

Hardware Requirements

Hardware Requirements for WebVisit CPU Main memory Hard disk space CD-ROM drive Ethernet interface Monitor Operating devices Web browser Pentium III 800 MHz 128 MB, minimum 100 MB free, minimum Yes Yes SVGA minimum, recommended resolution of 1024 x 768 Keyboard, mouse Java Standard Edition SE 6 (or higher) with at least Java Runtime Environment JRE 6 (version 1.6.x or higher)

1.4

Supported Control Systems

You can use WebVisit to visualize projects running on the following control systems: Control System ILC 150 ETH ILC 3xx PN ... ILC 3xx ETH ... CP 3xx FC 350 PCI ... Firmware Version 2.00 1.41 1.20 1.41 1.41

1.5
Products Description

Ordering Data
Type
WEBVISIT BASIC

Order No.
2985990

Pcs./Pck.
1

Tool for creating websites for Phoenix Contact control systems

Documentation Description
Quick Start Guide "PC WorX"

Type
UM QS EN PC WORX

Order No.
2699862

Pcs./Pck.
1

1-2

PHOENIX CONTACT

7361_en_01

Installing and Enabling the Software

Installing and Enabling the Software

2.1 Prior to Installation

Prior to installation, close all open Windows applications.

2.2

AUTOMATIONWORX Software Suite

WebVisit is part of the AUTOMATIONWORX Software Suite. The following programs belong to the AUTOMATIONWORX Software Suite: Config+ Simple configuration and commissioning of INTERBUS networks Diag+ User-friendly network diagnostics during commissioning and operation Diag+ NetScan User-friendly monitoring of multiple INTERBUS networks PC WorX Uniform IEC-61131 programming environment for all PHOENIX CONTACT control systems AX OPC Server Software for exchanging data between distributed INTERBUS networks and visualization systems WebVisit Tool for creating websites for PHOENIX CONTACT control systems You can select the required programs individually or simultaneously for installation. As you can use WebVisit to visualize variables from PC WorX, you should install these two programs as a minimum. You only need to select Diag+ if you want to use it independently of PC WorX. When PC WorX is installed, Diag+ is installed as part of PC WorX. When one of the programs in the Software Suite is started for the first time, it runs in demo mode with limited resources. A registration code is required to enable the full version. You will receive the registration code when a full version of the relevant program is purchased.

7361_en_01

PHOENIX CONTACT

2-1

WebVisit

2.3

Starting the Installation Program

Usually, the installation program will start automatically a few seconds after you place the CD-ROM in the CD drive. If it does not, start the "SETUP.EXE" file from the "[Drive]:\SETUP\" directory on the CD-ROM. This file calls the installation wizard, which guides you through the installation process. Follow the installation program instructions. The installation program will generate all the directories necessary for operation and will copy the files for the programs you have selected. Following successful installation, restart your PC to apply the changes to the configuration files. To do this, click "Finish" at the end of the installation process.

2.4

Starting WebVisit

For installation using the default settings, start WebVisit via "Start/Programs/Phoenix Contact/AUTOMATIONWORX Software Suite .../WebVisit". When started for the first time, WebVisit runs in demo mode.

If you wish to switch from demo mode to the full version, enable your WebVisit license.

2.5

Enabling the WebVisit License

Enable your license in the AUTOMATIONWORX Software Suite License Manager. For installation using the default settings, start the License Manager via "Start/Programs/Phoenix Contact/License Manager". Select "WebVisit" as the version. Enter your registration code. Confirm your entry with "Apply Settings". Close the License Manager. Registration will come into effect when WebVisit is started again.

2-2

PHOENIX CONTACT

7361_en_01

WebVisit

WebVisit
3.1 Abbreviations Used

HMI

Human Machine Interface, e.g., a WebVisit graphic view displayed on a touch panel or in a PC browser. File extension for WebVisit projects created using the WebVisit editor. A WebVisit project contains all information required in order to create an HMI on a touch panel or in a browser. A WebVisit graphic view is comprised of WebVisit graphic icons and represents the HMI. A graphic view of this type is stored in a *.teq file. File extension of a WebVisit graphic view generated by the WebVisit editor. A graphic icon is a visualization object used by the WebVisit editor to draw graphic views. These objects are programmed in Java. The objects of a graphic view are saved on the target system in a Java applet. Small program written in Java programming language that is loaded from a server (in this case a control system) and interpreted and executed in a user browser that has Java capability. Process Data Point. A PDP is any application-software variable that is to be made visible and/or enabled for operation in a WebVisit graphic view. The designation PPO is used as a data type in WebVisit. A container is a local variable within the WebVisit editor. A variable of the CONTAINER type is used to exchange data between the graphic icons of one or more graphic views.

*.prj

Graphic view

*.teq Graphic icon

Java applet (applet)

PDP (PPO)

Container

7361_en_01

PHOENIX CONTACT

3-1

WebVisit

3.2

File Formats

All the file formats required to generate an HMI based on WebVisit are listed below. The browser addresses an html page as follows: http://<target system ip address>/<project>.html. This file is generated by WebVisit ("Project... Generate HTML..." menu). The file contains a reference to a Java applet that is responsible for visualization. If the project's html page is called entry.html, its file name does not need to be entered. In this case, only the IP address of the target system needs to be entered for addressing purposes. Other references point to *.teq files, which are generated by the WebVisit editor for every graphic view and determine the layout of those graphic views. All Java classes are saved in a Java archive called IMaster.jar. The following files must be saved in the target system in order to obtain a visualization based on an embedded web server: The homepage of "<project>.html" The Java class library "IMaster.jar" All graphic views (*.teq) All additional user-specific HTML files (help pages, for example) All view files that are used The variable initialization files "<project>.tcr" and "<project>.itq" Please note that for web pages created by users, paths are not used as references, as subdirectories are not supported.

3-2

PHOENIX CONTACT

7361_en_01

WebVisit

3.3

The WebVisit User Interface

The user interface appears when WebVisit is started. The main window is divided into two sections. All open project files are displayed on the left-hand side. On the right-hand side, the graphic views for the open project are displayed and can be edited. Menu bar Toolbar for graphic icons Project files Graphic views

Toolbar Status bar Figure 3-1 User interface

7361_en_01

PHOENIX CONTACT

3-3

WebVisit

3.4

Menu Bar

Standard menu commands are not described here.

File New Project... Open Project... Close Project Save All Project Add To Project New File Remove From Project... Remove/Delete From Project... Project Configurations... Teq Configurations Width Height Background Color Foreground Color Font Background Teq applet params period Main teq Debug Adds a graphic view or file to the project. Creates a new graphic view. Adds a file to the project. Removes a file from the project. Removes a file from the project. Configures the project's basic settings. Changes to the settings can only be made by means of new graphic views. Default settings for new graphic views Standard width of a graphic view in pixels Standard height of a graphic view in pixels Standard background color Standard font/outline color Standard font type for graphic icons Defines a graphic view as the background view for new graphic views. Parameters for the Java applet Update rate for the process data points in ms Start screen when the HMI is loaded When debug mode is activated, you can use advanced debug information. You must have a Java Console installed to take advantage of this feature, which is called in the Internet Explorer, for example, via "Tools... Sun Java Console". When the message box is activated, error messages are displayed. Currently not supported. Updates process data points for each view (see also "Applet params" on page 4-2). Do not use, not supported in later versions. When activated (recommended), special characters in the PPO name are processed correctly. Creates a new HMI project. Opens an existing HMI project. Closes the active HMI project. Saves the active HMI project.

Message Box HTML Parameters in csv File Order Per View Teq archive Encode Special Chars

3-4

PHOENIX CONTACT

7361_en_01

WebVisit Phoenix PC WORX Project Settings *.mwt path PDD.CSV Path Grid Configurations... Grid Visible Grid Snap X Y Grid Color Init Containers... Init PPOs... Generate HTML... Download Project... Library Layout Align Left Right Top Bottom Center Horizontally Vertically Make Same Size Width Height Both Order To Back To Front Group Group UnGroup Edit Polygon Points Cross Ref... Aligns the selected graphic icons. At least two graphic icons must be selected in order for these functions to work. Aligns the graphic icons to the left edge. Aligns the graphic icons to the right edge. Aligns the graphic icons to the top edge. Aligns the graphic icons to the bottom edge. Centers the graphic icons in the graphic view. Centers the graphic icons horizontally. Centers the graphic icons vertically. Makes the graphic icons the same size. At least two graphic icons must be selected in order for these functions to work. Makes the widths of the graphic icons the same. Makes the heights of the graphic icons the same. Makes the heights and widths of the graphic icons the same. Sets the order of the graphic icons. Moves the graphic icon back one level. Moves the graphic icon forward one level. Groups/separates graphic icons. Groups the selected graphic icons. Ungroups a selected group. The points of the selected polygon can be edited. Displays cross-references. Project settings for connecting to PC WorX (see also "Phoenix PC WORX Project Settings" on page 4-3). Path to PC WorX project Path to the file with variables from PC WorX for WebVisit Configures the auxiliary grid. When the grid is activated, only new or selected graphic icons are snapped to the grid. Switches the grid on/off. Snaps the icons to the grid. Horizontal grid spacing Vertical grid spacing Color of the grid Initializes variables of the CONTAINER type. Initializes variables of the PPO type. Generates the homepage of the HTML file, which contains the WebVisit applet. Downloads the project to the target system. Currently not supported.

7361_en_01

PHOENIX CONTACT

3-5

WebVisit

3.5

Toolbar for Graphic Icons

Proceed as follows to select and configure a graphic icon: Select the required icon from the graphic toolbar. Hold the mouse button down and drag the graphic icon from the top left corner to the bottom right corner. Double-click the graphic icon to open the Properties dialog box and configure the graphic icon (see also "Properties Dialog Box" on page 3-8). All available graphic icons appear on the graphic toolbar.

Figure 3-2 Selection

Toolbar for graphic icons

Selection of a graphic icon

3.5.1
Line, Rectangle, Ellipse, Polygon

Static Graphic Icons

Line, rectangle, ellipse, polygon These icons are purely drawing elements. You can link the color properties to a process data point or container in order to change the color. However, these graphic icons cannot be used to display process data points or containers.

Figure 3-3 Image Image

Line, rectangle, ellipse, polygon

You can use this graphic icon to display an image that is linked to the icon as an external file. The "GIF" file format is supported.

Figure 3-4

Image

You can also link two images, one of which is displayed dependent upon a condition. The image is scaled according to the size of the graphic icon and, if the image has a transparent background, the background color of the graphic icon will be visible.

3-6

PHOENIX CONTACT

7361_en_01

WebVisit

3.5.2

Dynamic Graphic Icons

You can link dynamic graphic icons to a process data point or container. This provides a means of displaying and modifying process data points or containers. You can configure colors dependent upon a process data point or container. Static text Static text Text field for outputting a static text (as a STRING or HTML TAG) associated with a process data point or a container variable.

Figure 3-5 Edit box Edit box

Static text

An edit box can be used to display and modify a process data point (PDP) or a container variable.

Figure 3-6 Button Button

Edit box

A button can be used to set process data points, switch graphic views, call external web pages, and toggle or increment variables.

Figure 3-7 Bargraph Bargraph

Button

A bargraph can be used to display a process data point or a container variable graphically and dynamically. The value range of the bargraph can be parameterized.

Figure 3-8

Bargraph

7361_en_01

PHOENIX CONTACT

3-7

WebVisit

3.6

Properties Dialog Box

You can configure the properties of graphic icons using the Properties dialog box. Open the Properties dialog box for a graphic icon by double-clicking the icon. The properties are grouped on several tabs. Each graphic icon has its own properties so not all tabs of the Properties dialog box will always be available.

Figure 3-9

Possible tabs in the Properties dialog box (in this case for Button)

3.6.1

General

This tab is available for all graphic icons.

Figure 3-10

"General" tab

You specify general format properties on this tab. These include the position, size, interior and outline color, line width and style, and font type. The x-axis runs from left to right and the y-axis from top to bottom, so the zero point is located in the top left corner. The font types originate from the Java Virtual Machine. PC fonts cannot be used. Different systems (browsers) may display fonts differently.

3-8

PHOENIX CONTACT

7361_en_01

WebVisit

3.6.2

Repaints

This tab is available for all graphic icons.

Figure 3-11 Edit a Source (2)

"Repaints" tab

The "Edit a Source" and "Edit a Source 2" properties are available for all graphic icons, which can display an external data source, such as Static text (text field), Edit box, Image, Bargraph or Button. This means that you can connect up to two external data items to a graphic icon and, if required, include a link to a condition (On Condition). When you activate the data source, a list appears from which you can specify the type and name of the external data source.

7361_en_01

PHOENIX CONTACT

3-9

WebVisit The following types exist, although not all types are available for all graphic icons: Table 3-1 Type FILE PPO CONTAINER Types for graphic icons Meaning An image file of the *.gif type can be entered as the name. A graphic icon can be linked to a process data point (PDP). The PDP can be entered in the "Name" field. A graphic icon can be linked to a WebVisit internal variable. These variables are only visible within the HMI and can be initialized using the "Project... InitContainers..." menu command. A simple text string can be displayed. This function has not yet been implemented in this version of WebVisit. If you select HTML_TAG as the type, it is interpreted internally as a string.

STRING HTML_TAG

Figure 3-12

Examples of types of graphic icon: Static text type

A connection must have been established with a corresponding PC WorX file in the project configuration in order to select "PPO" as the type (see "Configuring a Project" on page 4-2). Hide Painter The "Hide / Disable Painter On Condition" (hidden if condition is true) and "Hidden Painter" (hidden) properties are available for all icons. You can use these properties to show/hide a graphic icon, linked to a condition if required.

3-10

PHOENIX CONTACT

7361_en_01

WebVisit

3.6.3

Actions

This tab is only available for the Button graphic icon.

Figure 3-13

"Actions" tab

On this tab you set the action to be triggered when the mouse clicks a button. Table 3-2 Action Set Var on Mouse DOWN Set Var on Mouse UP Toggle Button Increment View Jump View Name Back Button URL Jump Actions for the Button graphic icon Effect Left-clicking the button assigns the value of "Value" to a variable (PPO or CONTAINER). Left-clicking the button assigns the value of "Value" to a variable (PPO or CONTAINER) when the mouse button is released. Depending on the status of the button, a variable is alternately set to "1" or "0". Clicking the button increments a variable (PPO or CONTAINER) by the value of "Value". This allows you to switch to a different graphic view. Name of the graphic view, to which you want to switch Clicking the button switches to the graphic view specified in "Actual Page". This allows you to implement an HTML hyperlink to call an HTML page of your choice.

7361_en_01

PHOENIX CONTACT

3-11

WebVisit

3.6.4

Border Advanced

This tab is available for all graphic icons.

Figure 3-14

"Border Advanced" tab

On this tab you set the color properties dependent upon a variable (process data point or container). Three colors can be used to test a variable against a minimum and a maximum value. This results in three cases, each of which can be assigned its own color. This applies to both the interior color and the outline color. You can use the "2 Colors on conditions" option to set whether you want to control two or three colors dependent upon a variable. With two colors, a variable can be tested at 0 or 1 and a different color can be assigned to each case. This applies to both the interior color and the outline color. The interior color and the outline color can be shown or hidden, dependent upon a variable.

3-12

PHOENIX CONTACT

7361_en_01

WebVisit

3.6.5

Text Positions Advanced

This tab is only available for the Static text or Button graphic icons.

Figure 3-15

"Text Positions Advanced" tab

On this tab you set the text alignment dependent upon a variable.

3.6.6

Bargraph Advanced

This tab is only available for the Bargraph graphic icon.

Figure 3-16

"Bargraph Advanced" tab

On this tab you can set the minimum, maximum, orientation, and scale of the bargraph.

7361_en_01

PHOENIX CONTACT

3-13

WebVisit

3.6.7

Line Advanced

This tab is only available for the Line graphic icon.

Figure 3-17

"Line Advanced" tab

On this tab you specify whether the start and end of a line are to be marked with an arrow or not.

3.6.8

On Condition

Certain properties of graphic icons can be linked to a condition, for example, the data sources in the Properties dialog box under "Repaints" or the color change under "Border Advanced". The format of these conditions is always the same and is described below. First, in the "Type" field, select the type of the variable on which the condition is to depend. This can be the PPO (process data point) type or the CONTAINER (HMI internal variable) type. Enter the name of the variable in the "Name" field. Select the comparison type in the "Select" field. The following options are available: != < <= == >= > does not equal less than less than or equal to equals greater than or equal to greater than

Enter the value with which the variable is to be compared in the "Value" field.

3-14

PHOENIX CONTACT

7361_en_01

WebVisit

3.7

Group Properties Dialog Box

Grouping can be used to change the properties of several graphic icons at the same time. Select the required icons. To do this, draw a border around the graphic icons or leftclick them while holding down the shift key.

Figure 3-18

Grouping graphic icons

Select the "Group... Group" command from the "Layout" menu or click the icon in the toolbar at the bottom of the screen.

Figure 3-19

"Layout... Group... Group" menu command

Figure 3-20

"Group Selected Objects" toolbar command

To dissolve a group, select it and then select the "Layout... Group... UnGroup" menu command or click the icon in the toolbar at the bottom of the screen.

To change the general properties of a group, simply double-click the group and the Group Properties dialog box will appear. You can open the dialog box by clicking the icon in the toolbar at the bottom of the screen. The dialog box features the following tabs:

7361_en_01

PHOENIX CONTACT

3-15

WebVisit

3.7.1

Advanced Select

Figure 3-21

"Advanced Select" tab

The graphic icons in the group are listed. Double-click an entry to open that icon's Properties dialog box.

3.7.2

General

Figure 3-22

"General" tab

You can change the general format properties for all graphic icons in the group at the same time on this tab. You can specify whether each property is to be changed for all elements in the group or not.

3-16

PHOENIX CONTACT

7361_en_01

WebVisit

3.7.3

Cross Ref

Figure 3-23

"Cross Ref" window

All references associated with the graphic icons in the group are listed in this window.

7361_en_01

PHOENIX CONTACT

3-17

WebVisit

3-18

PHOENIX CONTACT

7361_en_01

Visualization With WebVisit

Visualization With WebVisit

This section describes how to visualize a current project. The example project from "Appendix: Example Project in PC WorX" on page A-1 is used as a basis for this.

4.1

PC WorX and WebVisit

To visualize variables from a PC WorX project using WebVisit, the following requirements must be met: You have created a project on a controller with the appropriate firmware (see "Supported Control Systems" on page 1-2). The variables to be visualized have been created as global variables (VAR_GLOBAL or VAR_EXTERNAL). The "PDD" attribute is marked for the variable. You make these settings when creating the variables (see also "Programming" on page A-6).

4.2

Creating a New Project

Select the "New Project..." command from the "File" menu. Give your project a name (in this case quickstart) in the dialog box that appears, and save the project.

A *.prj project file and all other required files are then created and displayed in the "Project Files" window.

7361_en_01

PHOENIX CONTACT

4-1

WebVisit

4.3

Configuring a Project

Select the "Project... Project Configurations..." menu command. Specify the basic settings for the project in the window that appears. If these settings are changed during the course of the project, the new settings will only be applied to new graphic views! Therefore, you must make the change for all existing graphic views, if necessary.

Figure 4-1 Teq Configurations

Configuring a project

Default settings for new graphic views (size, background and foreground color, text settings, background file) Select the size ("Width" and "Height"; in Figure 4-1 640 x 480 pixels) in accordance with the size of your browser window.

Applet params

Applet parameters Period: Update period for the process data points: Process data points are scanned and updated on the server periodically by default. You set this period under "period". Main teq (homepage): Start screen when the HMI is loaded

4-2

PHOENIX CONTACT

7361_en_01

Visualization With WebVisit Order per view (update per view): Every graphic view can contain several process data points. You have two options for updating process data points: Update all PDPs at once (checkbox not activated) In order to perform the update efficiently, all PDPs associated with all graphic views are scanned on the target system (control system) at the same time by default. This uses fewer communication resources and speeds up the initialization of a new graphic view, since all the required values are already known. Update PDPs per graphic view (checkbox activated) Alternatively, the "Order per view" (update per view) option can be activated. In this case, only process data points required for the active graphic view are scanned on the server. If there are a large number of PDPs to update, this can be the more efficient method. Phoenix PC WORX Project Settings In this section of the dialog box, you specify where WebVisit gets its variables from. There are two options: 1. The PC WorX project is located on the same PC as WebVisit. Use "Browse" to select the path to the PC WorX project file (*.mwt) in the "*.mwt path" field. If the PC WorX project has been installed and named as standard in accordance with Section A, "Appendix: Example Project in PC WorX", you will find the file under "C:\Programs\ PHOENIX CONTACT\Software Suite ...\Projects\qs_webvisit.mwt". Entering this path updates the path for the pdd.csv file automatically. 2. The PC with WebVisit contains only one file with the required variables (pdd.csv) generated using PC WorX. Use "Browse" to select the path to the pdd.csv file in the "pdd.csv path" field.

4.4

Generating a Graphic View

To add an empty graphic view to the project, select the "Project... Add to Project... New..." menu command.

The editor suggests a file name comprising the project name, a consecutive number and the extension *.teq (in this case "quickstart1.teq"). Use the suggested file name or edit it and then confirm your entry with "Add".

4.5

Inserting Graphic Visualization Objects

You can now insert your graphic visualization objects. You can use the items on the toolbar for graphic icons to do this (see "The WebVisit User Interface" on page 3-3).

7361_en_01

PHOENIX CONTACT

4-3

WebVisit

4.5.1

Graphic Icons for Visualization

The following graphic objects are used for graphic view 1 in the example: Table 4-1 No. in Figure 4-2 1 2 Visualization elements used Element Visualized Variable Dynamics Effect Example in Section 4.5.2 4.5.3

Static text Static text Onboard_ Input_Bit10

None Text and color None None OUT3 OUT3 Color Color None V0 V0 Text Bargraph Jump Text and color

Static text as a heading: Start Changes the text and color Onboard_Input_Bit10 = False: Red with text "False" Onboard_Input_Bit10 = True: Green with text "True" Static text as a heading: OUT3 Background for traffic light Changes the color OUT3 = 0: Red; OUT3 = 1: Black Changes the color OUT3 = 0: Black; OUT3 = 1: Green Static text as a heading: OUT1 The current value of the V0 variable is displayed. The height of the bargraph changes according to the output value V0. If pressed: Switchover to another graphic view, which shows an enlarged version of the bargraph. The current value of the Manual variable is displayed and can be changed. The color changes too. Manual = False: Dark red Manual = True: Dark green If pressed: Changes the status of the Manual variable between 0 and 1. Increments the Number_of_Toggles container variable. The current value of the Number_of_Toggles container variable is displayed.

3 4 5 6 7 8 9 10 11

Static text Rectangle Ellipse Ellipse Static text Static text Bargraph Button Edit box

4.5.2 4.5.4 4.5.5 4.5.5 4.5.2 4.5.6 4.5.10 4.8 4.5.7

12

Button

Toggle and increment

4.5.8

13

Static text

Text

4.5.8

4-4

PHOENIX CONTACT

7361_en_01

Visualization With WebVisit

Figure 4-2

Example graphic view

7361_en_01

PHOENIX CONTACT

4-5

WebVisit

4.5.2

Static Text for the Start, OUT3, Output V0 Headings

Select a text field from the toolbar for graphic icons and place it in the graphic view. Double-click the graphic icon to open the Properties dialog box. Specify the general properties under "General".

Figure 4-3

General properties of the text field (in this case for "Start")

Specify what the icon is to display under "Repaints".

Figure 4-4 Table 4-2 Setting X Y W H Type Name

Display via the text field (in this case for "Start") Settings for all headings used in the example Start 80 50 100 50 STRING Start OUT3 80 150 100 50 STRING OUT3 Output V0 400 50 200 50 STRING Output V0

4-6

PHOENIX CONTACT

7361_en_01

Visualization With WebVisit

4.5.3

Static Text for Color Display of Start Variables

Select a text field from the toolbar for graphic icons and place it in the graphic view. Double-click the graphic icon to open the Properties dialog box. Specify the general properties under "General".

Figure 4-5

General properties for the text field

Specify what the icon is to display under "Repaints". Select two sources ("Edit a Source"), as different colors and texts are to be displayed subject to the status of the Start variable. Activate the "On Condition" checkbox. Enter the type and name of the condition variable. Click the "Select" field adjacent to the "Name" field. Select the name for the process data point (in this case @GV.ONBOARD_INPUT_BIT10). Select all other settings as shown in Figure 4-6.

Figure 4-6

Text field displays

7361_en_01

PHOENIX CONTACT

4-7

WebVisit

4.5.4

Rectangle as Background for Traffic Light

Select the rectangle from the toolbar for graphic icons and place it in the graphic view. Double-click the graphic icon to open the Properties dialog box. Specify the general properties under "General".

Figure 4-7

General properties of the rectangle

Since the rectangle only acts as a background, no other settings are required.

4-8

PHOENIX CONTACT

7361_en_01

Visualization With WebVisit

4.5.5

Ellipses as Traffic Light

Select the ellipse from the toolbar for graphic icons and place two instances of it in the graphic view. Double-click the graphic icon to open the Properties dialog box. Specify the general properties under "General".

Figure 4-8

General properties of the two ellipses

Settings do not have to be made under "Repaints". Specify the color settings under "Border Advanced". The comparison is selected here such that if OUT2 = 0, the top indicator is red and the other is off. If OUT2 = 1, the bottom indicator is green and the top indicator is off.

Figure 4-9

Color settings for the two ellipses

7361_en_01

PHOENIX CONTACT

4-9

WebVisit

4.5.6

Static Text for Displaying the Value of the V0 Variable

Select the text field from the toolbar for graphic icons and place it in the graphic view. Double-click the graphic icon to open the Properties dialog box. Specify the general properties under "General".

Figure 4-10

General properties of the text field

Specify what the icon is to display under "Repaints". Check that the "Edit a Source" (data source) checkbox is activated and the "PPO" type is selected in the "Type" selection box. Click the "Select" field adjacent to the "Name" field. Select the name for the process data point (in this case @GV.V0).

Figure 4-11

Text field displays for V0

4-10

PHOENIX CONTACT

7361_en_01

Visualization With WebVisit

4.5.7

Edit Box for the Manual Variable

Select the edit box from the toolbar for graphic icons and place it in the graphic view. Double-click the graphic icon to open the Properties dialog box. Specify the general properties under "General".

Figure 4-12

General properties of the edit box

Specify what the icon is to display under "Repaints". Check that the "Edit a Source" (data source) checkbox is activated and the "PPO" type is selected in the "Type" selection box. Click the "Select" field adjacent to the "Name" field. Select the name for the process data point (in this case @GV.Manual).

Figure 4-13

Manual edit box displays

Specify the color settings under "Border Advanced".

Figure 4-14

Color settings for the edit box

7361_en_01

PHOENIX CONTACT

4-11

WebVisit

4.5.8

Button for Toggling the Status of the Manual Variable

Select the button icon from the toolbar for graphic icons and place it in the graphic view. Double-click the graphic icon to open the Properties dialog box. Specify the general properties under "General".

Figure 4-15

General properties of the button

Give the button a name under "Repaints" (in this case TOGGLE).

Figure 4-16

Button displays

Select the "Actions" tab. In the "Toggle Button" section, activate the "Toggle" checkbox. Select "PPO" as the type. Select the name for the process data point under "Name" (in this case @GV.Manual).

You have now specified that pressing the button switches the status between 0 and 1. In the "Increment" section, activate the "Increment a variable" checkbox. Select "CONTAINER" as the type. Select or enter the variable name under "Name" (in this case Number_of_Toggles). Enter the increment value under "Value" (in this case 1).

4-12

PHOENIX CONTACT

7361_en_01

Visualization With WebVisit You have now created/selected a container variable that is used only within the visualization. Its value increases by 1 every time the button is pressed.

Figure 4-17

Action executed by means of the button

Specify the color settings under "Border Advanced".

Figure 4-18

Color settings

Provided that the Number_of_Toggles variable is less than or equal to 10, the button remains green. If the variable is greater than 10, the button changes to yellow. The variable can be reset in the visualization by refreshing the browser window. Additional settings are not required.

7361_en_01

PHOENIX CONTACT

4-13

WebVisit

4.5.9

Static Text for Displaying the Value of the Number_of_Toggles Container Variable

Select the text field from the toolbar for graphic icons and place it in the graphic view. Double-click the graphic icon to open the Properties dialog box. Specify the general properties under "General".

Figure 4-19

General properties of the text field

Specify what the icon is to display under "Repaints". Check if the "Edit a Source" (data source) checkbox is activated. Select the "CONTAINER" type in the "Type" selection box. Select the container variable (in this case Number_of_Toggles) in the "Name" field.

Figure 4-20

Text field displays for Number_of_Toggles

Specify the color settings under "Border Advanced". In this example, the same color settings have been made as for the toggle button (see Figure 4-18).

4-14

PHOENIX CONTACT

7361_en_01

Visualization With WebVisit

4.5.10

Bargraph for V0

Select the bargraph from the toolbar for graphic icons and place it in the graphic view. Double-click the graphic icon to open the Properties dialog box. Specify the general properties under "General".

Figure 4-21

General properties of the bargraph

Specify what the icon is to display under "Repaints". Check that the "Edit a Source" (data source) checkbox is activated and the "PPO" type is selected in the "Type" selection box. Activate the box with the three dots next to the "Name" field. Select the name for the process data point (in this case @GV.ONBOARD_INPUT_BIT10).

Figure 4-22

Bargraph displays

7361_en_01

PHOENIX CONTACT

4-15

WebVisit Specify the settings under "Bargraph Advanced".

Figure 4-23

Bargraph settings

Specify the color settings under "Border Advanced".

The limits here are set so that a level of 1 to <1024 is displayed in green. From 1024 to 2049, the level is displayed in red. The default color of red is displayed for values above 2049 (see Figure 4-24).

Figure 4-24

Bargraph color settings

4-16

PHOENIX CONTACT

7361_en_01

Visualization With WebVisit

4.6

Generating a Second Graphic View

A second graphic view is to be generated in which the bargraph for displaying V0 is shown in a larger format. Select the "Add to Project... New..." command from the "Project" menu. Use the suggested file name or edit it and then confirm your entry with "Add".

4.7

Inserting Graphic Visualization Objects

You can now insert graphic visualization objects as described above. However, because a magnified view is also to be displayed here, with other properties remaining the same, you can also copy the bargraph from page 1 and only adapt the items of data, which need to be modified. In this case, this only affects the size of the bargraph. The corresponding procedure is described below. Switch to the first graphic view. To do this, select the appropriate file (in this case quickstart1.teq) under "Project Files" on the left-hand side of the screen. Highlight the bargraph and copy it (Ctrl+C or "Edit... Copy"). Under "Project Files", switch to the file for the second graphic view (in this case quickstart2.teq). Insert the bargraph (Ctrl+V or "Edit... Paste"). Double-click the graphic icon to open the Properties dialog box. Adapt the settings under "General".

Figure 4-25

General bargraph settings in the second graphic view

All other settings are retained.

7361_en_01

PHOENIX CONTACT

4-17

WebVisit

4.8

Navigating Between Graphic Views

The "Button" graphic icon supports navigation between graphic views. A button supports three navigation options: Jump to a given page ("View Jump") Jump to the last page selected ("Back Button") Jump to a website via a hyperlink ("URL Jump") You need one button in each graphic view to navigate between the two graphic views generated. Switch to the first graphic view. To do this, select the appropriate file (in this case quickstart1.teq) under "Project Files" on the left-hand side of the screen. Select the button icon from the toolbar for graphic icons and draw a button in the first graphic view. Double-click the graphic icon to open the Properties dialog box. Specify the general properties under "General".

Figure 4-26

General properties of the button

Give the button a name under "Repaints" (in this case >> (for magnification)).

Figure 4-27

Button displays

4-18

PHOENIX CONTACT

7361_en_01

Visualization With WebVisit Select the "Actions" tab. In the "Jump" section, activate the "View Jump" checkbox. Select the name of your second graphic view from the list in the "view name" field.

Figure 4-28

Action executed by means of the button

Additional settings are not required. The complete graphic view 1 is shown in Figure 4-29.

Figure 4-29

Graphic view 1

7361_en_01

PHOENIX CONTACT

4-19

WebVisit Copy the button from graphic view 1. This ensures that it will be located in the same position in graphic view 2. Under "Project Files", select the file for graphic view 2 (in this case quickstart2.teq) and insert the button. Enter the name of the button under "Repaints".

Figure 4-30

Adaptation under "Repaints" for the button in graphic view 2

Make the adaptations under "Actions". In this case the jump is back to the previous page, not to any other specific page.

Figure 4-31

Adaptations under "Actions" for the button in graphic view 2

The complete graphic view 2 is shown in Figure 4-32.

Figure 4-32

Graphic view 2

You can now navigate between both graphic views.

4-20

PHOENIX CONTACT

7361_en_01

Visualization With WebVisit

4.9

Saving Graphic Views

Save the graphic views using "File... Save All".

4.10

Generating an HTML Page

Select the "Project... Generate HTML..." menu command. Accept the suggested file name (in this case entry.html) or enter your own file name. Save your project using the "File... Save All" menu command.

4.11

Initial Test in the Browser

Please note that the visualization is started only with the following setting in the Windows control panel. Start the Java control panel from the Windows control panel. Select in the temporary files settings that temporary files are not stored. Open the entry.html file for an initial test with a PC browser (e.g., MS Internet Explorer, Netscape Navigator, Mozilla, Opera). Test the function of the pages.

Process data points are not yet displayed. To display them, the container variables first have to be initialized and the project transferred to the target system's web server.

4.12

Specifying the Value Range for Edit Box

If you are using edit boxes, you need to specify the value range for the entries. Select the "Project... Init PPOs..." command. All the variables used and their parameter settings are listed in the dialog box that appears.

Figure 4-33

"PPOs Initialization" window

7361_en_01

PHOENIX CONTACT

4-21

WebVisit "Min Val" and "Max Val" The lower and upper limits for graphic icons of the "Edit box" type can be specified here. "Format Val" This parameter specifies the formatting of the screen output for a process data point. It can accept "Int" or "String" values. Unit Val The unit for a process data point is specified here. In the example, the field for displaying the Manual variable is an edit box. The values only have to be specified for this process data point. Enter the values given in Figure 4-34 in the dialog box.

Figure 4-34

Values for initializing PPOs

If you make an incorrect entry in the visualization edit box (undershooting or overshooting the limits, incorrect formatting), WebVisit will display an input error.

Figure 4-35

Error message in the event of an edit box input error

4-22

PHOENIX CONTACT

7361_en_01

Visualization With WebVisit

4.13

Initializing Container Variables

Container variables are local variables that are only visible within one or more graphic views. They are not related to the PC WorX project. Once the variables have been created in a graphic object, they have to be initialized. Select the "Project... Init Containers..." command. All the local variables used and their initializations are listed in the dialog box that appears.

Figure 4-36

"Containers Initialization" window

Select your container variable and set the initial value. Close the window with "OK".

A container initialization file called <project>.itq is then generated.

7361_en_01

PHOENIX CONTACT

4-23

WebVisit

4.14

Data Transmission to the Control System

All files generated when the project was created and subsequently transferred to the target system are displayed under "Project Files".

Figure 4-37

Project files for the example

If changes have been made to the project since the last time the HTML file was generated, save the project ("File... Save All") and generate an HTML file ("Project... Generate HTML"). Select the "Project... Download Project..." command. Enter your control system's IP address in the dialog box that appears.

Figure 4-38

"FTP Download Project" window

Click the "Connect" button.

4-24

PHOENIX CONTACT

7361_en_01

Visualization With WebVisit In the window that appears, click the "Download Project" button.

Figure 4-39

"FTP Download Project" window

Once the file has been transferred successfully, exit the window by clicking the "Exit" button.

7361_en_01

PHOENIX CONTACT

4-25

WebVisit

4.15

Display in Internet Browser

You can now open your project in an Internet browser. Internet Explorer is used in the example below. Please note that the visualization is started only with the following setting in the Windows control panel. Start the Java control panel from the Windows control panel. Select in the temporary files settings that temporary files are not stored. Enter your control system's IP address in the browser in the following format: http://<control system ip address> (e.g., http://192.168.0.2). If the project's html page is called entry.html, its file name does not need to be entered. If you have selected a different file name, enter the following in the browser: http://<control system ip address>/<project>.html. Confirm the entry by clicking "Enter".

The result of the visualization is shown in Figure 4-40.

Figure 4-40

Visualization in Internet Explorer

Pressing the "TOGGLE" button toggles the Manual variable from the visualization. You can also set the Manual variable directly by entering the value 0 or 1 in the edit box. All other values are controlled automatically by the program running on the control system.

4-26

PHOENIX CONTACT

7361_en_01

Visualization With WebVisit

4.16

Changes to the Project

If you have added new variables to the PC WorX project after creating the WebVisit project: Open the "Project... Project Configurations..." menu. Confirm the settings with "OK". After each change in WebVisit: Save the changes using "File... Save All". Regenerate the HTML file via "Project... Generate HTML...". Download the changed project to the control system via "Project... Download Project...". Refresh the display in the browser.

4.17

HMI With Several Graphic Views

There are two ways to generate an HMI with several graphic views. Either all the graphic views are located in a Java applet or you are working with HTML links to the various views. Several Graphic Views in a Java Applet Users generally access a single HTML page via a browser. This is generated via the "Project... Generate HTML..." menu command and is typically called "<projectname>.html". This page references a Java applet, which contains the WebVisit technology and is called "IMaster<target system>.jar" (e.g., IMasterPhoenix5_00_00.jar). This applet references all graphic views (*.teq files) belonging to the HMI. This is the fastest method, since all views and the applet are loaded when first accessed. Several Graphic Views With HTML Links It is also possible to reference HTML links on other pages from the "<projectname>.html" homepage. The disadvantage is that these pages are only loaded when they are called, which can lead to a delay in the display appearing. This option can be beneficial in the following cases: Links to help files (saved as HTML) Links to HMIs on other web servers in order to form a joint HMI Links to other applets or pages not generated using WebVisit

7361_en_01

PHOENIX CONTACT

4-27

WebVisit

4-28

PHOENIX CONTACT

7361_en_01

Appendix: Example Project in PC WorX

A Appendix: Example Project in PC WorX

This document describes an example project, whose variables are to be visualized in WebVisit. This Quick Start Guide assumes knowledge of PC WorX. Only basic project creation steps are illustrated and reference is only made to essential points, which must be known in order to be able to use WebVisit. For more information about creating a project, please refer to the Quick Start Guide for PC WorX.

A1

Description of the Project

In this document, an example project is developed using function block diagram (FBD). In order to obtain the best possible results, please use the same identifiers and names as used in this manual.

Project name Project hardware

qs_webvisit The example system is shown in Figure A-1.

7361_en_01

PHOENIX CONTACT

A-1

WebVisit

ILC 350 PN
1
MRESET STP RUN / PROG

FL SWITCH MCS 16TX

I1 I2 I3 I4 I7 I8 I5 I6 I9 I10 I11 I12 Q1 E Q2 Q3 Q4 US UM UL 1

PLC

RUN FAIL

D 2

FL SWITCH MCS 16TX Ord. No. 28 32 70 0

11

13

15

ETH
10/100

DO2

LNK ACT 100

MODE
INLINE CONTROL ILC 350 PN Ord. No.: 2876928
1 1 22 1 1 22 1 1 22 1 1 22 1 1 22 1 1 22

2
MAC Address
US1 US2 FAIL
00.A0.45.1B.D2.1D

10

12

14

16

1
RESET
xxxxxxx (Seriennr.)

11

11

11

11

11

1
2 22 22 22 22 22 2
X17 US1 GND US2 GND X18 R1 R2 X19 V.24

8
ACT 100 FD

9 10 11 12 13 14 15 16

PC PC WorX WebVisit

PRG BSA FAIL RF

IL

33

33

33

33

33

RDY / RUN
4 44 44 44 44 44 4

55

55

55

66

66

66

IB IL 24 DO 2

FL IL 24 BK-PN-PAC
US UM

ILB PN 24 DI16 DIO16-2TX

1 3

D 2 4

1 3

D 2 4

RESET

UL
DO4

DI4

100 FD COL XMT

RCV LNK
10/100
4 44 4 4 4 3 33 3 3 3

IB IL 24 DI 4-ME IB IL 24 DO 4-ME

7361A001

Figure A-1 Table A-1 Device

Example system

Inputs and outputs used in the example including process data and assigned variables Connected To Input/Output According to the Device Data Sheet Input IN11 Outputs OUT1 to OUT16 Input IN21 Signal At Variable Process Data

ILC 350 PN ILB PN 24 DI16 DIO16-2TX

Co 3 TP 1.4

ONBOARD_ INPUT_BIT10

3.1.4 ~DO16 IN21 1.4 1.1 2.1

Co 1 to 4 V0 TP x.1 and x.4 Co 8 TP 2.1 TP 1.4 TP 1.1 TP 2.1 IN3 OUT1 IN2 OUT2 T1 T2

IB IL 24 DO 4-ME IB IL 24 DI 4-ME IB IL 24 DO 2 No assignment required

FL IL 24 BK-PN-PAC FL IL 24 BK-PN-PAC ILC 350 PN

Output OUT3 Input IN1 Output OUT2

Co

Connector

TP

Terminal Point

The variables in bold type are to be visualized in WebVisit.

A-2

PHOENIX CONTACT

7361_en_01

Developing a Project in PC WorX

A2

Developing a Project in PC WorX

Perform the following steps in accordance with the Quick Start Guide for PC WorX.

A 2.1

Building the Hardware Structure

Create a new project with the control system (in this case ILC 350 PN Version >01/4.6F/1.41) and save it with the name "qs_webvisit". Adapt the project information as appropriate for your project and assign the "Domain Postfix" (in this case qs.de). Check/modify the IP settings for the controller (in this case 192.168.0.2). If required, assign an IP address to the PROFINET IO controller. Read in the PROFINET IO devices. If required, assign the PROFINET device names and IP addresses. Read in the INTERBUS. In order to detect any errors, compile the project once the bus topology has been completed.

The structure of the bus configuration is illustrated in Figure A-2.

Figure A-2

Bus structure for the example project

7361_en_01

PHOENIX CONTACT

A-3

WebVisit

A 2.2
A 2.2.1

Creating the Program

Program Description

The program is created in function block diagram (FBD). The program controls the following sequence: On an edge change from FALSE to TRUE at input IN, a timer (TP function block) generates a pulse, which is output at output Q for the duration PT. The associated output is set for this time. The state of the output is indicated at the corresponding status LED. The elapsed time is output at output ET. If IN switches from FALSE to TRUE for a second time while the pulse is still active (within PT), this does not affect the duration of the pulse generated at output Q. This signal is ignored. If a TRUE signal is present at output Q, the ROL function block is activated, which rotates the operands associated with input parameter IN bit-by-bit to the left. This means that for an initial value equal to 1, the associated outputs (e.g., OUT1 to OUT16 of a 16-bit module) switch in succession from FALSE to TRUE and back again. This state change is indicated by a "chasing light" at the corresponding status LEDs. Once the pulse time has elapsed, the output that indicates the presence of the pulse and the chasing light are switched off. Independent of this, inputs IN1 and IN2 are logically ANDed. IN1 and IN2 map the status of the inputs to which the toggle switches are connected. The result of ANDing is output at output OUT. Additional variable compared to the example program in the Quick Start Guide for PC WorX: The "Manual" variable is also used to facilitate editing in the program of entries made in the visualization. The variable is ANDed with inputs IN1 and IN2. The result is output at output OUT. A 2.2.2 Function Blocks Used

Timer

Format conversion

Rotate to left

ANDing

The variables in bold type in the tables below are to be visualized in WebVisit.

A-4

PHOENIX CONTACT

7361_en_01

Developing a Project in PC WorX TP Timer Function Block Table A-2 Parameter IN PT Q Timer TP_1 Variable Name ONBOARD_ INPUT_BIT10 T1 OUT1 Data Type BOOL TIME BOOL Application VAR_EXTERNAL VAR VAR_EXTERNAL T#15000ms Initial Value Description Start: If a rising edge is detected, a pulse is generated. Pulse time setting: 15 seconds = 15,000 ms Pulse output TRUE if IN = TRUE and ET < PT; FALSE if IN = FALSE or ET >= PT Elapsed time

ET

T2

TIME

VAR_EXTERNAL

BOOL_TO_DINT Format Conversion Function Block To use the output signal of the TP_1 block as the input signal for the ROL block, the format must be converted from BOOL to DINT. Variables are not declared for this block. ROL Rotation Function Block Table A-3 Parameter IN N Rotate to left ROL Variable Name V0 Data Type WORD DINT Application VAR_EXTERNAL Initial Value Description Input value Number of characters to be rotated (in the example 0 or 1, defined by OUT1) VAR_EXTERNAL Output value ROL

(Output)

V0

WORD

AND ANDing Function Block Table A-4 Parameter IN1 IN2 IN3 OUT AND ANDing function block Variable Name IN2 IN3 Manual OUT2 Data Type BOOL BOOL BOOL BOOL Application VAR_EXTERNAL VAR_EXTERNAL VAR_EXTERNAL VAR_EXTERNAL Initial Value Description Input value 1 Input value 2 Manual input from the visualization AND output value

7361_en_01

PHOENIX CONTACT

A-5

WebVisit A 2.2.3 Programming

Programming of this example, excluding the Manual variable, is described in detail in the Quick Start Guide for PC WorX. First, proceed in accordance with the example. Then insert the Manual variable afterward. When creating variables that are to be visualized in WebVisit, please note: Create the variables as global variables (VAR_GLOBAL or VAR_EXTERNAL). Activate the "PDD" checkbox.

Figure A-3

ONBOARD_INPUT_BIT10 variable properties

Figure A-4

V0 variable properties

In contrast to the description contained in the Quick Start Guide for PC WorX, in this case the initial value was set to 1 as soon as the variables were created.

A-6

PHOENIX CONTACT

7361_en_01

Developing a Project in PC WorX

Figure A-5

OUT2 variable properties

You can check the setting under "Global Variables".

Figure A-6

Identification of variables for visualization in WebVisit

The complete program is shown in Figure A-7.

Figure A-7

Program without Manual variable

7361_en_01

PHOENIX CONTACT

A-7

WebVisit If it has not already been done when the V0 variable was created, set the initial value for the V0 variable to 1.

Inserting the Additional Manual Variable: Switch to the "IEC programming" workspace. Select the "AND" function block. Click the right mouse button to open the context menu for the function block. Open the "Object Properties..." menu. Select the IN2 formal parameter and click on "Duplicate".

You will thus obtain the IN3 formal parameter. Double-click the new input on the function block and specify its properties. Set the initial value to 1. Provided that no entries have been made in the visualization, in this case OUT is only dependent on the positions of the two switches (variables IN2 and IN3).

Figure 0-1

Manual variable

Figure A-8

Complete program (including Manual variable)

In order to detect any errors, compile the project once the program has been created.

A-8

PHOENIX CONTACT

7361_en_01

Developing a Project in PC WorX

A 2.3

Assigning Process Data

Assign the process data in accordance with the Quick Start Guide for PC WorX.

The result of the process data assignment process is shown in Figure A-9.

Figure A-9

All used process data assigned to variables

Since the ONBOARD_INPUT_BIT10 variable is a system variable, it does not appear in Figure A-9. Compile the project, send it to the control system and perform a cold restart.

A 2.4

Operation

Change the task properties to "Cyclic" with an interval of 250 ms in accordance with the Quick Start Guide for PC WorX. Compile the project, send it to the control system and perform a cold restart.

Your program should now work. If you press the appropriate switch, the function will run. You can also check the function in debug mode in accordance with the Quick Start Guide for PC WorX.

7361_en_01

PHOENIX CONTACT

A-9

WebVisit

A-10

PHOENIX CONTACT

7361_en_01