Manual

TC3 PLC HMI Web

TwinCAT 3

Version: 1.2
Date: 2018-05-23
Order No.: TF1810
 Table of contents

Table of contents
1 Foreword .................................................................................................................................................... 5
1.1 Notes on the documentation...........................................................................................................  5
1.2 Safety instructions ..........................................................................................................................  6

2 PLC HMI Web ............................................................................................................................................. 7

TC3 PLC HMI Web Version: 1.2 3

Table of contents

4 Version: 1.2 TC3 PLC HMI Web

 Foreword

1 Foreword

1.1 Notes on the documentation

This description is only intended for the use of trained specialists in control and automation engineering who
are familiar with the applicable national standards.
It is essential that the documentation and the following notes and explanations are followed when installing
and commissioning the components.
It is the duty of the technical personnel to use the documentation published at the respective time of each
installation and commissioning.

The responsible staff must ensure that the application or use of the products described satisfy all the
requirements for safety, including all the relevant laws, regulations, guidelines and standards.

Disclaimer

The documentation has been prepared with care. The products described are, however, constantly under
development.
We reserve the right to revise and change the documentation at any time and without prior announcement.
No claims for the modification of products that have already been supplied may be made on the basis of the
data, diagrams and descriptions in this documentation.

Trademarks

Beckhoff®, TwinCAT®, EtherCAT®, Safety over EtherCAT®, TwinSAFE®, XFC® and XTS® are registered
trademarks of and licensed by Beckhoff Automation GmbH.
Other designations used in this publication may be trademarks whose use by third parties for their own
purposes could violate the rights of the owners.

Patent Pending

The EtherCAT Technology is covered, including but not limited to the following patent applications and
patents:
EP1590927, EP1789857, DE102004044764, DE102007017835
with corresponding applications or registrations in various other countries.

The TwinCAT Technology is covered, including but not limited to the following patent applications and
patents:
EP0851348, US6167425 with corresponding applications or registrations in various other countries.

EtherCAT® is registered trademark and patented technology, licensed by Beckhoff Automation GmbH,
Germany

Copyright

© Beckhoff Automation GmbH & Co. KG, Germany.

The reproduction, distribution and utilization of this document as well as the communication of its contents to
others without express authorization are prohibited.
Offenders will be held liable for the payment of damages. All rights reserved in the event of the grant of a
patent, utility model or design.

TC3 PLC HMI Web Version: 1.2 5

Foreword

1.2 Safety instructions

Safety regulations

Please note the following safety instructions and explanations!

Product-specific safety instructions can be found on following pages or in the areas mounting, wiring,
commissioning etc.

Exclusion of liability

All the components are supplied in particular hardware and software configurations appropriate for the
application. Modifications to hardware or software configurations other than those described in the
documentation are not permitted, and nullify the liability of Beckhoff Automation GmbH & Co. KG.

Personnel qualification

This description is only intended for trained specialists in control, automation and drive engineering who are
familiar with the applicable national standards.

Description of symbols

In this documentation the following symbols are used with an accompanying safety instruction or note. The
safety instructions must be read carefully and followed without fail!

Serious risk of injury!

Failure to follow the safety instructions associated with this symbol directly endangers the
life and health of persons.
DANGER

Risk of injury!
Failure to follow the safety instructions associated with this symbol endangers the life and
health of persons.
WARNING

Personal injuries!
Failure to follow the safety instructions associated with this symbol can lead to injuries to
persons.
CAUTION

Damage to the environment or devices

Failure to follow the instructions associated with this symbol can lead to damage to the en-
vironment or equipment.
Attention

Tip or pointer
This symbol indicates information that contributes to better understanding.

Note

6 Version: 1.2 TC3 PLC HMI Web

 PLC HMI Web

2 PLC HMI Web

PLC HMI Web enables the visualization to be displayed in any web browser. It is realized as a Java script,
which queries the display information from the web server. Only changes in the display are transferred
cyclically. When a visualization project is downloaded, all files required for the PLC HMI Web are transferred
to directory C:\TwinCAT\3.1\Boot\Plc\Port_851\Visu. This includes the Java script, the basic HTML page
(HTM file) for the visualization, and all images required in the visualization.

PLC HMI Web can currently only be configured for PLC projects that can be reached via
port 851.

Note

The following topics are described below:

• Requirements [} 7]
• Commissioning of the PLC HMI Web [} 7]
• Editor of the WebVisualization object [} 8]

Requirements
• On the server side the web server must be configured accordingly.
• On the client side, as a minimum Microsoft Internet Explorer 10 or the latest version of Mozilla Firefox,
Google Chrome or Safari must be available.

Data security violations

In order to minimize the risk of data security violations, the following organizational and
technical measures are recommended for the system, on which your applications run:
Note
• Exposure of the PLC and the control network to open networks and the Internet should
be avoided, as far as possible.
• Use additional data link layers such as a VPN for remote access and install firewall
mechanisms for protection.
• Restrict access to authorized persons, change any default passwords during first com-
missioning and then at regular intervals.

Commissioning the PLC HMI Web

Step 1: Configure Internet Information Services (IIS)

The PLC HMI Web uses the Microsoft IIS as web server. The IIS has to be configured accordingly. The
configuration is handled by theTF1810 | TC3 PLC HMI Web installation, which is available for download from
the Beckhoff website.

Step 2: Enable PLC HMI Web

The "WebVisualization" object ( ) enables the PLC HMI Web. You add it to the "Visualization Manager"
object in the PLC project tree via the context menu command Add > WebVisualization (see also PLC
documentation: Creating a visualization > Visualization object).

With the WebVisualization object a visualization task "VISU_TASK" is created in the Solution and a
reference to this task in the project. The reference is used to call the visualization code. Therefore, you have
to reactivate the configuration after adding the object.

Deleting a WebVisualization object

If you delete a WebVisualization object and have not added an additional TargetVisualiza-
tion object, you have to delete the task "VISU_TASK" under System > Tasks in the Twin-
Note CAT project tree. This task is not required in the integrated visualization. (See also Editor of
the TargetVisualization object and Integrated visualization)

Step 3: Call PLC HMI Web

TC3 PLC HMI Web Version: 1.2 7

PLC HMI Web

In order to call the start page of the visualization, enter the following address in the web browser: http://
device_name/Tc3PlcHmiWeb/Port_851/Visu/webvisu.htm

Example: http://localhost/Tc3PlcHmiWeb/Port_851/Visu/webvisu.htm

"webvisu" is the HTML start page of the visualization defined in the PLC HMI Web settings. After the call this
is used to display the start visualization, which is also defined in the manager, in the browser. The
visualization can then be operated in the browser.

Optionally you can give the PLC HMI Web a name on calling it in order to be able to address it specifically in
the application later on. To do this, enter the parameter ClientName=<Name> after the URL.

Example: http://localhost/Tc3PlcHmiWeb/Port_851/Visu/webvisu.htm?Clientname=V_ClientXY

Editor of the WebVisualization object

The "WebVisualization" object ( ), which you can add in the PLC project tree below the
"Visualization Manager" object, enables the PLC HMI Web and contains the settings for the web
visualization. Double-click on the object in order to edit the settings in an editor window.

Start Visualization Name of the visualization to be displayed automatically when the PLC HMI Web is
started. "Visualization" is to be entered here as standard. The input assistant can be
used to select a different visualization.
Name of .htm file Name of the basic HMTL page of the visualization, which must also be entered as
the address in the web browser.
Example:
http://localhost/Tc3PlcHmiWeb/Port_851/Visu/webvisu.htm
Updaterate (ms) Update rate in milliseconds, with which the data in the web browser are updated.
Default Size of the communication buffer in bytes. Specifies the maximum available memory
Communication Buffer for the data transfer between web client and web browser.
Show used Button for opening the standard dialog of the Visualization Manager: Here you can
Visualizations select the visualizations that are to be used for the PLC HMI Web. (See also
PLC documentation: Creating a
visualization > Visualization Manager > Visualizations)

Scaling options

8 Version: 1.2 TC3 PLC HMI Web

 PLC HMI Web

Fixed The size of the visualization is retained, irrespective of the size of the browser
window.
Isotropic The size of the visualization depends on the size of the browser window. The
visualization retains its proportions, however.
Anisotropic The size of the visualization depends on the size of the browser window. The
visualization does not retain its proportions.
Client size The display size of PLC HMI Web is defined through the following settings:
• Client height: height in pixels
• Client width: width in pixels

Presentation options

Antialiased Drawing Activate this option, if antialiasing is to be used when the visualizations are drawn in
the visualization editor window of the programming system. (Offline or online)

Default text input

This setting is only then active if the input type “Standard” is selected in the input configuration of the
visualization element. In this case, the default text entries defined in the Visualization Manager are used.

Touchscreen Select this option if the web clients are operated with a touchscreen by default.
Keyboard Select this option if the web clients are operated with a keyboard by default.

TC3 PLC HMI Web Version: 1.2 9