Developing OPC HMI for a Web Browser

1
Developing OPC HMI for a Web Browser
Colin Winchester VP Operations Nathan Pocock
Chief Architect Developer
2
Developing OPC HMI for a Web Browser
You may private chat with the host here
Ask questions to panelists here
3
Developing OPC HMI for a Web Browser
While we are sharing applications, the toolbar
shown below appears in the bottom right corner of
your screen. You can access Chat with Host and
the QA with Presenters Panels by clicking on the
icons as shown.
Private Chat with Host
QA with Panelists
4
Developing OPC HMI for a Web Browser

• Agenda 60 Minutes
• Overview of Web based HMIs
• Overview of the OPC DataHub
• Live Demonstration
• Overview of OPCSystems.NET
• Live Demonstration
• Additional Information
• Questions Answers

5
OPC to BrowsersWhy?

• Availability
• Everyone has a browser
• Everyone knows how to use one
• Avoid special software installs, sometimes
• Portable Access
• Cell-phone based web browsers
• Handheld devices
• Network Access
• Standard transport protocols firewall friendly
• Usually can handle slower connections better than
  a thick client application
• Administration Development
• Single application updates all clients
• Development is easier than ever!

6
Web-App Capabilities

• Display data from OPC Servers
• Get user-input for writing to OPC Items
• Trending/Charting live OPC Data
• Alarm displays and acknowledgements

7
Example Configurations
Single Server SolutionOPC Systems Tag
RepositoryOPC Server?Web ServerWeb Application
GREEN ZONE
Browsersinside the network
FirewallFirst-line of defense from outside world.
Browsersoutside the network
8
Example Configurations
OPC Clusterhigh availability for your OPC
Server(s) and/or OPC Systems .NET Tag Repository
Web Server Clusterhigh availability for your Web
HMI application(s)
GREEN ZONE

• Tolerance Achieved
• OPC Layer
• Web Servers

9
Web Challenges

• Security/Networking
• Controlling the number of connections to the
  server
• Controlling access
• Firewall
• Password
• Encryption of data (SSL)
• Speed data update rates
• Arent the fastest at executing client side code
• Arent good at remembering state or where Ive
  been
• Cookies, query strings attempt to work around
  this!
• Wide variety of versions and service pack levels

10
OPC DataHubFunctionality Overview
OPC to Web
System Monitoring
http//www.softwaretoolbox.com/opcdatahub
11
What can you do?

• System Data
• PC uptime
• Running processes
• Memory usage

Multiple Varied Data Sources
Web Server
12
OPC to Web MethodsASP Active Server Pages

• Webserver reads some live or active data one
  time, and puts it into the web page
• No client side plug-ins or ActiveX required
• Easy to implement
• Easy on system resources client and server
• Requires page reload to refresh data
• Good for reports or one-shot, one-off data needs

13
OPC to Web MethodsAJAX Polling

• Asynchronous Javascript And XML
• Provides live updates in the browser without a
  page reload
• No plug-ins or ActiveX required
• Polling -Mediocre Update Speeds faster than ASP
• Can consume a lot of client server side
  resources
• Used in web monitoring and troubleshooting
  applications

OPC Servers (1 to N)Local or Remote/Tunneled
Standard Web Browsers on Desktop or Mobile Devices
OPC DataHub
Processing of data happens on client and client
polls the WebServer for data
14
OPC to Web MethodsAJAX Streaming

• Asynchronous Javascript And XML
• Provides live updates in the browser without a
  page reload
• No plug-ins or ActiveX required
• Streaming Very fast updates similar to Java
  applets
• Can consumes less resources then polling
• Used in remote monitoring and diagnostic systems

OPC Servers (1 to N)Local or Remote/Tunneled
Standard Web Browsers on Desktop or Mobile Devices
OPC DataHub
Processing of data happens on client and client
polls the WebServer for data
15
OPC to Web MethodsJava Applets

• Java Applets are another alternative
• Very, very fast update rates
• Very thrifty on server and client side compared
  to AJAX
• Speed of AJAX with thriftiness of ASP
• But you will have to allow the Java Applets to
  install
• Used in process control systems for monitoring
  and HMI displays

16
Developing OPC HMI for a Web Browser

• Live Demo
• OPC DataHub with ASP
• OPC DataHub with AJAX
• Polling
• Streaming
• OPC DataHub with Java Applets

17
Summary of Web Methods
ASP AJAX Polling AJAX - Streaming Java applets
Browsers Desktop and Mobile Desktop and Mobile Desktop and Mobile Desktop Only
Plug-in/ActiveX required No No No Yes, Java plug-in
Update Speeds Slow-manual page refreshes required Fast updates Very Fast updates Very Fast updates
System Resources Very low on client and server Relatively high Moderate to low Moderate to low
Security Password/SSL Yes Yes Yes Yes
Firewall Friendly Yes simply open port 80 Yes simply open port 80 Yes simply open port 80 Dedicated Port must be opened
Licensing Web Server and Node License Web Server and Node License Web Server and Node License TCP License for each Concurrent connection Web Server and Node License TCP License for each Concurrent connection
Programming Language VB Script Uses JavaScript Uses JavaScript Requires Java to build custom applets
18
Web Development Changed

• Code-less, no more learning languages
• AJAX delivers dynamic pages, no reload
• Winform/Webform development same!
• Easy debugging with Visual Studio.NET
• Live OPC data in the Browser is now Easy!

19
Web-HMI, does it make sense?
When it makes sense
Not a good fit!

• Simple screens with few graphics
• Data response can be slow
• Restrict access to users/groups
• Must be accessible
• Inside/outside LAN
• Desktop, Laptop, Phone etc.

• High-speed data (sub 1-second)
• Large quantities of data on-screen.
• High concurrent user with above.
• Continuous process control / monitoring

20
OPC Systems .NET Benefits

• OPC Systems .NET provides these benefits
• Central always-on tag repository faster
  performance
• Tag data can come from OPC DA, UA and/or
  Databases
• Multi-Threaded for faster, and more Reliable
  operations
• Buffers data, eliminating data-loss for short
  outages as well as maximizing the performance of
  your web-link
• Modular, components available separately or as a
  suite
• Affordable, not as expensive as you might think
• OPC Self-Certified, for assurance in quality

21
How it works

• Tag repository stores Data, and some history
• Data can come from OPC Servers (DA, UA etc.)
• OPC Connection is always ON eliminating
  connectivity overhead
• Browsers see OPC Data when page opens
• Async polling retrieves data to be shown in page,
  no refresh!

OPC Systems .NETService(Tag Repository)
22
How it works

• Browser requests an update of the items/tags it
  needs.
• OPC Systems .NET Server responds with values that
  have changed
• If value remains same, empty data-set returned
• If 1-value changed, that value is returned
• If the value changed multiple times, all updates
  sent

OPC Systems .NETService(Tag Repository)
23
Live Demo

• Create a multi-page Web Site
• Use Visual Studio .NET 2005 Master Pages
• Display some (almost) real-time data
• Simple Form Controls
• Charting page
• Alarm display and acknowledgement page

24
Tolerance

• Tag Repository individually caches data to each
  client
• If a client goes temporarily offline, it will
  catch-up on the next update.
• Applies to ALL OPC Systems .NET Clients(data
  logging, alarms, WinForms, WebForms etc.)

25
Other Features Available

• Data Logging (text files and databases)
• Report generation
• Alarm logging and notification
• Windows Forms development tools
• Recipe management
• Lightweight HMI developer studio

26
Summary

• Convenience Quickly and easily build deploy
  HMIs
• Scalable Framework allowing your system to grow
• Reliable OPC Self-Certified, plus Buffering
• Alerting Data Logging, Reporting, Alarming
  Notifications
• Open API provides interface for your apps to
  control
• Affordable modular, buy what you need.

27
More Information
get through to an expert! Visit
www.softwaretoolbox.com/webinars for future events
Questions
Nathan Pocock Email npocock_at_softwaretoolbox.com
Tel [phone] www.softwaretoolbox.com/op
csystems Colin Winchester Email
cwinchester_at_softwaretoolbox.com Tel [phone]
x1327 www.softwaretoolbox.com/opcdatahub Technical
Support Tel [phone] Web
http//support.softwaretoolbox.com
28
Affordable

• License the entire system for just 1,995.00
• No OPC Server Connection or Tag Counts
• No Client counts at the OPCSystems Service
• No Text File or Database Connection Counts
• Code-less development tools are Runtime-free
• Fully documented, lots of examples
• SmartClient Technology ready

29
What Tools are Needed?ASP or AJAX Polling
Scenario

• Unlimited of client connections
• OPC bridging, scripting, aggregation Excel
  connections are included!
• No license limits on of OPC items you access!
• No Server Operating system required

30
What Tools are Needed?AJAX Streaming and Java
Applets w/DataHub WebServer

• No Server class Operating System Needed! i.e. Run
  on Windows XP
• TCP/Link Licenses are concurrent connection
  licenses
• DataHub other features included!
• No license limits on of OPC items you access!

31
What Tools are Needed?Java Applets w/IIS or
Apache WebServer
IIS or Apache WebServer serves up web pages

• IIS or Webserver may be free, but will require IT
  involvement
• IIS is not really free requires a Server
  Grade Operating System
• And, IIS Apache present much bigger attack
  surface
• TCP/Link Licenses are concurrent connection
  licenses
• OPC bridging, scripting, aggregation Excel
  connections included!
• No license limits on of OPC items you access!