1. Developing OPC HMI for a Web Browser
Hello everyone, thank you for joining us on this webinar. My name is slim-shady and I am excited to show you how you can rapidly build scalable SCADA/HMI systems without writing any lines of code. I would agree that this sounds like an impossible task, but today we’re going to see just how this is indeed possible.
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 Q&A with Presenters Panels by clicking on the icons as shown.
Private Chat with Host
Q&A with Panelists

4. Developing OPC HMI for a Web Browser
Agenda – 60 Minutes
Overview of Web based HMI’s
Overview of the OPC DataHub
Live Demonstration
Overview of OPCSystems.NET
Additional Information
Questions & Answers

5. OPC to Browsers Why? Availability Portable Access Network Access
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!
The topic of displaying OPC data in a web browser has been a popular one for many years, and there are a number of technical approaches available in the market for how you accomplish it.
We’ve found it’s popular for many reasons. Everyone has a browser and knows how to use it, so your client side training and installation costs are very low. Today, even cell phones have a sophisticated browser and many newer cellphones are even wi-fi enabled so they double as a hand-held computer and phone.
The reality of today’s world is that you’ll never know where you’ll be when you’ll need access to data on your operations. At the same time, you can be sure that where ever you are when you need it the most, it probably won’t be at your desk, at your comfortable PC that is inside the company firewall on the company network. And if you are dependent on special software that has to be installed from a CD, you can be sure it won’t be on the PC where you are when you need the data – that’s the way life works, isn’t it?

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 Solution OPC Systems Tag Repository OPC Server? Web Server Web Application
GREEN ZONE
Browsers inside the network
Firewall First-line of defense from outside world.
So there’s a number of ways you could create your web-based HMI. Here’s the simplest scenario… you have a single Server (which could be a regular desktop computer, it doesn’t have to be a server-class computer) which contains everything… your OPC Server, the OPC Systems.NET repository, and your Web Server, such as IIS or Apache etc.
Secure access?
Browsers outside the network

8. Example Configurations
OPC Cluster high availability for your OPC Server(s) and/or OPC Systems .NET Tag Repository
Web Server Cluster high availability for your Web HMI application(s)
GREEN ZONE
Tolerance Achieved:
OPC Layer
Web Servers

9. Web Challenges Security/Networking Speed – data update rates
Controlling the number of connections to the server
Controlling access
Firewall
Password
Encryption of data (SSL)
Speed – data update rates
Aren’t the fastest at executing client side code
Aren’t good at remembering “state” or “where I’ve been”
Cookies, query strings attempt to work around this!
Wide variety of versions and service pack levels
OK – so we’re not here to bash on clients, but we know you’re smart and experienced and know that for all the positives, browsers have their challenges.
If you do a lot of client side scripting and code, they aren’t always the fastest but that’s the tradeoff for what you are doing when you use a browser instead of a thick client compiled, optimized application.
You may not realize this but browsers aren’t good at remembering what software developers call “State”. State is remembering variables, where you were in a processing algorithm – the stuff that helps a program move from one part to another. Sure a browser can remember where you’ve been via your Favorites list, and yes the famous “cookies” are a long running way that web developers attempt to help web applications remember where they were as you go from page to page. They also sometimes pass a lot of what appears to be garbage on the URL which is really encoded data as a means of maintaining state. Reality is though it’s nothing like a compile program – so people building web pages work through that.
Of course there’s always the service pack joy, and an ill-crafted web application can become very inefficient if you let it.
But is that a reason to just toss out the idea of using a web browser? No – we’ve found that users believe there are plenty of good reasons to use a web browser, and where properly applied, they are a fantastic tool for delivering data. So lets move on to how it’s done and some application scenarios

10. OPC DataHub Functionality Overview
OPC to Web
System Monitoring

11. What can you do? System Data Multiple & Varied PC uptime Data Sources
Running processes
Memory usage
Multiple & Varied
Data Sources
OPC
DataHub
Web
Server
Normally, SMS text messages are sent from one cell phone to another, which is all handled within the cell network itself. Using the SMS text message address, you can send a regular and it will be converted by the SMS gateway (txt.bellmobility.ca in the example) into a text message and be delivered to your phone. There may be a short delay while the conversion from to text message occurs, but the message usually arrives in less than a minute.
HMI
Client

12. OPC to Web Methods ASP – 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
OPC DataHub
OPC Servers (1 to N) Local or Remote/Tunneled
Standard Web Browsers on Desktop or Mobile Devices
Processing of data in DataHub on Server Side and value inserted into HTML web page
I will address how the challenges addressed in slides 6-8

13. OPC to Web Methods AJAX 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
Ajax really stands for Asynchronous Javascript And XML. Although some have attributed the term to Microsoft, it's not a Microsoft term at all. It is actually ascribed to a techie who used it at an O'Reilly conference!
Ajax is faster than ASP pages, because the page does not need to redraw and the overall data transfer is lower, but it has it’s challenges. Ajax needs to poll the webserver to get new updates, and there is a lot of overhead associated with that on both the client and server sides, and there is a lot of waiting on the network to boot.
OPC DataHub
Processing of data happens on client and client polls the WebServer for data

14. OPC to Web Methods AJAX 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
Ajax really stands for Asynchronous Javascript And XML. Although some have attributed the term to Microsoft, it's not a Microsoft term at all. It is actually ascribed to a techie who used it at an O'Reilly conference!
Ajax is faster than ASP pages, because the page does not need to redraw and the overall data transfer is lower, but it has it’s challenges. Ajax needs to poll the webserver to get new updates, and there is a lot of overhead associated with that on both the client and server sides, and there is a lot of waiting on the network to boot.
OPC DataHub
Processing of data happens on client and client polls the WebServer for data

15. OPC to Web Methods Java 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
OPC DataHub
OPC Servers (1 to N) Local or Remote/Tunneled
Standard Web Browsers w/ Java on Desktop PCs only
IIS or Apache WebServer serves up web pages
Method #2
OPC DataHub
OPC Servers (1 to N) Local or Remote/Tunneled
Standard Web Browsers w/ Java on Desktop PCs only
DataHub WebServer serves up web pages
Method #1
Java is enormously faster than Ajax. It is by far the fastest of all of the web connection methods we work with. A Java applet can attain 10x the speed of Ajax with a tiny fraction of the CPU usage. It can achieve nearly the same data rates as the OPC DataHub's built-in tunneling. It is also the easiest for a web developer to work with.
Java has three big disadvantages:
- it doesn't connect on port 80 so it is not as firewall friendly (we're looking at that)
- it is not encrypted
- it requires a Java plug-in for the web browser
After this page we go into the live demos…. Today we have a special guest to do our Live demo, Andrew Thomas the lead developer for Cogent.

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 Only
Plug-in/ActiveX required No
Yes, Java plug-in
Update Speeds
Slow-manual page refreshes required
Fast updates
Very Fast updates
System Resources
Very low on client and server
Relatively high
Moderate to low
Security Password/SSL
Yes
Firewall Friendly
Yes – simply open port 80
Dedicated Port # must be opened
Licensing
Web Server and Node License
Web Server and Node License + TCP License for each Concurrent connection
Programming Language
VB Script
Uses JavaScript
Requires Java to build custom applets
I am envisioning that we don’t rehash all the differences, but rather we summarize what they just saw to reinforce how you choose whats best for you.
From our point of view, we have a tool that lets you pick what works best for you!

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
Alright, so we now know what the point of this system is, so lets quickly gain an understanding of some of the benefits in the system, the very things that you can’t see, hear, smell or touch…
Scalability: you know you need it! The system you implement today is likely going to grow tomorrow, and when those needs arise, you’ll need a system/platform that will give you that flexibility. Well, it’s in there and we’ll see what this means in just a moment.
Multi-threaded: concurrent processing enables the software to be more responsive and utilize your computing power more efficiently. Likewise, put this system on a multi-processor PC and watch the performance increase.
Buffers data: Zero data-loss is possible even with temporary network outages. Obviously this is a big deal, but you’ll see what this means in just a moment.
Modular: Means you can buy just what you need, to keep costs down, or maximize on your investment and savings and go with the entire suite.
Affordable: You’re about to see that there’s a lot to this system, but you’ll be surprised at how affordable and cost-effective this solution is.
OPC Self-Certified: This is a big-deal. If you use OPC software, it should be Self-Tested by a minimum, if not, don’t use it. This is a seal of quality, meaning that the software has been to OPC Interoperability Workshops where it has been tested against other vendors software, but also tested by the OPC Foundation’s error injection server that passes bad and invalid information to the client to ensure that it gracefully handles and recovers from problematic situations.
Oh, what’s that bottom bullet? Oh yeah, no more DCOM headaches… why? Because OPCSystems.NET is based on .NET technology and consequently uses .NET Remoting instead – which is the platform that Microsoft wanted us to migrate towards so that DCOM could die a peaceful death.
* While OPC UA is not yet released, OPC Systems .NET was one of the first to implement OPC UA back in 2006 and will support OPC UA once the OPC Foundation releases the necessary Tools.

21. OPC Systems .NET Service (Tag Repository)
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!
AJAX Polling
OPC Systems .NET Service (Tag Repository)
Data Source
OPC Server
So here’s a picture of how all the pieces fit together…
In the middle of the picture is the heart of the system, the OPC Systems .NET Service. This is your Tag Repository. This is the center of the universe. All of your tags are defined here, as well as where the values of those tags come from – which could by an OPC Server, a database or your own application.
All of the OPC Systems.NET applications and components communicate directly to the OPC Systems .NET Service. Notice how they don’t communicate to the OPC Server? That’s by design. If they went directly to the OPC Server then you would be using DCOM and we don’t want to use that now do we? So we go to the Service instead using .NET Remoting.
Well, let’s talk about these Client application connections…
PLC
DCS
Other

22. OPC Systems .NET Service (Tag Repository)
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
AJAX Polling
OPC Systems .NET Service (Tag Repository)
Data Source
OPC Server
So here’s a picture of how all the pieces fit together…
In the middle of the picture is the heart of the system, the OPC Systems .NET Service. This is your Tag Repository. This is the center of the universe. All of your tags are defined here, as well as where the values of those tags come from – which could by an OPC Server, a database or your own application.
All of the OPC Systems.NET applications and components communicate directly to the OPC Systems .NET Service. Notice how they don’t communicate to the OPC Server? That’s by design. If they went directly to the OPC Server then you would be using DCOM and we don’t want to use that now do we? So we go to the Service instead using .NET Remoting.
Well, let’s talk about these Client application connections…
PLC
DCS
Other

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
Ok, here we are, live demo time… so we have quite a lot of things to demo here. This will be a good test of all those things I’ve been talking about are true, can I show all of this in the remaining time?
We’ll setup our Tag repository to acquire tags from an OPC Server.
We’ll data-log those tags to a Text File.
We’ll then create a simple Windows HMI application with some data, charting and alarming capabilities. Then we’ll see how to deploy it.
We’ll quickly create a web-based HMI screen.
So let’s switch over to our Virtual PC and demo all of this stuff.

24. OPC Systems .NET Service (Tag Repository)
Tolerance
OPC Systems .NET Service (Tag Repository)
Client Application
Queue
Local
Network
Internet
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.
So to wrap-up:
We’ve seen what convenience means in terms of rapid development and easy deployment means
We understand some of the ways in which you can scale-up your system
We can trust the software because of its OPC Self Certified status, and also trust in the communications infrastructure which can eliminate data-loss for short network outages.
You’ve got the alerting capabilities for alarms and reports.
You’ve got an open API for those developers out there that want and/or need to build custom software to further enhance/extend their overall systems.
And it’s affordable folks. Go out there and add-up the cost of equivalent tools giving this functionality – that’s assuming that you don’t have to re-invent parts of the system yourself.

27. More Information … get through to an expert! Questions:
Visit for future events
Questions:
Nathan Pocock:
Tel: +1 (704)
Colin Winchester
Tel: x1327
Technical Support:
Tel: +1 (704)
Web:
So at this point, we have finished the Presentation and now I’d like to open-up the phones for Questions and Answers.

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
So what do you think? Not bad eh? There’s a lot in there huh?
I’ll bet you’re wondering “yeah, but what’s the damage?” – well, you can get the whole thing for just $
Now, we don’t care or count things like OPC Server connections, tag points, how many files or databases you’re going to log to. Likewise, the development tools are Runtime-free. All the documentation and tutorials are part of the package. And the SmartClient technology is a benefit of the .NET Framework and Visual Studio .NET, so guess what? That’s FREE.

29. What Tools are Needed? ASP or AJAX Polling Scenario
$995
$3750
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
My thoughts are that I’ll price out some ranges for these
Since every application is special, its impossible to do hard specials, but we know these are nice $$ applications, so my thought is offering 10% off a “OPC to Web” data hub solution isn’t a bad thing!
This will likely become multiple slides as I need to do a drawing for the scenarios using the graphics from the website – no problem getting that done.

30. What Tools are Needed? AJAX Streaming and Java Applets w/DataHub WebServer
$995
$3750
$595/ea
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!
My thoughts are that I’ll price out some ranges for these
Since every application is special, its impossible to do hard specials, but we know these are nice $$ applications, so my thought is offering 10% off a “OPC to Web” data hub solution isn’t a bad thing!
This will likely become multiple slides as I need to do a drawing for the scenarios using the graphics from the website – no problem getting that done.

31. What Tools are Needed? Java Applets w/IIS or Apache WebServer
$995
$3750
$595/ea
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!
My thoughts are that I’ll price out some ranges for these
Since every application is special, its impossible to do hard specials, but we know these are nice $$ applications, so my thought is offering 10% off a “OPC to Web” data hub solution isn’t a bad thing!
This will likely become multiple slides as I need to do a drawing for the scenarios using the graphics from the website – no problem getting that done.