[X3D-Public] HTML5-X3D meeting minutes

[Joe D Williams]

>
> 4.  Joe has been working to build a generic example illustrating use 
> of external SAI javascript in HTML page that talks to an X3D scene. 
> So far he has one example that doesn't work properly in the various 
> players.

Hi All,

Please let me try again these "External" SAI examples. External means 
that the X3D SAI is communicating with an external entity or host. In 
this case the host is the HTML/XHTML/XML DOM.

Following are two very general examples:

1. DOM=>SAI for propagating a click in the DOM into the SAI;
2. SAI=>DOM for propagating a click in the SAI into the DOM.

These show examples of X3D SAI behaviours as might be expected by 
interpreting the X3D SAI ecmascript interfaces defined in 19775-2 (SAI 
abstract) and 19777-1 (SAI ECMAScript).

This is about the X3D plugin connection as it applies to how the host 
HTML/XHTML browser creates the HTML/XHTML DOM and allows access to the 
embedded object represented by an X3D plugin and its content. 
Specifically, here we discuss the the X3D SAI interfaces with the host 
HTML/XML DOM when the document and the embedded object are live. 
Before that time, host browser processing to create the DOM and 
instantiate a plugin context is defined in the HTML5 standard. 
Operations controlled by parsing, DOM-building, and plugin 
instantiation steps are described by operation of <embed> and <object> 
elements.

HTML - example object element
<object id="objectDOMID"
 type='application/x3d+xml'
 data='content.x3d'>
 <param name='src' value='content.x3d'>
 <param name='anyInterfaceKeyword' value='anyString'>
  fallback html
</object>


DOM=>SAI
First, the DOM=>SAI part, where the DOM is sending events to the X3D 
scene. When an HTML button is clicked, the DOM executes a script which 
causes a change in the X3D scene.

The X3D scene includes htmlclickreporting strings which will change 
from original to modified text:

X3D - original reporting Text:
<Shape>
 <Text DEF="htmlclickreporting"
  string='"HTML Clicks","reported here"'>
</Shape>

X3D - modified reporting Text:
 <Text DEF="htmlclickreporting"
  string='"Hello","From HTML Button1"'>
or
 <Text DEF="htmlclickreporting"
  string='"Goodbye","From HTML Button2"'>

HTML  - user interface buttons
<button onclick="Button1Clicked();">Hello</button>
<button onclick="Button2Clicked();">Goodbye</button>

HTML - DOMtoSAI <script> - update X3D reporting text:
// obtain interface to current X3D scene
x3dbrowser = document.objectDOMID.getBrowser();
thex3dscene = x3dbrowser.currentScene();

// modify text in X3D scene
function Button1Clicked(){
x3dBrowser.beginUpdate();
thex3dText = thex3dscene.getNamedNode('htmlclickreporting');
thex3dText.string[0] = "Hello";
thex3dText.string[1] = "From HTML Button1";
x3dBrowser.endUpdate();}

function Button2Clicked(){
x3dBrowser.beginUpdate();
thex3dText = thex3dscene.getNamedNode('htmlclickreporting');
thex3dText.string[0] = "Goodbye";
thex3dText.string[1] = "From HTML Button2";
x3dBrowser.endUpdate();}

When the HTML button is clicked its DOM onclick script is executed. 
The X3D scene is updated according to which HTML button was selected.


SAI=>DOM
Now the SAI=>DOM part, where an interaction event is initiated in the 
X3D scene and passed out into the DOM. We create two buttons in the 
x3d scene that when clicked, an event is passed to the DOM that causes 
some HTML text to change.

X3D - boxes with sensors
<TouchSensor DEF='Sensor1'/>
<Shape USE='button1' />

<TouchSensor DEF='Sensor2'/>
<Shape USE='button2' />

The HTML document includes x3dclickreporting which will change from 
original to modified text:

HTML - original cick reporting Text
<p id="x3dclickreporting">X3D Clicks reported here.</p>

HTML -modified click reporting Text
<p id="x3dclickreporting">Hello from X3D Sensor1</p>
or
<p id="x3dclickreporting">Goodbye from X3D Sensor2</p>

HTML - SAItoDOM <script> - Initialize SAI=>DOM callbacks
// obtain interface to current X3D scene
x3dbrowser = document.objectDOMID.getBrowser();
thex3dscene = x3dbrowser.currentScene();

// Set up X3D Sensors to route callback event to DOM
// add DOM callback to Sensor1
node = thex3dscene.getNamedNode('Sensor1');
field = node.getField("touchTime");
field.addFieldCallback(Sensor1Touched,touchTime);
// add DOM callback to Sensor2
node = thex3dscene.getNamedNode('Sensor2');
field = node.getField("touchTime");
field.addFieldCallback(Sensor2Touched,touchTime);

HTML - SAItoDOM <script> - callback functions set HTML text
function Sensor1Touched(f, t){
 document.x3dclickreporting.innerHTML =
"Hello from X3D Sensor1";}

function Sensor2Touched(f, t){
  document.x3dclickreporting.innerHTML =
"Goodbye from X3D Sensor2";}

When Sensor1 or Sensor2 in the X3D scene is clicked the callback 
script identifier is sent to the DOM and the DOM script is executed, 
causing the HTML reporting text to change.


My best reference for this so far is derived from my take on Tony's 
AjaX3D now at:
http://www.hypermultimedia.com/ajax3d/index.htm
which does the SAI<=>DOM operations similar to shown above (still runs 
in latest IE with Flux), combined with reading the X3D SAI ecmascript 
standard.

>
> Please post what examples you can.  We will meet later this week to 
> review what is available and see if we can provide a good external 
> example that is player+browser independent.  That special Scene 
> Access Interface (SAI) example-test call is Friday 1000 pacific.
>

I hope we can discuss this then.

Thanks and Best Regards,
Joe

>
> Our next regular meeting is in 1 week, Tuesday 26 January 2010
> 0800 pacific (1700 Germany).
>
> All comments welcome, thanks for the steady progress.
>
> all the best, Don