Setup Menus in Admin Panel

WEB Page Design


  1. Introduction

1.1 What is WEB?

1.2 What is WEB Server?

1.3 What is Application Server

1.4 What is WEB Client?

1.5 What is WEB HMI?


  1. Introduction

This unit will provide a view into the latest developments in industrial automation. It will show you how access any intelligent devices on production floor, (such as PLC, DCS, HMI, VFD, sensors, transducers, and actuators), and see their conditions, parameters, status by using any smart phone or tablet with the Internet browser.

In order to understand this emerging technology we need to get familiar with many different parts of this solution. Below is a short explanation to all of the WEB components that will be used in plant automation.

1.1 What is WEB?

The World Wide Web (abbreviated WWW or the Web) is an information space where documents and other web resources are identified by Uniform Resource Locators (URLs), interlinked by hypertext links, and accessible via the Internet.

  • Web pages are primarily text documents formatted and annotated with Hypertext Markup Language (HTML).
  • In addition to formatted text, web pages may contain images, video, audio, and software components that are rendered in the user’s web browser as coherent pages of multimedia content.

Embedded hyperlinks permit users to navigate between web pages. Multiple web pages with a common theme, a common domain name, or both, make up a website.

1.2 What is WEB Server?

Web server refers to server software, or hardware dedicated to running WEB software, that can serve contents to the World Wide Web. A web server processes incoming network requests over the HTTP protocol (and several other related protocols).

  • The primary function of web server is to store, process and deliver web pages to clients.
  • The communication between client and server takes place using the Hypertext Transfer Protocol (HTTP).
  • Pages delivered are most frequently HTML documents, which may include images, style sheets and scripts in addition to the text content.
This video explains the differences between a Web and an Application Server
A user agent, commonly a web browser or web crawler, initiates communication by making a request for a specific resource using HTTP and the server responds with the content of that resource or an error message if unable to do so.
  • Web servers are not only used for serving the World Wide Web.
  • They can also be found embedded in devices such as HMI, PLC, printers, routers, webcams and serving only a local network.
  • The web server may then be used as a part of a system for monitoring or administering the device on the network.
  • This usually means that no additional software has to be installed on the client computer, since only a web browser is required.

In addition to our product page at we recommend to use WEB  server produced by Siemens as shown below:

 1.3 What is Application Server

Application servers are system software upon which web applications run. Application servers consist of the following components:

  • web server connectors
  • computer programming languages
  • runtime libraries
  • database connectors
  • administration code needed to deploy, configure, manage, and connect these components on a web host.

An application server runs behind a web Server, such as Apache or Microsoft Internet Information Services (IIS)) and in front of an SQL database (e.g. PostgreSQL, MySQL, or Oracle). Web applications are computer code which run atop application servers and are written in the language(s) the application server supports and call the runtime libraries and components the application server offers.

Overview of web applications, client-server model, and application server security

The following list show the most popular application servers, most of them are standard in the computer industry:

  • Java application servers (Java Platform , Java Enterprise Edition -Java EE)
  • .NET Framework by Microsoft
  • PHP application servers y Zend Technologgies
  • Mobile application servers.

The web server allows PLC data to be presented as HTML (or XML) pages, giving access via standard Internet browser. There is the option for password protection.

Details of  PLC Web Server

Details of our PLC Web Server include:

  • Uses existing Intranet, saves wiring
  • Uses standard browser, saves Scada software
  • Remote control
  • Remote monitoring
  • Remote programming
  • Alarm information via e-mail

Web Configuration Tool

Some of PLC manufacturers have developed configuration software for Windows-based programming that will help you to set up and configure the Web-Server. Below is an example of Panasonic WEB server configuration software:

  • Automatic integration of PLC data into HTML pages
  • Preparation of pre-stored e-mail addresses and texts
  • Internet dial-up and e-mail server settings
  • TCP/IP address and parameter changes
  • Passwords and security setup
  • IEC 60870-5 parameters and modem settings
  • Configuration of different functions

1.4 What is WEB Client?

WEB client is an application software capable of browsing and displaying web pages in the local or remote networks,

InTouch 2017 Update 1 introduces the InTouch Web Client, empowering casual users to access selected HMI graphics from an InTouch HMI Application via an HTML5 web browser in Read Only mode. This expands the choices Wonderware users have for HMI web access adding to the existing InTouch Access Anywhere , another product which is also available for casual users but provides Read Only or Read Write access to a full InTouch application.

The following terminology is used to describe different aspects of a WEB client:

  • WEB browser
  • Thin client A thin client is a lightweight computer
  • Dynamic WEB page of every new web page proceeds
  • Rich WEB client that of native Web applications
  • Client-server model computer applications that use the client–server model are email, network printing, etc.
  • WEB application client–server computer program
  • WEB socket protocol enables interaction between a web client (such as a browser
  • WEB accelerator host-based server to collect, compress and then deliver content to a client computer
  • WEB mail host-based server to collect, compress and then deliver content to a client computer
  • WhatsApp through a web client, under the name WhatsApp Web
  • Google native client system Csound, have been ported to Native Client
  • Bit Torrent clients segmented file transfer among peers connected in a swarm
  • Client-side refers to operations that are performed by the client in a client–server relationship
  • WEB framework running on a server and communicates with the client using HTTP
  • WEB Api limited to a web application’s client-side (including any web frameworks being used)
  • WEB analytics website. Thus arose web log analysis software.

1.5 What is WEB HMI?

Web HMI provides a single high-performance HMI across multiple data sources to improve situational awareness and enable operators for faster response. In addition to improving visualization, Web HMI eases development, deployment, and maintenance. Using HTML5 technology and centralized management, the true native Web clients provide anywhere, anytime access and do not require any client installation.

In present days all PLC and HMI manufacturers have developed their own WEB HMI panels. The have different shape and form. Most of the time  they look like tablets, however, additional application software have been added to communicate directly to WEB servers located internally or externally to PLCs.

Next video shows what is involved in creating WEB HMI:

Below is an image of the latest products in the family of Tablet HMI:

For more information please refer to the following:

Rockwell Automation

FactoryTalk ViewPoint software displays fully scalable, animated Web applications from existing FactoryTalk View applications. FactoryTalk ViewPoint software supports fully scalable and animated Web displays of existing FactoryTalk View Site Edition (SE) visualization software and Allen-Bradley PanelView Plus applications from the office, home or on the road via any Internet browser. While the initial release is Internet Explorer (IE) compatible, additional browser and device support is planned. IE’s active hyperlinks and the navigational functionality deliver an interactive experience in addition to typical browser functionality such as favourites, and forward and back navigation buttons.
See how Siemens  is solving this problem:
Schneider Electric:

Below is Web HMI from GE Digital:

Practically, every PLC manufacturers have their own WEB HMI solution in the shape of the software of hardware.

Later  you will be taken a course on OPC – Open Protocol Communication. As a rule, every OPC products can be used to create a WEB HMI as shown below:

Please spend time by watching this video to understand all parts of the process to create a WEB page and program it communicate to the PLC. Learn how to create a real-time cross-platform web based HMI interface which interacts with real time server data. OAS Web HMI software contains an easy to use jQuery library with support for OPC Servers, OPC Clients, SQL Server, Oracle, mySQL, Microsoft Excel, and .NET applications. Support for HTML5, Windows Surface, Windows Gadgets, Chrome, Firefox, IE, Safari, iPhone, iPad, HTC, Android.

This is the end of  WEB Page Design Unit





SEE ALL Add a note
Add your Comment

Advanced Course Search Widget

Recent Posts


Downtime Reduction Academy© All rights reserved.

error: Content is protected !!