Getting Started With Visu+ Express and HMI: Quick Start Guide

Getting started with
Visu+ Express and HMI
Quick start guide

Quick start guide
Getting started with Visu+ Express and HMI
2015-09-29
Designation: UM QS EN VISU+ HMI
Version: 02
Order No.: —
This user manual is valid for:
Designation Order No.

3000 series Visu+ HMI 24004xx (52-58), 27009xx (01-25)
5000 series Visu+ HMI 27006xx (21-23)
PHOENIX CONTACT 106493_en_02

Please observe the following notes
User group of this manual
The use of products described in this manual is oriented exclusively to:
– Qualified electricians or persons instructed by them, who are familiar with applicable
standards and other regulations regarding electrical engineering and, in particular, the
relevant safety concepts.
– Qualified application programmers and software engineers, who are familiar with the
safety concepts of automation technology and applicable standards.
Explanation of symbols used and signal words
This is the safety alert symbol. It is used to alert you to potential personal injury
hazards. Obey all safety measures that follow this symbol to avoid possible
injury or death.
There are three different categories of personal injury that are indicated with a
signal word.
DANGER This indicates a hazardous situation which, if not avoided, will
result in death or serious injury.
WARNING This indicates a hazardous situation which, if not avoided, could
result in death or serious injury.
CAUTION This indicates a hazardous situation which, if not avoided, could
result in minor or moderate injury.
This symbol together with the signal word NOTE and the accompanying text
alert the reader to a situation which may cause damage or malfunction to the
device, hardware/software, or surrounding property.
This symbol and the accompanying text provide the reader with additional
information or refer to detailed sources of information.
How to contact us
Internet Up-to-date information on Phoenix Contact products and our Terms and Conditions can be
found on the Internet at:
phoenixcontact.com
Make sure you always use the latest documentation.
It can be downloaded at:
phoenixcontact.net/products
Subsidiaries If there are any problems that cannot be solved using the documentation, please contact
your Phoenix Contact subsidiary.
Subsidiary contact information is available at phoenixcontact.com.
Published by PHOENIX CONTACT GmbH & Co. KG

Flachsmarktstraße 8
32825 Blomberg
GERMANY
Should you have any suggestions or recommendations for improvement of the contents and
layout of our manuals, please send your comments to:
tecdoc@phoenixcontact.com
PHOENIX CONTACT
Please observe the following notes
General terms and conditions of use for technical documentation

Phoenix Contact 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 user documentation) does not
constitute any further duty on the part of Phoenix Contact to furnish information on
modifications to products and/or technical documentation. You are responsible to verify the
suitability and intended use of the products in your specific application, in particular with
regard to observing the applicable standards and regulations. All information made
available in the technical data is supplied without any accompanying guarantee, whether
expressly mentioned, implied or tacitly assumed.
In general, the provisions of the current standard Terms and Conditions of Phoenix Contact
apply exclusively, in particular as concerns any warranty liability.
This manual, including all illustrations contained herein, is copyright protected. Any
changes to the contents or the publication of extracts of this document is prohibited.
Phoenix Contact reserves the right to register its own intellectual property rights for the
product identifications of Phoenix Contact products that are used here. Registration of such
intellectual property rights by third parties is prohibited.
Other product identifications may be afforded legal protection, even where they may not be
indicated as such.
PHOENIX CONTACT
Table of contents
1 General information ...................................................................................................................7
1.1 Introduction............................................................................................................7
1.2 Information about this document............................................................................7
1.3 Required hardware ................................................................................................8
1.4 Required software .................................................................................................8
2 Startup .......................................................................................................................................9
2.1 Connecting devices ...............................................................................................9
2.2 Starting up the TP 3070W....................................................................................10
2.2.1 Switching on .........................................................................................10
2.2.2 Operation .............................................................................................10
2.2.3 Configuration .......................................................................................10
2.3 Starting up the ILC 131 starter kit.........................................................................11
2.3.1 Switching on .........................................................................................11
2.3.2 Configuration (loading and parameterizing the program) .....................11
3 Helpful information about Visu+ Express .................................................................................13

3.1 General information .............................................................................................13
3.2 The Visu+ Express user interface ........................................................................13
3.2.1 Toolbars ...............................................................................................17
3.2.2 Workspaces .........................................................................................18
3.2.3 Defining properties of objects ...............................................................21
3.2.4 Drag-and-drop function ........................................................................22
3.3 Device information...............................................................................................22
4 Visualizing with Visu+ Express .................................................................................................25

4.1 Description of the visualization project.................................................................25
4.2 Creating a new project.........................................................................................26
4.3 Getting started .....................................................................................................30
4.3.1 Preparing the user interface of the HMI application ..............................31
4.3.2 Graphically designing the user interface of the HMI application ...........35
4.3.3 Selecting and configuring the communication driver ............................49
4.3.4 Uploading the visualization project to the operator panel .....................58
4.3.5 Uploading OPC resources to the operator panel ..................................59
A Appendix for document lists......................................................................................................61

A1 List of figures .......................................................................................................61
A2 List of tables ........................................................................................................63
106493_en_02 PHOENIX CONTACT 5

Visu+ Express HMI
6 PHOENIX CONTACT 106493_en_02

General information
1 General information
1.1 Introduction
This document uses an example project to help you get started with Visu+ Express on a
HMI.
For the example project, you will need the hardware and software listed in sections 1.3 and
1.4 on page 8.
For the ILC 131 starter kit, the “QuickStart_ILC131.zwe” example project can be found on
the ILC 131 starter kit DVD. The example project has been extended for this quick start
guide, it is referred to as “HMI_QuickStart_ILC131.zwe”.
1.2 Information about this document
The “HMI_QuickStart_ILC131.zwe” example project is used to describe how you:

– create a new project with Visu+ Express in step 1 (see section 4.2 on page 26)
– prepare the user interface of the HMI application in step 2 (see section 4.3.1 on
page 31)
– graphically design the user interface of the HMI application in step 3 (see section 4.3.2
on page 35)
– link the user interface of the HMI application with variables of the controller in step 4
(see section 4.3.2.5 on page 47 to 4.3.3.4 on page 57)
– upload the visualization project to the operator panel in step 5 (see section 4.3.4 on
page 58).
In order to implement the example project, the following requirements must be met:
– The hardware has been started up.
– The hardware components form a network. This means that an active Ethernet connec-
tion is established between the hardware components.
– The Visu+ Express software is installed.
– The AX OP Server software is installed and licensed.
Phoenix Contact recommends installing the AX OPC Server for the example project with
administrator rights.
– The PC Worx Express software is installed.

– The “HMI_QuickStart_ILC131.zwe” example project is executed by the controller (the
ILC 131 ETH Inline controller from the starter kit).

Visu+ Express HMI
1.3 Required hardware

Table 1-1 Required hardware
Designation Order No. Firmware version

Operator panel
TP 3070W touch panel with 24 V DC power sup- 2400454 100.0
ply unit and cable for supply voltage (power sup-
ply unit and cable are not included in scope of
supply)
Project environment
ILC 131 starter kit 2701835 ≥ 4.01
Ethernet switch E.g., 2891152 –
Ethernet patch cable, crossed E.g., 2744843 –
If the firmware version on your device is earlier than that specified in Table 1-1, please up-
date your firmware. The current firmware can be downloaded at
phoenixcontact.net/products.
As a general rule, you can use all Visu+ HMIs of the 3000 series and 5000 series for the
example project described in this document. Note that the example project described in
this document is designed to suit the TP 3070W touch panel. If you use another touch
panel, it is possible that the resolution will not match the resolution of the screenshots il-
lustrated in this document.
1.4 Required software

Table 1-2 Required software
Designation Software version

Visu+ Express ≥ 2.42
PC Worx Express ≥ 6.30
AX OPC Server ≥ 2.2.0.75

Startup
2 Startup
2.1 Connecting devices
• Connect the devices required for the example project with an Ethernet patch cable
(crossed) according to Figure 2-1:
– PC
– TP 3070W touch panel
– ILC 131 starter kit
– Ethernet switch (for example FL SWITCH SFN 5TX)
ILC 131 ETH

Order-No.: 2700973
HW/FW: 00/400 D
FL SWITCH SFN 5TX L1 L1 N N FR E RDY FAIL BSA PF
Ord. No. 1891152 MAC Addr.: xx.xx.xx.xx 10V SW 0V 0V
UL FF
AUTOMATIONWORX
US Q1 Q2 I1 I2 I5 I6
AC K/
LN
T
MRESET UM Q3 Q4 I3 I4 I7 I8 AI2ME
X1
STOP
0
10
RUN / PROG
X1
RESET
AC K/
LN
T
5 6
4
X2
7
PRG 3
0
8
10
2
9
1
AC K/
LN
10
T
0
X3
0
10
LNK ACT
L1 L1 N N
10V SW 0V 0V
AC K/
LN
T
X4 X2
0
10
X5
LNK/ACT 100
Figure 2-1 Topology of the example project
The complete starter kit is supplied fully pre-assembled. Try out the starter kit straight
away by connecting the power cable to the power supply unit on the back of the board and
to the supply voltage.
• Set up a network by assigning different IP addresses from the same address space to
the corresponding devices (for example, see Table 2-1).
Table 2-1 IP addresses and subnet mask of network components (example)
Network components IP address Subnet mask

PC E.g., 192.168.0.1 255.255.255.0
ILC 131 starter kit E.g., 192.168.0.2 255.255.255.0
TP 3070W E.g., 192.168.0.3 255.255.255.0

Visu+ Express HMI
2.2 Starting up the TP 3070W
2.2.1 Switching on
Once the supply voltage is connected, the operator panel starts. Following switch-on, the
boot procedure starts. The operating system is then loaded. Finally, the Configuration Wiz-
ard appears. The configuration menu can remain open until the progress bar has ended.
After the progress bar has ended, the Visu+ runtime environment is started (Visu+ runtime).
The Visu+ runtime environment displays the Visu+ application last saved on the operator
panel.
2.2.2 Operation
Operation is performed via the display touchscreen.

• Directly select the button displayed on the display.
NOTE: Damage
Pointed or sharp objects, such as fingernails, screwdrivers or blades may cause irrepara-
ble damage to the touchscreen.
• Only use your fingertips or the tools specified in the UM EN TP 3XXXX GEN3 user
manual for operating the touchscreen.
2.2.3 Configuration
Data is exchanged between the operator panel and the connected I/O devices over the
standardized Ethernet interface. The IP address and subnet mask have to be assigned to
ensure that the operator panel is detected on the network.
• Assign an IP address and a subnet mask to the operator panel (for further information
see the UM EN TP 3XXXX GEN3 user manual).
For all network devices, ensure that you assign different IP addresses from the same ad-
dress space, but the same subnet mask.
• Restart the operator panel (switch off and on again) so that the settings are applied.

Startup
2.3 Starting up the ILC 131 starter kit
2.3.1 Switching on
• Connect the plug power supply unit to the ILC 131 ETH. Insert the power supply unit
plug in the corresponding socket of the switch module on the left-hand side of the ILC
131 ETH (see Figure 2-1 on page 9).
• Connect the plug of the power supply unit to the supply voltage.
• Switch on the supply voltage.
Once you have connected the power to the starter kit, test the controller inputs by activating
the switch on the switch module (displayed by the controller input diagnostic LEDs (I1 to
I8)).
2.3.2 Configuration (loading and parameterizing the program)
For detailed information on configuring the example project, refer to the quick start guide
in the ILC 131 starter kit UM QS EN ILC 131 STARTERKIT. The document can be down-
loaded at phoenixcontact.net/products.
The “HMI_QuickStart_ILC131.zwe” example project, the Visu+ projects (see also Section
“Visualizing with Visu+ Express” on page 25) and further documentation have been com-
piled in the ZIP file “Quickstart_Visu+HMI.zip”. The zip file can be downloaded at phoenix-
contact.net/products.
• Download the “Quickstart_Visu+HMI.zip” zip file.
• Extract the “Quickstart_Visu+HMI.zip” zip file.
• Start the “HMI_QuickStart_ILC131.zwe” example project with the PC Worx Express
software.
• Ensure you are using the extended project “HMI_QuickStart_ILC131.zwe”.

If you do not use the extended example project “QuickStart_ILC131.zwe” from the
ILC 131 starter kit, you will not be able to implement certain functions.
Complete the following steps before starting the example project:
• Check the IP settings in the example project. Adapt the settings if this is required for
your network environment. To do so, proceed as described in the quick start guide for
the ILC 131 starter kit UM QS EN ILC 131 STARTERKIT
• Compile the example project, send it to the controller, and perform a cold restart. To do
so, proceed as described in the quick start guide for the ILC 131 starter kit UM QS EN
ILC 131 STARTERKIT
The ILC 131 ETH Inline controller is now started up with the example project program.

Visu+ Express HMI

Helpful information about Visu+ Express
3 Helpful information about Visu+ Express
3.1 General information
Visu+ Express is a reduced version of the Visu+ visualization software and is optimized for
typical HMI applications. In contrast, Visu+ offers an extensive range of SCADA functional-
ities.
The essential properties of Visu+ Express are:
– Visu+ Express is free of charge.
– Visu+ Express has a simplified user interface.
– Visu+ Express features only typical HMI functions.
– Visu+ Express only offers objects and icons which are supported by the operating sys-
tem of the HMI devices.
– Visu+ Express has two operating modes: simple and extended mode.
– Visu+ Express is set in such a way that only the most frequent object properties (simple
mode) are displayed following installation.
More detailed information about the individual functions of Visu+ Express can be found in
the online help for the program. The entire help function can be called via “?” in the menu
bar. Help for specific functions can be called via the “F1” key.
3.2 The Visu+ Express user interface
Menu bar
Toolbar
Design area
(for
TP 3070W selection)
Status bar
Figure 3-1 User interface without workspaces displayed

Visu+ Express HMI
Workspace
Project Explorer
Workspace
Properties
Workspace
Toolbox
Figure 3-2 User interface with Project Explorer (shown), Toolbox and Properties (both
minimized) workspaces
The Visu+ Express interface can be freely designed. Under the “View” menu item, various
workspaces can be selected and displayed (see Figure 3-3).
Figure 3-3 Selecting and displaying workspaces

Once a workspace is selected, this is displayed with a defined size and position (see
Figure 3-4).
Figure 3-4 Displayed workspace
• Click on the icon in the title bar (see Figure 3-5) of the respective workspace to hide it.
Figure 3-5 Hiding the workspace
Adjusting the size of the The size and position of the workspaces can be adjusted at any time. In order to adjust the
workspace size of the workspace, proceed as follows:
• Move the mouse pointer over the respective workspace until the icon appears.
• As soon as the icon appears, left-click on it and press and hold the mouse button.
As long as the mouse button is pressed, the size of a workspace can be changed by moving
the mouse across the screen.

Visu+ Express HMI
Adjusting the position of In order to adjust the position of the workspace, proceed as follows:
the workspace • Click on the title bar of the respective workspace and press and hold the mouse button.
• Move the workspace to the desired position (see Figure 3-6).
Figure 3-6 Adjusting the position of the workspace
“Docking” the workspace You can also “dock” the workspace in any position. To do this, proceed as follows:
• Left-click on the title bar of the workspace. Press and hold the mouse key.
If you move the workspace over one of the highlighted points (for example ), the interface
changes color to indicate where the workspace will be “docked” once you release the
mouse button.
• Move the workspace over a highlighted point, for example:
• Release the mouse button.
You have “docked” the workspace at the required position.
The workspace is displayed in the standard size following “docking”.

Minimizing the workspace To improve the overview, for example, for projects with a high display resolution, you can
minimize the workspaces (temporarily hide them) in order to gain a larger design area.
• Click on the icon in the title bar of the respective workspace to minimize it (see
Figure 3-7).
Figure 3-7 Icon in the title bar of a workspace for minimizing it
The minimized workspace is displayed in the form of a button on the edge of the window
(see Figure 3-8, for example).
Figure 3-8 Minimized workspace
Showing the minimized If required, a minimized workspace can be shown again at any time. To do this, proceed as
workspace again follows:
• Move your move pointer over the respective button.
When the mouse pointer locates the button in question, the corresponding workspace is
displayed. The workspace is minimized again once the mouse pointer is moved away from
the button or area of the shown workspace.
• Fix the workspace in position by clicking on the icon in the title bar of the displayed
workspace (see Figure 3-7).

Visu+ Express HMI
3.2.1 Toolbars
Visu+ Express contains several toolbars with different icons, which enable frequently used
operating steps to be executed quickly. The operating steps can be called via menu items
or predefined shortcuts.
When the mouse pointer is placed over an icon (without clicking on it), a tool tip appears.
The tool tip displays the name of the current icon. In addition, a short function description
appears in the status bar (see Figure 3-9).
Figure 3-9 Tool tip
Different toolbars are displayed depending on which workspace has been toggled on.
The Visu+ Express toolbars tend to display the commands available under the “File” and
“Edit” menus (see Figure 3-10).
Figure 3-10 toolbar
Frequently used icons

Creating a new project (Ctrl + N)
Start the Project Wizard to create a new project.
Start simulation (Alt + F12)

Starts the project simulation.
Stop simulation (Alt + F12)

Stops the project simulation.
Device Control Panel

Opens a window in which OPC resources, among other things, can be up-
loaded to the operator panel. For additional information, please refer to Section
“Device information” on page 22.
Upload Project to Device

Opens a window in which the Visu+ Express project, among other things, can
be uploaded to the operator panel.

3.2.2 Workspaces
In Visu+ Express, three workspaces are relevant for the example project (see also
Figure 3-2 on page 14):
– Project Explorer
– Toolbox
– Properties
Project Explorer work- As an administrative tool, the Project Explorer workspace enables structured access to all
space elements available in the project. The Project Explorer (see Figure 3-11) is subdivided into
elements (project administration) and commands (not visible in Figure 3-11), whereby the
latter offers context-related functions for the selected element.
Figure 3-11 Project Explorer workspace
This workspace can be shown in the menu bar under “View, Project Explorer”.
Toolbox workspace The Toolbox workspace provides geometric basic elements and objects with pre-defined
functions for creating and designing the user interface (see Figure 3-12).
Figure 3-12 Toolbox workspace

Visu+ Express HMI
This workspace can be shown in the menu bar under “View, Toolbox”.
Properties workspace The properties workspace provides all properties of the selected elements and graphical
objects (see Figure 3-13). These include:
– General properties of the entire project
– General screen properties
– Properties of objects in screens
– Size and position on the screen
– Static properties (frame, background color, font size)
– Event-controlled showing/hiding
– Animations such as color change, scaling, rotation, translation, etc.
Figure 3-13 Properties workspace
This workspace can be shown in the menu bar under “View, Properties”.

3.2.3 Defining properties of objects
The majority of settings can be made directly in the Properties workspace by entering the
desired characteristic in the workspace (for example size and position of an object) or se-
lecting pre-defined properties (such as text alignment in an object) via a drop-down menu.
In order to change the text alignment in an object, for example, proceed as follows:
• Insert the required object onto the screen.
• Click on the inserted object to display its Properties workspace.
• Under “Properties, Fonts”, click on the “Text Align” selection (Step 1 in Figure 3-14) and
select the desired alignment in the drop-down menu of the adjacent column (Step 2 in
Figure 3-14).
Figure 3-14 Text alignment
More complex properties which require a multi-stage procedure can be defined by calling a
context menu.
In order to change the title font of an object, for example, proceed as follows:
• Insert the required object onto the screen.
• Click on the inserted object to display its Properties workspace.
• Under “Properties, Fonts”, double-click the “Title Font” selection in order to call the con-
text menu (see Step 1 in Figure 3-15).
Alternatively, you can call the context menu by initially highlighting the “Title Font” se-
lection and then clicking on the icon (see Step 2 in Figure 3-15).
Figure 3-15 Title font
The context menu is opened.

• Select the desired font in the context menu.

Visu+ Express HMI
3.2.4 Drag-and-drop function
Drag-and-drop describes a work technique for software with a graphical user interface,
used to select graphical elements such as graphics or text fragments and move them across
the screen with the mouse button pressed and held (“drag”), and then insert them at the de-
sired position (“drop”). In doing so, you will considerably accelerate programming and pa-
rameterization.
In Visu+ Express, you can perform the following by means of drag and drop:
– Move or copy project resources
– Insert objects from the toolbox into the design area
– Link Project Explorer variables with objects in screens.
3.3 Device information
Device information about the connected operator panel is displayed in an info window. To
display device information, proceed as follows:
• Click the button.
The “Device Control” window is opened.
• In the “Plugin Type” area, ensure that the “TCP” connection type is selected (see Step
1 in Figure 3-16).
• Click on the server input field and enter the IP address of the operator panel there (see
Step 2 in Figure 3-16).
• Click the “Read Device Info” button (see step 3 in Figure 3-16).
Figure 3-16 “Device Control” window

A selection window appears in which you can select the data transmission speed.
• Select a data transmission speed.
• Confirm your selection with the “Close” button.
An info window appears with the device information. The following information about the
connected operator panel is displayed in the info window:
– Order information for operator panel (designation and order number)
– Serial number
– MAC address
– Hardware and firmware ID
– Version of the firmware and of the images in it
– Version of Visu+ Runtime and the AX OPC Server
– Name of the application saved on the operator panel
• Click the “OK” button to close the info window.

Visu+ Express HMI

Visualizing with Visu+ Express
4 Visualizing with Visu+ Express

In this section, it is assumed that the following steps have already been completed:
– The hardware has been started up.
– The hardware components form a network. This means that an active Ethernet connec-
tion is established between the hardware components.
– The Visu+ Express software is installed.
– The AX OP Server software is installed and licensed.
Phoenix Contact recommends installing the AX OPC Server for the example project with
administrator rights.
– The PC Worx Express software is installed.

– The “HMI_QuickStart_ILC131.zwe” example project is executed by the controller (the
ILC 131 ETH Inline controller from the starter kit).
4.1 Description of the visualization project
The visualization project consists of a minimum of two screens which are linked together.
The following basic functions are implemented here:
– Creating and parameterizing simple geometric shapes (frames)
– Creating and parameterizing simple objects for alphanumerical representation of infor-
mation and process data (text fields, EditBox display)
– Creating and parameterizing simple animated objects for visualizing process data (col-
or change, bar graph)
– Creating and parameterizing control elements for modifying process data and naviga-
tion (sliders, buttons)
– Creating and linking variables
– Reading in and representing variables from the controller via OPC
The first screen forms the main interface of the visualization project. This is split into five
parts:
– Part 1:
A button is used to produce a change in color of an object (the LED is switched on and
off).
– Part 2:
A slider is used to change the value of a variable. At the same time, the value of this vari-
able is represented as a bar graph.
– Part 3:
The value of a variable is displayed alphanumerically. The value of these variables can
be changed using two buttons (a counter is increased or decreased).
– Part 4:
A new screen can be called using a new button. This function can be used to navigate
within the application.
– Part 5:
The value of a control variable is displayed alphanumerically. A button can also be used
to change the value of a PLC variable.

Visu+ Express HMI
The second screen is required to simulate the navigation. For this purpose, a button is cre-
ated which links to the first screen.
4.2 Creating a new project
If you want to skip this section and prepare the user interface of the HMI application
straight away, open the “HMI_Quickstart_Step_1” project and continue with Section 4.3.1
on page 31.
• Start Visu+ Express.
When Visu+ Express is started for the first time, the interface is displayed with the basic
settings. When Visu+ Express is started, the Project Wizard automatically appears, and
you can use it to create a new project. If the software was started before and if any visu-
alization project was opened, this project appears in the Visu+ Express project tree.
• If a project is displayed in the project tree, close it with “File, Close”.
There are three options for creating a new project and opening the Project Wizard:
– By clicking the button on the toolbar
– Choosing “File, New” from the menu bar
– By using the keyboard shortcut “Ctrl” + “n”
• If the Project Wizard is not yet displayed, select one of these options to continue with
the project creation.
The Project Wizard appears, and you can parameterize the project.
• Name the project, for example, “HMI_Quickstart” (see step 1 in Figure 4-1).
In Visu+ Express, one storage location is defined for all projects. When you name your
project, a folder is created automatically at this location. The folder name is the same as
the project name.
• If you want to store your project elsewhere, enter the path to the alternative storage lo-
cation (see step 2 in Figure 4-1).

When you select an operator panel, basic project parameters, for example the resolution of
the screens, are automatically defined.
• Select the TP 3070W (or TP 3070T) operator panel (see step 3 in Figure 4-1).
• Click the “Next >” button.
Figure 4-1 Project Wizard: Creating a new project
If another project with the same name already exists in the selected storage location, a mes-
sage window appears.
• Select “Yes” to overwrite the project.

• Select “No” to choose a new name or a new storage location.

Visu+ Express HMI
In the Project Wizard, a new dialog box appears. Here, you can define the project compo-
nents.
Figure 4-2 Project Wizard: defining components
The basic setting for the number of screens to be defined is 4. This is the quantity required
during this quick start procedure.
• To continue, click the “Next >” button.

In the Project Wizard, a new dialog box appears. You can now define the basic appearance
of the user interfaces. In this example, all you will do is to select the screen title option.
Visu+ Express automatically takes the name of the screen as a screen title. You can
change the screen title later on in the object properties.
• Select the checkbox next to “Add screen title”.

• Deselect the checkboxes of the other components.
• Click the “Finish” button to create the project.
The project is created and configured. After that, the Project Wizard closes automatically.
The project is now available for further processing (see Figure 4-3).
Figure 4-3 Created project

Visu+ Express HMI
4.3 Getting started
In this section, a HMI application is created, which demonstrates a number of selected basic
functions of Visu+ Express (see Figure 4-4).
Figure 4-4 Aim of the section: “HMI_QuickStart_ILC131.zwe” example project
• Set up the development environment by fixing the relevant workspaces (for this pur-
pose, see also Section “The Visu+ Express user interface” on page 13).
You require the following workspaces:

– Project Explorer
– Tool box
– Features
• Ensure that you are able to access the relevant settings. Adjust the header of the Prop-
erties workspace as shown (see Figure 4-5).
Figure 4-5 Adjusting the header of the Properties workspace

4.3.1 Preparing the user interface of the HMI application
In this section, the user interface of the HMI application is prepared for the following steps.
During this preparatory phase, you will familiarize yourself with the basic functions which
you will subsequently use.
If you want to skip this section and graphically design the user interface of the HMI appli-
cation straight away, open the “HMI_Quickstart_Step_2” project and continue with Sec-
tion 4.3.2 on page 35.
• In the Project Explorer, open the “Screen1” screen (see Figure 4-6).
Figure 4-6 Opening the “Screen1” screen
• In the Toolbox, go to “Basic Shapes”, and select the “Rectangle” object (see Figure 4-7)
and use drag and drop (see Section “Drag-and-drop function” on page 22) to insert it
into the screen.
Figure 4-7 Selecting a basic shape from the Toolbox
• In order to display the properties of the rectangle, click on the inserted rectangle. (If the
workspace is hidden, double-click the rectangle. If the workspace is fixed, a single click
is sufficient.)
In the workspace properties, the properties of the object are displayed on the right-hand
side (here: the rectangle).

Visu+ Express HMI
• Now, parameterize the position and the size of the rectangle according to Table 4-1 un-
der “Properties, Position”.
Please note:
The designations of the objects in the Table 4-1 below may vary from the designations in
your Visu+ Express project if you have previously added and/or removed objects.
Visu+ Express assigns a consecutive number to all objects, even if they are removed
again once added.
The designations in Table 4-1 correspond to the following system:
ObjectType_Screen.Sequence
This approach is used throughout the entire document.
Table 4-1 Position and size of the rectangles
Object Position X Position Y Width Height

Rectangle_1.1 10 50 210 260
Rectangle_1.2 230 50 210 260
Rectangle_1.3 450 50 210 260
Rectangle_1.4 10 320 650 150
Rectangle_1.5 670 50 120 420
• Save the settings by clicking on the icon in the header of the Properties workspace
or by clicking on the screen with the mouse.
• Insert the other objects listed in Table 4-1, and parameterize and save them.

In this step, you will give a title to the individual rectangles, and also adjust the fonts and the
frames.
For additional information, please refer to Section “Defining properties of objects” on

page 21.
• Select the “Rectangle_1.1” object.

• In “Properties, General, Object Title“, change the title to “Button and LED”.
• Change the text alignment under “Properties, Fonts, Text Align”. Set the text alignment
to “Top”.
• Open the context menu under “Properties, Fonts, Title Font” in order to set the font.
• Change the font to “Arial”, the font style to “Bold”, and the font size to 12.
Figure 4-8 Changing the font
The "Font" window is a Windows window and is opened in the display language of the op-
erating system.
• Confirm the settings with “OK”.

• Go to “Properties, Stroke Attributes, Border Size”, and set the border thickness to 2.
• Save the settings by clicking on the icon in the header of the Properties workspace
or by clicking on the screen with the mouse.
• Use the same settings for the other objects. For the rectangles, use the following titles:
– Rectangle_1.2: Counter
– Rectangle_1.3: PLC connection
– Rectangle_1.4: Bargraph animation
– Rectangle_1.5: Navigation

Visu+ Express HMI
The first screen should now appear as shown in Figure 4-9.
Figure 4-9 Screen 1
• Save the project by clicking on the icon in the toolbar.

4.3.2 Graphically designing the user interface of the HMI appli-

cation
If you want to skip this section and link the graphical user interface with controller vari-
ables straight away, open the “HMI_Quickstart_Step_3” project and continue with Section
4.3.2.5 on page 47.
4.3.2.1 Button and LED

The aim of this section is to create a button used to change the color of an object (switching
on and off an LED with a button). To this end, a variable will be created and linked to previ-
ously created objects. Afterwards, the project will be simulated in order to check if it is func-
tioning correctly.
Figure 4-10 “Button and LED”
• In the Toolbox, select any LED from “Lights-LEDs” and use drag and drop to insert it
into the screen (see Section “Drag-and-drop function” on page 22).
• In the Toolbox, select any button from “Rectangle Buttons”, and also insert it into the
project.
• Click the corresponding object to open its properties.
• Parameterize the position and the size according to Table 4-2.
Table 4-2 Size and position of the LED and button
Object Position X Position Y Width Height

LED_1.1 70 100 90 90
Button_1.1 40 210 150 80
In order to switch the LED via the button, a new variable has to be created.
• Switch to the Project Explorer workspace.

Visu+ Express HMI
Under “Real Time DB”, you will find the “Variables” menu item.
• Right-click the “Variables” menu item, and select “New Variable (Tag)...” (see
Figure 4-11).
Figure 4-11 Creating a new variable
A window appears, and you can name the variable.

• Give the variable the name “LED”.
• Confirm your entries with “OK”.
The newly created “LED” variable is displayed in the variables list (see Figure 4-12).
Figure 4-12 Newly created variable in the variables list
Now, you need to link this variable to an object.
There are two options for linking variables to objects:

– Use drag and drop to move the variables from the Project Explorer directly to the “But-
ton and LED” objects on the screen.
– You can click the object to open the properties window. With the “Execution, Com-
mand/State Variable” menu item, you can link the variable to the object.

• Link both objects to the “LED” variable.

If you use the drag and drop function:

• Check that the variable has been linked correctly (see Figure 4-13).
Figure 4-13 Linked “LED” variable
You can now simulate/start the project either by clicking the symbol on the toolbar, by
pressing the keyboard shortcut “Alt” + “F12”, or by selecting “File, Start Project”.
• Check if the LED switches on and off when you click the button.
Figure 4-14 “Button and LED”
• Exit the simulation by clicking the icon (see also Figure 4-15) or pressing the key-
board shortcut “Alt” and “F12”.
Figure 4-15 Exiting the simulation

Visu+ Express HMI
4.3.2.2 Bargraph animation

The aim of this section is to insert animated graphics in the form of a bar graph and slider
and to link a variable. Afterwards, the project will be simulated in order to check if it is func-
tioning correctly.
Figure 4-16 “Bargraph animation”
• In the Toolbox, under “Sliders-Gauges-Meters-Displays”, select the “Horizontal Slider”

and “Horizontal Bargraph” objects, and insert these objects into the screen one by one.
• Parameterize the properties according to Table 4-3 and Table 4-4.
Table 4-3 Properties of the Horizontal Slider
Style, scale settings, show scale Uncheck the “Show Scale” box
Position X 10
Position Y 410
Width 640
Height 50
Table 4-4 Properties of the Horizontal Bargraph
Style, scale settings, show scale Uncheck the “Show Scale” box
Position X 20
Position Y 350
Width 630
Height 50

• Create a new variable, and link it to the slider and to the bargraph. An example for the
variable name would be “Bargraph”.
• Start the simulation with the icon, and check if the slider works correctly (see
Figure 4-17).
Figure 4-17 “Bargraph animation”
• Exit the simulation by clicking the icon (see also Figure 4-15) or pressing the key-

Visu+ Express HMI
4.3.2.3 Counter
The aim of this section is to display the value of a variable. You will create two buttons used
to increase and decrease the value of this variable. Afterwards, the project will be simulated
in order to check if it is functioning correctly.
Figure 4-18 “Counter”
• In the Toolbox, select Object then choose “Editbox-Display” and add it to the counter.
• In the Toolbox, select “Basic Controls” then choose Push Button. Add two of these to
the counter.
• Modify the object properties according to Table 4-5.
Table 4-5 Properties of “EditBox-Display” and buttons
EditBox display_1.1
Style, Spin Enable Uncheck the “Spin enable” box
Font Center, Arial, bold, size 12
Position X 290
Position Y 80
Width 90
Height 70
Button_2.1
General, Object Title +
Position X 260
Position Y 160
Width 150
Height 70

Table 4-5 Properties of “EditBox-Display” and buttons

Button_2.2
General, Object Title –
Position X 260
Position Y 230
Width 150
Height 70
• Create a new variable and name it “Counter”, for example.

• Link this variable to the “EditBox-Display” object.
• Open the context menu for button_2.1 under “Execution, Commands on Release”.

page 21.
• Insert a new command (see step 1 in Figure 4-19).

• Link the “Counter” variable (see step 2 in Figure 4-19).
• Change the action to “Increase” (see step 3 in Figure 4-19).
• Change the value to 1 (see step 4 Figure 4-19).
• Confirm with “OK” and to close the window click “OK”.
Figure 4-19 Defining an action for the button
• Repeat this procedure for the second button. For the action, choose “Decrease”.
• Start the simulation, and check if the counter is working correctly (see Figure 4-20).

Visu+ Express HMI
Figure 4-20 “Counter”
• Exit the simulation by clicking the icon (see also Figure 4-15) or by pressing the key-

4.3.2.4 Navigation
During project creation, you have created a total of four screens. So far, you only work with
one of them, and you cannot switch to the other screens during simulation. The aim of this
section is to set up a navigation bar to switch between the screens during simulation.
Figure 4-21 Navigation bar used to switch between the screens during simulation
• In the Toolbox, select “Basic Controls” then choose Push Button. Add four of these to
the screen.
• Change the titles and properties of the buttons according to Table 4-6.
Table 4-6 Titles and properties of the buttons on the navigation bar
Button_3.1
General, Object Title Page 1
Position X 680
Position Y 85
Width 100
Height 90
Button_3.2
Title Page 2
Position X 680
Position Y 180
Width 100
Height 90

Visu+ Express HMI
Table 4-6 Titles and properties of the buttons on the navigation bar
Button_3.3
Title Page 3
Position X 680
Position Y 275
Width 100
Height 90
Button_3.4
Title Page 4
Position X 680
Position Y 370
Width 100
Height 90

• Open the context menu for button_3.1 under “Execution, Command on Release”.

page 21.
• Insert a new command (see step 1 in Figure 4-22).

• Go to the “Screen” tab (see step 2 in Figure 4-22).
• Open the context menu by highlighting the “Screen” selection and then clicking on the
icon in the adjacent column (see Step 3 in Figure 4-22).

page 21.
• Select “Screen1” (see Step 4 in Figure 4-22).

• Confirm your selection with “OK”.
Figure 4-22 Selecting screens for the navigation bar
• To exit the settings, click “OK”.

• Close the command list by clicking “OK”.
• Repeat this procedure for the remaining three buttons. During the selection, refer to
Table 4-7.
Table 4-7 Branch destinations of the individual buttons
Button Branch destination

Button_3.1 (Page 1) Screen1

Visu+ Express HMI
As the next step, all the buttons created in this section should be copied to all other screens
to make it possible to switch from one page to another (from one screen to another screen).
• Select the four objects (Button_3.1 – Button_3.4) by Ctrl-clicking the individual objects.
• Copy these objects using the keyboard shortcut “Ctrl” + “c”.
• Switch to the Project Explorer workspace.
• Open screen2 by double-clicking the menu item.
Screen2 is displayed.
• Paste the previously copied objects using the keyboard shortcut “Ctrl” + “v”.
• Repeat this procedure for the other two screens.
• Start the simulation and switch between the screens.
Figure 4-23 During the simulation, use the navigation bar to switch between the screens
• Exit the simulation by clicking the icon (see also Figure 4-15) or by pressing the key-

4.3.2.5 PLC connection

The aim of this section is to create the “EditBox-Display” and "Button" objects and link them
with external variables from a finished PC Worx Express project. The external variables are
initially connected to the Visu+ Express project using the OPC Configurator and then linked
to the graphical elements of the user interface.
Figure 4-24 PLC connection
• Ensure you are using the extended project “HMI_QuickStart_ILC131.zwe”.

If you do not use the extended example project “QuickStart_ILC131.zwe” from the
ILC 131 starter kit, you will not be able to implement certain functions.

Visu+ Express HMI
You will want the “EditBox-Display” to display the frequency value from the
PC Worx Express project. Using the button, you can set the status LED of an output, that
means, lighting it permanently.
• From the Toolbox, Objects choose the “EditBox-Display” object from the "PLC Connec-
tion section". Then insert it into the “Screen1” screen.
• Additionally, insert a button.
• For the properties, refer to Table 4-8.
Table 4-8 Properties of the buttons
EditBox display_4.1
Style, Spin Enable Uncheck the “Spin Enable” box
Style, Format Value xxx
Position X 505
Position Y 80
Width 90
Height 70
Button_4.1
General, Object Title LED_ON_OFF
Position X 480
Position Y 230
Width 150
Height 70

4.3.3 Selecting and configuring the communication driver
Before you can link variables provided by a controller to user interface objects, you will need
to read the variables using a communication driver.
In the example project, communication is established via OPC. For this purpose, an
AX OPC Server is used, which is already pre-installed on every Visu+ HMI. OPC variables
are exchanged between the individual hardware devices during the process (execution of
the application). The variables of the PC Worx Express project must be configured for this
function.
To set up a data exchange via OPC, proceed as follows:
1. Create an OPC resource which represents an interface between the controller and
OPC server (see Section “Creating an OPC resource” on page 50).
2. Establish a connection to the controller (see Section “Establishing a connection to the
controller” on page 53).
3. Integrate the OPC variables into the visualization project (see Section “Integrating the
OPC variables into the visualization project” on page 55).
Changing the language of If necessary, the language of the OPC configurator must be adapted. To do this, proceed
the user interface as follows:
• Start the “OPC Configurator” application via “Start, Programs, Phoenix Contact, AX
OPC Server”.
• Use the right mouse button and click on “OPCProject” to open the context menu.
• In the context menu, under “Change Language”, select the desired language (see
Figure 4-25).
Figure 4-25 Changing the language of the OPC Configurator

Visu+ Express HMI
4.3.3.1 Creating an OPC resource

OPC technology enables you to receive data from several controllers simultaneously. To do
so, each controller must be created as an instance in the AX OPC Server. This is done using
the OPC resource.
• Start the “OPC Configurator” application via “Start, Programs, Phoenix Contact, AX
OPC Server”.
• Use the right mouse button and click on “OpcProject” to open the context menu and
click on “New Resource...” (see Figure 4-26).
Figure 4-26 OPC Configurator: creating a new resource

A new resource is created.

• Rename the resource, for example to “ILC131”. To do so, right-click the new resource,
and select “Rename Resource” in the context menu that opens.
Figure 4-27 OPC Configurator: Resource renamed
After you have selected the new resource, the configuration menu appears on the right-
hand side.
• From the “Resource type” drop-down menu, select the parameters of the controller
used.

Visu+ Express HMI
With the ILC 131 starter kit, a class ILC 1xx controller is used (see Figure 4-28).
Figure 4-28 OPC Configurator: selecting a “Resource type”
• Click “Settings”.
• Into the “IP Address” field, enter the IP address of the controller providing the OPC vari-
ables you want to use (see Figure 4-29).
Figure 4-29 OPC Configurator: IP address of the controller
• Confirm your entry with “OK”.

You have completed configuration of the OPC connection for using the OPC variables by
an OPC client.

4.3.3.2 Establishing a connection to the controller

• Start the “OPC Test Client” via “Start, Programs, Phoenix Contact, AX OPC Server”.
When you select “Server, Connect”, the AX OPC server is started on your development en-
vironment. Then, the OPC Test Client connects to the controller.
The OPC Test Client is used to test the OPC communication.
• Establish a connection to the AX OPC server (see Figure 4-30).
Figure 4-30 Connecting to the AX OPC server
By selecting the “Group, Add all items” menu, you can read all the OPC variables that are
written to the OPC server.
• Read all the OPC variables (see Figure 4-31).
Figure 4-31 Reading OPC variables

Visu+ Express HMI
Using the OPC Test Client, you have now established communication between the ILC 131
starter kit and your development environment. The variables that are now exchanged be-
tween the controller and the AX OPC server are displayed in the OPC Test Client (see
Figure 4-32).
Figure 4-32 OPC-Test Client displaying the variables that are exchanged between the
controller and the AX OPC server
If no variables are displayed, this means that the OPC settings were not applied or the AX
OPC server cannot connect to the controller. In this case, proceed as follows:
• Check whether
– the AX OPC server is licensed
– there is a network connection to the controller
– correct connection is prevented by the Windows firewall or an antivirus program
– the OPC server has been configured according to the specifications, and the val-
ues have been saved
• Check whether the OPC server was started at the time the settings were made.
If the OPC sever has already been started and executed, then OPC settings can no longer
be made. You must exit the OPC server prior to making the settings. Reliably interrupt the
connection by right-clicking on the icon (for OPC) on the right of the Windows status bar
to open the context menu and then click “Exit”.
• Restart the computer and make the necessary settings on the OPC Resource (see
Section 4.3.3.1 and Section 4.3.3.2). Only open PC Worx Express and Visu+ Express
software once the necessary settings have been made on the OPC resource.

4.3.3.3 Integrating the OPC variables into the visualization project

In order to integrate the OPC variables into the visualization project, OPC must first of all be
defined as the communication driver and the previously created OPC resource must be
named.
• Close both the OPC Configurator and the OPC Test Client, and switch to the
Visu+ Express interface.
• In the project tree, right-click to open the “OPC Client DA (COM)” context menu and
choose “Add New OPC Item...” (see Figure 4-33).
Figure 4-33 “Add New OPC Item”
The Tag Browser is opened.

Visu+ Express HMI
• In the Tag Browser, choose the path “Local (My Computer), AUTOMATIONWORX
OPC-Server”, then select the “ILC131” OPC resource (see Figure 4-34).
Figure 4-34 Selecting an OPC resource
On the right-hand side of the Tag Browser, all the variables provided by the OPC resource
(here: ILC131) via OPC are displayed.
• Highlight the “ActTimeFlashLight” and “LED_ON_OFF” variables.
• Close the Tag Browser by clicking “OK”.

The selected variables are added to the project tree under “Real Time DB, Variables (Tags)”
(see Figure 4-35). As they are OPC variables, the corresponding variables are also added
to the project tree under “OPC Client DA (COM), PhoenixContact.AX-Server, Group”.
Figure 4-35 Project tree: “Real Time DB, Variables (Tags)”
4.3.3.4 Connecting the “EditBox-Display” and the button to the PLC

• Link the “ActTimeFlashLight” variable to the “I/O display”.
• Open the button properties.
• Under “Execution, Command/State Variable”, link the “LED_ON_OFF” variable to the
button (see also Figure 4-36).
• Change the “Command Type” to “ON-OFF”.
• Save the settings.
• Start the simulation.
The Visu+ Express project now displays the set frequency of the status LEDs. By clicking
on the button, the running light ends and the status LED of output Q1 on the controller is per-
manently on.
Figure 4-36 Linking the “LED_ON_OFF” variable to the button under “Execution, Com-
mand/State Variable”

Visu+ Express HMI
4.3.4 Uploading the visualization project to the operator panel
Upload is only possible when the upload server is executed inside the operator panel
(here: TP 3070W). The Cockpit configuration tool will execute the upload server automat-
ically after the countdown (progress bar) ends and before the Visu+ Express application
will be started.
To upload the visualization project to the operator panel, follow the steps below:
• Check if there is an existing network connection to the operator panel.
• If not, specify an IP address and a subnet mask for the operator panel under “Basic Set-
tings” in the “Cockpit” configuration menu. For this purpose, refer to the UM EN TP 3xxx
user manual, which can be downloaded at phoenixcontact.net/products.
The IP addresses of all network components such as PC, controller, and HMI must be dif-
ferent.
• Click the button.

The “Upload project name” window opens (see Figure 4-37).
Figure 4-37 Uploading the project
• In the “PlugIn Type” field, select the “TCP” entry (see Step 1 in Figure 4-37).
• Enter the IP address of the operator panel into the “Server” field (see Step 2 in
Figure 4-37).
In Visu+ Express, you can interact with the operator panel. From Visu+ Express, you can
thus start a visualization project stored locally, or stop any project from being executed.
• If any visualization project is executed on the operator panel, stop it by clicking the
“Stop Device Project!” button.
• In the window that is then displayed, select “Default Speed”, and click the “Close” but-
ton.
The project is stopped.

• Click the “Upload project!” button in order to upload the visualization project to the op-
erator panel (see Step 3 in Figure 4-37).
If any project has been stored on the operator panel, Visu+ Express will ask if you want to
overwrite this project. If a project with the same name has been stored, you have to re-
confirm that this project can be overwritten.
• Confirm that an existing project can be overwritten.

The visualization project is uploaded to the operator panel.
• Start the project by clicking the “Start Device Project” button.
The project is started on the operator panel. You can now see the user interface, and navi-
gate through the screens.
4.3.5 Uploading OPC resources to the operator panel
In the last step, you need to upload the OPC resources that have previously been created
in the “OPC Configurator” (see Section “Creating an OPC resource” on page 50) to the op-
erator panel.
• Click the button to open the device control in Visu+ Express.
• Click on the “Upload OPC Resource Files” button.
Figure 4-38 “Upload OPC Resource Files” button

Visu+ Express HMI
By default, the “OPC Configurator” stores the OPC resources under this path: “C:\Us-
ers\Public\Documents\OPC-Server\OpcProject”.
• Open the “C:\Users\Public\Documents\OPC-Server\OpcProject” path.

• Select the .opc file of the controller used (here: “ILC131.opc”) and click “Open”.
Figure 4-39 Selecting the OPC resource files
Visu+ Express automatically uploads the selected OPC resource to the operator panel.
• Restart the operator panel.
After the boot process, the operating system and the configuration menu are executed.
After the countdown (progress bar) has ended, the visualization project is started automat-
ically. At the same time, the AX OPC server is started, and automatically connects to the
controller. The visualization project is now executed on the operator panel.

A Appendix for document lists
A1 List of figures
Section 2
Figure 2-1: Topology of the example project ...........................................................9
Section 3
Figure 3-1: User interface without workspaces displayed .....................................13
Figure 3-2: User interface with Project Explorer (shown), Toolbox and Properties
(both minimized) workspaces .............................................................14
Figure 3-3: Selecting and displaying workspaces .................................................14
Figure 3-4: Displayed workspace ..........................................................................15
Figure 3-5: Hiding the workspace .........................................................................15
Figure 3-6: Adjusting the position of the workspace ..............................................16
Figure 3-7: Icon in the title bar of a workspace for minimizing it .............................17
Figure 3-8: Minimized workspace .........................................................................17
Figure 3-9: Tool tip ................................................................................................18
Figure 3-10: toolbar ................................................................................................18
Figure 3-11: Project Explorer workspace ................................................................19
Figure 3-12: Toolbox workspace .............................................................................19
Figure 3-13: Properties workspace .........................................................................20
Figure 3-14: Text alignment ....................................................................................21
Figure 3-15: Title font ..............................................................................................21
Figure 3-16: “Device Control” window .....................................................................22
Section 4
Figure 4-1: Project Wizard: Creating a new project ...............................................27
Figure 4-2: Project Wizard: defining components .................................................28
Figure 4-3: Created project ...................................................................................29
Figure 4-4: Aim of the section: “HMI_QuickStart_ILC131.zwe” example project ...30
Figure 4-5: Adjusting the header of the Properties workspace ..............................30
Figure 4-6: Opening the “Screen1” screen ............................................................31
Figure 4-7: Selecting a basic shape from the Toolbox ..........................................31
Figure 4-8: Changing the font ................................................................................33

Visu+ Express HMI
Figure 4-9: Screen 1 .............................................................................................34

Figure 4-10: “Button and LED” ................................................................................35
Figure 4-11: Creating a new variable ......................................................................36
Figure 4-12: Newly created variable in the variables list ..........................................36
Figure 4-13: Linked “LED” variable .........................................................................37
Figure 4-14: “Button and LED” ................................................................................37
Figure 4-15: Exiting the simulation ..........................................................................37
Figure 4-16: “Bargraph animation” ..........................................................................38
Figure 4-17: “Bargraph animation” ..........................................................................39
Figure 4-18: “Counter” .............................................................................................40
Figure 4-19: Defining an action for the button .........................................................41
Figure 4-20: “Counter” .............................................................................................42
Figure 4-21: Navigation bar used to switch between the screens during simulation 43
Figure 4-22: Selecting screens for the navigation bar .............................................45
Figure 4-23: During the simulation, use the navigation bar to switch between the
screens ...............................................................................................46
Figure 4-24: PLC connection ..................................................................................47
Figure 4-25: Changing the language of the OPC Configurator ................................49
Figure 4-26: OPC Configurator: creating a new resource ........................................50
Figure 4-27: OPC Configurator: Resource renamed ...............................................51
Figure 4-28: OPC Configurator: selecting a “Resource type” ..................................52
Figure 4-29: OPC Configurator: IP address of the controller ...................................52
Figure 4-30: Connecting to the AX OPC server .......................................................53
Figure 4-31: Reading OPC variables ......................................................................53
Figure 4-32: OPC-Test Client displaying the variables that are exchanged between
the controller and the AX OPC server .................................................54
Figure 4-33: “Add New OPC Item” ..........................................................................55
Figure 4-34: Selecting an OPC resource .................................................................56
Figure 4-35: Project tree: “Real Time DB, Variables (Tags)” ...................................57
Figure 4-36: Linking the “LED_ON_OFF” variable to the button under “Execution,
Command/State Variable” ...................................................................57
Figure 4-37: Uploading the project ..........................................................................58
Figure 4-38: “Upload OPC Resource Files” button ..................................................59
Figure 4-39: Selecting the OPC resource files ........................................................60

A2 List of tables
Section 1
Table 1-1: Required hardware ................................................................................8
Table 1-2: Required software..................................................................................8
Section 2
Table 2-1: IP addresses and subnet mask of network components (example) .......9
Section 4
Table 4-1: Position and size of the rectangles.......................................................32
Table 4-2: Size and position of the LED and button ..............................................35
Table 4-3: Properties of the Horizontal Slider .......................................................38
Table 4-4: Properties of the Horizontal Bargraph ..................................................38
Table 4-5: Properties of “EditBox-Display” and buttons ........................................40
Table 4-6: Titles and properties of the buttons on the navigation bar....................43
Table 4-7: Branch destinations of the individual buttons.......................................45
Table 4-8: Properties of the buttons......................................................................48

Visu+ Express HMI

Getting Started With Visu+ Express and HMI: Quick Start Guide

Uploaded by

Copyright:

Available Formats

Getting Started With Visu+ Express and HMI: Quick Start Guide

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Getting Started With Visu+ Express and HMI: Quick Start Guide

Uploaded by

Copyright:

Available Formats

Getting started with

Visu+ Express and HMI

Quick start guide

Designation: UM QS EN VISU+ HMI

This user manual is valid for:

Designation Order No.

PHOENIX CONTACT 106493_en_02

Published by PHOENIX CONTACT GmbH & Co. KG

General terms and conditions of use for technical documentation

3 Helpful information about Visu+ Express .................................................................................13

4 Visualizing with Visu+ Express .................................................................................................25

A Appendix for document lists......................................................................................................61

106493_en_02 PHOENIX CONTACT 5

6 PHOENIX CONTACT 106493_en_02

1.2 Information about this document

The “HMI_QuickStart_ILC131.zwe” example project is used to describe how you:

– The PC Worx Express software is installed.

106493_en_02 PHOENIX CONTACT 7

1.3 Required hardware

Designation Order No. Firmware version

1.4 Required software

Designation Software version

8 PHOENIX CONTACT 106493_en_02

2.1 Connecting devices

ILC 131 ETH

Figure 2-1 Topology of the example project

Table 2-1 IP addresses and subnet mask of network components (example)

Network components IP address Subnet mask

106493_en_02 PHOENIX CONTACT 9

2.2 Starting up the TP 3070W

Operation is performed via the display touchscreen.

10 PHOENIX CONTACT 106493_en_02

2.3 Starting up the ILC 131 starter kit

2.3.2 Configuration (loading and parameterizing the program)

• Ensure you are using the extended project “HMI_QuickStart_ILC131.zwe”.

106493_en_02 PHOENIX CONTACT 11

12 PHOENIX CONTACT 106493_en_02

3 Helpful information about Visu+ Express

3.1 General information

3.2 The Visu+ Express user interface

Figure 3-1 User interface without workspaces displayed

106493_en_02 PHOENIX CONTACT 13

Figure 3-3 Selecting and displaying workspaces

14 PHOENIX CONTACT 106493_en_02

Figure 3-4 Displayed workspace

Figure 3-5 Hiding the workspace

106493_en_02 PHOENIX CONTACT 15

Figure 3-6 Adjusting the position of the workspace

The workspace is displayed in the standard size following “docking”.

16 PHOENIX CONTACT 106493_en_02

Figure 3-7 Icon in the title bar of a workspace for minimizing it

Figure 3-8 Minimized workspace

106493_en_02 PHOENIX CONTACT 17

Figure 3-9 Tool tip

Figure 3-10 toolbar

Frequently used icons

Start simulation (Alt + F12)

Stop simulation (Alt + F12)

Device Control Panel