MB HMI - Intro

MB HMI is a Human-Machine Interfaced (HMI) based on standard web technologies. This allows both local and remote HMI systems to be created using what has become today's standard for machine interaction - the web browser.

MB HMI is used to provide the web based HMI to the MBLogic automation server, and the primary documentation for it is provided there (see the link to "MBLogic" on the above menu). This page simply provides a overview of the technology.

Standard Web Technologies:

MBHMI 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 MBHMI screens.
• Javascript. Javascript (not to be confused with Java) is the common scripting language for web pages, and is used by MBHMI 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 MBHMI to provide the graphical elements to displays.
• CSS, JPEG, PNG, JSON - Since MBHMI is based on standard web technolgies, it can take advantage of the display elements which people have come to expect in a modern system.
• MB-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.

MBHMI Components:

MBHMI 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, which MBLogic takes advantage of.
• 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 MB-HMI is based on web standards, it is compatible with most modern web browsers. The following screen shots show the same web page when displayed on several different web browsers and operating systems (the MS Windows screen shots represent an older demo version).

HMI Graphical Widgets:

A great many graphical and HTML HMI widgets which continuously update themselves live on the screen are available using standard web technologies. Here are some examples of what is provided with MBHMI. Any graphic may configured to be in any colour. The colours shown are examples only.