Difference between revisions of "X3D/HTML Integration"

From Web3D.org
Jump to: navigation, search
Line 85: Line 85:
 
</pre>
 
</pre>
  
−
Let's concentrate on a single line in this example:
+
Let's concentrate on a single line from this example:
 
<pre>
 
<pre>
 
         <PositionInterpolator DEF="move" key="0 0.5 1" keyValue="-2 -2.5 0  -2 2.5 0  -2 -2.5 0" onoutputchange="snapBall(event)"></PositionInterpolator>
 
         <PositionInterpolator DEF="move" key="0 0.5 1" keyValue="-2 -2.5 0  -2 2.5 0  -2 -2.5 0" onoutputchange="snapBall(event)"></PositionInterpolator>
 
</pre>
 
</pre>
 +
 +
It is clear that this is essentially an XML encoded line. It has the following structure:
 +
 +
* The element type "PositionInterpolator" with attributes of:
 +
** DEF, with the name "move"
 +
** key, with three values
 +
** keyValue, with three sets of three values (the field type is MFVec3f)
 +
** onoutputchange, with a function call reference
 +
 +
The last attribute above, however, is not part of the current X3D V3.3 specification. How does it arise? How might it be specified?
 +
 +
If X3D is fully integrated into HTML there will be a DOM extension associated with the specification. This extension might define a "PositionInterpolator" interface, which would inherit, probably indirectly, from the "HTML Element" interface.
 +
 +
So let's look at this interface. Let's check the WhatWG specification for the [https://html.spec.whatwg.org/multipage/dom.html#htmlelement HTMLElement] interface. I reproduce the listing from 8th June 2016 here:
 +
 +
<pre>
 +
[Constructor]
 +
interface HTMLElement : Element {
 +
  // metadata attributes
 +
  [CEReactions] attribute DOMString title;
 +
  [CEReactions] attribute DOMString lang;
 +
  [CEReactions] attribute boolean translate;
 +
  [CEReactions] attribute DOMString dir;
 +
  [SameObject] readonly attribute DOMStringMap dataset;
 +
 +
  // user interaction
 +
  [CEReactions] attribute boolean hidden;
 +
  void click();
 +
  [CEReactions] attribute long tabIndex;
 +
  void focus();
 +
  void blur();
 +
  [CEReactions] attribute DOMString accessKey;
 +
  readonly attribute DOMString accessKeyLabel;
 +
  [CEReactions] attribute boolean draggable;
 +
  [CEReactions, SameObject, PutForwards=value] readonly attribute DOMTokenList dropzone;
 +
  [CEReactions] attribute HTMLMenuElement? contextMenu;
 +
  [CEReactions] attribute boolean spellcheck;
 +
  void forceSpellCheck();
 +
};
 +
HTMLElement implements GlobalEventHandlers;
 +
HTMLElement implements DocumentAndElementEventHandlers;
 +
HTMLElement implements ElementContentEditable;
 +
</pre>
 +
 +
The important part for our purposes are the last three lines. That is, what other interfaces HTMLElement implements.
 +
 +
There are three:
 +
* GlobalEventHandlers
 +
* DocumentAndElementEventHandlers
 +
* ElementContentEditable
 +
 +
Do any of these cover the "onoutputchange". No they don't.

Revision as of 09:24, 9 June 2016

Example to investigate X3D/HTML specification issues

As an illustration consider the X3DOM example "OnOutputChange". The source for this example is reproduced below. 

<html>
<head>
    <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
    <title>X3Dom Example OnOutputChange Event</title>
    <script type='text/javascript' src='http://x3dom.org/release/x3dom.js'> </script>
    <link rel='stylesheet' type='text/css' href='http://www.x3dom.org/download/x3dom.css'/>


	<script>
	/**
	 * Uses the values of a PositionInterpolator to move another ball,
	 * but instead of just routing the values, round the y component.
	 * Thus the second ball moves like he is snapping to an invisible raster
	 */
	function snapBall(eventObject)
	{
		//Check if type and output of the eventObject are correct
		//There may be multiple eventObjects but only one of them contains the value we need
		if(eventObject.type != "outputchange" || eventObject.fieldName != "value_changed")
			return;
		
		//Get the value...
		var value = eventObject.value;
		//...and create a copy with the manipulated coordinates
		var newPos = new x3dom.fields.SFVec3f(2, Math.round(value.y), 0);
	
		//Set the newly created array as new position for the second ball
		document.getElementById("ball2").setAttribute('translation', newPos.toString());
		
		//Show debug information (of course the data can be used to control non x3dom-objects, too)
		document.getElementById("posInterp").innerHTML = Math.round(value.y*100)/100;
		document.getElementById("posSnaped").innerHTML = newPos.y;
	}
	</script>

</head>
<body>

<h1>Animate Objects with X3DOM!</h1>
<p>
    Learn how to manipulate objects using values from the output of other objects.
</p>

<div>
Y-Position of output field (routed to red ball): <span id="posInterp"></span><br>
Calculated Y-Position (set directly to blue ball): <span id="posSnaped"></span>
</div>

<x3d width='500px' height='400px'>
    <scene>
        <transform DEF="ball" translation='-2 0 0'>
        <shape>
            <appearance>
                <material diffuseColor='1 0 0'></material>
            </appearance>
            <sphere></sphere>
        </shape>
        </transform>
        
        <transform DEF="ball2" translation='2 0 0' id="ball2">
        <shape>
            <appearance>
                <material diffuseColor='0 0 1'></material>
            </appearance>
            <sphere></sphere>
        </shape>
        </transform>

        <timeSensor DEF="time" cycleInterval="4" loop="true"></timeSensor>
        <PositionInterpolator DEF="move" key="0 0.5 1" keyValue="-2 -2.5 0  -2 2.5 0  -2 -2.5 0" onoutputchange="snapBall(event)"></PositionInterpolator>
        
        <Route fromNode="time" fromField ="fraction_changed" toNode="move" toField="set_fraction"></Route>
        <Route fromNode="move" fromField ="value_changed" toNode="ball" toField="translation"></Route>
    </scene>
</x3d>


</body>
</html>

Let's concentrate on a single line from this example: 

        <PositionInterpolator DEF="move" key="0 0.5 1" keyValue="-2 -2.5 0  -2 2.5 0  -2 -2.5 0" onoutputchange="snapBall(event)"></PositionInterpolator>

It is clear that this is essentially an XML encoded line. It has the following structure:

  • The element type "PositionInterpolator" with attributes of:
    • DEF, with the name "move"
    • key, with three values
    • keyValue, with three sets of three values (the field type is MFVec3f)
    • onoutputchange, with a function call reference

The last attribute above, however, is not part of the current X3D V3.3 specification. How does it arise? How might it be specified?

If X3D is fully integrated into HTML there will be a DOM extension associated with the specification. This extension might define a "PositionInterpolator" interface, which would inherit, probably indirectly, from the "HTML Element" interface.

So let's look at this interface. Let's check the WhatWG specification for the HTMLElement interface. I reproduce the listing from 8th June 2016 here: 

[Constructor]
interface HTMLElement : Element {
  // metadata attributes
  [CEReactions] attribute DOMString title;
  [CEReactions] attribute DOMString lang;
  [CEReactions] attribute boolean translate;
  [CEReactions] attribute DOMString dir;
  [SameObject] readonly attribute DOMStringMap dataset;

  // user interaction
  [CEReactions] attribute boolean hidden;
  void click();
  [CEReactions] attribute long tabIndex;
  void focus();
  void blur();
  [CEReactions] attribute DOMString accessKey;
  readonly attribute DOMString accessKeyLabel;
  [CEReactions] attribute boolean draggable;
  [CEReactions, SameObject, PutForwards=value] readonly attribute DOMTokenList dropzone;
  [CEReactions] attribute HTMLMenuElement? contextMenu;
  [CEReactions] attribute boolean spellcheck;
  void forceSpellCheck();
};
HTMLElement implements GlobalEventHandlers;
HTMLElement implements DocumentAndElementEventHandlers;
HTMLElement implements ElementContentEditable;

The important part for our purposes are the last three lines. That is, what other interfaces HTMLElement implements.

There are three:

  • GlobalEventHandlers
  • DocumentAndElementEventHandlers
  • ElementContentEditable

Do any of these cover the "onoutputchange". No they don't.

Retrieved from "https://web3d.org./wiki/index.php?title=X3D/HTML_Integration&oldid=9380"