Help Topics

Topic Details for HMI Web Pages

Basic Concepts

Help - HMI Basics

Overview:

The HMI subsystem is a Human-Machine Interfaced (HMI) based on standard web technologies. This allows both local and remote HMI systems to be created for machine interaction using standard web browsers.

Standard Web Technologies

The HMI is based on the following web technologies:

HTML (Hyper Text Mark-up Language). HTML is the basis of virtually every web page, and is used as the foundation for the system's HMI screens.
Javascript. Javascript (not to be confused with Java) is the common scripting language for web pages, and is used by the HMI to control the display of data and to exchange data with the server.
SVG (Scalable Vector Graphics) - SVG allows high quality interactive graphics to be embedded directly into web pages, and is supported by almost every modern web browser. SVG is used by the HMI to provide the graphical elements to displays.
CSS, JPEG, PNG, JSON - Since the HMI is based on standard web technolgies, it can take advantage of standard web styling and graphics.
HMI Protocol - A JSON (Javascript Object Notation) based open communications protocol. This protocol was developed to provide a simple and reliable means of communications with low overhead and high level functionality.

HMI Components

The HMI includes the following components:

A standard xHTML web page which can be used as the starting point for new HMI designs.
A standard CSS style sheet which can be modified to customise the look and feel of a new application. CSS (Cascading Style Sheet) is one of the foundations of modern web pages. This allows the definitions of things like colours, fonts, spacing, and other characteristics to be defined separately from the actual page content, making pages more managable and maintainable. It also allows for special effects in menus and graphics.
A Javascript library to provide communications between the browser and the server using the HMI protocol. It also stores the data in a common data table, provides means of accessing this data, and automatically updates the screen display elements when new data arrives.
A Javascript library providing control and animation of display elements, including SVG graphics elements, and standard event and alarm display.
A selection of SVG graphic elements that can be used in new applications, or used as examples for developing custom graphics.

Browser Compatibility:

Since the HMI is based on web standards, it is compatible with most modern web browsers. The following web browsers have been tested:

Firefox on Linux
Epiphany on Linux
Opera on Linux
Midori on Linux
Google Chromium on Linux
Firefox on MS Windows
Opera on MS Windows
Google Chrome on MS Windows
Apple Safari on MS Windows

Testing has not been conducted on the Apple MacIntosh, but there is no reason to believe it will not work equally well there. The MS Internet Explorer web browser does not work, as it is based on outdated technologies and does not support the features needed to provide a useful graphical HMI.

Web Page Basics

Web pages are made from a combination of text, mark-up (HTML) symbols, Javascript (a programming language), and images. What gives them structure and style is the HTML mark-up (formatting).

HTML versus XHTML

SVG graphics can be directly incorporated into web pages. The most commonly used version of ordinary HTML (version 4) does not at present support SVG "in-line", that is, directly in the page. SVG images can be loaded from external files, but this is not convenient for most industrial HMI applications. The upcoming replacement version (version 5) will support SVG "in-line", but it is not yet available in most web browsers yet.

However, there is a standard variation on HTML called "XHTML" which does allow in-line SVG. The differences between HTML and XHTML are relatively minor, the main one being that XHTML tends to be much more strict about formatting. Anyone familiar with creating a standard HTML 4 web page should have no difficulties when dealing with XHTML.

Creating Web Pages

Web pages consist of simple text and formatting codes (called "mark-up"). These mark-up codes are detailed in numerous books and web sites and will not be discussed in detail here.

Unlike word processor documents, web pages are not normally constructed using WYSIWIG editors. They are usually created using text editors. The reason for this is that WYSIWIG editors usually produce very poor quality output which often fails in unexpected ways. Furthermore, most web sites today are "dynamic", which means that each web page is actually created by a program when you request to see it. Creating a web page has become more like writing a program than like typing a document. The combination of these means that there is little demand for WYSIWIG editors for web pages.

However, there are many editors which "understand" HTML syntax and will highlight and even complete the mark-up codes as you enter them. A good HTML editor won't create a web page for you, but it will help you avoid errors. Like most development software today, many of the best HTML editors are free and can be downloaded from many different places. These web pages were created using an editor called "Bluefish".

CSS

"CSS" stands for "Cascading Style Sheets". CSS is used to describe the appearance of a web page separately from the content. This allows web sites to adopt a common look and feel while still being managable. The CSS codes are normally kept is a separate file (with the extenstion ".css") and imported into the web pages.

CSS is also important to HMI applications because it allows special effects to be used which give a better looking and more usable HMI. The details of this will be discussed in the section on constructing a complete HMI application.

Raster Image Formats

A "raster" image formet is sometimes also called a "bit-map" image. Raster images are often used for backgrounds, logos, and "favicons" (small icons often appearing beside the browser address bar and in the bookmarks menu). The two common formats for images are "PNG" and "JPEG". JPEG images are best used for photographs. For drawn graphics, PNG has largely replaced the older GIF image format. For drawn graphics, PNG will usually give a better looking graphic than JPEG.

In industrial HMI applications, JPEG and PNG images can be used to display things like company logos, small drawings or photographs of the equipment, drawings or photographs of the product being manufactured, and other relevant information. These can be used to provide an attractive and informative user interface.

Javascript

Javascript is a programming language which is supported by almost all modern web browsers. Despite the name, Javascript has no relationship to the Java programming language. They are two different languages, which both happen to have a syntax that was largely inspired by 'C'.

Javascript belongs to what are sometimes referred to as "scripting" languages. A scripting language is a language which is intended for writing applications, as opposed to "systems" languages, which are intended for writing things like operating systems or compilers. Like most scripting languages, Javascript has many powerful features based on object oriented programming concepts. The details of Javascript programming are not discussed here. There are many books and web sites devoted to Javascript programming which should be consulted for that information.

SVG

SVG stands for Scalable Vector Graphics. SVG is one of the web standards specified by the W3C, which is the organisation responsible for defining and documenting the standards used by modern web browsers. SVG allows high quality interactive graphics to be embedded directly into a web page.

Unlike simple PNG or JPEG graphics, SVG is an XML based description of a graphic element which can be directly manipulated by client scripting. That is, the SVG graphic or image can be changed dynamically without having to reload the web page or download a new image. This allows graphical web based HMI applications to be created which have the sort of interactive graphics normally associated with conventional HMI programs.