View source for Configuring JASigning for HTML5 web pages

[[Main Page|Home]] >> [[JASigning]]

== JASigning Development ==

The [[JASigning]] (Java Avatar Signing) software was a reimplementation of earlier work based on C++ and Visual Basic. [[JASigning]] uses Java to create freestanding applications and web applets that can be scripted through JavaScript on web pages. [[SiGML]] data is converted to motion data for animation using the [[Animgen]] software, written in C++. Animation data is rendered using an OpenGL renderer written in Java using the JOGL bindings.

With the advent of '''HTML5''' and '''WebGL''' it has become practical to create software for use in web pages that is not dependent on Java. This development has become essential as Java is now deprecated in browsers and unsupported on major browsers such as '''Chrome''' and '''Opera'''.

Development is taking place in a number of stages:

* Introduction of a WebGL renderer in place of OpenGL via Java. [[SiGML]] processing continues via a simplified Java applet.
* [[SiGML]] processing delegated to an [[Animgen]] server located at UEA using a CGI script.
* Preprocessing in JavaScript of the [[HamNoSys]] variant of [[SiGML]] to the Gestural variant.
* Fully client-side operation using a JavaScript implementation of [[Animgen]].

All but the final stage has been completed (2017-02).

== JASigning Installation ==

An installation of [[JASigning]] contains a number of index web pages, web pages with embedded signing avatars, and several directories containing resources. 
Here we describe only elements required for HTML5 software. More can be seen in a [[JASigning Local Installation]].

* '''avatars''' contains JARs with avatar definition data.
* '''sigml''' contains example [[SiGML]] files.
* '''cwa''' contains scripts used by HTML5 pages and further example web pages.

The use of CORS allows an installation to be used from other servers and even, in some circumstances, from files on a local file system.
See [[JASigning Local Installation]].

== CWASA (CoffeeScript Web Applet Signing Avatar) ==

The CWASA software is largely written in CoffeeScript which generates JavaScript that is combined into a single script file in the '''cwa''' directory.
CWASA is configured using settings in JSON objects. Up to four sources of settings are consulted, with earlier settings overriding later ones:

* Initial settings provided as an optional argument when the CWASA software is initialised. This allows web pages to be self contained.
* Client settings held in an optional file '''clientcfg.json''' at the same level as the webpage. Normally bypassed if Initial settings are given.
* Installation settings held in a file '''cwacfg.json''' in the '''cwa''' folder of the installation.
* Installation-depended default settings applied by the CWASA initialisation code.

Parameters are in three classes:

* Settings determining which configuration files are consulted.
* Installation settings providing locations for installation directories.
* Settings for configuring a GUI for one or more avatar panels.

Full example configuration files are given below. Initial settings are provided using a similar JavaScript JSON object as in '''appletframe.html''' in BSLExamples ([[JASigning Local Installation]]).
Unrecognised settings (such as '''description''') are ignored without comment.

== Configuration Consultation Settings ==

Users can use these settings to change the normal pattern of consulting configuration files:

* '''useClientConfig''': Controls whether '''clientcfg.json''' is consulted. Default '''true''' but bypassed if Initial settings are given unless explicitly overridden.
* '''useCwaConfig''': Controls whether '''cwacfg.json''' is consulted. Default '''true'''.

Hence '''useClientConfig''' should be set by pages using Initial settings when it is also desired to consult a '''clientcfg.json''' file.

== CWASA Installation Settings ==

It is unlikely that users will need to change installation settings as these will be picked up from the installation when initialising CWASA. The settings are:

* '''jasBase''': Base installation directory.
* '''jasVersionTag''': Parameter used by deprecated Java applet.
* '''sigmlBase''': Directory for example [[SiGML]] files. Resolved relative to '''jasBase'''.
* '''avJARBase''': Directory for JAR files containing avatar definitions. Resolved relative to '''jasBase'''.
* '''avJSONBase''': Directory for JSON files containing avatar definitions. Resolved relative to '''jasBase'''.
* '''useAvatarJARs''': Flag choosing between JAR and JSON representation for avatars. Currently needs to be set '''true'''.
* '''animgenFPS''': Frames per Second of generated animation data. Defaults to '''50'''.
* '''animgenServer''': Path to CGI script for [[Animgen]] server.

If no [[Animgen]] server is specified, the deprecated Java applets will be used. The default is to use a server, 
but a setting of '''null''' for '''animgenServer''' will allow use of applets on supported browsers.

== CWASA GUI Settings ==

A CWASA web page can display several avatars identified as '''av0''', '''av1''', etc. Each avatar has an associated list of possible avatar characters to be displayed. 
Named avatar lists can be included in the CWASA parameters. By default, '''avs''' names the list of standard avatars that can be used freely: '''anna''', '''marc''', and '''francoise'''.
The list '''avsfull''' contains all available avatars, but should only be used for evaluation.

Parameters for the avatars are given by entries in '''avSettings''', an array of JSON objects. The settings for an avatar are:

* '''width''': Width in pixels of avatar canvas. This is mainly used when a complete GUI is generated automatically.
* '''height''': Height in pixels of avatar canvas. This is mainly used when a complete GUI is generated automatically.
* '''avList''': Name of parameter holding avatar list. This will be '''avs''' by default.
* '''initAv''': Name of avatar that is loaded initially. Should normally be already present in the '''avList'''.
* '''background''': By default the canvas will have a transparent background but valid text for a style background in HTML can be provided. Set to '''null''' to force a transparent background.
* '''initCamera''': Nine numbers that define the initial camera position when the avatar is loaded.

The remaining parameters are mostly needed when a GUI is generated automatically as a full panel:

* '''allowFrameSteps''': Includes buttons to suspend and resume playing, and to step forward and backwards, a frame at a time.
* '''initSiGMLURL''': Initial value for URL of [[SiGML]] file to display. No field or URL play button is displayed if the value is missing or '''null'''.
* '''allowSiGMLText''': Flag selecting whether a field for entry of [[SiGML]] text is displayed. No field or text play button is displayed if the value is '''false'''.

== CWASA Configuration Examples ==
=== Example: cwa/cwacfg.json ===
Default installation configuration:
 {
   "description"     : "========  CWASA installation configuration data  ========",

   "jasBase"         : "http://vhg.cmp.uea.ac.uk/tech/jas/vhg2017/",
   "jasVersionTag"   : "vhg2017",

   "sigmlBase"       : "sigml",
   "avJARBase"       : "avatars",
   "avJSONBase"      : "avjson",
   "useAvatarJARs"   : true,

   "animgenFPS"      : 50,
   "animgenServer"   : "http://vhg.cmp.uea.ac.uk/cgi-bin/animgen/animgenserver.pl",

   "avs" : [
     "anna", "marc", "francoise"
   ],

   "avsfull" : [
     "anna",
     "beatrice", "candy", "darshan", "francoise", "genie", "luna",
     "marc", "max", "monkey", "otis", "robotboy", "siggi"
   ],

   "avSettings" : [
     {
       "description":      "Default if client configuration is missing or restricted",
       "width":            384,
       "height":           320,
       "avList":           "avs",
       "initAv":           "anna",
       "initCamera":       [ 0, 0.23, 3.24, 5, 18, 30, -1, -1 ],
       "allowFrameSteps":  true,
       "initSiGMLURL":     "iTakeMug.sigml",
       "allowSiGMLText":   true
     }
   ]
 }

=== Example: cwa/clientcfg.json ===
Configuration for Clients using the (deprecated) Java applet:
 {
   "description"     : "========  CWASA client configuration data. No Animgen server ========",

   "animgenServer": null,

   "avSettings" : [
     {
       "width":            384,
       "height":           320,
       "avList":           "avsfull",
       "initAv":           "luna",
       "initSiGMLURL":     "scotland-H.sigml"
     },
     {
       "width":            228,
       "height":           208,
       "background":       "Salmon",
       "avList":           "avs",
       "initAv":           "francoise",
       "allowFrameSteps":  false,
       "allowSiGMLText":   false,
       "initSiGMLURL":     "welkom-ngt.sigml"
     }
   ]
 }

== CWASA GUI Creation ==
There are four approaches to incorporating the CWASA software on a web page. The installation contains example web pages, built using the different approaches:

* Complete GUI: '''WebGLAvTwo.html'''. A single '''div''' is populated with a panel containing an avatar canvas and GUI elements.
* GUI Panels: '''CWASA-plus-gui-panel.html'''. A '''div''' for the avatar canvas and a separate '''div''' for the GUI.
* GUI Elements: '''CWASA-plus-gui-elements.html'''. A number of '''div'''s and '''span'''s arranging different sections of the GUI.
* Bespoke GUI: '''CWASA-plus-bespoke-gui.html'''. Individual HTML elements defining an equivalent GUI.

The first example displays two avatars on a page.
The first two approaches select elements according to layout parameters in the configuration, while the final approaches choose elements directly.
The final three examples have very similar appearance, illustrating the alternative approaches. 

A CSS stylesheet controls appearance in all cases. The '''class''' attribute is also used by the CWASA script to identify elements of the GUI
for attaching handlers and to change enabled state during animation. For a page that might use the Java applet it is necessary to include one instance of:
 <pre><div class="SToCA"></div></pre>
This will be ignored if an [[Animgen]] server is used or the browser does not support Java.

A '''div''' or '''span''' that forms part of the CWASA GUI will have a class which identifies the GUI component and the avatar concerned. For example, a complete GUI panel for the first avatar would be specified by:
 <pre><div class="CWASAPanel av0"></div></pre>

=== Complete GUI ===
* '''CWASAPanel''': A GUI, '''CWASAGUI''', to the left of an avatar canvas, '''CWASAAvatar'''.
=== GUI Panels ===
* '''CWASAGUI''': A combination of GUI elements, some omitted according to the avatar settings in the configuration.
* '''CWASAAvatar''': A canvas for a WebGL avatar. The canvas fills the size of the enclosing element.
=== GUI Elements ===
* '''CWASAAvMenu''': A menu listing avatars in the expanded '''avList''' for the avatar.
* '''CWASASpeed''': Controls for decreasing, increasing, and resetting the speed of animation.
* '''CWASASiGMLURL''': Input to hold a SiGML URL. Omitted by '''CWASAGUI''' if no initial URL is given.
* '''CWASASiGMLText''': Text area for entry of SiGML. Omitted by '''CWASAGUI''' if SiGML text is not allowed.
* '''CWASAPlay''': Play and Stop buttons. Only included if corresponding SiGML URL or Text fields are present.
* '''CWASAPlayExtra''': Suspend and Resume buttons. Only included if Play buttons are present. Omitted by '''CWASAGUI''' if frame steps are not allowed.
* '''CWASAFrames''': Frame single step buttons. Only included if Play buttons are present. Omitted by '''CWASAGUI''' if frame steps are not allowed.
* '''CWASAProgress''': Display of current sign and frame number, sign gloss, and actual FPS.
* '''CWASAStatus''': Display of status information.
=== Bespoke GUI ===
Users are encouraged to use the defined GUI elements as these are not expected to change significantly. Localisation does not require the use of a bespoke GUI.
For details on creating a bespoke GUI, if desired, examine the HTML file '''CWASA-plus-bespoke-gui.html'''.  
Essentially, the example shows the HTML generated for GUI elements by CWASA. In order that the CWASA code will link to the GUI HTML elements it is necessary to use the appropriate classes where an avatar code is also given. 


Regrettably, some of the low-level GUI elements use classes with names that might clash with those already in use in an existing application.

Some examples illustrate that certain GUI elements, such as buttons, menus, and output fields, can be duplicated. CWASA will copy information to all fields and enable and disable all duplicated buttons.

== CWASA Web Pages ==

To use CWASA, include the following CSS file and JavaScript code, relative to the JASigning installation:
<pre><link rel="stylesheet" href="http://vhg.cmp.uea.ac.uk/tech/jas/vhg2017/cwa/cwasa.css" />
<script type="text/javascript" src="http://vhg.cmp.uea.ac.uk/tech/jas/vhg2017/cwa/allcsa.js"></script></pre>
The method '''CWASA.init();''' should be called on loading the body of the page:
<pre><body onload="CWASA.init();"></pre>
Initial configuration parameters can be specified using a JSON object passed as a parameter to '''CWASA.init'''. 

All methods to be used are found in the '''CWASA''' object. Examples of direct calls to CWASA are illustrated in the BSLExamples demo mentioned above.


----
[[Main Page|Home]] >> [[JASigning]]