HTML 5 UIPs for FDI DEVICE PACKAGES Application Guide HTML 5 UIPS FOR FDI DEVICE PACKAGES 1 FieldComm Group Release Date: January 28, 2020 Document Distribution / Maintenance Control / Document Approval To obtain information concerning document distribution control, maintenance control, and document approval please contact FieldComm Group at the address shown below. Copyright © 2020 FieldComm Group This document contains copyrighted material and may not be reproduced in any fashion without the written permission of FieldComm Group. Trademark Information FieldComm Group™, FOUNDATION™ Fieldbus, HART‐IP™, FDI™ are trademarks, and HART®, WirelessHART®, ROM® and SIF® are registered trademarks of FieldComm Group, Austin, Texas, USA. Any use of these terms hereafter in this document, or in any document referenced by this document, implies the trademark/registered trademark. All other trademarks used in this or referenced documents are trademarks of their respective companies. For more information, contact FieldComm Group at the address below. Attention: FieldComm Group President FieldComm Group 9430 Research Boulevard Suite I‐120 Austin, TX 78759, USA Tel: +1 (512) 7792‐2300 http://www.fieldcommgroup.org Intellectual Property Rights The FieldComm Group (the Group) does not knowingly use or incorporate any information or data into the HART, FOUNDATION Fieldbus and FDI protocol standards, which the Group does not own or have lawful rights to use. Should the Group receive any notification regarding the existence of any conflicting private IPR, the Group will review the disclosure and either (A) determine there is no conflict; (B) resolve the conflict with the IPR owner; or (C) modify the standard to remove the conflicting requirement. In no case does the Group encourage implementers to infringe on any individual's or organization's IPR. HTML 5 UIPS FOR FDI DEVICE PACKAGES 2 FieldComm Group Contents Introduction ................................................................................................................................................... 3 User Interface Plugins (UIP) in FDI ............................................................................................................ 4 The Road to HTML5 ....................................................................................................................................... 4 The Technologies Behind HTML5 UIPs .......................................................................................................... 5 What are the HTML5 technologies? .......................................................................................................... 5 Why it is so great? ..................................................................................................................................... 6 How does it work in practice? ................................................................................................................... 6 What HTML5 features do UIPs support? ................................................................................................... 7 And what about cyber security? ............................................................................................................... 7 Writing an HTML5 UIP ................................................................................................................................... 8 First Steps .................................................................................................................................................. 8 Creating the HTML5 content ..................................................................................................................... 9 A note on editing tools .......................................................................................................................... 9 Creating a UIP Package ............................................................................................................................ 15 Create a New UIP Project .................................................................................................................... 15 UIP Packaging Project Settings ............................................................................................................ 16 UIP Variant Settings ............................................................................................................................. 16 UIP Project Package ID ........................................................................................................................ 17 Creating an FDI Package for the HTML5 UIP ....................................................................................... 18 Create an FDI Device Package ............................................................................................................. 19 Adding the HTML5 UIP to a Device Package ....................................................................................... 20 Adding a Plug‐In to your EDDL Source ................................................................................................ 21 Build the FDI Device Package .............................................................................................................. 22 Testing the HTML5 UIP ............................................................................................................................ 23 How can you debug the UIP? .............................................................................................................. 23 Implementing HTML5 UIPs on FDI Hosts .................................................................................................... 24 Support and Resources offered by FieldComm Group ............................................................................... 26 HTML 5 UIPS FOR FDI DEVICE PACKAGES 3 FieldComm Group Introduction Field Device Integration (FDI) is the technology which allows for a seamless and effortless integration of data from smart field devices into your DCS system, maintenance and optimization systems or the cloud. Device vendors provide one FDI Device Package per protocol for one device. These FDI Device Packages can be imported by all FDI hosts, allowing users to operate the device. An FDI host can be a standalone software component on a workstation PC or a mobile device, an integrated software component in a distributed control system or a software component with a client server architecture. FDI host examples include dedicated products such as handheld field communicators, standard software components of a distributed control system like device management software or optional software systems such as plant asset management systems, historians, and analytics packages. An FDI host typically consists of an FDI client, an FDI server and one or more FDI communication servers. Figure 1. FDI Host HTML 5 UIPS FOR FDI DEVICE PACKAGES 4 FieldComm Group User Interface Plugins (UIP) in FDI In addition to the Electronic Device Description (EDD), which is part of any FDI Device Package and allows for a uniform description of the device including user interfaces for device configuration and diagnostics, any FDI Device Package may include one or several User Interface Plugins. Compared to the EDD, UIPs may provide the following extended functionalities: flexible, graphically enhanced user interfaces custom logic, e.g. for diagnostics direct access to the device, e.g. for a firmware update import, export and display of files, e.g. to generate, save and show reports Figure 2. User Interface Plugins (UIP) Since FDI hosts may run in various environments, FDI incorporates a technology mapping and platform concept to ensure UIPs can be executed on the host systems without interoperability issues or compromising the system stability. Based on the FDI Platform concept host vendors can target the User Interface Plugins to specific use cases and environments. With version 1.2 of the FDI Technology Standard, FDI specifies the following two technology mappings to provide the means to cover various host environments: .NET and HTML5. Device vendors can choose the technology that is best suited to their requirements and target platforms. This whitepaper provides the information to make the choice. For both UIP technologies, FDI specifies the interface between the UIP and the FDI Client, which will host and execute the UIP. The services available within this interface are identical for both technologies. Using these services, UIPs may access data of the device and provide the extended UIP functionalities like open or store data on the FDI Client. This whitepaper will give you a first impression of how to implement a UIP with such functionalities. The Road to HTML5 In the beginning, FDI was mainly about bringing existing Technologies like EDDL and FDT together to build a more harmonized approach to the major communication technologies for the process industries (HART, FOUNDATION Fieldbus, Profibus, Profinet, Modbus, etc.). With HTML5, UIPs FDI is opening to a much more user‐centric approach. The HTML5 technology makes it possible to use different end user devices like smartphones, tablets, laptops or big screens without the need of creating individual package variants. HTML 5 UIPS FOR FDI DEVICE PACKAGES 5 FieldComm Group Basically, everything which has been possible with .NET based UIPs can be done with HTML5 UIPs as part of an FDI package. And everything will run on a well proven web engine which is part of every new FDI host. For example, the following picture shows a complex device configuration view running completely in HTML5: Figure 3. Configuration of a device in an HTML5 view The Technologies Behind HTML5 UIPs With FDI Technology Version 1.2, FDI supports User Interface Plugins (UIPs) written in HTML5 technologies via the FDI Integrated Developer Environment (release 1.4.0 or later). What are the HTML5 technologies? HTML5 technology is not a single technology, but rather the name for a set of current state‐of‐the‐art technologies for web applications: HTML5: The latest evolution of the standard that defines HTML. Its main features are Semantics, Connectivity, Offline and storage, Multimedia, 2D/3D Graphics and effects, Performance and Integration, Rendering device access, and Styling. CSS3: This is the latest evolution of the Cascading Style Sheet for styling web pages. Version 3 provides long‐awaited novelties, like rounded corners, shadows, gradients, transitions and animations, as well as new layouts like multi‐columns, flexible box or grid layouts. JavaScript (JS): This is a lightweight, interpreted or JIT (just‐in‐time) compiled programming language supported by browsers for the usage in web pages. JS is a prototype‐based, multi‐paradigm, dynamic scripting language, supporting object‐ oriented, imperative, and declarative programming styles. The standard for JavaScript is ECMAScript. HTML 5 UIPS FOR FDI DEVICE PACKAGES 6 FieldComm Group TypeScript: TypeScript is an open‐source programming language developed and maintained by Microsoft. It is a superset of JavaScript and adds additional static typing to the language. During development typescript code gets compiled (transpiled) into JavaScript. TypeScript makes development of web applications easier and more effective, by offering better structuring of the code and type safety. JSON: JavaScript Object Notation (JSON) is an open‐standard file format that uses human‐readable text to transmit data objects of attribute‐value pairs and array data types. It is a very common format for storing and transporting data. Content Security Policy (CSP) is an added, standardized layer of security used by state‐of‐ the‐art web applications as, for example, home banking applications. Why it is so great? There are two main advantages of web user interfaces when compared to legacy toolkits like .NET, Java or C++‐based user interfaces: Web UIs are not bound to a specific platform or runtime. One UI can run on different platforms (Linux, Windows, Android, IOS) and on any device – only a browser engine that supports HTML5 is required. With the HTML5 layout features, one can design user interfaces that automatically adapt to different screen resolutions and ratios as shown in the following images. Figure 4. HTML5 page with 1‐column layout Figure 5. HTML5 page with 2‐column layout (same code) This makes it possible to run the same UIP on a mobile device, tablet, laptop or workstation, or a big screen in an operations center. How does it work in practice? An HTML5 UIP runs like any other User Interface Plugin from a menu entry that is part of the device EDD and is rendered by the FDI host. HTML 5 UIPS FOR FDI DEVICE PACKAGES 7 FieldComm Group When the menu item is triggered, the FDI host starts a UIP host frame application containing an embedded HTML5 browser engine. In the HTML5 browser engine the HTML5 UIP is loaded: Figure 6. HTML Browser with HTML5 UIP Loaded When some information is needed from the device the HTML5 UIP uses the FDI type library, which is defined in the FDI Standard, to get the information. With FDI version 1.2, the FDI type library is defined in TypeScript and JavaScript making it possible to use the FDI type library with HTML5 pages and JavaScript code. What HTML5 features do UIPs support? Since HTML5 technologies evolve quickly and browser engine suppliers don’t always support the same HTML5 features, it is important to agree on a minimum set of HTML5 features which are guaranteed to work on every FDI Host. This minimum feature set has been defined by the FDI Standardization team and is available in the FDI Specifications. All defined HTML5 UIP features are supported by the major browser engines (Chromium, Firefox, Webkit). This means that an HTML5 UIP written with the minimum feature list is guaranteed to run on every FDI host. On the other hand, it is not prohibited to use an HTML5 feature that is not listed in the minimum feature set. However, in this case the FDI package supplier needs to make sure that additional checks and workarounds are in place if a browser engine or the FDI host does not support the feature (e.g. by using polyfills). For instance, if a UIP offers barcode scans from a camera, the UIP should check first whether the FDI host supports taking pictures since cameras may not be available on every FDI host hardware, such as a PC. If no camera is present, a work around would be entering the barcode number with the keyboard. And what about cyber security? Security in an HTML5 UIP is addressed in various ways: The embedded web browser engine provides a sandbox environment for running the HTML5 UIP. Direct communication with other applications or the operating system is restricted, checked or prohibited – access to external resources (camera, file system, geolocation) is only possible HTML 5 UIPS FOR FDI DEVICE PACKAGES 8 FieldComm Group through special JavaScript APIs such as Geolocation API, Orientation API or Web Audio API. To protect the HTML5 UIP from internet attacks, the HTML5 UIP host supports Content Security Policy (CSP) – a computer security standard introduced to prevent cross‐site scripting (XSS), clickjacking and other code injection attacks resulting from execution of malicious content in the trusted web page context. Note that CSP does not allow inline script or inline CSS stylesheets in an HTML file. This also leads to a clearer architecture of the web application. FDI packages are protected from tampering by digital signatures. An FDI package contains two signatures: o One signature is generated by the FDI package originator and is intended to provide assurance that the package content is authentic and has not been modified by an unauthorized entity. o The other signature is created by the FDI Package Registration Authority (FieldComm Group or Profibus International (PNO)) and is intended to provide assurance that the relevant parts of the package (i.e. the UIP(s) and the EDD) have passed the conformity tests. Since a UIP is part of an FDI package, the protection against tampering is extended to UIPs as well. The JavaScript FDI type library used for the communication between the HTML5 UIP and the UIP host is not changeable since it is part of the assemblies of the UIP host and these assemblies are signed. Writing an HTML5 UIP So how can you do all this? This section provides step by step guidance for creating your first HTML5 UIP integrated into an FDI package. You must have an FDI Package IDE installed on your PC or laptop. It can be purchased at fieldcommgroup.org. First Steps First, you should specify the structure and design of your UIP user interface as you would for creating your new company website. Bear in mind what devices you want your UIPs to be used with and how to implement an attractive responsive design for all of these devices. Next, you should look at the sample HTML5 UIP which is installed with the FDI Package IDE under MyDocuments/FDI/IDE/Examples/UIP (see screenshot below). HTML5 UIP sample not only contains the UIP itself, but also additional files which are helpful in the creation of HTML5 UIPs. Next >