Developing OPC HMI for a Web Browser

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

You may private chat with the host here Ask questions to panelists here

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

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

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?

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

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

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

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

OPC DataHub Functionality Overview
OPC to Web System Monitoring

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

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

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

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

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.

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

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!

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!

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

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.

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

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

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.

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.)

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

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.

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.

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.

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.

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.

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.

Developing OPC HMI for a Web Browser

Similar presentations

Presentation on theme: "Developing OPC HMI for a Web Browser"— Presentation transcript:

Similar presentations

About project

Feedback

Log in

Auth with social network:

Developing OPC HMI for a Web Browser

Similar presentations

Presentation on theme: "Developing OPC HMI for a Web Browser"— Presentation transcript:

Similar presentations

About project

Feedback