MBLogic for an open world in automation

• Home
• Software
• Examples
• Technology
• Demos
• News
• Manuals
• Download

Help Topics

• HMI
• Building Web Pages
• Widget Examples
• Cascadas Protocol
• Browser Gallery

Topic Details for HMI

• Assembling web pages
• HMI web templates
• Editing SVG with Inkscape
• SVG Library
• Using the SVG Library with Inkscape
• Simple Example
• HMI Javascript Client Libraries
• Basic Concepts
• Manual HMI Web Page Construction

Assembling Web Pages

• Select the Templates
• Create the SVG Component
• Configure the Application User Data
• Customise the Web Page (Optional)
• Create Static Graphics
• Modify the (X)HTML Web Page
• Create the Application Specific Javascript
• Copy the Complete Files to the HMI Server Directory
• Test the Application
• Common Terms

Common Terms

A number of common terms will be used in this document. These are described briefly here. This however is not intended as a detailed general tutorial on web page development. If you wish to find out more information, there is plenty of free documentation and tutorials available on the Internet, as well as numerous books which should be available in any bookstore.

HTML versus XHTML

HTML (Hyper Text Markup Language) is a combination of "mark-up tags" and content text which make up a web page. A "mark-up tag" is a set of defined characters which modify the content text and specify things such as paragraphs, lists, headings, etc.

Traditional HTML comes in several closely related forms. Most simple web page HTML currently follows version 4 of the HTML standard. There is a version of HTML called "XHTML" which exists along side traditional HTML and which provides additional features. XHTML is similar to HTML and is specified by the same standards body. The major difference between HTML and XHTML is that XHTML more closely resembles XML, and it is also much stricter about rejecting mistakes. The main feature that XHTML has that is of interest to us is that SVG is supported in XHTML but not in version 4 of HTML.

CSS

CSS stands for *Cascading Style Sheet*. Modern web pages use CSS to apply "styles" to HTML and SVG. These styles control items of appearance such as fonts, sizes, colours, borders, backgrounds, and other similar features.

CSS can also be used to apply special effects such as changing the width of a border when the mouse cursor passes over something, or changing the colour of a border when a button is clicked.

Javascript

Javascript is the standard programming language that is present in virtually all modern web browsers. The Javascript programming language has no real relationship with the Java programming language. The similarity in names is simply due to marketing and promotion decisions made by the companies which originally developed them (Sun, in the case of Java, and Netscape in the case of Javascript). Javascript is a full featured programming language and runs quite quickly on newer web browsers.

Javascript is used for several purposes in the HMI:

• It runs the communications which allows the HMI client web page to read and write data from the server.
• It is used to implement a set of HMI libraries which control the update and display of data.
• Javascript data structures are used to store data in files for such things as alarm and event messages, and other similar purposes.

SVG

SVG stands for *Scalable Vector Graphics*. SVG is used to displaying dynamically updated graphics in the web browser. Unlike simple raster ("bit map") graphics such as PNG files, SVG deals with actual geometric shapes such as lines, circles, rectangles, etc. It can be altered by simple Javascript commands while in the web browser, rather than simply loading static images with the web page. SVG is used to implement the graphical portion of the HMI, such as push buttons, selector switches, pilot lights, etc.

---

MB-HMI