UI - everywhere and anytime

WinCC OA User Days 2016 London Christopher Stgerer

Siemens AG 2016 All rights reserved. siemens.com/answers

Frei verwendbar
UI - everywhere and anytime
Table of content

Introduction
Different types of WinCC OA UIs
Configuration of ULC UX and mobile UI
Engineering
Detailed information
Questions and discussion

Siemens AG 2016 All rights reserved.

Page 2 04-05-2016 DF PL DER HMI ETM
Introduction Why?

Number of different possibilities for

WinCC OA clients is impressive, but
makes it also kind of complex.
Maybe too complex
Somebody, User Days 2015 in Bilbao

Wow! Another UI? Its

already all Greek to me!
Siemens AG 2016 All rights reserved.
Page 3 04-05-2016 DF PL DER HMI ETM
Introduction Who?

Name:
Christopher Stgerer

at ETM since:
2006

Current role:
Software architect & Project manager

Main responsibility:
Technical execution of WinCC OA product
development

.
Siemens AG 2016 All rights reserved.
Page 4 04-05-2016 DF PL DER HMI ETM
Introduction Who?

Name:
Alexandre Daneau

at ETM since:
2014

Current role:
Consulting engineer and trainer

Main responsibility:
Customer support for supervision software WinCC
OA worldwide.

.
Siemens AG 2016 All rights reserved.
Page 5 04-05-2016 DF PL DER HMI ETM
Different types of WinCC OA User Interfaces

User Interface Description Advantage Disadvantage

Standard UI Engineering- / Operator station Full functionality WinCC OA installation required
in local LAN network of SCADA -server option to gain Manual installation of product
system automatic update of project updates required
files on client

Ultralight Client UX Client for desktop applications No installation required User experience is reduced,
(ULC UX) based on HTML5 technology No maintenance if many dynamic elements
are used
Optimized communication
Access via standard browser

Web Client Remote access to the SCADA
system via Internet
No WinCC OA Installation
required (only Plug-in)
Access via standard browser
Automatic update of project
files on client
Installation of Plug-in
necessary
No graphic editor (GEDI)
No engineering
No direct access to Oracle DB

Siemens AG 2016 All rights reserved.

Page 6 04-05-2016 DF PL DER HMI ETM
Different types of WinCC OA User Interfaces

User Interface Description Advantages Disadvantages

WinCC OA OPERATOR Client for iOS mobile devices Native app Pre-defined views and
(iPhone / iPad) with pre-defined Cost-efficient solution functions
views and functions No plant screens
Easy engineering via wizard
Only iOS

Mobile UI for Client for mobile devices
iOS and Android (for iOS and Android) with
full functionality
Native app Some technical restrictions
Safe communication due to regarding customization
use of SSL
Own device management and
administration on the server

Siemens AG 2016 All rights reserved.

Page 7 04-05-2016 DF PL DER HMI ETM
Some examples: Which type of UI to use when

Requirements Type of UI
Full functionality
Working in a closed and high
secure network Standard UI or WebClient
High dynamic in panels

Support of mobile Android

and iOS devices Mobile UI

Zero installation / Zero

maintenance on client
Just HTML5 and JavaScript ULC UX
technology allowed
Just HTTP communication allowed
Low cost
Overview purpose OPERATOR App
Pre-defined views

Siemens AG 2016 All rights reserved.

Page 8 04-05-2016 DF PL DER HMI ETM
Configuration ULC UX

Configuration
How to control your WinCC OA project
from the web browser using ULC UX?

Siemens AG 2016 All rights reserved.

Page 9 04-05-2016 DF PL DER HMI ETM
ULC UX - What happens in the background?

ULC
Client HTML JS

demo.example.at Web server WinCC OA Server

TCP /
Web browser SSL
443 OA Web OA
server Proxy
starts

ULC OA
Plugin UI DA EV

uses

PNL CTRL

Siemens AG 2016 All rights reserved.

Page 10 04-05-2016 DF PL DER HMI ETM
Configuration mobile UIs

Configuration
How to control your WinCC OA project
from your Android or iOS mobile?

Siemens AG 2016 All rights reserved.

Page 11 04-05-2016 DF PL DER HMI ETM
Mobile UIs - What happens in the background?

App Store, PlayStore Web server WinCC OA Server

Mobile UI PNL CTRL

CFG
(App)
443 OA Web
server

HTTPs
Mobile device OA DA EV
5999
demo.example.at Proxy

TCP/IP
(SSL)

Siemens AG 2016 All rights reserved.

Page 13 04-05-2016 DF PL DER HMI ETM
Special configurations

Special configurations:
WinCC OA web server in the cloud
WinCC OA SCADA and web server in the
cloud

Siemens AG 2016 All rights reserved.

Page 15 04-05-2016 DF PL DER HMI ETM
Special configuration
WinCC OA web server in the cloud

Security (no direct access to plant SCADA)

ULC UX Mobile UI ULC UX Connection to the internet
Scalable web server hardware
Use external address of web servers
Cloud
extSrv2.etm.at # config File on Web Server 1 & 2
Web server 2 [general]
extSrv1.etm.at data = OAServer"
PLC Web server 1 event = "OAServer

OAServer OA Proxy
OA Server mxProxy=" OAServer extSrv1.etm.at [:<proxyPort>] cert"
OA ProxyOA Web server
VPN
[proxy]
OA Web server
OA EVENT server=OAServer1:<dataPort>"
server=OAServer1:<eventPort>
OA DATA
[httpServer]
loadBalance= WebSrv1 max=20 ext=extSrv1.etm.at:80
loadBalance = WebSrv2 max=25 exts=extSrv2.etm.at:443
Siemens AG 2016 All rights reserved.
Page 16 04-05-2016 DF PL DER HMI ETM
Special configuration
WinCC OA SCADA and web server in the cloud

Pipeline station right

No local SCADA hardware necessary ULC UX out in the sticks
SCADA hardware scalable

PLC

Cloud
OAServer
Server VPN
OA
OA EVENT

OA Data

OA Driver

OA Web server

Siemens AG 2016 All rights reserved.

Page 17 04-05-2016 DF PL DER HMI ETM
Special architectures
WinCC OA secured by Apache Web server

Apache is open source and one of the most used web servers in the internet
Receive immediate fixes for the latest security threads
WinCC OA can be secured by Apache web server configured as reverse Proxy
Internal OA servers are not visible for the clients from the internet
In-/ and Out- HTTP network traffic runs through Apache server
Request from the internet are forwarded to the internal server
Answer / response from inside is forwarded to the internet client
Apache provides tons of feature modules like for example:
Security
Load Balancing
etc.
OA

Siemens AG 2016 All rights reserved.

Page 18 04-05-2016 DF PL DER HMI ETM
 Special architectures
WinCC OA secured by Apache

Additional Configuration:
# config File for Web Server on Server2 (ULC)
[httpServer]
loadBalance= Server2 ext=ulc.etm.at:80 exts=ulc.etm.at:443
# config File on MxProxy host in DMZ
[proxy]
server="Server1:<dataPort>"
server="Server1:<eventPort>"
server="Server2:<dataPort>"
server="Server2:<eventPort>

# config.webclient File on Server1

https://apache.etm.at
[general]
data = "Server1[:<dataPort>]"
event = "Server1[:<eventPort>]

apache.etm.at:443 mxProxy="Server1describing
ulc.etm.at[:<proxyPort>] cert
Whitepaper configuration
Server2:8443 is# config.webclient
available on File on
ETMServer2
portal in
[general]
download section
data = "Server2[:<dataPort>]"
event = "Server2[:<eventPort>]

mxProxy="Server2 ulc.etm.at[:<proxyPort>] cert"

Siemens AG 2016 All rights reserved.
Page 19 04-05-2016 DF PL DER HMI ETM
 How to design/draw your screens for
different devices and technologies?
browser, mobiles, desktop, etc

Siemens AG 2016 All rights reserved.

Page 20 04-05-2016 DF PL DER HMI ETM
Configuration & Engineering

Same panels can be used for all clients What does this mean for engineering

Layout management
Layout references
Adding references at runtime Coming with 3.15!
Invisible objects

Special treatment defined by CTRL scripting

New CTRL functions: isUltralight() & isMobileDevice()
New CTRL constants: _ANDROID, _IOS
Already existing but useful CTRL functions:
getApplicationProperty("platformName") -> returns: ulc , android , ios , windows
moduleMaximize() & moduleShowFullScreen()

Device classes
Group devices into so called classes
Design panels different depending on device class
Siemens AG 2016 All rights reserved.
Page 21 04-05-2016 DF PL DER HMI ETM
Configuration & Engineering
Device classes

Siemens AG 2016 All rights reserved.

Page 22 04-05-2016 DF PL DER HMI ETM
Detailed information about
How to optimize
Performance parameters / indicators
Restrictions and limitations

Siemens AG 2016 All rights reserved.

Page 23 04-05-2016 DF PL DER HMI ETM
Optimization & customizations

Startup time & network bandwidth (current and total)

messageCompression = "zlib-bzip
60%-70% of network bandwidth saved!

useLocalIdentification = true
DpIdentification is stored local on the device and transmission is avoided at startup!

Memory
distributed = 0 - DPID of distributed systems is received but discarded afterwards
Disadvantage: No access to DPs of distributed systems
distSystemIds = "1-28, 46, 280-290, 320

refuseCNS CNS (Plant model) is received but discarded afterwards

Disadvantage: Only complete CNS or no CNS at all is possible for the UI
BUT. WinCC OA V3.15 will introduce requestedCNSViews to filter CNS

Siemens AG 2016 All rights reserved.

Page 24 04-05-2016 DF PL DER HMI ETM
Optimization & customizations

ULC UX: Configuration

[httpServer]
indexPage = "/data/ulc/start.html
uiArguments = "-p vision/login.pnl iconBar -menuBar
Panel can also be passed by URL parameter panel
http://localhost/data/ulc/start.html?panel=main.pnl

ULC UX: Client side widget

Web pages can be rendered at client side in the browser
Use cases:
High dynamical web pages
Web pages which are not reachable from the internal SCADA network

Siemens AG 2016 All rights reserved.

Page 25 04-05-2016 DF PL DER HMI ETM
Performance parameters

Mobile UIs

Consider: UI runs as APP on mobile device. Hence

value changes of connected DPEs are transmitted
graphics are rendered on the mobile device
Limited bandwidth in case of mobile connection

How much bandwidth is needed for 100 VC/s?

VC consists of value + timestamp + status information
100 kBit/s for 100 VC/s

How much bandwidth is needed for 10 alarms per second shown in alarm
screen?
Alarm screen is connected on ~20 alarm attributes
60-70 kBit/s for 10 alarms/s

Siemens AG 2016 All rights reserved.

Page 26 04-05-2016 DF PL DER HMI ETM
Performance parameters

ULC UX
Attention: Values shown in the following slides are just reference
values measured under laboratory conditions and depend very much
on the used hardware and base load of the productive system
Consider: Server side UI which transfers graphical changes in panels to the
client side browser

How much latency time is acceptable? (personal feeling)

< 100ms
Dynamic: How much bandwidth is needed for a typical panel? (35 objects blinking)
~85 kBit/s
How many UIs can be started on one web server?
Depends on: hardware, network latency and current project, screen dynamic & resolution, etc.
Windows: ~35 UIs or Linux: ~55 UIs running on 1 Web server* until 75% CPU are used
Load Balancing can be used to automatically distribute the UIs on different web servers
Siemens AG 2016 All rights reserved. *CPU: Intel Xenon 2.4GHz - Cores: 8 - RAM: 16 Gb
Page 27 04-05-2016 Network: 1 Gbps - Screen resolution: 1920x1200 DF PL DER HMI ETM
Current restrictions and limitations of ULC UX and mobile UIs

ULC UX Mobile UIs

Animations at panel transitions are deactivated General
Can be activated via allowULCAnimation Branding of the mobile UI APP is not possible
WebView EWO is not supported
Single Sign On (SSO) No window management impact on child panels!
Not available with Chrome browser
Only possible within the same domain iOS
Customer specific extensions (EWOs, CtrlExt) can
Printing is limited to network printers not be used due to iOS restriction
Multi monitor support is limited
Touch & gestures are not supported
mobile devices are also restricted
VIDEO option is not supported

Siemens AG 2016 All rights reserved.

Page 28 04-05-2016 DF PL DER HMI ETM
UI - everywhere and anytime
Contact page

Christopher Stgerer Alexandre Daneau

Software Architect Consulting engineer
DF PL DER HMI ETM R&D- DF PL DER HMI ETM R&D-
SW SW CON
Marktstrasse 3
7000 Eisenstadt, Austria
Tel.: +43 2682 741-62800
Fax: +43 2682 741-52555
E-mail: E-mail:
christopher.stoegerer@etm.at alexandre.daneau@etm.at

siemens.com/wincc-open-architecture

Siemens AG 2016 All rights reserved.

Page 30 04-05-2016 DF PL DER HMI ETM