< Previous HTML 5 UIPS FOR FDI DEVICE PACKAGES 9 FieldComm Group Figure 7. Location and structure of the Sample HTML5 UIP The best course of action here is to make a copy of the sample HTML5 UIP and use it for creating your own HTML5 application content. The provided Sample UIP contains HTML5 source files for the UIP, the FDI HTML5 UIP Type Library, a CSS file, and a TypeScript compiler. Open the code folder in Visual Studio Code to begin. Creating the HTML5 content A note on editing tools For editing the content you can use any text editor. Developers can choose generic text editors like Notepad++ or TextPad, or more advanced ones like Brackets or Visual Studio Code. Advanced tools like content management systems can also be used to create the HTML source. In our example we used Visual Studio Code to edit the HTML, CSS and TypeScript files. Using Visual Studio Code has the advantage that follow up steps (e.g. transpilation and packaging) are already integrated in the IDE. As a first step you need to define an entry page HTML file (in our case index.html) for all of your content (HTML code, JavaScript, etc.). HTML 5 UIPS FOR FDI DEVICE PACKAGES 10 FieldComm Group Figure 8. Entry page for the HTML5 UIP (index.html) The style for your HTML5 pages should always be specified in Cascading Style Sheet (CSS) files. These files can be edited with the same tools. Put your CSS files together with all other needed files, such as images, into the respective folders of your project folder. Figure 9. CSS file of the Sample HTML5 UIP Next, you should have a look at the typescript files in the project. They are contained in the src folder of the project. The fdi.ts TypeScript file specifies the FDI type library interface to your FDI host. This and all the other typescript files of the src folder except for index.ts are provided by the FDI host. You should not change these files because any change will be overwritten by the FDI host. For adding your own code, edit the index.ts file. This is the starting point for custom logic in the HTML5 UIP. Within your UIP TypeScript file (index.ts) you can specify all function calls to the FDI host using the FDI type library. In the sample project two simple calls to the FDI host for reading the interface version and the online access availability are defined. HTML 5 UIPS FOR FDI DEVICE PACKAGES 11 FieldComm Group Figure 10. TypeScript src folder Now it is time to generate the JavaScript files from the TypeScript files. This step is called Transpilation or source‐to‐source compiling to translate the TypeScript to JavaScript. But before doing the transpilation you should look at the tsconfig.json file at the project root. The tsconfig.json specifies how all of your TypeScript files are transpiled in JavaScript. For example, target defines the JavaScript version of the code that is to be generated, outDir specifies the output directory for the JavaScript code. For more information consult the TypeScript compile options page (https://www.typescriptlang.org/docs/handbook/compiler‐options.html) Figure 11. Content of tsconfig.json file HTML 5 UIPS FOR FDI DEVICE PACKAGES 12 FieldComm Group We are ready for the build now. Use the tsc:build task to transpile the TypeScript into JavaScript as shown in the next two screenshots. Figure 12. Navigating to the build tasks Figure 13. Run tsc:build to generate the JavaScript code After transpilation of the TypeScript files to JavaScript you will find the generated JavaScript files in the “scripts” folder (or wherever you specified in the tsconfig.json) as shown below: HTML 5 UIPS FOR FDI DEVICE PACKAGES 13 FieldComm Group Figure 14. JavaScript Source Output The next step is to package the HTML, CSS and generated JavaScript code into a zip file. Here, the package.json file specifies how all necessary files are zipped together into a zip archive. Figure 15. Content of package.json file For creating the zip file, just execute the npm:pack task in Visual Studio Code HTML 5 UIPS FOR FDI DEVICE PACKAGES 14 FieldComm Group Figure 16. Navigating to the tsc:pack task Figure 17. Executing npm:pack to create a zip archive The zip archive, samplehtml5uip.zip, is created in the project directory. Figure 18. Generated zip file samplehtml5uip.zip You can verify the contents of your zip archive with any standard zip archiver (Win ZIP, 7Zip, etc.): HTML 5 UIPS FOR FDI DEVICE PACKAGES 15 FieldComm Group Figure 19. UIP zip archive contents Note that the UIP project zip file does not contain the FDI type library or FDI host JavaScript files. These files will be automatically included when the UIP is loaded in the FDI host. Creating a UIP Package Next, you must create your UIP Packaging Project in the FDI IDE. This is the same procedure as for .NET UIPs and described in the User Manual for the FDI IDE. Create a New UIP Project First, open the FDI IDE and create a New UIP Packaging Project as shown: Figure 20. Creation of UIP Packaging Project Next, add the necessary project details. HTML 5 UIPS FOR FDI DEVICE PACKAGES 16 FieldComm Group UIP Packaging Project Settings Note that the Supported FDI version must be 1.2.0 as shown in the following image: Figure 21. UIP project details UIP Variant Settings In the UIP Variant page of the project settings, you select the zip archive containing your UIP files, remember this zip archive contains the “index.html” file. For the target Platform you can select if the UIP should run only on Workstations, only on Mobile devices or on both systems. The example shown on the next page has both types of systems selected. Start element name should contain the entry page of the HTML5 UIP (index.html). HTML 5 UIPS FOR FDI DEVICE PACKAGES 17 FieldComm Group Figure 22. Details for UIP Variant Click “Finish” to save the UIP Packaging Project. UIP Project Package ID After creating the UIP Packaging Project you can see the Package ID of the UIP was automatically generated. This Package ID will be used in the next step. Figure 23. Package ID for the UIP Package HTML 5 UIPS FOR FDI DEVICE PACKAGES 18 FieldComm Group Creating an FDI Package for the HTML5 UIP Next, the HTML5 UIP will be included in a UIP Package. Go to the “Project” menu of the FDI IDE. Use the menu item “Create Package” to create the actual UIP Plug‐in file (e.g. ConcentrationUIP.1.0.0.uip). Figure 24. Creation of an FDI Package for a UIP This UIP Plug‐in file can now be referenced either directly from an FDI Device Package or from an FDI UIP Package (which itself could be referenced by several FDI Device Packages). Next >