Build Environments: Getting started with JavaScript/WebGL
Embedded Wizard generated UI application running in a browser.
The following article explains all necessary steps to create an Embedded Wizard UI application that can be executed within a browser as JavaScript application using WebGL. Please follow these instructions carefully and step by step in order to ensure that you will get everything up and running within your browser. Moreover, this article assumes, that you are familiar with the basic concepts of Embedded Wizard.
Prerequisites
Make sure that you have got the following software packages:
★Embedded Wizard Studio Free or Embedded Wizard Studio Pro
TIP
If you want to use the Free edition of Embedded Wizard Studio and the JavaScript/WebGL Platform Package, please register on our website. Then you can download the above software package.
All customers who licensed Embedded Wizard can visit our download center to get the above software package.
Installing Tools and Software
★Step 1: Install the latest version of Embedded Wizard Studio.
★Step 2: Optional: Download and install a local web server, e.g. HFS - HTTP File Server if you are using Chrome browser. This browser does not allow access to local files (for security reasons), so the usage of a local web server can be helpful.
Creating the UI Application
In order to make the first UI application up and running within a browser, we recommend the following steps:
★Open one of the examples that are provided with your Embedded Wizard Studio installation (e.g. CoffeeMachine).
★Add a new profile to the project and rename it to WebGL.
★Set the profile attribute PlatformPackage to the value Tara.WebGL.RGBA8888 and change the attribute ScreenSize to a size which corresponds to the size of the application (e.g. <480,272> for the CoffeeMachine). The attribute ApplicationClass refers to the class of the application (e.g. Application::Application).
★Choose a directory for the generated code by using the profile attribute OutputDirectory (e.g. {UserDocumentFolder}\WebGL).
★Select the new profile WebGL within the profile selection box.
★To start the code generator, select the menu items - or simply press F8. Embedded Wizard Studio generates now the code of the example project into the output directory (e.g. {UserDocumentFolder}\WebGL). There you will find the generated JavaScript files and an HTML page that can be launched within a browser.
Launching the UI Application
If your browser allows the access to local files, you can directly open the generated HTML page with the browser. Otherwise, if access to local files is not allowed for security reasons, please copy all files to a web server. Alternatively, you can use a local web server, e.g. HFS - HTTP File Server.
IMPORTANT
If you want to deploy the generated code, please ensure that the attribute Obfuscation in the profile is set true and the file _debug_only_dont_deploy.txt is removed from the output directory containing the generated code.